/* ==========================================================================
   tokens.css — Design system · Ann Tailors (v2)
   Menswear atelier: charcoal + warm brass/tan + cream. Fraunces + Cormorant
   italic + Inter. Light/dark by [data-theme].
   ========================================================================== */
:root {
  color-scheme: light dark;

  /* Raw palette */
  --char:    #26232c;
  --char-2:  #332f3a;
  --ink:     #1d1a22;
  --brass:   #a9853f;
  --brass-2: #c6a25c;
  --tan:     #cdb086;
  --cream:   #f5efe3;
  --cream-2: #eadfca;
  --linen:   #fbf7ee;

  /* Semantic (LIGHT default) */
  --bg:            #f4ede0;
  --bg-elevated:   #fbf7ee;
  --bg-sunken:     #ece2d0;
  --bg-inverse:    #1d1a22;

  --text:          #26232c;
  --text-muted:    #6a6360;
  --text-inverse:  #f5efe3;

  --border:        #e0d5c1;
  --border-strong: #cdbfa4;

  --primary:          var(--char);
  --primary-strong:   var(--ink);
  --primary-contrast: #f5efe3;
  --primary-tint:     #e7dcc7;

  --accent: var(--brass);
  --focus-ring: var(--brass);

  /* Typography */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-italic:  "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 2.0rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.6rem);
  --step-4:  clamp(2.07rem, 1.72rem + 1.75vw, 3.2rem);

  --leading-tight: 1.05;
  --leading-body:  1.62;
  --tracking-wide: 0.2em;

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --container:       75rem;
  --container-prose: 42rem;
  --gutter: clamp(1.1rem, 4vw, 2.75rem);

  /* Radii */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows (warm) */
  --shadow-sm: 0 1px 2px rgba(38,35,30,.07), 0 1px 1px rgba(38,35,30,.05);
  --shadow:    0 8px 24px rgba(38,35,30,.10), 0 2px 6px rgba(38,35,30,.06);
  --shadow-lg: 0 28px 64px rgba(29,26,22,.22), 0 10px 24px rgba(29,26,22,.12);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 150ms;
  --dur:      300ms;
  --dur-slow: 640ms;

  --header-h: 5rem;
}

[data-theme="dark"] {
  --char:    #0f0d12;
  --bg:            #17151b;
  --bg-elevated:   #211e26;
  --bg-sunken:     #110f15;
  --bg-inverse:    #f4ede0;
  --text:          #efe7d7;
  --text-muted:    #a89f95;
  --text-inverse:  #26232c;
  --border:        #33303a;
  --border-strong: #4a4552;
  --primary:          var(--brass-2);
  --primary-strong:   var(--tan);
  --primary-contrast: #1a1720;
  --primary-tint:     #2c2732;
  --brass:   #c6a25c;
  --brass-2: #d8bc82;
  --cream:   #efe7d7;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 10px 28px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 66px rgba(0,0,0,.62);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --char:    #0f0d12;
    --bg:            #17151b;
    --bg-elevated:   #211e26;
    --bg-sunken:     #110f15;
    --bg-inverse:    #f4ede0;
    --text:          #efe7d7;
    --text-muted:    #a89f95;
    --text-inverse:  #26232c;
    --border:        #33303a;
    --border-strong: #4a4552;
    --primary:          #c6a25c;
    --primary-strong:   #cdb086;
    --primary-contrast: #1a1720;
    --primary-tint:     #2c2732;
    --brass:   #c6a25c;
    --brass-2: #d8bc82;
    --cream:   #efe7d7;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow:    0 10px 28px rgba(0,0,0,.55);
    --shadow-lg: 0 30px 66px rgba(0,0,0,.62);
  }
}
/* ==========================================================================
   base.css — reset, typography, a11y · Ann Tailors
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100svh;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--step-0);line-height:var(--leading-body);overflow-x:clip;-webkit-tap-highlight-color:transparent}
img,svg,video{display:block;max-width:100%;height:auto}
img{background:var(--bg-sunken)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--leading-tight);letter-spacing:-.015em;color:var(--text);text-wrap:balance}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
strong,b{font-weight:600}
em{font-style:italic}

:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:3px}
::selection{background:var(--brass);color:#1a1720}

.skip-link{position:absolute;left:1rem;top:-100%;z-index:200;padding:.6rem 1rem;background:var(--char);color:var(--cream);border-radius:8px;font-weight:600}
.skip-link:focus-visible{top:1rem}

/* Eyebrow / overline */
.ov{display:inline-flex;align-items:center;gap:.6ch;font-family:var(--font-body);font-weight:600;font-size:var(--step--1);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}
.ov::before{content:"";inline-size:1.6rem;block-size:1px;background:var(--border-strong)}
.ov--brass{color:var(--brass)}
.ov--brass::before{background:var(--brass)}

