/* ============================================================
   Modulr Homes — stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=Figtree:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --green-deep:#1e332a;     /* hero / footer bg */
  --green-deep-2:#16271f;   /* darker for gradient */
  --green-ink:#003230;      /* primary serif text on light */
  --green-ink-2:#003735;
  --teal-accent:#045c59;
  --yellow:#ffd91a;
  --yellow-press:#e9c40c;
  --brown:#4d402e;          /* testimonials bg */
  --amber:#ffd69d;
  --cream:#f7f4ef;
  --cream-border:#e5d7cb;
  --cream-border-2:#d7c5b4;
  --muted-light:#cad4d3;    /* paragraph on dark green */
  --paper:#ffffff;
  --line:#e2e0db;

  --serif:"Playfair Display", ui-serif, Georgia, serif;
  --sans:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw:1280px;
  --pad:clamp(20px, 5vw, 80px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Quote flow reuses the site's real brand green (same one .btn-green
     uses) rather than a one-off color. Previously --quote-green was only
     ever set via an inline <style> block in quote.html; once that block
     was removed the variable had no definition anywhere, so every rule
     referencing var(--quote-green) with no fallback (selected pills, the
     Next button, OTP focus rings, etc.) silently fell back to a
     transparent/invalid value — that's what was making the CTA button
     and selected options disappear. */
  --quote-green:var(--green-ink);
  --quote-green-hover:#024d4a; /* matches .btn-green:hover */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;background:var(--green-deep);}
body{
  margin:0;
  font-family:var(--body);
  color:var(--green-ink);
  background:var(--paper);
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}

.eyebrow{
  font-family:var(--body);
  font-weight:700;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
}
.serif{font-family:var(--serif);font-weight:500;}

/* heading scales */
.h-section{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(34px, 5vw, 60px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:14px;
  border-radius:8px;padding:15px 24px;
  transition:transform .18s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease);}
.btn-yellow{background:var(--yellow);color:#1a120b;}
.btn-yellow:hover{background:#ffe04d;transform:translateY(-2px);}
.btn-yellow:active{background:var(--yellow-press);transform:translateY(0);}
.btn-green{background:var(--green-ink);color:#fff;}
.btn-green:hover{background:#024d4a;transform:translateY(-2px);}
.hero-right .btn:hover{box-shadow:none;}
#about .btn:hover{box-shadow:none;}
.btn-green:active{transform:translateY(0);}
.btn:hover svg{transform:translateX(4px);}

/* ============================================================
   Announcement + Nav
   ============================================================ */
.announce{
  background:var(--green-deep-2);
  color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:8px 52px;font-size:13.5px;
  position:relative;z-index:60;flex-wrap:wrap;text-align:center;
}
.announce.dismissed,
body.menu-open .announce{display:none;}
.announce span{color:#cfe0d6;}
.announce button{
  background:var(--green-ink);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;
  padding:7px 14px;border-radius:6px;transition:background .2s,transform .2s;
}
.announce button:hover{background:#024d4a;transform:translateY(-1px);}
.announce .ann-close{
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  width:30px;height:30px;padding:0;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:#9db5a8;border-radius:6px;
  transition:background .2s,color .2s;
}
.announce .ann-close svg{width:16px;height:16px;}
.announce .ann-close:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-50%);}

.nav-wrap{
  position:relative;z-index:3;
  display:flex;justify-content:center;padding-inline:16px;
  margin-bottom:clamp(48px,8vw,92px);
}
.nav{
  width:min(496px, 100%);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:12px;
  box-shadow:0 8px 30px -10px rgba(0,0,0,.28);
  padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  transition:width .35s var(--ease), background .3s, box-shadow .3s;
}
.nav.shrunk{width:min(430px,100%);box-shadow:0 10px 34px -10px rgba(0,0,0,.34);}
.nav-logo{font-family:var(--serif);font-weight:700;font-size:21px;color:#1a120b;letter-spacing:-.01em;}
.nav-links{display:flex;align-items:center;gap:18px;font-family:var(--sans);font-size:14px;font-weight:500;color:#1f1f1f;}
.nav-links a{position:relative;padding:2px 0;transition:color .2s;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--green-ink);transition:right .25s var(--ease);}
.nav-links a:hover{color:var(--green-ink);}
.nav-links a:hover::after{right:0;}
/* "More" dropdown in the nav */
.nav-dd{position:relative;display:flex;}
.nav-dd-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--sans);font-size:14px;font-weight:500;color:#1f1f1f;
  padding:2px 0;transition:color .2s;
}
.nav-dd-btn svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform .25s var(--ease);}
.nav-dd-btn:hover{color:var(--green-ink);}
.nav-dd.open .nav-dd-btn{color:var(--green-ink);}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg);}
.nav-dd-menu{
  position:absolute;top:calc(100% + 16px);right:0;
  min-width:212px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:12px;
  box-shadow:0 16px 44px -16px rgba(0,0,0,.34);
  padding:7px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  z-index:20;
}
.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.nav-dd-menu a{
  padding:11px 13px;border-radius:8px;
  font-family:var(--sans);font-size:14px;font-weight:500;color:#1f1f1f;white-space:nowrap;
  transition:background .18s, color .18s;
}
.nav-dd-menu a::after{display:none;}
.nav-dd-menu a:hover{background:rgba(0,50,48,.07);color:var(--green-ink);}

