/* =========================================================
   VALL EVENTS — Planning · Design · Décor
   Palette: aubergine #441137 · plum #7D2E5F · dusty rose #CF98B4
            greige #D9D2C6 · ivory #F6F3EE
   ========================================================= */

:root{
  --aubergine:#441137;
  --aubergine-deep:#340c29;
  --aubergine-soft:#5a2049;
  --plum:#7d2e5f;
  --plum-light:#a85b86;
  --greige:#d9d2c6;
  --rose:#cf98b4;          /* accent — dusty rose from the plum family (replaces the old earthy gold) */
  --ivory:#f6f3ee;
  --ivory-dim:#ece7de;
  --ink:#2a0e22;

  --bg:var(--ivory);
  --fg:var(--ink);

  --font-display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-sans:"Jost","Futura","Century Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* "script" accent is now the display serif in italic — elegant, modern, no cursive */
  --font-script:var(--font-display);

  --wrap:1200px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --section-y:clamp(4.5rem,11vw,9rem);

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:clamp(1rem,.55vw + .9rem,1.125rem);
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit;text-decoration:none}

::selection{background:var(--plum);color:var(--ivory)}

.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;
}

.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  background:var(--aubergine);color:var(--ivory);
  padding:.6rem 1rem;border-radius:2px;transform:translateY(-150%);
  transition:transform .2s var(--ease);
  font-family:var(--font-sans);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
}
.skip-link:focus{transform:translateY(0)}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Typography primitives ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.04;
  letter-spacing:.005em;
  margin:0;
}

.script{
  font-family:var(--font-script);
  font-style:italic;
  font-weight:500;
  color:var(--rose);
  letter-spacing:.005em;
  display:inline-block;
  line-height:1;
}

.eyebrow,.section-label{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--plum);
  margin:0 0 1.4rem;
}
.section-label--light{color:var(--rose)}
.hero .eyebrow{color:var(--rose)}

.block-head{margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.block-title{
  font-size:clamp(2.1rem,5.2vw,3.75rem);
  color:var(--aubergine);
}
.block-title--light{color:var(--ivory)}

/* ---------- Buttons ---------- */
.btn{
  --btn-fg:var(--ivory);
  --btn-bg:var(--aubergine);
  display:inline-flex;align-items:center;justify-content:center;
  gap:.6em;
  font-family:var(--font-sans);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:1.05em 2.1em;
  border:1px solid var(--btn-bg);
  border-radius:999px;
  color:var(--btn-fg);
  background:var(--btn-bg);
  cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn-primary:hover{background:var(--plum);border-color:var(--plum);transform:translateY(-2px)}

/* primary button on the dark hero: light fill so it reads */
.hero .btn-primary{background:var(--ivory);border-color:var(--ivory);color:var(--aubergine)}
.hero .btn-primary:hover{background:var(--rose);border-color:var(--rose);color:var(--aubergine)}
.btn-ghost{
  --btn-bg:transparent;
  color:var(--ivory);
  border-color:rgba(245,240,230,.45);
}
.btn-ghost:hover{border-color:var(--ivory);background:rgba(245,240,230,.08);transform:translateY(-2px)}

/* on ivory sections */
.statement .btn-ghost,.work .btn-ghost{color:var(--aubergine);border-color:rgba(68,17,55,.3)}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:clamp(1rem,2.4vw,1.7rem);
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);
}
.site-header.scrolled{
  /* NB: no backdrop-filter here — it would create a containing block
     that clips the fixed-position mobile menu to the header's height */
  background:rgba(52,12,41,.97);
  padding-block:.7rem;
  box-shadow:0 1px 0 rgba(245,240,230,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}

.brand{display:inline-flex;align-items:center;gap:.85rem;color:var(--ivory)}
.brand-iso{width:3.1rem;height:2.4rem;fill:currentColor;flex:none;transition:width .4s var(--ease),height .4s var(--ease)}
.brand-word{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  padding-left:.15em;
}
.scrolled .brand-iso{width:2.5rem;height:1.95rem}

.site-nav{display:flex;align-items:center}
.nav-menu{
  list-style:none;display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.8rem);
  margin:0;padding:0;
}
.nav-menu a{
  font-family:var(--font-sans);
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory);
  padding-block:.4rem;
  position:relative;
}
.nav-menu a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--rose);transition:right .35s var(--ease);
}
.nav-menu a:not(.nav-cta):hover::after{right:0}
.nav-cta{
  border:1px solid rgba(245,240,230,.4);
  border-radius:999px;
  padding:.6rem 1.3rem !important;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav-cta:hover{background:var(--plum);border-color:var(--plum)}

.nav-toggle{display:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  background:var(--aubergine);
  color:var(--ivory);
  overflow:hidden;
  padding-block:clamp(8.5rem,16vh,11rem) 6rem;
}
.hero::after{ /* soft vignette */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 78% 18%,rgba(125,46,95,.42),transparent 60%),
             linear-gradient(180deg,rgba(52,12,41,.35),transparent 30%,rgba(52,12,41,.55));
}
.hero-motif{
  position:absolute;
  right:-14vw;top:50%;
  width:min(74vw,920px);
  transform:translateY(-50%);
  opacity:.09;
  color:var(--ivory);
  will-change:transform;
}
.hero-motif svg{width:100%;height:auto;fill:currentColor}