.chip{display:inline-flex;align-items:center;gap:.5ch;padding:.35rem .8rem;border:1px solid var(--border-strong);border-radius:var(--radius-pill);font-size:var(--step--1);font-weight:500;color:var(--text-muted)}
.chip .dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 26%,transparent)}
/* ==========================================================================
   layout.css — containers, sections, grids · Ann Tailors
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

.section{padding-block:clamp(3.5rem,7vw,6rem);position:relative}
.section--sunken{background:var(--bg-sunken)}
.section--dark{background:var(--bg-inverse);color:var(--cream);padding-block:clamp(3.5rem,7vw,6rem) clamp(2.5rem,5vw,4rem)}
.section--dark h2,.section--dark h3{color:var(--cream)}

.section-head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head .ov{margin-bottom:.9rem}
.section-head h2{margin-bottom:.7rem}
.section-head p{color:var(--text-muted);font-size:var(--step-1);line-height:1.5}
.section-head--inverse p{color:color-mix(in srgb,var(--cream) 74%,transparent)}

/* Section divider hairline */
.section + .section:not(.section--sunken):not(.section--dark)::before{content:"";position:absolute;inset-inline:var(--gutter);inset-block-start:0;height:1px;background:var(--border)}
/* ==========================================================================
   components.css — Ann Tailors (v2)
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55ch;padding:.85rem 1.4rem;min-height:2.9rem;background:var(--primary);color:var(--primary-contrast);border-radius:var(--radius-pill);font-weight:600;font-size:var(--step-0);line-height:1;text-decoration:none;white-space:nowrap;overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease-out)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:hover::after{transform:translateX(120%)}
.btn svg{color:var(--brass-2)}
.btn--lg{padding:1rem 1.7rem;min-height:3.3rem;font-size:var(--step-0)}
.btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--border-strong)}
.btn--ghost svg{color:var(--brass)}
.btn--ghost:hover{background:var(--primary-tint);border-color:var(--brass)}

/* ---------- Masthead (bespoke) ---------- */
.mast{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);border-block-end:1px solid transparent;transition:background var(--dur) ease,border-color var(--dur) ease,box-shadow var(--dur) ease}
.mast[data-scrolled="true"]{background:color-mix(in srgb,var(--bg) 94%,transparent);border-block-end-color:var(--border);box-shadow:0 6px 24px rgba(29,26,22,.08)}
.mast__rule{display:block;height:2px;background:linear-gradient(90deg,var(--brass),var(--brass-2),var(--brass))}
.mast__inner{block-size:calc(var(--header-h) - 2px);display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.mast__brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.ann-mark{flex:none;border-radius:11px;transition:transform var(--dur) var(--ease-spring)}
.mast__brand:hover .ann-mark{transform:rotate(-6deg)}
.mast__word{display:flex;flex-direction:column;line-height:1}
.mast__word b{font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;color:var(--text)}
.mast__word i{font-style:normal;font-weight:500;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-top:.28rem}
.mast__nav{display:none;gap:2rem;font-size:.94rem;font-weight:500}
.mast__nav a{position:relative;color:var(--text);padding-block:.4rem;transition:color var(--dur)}
.mast__nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--brass);transition:width var(--dur) var(--ease-out)}
.mast__nav a:hover{color:var(--brass)}
.mast__nav a:hover::after{width:100%}
.mast__actions{display:flex;align-items:center;gap:.6rem}
.mast__toggle{display:inline-grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;border:1px solid var(--border);color:var(--text);transition:background var(--dur),border-color var(--dur)}
.mast__toggle:hover{background:var(--primary-tint);border-color:var(--brass)}
.mast__toggle .sun{display:none}
[data-theme="dark"] .mast__toggle .sun{display:block}
[data-theme="dark"] .mast__toggle .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mast__toggle .sun{display:block}:root:not([data-theme="light"]) .mast__toggle .moon{display:none}}
.mast__call{display:none;align-items:center;gap:.5ch;padding:.6rem 1.15rem;border-radius:var(--radius-pill);background:var(--char);color:var(--cream);font-weight:600;font-size:.92rem;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.mast__call svg{color:var(--brass-2)}
.mast__call:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.mast__burger{display:inline-grid;place-items:center;inline-size:2.6rem;block-size:2.5rem;border-radius:10px;border:1px solid var(--border);color:var(--text)}
@media (min-width:60rem){.mast__nav{display:flex}.mast__call{display:inline-flex}.mast__burger{display:none}}

/* ---------- Mobile menu ---------- */
.mobile-menu{position:fixed;inset:calc(var(--header-h)) 0 auto 0;z-index:99;background:var(--bg-elevated);border-block-end:1px solid var(--border);box-shadow:var(--shadow-lg);padding:var(--space-lg) var(--gutter) var(--space-xl);display:grid;gap:.15rem;transform:translateY(-118%);transition:transform var(--dur) var(--ease-out);visibility:hidden}
.mobile-menu[data-open="true"]{transform:translateY(0);visibility:visible}
.mobile-menu a{padding:.9rem .4rem;font-family:var(--font-display);font-size:1.2rem;font-weight:500;border-bottom:1px solid var(--border)}
.mobile-menu__call{display:flex;align-items:center;gap:.6ch;margin-top:1rem;justify-content:center;background:var(--char);color:var(--cream)!important;border-radius:var(--radius-pill)!important;border:none!important;font-family:var(--font-body)!important;font-size:1rem!important;font-weight:600}
.mobile-menu__call svg{color:var(--brass-2)}
@media (min-width:60rem){.mobile-menu{display:none}}

/* ---------- HERO — one-screen contract ---------- */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:flex;align-items:center;padding-block:clamp(1.5rem,4vh,3rem);overflow:clip}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(115% 80% at 92% 6%,color-mix(in srgb,var(--brass) 16%,transparent),transparent 58%)}
.hero > .container{position:relative;width:100%}
.hero__row{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;transform:scale(var(--hero-scale,1));transform-origin:top center}
@media (min-width:62rem){.hero__row{grid-template-columns:1.05fr .95fr}}
.hero__eyebrows{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.1rem;margin-bottom:1.1rem}
.hero__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.95rem,1.2rem + 2.1vw + 1.5svh,3.6rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:1rem}
.hero__title em{font-family:var(--font-italic);font-style:italic;font-weight:600;color:var(--brass)}
.hero__lead{font-size:clamp(1.02rem,.95rem + .4vw + .5svh,1.24rem);color:var(--text-muted);max-width:34rem;margin-bottom:1.5rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.4rem}
.hero__pills{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;color:var(--text-muted);font-size:var(--step--1);font-weight:500}
.hero__pills span{display:inline-flex;align-items:center;gap:.5ch}
.hero__pills svg{color:var(--brass)}
.hero__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg-elevated);max-height:42svh}
.hero__media > img{inline-size:100%;block-size:100%;object-fit:cover;max-height:42svh}
.hero__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.hero__stamp{position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5ch;padding:.5rem .9rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--ink) 78%,transparent);color:var(--cream);font-size:var(--step--1);font-weight:500;backdrop-filter:blur(6px)}
.hero__stamp svg{color:var(--brass-2)}
@media (min-width:62rem){.hero__media{max-height:calc(100svh - var(--header-h) - 4rem)}.hero__media > img{max-height:calc(100svh - var(--header-h) - 4rem)}}
/* Mobile/stacked: keep the whole hero within one screen */
@media (max-width:61.99rem){
  .hero{padding-block:1.1rem 1.4rem}
  .hero__row{gap:1.3rem}
  .hero__eyebrows{margin-bottom:.7rem}
  .hero__title{margin-bottom:.6rem}
  .hero__lead{margin-bottom:1rem;font-size:1.04rem}
  .hero__ctas{margin-bottom:1rem}
  .hero__pills{gap:.4rem 1rem}
  .hero__media{max-height:30svh}
  .hero__media > img{max-height:30svh}
}
@media (max-width:30rem){.hero__pills{display:none}.hero__media{max-height:32svh}.hero__media > img{max-height:32svh}}
@media (max-height:820px) and (min-width:62rem){.hero__title{font-size:clamp(1.9rem,2.4svh + 1vw,3rem)}.hero__lead{margin-bottom:1.1rem}.hero__pills{display:none}}
@media (max-height:680px){.hero__pills{display:none}.hero__eyebrows{margin-bottom:.6rem}.hero__lead{font-size:1.02rem;margin-bottom:.8rem}.hero__media{max-height:26svh}.hero__media > img{max-height:26svh}}
@media (max-height:560px){.hero{min-height:0;padding-block:1.2rem 1.6rem}.hero__media{max-height:38svh}.hero__media > img{max-height:38svh}}