.nav-burger{display:none;flex-direction:column;gap:4px;padding:6px;}
.nav-burger span{width:19px;height:2px;background:#1a120b;border-radius:2px;transition:transform .3s,opacity .3s;}

/* mobile menu drawer */
.mobile-menu{
  position:fixed;inset:0;z-index:54;background:var(--green-deep);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--pad);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.mobile-menu a{font-family:var(--serif);font-size:clamp(34px,9vw,56px);color:#fff;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);transition:color .2s,padding-left .25s;}
.mobile-menu a:hover{color:var(--yellow);padding-left:10px;}
.mm-close{position:absolute;top:clamp(16px,4vw,26px);right:var(--pad);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,transform .2s;}
.mm-close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg);}
.mm-close svg{width:24px;height:24px;}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  background:var(--green-deep);
  color:#fff;position:relative;
  padding-top:clamp(24px,4vw,44px);
  overflow:hidden;
}
.hero::after{ /* subtle vignette */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,.05), transparent 60%);
}
.hero-top{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:end;position:relative;z-index:2;}
.hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(44px, 6.6vw, 80px);line-height:1.02;margin:18px 0 0;
  letter-spacing:-.01em;text-wrap:balance;
}
.hero-eyebrow{color:#fff;opacity:.92;}
.hero-right{padding-bottom:8px;}
.hero-right p{font-size:16px;line-height:1.65;color:var(--muted-light);margin:0 0 30px;max-width:460px;}
.hero-figure{
  position:relative;z-index:2;margin-top:clamp(40px,6vw,70px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);
}
.hero-figure .frame{
  width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
}
.hero-figure img{width:100%;height:100%;object-fit:cover;}
/* the white "stage" the image sits on, bleeding into next section.
   kept short so the green hero extends down over the upper part of the photos */
.hero-stage{position:absolute;left:0;right:0;bottom:0;height:16%;background:var(--paper);z-index:1;}

/* shared-element flyer — fixed clone of the hero photo that shrinks into the About arc */
.hero-flyer{
  position:fixed;z-index:40;overflow:hidden;
  border-radius:14px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  pointer-events:none;
  display:none;
  will-change:top,left,width,height;
}
.hero-flyer img{width:100%;height:100%;object-fit:cover;display:block;}

/* ============================================================
   About — rotating image wheel (blends into white)
   ============================================================ */
.gather{
  position:relative;
  background:var(--paper);
  /* size the dome so its top card lands ~80px below the hero photo */
  min-height:calc((80px + var(--R) + var(--card) / 2) / 0.9);
  padding:clamp(72px,9vw,104px) 0 clamp(28px,4vw,48px);
  overflow:hidden;
  --R:clamp(330px, 37vw, 478px);   /* arc radius */
  --card:clamp(82px, 9.2vw, 122px); /* card size */
}

/* zero-size box; its origin is the wheel centre */
.gather-wheel{
  position:absolute;left:50%;top:90%;width:0;height:0;
  transform:rotate(var(--spin,0deg));
  transition:transform .55s var(--ease);
}
.g-card{
  position:absolute;left:0;top:0;padding:0;background:none;border:none;
  width:var(--card);height:var(--card);
  margin-left:calc(var(--card) / -2);
  margin-top:calc(var(--card) / -2);
  transform:rotate(var(--a)) translateY(calc(-1 * var(--R)));
}
.g-thumb{
  display:block;width:100%;height:100%;
  border-radius:10px;overflow:hidden;
  background:#e9e6e0;
  box-shadow:0 14px 30px -16px rgba(0,40,38,.38);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-radius .45s var(--ease);
  transform-origin:center;
}
.g-thumb img{width:100%;height:100%;object-fit:cover;}
/* hover: gentle emboss (lift + stronger shadow) */
.g-card:hover{z-index:5;}
.g-card:hover .g-thumb{
  transform:scale(1.08);
  box-shadow:0 24px 44px -16px rgba(0,40,38,.46), 0 4px 14px -6px rgba(0,40,38,.3);
}
/* click: card straightens upright and pops forward */
.g-card.popped{z-index:9;}
.g-card.popped .g-thumb{
  transform:rotate(calc(-1 * var(--a))) scale(1.55);
  border-radius:14px;
  box-shadow:0 34px 60px -18px rgba(0,40,38,.55), 0 8px 20px -8px rgba(0,40,38,.35);
}

/* white blend at the lower edges so the bottom cards melt into the page */
.gather-fade{
  position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(to top, var(--paper) 24%, rgba(255,255,255,.85) 54%, transparent 100%);
  pointer-events:none;z-index:3;
}

/* copy sits low in the dome, cradled by the arc */
.gather-center{
  position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);
  z-index:4;text-align:center;width:min(470px, 70%);
  display:flex;flex-direction:column;align-items:center;
}
.gather-center .eyebrow{color:var(--green-ink);}
.gather-center h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.2vw,48px);line-height:1.08;letter-spacing:-.02em;margin:20px 0 22px;color:var(--green-ink);}
.gather-center p{font-size:17px;line-height:1.7;color:var(--green-ink-2);margin:0 auto;max-width:380px;}
.gather-center .btn{margin-top:40px;}

/* ============================================================
   Services
   ============================================================ */
