/* =========================================================================
   TRUESTONE CONTRACTING — DESIGN SYSTEM
   A construction-drawing / title-block editorial system: a chiselled,
   high-contrast serif (stone-carved lettering) paired with a precise
   grotesk sans, hairline architectural framing, and blueprint-style
   labelling used as the structural device throughout.
   ========================================================================= */

/* Google Fonts are loaded via <link> in each page's <head>, not @import here —
   @import blocks the browser from discovering the font stylesheet until after
   this whole file downloads, adding a full round-trip to font load time. */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Color — named per the brief's material palette */
  --quarry:        #0B0A08;   /* deepest black — footer, hero base   */
  --charcoal:       #15140F;   /* primary dark section background     */
  --charcoal-raised:#1D1B15;   /* dark cards / raised panels          */
  --limestone:      #F4EEE3;   /* primary light section background    */
  --fieldstone:     #E9E0CD;   /* light cards / raised panels         */
  --bone:           #FBFAF5;   /* near-white — headlines on dark      */
  --ash:            #B7B0A0;   /* secondary text on dark              */
  --taupe:          #6B6153;   /* secondary text on light — 5.3:1 vs limestone */
  --ink:            #1B1912;   /* primary text on light               */
  --bronze:         #A3803F;   /* warm metallic accent                */
  --bronze-light:   #C9A768;   /* accent hover / highlight             */
  --bronze-deep:    #7C5F2C;   /* accent pressed / shadow tone         */
  --line-on-dark:   rgba(251,250,245,0.14);
  --line-on-dark-strong: rgba(251,250,245,0.28);
  --line-on-light:  rgba(27,25,18,0.13);
  --line-on-light-strong: rgba(27,25,18,0.24);
  --overlay-dark:   rgba(11,10,8,0.55);

  /* Type */
  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:   clamp(2.9rem, 3.3vw + 2rem, 5.75rem);
  --fs-h1:     clamp(2.25rem, 1.7vw + 1.7rem, 3.6rem);
  --fs-h2:     clamp(1.9rem, 1.3vw + 1.4rem, 2.75rem);
  --fs-h3:     clamp(1.3rem, 0.5vw + 1.1rem, 1.65rem);
  --fs-lead:   clamp(1.05rem, 0.3vw + 0.95rem, 1.25rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-eyebrow:0.75rem;
  --fs-mega:   clamp(4rem, 9vw, 11rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-pad: clamp(5rem, 9vw, 10rem);
  --container-w: 1400px;
  --container-pad: clamp(1.5rem, 5vw, 5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; padding:0; }
input, textarea, select{ font: inherit; color: inherit; }

::selection{ background: var(--bronze); color: var(--bone); }

:focus-visible{
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.container{
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--bronze); color:var(--quarry); padding: .75rem 1.25rem;
  font-family: var(--font-body); font-weight:700; font-size: var(--fs-small);
}
.skip-link:focus{ left: var(--sp-4); top: var(--sp-4); }

/* ---------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   --------------------------------------------------------------------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  display: inline-flex;
  align-items: center;
  gap: .75em;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: currentColor;
  display:inline-block;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--plain::before{ display:none; }

.display{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.display em{
  font-style: italic;
  font-weight: 400;
  color: var(--bronze);
}

h1.display{ font-size: var(--fs-h1); }
h2.display{ font-size: var(--fs-h2); }
h3.display{ font-size: var(--fs-h3); font-weight:500; }

.lead{
  font-size: var(--fs-lead);
  line-height: 1.6;
  font-weight: 400;
}
.on-dark{ color: var(--bone); }
.on-dark .lead, .on-dark p{ color: var(--ash); }
.on-dark .eyebrow{ color: var(--bronze-light); }

.taupe{ color: var(--taupe); }
.ash{ color: var(--ash); }

/* ---------------------------------------------------------------------
   4. BUTTONS & LINKS
   --------------------------------------------------------------------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.05rem 2rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn svg{ width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg{ transform: translateX(4px); }

.btn--bronze{ background: var(--bronze); color: var(--quarry); }
.btn--bronze:hover{ background: var(--bronze-light); }

.btn--outline-dark{ border-color: var(--line-on-dark-strong); color: var(--bone); }
.btn--outline-dark:hover{ border-color: var(--bronze); color: var(--bronze-light); }

.btn--outline-light{ border-color: var(--line-on-light-strong); color: var(--ink); }
.btn--outline-light:hover{ border-color: var(--bronze); color: var(--bronze-deep); }

.btn--ghost-dark{ color: var(--bone); padding: 0; }
.btn--ghost-dark::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background: var(--line-on-dark-strong); transform: scaleX(1); transform-origin:left;
}

.text-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-on-light-strong);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.text-link:hover{ border-color: var(--bronze); color: var(--bronze-deep); gap: .8rem; }
.text-link svg{ width:13px; height:13px; }
.on-dark .text-link{ border-color: var(--line-on-dark-strong); }
.on-dark .text-link:hover{ border-color: var(--bronze-light); color: var(--bronze-light); }

/* ---------------------------------------------------------------------
   5. SECTION FRAMES
   --------------------------------------------------------------------- */
.section{ padding-block: var(--section-pad); position:relative; }
.section--dark{ background: var(--charcoal); }
.section--quarry{ background: var(--quarry); }
.section--light{ background: var(--limestone); }
.section--tight{ padding-block: clamp(3rem,5vw,5.5rem); }

.section-head{
  display:flex; flex-direction:column; gap: var(--sp-5);
  margin-bottom: var(--sp-9);
  max-width: 760px;
}
.section-head--split{
  flex-direction:row; align-items:flex-end; justify-content:space-between;
  max-width:none; gap: var(--sp-7);
}
.section-head--split .head-copy{ max-width: 640px; }

.rule{ height:1px; background: var(--line-on-light); border:none; margin:0; }
.rule--dark{ background: var(--line-on-dark); }

/* ---------------------------------------------------------------------
   6. NAVIGATION
   --------------------------------------------------------------------- */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.75rem clamp(1.5rem,5vw,3.5rem);
  transition: background var(--dur-med) var(--ease), padding var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(11,10,8,0.92);
  backdrop-filter: blur(10px);
  padding-block: 1.1rem;
  border-color: var(--line-on-dark);
}
.nav__mark{ display:flex; align-items:center; gap:.85rem; }
.nav-logo{
  height: 34px; width: auto; display:block;
  filter: url(#logo-mono);
}
.nav__links{ display:flex; align-items:center; gap: clamp(1.25rem,2vw,2.25rem); }
.nav__link{
  font-size: .78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--bone); position:relative; padding-block:.3rem;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: var(--bronze-light); transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link:hover::after{ transform: scaleX(1); }
.nav__cta{
  border: 1px solid var(--line-on-dark-strong); color: var(--bone);
  padding: .75rem 1.4rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__cta:hover{ background: var(--bronze); border-color: var(--bronze); color: var(--quarry); }

.nav__toggle{
  display:none; flex-direction:column; gap:6px; width:28px; z-index:600;
}
.nav__toggle span{ height:1px; width:100%; background: var(--bone); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }

.mobile-menu{
  position: fixed; inset:0; z-index: 480;
  background: var(--quarry);
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(1.5rem,8vw,4rem);
  transform: translateY(-100%);
  transition: transform var(--dur-med) var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu__links{ display:flex; flex-direction:column; gap: var(--sp-3); }
.mobile-menu__links a{
  font-family: var(--font-display); font-size: clamp(2rem,8vw,3rem); color: var(--bone);
  border-bottom: 1px solid var(--line-on-dark); padding-block: var(--sp-3);
}
.mobile-menu__foot{ margin-top: var(--sp-8); display:flex; flex-direction:column; gap: var(--sp-4); }
.mobile-menu__foot a{ color: var(--ash); font-size:.85rem; letter-spacing:.06em; }
.mobile-menu__foot a.btn--bronze{ color: var(--quarry); font-size: var(--fs-small); letter-spacing: 0.12em; }

body.menu-open{ overflow:hidden; }

/* ---------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background: var(--quarry);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(11,10,8,0.92) 0%, rgba(11,10,8,0.35) 46%, rgba(11,10,8,0.55) 100%);
}
.hero__content{
  position:relative; z-index:2;
  padding: 0 clamp(1.5rem,5vw,3.5rem) clamp(3rem,7vw,5.5rem);
  display:flex; flex-direction:column; gap: var(--sp-6);
}
.hero__tag{
  display:flex; align-items:center; gap:.9rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--bronze-light);
}
.hero__tag span.sep{ width:1px; height:12px; background: var(--line-on-dark-strong); }
.hero__headline{
  font-size: var(--fs-hero); color: var(--bone); max-width: 15ch;
}
.hero__row{
  display:flex; align-items:flex-end; justify-content:space-between; gap: var(--sp-8);
  border-top: 1px solid var(--line-on-dark); padding-top: var(--sp-6);
  flex-wrap: wrap;
}
.hero__lead{ max-width: 34ch; font-size: var(--fs-lead); color: var(--ash); }
.hero__actions{ display:flex; gap: var(--sp-4); flex-wrap:wrap; }
.hero__meta{
  position:absolute; right: clamp(1.5rem,5vw,3.5rem); top: 50%;
  transform: translateY(-50%) rotate(90deg); transform-origin: right center;
  display:flex; align-items:center; gap:.9rem;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color: var(--ash);
  z-index:2;
}
.scroll-cue{
  position:absolute; left: clamp(1.5rem,5vw,3.5rem); top: 50%; transform: translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap: var(--sp-3);
  z-index:2; color: var(--ash);
}
.scroll-cue span{ writing-mode: vertical-rl; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; }
.scroll-cue__line{ width:1px; height:52px; background: var(--line-on-dark-strong); position:relative; overflow:hidden; }
.scroll-cue__line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--bronze-light);
  animation: cueDrop 2.4s var(--ease) infinite;
}
@keyframes cueDrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------------------------------------------------------------------
   8. MEDIA FRAMES (art-directed photography placeholders)
   --------------------------------------------------------------------- */
.frame{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
}
.frame__tex{ width:100%; height:100%; display:block; }
.frame__tex img{ width:100%; height:100%; object-fit:cover; }
.frame__corner{
  position:absolute; width:18px; height:18px; z-index:2; pointer-events:none;
}
.frame__corner::before, .frame__corner::after{ content:""; position:absolute; background: var(--bronze-light); }
.frame__corner::before{ width:100%; height:1px; }
.frame__corner::after{ width:1px; height:100%; }
.frame__corner--tl{ top:12px; left:12px; }
.frame__corner--tl::before, .frame__corner--tl::after{ top:0; left:0; }
.frame__corner--br{ bottom:12px; right:12px; }
.frame__corner--br::before{ bottom:0; right:0; }
.frame__corner--br::after{ bottom:0; right:0; }
.frame__caption{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--bone); background: rgba(11,10,8,0.55); backdrop-filter: blur(3px);
  padding: .45rem .65rem; display:flex; align-items:center; gap:.5rem;
}
.frame__caption b{ color: var(--bronze-light); font-weight:700; }
.frame:hover .frame__tex{ transform: scale(1.045); }
.frame__tex{ transition: transform var(--dur-slow) var(--ease); }

.tex-icon{ width:100%; height:100%; position:relative; }
.tex-icon svg{ width:34%; height:34%; margin:auto; position:absolute; inset:0; opacity:.9; }

/* Art-directed placeholder textures — used in place of client photography
   until real project photos are supplied. Each variant is a distinct
   duotone gradient in the brand palette so panels read as intentional. */
.tex-a{ background: radial-gradient(120% 140% at 20% 0%, #2a2620 0%, #15140F 62%); color: var(--bronze-light); }
.tex-b{ background: radial-gradient(120% 140% at 80% 100%, #241f16 0%, #0B0A08 65%); color: var(--bronze-light); }
.tex-c{ background: linear-gradient(155deg, #EFE7D6 0%, #E9E0CD 55%, #DED2B7 100%); color: var(--bronze-deep); }
.tex-d{ background: linear-gradient(200deg, #E9E0CD 0%, #F4EFE4 60%); color: var(--bronze-deep); }
.tex-e{ background: radial-gradient(130% 150% at 100% 0%, #3a2c18 0%, #15140F 60%); color: var(--bronze-light); }
.tex-f{ background: linear-gradient(160deg, #221f18 0%, #0B0A08 70%); color: var(--bronze-light); }

/* ---------------------------------------------------------------------
   9. INTRO / BRAND STATEMENT
   --------------------------------------------------------------------- */
.intro{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,5rem);
  align-items:center;
}
.intro__copy{ max-width: 46ch; }
.intro__copy .display{ margin-bottom: var(--sp-6); }
.intro__copy p{ color: var(--taupe); font-size: var(--fs-lead); }
.intro__service{ margin-top: var(--sp-7); display:flex; align-items:center; gap: var(--sp-4); }
.intro__service .rule{ flex:1; }
.intro__media{ aspect-ratio: 4/5; }

/* ---------------------------------------------------------------------
   10. SERVICES
   --------------------------------------------------------------------- */
.service{
  display:grid; grid-template-columns: 1fr 1fr; align-items:stretch;
  border-top: 1px solid var(--line-on-dark);
}
.service:last-child{ border-bottom: 1px solid var(--line-on-dark); }
.service__media{ width:100%; height:100%; min-width:0; }
.service__body{ min-width:0; }
.service__body{
  display:flex; flex-direction:column; justify-content:center; gap: var(--sp-4);
  padding: clamp(2.5rem,5vw,5rem);
}
.service__index{
  font-family: var(--font-display); font-size: 1rem; color: var(--bronze-light);
  letter-spacing:.08em;
}
.service__body h3{ color: var(--bone); max-width: 14ch; }
.service__body p{ color: var(--ash); max-width: 42ch; }
.service:nth-child(even) .service__media{ order:2; }

@media (min-width: 61.25em){
  .service{ min-height: 420px; }
}

/* ---------------------------------------------------------------------
   11. FEATURED PROJECTS
   --------------------------------------------------------------------- */
.projects-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-on-light);
}
.projects-grid > *{ background: var(--limestone); }
.pg-item{ aspect-ratio: 4/5; position:relative; }
.pg-item .frame__caption{ opacity:0; transform: translateY(6px); transition: all var(--dur-fast) var(--ease); }
.pg-item:hover .frame__caption{ opacity:1; transform:none; }

/* ---------------------------------------------------------------------
   12. WHY CHOOSE / STATEMENTS
   --------------------------------------------------------------------- */
.statements{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line-on-light);
  border-left: 1px solid var(--line-on-light);
}
.statement{
  padding: clamp(2rem,3vw,2.75rem);
  border-right: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
  display:flex; flex-direction:column; gap: var(--sp-4);
}
.statement__num{ font-family: var(--font-display); font-size:1.4rem; color: var(--bronze-deep); }
.statement h3{ max-width:20ch; }
.statement p{ color: var(--taupe); font-size:.96rem; }

/* ---------------------------------------------------------------------
   13. ABOUT
   --------------------------------------------------------------------- */
.about{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,5rem);
  align-items:center;
}
.about__gallery{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); min-width: 0; }
.about__gallery .frame:first-child{ grid-column: 1 / -1; aspect-ratio: 16/10; }
.about__gallery .frame:not(:first-child){ aspect-ratio: 1/1; }
.about__copy p{ color: var(--ash); font-size: var(--fs-lead); margin-bottom: var(--sp-5); max-width: 52ch; }
.about__line{
  font-family: var(--font-display); font-style: italic; font-size:1.35rem;
  color: var(--bronze-light); margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--line-on-dark);
}

/* ---------------------------------------------------------------------
   14. PROCESS
   --------------------------------------------------------------------- */
.process{ position:relative; }
.process__list{
  display:grid; grid-template-columns: repeat(5,1fr);
  border-top: 1px solid var(--line-on-light);
}
.process__item{
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  border-right: 1px solid var(--line-on-light);
  display:flex; flex-direction:column; gap: var(--sp-4);
  position:relative;
}
.process__item:last-child{ border-right:none; }
.process__num{
  font-family: var(--font-display); font-size:2rem; color: var(--line-on-light-strong);
  transition: color var(--dur-med) var(--ease);
}
.process__item.is-active .process__num{ color: var(--bronze); }
.process__item h3{ font-size:1.05rem; font-weight:700; font-family: var(--font-body); letter-spacing:.01em; }
.process__item p{ color: var(--taupe); font-size:.9rem; }
.process__track{ height:2px; background: var(--line-on-light); margin-top:-1px; position:relative; }
.process__fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--bronze); transition: width .3s linear; }

/* ---------------------------------------------------------------------
   15. TESTIMONIALS
   --------------------------------------------------------------------- */
.testimonials__grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line-on-dark);
  border-top: 1px solid var(--line-on-dark); border-bottom: 1px solid var(--line-on-dark);
}
.testimonial{ background: var(--charcoal); padding: clamp(2rem,3vw,2.75rem); display:flex; flex-direction:column; gap: var(--sp-5); }
.stars{ display:flex; gap:.3rem; color: var(--bronze); }
.stars svg{ width:14px; height:14px; }
.testimonial blockquote{ margin:0; color: var(--bone); font-size:1.05rem; line-height:1.55; font-style:italic; font-family: var(--font-display); font-weight:400; }
.testimonial__meta{ display:flex; flex-direction:column; gap:.2rem; margin-top:auto; }
.testimonial__meta b{ color: var(--bone); font-size:.85rem; letter-spacing:.03em; }
.testimonial__meta span{ color: var(--ash); font-size:.78rem; }
.placeholder-flag{
  display:inline-block; margin-top: var(--sp-2); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--bronze-light); border: 1px solid var(--line-on-dark-strong); padding:.3rem .55rem; width:fit-content;
}

/* ---------------------------------------------------------------------
   16. TRUST STRIP
   --------------------------------------------------------------------- */
.trust-strip{
  display:flex; flex-wrap:wrap; gap: var(--sp-8);
  justify-content:space-between; align-items:center;
  padding-block: var(--sp-6);
}
.trust-item{ display:flex; align-items:center; gap: var(--sp-3); }
.trust-item svg{ width:20px; height:20px; color: var(--bronze); flex-shrink:0; }
.trust-item span{ font-size:.82rem; letter-spacing:.03em; color: var(--ash); font-weight:600; }

/* ---------------------------------------------------------------------
   16a. SERVICE AREA
   --------------------------------------------------------------------- */
.town-list{
  display:flex; flex-wrap:wrap; gap: .75rem; list-style:none; margin:0; padding:0;
  flex-shrink:0;
}
@media (max-width: 61.25em){
  .town-list{ margin-top: var(--sp-6); }
}
.town-list li{
  padding: .6rem 1.15rem; border: 1px solid var(--line-on-dark-strong);
  font-size: .85rem; font-weight:600; color: var(--ash); letter-spacing:.02em;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.town-list li:hover{ border-color: var(--bronze); color: var(--bone); }

/* ---------------------------------------------------------------------
   16b. FAQ
   --------------------------------------------------------------------- */
.faq-wrap{ max-width: 860px; }
.faq-list{ border-top: 1px solid var(--line-on-light); }
.faq-item{ border-bottom: 1px solid var(--line-on-light); }
.faq-item summary{
  padding-block: 1.6rem; cursor: pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-5);
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color: var(--bronze-deep); }
.faq-item summary .faq-icon{
  flex-shrink:0; width:22px; height:22px; position:relative;
}
.faq-item summary .faq-icon::before,
.faq-item summary .faq-icon::after{
  content:""; position:absolute; top:50%; left:50%; background: var(--bronze);
  transform: translate(-50%,-50%); transition: transform var(--dur-fast) var(--ease);
}
.faq-item summary .faq-icon::before{ width:14px; height:1.5px; }
.faq-item summary .faq-icon::after{ width:1.5px; height:14px; }
.faq-item[open] summary .faq-icon::after{ transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq-item[open] summary{ color: var(--bronze-deep); }
.faq-item__answer{ margin: 0 0 1.75rem; max-width: 65ch; color: var(--taupe); font-size: .98rem; }

/* ---------------------------------------------------------------------
   17. CONTACT CTA
   --------------------------------------------------------------------- */
.contact-cta{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem,5vw,6rem);
}
.contact-cta__headline{ max-width: 14ch; margin-bottom: var(--sp-6); }
.contact-cta__actions{ display:flex; gap: var(--sp-4); flex-wrap:wrap; margin-top: var(--sp-7); }
.contact-info{ display:flex; flex-direction:column; gap: var(--sp-6); }
.contact-info dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--bronze-light); margin-bottom:.5rem; }
.contact-info dd{ margin:0; font-size:1.2rem; font-family: var(--font-display); color: var(--bone); }
.contact-info .socials{ display:flex; gap: var(--sp-4); margin-top: var(--sp-4); }
.socials a{
  width:38px; height:38px; border:1px solid var(--line-on-dark-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:.66rem; font-weight:800; letter-spacing:.03em; color: var(--bone);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.socials a:hover{ border-color: var(--bronze); background: var(--bronze); color: var(--quarry); }

/* ---------------------------------------------------------------------
   18. FOOTER
   --------------------------------------------------------------------- */
.site-footer{ background: var(--quarry); color: var(--ash); padding-top: var(--sp-9); }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-8);
  padding-bottom: var(--sp-9); border-bottom: 1px solid var(--line-on-dark);
}
.footer-logo{ height: 44px; width: auto; display:block; filter: url(#logo-alpha); }
.footer-brand p{ color: var(--ash); max-width:34ch; margin-block: var(--sp-5); font-size:.92rem; }
.footer-col h4{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--bronze-light); margin-bottom: var(--sp-4); }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--sp-3); }
.footer-col a{ font-size:.88rem; color: var(--ash); transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--bone); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-3);
  padding-block: var(--sp-6); font-size:.78rem; color: var(--ash);
}
.footer-bottom nav{ display:flex; gap: var(--sp-6); }

