*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Emphasis highlights — colour adapts to section background ── */
.hl{background:var(--teal);color:var(--dark);padding:0.05em 0.3em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.proc-pink .hl{background:white;color:var(--pink)}
.proc-blue .hl{background:var(--pink);color:var(--dark)}

/* Text-selection colors, context-aware:
   default (cream/white bg) → green; blue bg → pink; pink bg → cream */
::selection{background:var(--green);color:var(--dark)}
.field-notes ::selection,
.field-notes::selection,
footer ::selection,
footer::selection,
.proc-blue ::selection,
.proc-blue::selection{background:var(--pink);color:var(--dark)}
.services-section ::selection,
.services-section::selection{background:var(--cream);color:var(--dark)}
.proc-pink ::selection,
.proc-pink::selection,
.about-logo-strip ::selection,
.about-logo-strip::selection{background:white;color:var(--blue)}
:root{
  --cream:#ffffff;
  --blue:#3845a0;
  --green:#a8efaa;
  --pink:#e5b1ef;
  --teal:#98e0e3;
  --dark:#151616;
  /* Page side margin: 162px on screens ≥ ~1440px, scales down responsively */
  --side-pad:clamp(1.2rem, 9vw, 14rem);
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--cream);color:var(--dark);overflow-x:hidden;font-family:'Azeret Mono',monospace}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:54px 72px;}
.nav-logo{width:49px;cursor:pointer;flex-shrink:0;transition:opacity .35s ease,width .35s ease}
.nav-ham{display:flex;flex-direction:column;gap:6px;cursor:pointer;
  transition:transform .35s ease,gap .35s ease;}
.nav-ham span{display:block;width:39px;height:8px;background:var(--dark);border-radius:2px;
  transition:transform .35s ease,opacity .35s ease,background .35s ease,width .35s ease,height .35s ease;}

