/* ===================================================================
   Studio9Art — Fine-Art & Conservation Framing
   Design: "The Conservator's Hand" — strict warm monochrome.
   The artwork is the only colour on the page.
   =================================================================== */

:root{
  --ink:      #111011;   /* primary dark ground (gallery charcoal, never pure black) */
  --ink-deep: #0c0b0b;   /* footer */
  --ink-band: #0f0e0e;   /* interlude band */
  --mat-well: #141314;   /* hero frame inner fill */
  --bone:     #ede8df;   /* paper/bone text on dark */
  --bone-lift:#f4f0e8;   /* warm off-white section ground + hover */
  --mat:      #fbf9f4;   /* mat board for matting light works */
  --grey:     #9a958c;   /* warm secondary text on dark */
  --ink-text: #1a1917;   /* primary text on light */
  --ink-sec:  #6b675f;   /* secondary text on light */
  --faint:    #b8b2a6;   /* faint numerals on light */
  --hair-d:   rgba(237,232,223,.16);
  --hair-d-14:rgba(237,232,223,.14);
  --hair-d-28:rgba(237,232,223,.28);
  --hair-d-5: rgba(237,232,223,.5);
  --hair-l:   rgba(17,16,17,.12);
  --hair-l-14:rgba(17,16,17,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
  --pad-y: 120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Outfit","Poppins",system-ui,sans-serif;
  background:var(--ink); color:var(--bone);
  font-weight:400; line-height:1.6;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:400; }

.h-serif{ font-family:"Roboto Slab",Georgia,serif; }

/* ---- shared utilities ---- */
.kicker{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey); display:flex; align-items:center; gap:16px;
}
.kicker--dark{ color:var(--ink-sec); }
.rule{ display:inline-block; width:24px; height:1px; background:currentColor; opacity:.6; }
.rule--dark{ background:var(--ink-sec); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Outfit",sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:18px 34px; border:0; cursor:pointer; border-radius:0;
  transition:background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn--bone{ background:var(--bone); color:var(--ink); }
.btn--bone:hover{ background:var(--bone-lift); box-shadow:inset 0 0 0 1px rgba(17,16,17,.15); }
.btn--full{ width:100%; }

.link-underline{
  font-family:"Outfit",sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--bone); padding-bottom:5px;
  transition:opacity .2s var(--ease);
}
.link-underline:hover{ opacity:.65; }
.link-underline--dark{ color:var(--ink-text); border-color:var(--ink-text); }