/* ---------------------------------------------------------------------
   19. STICKY MOBILE CTA
   --------------------------------------------------------------------- */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 400;
  display:none; padding: .85rem 1rem;
  background: var(--quarry); border-top: 1px solid var(--line-on-dark);
}
.sticky-cta a{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background: var(--bronze); color: var(--quarry); padding: .95rem;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}

.back-to-top{
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 390;
  width: 46px; height: 46px; display:flex; align-items:center; justify-content:center;
  background: var(--quarry); border: 1px solid var(--line-on-dark-strong); color: var(--bone);
  opacity:0; transform: translateY(10px); pointer-events:none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.back-to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover{ border-color: var(--bronze); background: var(--bronze); color: var(--quarry); }
.back-to-top svg{ width:18px; height:18px; }
@media (max-width: 61.25em){
  .back-to-top{ bottom: 5.25rem; }
}

/* ---------------------------------------------------------------------
   20. SCROLL REVEAL
   --------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .14s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .23s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .32s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .41s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .5s; }

/* Photos settle into place as they scroll into view, independent of the
   hover-zoom transform (which targets .frame__tex, not the img itself). */
.reveal .frame__tex img,
.reveal-stagger .frame__tex img{
  transform: scale(1.09);
  transition: transform 1.3s var(--ease);
}
.reveal.is-visible .frame__tex img,
.reveal-stagger.is-visible .frame__tex img{
  transform: scale(1);
}

/* ---------------------------------------------------------------------
   21. CASE STUDY
   --------------------------------------------------------------------- */
.case-hero{
  position:relative; min-height: 78vh; display:flex; flex-direction:column; justify-content:flex-end;
  background: var(--quarry); overflow:hidden; padding-top: 6rem;
}
.case-hero__media{ position:absolute; inset:0; }
.case-hero__media img{ width:100%; height:100%; object-fit:cover; }
.case-hero__scrim{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(11,10,8,.94) 0%, rgba(11,10,8,.25) 50%, rgba(11,10,8,.45) 100%); }
.case-hero__content{ position:relative; z-index:2; padding: 0 clamp(1.5rem,5vw,3.5rem) clamp(2.5rem,6vw,4.5rem); }
.back-link{ display:inline-flex; align-items:center; gap:.6rem; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); margin-bottom: var(--sp-6); }
.back-link svg{ width:14px; height:14px; transform: rotate(180deg); }
.back-link:hover{ color: var(--bronze-light); }
.case-hero__title{ font-size: clamp(2.5rem,5vw,4.5rem); color: var(--bone); max-width: 18ch; }
.case-meta{
  display:flex; flex-wrap:wrap; gap: var(--sp-8); margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--line-on-dark);
}
.case-meta dt{ font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color: var(--bronze-light); margin-bottom:.4rem; }
.case-meta dd{ margin:0; font-family: var(--font-display); font-size:1.15rem; color: var(--bone); }