/* Scrolled state: logo + hamburger shrink 25% */
nav.nav--scrolled .nav-logo { width: 37px; }
nav.nav--scrolled .nav-ham { gap: 4.5px; }
nav.nav--scrolled .nav-ham span { width: 29px; height: 6px; }
/* X translateY: height(6) + gap(4.5) = 10.5 → 11px */
nav.nav--scrolled .nav-ham.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
nav.nav--scrolled .nav-ham.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* NAV OVERLAY — circle expands from hamburger corner */
.nav-overlay{
  position:fixed;top:0;left:0;width:100%;height:100vh;z-index:190;
  background:var(--blue);
  display:grid;place-items:center;
  /* Origin: centre of hamburger (right:72px pad + ~15px half-width, top:54px pad + ~14px half-height) */
  clip-path:circle(0% at calc(100% - 87px) 68px);
  transition:clip-path .65s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
.nav-overlay.open{
  clip-path:circle(170vmax at calc(100% - 87px) 68px);
  pointer-events:all;
}
.nav-menu{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.05em;
}
.nav-menu-item{
  font-family:'Azeret Mono',monospace;font-weight:600;
  font-size:clamp(24px,6.5vw,120px);line-height:1.1;
  color:white;text-decoration:none;
  display:flex;align-items:center;
  transition:color .25s ease;
}
/* Arrow slides in from left, revealing via max-width clip */
.nav-arrow{
  display:inline-block;
  max-width:0;overflow:hidden;white-space:nowrap;
  opacity:0;
  transform:translateX(-0.3em);
  margin-right:0;
  transition:max-width .3s cubic-bezier(.65,0,.35,1),
             opacity .25s ease,
             transform .3s ease,
             margin-right .3s ease;
}
.nav-menu-item:hover{color:var(--teal)}
.nav-menu-item:hover .nav-arrow{
  max-width:1.5em;opacity:1;
  transform:translateX(0);
  margin-right:0.15em;
}

/* Hamburger → X when open; scale up 150%
   translateY: span height(8) + gap(6) = 14px to bring span 1/3 to centre */
.nav-ham.open{transform:scale(1.5)}
.nav-ham.open span:nth-child(1){transform:translateY(14px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0}
.nav-ham.open span:nth-child(3){transform:translateY(-14px) rotate(-45deg)}

/* Logo hides; nav elements turn white over the blue overlay */
body.nav-open .nav-logo{opacity:0;pointer-events:none}
body.nav-open .nav-ham span{background:white}

/* HERO */
.hero{height:62vh;min-height:380px;
  position:relative;z-index:0;overflow:hidden}
.hero::before{
  content:'';
  position:absolute;
  inset:-30% 0;
  background:url('../assets/images/hero.png') center/cover no-repeat;
  will-change:transform;
  transform:translateY(var(--hero-y,0px));
}
/* Video variant — suppress background image, style the video element instead */
.hero--video::before{ background-image:none; }
.hero--video video{
  position:absolute;
  top:-10%;left:0;
  width:100%;height:120%;
  object-fit:cover;
  will-change:transform;
  transform:translateY(var(--hero-y,0px));
}

/* MAIN CONTENT — slides over hero */
.main{background:var(--cream);position:relative;z-index:1;margin-top:0}


.wave-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  pointer-events: none;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 90" preserveAspectRatio="none"> <path   d="M0,0 L12.5,0.384981 L25,1.53334 L37.5,3.42542 L50,6.02886 L62.5,9.2991 L75,13.1802 L87.5,17.6057 L100,22.5 L112.5,27.7792 L125,33.3531 L137.5,39.1263 L150,45 L162.5,50.8737 L175,56.6469 L187.5,62.2208 L200,67.5 L212.5,72.3943 L225,76.8198 L237.5,80.7009 L250,83.9711 L262.5,86.5746 L275,88.4667 L287.5,89.615 L300,90 L312.5,89.615 L325,88.4667 L337.5,86.5746 L350,83.9711 L362.5,80.7009 L375,76.8198 L387.5,72.3943 L400,67.5 L412.5,62.2208 L425,56.6469 L437.5,50.8737 L450,45 L462.5,39.1263 L475,33.3531 L487.5,27.7792 L500,22.5 L512.5,17.6057 L525,13.1802 L537.5,9.2991 L550,6.02886 L562.5,3.42542 L575,1.53334 L587.5,0.384981 L600,0 L600,90 L0,90 Z"   fill="white" /></svg>'); 
  mask-repeat: repeat-x;
  height: 30px;
  mask-size: 200px 30px;
}

.wave-top.white {
  background-color: var(--cream);
}
.wave-top.blue {
  background-color: var(--blue);
}


/* minwidth 420 */

@media screen and (min-width: 620px) {
  .wave-top {
    height: 60px;
    mask-size: 400px 60px;
  }
}



/* HEADLINE */
.hl-section{
  padding:7.575rem var(--side-pad) 0;text-align:center;
  contain:paint;
}
.headline{
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(24.5px,3.5vw,47.5px);line-height:1.25;color:var(--dark);
  margin-bottom:24px;
}
/* Headline break spans.
   hd-break--complex : after "complex"   — off by default, on at ≤620px
   hd-break--science : after "science"   — on by default, off at ≥1550px and ≤620px
   hd-break          : after "something" — always on
   hd-break--typed   : after cursor      — off by default, on at ≤620px
   Layouts:
     ≥1550px  2-line  "We turn complex science into something / [typed] actually get/s"
     default  3-line  "We turn complex science / into something / [typed] actually get/s"
     ≤620px   4-line  "We turn complex / science into something / [typed] / actually get/s" */
.hd-break          { display: block }
.hd-break--science { display: block }
.hd-break--complex { display: none }
.hd-break--typed   { display: none }
@media (min-width:1550px){
  .hd-break--science { display: none }
}
@media (max-width:620px){
  .hd-break--complex { display: block }
  .hd-break--science { display: none }
  .hd-break--typed   { display: block }
}
.u-teal{text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:0.26em;text-underline-offset:0.1em;text-decoration-skip-ink:none}
.u-blue{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:0.26em;text-underline-offset:0.1em;text-decoration-skip-ink:none}
/* TYPEWRITER */
#typed-text{
  display:inline;
  text-decoration:underline;
  text-decoration-color:var(--green);
  text-decoration-thickness:0.26em;
  text-underline-offset:0.1em;
  text-decoration-skip-ink:none;
}
.typed-cursor{
  display:inline-block;
  width:2px;
  background:var(--dark);
  margin-left:3px;
  vertical-align:text-bottom;
  height:0.8em;
  animation:cur-blink 0.75s step-end infinite;
}
@keyframes cur-blink{50%{opacity:0}}

