/* Home page only. Shared components live in site.css. */

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;background:var(--obsidian);color:var(--bone);overflow:clip;isolation:isolate;
  --fg:var(--bone);--fg-strong:var(--bone);--fg-muted:rgba(247,242,232,.74);--rule:rgba(245,237,225,.16);--eyebrow:var(--gold-deep);
  --btn-bg:var(--bone);--btn-fg:var(--ink);--btn-bd:var(--bone);--btn-hover:var(--gold)}
.hero .btn:hover{color:var(--ink)}
.hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 45%;opacity:.62}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 34% 48% at 82% 54%,rgba(15,15,14,.62),rgba(15,15,14,0) 72%),
  linear-gradient(180deg,rgba(15,15,14,.5) 0%,rgba(15,15,14,.1) 35%,rgba(15,15,14,.25) 60%,rgba(15,15,14,.92) 100%),
  linear-gradient(100deg,rgba(15,15,14,.78) 0%,rgba(15,15,14,.45) 45%,rgba(15,15,14,.05) 75%)}
.hero__in{position:relative;z-index:2;display:grid;gap:clamp(20px,2.4vw,30px);align-content:end;padding-top:calc(var(--head-h) + 40px);padding-bottom:clamp(40px,5vw,72px);max-width:calc(var(--wrap) + var(--gut)*2)}
.hero h1{font-size:clamp(2.4rem,4.7vw,4.4rem);line-height:1.05;max-width:30ch;font-weight:500;letter-spacing:-.01em}
.hero h1 em{color:var(--gold)}
.hero__lede{max-width:46ch;color:rgba(247,242,232,.8)}
.eyebrow--hero{color:var(--gold-deep)}
.hero__creds{position:relative;z-index:2;border-top:1px solid rgba(245,237,225,.14);background:rgba(15,15,14,.45)}
.creds-line{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(18px,2.6vw,40px);padding:18px 0;margin:0;font-family:var(--sans);font-size:.86rem;letter-spacing:.02em;color:rgba(247,242,232,.78);font-variant-numeric:tabular-nums;text-align:center}
.creds-line span{display:inline-flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.creds-line span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold-deep);opacity:.9}
@media (max-width:640px){.creds-line{font-size:.8rem;gap:8px 16px}.creds-line span+span::before{display:none}}
/* the monogram writes itself: each piece is drawn as a stroke along its true silhouette,
   then fills to the complete logo (gold and bone), and the stroke fades */