/* ============================ NAV ============================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease);
  height:128px; background:transparent; border-bottom:1px solid transparent;
}
.nav__inner{
  height:100%; max-width:1500px; margin:0 auto; padding:0 6vw;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.nav__logo{ height:64px; width:auto; transition:height .25s var(--ease); }
.nav__links{ display:flex; gap:36px; margin-left:auto; }
.nav__links a{
  font-size:13px; letter-spacing:.04em; color:var(--bone); position:relative; padding:4px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--bone); transition:width .25s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:1px solid var(--hair-d-5); padding:11px 22px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bone);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__cta:hover{ background:var(--bone); color:var(--ink); }
.nav--solid{ height:72px; background:var(--ink); border-bottom-color:var(--hair-d-14); }
.nav--solid .nav__logo{ height:36px; }

.nav__burger{ display:none; background:none; border:0; cursor:pointer; width:34px; height:24px; position:relative; }
.nav__burger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--bone); transition:.25s var(--ease); }
.nav__burger span:nth-child(1){ top:6px; } .nav__burger span:nth-child(2){ bottom:6px; }

/* mobile menu overlay */
.menu{
  position:fixed; inset:0; z-index:60; background:#0c0b0b;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu{ flex-direction:column; gap:0; }
.menu__close{ position:absolute; top:24px; right:6vw; background:none; border:0; color:var(--bone); font-size:38px; line-height:1; cursor:pointer; }
.menu__logo{ height:88px; width:auto; margin-bottom:48px; }
.menu__links{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.menu__links a{ font-family:"Roboto Slab",serif; font-size:28px; color:var(--bone); }
.menu__cta{ margin-top:14px; border:1px solid var(--hair-d-5); padding:14px 30px; font-family:"Outfit",sans-serif !important; font-size:14px !important; letter-spacing:.1em; text-transform:uppercase; }

/* ============================ HERO ============================ */
.hero{
  position:relative; min-height:100svh; background:var(--ink);
  display:grid; grid-template-columns:58% 42%; align-items:center;
  padding-top:128px;
}
.hero__seam{ position:absolute; top:0; bottom:0; left:58%; width:1px; background:var(--hair-d); }
.hero__art{ display:flex; justify-content:center; padding:64px 48px; }
/* Hero frame = a REAL framed piece: black moulding + white mat, artwork at TRUE ratio (never cropped) */
.frame{ max-width:440px; width:100%; }
.frame__plate{
  margin-top:22px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); text-align:center;
}
.hero__copy{ padding:0 8vw 0 64px; max-width:560px; }
.hero__copy .kicker{ margin-bottom:28px; }
.hero__headline{
  font-family:"Roboto Slab",serif; font-weight:400;
  font-size:clamp(2.4rem,3.4vw,3.6rem); line-height:1.06; letter-spacing:-.01em;
  color:var(--bone); margin-bottom:24px;
}
.hero__sub{ font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.6; color:var(--grey); max-width:42ch; margin-bottom:40px; }
.hero__cta{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-bottom:28px; }

.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; }
.hform{ max-width:480px; }
.hform__row{ display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.hfield{ flex:1 1 180px; }
.hfield input{
  width:100%; background:rgba(237,232,223,.04); border:1px solid var(--hair-d-28);
  color:var(--bone); font-family:"Outfit",sans-serif; font-size:.95rem; padding:14px 16px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.hfield input::placeholder{ color:var(--grey); }
.hfield input:focus{ outline:0; border-color:var(--bone); background:rgba(237,232,223,.07); }
.hform__btn{ width:100%; }
.hform__done{ color:var(--bone); font-family:"Roboto Slab",serif; font-style:italic; font-size:.95rem; padding-top:12px; }
.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px; opacity:.5;
  transition:opacity .4s var(--ease);
}
.hero__scroll span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); }
.hero__scroll i{ width:1px; height:40px; background:var(--grey); }
.hero__scroll.is-hidden{ opacity:0; }

/* ===================================================================
   REAL FRAME SYSTEM — every artwork sits in an authentic frame.
   Studio9Art's signature = a slim black OR natural-timber moulding
   + a generous white mat + a bevel line around the art. The artwork
   is ALWAYS shown at its true proportions (object-fit:contain), NEVER
   cropped — because a framer frames the piece, they don't crop it.
   =================================================================== */