/* SAY HELLO / HOW IT WORKS links */
.action-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Archivo Black',sans-serif;font-size:clamp(18px,1.82vw,26px);
  letter-spacing:0.04em;text-transform:uppercase;
  color:var(--dark);text-decoration:none;cursor:pointer;
  margin-top:10px;
}
.action-link .letters-wrap{display:inline-flex;gap:0}
.action-link .al{
  display:inline-block;
  transition:transform 0.2s ease;
}
.action-link:hover .al{
  animation:wonky 0.5s ease forwards;
  animation-delay:calc(var(--i)*0.03s);
}
@keyframes wonky{
  0%  {transform:translateY(0) rotate(0)}
  30% {transform:translateY(-6px) rotate(calc(var(--r,1)*4deg))}
  55% {transform:translateY(2px) rotate(calc(var(--r,1)*-2deg))}
  75% {transform:translateY(-2px) rotate(calc(var(--r,1)*2deg))}
  100%{transform:translateY(-2px) rotate(calc(var(--r,1)*1.5deg))}
}

/* PROJECTS */
.projects{padding:7.575rem var(--side-pad) 0}
.proj-long{
  margin:0 calc(var(--side-pad) * 0.3) 3.69rem;
  opacity:0;transform:translateY(28px);
  transition:opacity .7s ease,transform .7s ease}
.proj-long.vis{opacity:1;transform:translateY(0)}
.proj-row{display:grid;grid-template-columns:47.25% 47.25%;gap:0;justify-content:space-between;margin:0 calc(var(--side-pad) * 0.3) 0}
@media (max-width:768px){
  .proj-row{grid-template-columns:1fr;gap:40px;justify-content:normal}
  /* Match proj-long bottom gap to the proj-row internal gap so all 3 stacked
     projects sit equidistant. */
  .proj-long{margin-bottom:29px}
  /* When stacking, give the long images a 3:2 ratio so they don't look
     dwarfed next to the near-square row images. Inner <img> stays object-fit: cover
     so it zooms/crops centered, not stretched. Higher specificity to beat the
     later `.proj-long .proj-img { aspect-ratio: 1455/684 }` rule. */
  .projects .proj-long .proj-img{aspect-ratio:3/2}
}
.proj-item{cursor:pointer;display:block;color:inherit;text-decoration:none;
  position:relative;isolation:isolate}
.proj-left{
  opacity:0;transform:translateX(-44px);
  transition:opacity .7s ease,transform .7s ease;
}
.proj-right{
  opacity:0;transform:translateX(44px);
  transition:opacity .7s ease,transform .7s ease;
}
.proj-left.vis,.proj-right.vis{opacity:1;transform:translateX(0)}
.proj-img{
  border-radius:clamp(6px, 0.7vw, 12px);overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1);
  will-change:transform;
}
.proj-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:clamp(6px, 0.7vw, 12px)}
.proj-long .proj-img{aspect-ratio:1455/684}
.proj-row  .proj-img{aspect-ratio:715/667}
/* Shadow on .proj-item::after — outside .proj-img's overflow:hidden.
   Colour always set; only opacity transitions so no paint on hover.
   Scoped to homepage sections only (.projects, .projects--notop). */