/* ---------- Trust ribbon ---------- */
.ribbon{background:var(--char);color:var(--cream)}
[data-theme="light"] .ribbon,:root:not([data-theme="dark"]) .ribbon{background:var(--char)}
.ribbon__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.2rem;padding-block:1.1rem;font-size:var(--step--1);font-weight:500;color:color-mix(in srgb,var(--cream) 86%,transparent)}
.ribbon__inner span{display:inline-flex;align-items:center;gap:.6ch}
.ribbon__inner svg{color:var(--brass-2)}

/* ---------- Services ---------- */
.svc-grid{display:grid;gap:clamp(1.2rem,2.5vw,1.8rem);grid-template-columns:1fr}
@media (min-width:40rem){.svc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur),border-color var(--dur);display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.svc-card__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.svc-card__media img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.svc-card:hover .svc-card__media img{transform:scale(1.06)}
.svc-card__num{position:absolute;top:.7rem;left:.7rem;z-index:2;font-family:var(--font-display);font-size:.85rem;font-weight:600;color:var(--cream);background:color-mix(in srgb,var(--ink) 62%,transparent);backdrop-filter:blur(4px);padding:.25rem .55rem;border-radius:6px}
.svc-card__body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.svc-card__ic{display:inline-grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:10px;background:var(--primary-tint);color:var(--brass);margin-bottom:.1rem}
.svc-card__body h3{font-size:1.28rem}
.svc-card__body p{color:var(--text-muted);font-size:.98rem;line-height:1.5}
.svc-card__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.5rem}
.svc-card__tags li{font-size:.74rem;font-weight:500;letter-spacing:.02em;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:.25rem .65rem}