.artframe{
  position:relative; display:block; background:var(--frame-face,#141210);
  /* the moulding: a wood/black border built from layered box-shadows for depth */
  padding:clamp(10px,1.6vw,18px);              /* moulding width */
  border-radius:1px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),            /* inner moulding shadow line */
    inset 0 2px 3px rgba(255,255,255,.06),      /* top bevel highlight */
    inset 0 -2px 4px rgba(0,0,0,.5),            /* bottom moulding shade */
    0 30px 60px -28px rgba(0,0,0,.85),          /* cast shadow on the wall */
    0 6px 14px -8px rgba(0,0,0,.6);
}
/* frame face finishes — matched to his real products */
.artframe--black{ --frame-face:#17161a; background:linear-gradient(145deg,#232227,#111014 60%,#191820); }
.artframe--oak{   --frame-face:#b98a4e; background:linear-gradient(150deg,#d9ab6d,#b07f45 55%,#c79a5c);
  box-shadow:
    inset 0 0 0 1px rgba(80,50,15,.5),
    inset 0 2px 3px rgba(255,240,215,.35),
    inset 0 -3px 5px rgba(70,45,15,.45),
    0 30px 60px -28px rgba(0,0,0,.8),
    0 6px 14px -8px rgba(0,0,0,.55);
}
.artframe--walnut{ --frame-face:#4a3323; background:linear-gradient(150deg,#5e4230,#3a281b 55%,#4c3626);
  box-shadow:
    inset 0 0 0 1px rgba(20,10,4,.6),
    inset 0 2px 3px rgba(210,175,140,.22),
    inset 0 -3px 5px rgba(20,10,4,.5),
    0 30px 60px -28px rgba(0,0,0,.82),
    0 6px 14px -8px rgba(0,0,0,.55);
}
/* additional finishes for variety — same construction, different timber/metal tones */
.artframe--ash{ --frame-face:#c9c0ac; background:linear-gradient(150deg,#e4dcc6,#b3a98f 55%,#cfc5ad);
  box-shadow:
    inset 0 0 0 1px rgba(90,80,55,.4),
    inset 0 2px 3px rgba(255,250,235,.4),
    inset 0 -3px 5px rgba(80,70,45,.35),
    0 30px 60px -28px rgba(0,0,0,.75),
    0 6px 14px -8px rgba(0,0,0,.5);
}
.artframe--ebony{ --frame-face:#0a0a0b; background:linear-gradient(150deg,#1c1b1d,#050505 55%,#141315);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.7),
    inset 0 2px 3px rgba(255,255,255,.04),
    inset 0 -2px 4px rgba(0,0,0,.6),
    0 30px 60px -28px rgba(0,0,0,.9),
    0 6px 14px -8px rgba(0,0,0,.65);
}
.artframe--bronze{ --frame-face:#8a6a3d; background:linear-gradient(150deg,#a9855a,#6e5230 55%,#96754a);
  box-shadow:
    inset 0 0 0 1px rgba(50,35,15,.55),
    inset 0 2px 3px rgba(230,205,165,.3),
    inset 0 -3px 5px rgba(40,28,12,.5),
    0 30px 60px -28px rgba(0,0,0,.8),
    0 6px 14px -8px rgba(0,0,0,.55);
}
/* moulding width variants — a slim gallery profile vs a heavier box-frame profile */
.artframe--slim{ padding:clamp(6px,1vw,11px); }
.artframe--wide{ padding:clamp(14px,2.4vw,26px); }
/* mat variants — a narrower or deeper mat changes each piece's proportions */
.artframe--mat-tight .artframe__mat{ padding:clamp(8px,1.6vw,18px); }
.artframe--mat-deep .artframe__mat{ padding:clamp(20px,4.2vw,48px); }
/* the white MAT board that surrounds the artwork inside the moulding */
.artframe__mat{
  background:var(--mat);
  padding:clamp(14px,3vw,34px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),           /* mat keyline */
    inset 0 1px 2px rgba(0,0,0,.06);
  position:relative;
}
/* the bevel cut of the mat window (the little inner step around the art) */
.artframe__win{
  position:relative; padding:2px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),                  /* window opening edge */
    2px 2px 3px -1px rgba(0,0,0,.18) inset;
  background:#fff;
}
.artframe__win img{
  display:block; width:100%; height:auto;        /* TRUE ratio — never cropped/stretched */
  background:#f4f2ec;
}

/* hero rotator — a stack of frames crossfading in place, same window/mat/moulding.
   Grid-stack so every image shares one cell (no height jump between portraits
   of different aspect ratios); the tallest image sets the frame's height. */
.hero-rotator{ display:grid; }
.hero-rotator img{ grid-area:1/1; opacity:0; transition:opacity 1.1s var(--ease); }
.hero-rotator img.is-active{ opacity:1; position:relative; }
.hero-rotator img:not(.is-active){ position:relative; }
.artframe__plate{
  margin-top:12px; text-align:center;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-sec);
}

/* FRAMING ASSEMBLY animation — the mat + art settle into the moulding,
   like a piece being fitted into its frame. Gated behind .reveal-ready. */
.reveal-ready .artframe .artframe__mat{ opacity:0; transform:scale(.94); transition:opacity .6s var(--ease) .15s, transform .7s var(--ease) .15s; }
.reveal-ready .artframe .artframe__win img{ opacity:0; transition:opacity .6s var(--ease) .35s; }
.reveal-ready .artframe.is-in .artframe__mat{ opacity:1; transform:none; }
.reveal-ready .artframe.is-in .artframe__win img{ opacity:1; }
.reveal-ready .artframe{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-ready .artframe.is-in{ opacity:1; transform:none; }

/* ============================ RIBBON ============================ */
.ribbon{
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid var(--hair-d-14); border-bottom:1px solid var(--hair-d-14);
  padding:40px 6vw;
}
.ribbon__item{
  flex:1; text-align:center; padding:0 24px; position:relative;
  display:flex; flex-direction:column; gap:8px;
}
.ribbon__item + .ribbon__item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:44px; background:var(--hair-d-14);
}
.ribbon__n{ font-family:"Roboto Slab",serif; font-weight:400; font-size:clamp(1.4rem,2vw,2rem); color:var(--bone); }
.ribbon__l{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }

