/* ============================================================
   Milla Törmälä — personal brand site
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:#F4F2F0;
  --paper-2:#EAE6E1;
  --white:#FFFFFF;
  --ink:#14140F;
  --ink-2:#26261F;
  --ink-soft:#63615A;
  --line:rgba(20,20,15,.14);

  --coral:#FF3D14;        /* fills and large marks */
  --coral-deep:#D82C08;   /* coral grounds that carry white body text (4.9:1) */
  --coral-text:#C9280A;   /* coral TEXT on light grounds (4.9:1 on paper) */
  --cream:#EADCCB;        /* the photograph's own backdrop */
  --yellow:#FFC400;
  --blue:#0B5FD6;

  --wrap:1360px;
  --head-h:84px;
  --gutter:clamp(1.25rem, 4vw, 4rem);

  --f-sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-serif:'Bodoni Moda', 'Didot', Georgia, 'Times New Roman', serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(.98rem,.32vw + .9rem,1.075rem);
  line-height:1.62;
  font-variation-settings:'wdth' 100,'wght' 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--coral);color:var(--ink)}
body{caret-color:var(--coral-text)}
a{text-underline-offset:.18em;text-decoration-thickness:1px}
html{scrollbar-width:thin;scrollbar-color:#c3bcb2 var(--paper-2)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#c3bcb2;border-radius:99px;border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--coral-text)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1.25rem}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:2px}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  font-variation-settings:'wght' 650;color:var(--coral-text);margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.eyebrow--light{color:#fff}

.sec-title{
  font-size:clamp(2.35rem,6.2vw,5rem);
  line-height:.94;letter-spacing:-.035em;
  font-variation-settings:'wght' 800,'wdth' 96;
  text-wrap:balance;
}
.sec-title em{font-family:var(--f-serif);font-style:italic;font-weight:500;color:var(--coral-text);letter-spacing:-.005em;font-variation-settings:'opsz' 88}
.sec-title--light{color:#fff}
.sec-title--light em{color:var(--yellow)}
.section--offduty .sec-title em,.booking__intro .sec-title em{font-weight:600}

.sec-head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-head--split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;max-width:none}
.sec-note{color:var(--ink-soft);margin-top:1.4rem;max-width:46ch}
.section--dark .sec-note{color:rgba(255,255,255,.68)}
.lead{font-size:clamp(1.08rem,.5vw + 1rem,1.3rem);line-height:1.55;font-variation-settings:'wght' 480}

.section{padding-block:clamp(4.5rem,9vw,8.5rem);position:relative}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  padding:.85em 1.5em;border-radius:100px;cursor:pointer;
  font-size:.83rem;letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:'wght' 680;line-height:1;
  transition:transform .3s var(--ease-out),background .25s,color .25s,border-color .25s,box-shadow .3s;
  position:relative;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px -12px rgba(20,20,15,.5)}