/* ---------- Feature / atelier ---------- */
.feat-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:62rem){.feat-grid{grid-template-columns:1fr 1.05fr}}
.feat-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:3/2}
.feat-media img{inline-size:100%;block-size:100%;object-fit:cover}
.feat-media__badge{position:absolute;right:1rem;bottom:1rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem 1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;line-height:1.1}
.feat-media__badge b{font-family:var(--font-display);font-size:1.05rem;color:var(--brass)}
.feat-media__badge span{font-size:.76rem;color:var(--text-muted)}
.feat-text .ov{margin-bottom:.9rem}
.feat-text h2{margin-bottom:.8rem}
.feat-text > p{color:var(--text-muted);font-size:1.06rem;margin-bottom:1.6rem;max-width:36rem}
.feat-list{display:grid;gap:1.15rem}
.feat-list li{display:flex;gap:1rem;align-items:flex-start}
.feat-list .ic{flex:none;display:inline-grid;place-items:center;inline-size:2.7rem;block-size:2.7rem;border-radius:12px;background:var(--primary-tint);color:var(--brass)}
.feat-list h4{font-family:var(--font-body);font-weight:600;font-size:1.02rem;margin-bottom:.15rem}
.feat-list p{color:var(--text-muted);font-size:.95rem;line-height:1.5}

