/* Personal Site UI Kit — page-level styles. Tokens come from ../../colors_and_type.css */
:root{
  --accent:#c9a86a;          /* muted warm gold — the one accent */
  --accent-strong:#dcc086;   /* brighter, for text legibility on black */
  --accent-deep:#b8965a;     /* pressed / deepened */
  --accent-tint:rgba(201,168,106,0.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
body{
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block}

/* page grain — disabled so every section is the same flat pure black as the hero */
.page-grain::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
}
#root{position:relative;z-index:1}

.container{max-width:var(--container-max);margin:0 auto;padding:0 28px}
.narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 28px}

.divider{height:1px;border:none;margin:0;background:linear-gradient(90deg,transparent,var(--color-border) 18%,rgba(255,255,255,.55) 50%,var(--color-border) 82%,transparent);}

/* buttons */
.btn-primary{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:0.005em;color:var(--color-on-light);background:linear-gradient(180deg,#ffffff 0%,#ececec 100%);border:none;padding:.95rem 1.8rem;border-radius:var(--radius-pill);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),inset 0 -1px 0 rgba(0,0,0,0.08),0 8px 22px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06);cursor:pointer;transition:box-shadow .28s var(--ease-soft),background .2s var(--ease-soft);text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;}
.btn-primary:hover{background:linear-gradient(180deg,#ffffff 0%,#f4f4f4 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),inset 0 -1px 0 rgba(0,0,0,0.08),0 14px 32px rgba(0,0,0,0.6),0 0 30px rgba(255,255,255,0.16),0 0 0 1px rgba(255,255,255,0.12);}
.btn-primary:active{box-shadow:inset 0 1px 2px rgba(0,0,0,0.12),0 4px 12px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.06);}
.btn-ghost{font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--color-ink);background:transparent;border:1px solid var(--color-border);padding:.95rem 1.4rem;border-radius:var(--radius-pill);cursor:pointer;transition:border-color .2s var(--ease-soft),color .2s var(--ease-soft);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;}
.btn-ghost:hover{border-color:#fff;color:#fff;}
.hero-link{transition:color var(--dur-ui) var(--ease-soft),border-color var(--dur-ui) var(--ease-soft);}
.hero-link:hover{color:#fff;border-color:#fff;}

.kicker{display:inline-flex;gap:.5rem;align-items:center;font-family:var(--font-body);font-weight:500;font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:.04em;color:var(--color-ink-muted);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-pill);padding:.45rem .85rem;}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8);}

/* trusted-by marquee */
.rule-label{display:flex;align-items:center;gap:18px;font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;text-transform:uppercase;letter-spacing:.16em;color:var(--color-ink-subtle);white-space:nowrap;}
.rule-label::before,.rule-label::after{content:"";display:block;width:48px;height:1px;background:var(--color-border-strong);}
.marquee{overflow:hidden;transform:translateZ(0);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee-track{display:flex;width:max-content;animation:marquee 70s linear infinite;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.marquee-group{display:flex;align-items:center;gap:96px;padding-right:96px;}
.marquee-logo{width:auto;display:block;opacity:.78;transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:opacity var(--dur-ui) var(--ease-soft);}
.marquee-logo:hover{opacity:1;}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}
@media (max-width:640px){.marquee-track{animation-duration:30s;}}

/* entrance animation */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;animation:rise .7s var(--ease-soft) forwards}
}