/* ============================ ABOUT ============================ */
.about{
  background:var(--bone-lift); color:var(--ink-text);
  display:grid; grid-template-columns:44% 56%; gap:72px; align-items:center;
  padding:var(--pad-y) 8vw;
}
.matcard{
  background:var(--mat); padding:32px; border:1px solid var(--hair-l-14);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.25);
}
.matcard img{ width:100%; aspect-ratio:3/4; object-fit:contain; background:var(--mat); }
.about__copy .kicker{ margin-bottom:22px; }
.about__copy h2{ font-size:clamp(1.8rem,2.6vw,2.6rem); line-height:1.12; margin-bottom:24px; }
.about__body{ font-size:1.08rem; line-height:1.7; color:var(--ink-sec); margin-bottom:32px; max-width:52ch; }

/* ============================ THE WORK ============================ */
.work{ background:var(--ink); padding:var(--pad-y) 6vw; }
.work__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  margin-bottom:56px; flex-wrap:wrap;
}
.work__title{ font-size:clamp(2rem,3vw,3rem); color:var(--bone); }
.work__lead{ font-size:14px; color:var(--grey); max-width:34ch; text-align:right; line-height:1.6; }

/* Gallery = a hung wall of REAL framed pieces. Masonry columns; every
   piece in its own frame at true proportions. */
.grid{ column-count:3; column-gap:34px; }
.cell{ break-inside:avoid; margin-bottom:38px; position:relative; }
.folio{
  position:absolute; top:-2px; left:2px; z-index:3;
  font-family:"Roboto Slab",serif; font-weight:300; font-size:12px; letter-spacing:.1em;
  color:var(--grey); transform:translateY(-100%); padding-bottom:8px;
}
.cell__cap{
  margin-top:16px; text-align:center;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
/* hover: the framed piece lifts off the wall slightly (pointer-fine only) */
.pointer-fine .cell .artframe{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.pointer-fine .cell:hover .artframe{ transform:translateY(-6px); }
.pointer-fine .cell:hover .artframe--black{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.06), inset 0 -2px 4px rgba(0,0,0,.5), 0 44px 80px -30px rgba(0,0,0,.9), 0 10px 20px -10px rgba(0,0,0,.7); }

/* ============================ SERVICES ============================ */
.services{ background:var(--bone-lift); color:var(--ink-text); padding:var(--pad-y) 8vw; }
.services__head{ max-width:640px; margin-bottom:56px; }
.services__head .kicker{ margin-bottom:20px; }
.services__head h2{ font-size:clamp(1.8rem,2.6vw,2.6rem); margin-bottom:18px; }
.services__intro{ color:var(--ink-sec); font-size:1.05rem; line-height:1.6; }
.services__list{ display:grid; grid-template-columns:1fr 1fr; column-gap:56px; }
.srow{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
  padding:26px 0; border-top:1px solid var(--hair-l);
}
.srow__n{ font-family:"Roboto Slab",serif; font-weight:400; font-size:1.6rem; color:var(--faint); line-height:1; transition:color .2s var(--ease); }
.srow h3{ font-family:"Outfit",sans-serif; font-weight:500; font-size:1.1rem; color:var(--ink-text); margin-bottom:6px; transition:transform .2s var(--ease); }
.srow p{ font-size:.95rem; color:var(--ink-sec); line-height:1.5; }
.pointer-fine .srow:hover .srow__n{ color:var(--ink-text); }
.pointer-fine .srow:hover h3{ transform:translateX(6px); }

/* ============================ REPRESENTED ARTISTS BAND ============================ */
.gallery-band{
  background:var(--ink-band); padding:96px 6vw;
  display:grid; grid-template-columns:40% 60%; gap:56px; align-items:center;
}
.gallery-band__copy .kicker{ margin-bottom:22px; }
.gallery-band__line{ font-size:clamp(1.2rem,1.6vw,1.4rem); line-height:1.5; color:var(--bone); margin-bottom:28px; }
.gallery-band__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.matcard--sm{ padding:18px; box-shadow:0 20px 44px -28px rgba(0,0,0,.6); }
.matcard--sm img{ aspect-ratio:1/1; object-fit:contain; }

/* ============================ QUOTE / TRUST ============================ */
.quote{ background:var(--bone-lift); color:var(--ink-text); padding:var(--pad-y) 8vw; text-align:center; }
.quote__q{ font-style:italic; font-weight:300; font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.4; max-width:820px; margin:0 auto 28px; }
.quote__by{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-sec); display:inline-flex; align-items:center; gap:14px; }
.quote__proof{
  display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap;
  margin-top:48px; color:var(--ink-sec); font-size:13px;
}
.quote__proof span{ padding:0 24px; position:relative; }
.quote__proof span + span::before{ content:"·"; position:absolute; left:-2px; }