/* ---------- How it works / steps ---------- */
.steps{display:grid;gap:clamp(1.2rem,2.5vw,1.8rem);counter-reset:step}
@media (min-width:52rem){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.7rem 1.5rem;box-shadow:var(--shadow-sm)}
.step__num{font-family:var(--font-display);font-size:2.6rem;font-weight:500;color:color-mix(in srgb,var(--brass) 42%,transparent);line-height:1;display:block;margin-bottom:.4rem}
.step__ic{position:absolute;top:1.7rem;right:1.5rem;display:inline-grid;place-items:center;inline-size:2.7rem;block-size:2.7rem;border-radius:12px;background:var(--primary-tint);color:var(--brass)}
.step h3{font-size:1.22rem;margin-bottom:.4rem}
.step p{color:var(--text-muted);font-size:.97rem;line-height:1.5}
.steps__cta{display:flex;justify-content:center;margin-top:clamp(2rem,4vw,2.8rem)}

/* ---------- Lookbook rail (star moment) ---------- */
.lookrail{margin-top:clamp(1.5rem,3vw,2.5rem);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-block:.5rem 1.5rem}
.lookrail::-webkit-scrollbar{display:none}
.lookrail__track{display:flex;gap:clamp(.9rem,2vw,1.5rem);padding-inline:var(--gutter);width:max-content}
.look{position:relative;scroll-snap-align:center;flex:none;inline-size:clamp(15rem,64vw,20rem);aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin:0;background:var(--bg-sunken)}
.look img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.look:hover img{transform:scale(1.07)}
.look::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,13,18,.7),transparent 46%)}
.look figcaption{position:absolute;left:1rem;bottom:1rem;z-index:2}
.look__k{font-family:var(--font-italic);font-style:italic;font-size:1.32rem;font-weight:600;color:var(--cream);letter-spacing:.01em}
.lookrail__note{margin-top:.5rem;font-size:var(--step--1);color:color-mix(in srgb,var(--cream) 60%,transparent)}