.hero-inner{position:relative;z-index:2;max-width:min(46rem,92vw)}
.hero-title{
  font-size:clamp(2.7rem,7.2vw,5.75rem);
  font-weight:500;
  line-height:1.02;
  margin:.28em 0 .62em;
  letter-spacing:.004em;
}
.hero-title-line{display:block}
.hero-title .script{
  display:block;
  font-size:1em;
  margin-top:.02em;
  margin-left:-.015em;
}
.hero-lede{
  max-width:46ch;
  font-size:clamp(1.05rem,.5vw + 1rem,1.3rem);
  color:var(--greige);
  font-weight:300;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:1rem;
  margin-top:2.6rem;
}

.hero-scroll{
  position:absolute;left:50%;bottom:2.2rem;z-index:2;
  translate:-50% 0;
  width:1px;height:3.6rem;
  background:rgba(245,240,230,.3);
  overflow:hidden;
}
.hero-scroll span{
  position:absolute;inset:0;display:block;background:var(--rose);
  animation:scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

/* =========================================================
   STATEMENT
   ========================================================= */
.statement{
  background:var(--ivory);
  padding-block:var(--section-y);
  text-align:center;
}
.statement-lead{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.6vw,2.5rem);
  line-height:1.34;
  font-weight:400;
  color:var(--aubergine);
  max-width:34ch;
  margin:0 auto;
}
.statement-pull{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.9rem,5.4vw,3.6rem);
  line-height:1.2;
  color:var(--plum);
  margin:clamp(2rem,5vw,3.5rem) 0 0;
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--ivory);padding-block:var(--section-y)}
.service-list{list-style:none;margin:0;padding:0}
.service{
  display:grid;
  grid-template-columns:minmax(0,7rem) 1fr;
  gap:clamp(1rem,4vw,3.5rem);
  padding-block:clamp(2.2rem,5vw,3.4rem);
  border-top:1px solid rgba(68,17,55,.16);
}
.service:last-child{border-bottom:1px solid rgba(68,17,55,.16)}
.service-num{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--plum);
  letter-spacing:.05em;
}
.service-body h3{
  font-size:clamp(1.9rem,4.6vw,3rem);
  color:var(--aubergine);
  margin-bottom:.5rem;
}
.service-body p{max-width:52ch;color:#4a2a3f}
.service-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;
  margin:1.6rem 0 0;padding:0;
}
.service-tags li{
  font-family:var(--font-sans);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plum);
  border:1px solid rgba(125,46,95,.3);
  border-radius:999px;
  padding:.5em 1.1em;
}

/* ---------- Specialties (within Services) ---------- */
.specialties{margin-top:clamp(4rem,9vw,7rem)}
.specialties .block-head{margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.specialties-lede{max-width:58ch;color:#4a2a3f;margin:1.4rem 0 0}
.specialty-grid{
  list-style:none;margin:clamp(2rem,5vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(68,17,55,.16);
  border:1px solid rgba(68,17,55,.16);
}
.specialty-grid li{
  background:var(--ivory);
  padding:clamp(1.5rem,3vw,2.1rem);
  display:flex;align-items:center;min-height:6.5rem;
}
.specialty-grid li span{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2.4vw,1.6rem);
  color:var(--aubergine);
}
.specialty-grid li.is-feature{background:var(--aubergine)}
.specialty-grid li.is-feature span{color:var(--ivory)}
.specialty-grid li.is-feature::before{
  content:"";width:.5rem;height:.5rem;border-radius:50%;flex:none;
  background:var(--rose);margin-right:.9rem;
}

/* =========================================================
   APPROACH
   ========================================================= */
.approach{
  background:var(--aubergine);
  color:var(--ivory);
  padding-block:var(--section-y);
  position:relative;
  overflow:hidden;
}
.approach::before{
  content:"";position:absolute;right:-6rem;bottom:-8rem;
  width:26rem;height:26rem;border-radius:50%;
  background:radial-gradient(circle,rgba(125,46,95,.5),transparent 68%);
  pointer-events:none;
}
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  position:relative;
}
.step{border-top:1px solid rgba(245,240,230,.22);padding-top:1.6rem}
.step-index{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.6rem;color:var(--rose);
  letter-spacing:.1em;margin:0 0 1.6rem;
}
.step h3{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ivory);margin-bottom:.6rem}
.step p{font-size:.95rem;color:var(--greige);font-weight:300}

