/* Mirrors the current Base44 site: pure black, centered 700px columns, Cormorant display, Inter body, #CDC4B9 accent. */
:root{
  --black:#000; --white:#fff; --body:rgba(255,255,255,.65); --soft:rgba(255,255,255,.5); --line:rgba(255,255,255,.1);
  --accent-light:#CDC4B9; --accent-dark:#968771;
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--black);z-index:60}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}
.col{position:relative;max-width:700px;margin:0 auto;text-align:center;
  padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
.col.wide{max-width:1000px}
@media (min-width:1024px){.col{padding-left:max(32px, env(safe-area-inset-left,0px));padding-right:max(32px, env(safe-area-inset-right,0px))}}

/* type */
.display{font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-.025em;margin:0;text-wrap:balance;font-size:2.5rem}
@media (min-width:768px){.display{font-size:3.75rem}}
@media (min-width:1024px){.display{font-size:4.5rem}}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.3em;color:var(--accent-light);margin:0 0 1.5rem;font-weight:400}
@media (min-width:768px){.eyebrow{font-size:1rem;margin-bottom:2.5rem}}
.lines{display:flex;flex-direction:column;gap:1.25rem}
@media (min-width:768px){.lines{gap:2rem}}
@media (min-width:1024px){.lines{gap:2.5rem}}
.lines p{font-size:1.125rem;line-height:1.625;color:var(--body);font-weight:300;text-wrap:pretty}
@media (min-width:768px){.lines p{font-size:1.25rem}}
@media (min-width:1024px){.lines p{font-size:1.5rem}}
.lines p.bright{color:var(--white)}
.lines p.em{font-family:var(--display);font-style:italic;font-weight:500;line-height:1.15;letter-spacing:-.025em;color:var(--white);font-size:1.5rem}
@media (min-width:768px){.lines p.em{font-size:1.875rem}}
@media (min-width:1024px){.lines p.em{font-size:2.25rem}}
.lines p.em.lg{font-size:1.875rem}
@media (min-width:768px){.lines p.em.lg{font-size:2.25rem}}
@media (min-width:1024px){.lines p.em.lg{font-size:3rem}}
h2.display{margin-bottom:2rem}
@media (min-width:768px){h2.display{margin-bottom:3.5rem}}
@media (min-width:1024px){h2.display{margin-bottom:5rem}}
.after{margin-top:2rem}
@media (min-width:768px){.after{margin-top:4rem}}
@media (min-width:1024px){.after{margin-top:6rem}}

/* button */
.btn{display:inline-flex;align-items:center;justify-content:center;width:75%;padding:1rem 1.5rem;border-radius:6px;background:var(--accent-light);color:#000;
  font-family:var(--sans);font-size:.875rem;font-weight:500;letter-spacing:.025em;text-decoration:none;white-space:nowrap;transition:opacity .3s}
.btn:hover{opacity:.9}
@media (min-width:640px){.btn{width:auto}}
@media (min-width:768px){.btn{padding:1.5rem 3rem;font-size:1rem;font-weight:700}}
.textlink{display:inline-block;color:rgba(255,255,255,.7);font-size:1.125rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:4px;transition:color .3s,border-color .3s}
.textlink:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* nav */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--black);border-bottom:1px solid var(--line)}
.site-header .bar{max-width:1280px;margin:0 auto;height:80px;display:flex;align-items:center;justify-content:space-between;position:relative;
  padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-left:12px}