.case-block{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.case-block--reverse .case-block__media{ order:2; }
.case-block__media{ aspect-ratio: 4/5; }
.case-block__label{ font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-deep); font-weight:700; margin-bottom: var(--sp-4); display:block; }
.case-block__copy p{ margin-bottom: var(--sp-4); }
.case-block__copy p:last-child{ margin-bottom:0; }
.spec-list{ margin-top: var(--sp-6); display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-on-light); }
.spec-list div{ display:flex; justify-content:space-between; gap: var(--sp-4); padding: .9rem 0; border-bottom:1px solid var(--line-on-light); }
.spec-list dt{ font-size:.8rem; letter-spacing:.04em; color:var(--taupe); }
.spec-list dd{ margin:0; font-weight:600; font-size:.9rem; text-align:right; }

.case-gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line-on-dark); }
.case-gallery > *{ background: var(--charcoal); aspect-ratio: 4/5; }

.ba-slider{ position:relative; aspect-ratio: 16/9; overflow:hidden; user-select:none; }
.ba-slider__frame{ position:absolute; inset:0; }
.ba-slider__frame--before{ clip-path: inset(0 50% 0 0); }
.ba-slider__label{ position:absolute; top:14px; z-index:3; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); background:rgba(11,10,8,.55); padding:.4rem .7rem; }
.ba-slider__label--before{ left:14px; }
.ba-slider__label--after{ right:14px; }
.ba-slider__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background: var(--bronze-light); z-index:2;
  transform: translateX(-1px); pointer-events:none;
}
.ba-slider__handle::after{
  content:"◂ ▸"; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:var(--bronze); color:var(--quarry);
  display:flex; align-items:center; justify-content:center; font-size:.7rem; letter-spacing:.05em;
}
.ba-slider__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.ba-slider__range::-webkit-slider-thumb{ -webkit-appearance:none; width:40px; height:40px; }