.hero__mono{position:absolute;z-index:1;right:clamp(0px,2vw,40px);top:calc(50% + 10px);transform:translateY(-50%);width:clamp(240px,28vw,460px);height:auto;pointer-events:none;opacity:.92;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)) drop-shadow(0 14px 28px rgba(0,0,0,.4))}
.hero__mono path{stroke-width:.9;stroke-linejoin:miter;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hero__mono .mg{fill:#CDB58C;stroke:#CDB58C}
.hero__mono .mi{fill:#E3D9C8;stroke:#E3D9C8}
.hero__mono .mo{fill:none;stroke:rgba(15,15,14,.35);stroke-width:2;stroke-dasharray:none;opacity:0}
html.js .hero__mono path{fill-opacity:0;stroke-dashoffset:1;animation:draw 1.4s var(--ease) .2s forwards,inkfill 1s ease 1.45s forwards,strokeout .8s ease 2.2s forwards}
html.js .hero__mono .mg2{animation-delay:.6s,1.6s,2.3s}
html.js .hero__mono .mi{animation-delay:.35s,1.55s,2.25s}
html.js .hero__mono .mo{fill-opacity:0;stroke-dashoffset:0;animation:monoline .6s ease 2.25s forwards}
@keyframes monoline{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes inkfill{to{fill-opacity:1}}
@keyframes strokeout{to{stroke-opacity:0}}
html[data-motion="off"] .hero__mono path{stroke-dashoffset:0!important;fill-opacity:1!important;stroke-opacity:0!important}
html[data-motion="off"] .hero__mono .mo{opacity:1!important}
@media (max-width:860px){.hero__mono{display:none}}
@media (max-width:520px){.hero__in{padding-top:calc(var(--head-h) + 24px)}.hero h1{font-size:clamp(2.3rem,11vw,3.2rem)}}

/* ---------- who ---------- */
.who__fig{max-width:520px;justify-self:end}
@media (max-width:860px){.who__fig{justify-self:start;max-width:none;aspect-ratio:4/3}.who__fig img{object-position:50% 0}}

/* ---------- principles (dark) ---------- */
.principles li{display:grid;gap:14px;align-content:start;padding:26px 0 0;border-top:1px solid var(--rule)}
.principles h3{font-size:clamp(1.4rem,1.9vw,1.75rem)}
.principles p{color:var(--fg-muted);max-width:36ch}
.principles__foot{margin-top:clamp(40px,5vw,64px);font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,1.7vw,1.5rem);color:var(--gold-deep);max-width:40ch}

/* ---------- ledger (four doorways) ---------- */
.ledger{display:grid;border-top:1px solid var(--rule)}
.ledger li{border-bottom:1px solid var(--rule);position:relative}
.ledger li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .8s var(--ease-out)}
.ledger li:hover::after,.ledger li:focus-within::after{width:100%}
.ledger a{display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,1.5fr) 2rem;align-items:start;gap:clamp(16px,2.6vw,40px);padding:clamp(26px,3.4vw,44px) 0;color:inherit}
.ledger .num{font-size:clamp(1.3rem,1.8vw,1.7rem);transition:color .3s}
.ledger__name{display:grid;gap:10px;font-family:var(--display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;line-height:1.05;letter-spacing:-.005em;transition:color .35s}
.ledger__name small{font-family:var(--sans);font-size:.86rem;font-weight:400;line-height:1.4;color:var(--fg-muted);letter-spacing:0}
.ledger a:hover .ledger__name{color:var(--accent-deep)}
.ledger__desc{font-size:1rem;line-height:1.6;color:var(--fg-muted);max-width:52ch;padding-top:.5em}
.ledger__arrow{justify-self:end;width:1.5rem;height:1.5rem;color:var(--fg-muted);opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .5s var(--ease-out),color .3s;align-self:start;margin-top:.4em}
.ledger a:hover .ledger__arrow,.ledger a:focus-visible .ledger__arrow{opacity:1;transform:none;color:var(--accent)}
.ledger__more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(28px,3.6vw,48px)}
@media (max-width:760px){
  .ledger a{grid-template-columns:3rem minmax(0,1fr);grid-template-rows:auto auto;gap:10px 16px;padding:24px 0}
  .ledger__desc{grid-column:2}
  .ledger__arrow{display:none}
}

/* ---------- people: a second portrait crossfades in on hover ---------- */
.people .person figure.swap{position:relative}
.people .person figure.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:opacity 1.1s var(--ease),transform 2s var(--ease-out)}
.people .person figure.swap img:first-child{position:relative}
.people .person figure.swap img:last-child{opacity:0;transform:scale(1.04)}
.people .person:hover figure.swap img:last-child,.people .person:focus-within figure.swap img:last-child{opacity:1;transform:none}
.people .person:hover figure.swap img:first-child{transform:scale(1.02)}
.people .person h3{font-size:clamp(2.2rem,3.4vw,3.2rem)}
.people .person p{max-width:42ch}