.services{padding:clamp(40px,6vw,70px) 0 clamp(70px,10vw,120px);}
.services-head{max-width:820px;margin-bottom:48px;}
.services-head .eyebrow{color:var(--green-ink-2);}
.services-head h2{margin-top:18px;color:var(--green-ink-2);}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 22px;}
.svc-card{display:flex;flex-direction:column;}
.svc-media{border-radius:12px;overflow:hidden;aspect-ratio:407/500;}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.svc-card:hover .svc-media img{transform:scale(1.06);}
.svc-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,36px);color:var(--green-ink-2);margin:22px 0 6px;transition:color .2s;}
.svc-card:hover h3{color:var(--teal-accent);}
.svc-card p{font-size:17px;line-height:1.55;color:var(--green-ink-2);margin:0;max-width:340px;}

/* ============================================================
   Testimonials
   ============================================================ */
.testi{background:var(--brown);color:#fff;padding:clamp(70px,9vw,90px) 0;overflow:hidden;}
.testi-inner{max-width:1120px;margin:0 auto;text-align:center;}
.testi-eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--amber);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:14px;}
.testi-eyebrow .quote{font-family:var(--serif);font-size:34px;line-height:1;color:var(--amber);transform:translateY(0.12em);}
/* all slides share one grid cell, so the track height is fixed to the
   tallest quote and the brown band never resizes as slides rotate */
.testi-track{display:grid;align-items:start;justify-items:center;min-height:240px;}
.testi-slide{
  grid-column:1;grid-row:1;width:100%;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;display:flex;flex-direction:column;align-items:center;
}
.testi-slide.active{opacity:1;transform:translateY(0);pointer-events:auto;}
.testi-quote{
  font-family:var(--body);font-weight:300;
  font-size:clamp(20px,2.5vw,32px);line-height:1.6;margin:26px 0 34px;
  max-width:1000px;text-wrap:balance;
}
.testi-author{display:flex;align-items:center;gap:18px;}
.testi-author .ava{width:74px;height:74px;border-radius:50%;overflow:hidden;background:#cfcfcf;}
.testi-author .ava img{width:100%;height:100%;object-fit:cover;}
.testi-author .who{text-align:left;display:flex;flex-direction:column;gap:6px;}
.testi-author .name{font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.1;white-space:nowrap;}
.testi-author .city{font-family:var(--sans);font-size:18px;line-height:1.1;color:rgba(255,255,255,.8);}
.testi-dots{display:flex;gap:8px;justify-content:center;margin-top:34px;}
.testi-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);transition:width .3s var(--ease),background .3s;}
.testi-dots button.active{width:18px;border-radius:4px;background:#fff;}

/* ============================================================
   How we work
   ============================================================ */
.process{padding:clamp(70px,10vw,120px) 0;}
.process-head{max-width:840px;}
.process-head .eyebrow{color:var(--green-ink);}
.process-head h2{margin-top:14px;color:var(--green-ink);}
.process-sub{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--green-ink);margin:18px 0 0;max-width:640px;}
.process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:46px;
}
.proc-card{
  border:1px solid var(--line);border-radius:12px;
  padding:34px 28px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .25s, box-shadow .25s, transform .25s;background:#fff;
}
.proc-card:hover{border-color:var(--cream-border-2);box-shadow:0 18px 40px -26px rgba(0,50,48,.35);transform:translateY(-4px);}
.proc-num{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--teal-accent);letter-spacing:.04em;margin-bottom:8px;}
.proc-card h3{font-family:var(--serif);font-weight:500;font-size:27px;color:var(--green-ink);margin:0 0 4px;}
.proc-card p{font-size:16px;line-height:1.6;color:var(--green-ink);margin:0;}

/* ============================================================
   Recent works
   ============================================================ */
.works{padding:clamp(40px,6vw,60px) 0 clamp(80px,11vw,130px);}
.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
.works-head{margin-bottom:8px;}
.works-head .eyebrow{color:var(--green-ink);}
.works-head h2{margin:12px 0 28px;color:var(--green-ink);max-width:560px;}
.work-card{display:flex;flex-direction:column;}
.work-media{border-radius:12px;overflow:hidden;margin-bottom:18px;}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.work-card:hover .work-media img{transform:scale(1.05);}
.work-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,36px);color:var(--green-ink);margin:0 0 8px;}
.work-card p{font-size:18px;line-height:1.55;color:var(--green-ink);margin:0;}
.col-left{display:flex;flex-direction:column;gap:50px;}
.col-right{display:flex;flex-direction:column;gap:36px;}
.work-media.tall{aspect-ratio:618/462;}

/* ============================================================
   CTA Footer
   ============================================================ */