.ba-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3rem);
  margin-top: var(--sp-8);
}
.ba-item{ min-width: 0; }
.ba-item .ba-slider{ aspect-ratio: 4/3; }
.ba-item__caption{ margin-top: var(--sp-4); font-size:.88rem; color: var(--ash); max-width: 48ch; }
@media (max-width: 61.25em){
  .ba-grid{ grid-template-columns: 1fr; gap: var(--sp-8); }
}

.case-subnav{
  position: sticky; top: 0; z-index: 300;
  background: rgba(244,239,228,0.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-on-light);
}
.case-subnav__inner{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-6);
  padding-block: 1.1rem; flex-wrap:wrap;
}
.breadcrumb{ display:flex; align-items:center; gap:.5rem; font-size:.76rem; color: var(--taupe); }
.breadcrumb a{ color: var(--taupe); transition: color var(--dur-fast); }
.breadcrumb a:hover{ color: var(--bronze-deep); }
.breadcrumb span[aria-current]{ color: var(--ink); font-weight:600; }
.case-subnav__links{ display:flex; gap: var(--sp-6); }
.case-subnav__links a{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--taupe);
  padding-bottom:.3rem; border-bottom:1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.case-subnav__links a:hover{ color: var(--ink); }
.case-subnav__links a.is-active{ color: var(--bronze-deep); border-color: var(--bronze); }