/* ---------- quotes band ---------- */
.quotes-band .wrap{display:grid;gap:clamp(24px,3.5vw,40px);justify-items:center;text-align:center}
.quotes{position:relative;display:grid;min-height:clamp(260px,30vw,380px);width:100%;max-width:800px}
.quotes .quote{grid-area:1/1;border-left:0;padding-left:0;padding-top:clamp(30px,3.5vw,44px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s ease,transform .8s var(--ease-out),visibility 0s linear .6s;justify-items:center}
.quotes .quote.is-on{opacity:1;visibility:visible;transform:none;transition-delay:.1s,.1s,0s}
.quotes .quote::before{left:50%;transform:translateX(-50%);top:-.25em;font-size:clamp(3rem,5vw,4.5rem);color:var(--gold);opacity:.9;line-height:1}
.quotes .quote p{font-size:clamp(1.4rem,2.3vw,2.1rem);font-style:italic;font-weight:400;color:var(--bone);line-height:1.32;max-width:34ch;margin-inline:auto}
.quotes .quote cite{color:var(--gold-deep)}
.quotes .quote--long p{font-size:clamp(1.15rem,1.7vw,1.5rem);max-width:52ch;line-height:1.4}
html:not(.js) .quotes .quote{opacity:1;visibility:visible;transform:none;position:static;margin-bottom:40px}
.rot-dots{display:flex;gap:14px;justify-content:center;padding-top:12px}
.rot-dots button{width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;position:relative}
.rot-dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(245,237,225,.3);transition:background .4s}
.rot-dots button::after{content:"";position:absolute;left:0;top:50%;height:1px;width:0;background:var(--gold);transition:width 6s linear}
.rot-dots button[aria-selected="true"]::after{width:100%}
.rot-dots button:hover::before{background:rgba(245,237,225,.7)}
html[data-motion="off"] .rot-dots button::after{transition:none}
html[data-motion="off"] .rot-dots button[aria-selected="true"]::after{width:100%}

/* current industry focus */
.focus{display:grid;gap:8px;padding-top:18px;border-top:1px solid var(--rule)}
.focus p:last-child{display:flex;flex-wrap:wrap;gap:8px 14px;font-family:var(--serif);font-size:1.1rem}
.focus a{color:var(--fg-strong);border-bottom:1px solid var(--rule-strong);transition:border-color .3s,color .3s}
.focus a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
.focus span{color:var(--fg-muted)}
/* carousel arrows */
.rot-nav{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:clamp(24px,3vw,36px)}
.rot-arrow{width:44px;height:44px;display:inline-grid;place-items:center;background:none;border:1px solid rgba(245,237,225,.25);border-radius:50%;color:var(--bone);cursor:pointer;transition:border-color .3s,background .3s}
.rot-arrow:hover{border-color:var(--gold);background:rgba(245,237,225,.06)}
.rot-arrow svg{width:18px;height:18px}
/* live Google rating line under the quotes */
.g-rating{font-family:var(--sans);font-size:.9rem;color:rgba(247,242,232,.7);text-align:center}
.g-rating b{font-weight:500;color:var(--bone)}
.g-rating__stars{color:var(--gold);letter-spacing:.12em;margin-right:4px}
.g-rating a{color:var(--gold-deep);border-bottom:1px solid rgba(222,199,161,.4)}
.g-rating a:hover{color:var(--gold)}
.quotes .quote cite .via{font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,242,232,.45);margin-left:10px}
/* small screens: a counter instead of eight dots */
.rot-count{display:none;font-family:var(--sans);font-size:.85rem;font-variant-numeric:tabular-nums;color:rgba(247,242,232,.7);min-width:4.5ch;text-align:center}
@media (max-width:640px){.rot-dots{display:none}.rot-count{display:inline-block}.rot-nav{gap:18px}}
/* "What the work looks like" cards */
.cases .num-card h3{font-size:clamp(1.25rem,1.6vw,1.45rem);line-height:1.2}
.cases .num-card p:not(.caps){font-size:.95rem;max-width:none}
.cases .num-card .caps{color:var(--accent-deep)}
.cases .num-card p.case__label{font-size:.8rem;font-style:italic;color:var(--fg-muted);line-height:1.45;margin-top:-4px}