.footer{background:var(--green-deep);color:#fff;padding:clamp(60px,8vw,80px) 0 36px;overflow:hidden;}
.footer-top{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
.footer-kick{font-family:var(--sans);font-weight:300;font-size:clamp(30px,4vw,48px);line-height:1.16;max-width:600px;margin:0;}
.footer-contact{display:flex;flex-direction:column;gap:22px;min-width:280px;}
.fc-item .lbl{font-size:14px;color:rgba(255,255,255,.55);margin:0 0 4px;}
.fc-item .val{font-size:18px;color:#fff;margin:0;}
.fc-item a.val:hover{color:var(--yellow);}
.footer-divider{height:1px;background:rgba(255,255,255,.18);margin:40px 0 24px;}
.footer-wordmark{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(56px,16vw,170px);line-height:.9;letter-spacing:-.01em;
  color:#fff;text-align:center;margin:10px 0 30px;white-space:nowrap;
}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.footer-bottom .copy{font-family:var(--sans);font-size:16px;color:rgba(255,255,255,.85);}
.footer-social{display:flex;align-items:center;gap:18px;}
.footer-social .lbl{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;}
.footer-social .icons{display:flex;gap:18px;}
.footer-social a{width:24px;height:24px;color:rgba(255,255,255,.85);transition:color .2s,transform .2s;}
.footer-social a:hover{color:var(--yellow);transform:translateY(-2px);}
.footer-social svg{width:22px;height:22px;}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}
[data-stagger]>*{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
[data-stagger].in>*{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .reveal,[data-stagger]>*{opacity:1 !important;transform:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .hero-top{grid-template-columns:1fr;gap:24px;align-items:start;}
  .hero-right{padding-bottom:0;}
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:30px 20px;}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .gather{min-height:calc((80px + var(--R) + var(--card) / 2) / 0.9);--R:clamp(330px, 46vw, 460px);--card:clamp(64px, 12vw, 96px);}
}
@media (max-width:760px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav{width:100%;}
  .works-grid{grid-template-columns:1fr;gap:46px;}
  .footer-top{grid-template-columns:1fr;gap:30px;}
  .footer-wordmark{font-size:40px;text-align:left;white-space:normal;margin:8px 0 26px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:18px;}
  .process-grid{grid-template-columns:1fr;gap:16px;}
  .proc-card{padding:28px 22px;}

  /* About: drop the rotating image wheel on mobile (it loaded jerkily and
     pushed the copy far below the hero). Show the About copy in normal flow,
     snug under the hero section. */
  .gather{min-height:0;padding:clamp(36px,9vw,60px) 0 clamp(28px,6vw,44px);overflow:visible;}
  .gather-wheel,.gather-fade{display:none;}
  .gather-center{
    position:static;transform:none;left:auto;top:auto;
    width:auto;max-width:520px;margin:0 auto;padding:0 var(--pad);
    background:none;
  }
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr;}
  .svc-media{aspect-ratio:4/3;}
  .hero-figure{grid-template-columns:1fr;gap:16px;}
  .hero-figure .frame{aspect-ratio:4/3;}
  .testi-author{flex-direction:column;gap:12px;text-align:center;}
  .testi-author .who{text-align:center;}
  .announce{font-size:12.5px;}
}

/* ============================================================
   Sub-page hero (About / Contact share the green band)
   ============================================================ */
.subhero{background:var(--green-deep);color:#fff;position:relative;overflow:hidden;padding-top:clamp(24px,4vw,44px);}
.subhero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,.05), transparent 60%);}
/* Breadcrumb — one shared style across every page; colour adapts to the hero */
.crumb{display:flex;justify-content:center;gap:8px;font-family:var(--sans);font-size:15px;margin:0 0 18px;}
.crumb a{transition:opacity .2s;}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px;}
.crumb span{opacity:.55;}
.subhero .crumb{color:rgba(255,255,255,.62);}
.subhero .crumb a{color:rgba(255,255,255,.92);}
.mfg-hero .crumb{color:var(--green-deep);}
.mfg-hero .crumb a{color:var(--green-deep);}

/* ---------- About ---------- */
.about-hero{text-align:center;position:relative;z-index:2;padding-bottom:clamp(14px,2vw,26px);}
.about-hero .eyebrow{color:#fff;opacity:.92;}
.about-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,72px);line-height:1.03;letter-spacing:-.01em;margin:22px 0 26px;text-wrap:balance;}
.about-hero .lead{font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.5vw,19px);color:var(--muted-light);margin:0 auto;max-width:560px;}
.about-figure{position:relative;z-index:2;margin-top:clamp(14px,2vw,24px);}
/* This frame used to hold a static photo cropped to an ultra-wide banner
   ratio (1252:556). A video won't be shot to that shape — most footage is
   16:9 — so forcing it into the old ratio meant object-fit:cover had to
   zoom in hard just to fill the box, cropping the sides and pulling any
   letterboxing in the source file into frame. 16:9 is the closest
   standard shape to how the video was actually filmed, so cover now
   crops much less aggressively. */
.about-figure .frame{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 50px 90px -36px rgba(0,0,0,.6);}
.about-figure .frame iframe,.about-figure .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block;}
.about-figure img{width:100%;height:100%;object-fit:cover;}
/* the green band ends partway down the photo, like the home hero */
.subhero .hero-stage{position:absolute;left:0;right:0;bottom:0;height:22%;background:var(--paper);z-index:1;}

/* scroll-reveal manifesto */
.manifesto{padding:clamp(80px,11vw,150px) 0;background:var(--paper);}
.manifesto-text{
  max-width:1100px;margin:0 auto;
  font-family:var(--body);font-weight:400;
  font-size:clamp(18px,2.9vw,36px);line-height:1.55;
  color:var(--green-ink-2);text-wrap:pretty;
}
.manifesto-text .w{display:inline-block;white-space:pre;opacity:.16;transition:opacity .15s linear;}

/* mission band */
.mission{background:var(--brown);color:#fff;padding:clamp(70px,9vw,104px) 0;text-align:center;}
.mission-inner{max-width:880px;margin:0 auto;}
.mission h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4vw,48px);color:var(--amber);margin:0 0 22px;}
.mission p{font-family:var(--sans);font-weight:300;font-size:clamp(20px,2.2vw,28px);line-height:1.66;margin:0;color:rgba(255,255,255,.94);text-wrap:pretty;}