.case-subnav__jump{ display:none; width:100%; }
.case-subnav__jump select{
  width:100%; appearance:none; -webkit-appearance:none;
  border:1px solid var(--line-on-light-strong); background-color: var(--limestone);
  color: var(--ink); font-family: var(--font-body); font-size:.85rem; font-weight:700;
  letter-spacing:.03em; padding: .85rem 2.5rem .85rem 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3803F' stroke-width='1.8'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1rem center; background-size:16px;
}
.case-subnav__jump select:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 2px; }
@media (max-width: 54em){
  .case-subnav__links{ display:none; }
  .case-subnav__jump{ display:block; }
  .case-subnav__inner{ flex-direction:column; align-items:stretch; gap: var(--sp-3); }
}

.pull-quote{
  font-family: var(--font-display); font-style:italic; font-size: clamp(1.5rem,2.5vw,2.1rem);
  line-height:1.4; max-width: 24ch; color: var(--bone);
  border-left: 1px solid var(--bronze); padding-left: var(--sp-6);
}

/* ---------------------------------------------------------------------
   21b. LIGHTBOX GALLERY
   --------------------------------------------------------------------- */
[data-lightbox]{ cursor: zoom-in; }
[data-lightbox]:focus-visible{ outline: 2px solid var(--bronze); outline-offset: -4px; }
[data-lightbox] .frame__expand{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background: rgba(11,10,8,0.55); backdrop-filter: blur(3px);
  opacity:0; transform: scale(.85); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  pointer-events:none;
}
[data-lightbox] .frame__expand svg{ width:15px; height:15px; color: var(--bone); }
[data-lightbox]:hover .frame__expand,
[data-lightbox]:focus-visible .frame__expand{ opacity:1; transform:none; }