/* =========================================================
   WORK
   ========================================================= */
.work{background:var(--ivory);padding-block:var(--section-y)}
.work-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,2vw,1.6rem);
}
.work-card{position:relative}
.work-card figure{
  margin:0;
  aspect-ratio:4/5;
  border-radius:2px;
  overflow:hidden;
  background:var(--aubergine);
  display:flex;align-items:flex-end;
  position:relative;
  isolation:isolate;
}
.work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* generative brand motif backgrounds while photos are pending */
.work-card figure::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(140% 120% at 20% 0%,var(--plum),transparent 55%),
    radial-gradient(120% 120% at 100% 100%,var(--aubergine-deep),transparent 60%),
    var(--aubergine);
}
.work-card[data-motif="b"] figure::before{
  background:
    radial-gradient(120% 100% at 80% 10%,var(--plum-light),transparent 45%),
    radial-gradient(140% 120% at 0% 100%,var(--plum),transparent 60%),
    var(--aubergine-deep);
}
.work-card[data-motif="c"] figure::before{
  background:
    radial-gradient(130% 120% at 50% 0%,var(--aubergine-soft),transparent 60%),
    radial-gradient(90% 90% at 100% 100%,var(--plum),transparent 55%),
    var(--aubergine);
}
.work-card figure::after{ /* the loop mark, faint */
  content:"";position:absolute;inset:0;z-index:1;
  background:url("assets/img/iso-mask.png?v=20260907b") no-repeat center 42%;
  background-size:58% auto;
  opacity:.12;
  filter:brightness(0) invert(1);
}
.work-card figcaption{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:.15rem;
  padding:1.4rem;
  color:var(--ivory);
  width:100%;
  background:linear-gradient(180deg,transparent,rgba(52,12,41,.62));
}
.work-kicker{
  font-family:var(--font-sans);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rose);
}
.work-name{font-family:var(--font-display);font-size:1.35rem;line-height:1.15}
.work-place{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.12em;color:var(--greige);text-transform:uppercase}
.work-note{
  margin-top:clamp(2rem,5vw,3rem);
  font-size:.95rem;color:#4a2a3f;
}
.work-note a{color:var(--plum);border-bottom:1px solid currentColor;padding-bottom:1px}

/* =========================================================
   MASTERCLASSES
   ========================================================= */
.masterclass{
  background:var(--aubergine);
  color:var(--ivory);
  padding-block:var(--section-y);
}
.masterclass-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,7vw,6rem);
  align-items:center;
}
.masterclass-copy h2{font-size:clamp(2rem,5.4vw,3.5rem);margin-bottom:1.4rem}
.masterclass-copy p{max-width:52ch;color:var(--greige);font-weight:300}
.masterclass-copy p + p{margin-top:1rem}
.masterclass-copy .btn{margin-top:2rem}
.masterclass-points{list-style:none;margin:0;padding:0}
.masterclass-points li{
  display:flex;gap:1.1rem;align-items:baseline;
  padding-block:1.15rem;
  border-top:1px solid rgba(245,240,230,.18);
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2.2vw,1.4rem);
  color:var(--ivory);
}
.masterclass-points li:last-child{border-bottom:1px solid rgba(245,240,230,.18)}
.masterclass-points li span{
  font-family:var(--font-sans);font-size:.7rem;letter-spacing:.2em;
  color:var(--rose);flex:none;
}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background:
    radial-gradient(80% 130% at 50% 120%,var(--aubergine),transparent 70%),
    var(--plum);
  color:var(--ivory);
  padding-block:clamp(4rem,9vw,7rem);
  text-align:center;
}
.cta-band h2{
  font-size:clamp(2.2rem,6.5vw,4.5rem);
  color:var(--ivory);
  margin-bottom:1.8rem;
}
.cta-band .script{color:var(--rose)}
.cta-band .btn-primary{background:var(--ivory);border-color:var(--ivory);color:var(--aubergine)}
.cta-band .btn-primary:hover{background:var(--rose);border-color:var(--rose);color:var(--aubergine)}

/* =========================================================
   ABOUT
   ========================================================= */
.about{background:var(--ivory);padding-block:var(--section-y)}
.about-inner{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,7vw,6rem);
  align-items:center;
}
.about-mark{color:var(--plum);opacity:.9}
.about-mark svg{width:100%;height:auto;fill:currentColor}
.about-copy h2{
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  color:var(--aubergine);
  margin-bottom:1.4rem;
}
.about-copy p{max-width:54ch;color:#4a2a3f}
.about-copy p + p{margin-top:1rem}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{background:var(--aubergine);color:var(--ivory);padding-block:var(--section-y)}
.contact-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,7vw,6rem);
}
.contact-intro h2{font-size:clamp(2rem,5vw,3.25rem);margin-bottom:2rem}
.contact-details{list-style:none;margin:0;padding:0}
.contact-details li{
  display:flex;flex-direction:column;gap:.2rem;
  padding-block:1rem;
  border-top:1px solid rgba(245,240,230,.18);
}
.contact-details li:last-child{border-bottom:1px solid rgba(245,240,230,.18)}
.contact-details span{
  font-family:var(--font-sans);font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rose);
}
.contact-details a{
  font-family:var(--font-display);font-size:1.25rem;color:var(--ivory);
  transition:color .3s var(--ease);
}
.contact-details a:hover{color:var(--greige)}