/* ---------- Why us ---------- */
.why-grid{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr}
@media (min-width:40rem){.why-grid{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem 1.4rem;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.why-card__ic{display:inline-grid;place-items:center;inline-size:3rem;block-size:3rem;border-radius:14px;background:var(--primary-tint);color:var(--brass);margin-bottom:.9rem}
.why-card h3{font-size:1.18rem;margin-bottom:.35rem}
.why-card p{color:var(--text-muted);font-size:.95rem;line-height:1.5}

/* ---------- Visit ---------- */
.visit-grid{display:grid;gap:clamp(1.2rem,3vw,2rem)}
@media (min-width:56rem){.visit-grid{grid-template-columns:1.1fr .9fr;align-items:stretch}}
.visit-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm)}
.visit-list{display:grid;gap:.4rem}
.visit-list li,.visit-list li a{display:flex;align-items:center;gap:1rem;padding:.85rem .4rem}
.visit-list li{border-bottom:1px solid var(--border)}
.visit-list li:last-child{border-bottom:none}
.visit-list li a{padding:0;flex:1}
.visit-list .ic{flex:none;display:inline-grid;place-items:center;inline-size:2.7rem;block-size:2.7rem;border-radius:12px;background:var(--primary-tint);color:var(--brass)}
.visit-list b{display:block;font-weight:600;font-size:1.05rem}
.visit-list small{color:var(--text-muted);font-size:.88rem}
.visit-list a:hover b{color:var(--brass)}
.visit-cta{background:var(--char);color:var(--cream);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.3rem);display:flex;flex-direction:column;justify-content:center;gap:.5rem;position:relative;overflow:hidden}
.visit-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 100% 0,color-mix(in srgb,var(--brass) 30%,transparent),transparent 60%);pointer-events:none}
.visit-cta .ov{color:var(--brass-2);position:relative}
.visit-cta .ov::before{background:var(--brass-2)}
.visit-cta h3{color:var(--cream);font-size:1.7rem;position:relative}
.visit-cta > p{color:color-mix(in srgb,var(--cream) 76%,transparent);position:relative}

/* ---------- callphone / callbar ---------- */
.callphone{display:inline-flex;align-items:center;gap:.8ch;align-self:flex-start;margin-top:.9rem;padding:.8rem 1.3rem;background:var(--cream);color:var(--ink);border-radius:var(--radius-pill);position:relative;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.callphone svg{color:var(--brass)}
.callphone small{display:block;font-size:.72rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.callphone b{display:block;font-family:var(--font-display);font-size:1.28rem;line-height:1.1}
.callphone:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

.callbar{position:fixed;left:.7rem;right:.7rem;bottom:.7rem;z-index:90;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:var(--char);color:var(--cream);border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);transform:translateY(160%);transition:transform var(--dur) var(--ease-spring)}
.callbar.is-in,.callbar[data-show="true"],[data-scrolled] ~ .callbar{transform:translateY(0)}
.callbar svg{color:var(--brass-2);flex:none}
.callbar span:not(.callbar__go){display:flex;flex-direction:column;line-height:1.15;flex:1}
.callbar b{font-weight:600;font-size:.98rem}
.callbar small{color:color-mix(in srgb,var(--cream) 70%,transparent);font-size:.8rem}
.callbar__go{display:inline-grid;place-items:center;inline-size:2.1rem;block-size:2.1rem;border-radius:50%;background:var(--brass)}
.callbar__go svg{color:var(--ink)}
@media (min-width:60rem){.callbar{display:none}}

/* ---------- Footer ---------- */
.callband{background:var(--char);color:var(--cream);position:relative;overflow:hidden}
.callband::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 88% 0,color-mix(in srgb,var(--brass) 26%,transparent),transparent 55%);pointer-events:none}
.callband__inner{position:relative;display:grid;gap:1.6rem;align-items:center;padding-block:clamp(2.5rem,5vw,3.6rem)}
@media (min-width:56rem){.callband__inner{grid-template-columns:1.4fr .6fr}}
.callband .ov{color:var(--brass-2);margin-bottom:.8rem}
.callband .ov::before{background:var(--brass-2)}
.callband h2{color:var(--cream);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);margin-bottom:.7rem;max-width:26ch}
.callband__sub{color:color-mix(in srgb,var(--cream) 76%,transparent);max-width:44ch}
.callband__act{display:flex}
@media (min-width:56rem){.callband__act{justify-content:flex-end}}