.lightbox{
  position: fixed; inset:0; z-index: 700;
  background: rgba(11,10,8,0.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: clamp(1.5rem,5vw,4rem);
  opacity:0; transition: opacity var(--dur-med) var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }
body.lightbox-open{ overflow:hidden; }

.lightbox__figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap: var(--sp-4); max-width:100%; max-height:100%; }
.lightbox__img{
  max-width: min(88vw, 1400px); max-height: 74vh; width:auto; height:auto;
  object-fit:contain; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: scale(.97); transition: transform var(--dur-med) var(--ease);
}
.lightbox.is-open .lightbox__img{ transform: scale(1); }
.lightbox__caption{
  font-size:.78rem; letter-spacing:.08em; color: var(--ash); text-align:center; max-width:60ch;
}
.lightbox__count{
  position:absolute; left: clamp(1.25rem,4vw,2.5rem); bottom: clamp(1.25rem,4vw,2.5rem);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ash);
}
.lightbox__close, .lightbox__nav{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid var(--line-on-dark-strong); background: rgba(11,10,8,0.5);
  color: var(--bone); transition: border-color var(--dur-fast), background var(--dur-fast);
}
.lightbox__close:hover, .lightbox__nav:hover{ border-color: var(--bronze); background: var(--bronze); color: var(--quarry); }
.lightbox__close{ top: clamp(1.25rem,4vw,2.5rem); right: clamp(1.25rem,4vw,2.5rem); }
.lightbox__close svg, .lightbox__nav svg{ width:18px; height:18px; }
.lightbox__nav--prev{ left: clamp(1rem,3vw,2rem); top:50%; transform: translateY(-50%); }
.lightbox__nav--next{ right: clamp(1rem,3vw,2rem); top:50%; transform: translateY(-50%); }
@media (max-width: 40em){
  .lightbox__nav{ width:44px; height:44px; }
  .lightbox__nav--prev{ left: .5rem; }
  .lightbox__nav--next{ right: .5rem; }
  .lightbox__count{ display:none; }
}