.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem}
.field{display:flex;flex-direction:column;gap:.45rem;grid-column:1/-1}
.field--half{grid-column:span 1}
.field label{
  font-family:var(--font-sans);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--greige);
}
.field input,.field textarea{
  font-family:var(--font-sans);font-size:1rem;
  color:var(--ivory);
  background:transparent;
  border:0;border-bottom:1px solid rgba(245,240,230,.32);
  padding:.7rem .1rem;
  border-radius:0;
  transition:border-color .3s var(--ease);
  width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(206,199,182,.5)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--rose)}
.field textarea{resize:vertical;min-height:3rem}
.contact-form .btn{grid-column:1/-1;justify-self:start;margin-top:.6rem}
.contact-form .btn-primary{background:var(--ivory);border-color:var(--ivory);color:var(--aubergine)}
.contact-form .btn-primary:hover{background:var(--rose);border-color:var(--rose)}
.form-hint{grid-column:1/-1;font-size:.82rem;color:var(--greige)}
.form-hint a{border-bottom:1px solid currentColor}
.form-hint.is-error{color:#ffb4b4}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--aubergine-deep);color:var(--greige);padding-block:clamp(3rem,6vw,4.5rem)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.brand--footer{color:var(--ivory)}
.brand--footer .brand-iso{width:2.4rem;height:1.9rem}
.footer-tag{font-family:var(--font-display);font-style:italic;font-size:1.7rem;color:var(--rose);margin:0}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem}
.footer-nav a{
  font-family:var(--font-sans);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--greige);
  transition:color .3s var(--ease);
}
.footer-nav a:hover{color:var(--ivory)}
.footer-legal{font-family:var(--font-sans);font-size:.7rem;letter-spacing:.08em;color:rgba(206,199,182,.6);margin:.4rem 0 0}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}

.no-js .reveal{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.8rem}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .specialty-grid{grid-template-columns:repeat(2,1fr)}
  .masterclass-inner{grid-template-columns:1fr;gap:2.5rem}
  .about-inner{grid-template-columns:1fr;text-align:left}
  .about-mark{width:9rem}
  .contact-inner{grid-template-columns:1fr}
}

@media (max-width:720px){
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:2.75rem;height:2.75rem;
    background:transparent;border:0;cursor:pointer;
    position:relative;z-index:120;
  }
  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after{
    content:"";display:block;width:24px;height:1.5px;background:var(--ivory);
    transition:transform .3s var(--ease),opacity .3s var(--ease);
  }
  .nav-toggle-bar::before{position:absolute;transform:translateY(-7px)}
  .nav-toggle-bar::after{position:absolute;transform:translateY(7px)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{transform:rotate(-45deg)}

  .nav-menu{
    position:fixed;inset:0;
    width:100vw;height:100vh;height:100dvh;
    flex-direction:column;justify-content:center;
    gap:2rem;
    background:var(--aubergine-deep);
    transform:translateX(100%);
    transition:transform .45s var(--ease);
  }
  .nav-menu.open{transform:translateX(0)}
  .nav-menu a{font-size:1rem;letter-spacing:.24em}
  .nav-cta{padding:.9rem 2rem !important}

  .service{grid-template-columns:1fr;gap:.4rem}
  .service-num{font-size:1.4rem}
  .specialty-grid{grid-template-columns:1fr}
  .hero{padding-block:8rem 5.5rem}
  .hero .eyebrow{letter-spacing:.24em;font-size:.66rem}
  .hero-actions{width:100%}
  .hero-actions .btn{width:100%}
  .hero-motif{right:-38vw;opacity:.06}
  .cta-band .btn,.contact-form .btn{width:100%}
  .work-card figure{aspect-ratio:1/1}
  .work-name{font-size:1.15rem}
}

@media (max-width:440px){
  .work-grid{grid-template-columns:1fr}
  .work-card figure{aspect-ratio:3/2}
}

/* =========================================================
   REDUCED MOTION — gate only the intrusive/continuous effects
   (reveals & hovers stay; they are not intrusive)
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-motif{transform:translateY(-50%) !important}
  .hero-scroll span{animation:none;transform:translateY(0)}
  .reveal{transition-duration:.001s}
}