.ftr{background:var(--bg-inverse);color:color-mix(in srgb,var(--cream) 88%,transparent)}
[data-theme="light"] .ftr,:root:not([data-theme="dark"]) .ftr{background:#1d1a22}
.ftr__grid{display:grid;gap:2rem clamp(1.5rem,4vw,3rem);padding-block:clamp(2.5rem,5vw,3.6rem);grid-template-columns:1fr}
@media (min-width:40rem){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.ftr__grid{grid-template-columns:1.7fr 1fr 1fr 1.3fr}}
.ftr__brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;margin-bottom:1rem}
.ftr__word{display:flex;flex-direction:column;line-height:1}
.ftr__word b{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--cream)}
.ftr__word i{font-style:normal;font-weight:500;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 60%,transparent);margin-top:.28rem}
.ftr__tag{color:color-mix(in srgb,var(--cream) 66%,transparent);font-size:.95rem;max-width:34ch;line-height:1.55}
.ftr__col h3{font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2);margin-bottom:1rem}
.ftr__col a{display:block;color:color-mix(in srgb,var(--cream) 82%,transparent);padding-block:.4rem;font-size:.96rem;transition:color var(--dur)}
.ftr__col a:hover{color:var(--brass-2)}
.ftr__hours{display:grid;gap:.5rem;margin-bottom:.9rem}
.ftr__hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:color-mix(in srgb,var(--cream) 74%,transparent)}
.ftr__hours b{color:var(--cream);font-weight:500}
.ftr__inline{display:inline-flex!important;align-items:center;gap:.5ch;color:var(--brass-2)!important;font-weight:600}
.mapcard{position:relative;display:flex;gap:.8rem;align-items:flex-start;padding:1rem;border:1px solid color-mix(in srgb,var(--cream) 16%,transparent);border-radius:var(--radius);overflow:hidden;background:color-mix(in srgb,#000 18%,transparent);transition:border-color var(--dur),transform var(--dur)}
.mapcard:hover{border-color:var(--brass);transform:translateY(-2px)}
.mapcard__grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--cream) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--cream) 10%,transparent) 1px,transparent 1px);background-size:22px 22px;opacity:.5;pointer-events:none}
.mapcard__pin{position:relative;flex:none;display:inline-grid;place-items:center;inline-size:2.4rem;block-size:2.4rem;border-radius:10px;background:var(--brass);color:var(--ink)}
.mapcard__label{position:relative;display:flex;flex-direction:column;gap:.15rem;font-size:.92rem}
.mapcard__label b{color:var(--cream);font-weight:600}
.mapcard__label span{color:color-mix(in srgb,var(--cream) 66%,transparent)}
.mapcard__label em{display:inline-flex;align-items:center;gap:.4ch;font-style:normal;color:var(--brass-2);font-size:.82rem;font-weight:600;margin-top:.3rem}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;padding-block:1.4rem;border-top:1px solid color-mix(in srgb,var(--cream) 14%,transparent);font-size:.85rem;color:color-mix(in srgb,var(--cream) 58%,transparent)}
.studio-credit{font-size:.82rem}
.studio-credit__link{color:var(--brass-2);font-weight:600}
.studio-credit__link:hover{text-decoration:underline}

/* ---------- FAQ ---------- */
.faq{max-width:48rem;margin-inline:auto;display:grid;gap:.7rem}
.faq__item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--dur)}
.faq__item[data-open="true"]{border-color:var(--border-strong)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.3rem;text-align:left;font-family:var(--font-display);font-weight:500;font-size:1.08rem;color:var(--text)}
.faq__q .chev{flex:none;color:var(--brass);transition:transform var(--dur) var(--ease-out)}
.faq__item[data-open="true"] .chev{transform:rotate(180deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease-out)}
.faq__item[data-open="true"] .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 1.3rem 1.25rem;color:var(--text-muted);font-size:.98rem;line-height:1.55}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--i,0) * 85ms)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn::after{display:none}.look img,.svc-card__media img{transition:none}}
/* ==========================================================================
   utilities.css — end of cascade · Ann Tailors
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden{display:none!important}
[hidden]{display:none!important}
.text-brass{color:var(--brass)}
.mt-0{margin-top:0}
.nowrap{white-space:nowrap}