/* ---------------------------------------------------------------------
   22. CONSULTATION FORM
   --------------------------------------------------------------------- */
.consult-head{ padding-top: 10rem; padding-bottom: var(--sp-8); }
.consult-head h1{ max-width: 16ch; margin: 1.25rem 0 1.25rem; }
.consult-head p{ max-width: 56ch; }

.consult-wrap{ max-width: 720px; margin-inline:auto; }

.progress{ display:flex; align-items:center; margin-bottom: var(--sp-9); }
.progress__step{ display:flex; align-items:center; gap: var(--sp-3); flex:1; }
.progress__step:last-child{ flex:0; }
.progress__dot{
  width:34px; height:34px; border:1px solid var(--line-on-light-strong); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:.95rem; color: var(--taupe);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.progress__label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--taupe); white-space:nowrap; display:none; }
.progress__line{ height:1px; background: var(--line-on-light-strong); flex:1; margin: 0 var(--sp-3); }
.progress__step.is-active .progress__dot,
.progress__step.is-done .progress__dot{ border-color: var(--bronze); color: var(--bronze-deep); background: transparent; }
.progress__step.is-done .progress__dot{ background: var(--bronze); color: var(--quarry); }
.progress__step.is-active .progress__label{ color: var(--ink); }

.form-step{ display:none; }
.form-step.is-active{ display:block; animation: stepIn .5s var(--ease); }
@keyframes stepIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