.btn:active{transform:translateY(-1px)}
.btn span{transition:transform .3s var(--ease-out)}
.btn:hover span{transform:translate(3px,-3px)}
.btn--coral{--bg:var(--coral);--bd:var(--coral);--fg:var(--ink)}
.btn--coral:hover{--bg:var(--ink);--bd:var(--ink);--fg:#fff}
.btn--paper{--bg:#fff;--bd:#fff;--fg:var(--ink)}
.btn--ink{--bg:var(--ink);--bd:var(--ink);--fg:#fff}
.btn--ghost-light{--bg:transparent;--bd:rgba(255,255,255,.55);--fg:#fff}
.btn--ghost-light:hover{--bg:rgba(255,255,255,.14);--bd:#fff}
.btn--outline{--bg:transparent;--bd:rgba(20,20,15,.45);--fg:var(--ink)}
.btn--outline:hover{--bg:var(--ink);--bd:var(--ink);--fg:#fff}
.btn--lg{padding:1.05em 1.9em;font-size:.86rem}
.btn--sm{padding:.7em 1.15em;font-size:.74rem}
.btn--block{width:100%;justify-content:center}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed;inset:0 0 auto;z-index:100;transition:background .35s var(--ease),box-shadow .35s,border-color .35s;border-bottom:1px solid transparent}
.site-header__inner{
  max-width:var(--wrap);margin-inline:auto;padding:1.15rem var(--gutter);
  display:flex;align-items:center;gap:2rem;
}
.brand{display:flex;flex-direction:column;gap:.2rem;color:var(--ink);flex:none;transition:color .35s}
.brand__name{font-size:.95rem;letter-spacing:.1em;font-variation-settings:'wght' 800;line-height:1}
.brand__role{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-text);font-variation-settings:'wght' 620;transition:color .35s}

.nav{margin-left:auto;display:flex;align-items:center;gap:2rem}
.nav__list{display:flex;gap:clamp(1rem,2vw,2rem)}
.nav__link{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  font-variation-settings:'wght' 620;position:relative;padding-block:.4rem;transition:color .3s;
}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out),background .35s}
.nav__link:hover{color:var(--coral-text)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);background:var(--coral-text)}
.nav__cta-mobile{display:none}
.site-header__cta{flex:none;margin-left:.5rem}

.site-header.is-stuck{background:rgba(244,242,240,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.site-header.is-stuck .nav__link::after{background:var(--coral-text)}
.site-header.is-stuck .site-header__inner{padding-block:.8rem}

.burger{display:none;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer;flex:none}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .3s var(--ease-out),opacity .2s}
.site-header.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.is-open .burger span:nth-child(2){opacity:0}
.site-header.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO — full-bleed photograph, ink type on its own backdrop
   The studio sweep runs #F0DECA -> #AC947A, so near-black type
   sits at 6.5:1 (darkest) to 14:1 (lightest). No scrim needed.
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:var(--cream);color:var(--ink);overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media picture{display:block;height:100%}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:100% 50%;
  animation:heroSettle 1.5s var(--ease-out) both;
}
@keyframes heroSettle{from{transform:scale(1.06)}to{transform:none}}

/* safety wash for extreme aspect ratios — same colour as the sweep, so invisible */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(231,215,197,.5) 0%,
    rgba(231,215,197,.2) 15%,
    rgba(231,215,197,0) 30%);
}

.hero__inner{
  position:relative;z-index:2;flex:1;display:flex;align-items:center;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:calc(var(--head-h) + 1rem) var(--gutter) 0;
}
.hero__copy{max-width:min(500px,44%)}
.hero__title{
  font-size:clamp(2.2rem,4.3vw,4rem);
  line-height:.96;letter-spacing:-.036em;
  font-variation-settings:'wght' 830,'wdth' 96;
  margin-bottom:1.4rem;
}
.hero__title span{display:block;animation:heroLift .9s var(--ease-out) both}
.hero__title span:nth-child(1){animation-delay:.05s}
.hero__title span:nth-child(2){animation-delay:.13s}
.hero__title span:nth-child(3){animation-delay:.21s}
.hero__title em{
  font-family:var(--f-serif);font-style:italic;font-weight:500;
  color:var(--coral-text);font-variation-settings:'opsz' 88;letter-spacing:-.005em;
}
.hero__lede{
  color:var(--ink-2);max-width:44ch;margin-bottom:1.9rem;
  font-size:1.02rem;line-height:1.6;
  animation:heroLift .9s .3s var(--ease-out) both;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;animation:heroLift .9s .38s var(--ease-out) both}
@keyframes heroLift{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero__foot{
  position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--gutter) clamp(1.1rem,2.4vh,1.8rem);
}
.bigname{display:flex;align-items:baseline;justify-content:space-between;gap:.05em;line-height:.8;margin-bottom:1rem}
.bigname__first{
  font-size:13.4vw;font-variation-settings:'wght' 900,'wdth' 118;
  letter-spacing:-.035em;color:var(--ink);
}
.bigname__last{
  font-size:8.9vw;font-variation-settings:'wght' 900,'wdth' 66;letter-spacing:-.008em;
  color:transparent;-webkit-text-stroke:2.5px var(--coral);
}
@media (min-width:1500px){
  .bigname__first{font-size:201px}
  .bigname__last{font-size:134px}
}