.projects .proj-item::after,
.projects--notop .proj-item::after{
  content:'';position:absolute;
  top:10px;left:10px;width:100%;
  border-radius:clamp(6px, 0.7vw, 12px);
  z-index:-1;opacity:0;
  will-change:opacity;
  transition:opacity .35s cubic-bezier(.34,1.4,.64,1);
}
.proj-long .proj-item::after{aspect-ratio:1455/684;background:var(--green)}
.proj-row  .proj-item::after{aspect-ratio:715/667;background:var(--blue)}
/* At mobile the long image switches to 3:2 — shadow must match. */
@media (max-width:768px){
  .proj-long .proj-item::after{aspect-ratio:3/2}
}
.projects .proj-item:hover::after,
.projects--notop .proj-item:hover::after{opacity:1}
.proj-long .proj-item:hover .proj-img,
.proj-row  .proj-item:hover .proj-img{transform:translate(-7px,-7px) rotate(-.3deg)}

/* Disabled / coming-soon projects */
.proj-disabled{pointer-events:none;cursor:default}
.proj-disabled .proj-img{position:relative}
.proj-soon{
  position:absolute;inset:0;z-index:1;
  background:rgba(0,0,0,0.2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(16px,1.3vw,21px);
  letter-spacing:0.1em;text-transform:uppercase;
  color:white;
}
.proj-disabled:hover .proj-img{transform:none!important}
.proj-disabled:hover::after{opacity:0!important}
.proj-disabled:hover .proj-name{color:var(--dark)!important}
.proj-meta{margin-top:14px}
.proj-name{
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(14.4px,1.44vw,21.6px);color:var(--dark);
  display:inline;
  transition:color .25s ease;
}
.proj-item:hover .proj-name{color:var(--blue)}
.proj-client{
  font-family:'Azeret Mono',monospace;font-weight:300;
  font-size:clamp(14.4px,1.44vw,21.6px);color:#999;margin-top:3px
}

/* SECOND STATEMENT */
.statement{
  /* side padding scales so the text column stays ~990px wide on desktop+,
     producing the 3-line wrap (4 with tagline) regardless of viewport */
  padding:7.575rem clamp(var(--side-pad), calc((100vw - 1100px) / 2), 30rem) 0;
  text-align:center
}
.statement p{
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(24.5px,3.75vw,50px);line-height:1.3;color:var(--dark);
  margin-bottom:28px;
}
.u-interactive{text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:0.26em;text-underline-offset:0.1em;text-decoration-skip-ink:none}
.u-green{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:0.26em;text-underline-offset:0.1em;text-decoration-skip-ink:none}
.u-pink-ul{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:0.26em;text-underline-offset:0.1em;text-decoration-skip-ink:none}

/* FIELD NOTES */
/* Block-level parallax wrapper for everything below the jagged edge.
   JS clamps the lift so the wrapper's bottom never rises above the viewport
   bottom — no white gap below the footer, no need for negative margin. */
.post-edge{
  position:relative;z-index:2;will-change:transform;
}
.field-notes{background:var(--blue);padding:3.222rem calc(var(--side-pad) * 1.15) 5.81rem;position:relative;z-index:2}
.services-section{z-index:3}
.testimonials{z-index:4}

.sec-label{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(19.5px,2.1vw,27px);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:2.5625rem;
}
.field-notes .sec-label,
.services-section .sec-label,
.testimonials .sec-label{font-size:clamp(19.5px,2.1vw,27px)}
.field-notes .sec-label{color:white}
.field-link{
  display:block;width:fit-content;
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(19px,3.3vw,50px);
  color:white;text-decoration:none;margin-bottom:40.32px;
  transition:color .35s ease;
}
.field-link:last-of-type{margin-bottom:0}
.field-link-txt{position:relative;display:inline}

.field-link:hover{color:var(--teal)}


.field-link .field-link-txt{
  background-image:linear-gradient(white,white);
  background-size:100% 2px;
  background-repeat:no-repeat;
  background-position:left bottom;
  border-bottom:none;
  transition:background-size .45s cubic-bezier(.76,0,.24,1),color .35s ease;
  padding-bottom:2px;
}
.field-link:hover .field-link-txt{
  background-size:0% 2px;
  background-image:linear-gradient(var(--teal),var(--teal));
}
.field-arrow{
  display:inline-block;margin-left:6px;
  transition:transform .3s ease;
  text-decoration:none!important;
}
.field-link:hover .field-arrow{transform:translateX(6px)}

/* SERVICES */
.services-section{background:var(--pink);padding:5.81rem calc(var(--side-pad) * 1.15) 5.435rem;position:relative}
.services-section .sec-label{color:white;margin-bottom:1.5rem}
.svc-item{border:none;overflow:hidden}
.svc-header{
  display:flex;align-items:center;justify-content:flex-start;
  gap:0.78em;
  cursor:pointer;padding:6px 0;
}
.svc-title{
  font-family:'Azeret Mono',monospace;font-weight:500;
  font-size:clamp(28px,5.8vw,72.45px);color:var(--blue);line-height:1.1;
  transition:color .25s ease;
}
.svc-header:hover .svc-title{color:white}
.svc-header:hover .svc-toggle{color:white}
.svc-toggle{
  order:-1;
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(24px,4vw,54px);color:white;
  min-width:auto;text-align:left;user-select:none;line-height:1;
  transition:color .25s,transform .6s ease;
}
/* Hover: full 360° spin (only when item isn't open — open keeps its 45° pose) */
.svc-header:not(.open):hover .svc-toggle,
.svc-item:not(.open) .svc-header:hover .svc-toggle{transform:rotate(90deg)}
.svc-item.open .svc-toggle{color:var(--blue);transform:rotate(45deg)}
.svc-body{
  max-height:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s ease;
  opacity:0;
  /* Indent so both wiggly and desc start where the title text starts
     (past the "+" toggle). Desc fills to the section's right edge. */
  margin-left:calc(clamp(24px,4vw,54px) * 0.6 + 0.78em);
}
.svc-item.open .svc-body{max-height:1200px;opacity:1}
.svc-wiggly{
  display:block;height:14px;margin:6px 0 14px;
  /* Width set per-item by JS to match each title's rendered length.
     The indent comes from .svc-body's margin-left (parent). */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' preserveAspectRatio='none'><path d='M0,7 Q10,-1 20,7 T40,7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:repeat-x;
  background-size:40px 14px;
  background-position:left center;
}
.jagged-top{
  position:absolute;top:0;left:0;right:0;
  height:50px;
  transform:translateY(-100%);
  pointer-events:none;
  /* Tile of one jagged unit; repeated horizontally at fixed pixel size so
     edges stay the same size and the count drops on narrower viewports. */
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 50' preserveAspectRatio='none'><polygon fill='white' points='0,50 0,0 300,25 300,0 600,25 600,50'/></svg>");
  mask-repeat:repeat-x;
  mask-size:600px 50px;
}
.jagged-top.blue{background-color:var(--blue)}
.jagged-top.white{background-color:var(--cream)}
.svc-desc{
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(15.6px,1.69vw,22.1px);line-height:1.7;
  color:var(--blue);padding-bottom:16px;
}
.svc-desc p + p{margin-top:1em}
.svc-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:0.2em;
  transition:color .25s ease, text-decoration-color .25s ease;
}
.svc-link:hover{
  color:white;
  text-decoration-color:transparent;
}
/* Block-level service link with trailing arrow (same animation as field-notes arrow) */
.svc-link-row{
  display:block;
  width:fit-content;
  margin-top:0.6em;
}
.svc-arrow{
  display:inline-block;
  margin-left:6px;
  transition:transform .3s ease;
  text-decoration:none!important;
}
.svc-link:hover .svc-arrow{transform:translateX(6px)}