/* ---- sophisticated hero motion ---- */
/* refined reveal: soft blur + lift, slower & smoother than the base rise */
@keyframes heroReveal{from{opacity:0;transform:translateY(22px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
/* ambient: the silver halo breathes slowly so the black feels alive, not static */
@keyframes heroGlowBreathe{0%,100%{transform:translateY(-50%) scale(1);opacity:.1}50%{transform:translateY(-50%) scale(1.14);opacity:.2}}
/* the reading-path rule draws itself in from the left */
@keyframes dividerDraw{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
/* one-time light sweep across the gold line — a quiet signature, not a loop */
@keyframes goldSheen{0%{background-position:130% 0}100%{background-position:-30% 0}}

@media (prefers-reduced-motion:no-preference){
  #top .rise{opacity:0;animation:heroReveal .95s var(--ease-soft) forwards;}
  .hero-glow{animation:heroGlowBreathe 17s ease-in-out infinite;}
  .hero-divider{opacity:0;transform-origin:left center;animation:dividerDraw 1.1s var(--ease-soft) forwards;}
  .hero-accent{
    background:linear-gradient(100deg,var(--accent-strong) 0%,var(--accent-strong) 38%,#fbeec4 50%,var(--accent-strong) 62%,var(--accent-strong) 100%);
    background-size:240% 100%;background-position:-30% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:goldSheen 1.5s var(--ease-soft) 1.15s 1 both;
  }
}

/* hero responsive — on narrow screens the portrait sits ON TOP as a normal
   block at a balanced size, with the copy stacked below it */
@media (max-width:820px){
  #top{flex-direction:column !important; justify-content:flex-start !important; min-height:auto !important; padding-top:120px; padding-bottom:48px;}
  .hero-portrait{display:none !important;}
  .hero-glow{display:none !important;}
  .hero-scrim{display:none !important;}
  .hero-copy{width:100% !important; max-width:600px !important; margin-top:0 !important;}
}

/* ---- scroll-triggered reveal (Challenge section etc.) ---- */
.reveal{opacity:0;transform:translateY(11px);transition:opacity .72s cubic-bezier(0.25,0.1,0.25,1.0),transform .72s cubic-bezier(0.25,0.1,0.25,1.0);will-change:opacity,transform;}
.reveal.reveal-slow{transition-duration:.95s;}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* left-aligned rule label (section eyebrow with a trailing hairline) */
.rule-label-left{display:flex;align-items:center;gap:18px;font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;text-transform:uppercase;letter-spacing:.16em;color:var(--color-ink-subtle);white-space:nowrap;}
.rule-label-left::after{content:"";display:block;width:64px;height:1px;background:var(--color-border-strong);}

/* challenge section — editorial report grid */
.challenge-title{color:var(--accent-strong);font-weight:700;font-family:var(--font-body);text-transform:uppercase;letter-spacing:0.05em;font-size:1.1rem;line-height:1.4;}
.challenge-block{position:relative;display:grid;grid-template-columns:minmax(0,0.3fr) minmax(0,0.7fr);column-gap:clamp(32px,3.5vw,64px);row-gap:28px;padding-left:36px;}
.challenge-rule{position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--accent-strong) 0%,rgba(201,168,106,0.5) 45%,rgba(201,168,106,0.12) 100%);transform:scaleY(0);transform-origin:top center;}
.challenge-body{display:flex;flex-direction:column;gap:34px;}
.challenge-pull{margin:0;font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--accent-strong);font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.4;letter-spacing:-0.01em;text-wrap:balance;}
@media (prefers-reduced-motion:no-preference){
  .challenge-block.is-visible .challenge-rule{animation:dividerDrawY 1s cubic-bezier(0.25,0.1,0.25,1.0) forwards;}
}
@media (prefers-reduced-motion:reduce){
  .challenge-rule{transform:scaleY(1);}
}
@keyframes dividerDrawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:820px){
  .challenge-block{grid-template-columns:1fr;row-gap:22px;padding-left:26px;}
  .challenge-line2{display:inline-block;margin-top:0.32em;}
}

/* advisory service areas — minimal two-column disclosure grid */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,96px);row-gap:0;border-top:1px solid var(--color-border);}
.svc-item{border-bottom:1px solid var(--color-border);}
.svc-trigger{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;background:none;border:none;cursor:pointer;text-align:left;padding:clamp(26px,3vh,38px) 0 clamp(20px,2.4vh,26px);font-family:inherit;color:inherit;transition:opacity var(--dur-ui) var(--ease-soft);}
.svc-trigger:hover{opacity:1;}
.svc-trigger:hover .svc-name{color:#f0dba6;}
.svc-heading{display:flex;flex-direction:column;gap:13px;min-width:0;}
.svc-name{margin:0;font-family:var(--font-body);font-weight:700;color:var(--accent-strong);font-size:clamp(1.18rem,1.55vw,1.45rem);line-height:1.22;letter-spacing:-0.01em;text-wrap:balance;transition:color var(--dur-ui) var(--ease-soft);}
.svc-sublabel{margin:0;font-family:var(--font-body);font-weight:400;color:var(--color-ink-muted);font-size:clamp(0.95rem,1.1vw,1.04rem);line-height:1.45;text-wrap:pretty;}
.svc-toggle{flex:0 0 auto;position:relative;width:18px;height:18px;margin-top:6px;}
.svc-toggle::before,.svc-toggle::after{content:"";position:absolute;background:var(--accent-strong);transition:transform .35s cubic-bezier(0.25,0.1,0.25,1.0),opacity .35s ease;}
.svc-toggle::before{top:8px;left:0;width:18px;height:2px;}
.svc-toggle::after{left:8px;top:0;width:2px;height:18px;}
.svc-item.is-open .svc-toggle::after{transform:scaleY(0);opacity:0;}
.svc-item.is-open .svc-toggle::before{background:var(--color-ink-muted);}
.svc-disc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(0.25,0.1,0.25,1.0);}
.svc-item.is-open .svc-disc{grid-template-rows:1fr;}
.svc-disc-inner{overflow:hidden;}
.svc-disc-content{padding:clamp(6px,1vh,12px) 0 clamp(34px,4.2vh,48px) 0;display:flex;flex-direction:column;gap:clamp(22px,2.8vh,30px);opacity:0;transform:translateY(6px);transition:opacity .35s ease .06s,transform .35s ease .06s;}
.svc-item.is-open .svc-disc-content{opacity:1;transform:none;}
.svc-desc{margin:0;font-family:var(--font-body);font-weight:400;color:var(--color-ink-muted);font-size:clamp(0.98rem,1.15vw,1.08rem);line-height:1.78;text-wrap:pretty;}
.svc-outcome{margin:0;font-family:var(--font-body);font-weight:600;color:var(--accent-strong);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.55;padding-left:20px;border-left:2px solid var(--accent);text-wrap:pretty;}
@media (prefers-reduced-motion:reduce){
  .svc-disc,.svc-disc-content,.svc-toggle::before,.svc-toggle::after{transition:none;}
}
@media (max-width:820px){
  .svc-grid{grid-template-columns:1fr;}
  .svc-item{border-bottom:1px solid var(--color-border);}
}

/* about — reverse of hero: photo left, narrative right */
.about-grid{display:grid;grid-template-columns:minmax(0,0.39fr) minmax(0,0.61fr);column-gap:clamp(40px,5.5vw,96px);align-items:stretch;}
.about-photo{position:relative;opacity:0;transform:scale(0.97);transition:opacity 1s var(--ease-soft),transform 1.1s var(--ease-soft);}
.about-photo.is-visible{opacity:1;transform:scale(1);}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);}
.about-copy{display:flex;flex-direction:column;justify-content:center;}
.about-para{margin:0;font-family:var(--font-body);font-weight:400;color:var(--color-ink-muted);font-size:clamp(1.06rem,1.3vw,1.2rem);line-height:1.74;text-wrap:pretty;}
.about-pull{margin:6px 0 0 0;font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--accent-strong);font-size:clamp(1.4rem,2.2vw,1.95rem);line-height:1.32;letter-spacing:-0.01em;text-wrap:balance;}
@media (prefers-reduced-motion:reduce){
  .about-photo{transition:none;}
}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;row-gap:clamp(36px,5vh,52px);}
  .about-photo{max-width:330px;margin:0 auto;}
  .about-photo img{height:auto;}
  .about-copy{text-align:left;}
}