.hero__foot-row{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  border-top:1px solid rgba(20,20,15,.28);padding-top:.9rem;
}
.hero__roles{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);font-variation-settings:'wght' 620;line-height:1.7;
}
.socials{display:flex;gap:1.2rem}
.socials a{
  font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  font-variation-settings:'wght' 620;position:relative;
}
.socials a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.socials a:hover::after{transform:scaleX(1)}

/* ---------- fact bar ---------- */
.factbar{background:var(--white);border-bottom:1px solid var(--line)}
.factbar__list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.metaitem{background:var(--white);display:flex;flex-direction:column;gap:.12rem;padding:1.6rem clamp(1rem,1.8vw,1.6rem);color:var(--ink);transition:background .3s var(--ease)}
.metaitem:hover{background:var(--paper)}
.metaitem__label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-variation-settings:'wght' 720;color:var(--coral-text);margin-bottom:.3rem}
.metaitem strong{font-size:.98rem;font-variation-settings:'wght' 720;line-height:1.25;letter-spacing:-.015em}
.metaitem>span:last-child{font-size:.78rem;line-height:1.45;color:var(--ink-soft)}

/* ============================================================
   SUBPAGE HEAD  (media.html)
   ============================================================ */
.subpage .site-header{background:rgba(244,242,240,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.subpage .nav__link::after{background:var(--coral-text)}

.page-head{
  position:relative;background:var(--paper);
  padding:calc(var(--head-h) + clamp(3rem,8vw,6.5rem)) 0 clamp(2.5rem,5vw,4rem);
}
.page-head .wrap{position:relative}
.page-head__rule{
  position:absolute;top:.2rem;right:calc(100% - var(--gutter) + 1.6rem);
  width:100vw;height:3px;background:var(--coral);
}
.page-head__title{
  font-size:clamp(2.35rem,6.2vw,5rem);line-height:.94;letter-spacing:-.035em;
  font-variation-settings:'wght' 800,'wdth' 96;text-wrap:balance;max-width:16ch;
}
.page-head__title em{
  font-family:var(--f-serif);font-style:italic;font-weight:500;color:var(--coral-text);
  letter-spacing:-.005em;font-variation-settings:'opsz' 88;
}
.page-head__note{margin-top:1.4rem;max-width:52ch;color:var(--ink-soft);font-size:1.02rem}

.page-head__facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  margin-top:clamp(2.5rem,5vw,4rem);border-block:1px solid var(--line);
}
.page-head__facts>div{background:var(--paper);padding:1.4rem clamp(1rem,1.6vw,1.4rem);display:flex;flex-direction:column;gap:.3rem}
.page-head__facts dt{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-variation-settings:'wght' 720;color:var(--coral-text)}
.page-head__facts dd{margin:0;font-size:.95rem;line-height:1.35;font-variation-settings:'wght' 620;letter-spacing:-.012em}
.page-head__facts a{border-bottom:1px solid var(--line)}
.page-head__facts a:hover{border-bottom-color:var(--coral-text);color:var(--coral-text)}

.section--cta{background:var(--ink);color:#fff}
.endcta{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:.95rem 0;border-block:0}
.marquee__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee__group{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem}
.marquee b{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;font-variation-settings:'wght' 620;white-space:nowrap}
.marquee i{color:var(--coral);font-style:normal;font-size:.9rem}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ============================================================
   INTRO / STATS
   ============================================================ */
.section--intro{padding-top:clamp(4rem,8vw,7rem)}
.intro{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.intro .eyebrow{grid-column:1/-1}
.intro__statement{
  font-size:clamp(1.85rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:-.032em;
  font-variation-settings:'wght' 760,'wdth' 96;text-wrap:balance;
}
.intro__statement em{font-family:var(--f-serif);font-style:italic;font-weight:500;color:var(--coral-text);font-variation-settings:'opsz' 72}
.intro__side{display:flex;flex-direction:column;gap:1.1rem;color:var(--ink-soft);padding-top:.6rem}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:clamp(3rem,6vw,5.5rem);border-block:1px solid var(--line)}
.stat{background:var(--paper);padding:2rem 1.5rem 1.8rem;display:flex;flex-direction:column;gap:.5rem;transition:background .35s var(--ease)}
.stat:hover{background:var(--coral)}
.stat:hover .stat__num{color:#fff}
.stat:hover .stat__label{color:rgba(255,255,255,.9)}
.stat__num{font-size:clamp(2.6rem,5vw,4rem);line-height:.9;letter-spacing:-.04em;font-variation-settings:'wght' 850,'wdth' 92;color:var(--coral-text);transition:color .35s}
.stat__label{font-size:.8rem;line-height:1.4;color:var(--ink-soft);letter-spacing:.01em;transition:color .35s;max-width:22ch}

/* ============================================================
   DARK SECTION / ROLES
   ============================================================ */
.section--dark{background:var(--ink);color:#fff}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.role{background:var(--ink);padding:clamp(1.7rem,2.6vw,2.4rem);display:flex;flex-direction:column;gap:.85rem;min-height:270px;position:relative;transition:background .4s var(--ease)}
.role:hover{background:var(--coral)}
.role__num{font-size:.72rem;letter-spacing:.2em;font-variation-settings:'wght' 700;color:var(--coral);transition:color .3s}
.role:hover .role__num{color:#fff}
.role__title{font-size:clamp(1.15rem,1.5vw,1.42rem);line-height:1.12;letter-spacing:-.024em;font-variation-settings:'wght' 740}
.role p{font-size:.9rem;color:rgba(255,255,255,.66);line-height:1.55;transition:color .3s}
.role:hover p{color:rgba(255,255,255,.95)}
.role__tag{margin-top:auto;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-variation-settings:'wght' 600;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14);transition:color .3s,border-color .3s}
.role:hover .role__tag{color:rgba(255,255,255,.8);border-top-color:rgba(255,255,255,.35)}
.role--cta{background:var(--coral-deep)}
.role--cta:hover{background:var(--coral-text)}
.role--cta p{color:#fff}
.role--cta .btn{margin-top:auto;align-self:flex-start;--bg:#fff;--bd:#fff;--fg:var(--ink)}
.role--cta .btn:hover{--bg:var(--ink);--bd:var(--ink);--fg:#fff}

/* ============================================================
   TOPICS / ACCORDION
   ============================================================ */
.section--topics{background:var(--paper)}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc h3{margin:0}
.acc__head{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(1.2rem,2.4vw,1.9rem) 0;transition:color .3s;
}
.acc__num,.acc__title{transition:transform .35s var(--ease)}
.acc__head:hover{color:var(--coral-text)}
.acc__head:hover .acc__num,.acc__head:hover .acc__title{transform:translateX(.75rem)}
.acc__num{font-size:.74rem;letter-spacing:.18em;font-variation-settings:'wght' 700;color:var(--coral-text);flex:none;width:2.2rem}
.acc__title{flex:1;font-size:clamp(1.1rem,2.3vw,1.85rem);line-height:1.14;letter-spacing:-.028em;font-variation-settings:'wght' 700,'wdth' 97;text-wrap:balance}
.acc__icon{position:relative;width:34px;height:34px;border:1.5px solid var(--line);border-radius:50%;flex:none;transition:background .3s,border-color .3s,transform .35s var(--ease-out)}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;inset:50% auto auto 50%;background:var(--ink);transition:transform .35s var(--ease-out),background .3s}
.acc__icon::before{width:13px;height:1.8px;transform:translate(-50%,-50%)}
.acc__icon::after{width:1.8px;height:13px;transform:translate(-50%,-50%)}
.acc__head:hover .acc__icon{border-color:var(--coral)}
.acc__head[aria-expanded="true"] .acc__icon{background:var(--coral);border-color:var(--coral);transform:rotate(180deg)}
.acc__head[aria-expanded="true"] .acc__icon::before,
.acc__head[aria-expanded="true"] .acc__icon::after{background:#fff}
.acc__head[aria-expanded="true"] .acc__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.acc__panel.is-open{grid-template-rows:1fr}
.acc__body{overflow:hidden;padding-left:calc(2.2rem + clamp(1rem,2.5vw,2.5rem))}
.acc__panel.is-open .acc__body{padding-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.acc__body>p{max-width:62ch;color:var(--ink-soft)}
.ticks{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}
.ticks li{font-size:.76rem;letter-spacing:.03em;padding:.42rem .9rem;border:1px solid var(--line);border-radius:100px;background:var(--white);font-variation-settings:'wght' 550}

/* ============================================================
   ABOUT
   ============================================================ */
.section--about{background:var(--white)}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5.5rem);align-items:start}
.about__media{position:relative;z-index:0;margin:0}
.about__media img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.about__media::after{content:"";position:absolute;inset:auto -22px -22px auto;width:58%;height:42%;background:var(--yellow);z-index:-1;border-radius:4px}
.about__media figcaption{margin-top:.8rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.about__body .lead{margin:1.6rem 0 1rem;max-width:56ch}
.about__body>p{color:var(--ink-soft);max-width:60ch}

.creds{margin-top:2.6rem;border-top:1px solid var(--line)}
.cred{display:grid;grid-template-columns:112px 1fr;gap:1.2rem;padding:1.05rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.cred__year,.cred__what{transition:transform .3s var(--ease)}
.cred:hover .cred__year,.cred:hover .cred__what{transform:translateX(.5rem)}
.cred__year{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-text);font-variation-settings:'wght' 700}
.cred__what{display:flex;flex-direction:column;gap:.1rem}
.cred__what strong{font-size:1rem;font-variation-settings:'wght' 690;letter-spacing:-.01em}
.cred__what{font-size:.85rem;color:var(--ink-soft)}
.cred__what strong{color:var(--ink)}

/* ============================================================
   OFF DUTY
   ============================================================ */
.section--offduty{background:var(--blue);color:#fff;overflow:hidden}
.offduty{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.offduty__copy p{color:rgba(255,255,255,.93);max-width:48ch;margin-top:1.2rem}
.offduty__copy .sec-title{margin-bottom:.4rem}
.offduty__media{margin:0;position:relative}
.offduty__media img{position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.offduty__media::before{content:"";position:absolute;inset:-18px -18px auto auto;width:52%;height:52%;border:2px solid var(--yellow);border-radius:4px;z-index:0}

/* ============================================================
   QUOTES
   ============================================================ */
.section--quotes{background:var(--paper)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.quote{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:2rem 1.8rem;display:flex;flex-direction:column;gap:1.4rem;position:relative;transition:transform .35s var(--ease-out),box-shadow .35s}
.quote:hover{transform:translateY(-6px);border-color:rgba(20,20,15,.4)}
.quote blockquote{flex:1}
.quote blockquote p{font-size:1.08rem;line-height:1.5;letter-spacing:-.012em;font-variation-settings:'wght' 500}
.quote blockquote p::before{content:"“";font-family:var(--f-serif);font-size:2.2em;line-height:0;vertical-align:-.28em;color:var(--coral-text);margin-right:.06em}
.quote footer{display:flex;flex-direction:column;gap:.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.quote footer strong{font-size:.9rem;font-variation-settings:'wght' 700}
.quote footer span{font-size:.78rem;color:var(--ink-soft)}
.ph-badge{
  position:absolute;top:-.65rem;left:1.4rem;background:var(--yellow);color:var(--ink);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-variation-settings:'wght' 750;
  padding:.28rem .6rem;border-radius:100px;
}
.is-placeholder{opacity:.82;border-style:dashed}
.mediacard .ph-badge{top:.85rem;left:.85rem}

/* ============================================================
   MEDIA
   ============================================================ */
.section--media{background:var(--white)}
.mediagrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.mediacard{
  position:relative;grid-column:span 2;aspect-ratio:4/5;overflow:hidden;border-radius:4px;
  background:var(--paper-2);display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--line);
}
.mediacard--wide{grid-column:span 2}
.mediacard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.mediacard:hover img{transform:scale(1.05)}
.mediacard__meta{
  position:relative;z-index:2;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem;
  background:linear-gradient(to top,rgba(20,20,15,.85),rgba(20,20,15,0));color:#fff;
}
.mediacard__meta b{font-size:.9rem;font-variation-settings:'wght' 700}
.mediacard__meta i{font-style:normal;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.mediacard--ph{background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 12px,var(--paper-2) 12px,var(--paper-2) 24px);border-style:dashed}
.mediacard--ph .mediacard__meta{background:none;color:var(--ink-soft)}
.mediacard--ph .mediacard__meta b{color:var(--ink)}
.mediacard--text{aspect-ratio:auto;grid-column:span 4;background:var(--ink);justify-content:center;align-items:flex-start;gap:1.6rem;padding:clamp(1.6rem,3vw,2.6rem);border-color:var(--ink)}
.mediacard--text .mediacard__meta{background:none;padding:0;gap:.5rem;max-width:34ch}
.mediacard--text .mediacard__meta b{font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:-.025em;line-height:1.1}
.mediacard--text .mediacard__meta i{font-size:.8rem;letter-spacing:.02em;text-transform:none;opacity:.62;line-height:1.5}
.mediacard--text .btn{--bg:var(--coral);--bd:var(--coral);--fg:var(--ink);align-self:flex-start}

.featured{margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--line);padding-top:2rem}
.featured__label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.2rem;font-variation-settings:'wght' 650}
.featured__list{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.featured__list li{
  height:66px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:4px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper);
}

/* ============================================================
   CONTACT
   ============================================================ */
.section--contact{background:var(--coral-deep);color:#fff}
.booking{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,5rem);align-items:start}
.booking__intro>p{color:#fff;max-width:44ch;margin-top:1.2rem}
.booking__intro .sec-title--light em{color:var(--ink)}
.booking__facts{margin-top:2.4rem;border-top:1px solid rgba(255,255,255,.3)}
.booking__facts li{display:grid;grid-template-columns:130px 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.3);align-items:baseline}
.booking__facts span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.92;font-variation-settings:'wght' 650}
.booking__facts strong{font-size:.95rem;font-variation-settings:'wght' 650}
.booking__facts a{border-bottom:1px solid rgba(255,255,255,.5)}
.booking__facts a:hover{border-bottom-color:#fff}

.bform{background:var(--white);color:var(--ink);padding:clamp(1.6rem,3vw,2.4rem);border-radius:6px;display:flex;flex-direction:column;gap:1rem;box-shadow:0 40px 70px -50px rgba(90,15,0,.7)}
.bform__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-variation-settings:'wght' 680;color:var(--ink-soft)}
.field input,.field textarea,.select select{
  width:100%;background:var(--paper);border:1.5px solid transparent;border-bottom-color:var(--line);
  border-radius:4px;padding:.8rem .9rem;font-size:.95rem;transition:border-color .25s,background .25s;
}
.field input::placeholder,.field textarea::placeholder{color:#6c6961}
.field input:focus,.field textarea:focus,.select select:focus{outline:none;border-color:var(--coral);background:#fff}
.field textarea{resize:vertical;min-height:110px;font-family:inherit}
.select{position:relative}
.select::after{content:"";position:absolute;right:1rem;top:50%;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select select{appearance:none;-webkit-appearance:none;cursor:pointer}
.field__err{font-size:.72rem;color:var(--coral-deep);min-height:0;font-variation-settings:'wght' 600}
.field.has-error input,.field.has-error textarea{border-color:var(--coral-deep);background:#fff5f2}
.bform__status{font-size:.85rem;font-variation-settings:'wght' 620;color:#0a7a4a;margin-top:-.2rem}
.bform__note{font-size:.72rem;color:var(--ink-soft);line-height:1.45}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#fff;padding-top:clamp(3.5rem,6vw,5.5rem);overflow:hidden}
.site-footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;padding-bottom:2.5rem}
.footer-eyebrow{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1rem;font-variation-settings:'wght' 600}
.footer-mail{font-size:clamp(1.3rem,3vw,2.2rem);letter-spacing:-.03em;font-variation-settings:'wght' 700;border-bottom:2px solid var(--coral);padding-bottom:.1rem;transition:color .3s}
.footer-mail:hover{color:var(--coral)}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer-nav a{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);font-variation-settings:'wght' 570;transition:color .25s}
.footer-nav a:hover{color:var(--coral)}
.bigname--footer{margin-bottom:0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14)}
.bigname--footer .bigname__first{color:rgba(255,255,255,.12)}
.bigname--footer .bigname__last{-webkit-text-stroke-color:rgba(255,255,255,.22)}
.site-footer__bottom{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.4rem 0 1.8rem;border-top:1px solid rgba(255,255,255,.14);font-size:.75rem;color:rgba(255,255,255,.55)}
.socials--footer a{color:rgba(255,255,255,.72)}

/* ============================================================
   REVEAL
   ============================================================ */
/* only hide when JS is running — no JS, no hidden content */
.js-anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js-anim .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__media img,.hero__title span,.hero__lede,.hero__actions{animation:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .roles{grid-template-columns:repeat(2,1fr)}
  .featured__list{grid-template-columns:repeat(3,1fr)}
  .factbar__list{grid-template-columns:repeat(2,1fr)}
  .bigname__last{-webkit-text-stroke-width:1.6px}
}
@media (max-width:1024px){
  .page-head__facts{grid-template-columns:repeat(2,1fr)}
  .intro{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr;gap:2.5rem}
  .about__media img{aspect-ratio:16/10}
  .offduty{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .booking{grid-template-columns:1fr}
  .sec-head--split{grid-template-columns:1fr}
  .mediagrid{grid-template-columns:repeat(4,1fr)}
  .hero__copy{max-width:min(460px,50%)}
  .hero__veil{background:linear-gradient(96deg,
    rgba(231,215,197,.95) 0%,
    rgba(231,215,197,.74) 20%,
    rgba(231,215,197,0) 44%)}
}
@media (max-width:900px){
  :root{--head-h:72px}
  html{scroll-padding-top:74px}
  .site-header__cta{display:none}
  .burger{display:block;margin-left:auto}
  .site-header__inner{gap:1rem}
  .brand__role{font-size:.54rem;letter-spacing:.13em}
  .nav{
    position:fixed;inset:0 0 auto;top:0;padding:5.5rem var(--gutter) 2.5rem;
    background:var(--paper);flex-direction:column;align-items:stretch;gap:1.2rem;
    transform:translateY(-102%);transition:transform .45s var(--ease-out);
    box-shadow:0 26px 50px -30px rgba(20,20,15,.5);margin:0;
  }
  .site-header.is-open .nav{transform:none}
  .nav__list{flex-direction:column;gap:.2rem}
  .nav__link{color:var(--ink);font-size:1.15rem;letter-spacing:-.01em;text-transform:none;font-variation-settings:'wght' 680;padding-block:.6rem;border-bottom:1px solid var(--line);display:block}
  .nav__link::after{display:none}
  .nav__cta-mobile{display:inline-flex;justify-content:center;margin-top:.8rem}
}

/* ============================================================
   HERO — portrait phones
   Same doctrine as desktop: the type lives ON the photograph, in ink, with no
   scrim and no fade. The phone file is a composite — the portrait crop with 420
   rows of its own backdrop grown off the top (see README) — because a portrait
   frame has no empty ground to write on and inventing one with a gradient just
   dissolves her. That extension gives the hero three bands: clean sweep up top,
   her face clear in the middle, shirt and the darker sweep below. The wordmark
   takes the top band, the copy takes the bottom one, and her face keeps the air
   between them. Ink measures 8.7:1 on the darkest of those grounds and 13-15:1
   on the hair and shirt, so nothing needs a wash to survive.
   ============================================================ */
@media (max-width:900px) and (orientation:portrait){
  .hero{min-height:100svh}
  .hero__media,.hero__veil{inset:0;height:auto}
  /* the extension is at the TOP of the file, so a vertical crop must come off
     the bottom of her torso — never off the ground the wordmark stands on */
  .hero__media img{object-position:50% 0}
  .hero__veil{display:none}

  /* the wordmark leads, as a masthead on the extended sweep */
  .hero__foot{order:1;padding:calc(var(--head-h) + .1rem) var(--gutter) 0}
  .bigname{flex-direction:column;align-items:flex-start;gap:0;line-height:.94;margin-bottom:0}
  .bigname__first{font-size:min(22vw,130px)}
  .bigname__last{font-size:min(14.6vw,86px);-webkit-text-stroke-width:2px}

  /* the copy sits at the foot of the frame, on her shirt and the lower sweep */
  .hero__inner{order:2;align-items:flex-end;padding:1rem var(--gutter) clamp(1.6rem,4svh,2.4rem)}
  .hero__copy{max-width:none}
  .hero__title{font-size:clamp(2.05rem,5.2vw,3.1rem);margin-bottom:1rem}
  /* full ink and a touch more weight: this is body copy on woven texture, not
     on paper, and the shirt seams and buttons run underneath it */
  .hero__lede{
    max-width:none;color:var(--ink);font-variation-settings:'wght' 450;
    font-size:.94rem;line-height:1.55;margin-bottom:1.3rem;
  }
  .hero__actions{flex-wrap:nowrap;gap:.55rem;max-width:32rem}
  .hero__actions .btn{flex:1 1 0;justify-content:center;min-height:44px;padding-inline:.9rem;font-size:min(.74rem,3.4vw);white-space:nowrap}
}

/* Squatter than the composite: cover has to crop it vertically, so spend the
   extension band instead of her torso. At the boundary the crop is zero, so
   this switch is invisible as it engages. */
@media (max-width:900px) and (orientation:portrait) and (min-aspect-ratio:1200/2340){
  .hero__media img{object-position:50% 100%}
}

/* Short phones (SE, older Android): her frame nearly fills the viewport on its
   own, so the wordmark tightens to keep off her face and the copy takes what is
   left under her chin. */
@media (max-width:900px) and (orientation:portrait) and (max-height:730px){
  .hero__foot{padding-top:calc(var(--head-h) - 1.1rem)}
  .bigname__first{font-size:15.5vw}
  .bigname__last{font-size:10.3vw;-webkit-text-stroke-width:1.6px}
  .hero__title{font-size:min(1.68rem,4.05svh);margin-bottom:.8rem}
  .hero__lede{font-size:min(.88rem,2.15svh);line-height:1.5;margin-bottom:1rem}
  .hero__inner{padding-bottom:1.1rem}
}

/* Portrait tablets: at this width she is drawn twice as large as on a phone and
   her head reaches the top edge, so there is no band to hang a masthead on. The
   whole stack drops below her chin onto the shirt — wordmark still first. */
@media (max-width:900px) and (min-width:701px) and (orientation:portrait){
  .hero__foot{margin-top:auto;padding-top:0}
  .hero__inner{flex:none;padding-top:1.2rem}
}
@media (max-width:720px){
  .roles{grid-template-columns:1fr}
  .role{min-height:0}
  .stats{grid-template-columns:1fr}
  .stat{padding:1.4rem 1.2rem}
  .stat__label{max-width:none}
  .factbar__list{grid-template-columns:1fr}
  .mediagrid{grid-template-columns:repeat(2,1fr)}
  .mediacard--text{grid-column:1/-1;flex-direction:row;align-items:center}
  .featured__list{grid-template-columns:repeat(2,1fr)}
  .bform__row{grid-template-columns:1fr}
  .cred{grid-template-columns:1fr;gap:.2rem}
  .booking__facts li{grid-template-columns:1fr;gap:.1rem}
  .acc__head{gap:.9rem}
  .acc__num{width:1.9rem}
  .acc__body{padding-left:0}
  .site-footer__bottom{flex-direction:column}
}