/* TESTIMONIALS */
.testimonials{background:var(--cream);padding:5.81rem calc(var(--side-pad) * 1.15) 9.435rem;text-align:center;position:relative}
.testimonials .sec-label{color:var(--blue);text-align:left}
.t-quote{
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(14px,2vw,26.91px);line-height:1.85;color:#333;
  margin:0 0 24px;
  text-align:justify;
}
.t-attr{
  font-family:'Azeret Mono',monospace;font-weight:600;
  font-size:clamp(14px,2vw,26.91px);color:var(--dark);
}
/* Testimonial slider */
.t-slides{overflow:hidden}
.t-track{display:flex;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.t-slide{flex:0 0 100%;min-width:0}

.dots{display:flex;justify-content:center;gap:10px;margin-top:40px}
.dot{
  width:clamp(16px,1.6vw,28px);height:clamp(16px,1.6vw,28px);
  border-radius:50%;background:var(--green);cursor:pointer;
  border:none;padding:0;
  transition:background .3s;
}
.dot.active{background:var(--blue)}

/* FOOTER */
footer{
  background:var(--blue);
  padding:4rem var(--side-pad) 4rem;
  text-align:center;
  position:relative;
  z-index:5
}
.footer-cta{
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(24px,4.4vw,64px);
  line-height:1.1;color:white;margin-bottom:28px;
}
.footer-email{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(12.8px,2.4vw,35.2px);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--pink);text-decoration:none;display:inline-block;
}
.footer-email:hover{color:white}
.footer-bottom{
  margin-top:40px;
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.3);text-transform:uppercase;
  text-align:left;
}