.form-step__head{ margin-bottom: var(--sp-7); }
.form-step__head span{ font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-deep); font-weight:700; }
.form-step__head h2{ font-size: var(--fs-h3); margin-top:.6rem; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.form-field{ display:flex; flex-direction:column; gap:.55rem; margin-bottom: var(--sp-5); }
.form-field label{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color: var(--ink); }
.form-field--optional label::after{ content:" (optional)"; text-transform:none; font-weight:400; letter-spacing:0; color: var(--taupe); }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select,
.form-field textarea{
  border: 1px solid var(--line-on-light-strong); background: var(--limestone);
  padding: .9rem 1rem; font-family: var(--font-body); font-size:.95rem; color: var(--ink);
  transition: border-color var(--dur-fast);
}
.form-field textarea{ resize: vertical; min-height:110px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color: var(--bronze); }
.form-field select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7263' stroke-width='1.6'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 1rem center; background-size:16px; }

.radio-group{ display:flex; gap: var(--sp-4); flex-wrap:wrap; }
.radio-pill{ position:relative; }
.radio-pill input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-pill span{
  display:inline-flex; align-items:center; padding:.7rem 1.2rem; border:1px solid var(--line-on-light-strong);
  font-size:.82rem; font-weight:600; color: var(--taupe); transition: all var(--dur-fast);
}
.radio-pill input:checked + span{ border-color: var(--bronze); color: var(--ink); background: var(--fieldstone); }
.radio-pill input:focus-visible + span{ outline:2px solid var(--bronze); outline-offset:2px; }

.upload-zone{
  border: 1px dashed var(--line-on-light-strong); padding: var(--sp-8) var(--sp-5); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: var(--sp-3); cursor:pointer; position:relative;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.upload-zone:hover, .upload-zone.is-dragover{ border-color: var(--bronze); background: var(--fieldstone); }
.upload-zone svg{ width:26px; height:26px; color: var(--bronze); }
.upload-zone span.hint{ font-size:.8rem; color: var(--taupe); }
.upload-zone input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-list{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.upload-list span{ font-size:.75rem; padding:.4rem .7rem; background: var(--fieldstone); color: var(--ink); }

.form-actions{ display:flex; justify-content:space-between; align-items:center; margin-top: var(--sp-8); }
.form-actions .btn[disabled]{ opacity:.35; pointer-events:none; }

.consult-note{ font-size:.85rem; color: var(--taupe); margin-top: var(--sp-4); }

.consult-done{ display:none; text-align:center; padding: var(--sp-9) 0; flex-direction:column; align-items:center; gap: var(--sp-5); }
.consult-done.is-active{ display:flex; }
.consult-done svg{ width:52px; height:52px; color: var(--bronze); }
.consult-done h2{ max-width:20ch; }
.consult-done p{ max-width:48ch; color: var(--taupe); }

/* ---------------------------------------------------------------------
   23. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 78em){
  .statements{ grid-template-columns: repeat(2,1fr); }
  .process__list{ grid-template-columns: repeat(3,1fr); }
  .process__item:nth-child(3){ border-right:none; }
}
@media (max-width: 61.25em){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }

  .intro, .about, .contact-cta{ grid-template-columns: 1fr; }
  .about__copy{ order:-1; }
  .intro__media{ order:-1; aspect-ratio: 16/10; }

  .case-block{ grid-template-columns:1fr; }
  .case-block--reverse .case-block__media{ order:-1; }
  .case-gallery{ grid-template-columns: repeat(2,1fr); }
  .case-meta{ gap: var(--sp-5); }

  .form-row{ grid-template-columns:1fr; gap:0; }

  .service{ grid-template-columns:1fr; }
  .service__media{ order:-1 !important; aspect-ratio: 16/10; }

  .projects-grid{ grid-template-columns: repeat(2,1fr); }

  .statements{ grid-template-columns: 1fr 1fr; }
  .process__list{ grid-template-columns: 1fr; }
  .process__item{ border-right:none !important; border-bottom: 1px solid var(--line-on-light); }
  .process__track{ display:none; }

  .testimonials__grid{ grid-template-columns:1fr; }

  .footer-grid{ grid-template-columns: 1fr 1fr; }

  .section-head--split{ flex-direction:column; align-items:flex-start; }

  .sticky-cta{ display:block; }
  body{ padding-bottom: 68px; }

  .hero__meta{ display:none; }
  .hero__content{ padding-bottom: 6.5rem; }
}
@media (max-width: 40em){
  .statements{ grid-template-columns: 1fr; }
  .projects-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero__row{ flex-direction:column; align-items:flex-start; gap: var(--sp-5); }
  .case-gallery{ grid-template-columns: 1fr; }
}