/* ============================ CONTACT ============================ */
.contact{
  background:var(--ink); padding:var(--pad-y) 8vw;
  display:grid; grid-template-columns:42% 58%; gap:72px; align-items:start;
}
.contact__left h2{ font-size:clamp(1.8rem,2.6vw,2.6rem); color:var(--bone); margin-bottom:20px; }
.contact__reassure{ color:var(--grey); line-height:1.6; margin-bottom:40px; max-width:40ch; }
.nap__row{ display:flex; flex-direction:column; gap:5px; padding:16px 0; border-top:1px solid var(--hair-d); }
.nap__row:first-child{ border-top:0; padding-top:0; }
.nap__label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.nap__row a:hover{ text-decoration:underline; text-underline-offset:4px; }

.qform{ display:flex; flex-direction:column; gap:26px; }
.field{ display:flex; flex-direction:column; gap:10px; }
.field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.field input, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--hair-d-28);
  color:var(--bone); font-family:"Outfit",sans-serif; font-size:1rem; padding:10px 0; resize:none;
  transition:border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--bone); }
.qform__hint{ font-size:12px; color:var(--grey); margin-top:-6px; }
.qform__done{ color:var(--bone); font-family:"Roboto Slab",serif; font-style:italic; font-size:1.1rem; padding-top:8px; }

/* ============================ FOOTER ============================ */
.footer{ background:var(--ink-deep); padding:72px 6vw 40px; }
.footer__top{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-bottom:28px; border-bottom:1px solid var(--hair-d-14);
}
.footer__logo{ height:24px; width:auto; }
.footer__nap{ font-size:12px; color:var(--grey); }
.footer__nav{ display:flex; gap:22px; }
.footer__nav a{ font-size:12px; color:var(--grey); }
.footer__nav a:hover{ color:var(--bone); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; flex-wrap:wrap; }
.footer__bottom > span{ font-size:11px; color:var(--ink-sec); }
.footer__scalus{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-sec);
  display:inline-flex; align-items:center; gap:10px; opacity:.6; transition:opacity .2s var(--ease);
}
.footer__scalus:hover{ opacity:1; }
.footer__scalus .rule{ width:16px; }

/* ============================ REVEAL ============================
   Progressive enhancement: content is VISIBLE by default. Only when JS
   adds .reveal-ready to <html> do we hide-then-animate. So no-JS / slow-JS
   / headless never leaves content stuck invisible. */
.reveal-ready [data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-ready [data-reveal].is-in{ opacity:1; transform:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1023px){
  :root{ --pad-y:88px; }
  .nav{ height:96px; }
  .nav__logo{ height:44px; }
  .nav--solid{ height:64px; }
  .nav--solid .nav__logo{ height:30px; }
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .hero{ grid-template-columns:1fr; min-height:auto; padding-top:112px; padding-bottom:40px; }
  .hero__seam{ display:none; }
  .hero__art{ padding:0 8vw 40px; }
  .frame{ max-width:400px; }
  .hero__copy{ padding:0 8vw; }
  .hero__scroll{ display:none; }
  .about, .contact{ grid-template-columns:1fr; gap:48px; }
  .gallery-band{ grid-template-columns:1fr; gap:40px; }
  .grid{ column-count:2; }
  .work__lead{ text-align:left; }
}
@media (max-width:640px){
  :root{ --pad-y:72px; }
  .ribbon{ flex-wrap:wrap; gap:28px 0; }
  .ribbon__item{ flex:0 0 50%; }
  .ribbon__item + .ribbon__item::before{ display:none; }
  .services__list{ grid-template-columns:1fr; column-gap:0; }
  .grid{ column-count:1; }
  .quote__proof{ flex-direction:column; gap:12px; }
  .quote__proof span + span::before{ display:none; }
  .footer__top{ flex-direction:column; align-items:flex-start; gap:18px; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ scroll-behavior:auto !important; }
}