/* space for the wavy line */

/* === UTILITY — extracted from inline styles === */
.nav-logo svg { display: block; width: 100%; height: auto; }
.stmt-tagline { display: block; margin-top: 0.1em; }
.projects--notop { padding-top: 7.575rem; padding-bottom: 9.435rem; }
.section-body { margin-top: 0; }
.testimonials-inner { margin-top: 0; text-align: center; }
.sec-label--left { text-align: left; }
.footer-content { margin-top: 0; }

/* === LOGO EYE GAZE === */
#pupil {
  transition: transform 0.35s ease;
}

/* === BUTTON RESETS (nav-ham, svc-header changed from div) === */
.nav-ham {
  background: none;
  border: none;
  padding: 0;
}
.svc-header {
  background: none;
  border: none;
  padding: 6px 0;
  width: fit-content;
  text-align: left;
  font: inherit;
}

/* === RESPONSIVE: tighten paddings on smaller viewports === */

/* ≤ 1024px (tablet & small laptop):
   drop the section side-padding multipliers (1.3×, 1.989×, etc.), pull long
   project images back to standard side margins, scale vertical paddings ~60%. */
@media (max-width: 1024px) {
  nav { padding: 40px 52px; }
  .nav-logo { width: 42px; }
  .nav-ham { gap: 5px; }
  .nav-ham span { width: 30px; height: 6px; }
  /* X: height(6) + gap(5) = 11px */
  .nav-ham.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .nav-ham.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
  .nav-overlay { clip-path: circle(0% at calc(100% - 67px) 51px); }
  .nav-overlay.open { clip-path: circle(170vmax at calc(100% - 67px) 51px); }
  /* Scrolled: 25% smaller — logo 32px, spans 23×5px, gap 4px, X translateY: 5+4=9px */
  nav.nav--scrolled .nav-logo { width: 32px; }
  nav.nav--scrolled .nav-ham { gap: 4px; }
  nav.nav--scrolled .nav-ham span { width: 23px; height: 5px; }
  nav.nav--scrolled .nav-ham.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  nav.nav--scrolled .nav-ham.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .field-notes,
  .services-section,
  .testimonials {
    padding-left: var(--side-pad);
    padding-right: var(--side-pad);
  }
  .proj-long, .proj-row { margin-left: 0; margin-right: 0; }
  .hl-section,
  .projects,
  .statement,
  .projects--notop { padding-top: 5rem; }
  .projects--notop { padding-bottom: 5rem; }
  .field-notes { padding-top: 1.8rem; padding-bottom: 4rem; }
  .services-section { padding-top: 4rem; padding-bottom: calc(4rem - 6px); }
  .testimonials { padding-top: 4rem; padding-bottom: 7rem; }
  footer { padding-top: 4rem; padding-bottom: 2rem; }
}