.wordmark{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;font-weight:300;white-space:nowrap}
.logo .wordmark{display:none}
.center-mark{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;pointer-events:none}
@media (min-width:640px){.logo .wordmark{display:block}.center-mark{display:none}}
.links{display:none;align-items:center;gap:2rem}
.links a{font-size:.875rem;font-weight:500;letter-spacing:.025em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.6);transition:color .3s}
.links a:hover,.links a[aria-current]{color:#fff}
.menu-btn{background:none;border:0;color:#fff;padding:8px;cursor:pointer;display:inline-flex}
.mobile-menu{border-top:1px solid var(--line);background:var(--black);padding:16px max(24px, env(safe-area-inset-left,0px))}
.mobile-menu a{display:block;padding:10px 0;font-size:.875rem;font-weight:500;letter-spacing:.025em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.6)}
.mobile-menu a[aria-current]{color:#fff}
@media (min-width:1024px){.links{display:flex}.menu-btn,.mobile-menu{display:none!important}.center-mark{display:none}}
@media (min-width:640px) and (max-width:1023px){.center-mark{display:block}.logo .wordmark{display:none}}

/* sections */
.prose{position:relative;overflow:hidden;padding-block:4rem}
@media (min-width:768px){.prose{padding-block:12rem}}
.prose.light{background:#F4F1EC}
.prose.light .display{color:#000}
.prose.light .lines p{color:rgba(0,0,0,.68)}
.prose.light .lines p.bright{color:#000;font-weight:400}
.prose.light .eyebrow{color:#7d705d}
.prose.panel{background:#171512;border-top:1px solid rgba(205,196,185,.14);border-bottom:1px solid rgba(205,196,185,.14)}
.avatar{width:176px;height:176px;border-radius:50%;object-fit:cover;object-position:center 30%;margin:0 auto 2.5rem;filter:grayscale(1);border:1px solid rgba(205,196,185,.35)}
@media (min-width:768px){.avatar{width:220px;height:220px;margin-bottom:3.5rem}}
.prose.top0{padding-top:0}
@media (min-width:768px){.prose.top0{padding-top:8rem}}
.prose .bgimg{position:absolute;inset:0}
.prose .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.45}
.prose .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.25),rgba(0,0,0,.5))}

.hero{position:relative;min-height:68vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
@media (min-width:768px){.hero{min-height:calc(100vh - 80px)}}
.hero .bg{position:absolute;inset:0;background:url('/img/Kyle-1487.jpg') 70% center/cover no-repeat;opacity:.8}
@media (min-width:768px){.hero .bg{background-position:center 25%}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.55),rgba(0,0,0,.8))}
.hero .col{z-index:2;max-width:896px;padding-block:8rem}
.hero .eyebrow{display:none}
@media (min-width:768px){.hero .eyebrow{display:block}}
.hero h1{margin-bottom:2rem}
@media (min-width:768px){.hero h1{margin-bottom:2.5rem}}
.hero .sub{font-size:1.125rem;line-height:1.625;max-width:672px;margin:0 auto 2.5rem;color:#fff}
@media (min-width:768px){.hero .sub{font-size:1.25rem;margin-bottom:5rem}}
@media (min-width:1024px){.hero .sub{font-size:1.5rem}}
.hero .cta{margin-top:4rem}
@media (min-width:768px){.hero .cta{margin-top:0}}

.statement{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
@media (min-width:768px){.statement{min-height:92vh}}
.statement .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1)}
.statement .bg.desk{display:none}
@media (min-width:768px){.statement .bg.mob{display:none}.statement .bg.desk{display:block}}
.statement::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.55),rgba(0,0,0,.85))}
.statement .col{z-index:2;max-width:1000px}
.statement p{font-family:var(--display);font-weight:500;line-height:1.15;letter-spacing:-.025em;font-size:2.5rem}
@media (min-width:768px){.statement p{font-size:3.75rem}}
@media (min-width:1024px){.statement p{font-size:4.5rem}}
.statement p + p{font-style:italic}

.full-img{width:100%;height:70vh;background-size:cover;background-position:center;background-repeat:no-repeat}
@media (min-width:768px){.full-img{height:100vh;background-size:var(--md-size,contain)}}
.portrait{width:100%;display:flex;justify-content:center}
.portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 18%}
@media (min-width:768px){.portrait img{width:min(100%, calc(100vh - 80px), 1100px)}}
.full-img.short{height:60vh}
@media (min-width:768px){.full-img.short{height:100vh;--md-size:cover}}