/* core values */
.values{padding:clamp(70px,10vw,120px) 0;}
.values-head{max-width:840px;margin-bottom:clamp(40px,5vw,60px);}
.values-head .eyebrow{color:var(--green-ink-2);}
.values-head h2{margin-top:16px;color:var(--green-ink-2);}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 20px;}
.value-card{display:flex;flex-direction:column;}
.value-media{border-radius:10px;overflow:hidden;aspect-ratio:404/555;background:#e9e6e0;}
.value-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.value-card:hover .value-media img{transform:scale(1.05);}
.value-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,36px);line-height:1.15;color:var(--green-ink-2);margin:18px 0 -18px;min-height:3.45em;}
.value-card p{font-size:17px;line-height:1.6;color:var(--green-ink-2);margin:0;max-width:320px;}

/* ============================================================
   Contact page
   ============================================================ */
.contact-hero{position:relative;color:#fff;min-height:clamp(620px,72vh,760px);display:flex;align-items:center;overflow:hidden;}
.contact-hero .nav-wrap{position:absolute;top:clamp(20px,3vw,36px);left:0;right:0;z-index:6;margin-bottom:0;}
.contact-hero .bg{position:absolute;inset:0;z-index:0;}
.contact-hero .bg img{width:100%;height:100%;object-fit:cover;}
.contact-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(183deg, rgba(20,16,10,.42) 0%, rgba(30,21,11,.6) 40%, rgba(20,14,7,.92) 86%);}
.contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;width:100%;padding-block:clamp(120px,14vw,150px) clamp(60px,7vw,80px);}
.contact-copy h1{font-family:var(--serif);font-weight:500;font-size:clamp(48px,6.6vw,84px);line-height:1.0;margin:0 0 26px;text-wrap:balance;}
.contact-copy p{font-family:var(--body);font-size:17px;line-height:1.7;color:var(--muted-light);margin:0;max-width:440px;}

.contact-card{background:#fff;color:var(--green-ink-2);border-radius:20px;padding:clamp(34px,4vw,50px);box-shadow:0 40px 90px -40px rgba(0,0,0,.6);justify-self:end;width:100%;max-width:490px;}
.contact-card .cc-head{text-align:center;margin-bottom:30px;}
.contact-card h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.4vw,40px);color:#0c1410;margin:0 0 10px;}
.contact-card .cc-head p{font-family:var(--body);font-size:14px;line-height:1.6;color:var(--green-ink-2);margin:0 auto;max-width:270px;}
.field{display:flex;flex-direction:column;gap:12px;margin-bottom:26px;}
.field label{font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink-2);}
.field input,.field textarea{
  font-family:var(--body);font-size:16px;color:#0c1410;
  border:none;border-bottom:1px solid rgba(0,0,0,.28);background:transparent;
  padding:6px 2px;width:100%;resize:none;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--green-ink);box-shadow:0 1px 0 0 var(--green-ink);}
.field input::placeholder,.field textarea::placeholder{color:rgba(0,20,32,.32);}
.field.bad input,.field.bad textarea{border-bottom-color:#c0392b;box-shadow:0 1px 0 0 #c0392b;}
.field .err{font-family:var(--body);font-size:12px;color:#c0392b;letter-spacing:.02em;text-transform:none;display:none;}
.field.bad .err{display:block;}
.contact-card .btn-yellow{width:100%;margin-top:6px;border-radius:6px;}
.contact-sent{display:none;text-align:center;padding:14px 0;}
.contact-sent.show{display:block;}
.contact-sent .tick{width:58px;height:58px;border-radius:50%;background:rgba(0,50,48,.12);color:var(--green-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.contact-sent .tick svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.4;fill:none;}
.contact-sent h3{font-family:var(--serif);font-weight:500;font-size:30px;color:#0c1410;margin:0 0 8px;}
.contact-sent p{font-family:var(--body);font-size:15px;color:var(--green-ink-2);margin:0;}

.address{padding:clamp(70px,9vw,110px) 0;text-align:center;}
.address h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4vw,46px);color:var(--green-ink-2);margin:0 0 clamp(40px,5vw,56px);}
.address-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1040px;margin:0 auto;text-align:left;}
.addr-item h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.4vw,32px);color:#0c1410;margin:0 0 16px;}
.addr-item p{font-family:var(--body);font-size:17px;line-height:1.7;color:var(--green-ink-2);margin:0;}
.addr-item a{color:var(--teal-accent);}
.addr-item a:hover{text-decoration:underline;}

/* ============================================================
   Quote flow
   ============================================================ */
.quote-shell{min-height:100vh;background:#fff;display:flex;flex-direction:column;color:var(--green-ink-2);}
.quote-bar{display:flex;align-items:center;justify-content:space-between;padding:clamp(22px,3vw,40px) clamp(22px,5vw,80px) 0;}
.quote-logo{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.01em;color:#1a120b;white-space:nowrap;transition:opacity .2s;}
.quote-logo:hover{opacity:.75;}
.quote-close{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;transition:background .2s,transform .2s;}
.quote-close:hover{background:#f1f1f1;transform:rotate(90deg);}
.quote-close svg{width:20px;height:20px;}
.quote-progress{height:3px;background:#eee;margin:clamp(18px,2.4vw,28px) clamp(22px,5vw,80px) 0;border-radius:3px;overflow:hidden;}
.quote-progress i{display:block;height:100%;width:16.66%;background:var(--quote-green);border-radius:3px;transition:width .5s var(--ease);}

.quote-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(34px,5vw,60px) clamp(22px,5vw,80px);}
.qstep{display:none;width:100%;max-width:560px;animation:qfade .5s var(--ease);}
.qstep.active{display:block;}
@keyframes qfade{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.q-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--green-ink);margin:0 0 18px;}
.q-eyebrow .chip{display:inline-flex;align-items:center;gap:8px;background:#eef5ef;border-radius:30px;padding:6px 14px 6px 7px;}
.q-eyebrow .chip img{width:26px;height:26px;object-fit:contain;}
.qstep h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.4vw,47px);line-height:1.1;letter-spacing:-.02em;color:var(--green-ink-2);margin:0 0 14px;}
.qstep .q-sub{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--green-ink-2);margin:0 0 24px;max-width:430px;}