/* ≤ 768px (large phone landscape / iPad mini portrait):
   tighten further. Project rows already stack below this size. */
@media (max-width: 768px) {
  nav { padding: 28px 36px; }
  .nav-logo { width: 36px; }
  .nav-ham { gap: 4px; }
  .nav-ham span { width: 24px; height: 5px; }
  /* X: height(5) + gap(4) = 9px */
  .nav-ham.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-ham.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .nav-overlay { clip-path: circle(0% at calc(100% - 48px) 37px); }
  .nav-overlay.open { clip-path: circle(170vmax at calc(100% - 48px) 37px); }
  /* Scrolled: 25% smaller — logo 27px, spans 18×4px, gap 3px, X translateY: 4+3=7px */
  nav.nav--scrolled .nav-logo { width: 27px; }
  nav.nav--scrolled .nav-ham { gap: 3px; }
  nav.nav--scrolled .nav-ham span { width: 18px; height: 4px; }
  nav.nav--scrolled .nav-ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav--scrolled .nav-ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hl-section,
  .projects,
  .statement,
  .projects--notop { padding-top: 3.75rem; }
  .projects--notop { padding-bottom: 4rem; }
  .field-notes { padding-top: 1.5rem; padding-bottom: 3rem; }
  .services-section { padding-top: 3rem; padding-bottom: calc(3rem - 6px); }
  .testimonials { padding-top: 3rem; padding-bottom: 6rem; }
  footer { padding-top: 3rem; padding-bottom: 1.75rem; }
  /* Footer: bigger email + tighter to the CTA */
  .footer-cta { margin-bottom: 12px; }
  .footer-email { font-size: 16.64px; }
}

/* ≤ 768px: shrink section titles + their bottom-margin by 20% */
@media (max-width: 768px) {
  .sec-label,
  .field-notes .sec-label,
  .services-section .sec-label,
  .testimonials .sec-label { font-size: 15.6px; margin-bottom: 1.476rem; }
  .services-section .sec-label { margin-bottom: 1.26rem; }
}

/* ≤ 480px (phone portrait): tightest */
@media (max-width: 480px) {
  nav { padding: 20px 24px; }
  .nav-logo { width: 32px; }
  .nav-ham { gap: 4px; }
  .nav-ham span { width: 20px; height: 4px; }
  /* X: height(4) + gap(4) = 8px */
  .nav-ham.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-ham.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav-overlay { clip-path: circle(0% at calc(100% - 34px) 28px); }
  .nav-overlay.open { clip-path: circle(170vmax at calc(100% - 34px) 28px); }
  /* Scrolled: 25% smaller — logo 24px, spans 15×3px, gap 3px, X translateY: 3+3=6px */
  nav.nav--scrolled .nav-logo { width: 24px; }
  nav.nav--scrolled .nav-ham { gap: 3px; }
  nav.nav--scrolled .nav-ham span { width: 15px; height: 3px; }
  nav.nav--scrolled .nav-ham.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  nav.nav--scrolled .nav-ham.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .hl-section,
  .projects,
  .statement,
  .projects--notop { padding-top: 2.5rem; }
  .projects--notop { padding-bottom: 2.5rem; }
  .field-notes { padding-top: 0.9rem; padding-bottom: 2rem; }
  .services-section { padding-top: 2rem; padding-bottom: calc(2rem - 6px); }
  .testimonials { padding-top: 2rem; padding-bottom: 2.5rem; }
  footer { padding-top: 2rem; padding-bottom: 1.25rem; }
}