/* story sections (Client Stories) */
.story{padding-bottom:2.5rem}
@media (min-width:768px){.story{padding-bottom:6rem}}
.story.plain{padding-top:4rem}
@media (min-width:768px){.story.plain{padding-top:10rem}}
.story .band{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
@media (min-width:768px){.story .band{min-height:100vh}}
.story .band .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.story .band .bg.desk{display:none}
@media (min-width:768px){.story .band .bg.mob{display:none}.story .band .bg.desk{display:block}}
.story .band.gray .bg{filter:grayscale(1)}
.story .band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.7),rgba(0,0,0,.85))}
.story .band .col{z-index:2;padding-block:6rem}
@media (min-width:768px){.story .band .col{padding-block:8rem}}
.story h2.display{margin-bottom:2rem}
.story .lines{gap:1.25rem}
.story .lines p{color:rgba(255,255,255,.85)}
.story .lines p.bold{color:#fff;font-weight:500}
.story .quote{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}
@media (min-width:768px){.story .quote{margin-top:5rem;padding-top:5rem}}
.story .quote .q{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.qtext{font-family:var(--display);font-style:italic;font-weight:300;line-height:1.625;color:rgba(255,255,255,.8);font-size:1.5rem}
@media (min-width:768px){.qtext{font-size:1.875rem}}
@media (min-width:1024px){.qtext{font-size:2.25rem}}
.role{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-light)}

.words{display:flex;flex-direction:column;gap:3rem}
@media (min-width:768px){.words{gap:4.5rem}}
.words figure{margin:0;display:flex;flex-direction:column;gap:1.25rem}
.words .qtext{font-size:1.375rem}
@media (min-width:768px){.words .qtext{font-size:1.75rem}}
.divider{width:48px;height:1px;background:var(--accent-dark);margin:0 auto}

/* conversation */
.conv-hero{padding-top:2.5rem;padding-bottom:.5rem}
@media (min-width:768px){.conv-hero{padding-top:11rem;padding-bottom:3rem}}
.conv-hero .col{max-width:896px}
.conv-hero h1{font-size:1.875rem;margin-bottom:.75rem}
@media (min-width:768px){.conv-hero h1{font-size:3rem;margin-bottom:3.5rem}}
@media (min-width:1024px){.conv-hero h1{font-size:3.75rem}}
.conv-hero .sub{font-family:var(--display);font-style:italic;font-size:1.125rem;line-height:1.625;color:rgba(255,255,255,.8);margin-bottom:.5rem}
@media (min-width:768px){.conv-hero .sub{font-size:1.875rem;margin-bottom:2rem}}
.sched{padding-top:1.5rem;padding-bottom:5rem}
@media (min-width:768px){.sched{padding-top:1.5rem;padding-bottom:9rem}}
.sched .wrap{max-width:1024px;margin:0 auto;padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
.card{border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(205,196,185,.05));box-shadow:0 24px 70px rgba(0,0,0,.28);display:flex;flex-direction:column}
@media (min-width:1024px){.card{flex-direction:row}}
.card aside{padding:2rem;border-bottom:1px solid rgba(255,255,255,.08)}
.card aside{text-align:center}.card aside .dots{align-items:center}
@media (min-width:1024px){.card aside{text-align:left}.card aside .dots{align-items:flex-start}}
@media (min-width:1024px){.card aside{width:320px;flex-shrink:0;padding:2.5rem;border-bottom:0;border-right:1px solid rgba(255,255,255,.08)}}
.card aside h3{font-family:var(--display);font-weight:500;font-size:1.875rem;line-height:1.2;margin:0 0 1.5rem}
@media (min-width:768px){.card aside h3{font-size:2.25rem;margin-bottom:2rem}}
.dots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;font-size:.875rem;color:rgba(255,255,255,.7)}
.dots li{display:flex;align-items:center;gap:.75rem}
.dots li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-light);flex-shrink:0}
.card .flow{flex:1;min-width:0;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;justify-content:center}
@media (min-width:768px){.card .flow{padding:2.5rem}}
.card iframe{width:100%;min-height:640px;border:0;border-radius:12px;background:#fff}
.placeholder{border:1px dashed rgba(255,255,255,.15);border-radius:12px;padding:2.5rem 1.5rem;text-align:center;color:rgba(255,255,255,.5);font-size:.9375rem;line-height:1.7}
.expect{padding-block:4rem}
@media (min-width:768px){.expect{padding-block:8rem}}
.small{font-size:.9375rem;color:var(--soft);line-height:1.7}
.sel{user-select:all;color:var(--accent-light)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding-block:3rem}
.site-footer .bar{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;
  padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
@media (min-width:768px){.site-footer .bar{flex-direction:row;justify-content:space-between;text-align:left}}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1.5rem}
.site-footer a{color:var(--soft);font-size:.875rem;text-decoration:none;transition:color .3s}
.site-footer a:hover{color:#fff}
.site-footer .copy{color:rgba(255,255,255,.3);font-size:.875rem}

/* scroll reveal, like the current site; content stays visible without JS */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}