/* property type cards */
.q-types{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:44px;}
.q-type{display:flex;flex-direction:column;align-items:center;gap:14px;background:none;padding:0;}
.q-type .tile{width:100%;aspect-ratio:171/179;border-radius:10px;background:#f3f4f2;border:2px solid #f3f4f2;display:flex;align-items:center;justify-content:center;padding:14px;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;}
.q-type img{width:100%;height:100%;object-fit:contain;}
.q-type span{font-family:var(--sans);font-size:15px;color:var(--green-ink-2);transition:color .2s,font-weight .2s;}
.q-type:hover .tile{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(0,40,38,.4);}
.q-type[aria-pressed="true"] .tile{background:#eaf4eb;border-color:var(--quote-green);}
.q-type[aria-pressed="true"] span{color:var(--quote-green);font-weight:700;}

/* selected-type header on later steps */
.q-selected{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px;}
.q-selected .q-ico{width:96px;height:74px;}
.q-selected .q-ico img{width:100%;height:100%;object-fit:contain;}
.q-selected h2{margin:0;}

/* pill option rows */
.q-row{margin-bottom:26px;}
.q-row.split{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.q-row .q-label{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--green-ink-2);margin:0 0 16px;}
.q-row.split .q-label{margin:0;}
.q-pills{display:flex;flex-wrap:wrap;gap:12px;}
.q-pill{font-family:var(--sans);font-size:14px;color:var(--green-ink-2);background:#f2f2f2;border-radius:30px;padding:10px 20px;transition:background .2s,color .2s;}
.q-pill:hover{background:#e7e7e7;}
.q-pill[aria-pressed="true"]{background:var(--quote-green);color:#fff;}
.q-divider{height:1px;background:rgba(0,0,0,.1);margin:26px 0;}

/* stepper */
.q-stepper{display:flex;align-items:center;gap:14px;}
.q-stepper button{width:36px;height:36px;border-radius:8px;border:1px solid #d9d9d9;display:flex;align-items:center;justify-content:center;color:#000;transition:border-color .2s,background .2s;}
.q-stepper button:hover{border-color:var(--quote-green);background:#f3faf4;}
.q-stepper button svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;}
.q-stepper .q-count{min-width:54px;height:43px;border-radius:30px;background:#f2f2f2;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:16px;color:var(--green-ink-2);padding:0 18px;}

/* requirement (multi-select image cards) */
.q-reqs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:40px;}
.q-req{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;padding:0;}
.q-req .tile{width:100%;aspect-ratio:1/1;border-radius:9px;background:#eaf4eb;border:2px solid #eaf4eb;display:flex;align-items:center;justify-content:center;padding:18px;transition:border-color .2s,transform .2s;}
.q-req .tile img{width:100%;height:100%;object-fit:contain;}
.q-req span{font-family:var(--sans);font-size:15px;color:var(--green-ink-2);}
.q-req:hover .tile{transform:translateY(-3px);}
.q-req[aria-pressed="true"] .tile{border-color:var(--quote-green);background:#dcecdd;}
.q-req[aria-pressed="true"] span{color:var(--quote-green);font-weight:700;}

/* phone */
.q-phone{display:flex;gap:11px;margin-bottom:14px;}
.q-phone .cc{flex:0 0 auto;display:flex;align-items:center;background:#f2f2f2;border:1px solid #f2f2f2;border-radius:10px;padding:0 20px;font-family:var(--sans);font-size:18px;color:var(--green-ink-2);}
.q-phone input{flex:1;font-family:var(--body);font-size:18px;color:#000;background:#f2f2f2;border:1px solid #f2f2f2;border-radius:10px;padding:16px 20px;transition:border-color .2s,box-shadow .2s;letter-spacing:.04em;}
.q-phone input:focus{outline:none;border-color:var(--quote-green);box-shadow:0 0 0 3px rgba(0,50,48,.16);}
.q-phone.bad input{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.14);}
.q-hint{font-family:var(--body);font-size:13px;color:var(--green-ink-2);opacity:.6;margin:0 0 32px;min-height:16px;}
.q-hint.bad{color:#c0392b;opacity:1;}

/* OTP */
.q-otp{display:flex;gap:10px;margin-bottom:18px;flex-wrap:nowrap;justify-content:flex-start;}
.q-otp .grp{display:flex;gap:10px;}
.q-otp .grp + .grp{margin-left:18px;}
.q-otp input{flex:1 1 0;min-width:0;max-width:60px;height:58px;text-align:center;font-family:var(--body);font-size:22px;color:#000;background:#f2f2f2;border:1px solid #f2f2f2;border-radius:10px;transition:border-color .2s,box-shadow .2s;}
.q-otp input:focus{outline:none;border-color:var(--quote-green);box-shadow:0 0 0 3px rgba(0,50,48,.16);}
.q-otp.bad input{border-color:#c0392b;}
.q-demo-otp{font-family:var(--body);font-size:12.5px;color:var(--teal-accent);background:#eef5ef;border:1px dashed var(--quote-green);border-radius:8px;display:inline-block;padding:6px 12px;margin:0 0 14px;letter-spacing:.03em;}
.q-resend{font-family:var(--body);font-size:14px;color:var(--green-ink-2);margin:0 0 30px;}
.q-resend button{color:var(--quote-green);font-weight:700;text-decoration:underline;}

/* OTP failure / lockout states */
.q-otp-error{font-family:var(--body);font-size:13px;color:#c0392b;margin:-8px 0 18px;min-height:16px;}
.q-otp.shake{animation:qshake .42s ease;}
@keyframes qshake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
.q-otp.locked input{opacity:.5;pointer-events:none;}
#qResend:disabled{color:rgba(0,50,48,.4);text-decoration:none;cursor:not-allowed;}
.q-demo-hint{font-family:var(--body);font-size:12px;color:rgba(0,20,32,.42);margin:0 0 30px;}
.q-demo-hint b{color:rgba(0,20,32,.68);letter-spacing:.08em;font-weight:700;}

/* Honeypot field — kept in the DOM but off-screen and out of tab order,
   so real visitors never notice or interact with it. */
.q-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* Interior Estimate step */
.q-estimate{margin-bottom:34px;}
.q-est-head{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--green-ink-2);margin:0 0 14px;}
.q-est-rows{border-top:1px solid rgba(0,0,0,.14);}
.q-est-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px dashed rgba(0,0,0,.18);font-family:var(--body);font-size:16px;color:var(--green-ink-2);}
.q-est-total{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 4px;font-family:var(--sans);font-weight:700;font-size:19px;color:#0c1410;}
.q-est-note{margin-bottom:32px;}
.q-est-note p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--green-ink-2);margin:0 0 12px;}
.q-est-note ul{margin:0 0 20px;padding-left:18px;display:flex;flex-direction:column;gap:8px;}
.q-est-note li{font-family:var(--body);font-size:15px;line-height:1.55;color:var(--green-ink-2);}
.q-est-valid-label{font-weight:700;color:#0c1410;margin-bottom:4px !important;}
.q-est-valid{opacity:.82;}

/* Estimate step reads like a received quote/email rather than a wizard
   page — cream backdrop, a shadowed white card, and a pill CTA that's
   intentionally distinct from the flow's other "Next Step" buttons. */
.quote-shell.cream-bg{background:#f5f4f0;}
.q-est-step{max-width:640px;}
.q-est-card{
  background:#fff;border-radius:20px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.1);
  padding:clamp(30px,4vw,48px);
}
.q-est-card .q-estimate,.q-est-card .q-est-note{margin-left:0;margin-right:0;}
.q-est-cta{border-radius:96px;text-transform:uppercase;letter-spacing:.08em;font-size:13px;margin-top:8px;}
.q-est-cta:hover{transform:translateY(-2px);}
.q-est-footnote{text-align:center;font-family:var(--body);font-size:14px;color:rgba(0,20,32,.5);margin:26px 0 0;}

.q-next{width:100%;background:var(--quote-green);color:#fff;border-radius:8px;padding:15px 22px;font-family:var(--sans);font-weight:700;font-size:14px;transition:background-color .2s var(--ease),transform .18s var(--ease);}
.q-next:hover{background:var(--quote-green-hover);transform:translateY(-2px);}
.q-next:active{transform:translateY(0);}
.q-next.disabled{background:#cdd6cf;color:#fff;cursor:not-allowed;transform:none;}

/* success step */
.qstep.done-step{text-align:center;}
.qstep.done-step .tick{width:74px;height:74px;border-radius:50%;background:rgba(0,50,48,.12);color:var(--quote-green);display:flex;align-items:center;justify-content:center;margin:0 auto 26px;}
.qstep.done-step .tick svg{width:38px;height:38px;stroke:currentColor;stroke-width:2.2;fill:none;}
.qstep.done-step h2{font-family:var(--serif);}
.qstep.done-step .q-sub{margin-left:auto;margin-right:auto;}
.qstep.done-step .q-next{max-width:300px;}

@media (max-width:680px){
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .contact-card{justify-self:stretch;max-width:none;}
  /* stronger overlay so the white hero copy stays readable when stacked */
  .contact-hero .bg::after{background:linear-gradient(183deg, rgba(18,14,9,.6) 0%, rgba(22,16,9,.72) 46%, rgba(16,11,6,.94) 88%);}
  .address-grid{grid-template-columns:1fr;gap:28px;}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .q-reqs{grid-template-columns:repeat(2,1fr);}
  /* OTP: flatten the two groups into one even row so all 6 boxes fit the width */
  .q-otp{gap:9px;}
  .q-otp .grp{display:contents;}
  .q-otp .grp + .grp{margin-left:0;}
  .q-otp input{max-width:none;height:auto;aspect-ratio:1/1;}
}
@media (max-width:460px){
  .q-types{gap:10px;}
  .q-type .tile{padding:9px;border-radius:8px;}
  .q-type span{font-size:12.5px;}
  .values-grid{grid-template-columns:1fr;}
  .q-otp{gap:7px;}
  .q-otp input{font-size:19px;}
}

/* ============================================================
   Manufacturing page
   ============================================================ */
.mfg-hero{background:var(--paper);padding-top:clamp(20px,3vw,36px);}
.mfg-hero .nav-wrap{margin-bottom:clamp(40px,6vw,72px);}
.mfg-head{text-align:center;max-width:880px;margin:0 auto clamp(44px,5vw,64px);}
.mfg-head h1{font-family:var(--mfg-serif,var(--serif));font-weight:500;font-size:clamp(46px,7vw,80px);line-height:1.05;color:var(--green-deep);margin:0 0 20px;text-wrap:balance;}
.mfg-head .lead{font-family:var(--body);font-size:clamp(18px,2vw,24px);line-height:1.4;color:var(--green-deep);margin:0;text-wrap:pretty;}
.mfg-feature{display:grid;grid-template-columns:1.46fr 1fr;gap:13px;align-items:stretch;}
.mfg-photo{border-radius:var(--mfg-radius,10px);overflow:hidden;min-height:360px;min-width:0;}
.mfg-photo img{width:100%;height:100%;object-fit:cover;}
.mfg-quote{background:var(--mfg-quote-bg,var(--brown));color:#fff;border-radius:var(--mfg-radius,10px);min-width:0;padding:clamp(40px,4vw,64px) clamp(32px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:40px;}
.mfg-quote .q-eyebrow2{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin:0;}
.mfg-quote .q-eyebrow2 .mark{font-family:var(--serif);font-size:34px;line-height:1;color:var(--amber);transform:translateY(.12em);}
.mfg-quote blockquote{font-family:var(--mfg-serif,var(--serif));font-weight:500;font-size:clamp(22px,2.2vw,26px);line-height:1.7;margin:0;text-wrap:pretty;}
.mfg-author{display:flex;align-items:center;gap:22px;}
.mfg-author .ava{width:78px;height:78px;border-radius:50%;overflow:hidden;background:#cfcfcf;flex:0 0 auto;}
.mfg-author .ava img{width:100%;height:100%;object-fit:cover;}
.mfg-author .name{font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.1;}
.mfg-author .city{font-family:var(--sans);font-size:18px;line-height:1.1;color:rgba(255,255,255,.82);margin-top:6px;}

.mfg-process{padding:clamp(70px,10vw,120px) 0;}
.mfg-process-head{max-width:1003px;margin-bottom:clamp(36px,5vw,56px);}
.mfg-process-head .eyebrow{color:var(--green-ink);}
.mfg-process-head h2{font-family:var(--mfg-serif,var(--serif));font-weight:500;font-size:clamp(34px,5vw,60px);line-height:1.15;letter-spacing:-.02em;color:var(--green-ink);margin:16px 0 22px;text-wrap:balance;}
.mfg-process-head p{font-family:var(--body);font-size:clamp(18px,1.7vw,22px);line-height:1.9;color:var(--green-ink);margin:0;max-width:920px;}
.mfg-machine{background:var(--mfg-panel-bg,#ffffff);
  border-radius:var(--mfg-radius,10px);
  border:1px solid var(--line);
  padding:clamp(40px,5vw,68px)
  clamp(28px,12vw,229px);}
.mfg-machine img{width:100%;height:auto;display:block;}
.mfg-machine .mfg-video{width:100%;height:auto;display:block;border-radius:8px;}

.mfg-quality{padding:0 0 clamp(80px,11vw,130px);}
.mfg-quality-head{max-width:560px;margin-bottom:clamp(34px,4vw,48px);}
.mfg-quality-head .eyebrow{color:var(--green-ink);}
.mfg-quality-head h2{font-family:var(--mfg-serif,var(--serif));font-weight:500;font-size:clamp(32px,4.4vw,60px);line-height:1.18;letter-spacing:-.02em;color:var(--green-ink);margin-top:16px;text-wrap:balance;}
.mfg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.mfg-card{border:1px solid var(--line);border-radius:var(--mfg-radius,10px);padding:clamp(30px,3vw,40px);display:flex;flex-direction:column;gap:28px;transition:border-color .25s,box-shadow .25s,transform .25s;background:#fff;}
.mfg-card:hover{border-color:var(--cream-border-2);box-shadow:0 18px 40px -26px rgba(0,50,48,.35);transform:translateY(-4px);}
.mfg-card .ic{width:46px;height:46px;color:var(--teal-accent);}
.mfg-card .ic svg{width:42px;height:42px;stroke:var(--teal-accent);stroke-width:1.6;fill:none;}
.mfg-card h3{font-family:var(--mfg-serif,var(--serif));font-weight:500;font-size:clamp(26px,2.4vw,32px);line-height:1.3;color:var(--green-ink);margin:0;}
.mfg-card p{font-family:var(--body);font-size:18px;line-height:1.66;color:var(--green-ink);margin:0;}

@media (max-width:860px){
  .mfg-feature{grid-template-columns:1fr;}
  .mfg-feature > *{min-width:0;}
  .mfg-photo{min-height:0;aspect-ratio:16/11;width:100%;}
  .mfg-cards{grid-template-columns:1fr;}
}

/* tweak: disable scroll-reveal entirely */
.no-reveal .reveal,.no-reveal [data-stagger]>*{opacity:1 !important;transform:none !important;transition:none !important;}