/* ModuPro Outdoor — brand-first premium base */
:root{
  --ink:#0e1210;
  --ink-2:#161d19;
  --ink-3:#212a25;
  --paper:#f6f4ef;
  --paper-2:#eae6dd;
  --sand:#cbbfa8;
  --verde:#4f7a4a;
  --verde-light:#8fae74;
  --muted:#6d746f;
  --muted-light:#a8b0aa;
  --line:rgba(14,18,16,.12);
  --line-light:rgba(246,244,239,.16);
  --sans:"Helvetica Neue",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --wrap:1180px;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;line-height:1.08;letter-spacing:-.02em}
h1{font-family:var(--serif);font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:400}
h1 em{font-style:italic;color:var(--verde-light)}
h2{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:400;letter-spacing:-.015em}
h3{font-size:1.12rem;letter-spacing:-.005em}
p{margin:0 0 1em}
ul{margin:0;padding-left:1.1em}

/* draft affordances ------------------------------------------------------- */
/* The bar is fixed and the body is padded by exactly its height, so it must
   stay one line at every width or the fixed header lands on top of it. */
.draft-bar{position:fixed;top:0;left:0;right:0;z-index:80;background:#2b2f26;color:#e9e4c9;font-size:12px;letter-spacing:.09em;text-transform:uppercase;text-align:center;padding:7px 12px;font-weight:600;white-space:nowrap;overflow:hidden}
.draft-short{display:none}
body.is-draft .site-header{top:31px}
body.is-draft{padding-top:31px}
.tbd{background:rgba(203,191,168,.34);box-shadow:0 0 0 1px rgba(140,120,80,.28) inset;border-radius:3px;padding:.05em .28em;color:#4a4436}
/* Any dark surface needs the inverted marker or the placeholder text goes
   dark-on-dark. Keep this list in sync with the dark-background components. */
.dark .tbd,.hero .tbd,.cta-band .tbd,.contact-card .tbd,.footer .tbd,.founder-plate .tbd{background:rgba(203,191,168,.18);color:var(--sand);box-shadow:0 0 0 1px rgba(203,191,168,.34) inset}
.tbd-flag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;background:var(--sand);color:#3a3527;padding:2px 6px;border-radius:3px;vertical-align:middle}

/* header ------------------------------------------------------------------ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:24px;padding:18px var(--pad);transition:background .3s ease,padding .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(14,18,16,.92);backdrop-filter:blur(12px);padding-top:12px;padding-bottom:12px;border-bottom-color:var(--line-light)}
body.solid-header .site-header{background:rgba(14,18,16,.96);backdrop-filter:blur(12px);border-bottom-color:var(--line-light)}
/* Pages without a hero start under a solid bar, so their first section needs
   to clear it rather than sliding beneath. */
body.solid-header .subhero{padding-top:clamp(118px,13vw,160px)}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand-mark{width:188px;height:auto}
.nav-links{display:flex;gap:30px;margin-left:auto;align-items:center}
.nav-links a{color:var(--paper);text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.78;transition:opacity .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1}
.nav-actions{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:9px;width:22px;height:2px;background:var(--paper);transition:transform .25s ease,opacity .2s}
.menu-toggle span{top:19px}
.menu-toggle span::before{top:-7px;left:0}
.menu-toggle span::after{top:7px;left:0}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;z-index:55;background:var(--ink);padding:88px var(--pad) 28px;flex-direction:column;gap:4px;transform:translateY(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{color:var(--paper);text-decoration:none;font-family:var(--serif);font-size:1.5rem;padding:11px 0;border-bottom:1px solid var(--line-light)}
.mobile-menu{max-height:100vh;overflow-y:auto}
.mobile-sub{display:grid;gap:0;padding-top:14px}
.mobile-sub a{font-family:var(--sans);font-size:14.5px;padding:9px 0;color:var(--muted-light);border-bottom:0}

/* buttons ----------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:2px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s,transform .2s;border:1px solid transparent}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--verde);color:#fff;border-color:var(--verde)}
.btn.primary:hover{background:#446b40;border-color:#446b40}
.btn.ghost-light{background:transparent;color:var(--paper);border-color:rgba(246,244,239,.4)}
.btn.ghost-light:hover{background:rgba(246,244,239,.1);border-color:var(--paper)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.line:hover{border-color:var(--ink);background:rgba(14,18,16,.04)}
.btn.small{padding:10px 18px;font-size:11px}

/* hero -------------------------------------------------------------------- */
.hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:flex-end;background:var(--ink);color:var(--paper);overflow:hidden;padding:150px var(--pad) clamp(64px,9vh,110px)}
.hero-inner{position:relative;z-index:2;max-width:var(--wrap);width:100%;margin:0 auto}
.hero h1{margin:0 0 24px;max-width:16ch}
.lede{max-width:56ch;font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted-light);margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.scroll-hint{position:absolute;left:50%;bottom:26px;width:1px;height:46px;background:linear-gradient(var(--verde-light),transparent);opacity:.6;z-index:2}

/* hero photo -------------------------------------------------------------- */
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}

/* hero motion: modules assembling ----------------------------------------- */
.module-motion{position:absolute;inset:0;z-index:1;overflow:hidden}
.motion-grid{position:absolute;top:-8%;left:-6%;width:112%;height:116%;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:10px;transform:perspective(1400px) rotateX(46deg) rotateZ(-24deg) scale(1.18);transform-origin:center}
/* Over the photo the grid has to be a hairline overlay, not filled tiles —
   filled cells read as dirt on the lens. Outlines only, very low alpha. */
.cell{display:block;border:1px solid rgba(246,244,239,.13);background:transparent;border-radius:4px;opacity:0;animation:cellIn .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d)}
.cell.accent{background:rgba(143,174,116,.14);border-color:rgba(143,174,116,.3)}
@keyframes cellIn{from{opacity:0;transform:translateZ(60px) scale(.82)}to{opacity:1;transform:translateZ(0) scale(1)}}
/* Heavier than the photo-free version: the header sits on this, and a white
   wordmark over a bright sky needs the top band dark to stay legible. */
.motion-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,16,.78) 0%,rgba(14,18,16,.5) 26%,rgba(14,18,16,.58) 55%,rgba(14,18,16,.93) 82%,rgba(14,18,16,.98) 100%)}
html.reduce-motion .cell{animation:none;opacity:1}

/* sections ---------------------------------------------------------------- */
.section{max-width:var(--wrap);margin:0 auto;padding:clamp(64px,9vw,118px) var(--pad)}
.section.narrow{max-width:760px}
.section.dark{max-width:none;background:var(--ink);color:var(--paper)}
.section.dark > *{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--verde);margin-bottom:16px}
.eyebrow.light{color:var(--verde-light)}
.section-head{max-width:640px;margin-bottom:clamp(36px,5vw,58px)}
.section-head p{color:var(--muted);margin-top:14px}
.dark .section-head p{color:var(--muted-light)}
.note{font-size:14px;color:var(--muted);margin-top:34px;padding-top:18px;border-top:1px solid var(--line);max-width:70ch}

.statement{text-align:center;max-width:900px}
.statement p{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.15rem);line-height:1.38;margin:0;color:var(--ink)}

.subhero{max-width:var(--wrap);margin:0 auto;padding:clamp(140px,17vw,208px) var(--pad) clamp(40px,6vw,66px)}
.subhero p{max-width:58ch;color:var(--muted);font-size:1.05rem;margin-top:18px}
.subhero + .section{padding-top:0}

/* pillars ----------------------------------------------------------------- */
/* Hairlines live on the cards, not as a background slab behind a 1px gap --
   a slab stays visible while the cards are still faded out and reads as a
   grey block. Overlapping 1px shadows with gap:0 give the same rule lines. */
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0}
.pillar{background:var(--paper);padding:clamp(26px,3vw,40px);box-shadow:0 0 0 1px var(--line)}
.pillar:nth-child(2){transition-delay:.09s}
.pillar:nth-child(3){transition-delay:.18s}
.pillar-num{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--verde);margin-bottom:20px}
.pillar h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:12px}
.pillar p{color:var(--muted);font-size:15.5px;margin:0}

/* split ------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split-copy h2{margin-bottom:16px}
.split-copy p{color:var(--muted);margin-bottom:26px;max-width:46ch}
.dark .split-copy p{color:var(--muted-light)}
.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;aspect-ratio:1/1}
.gcell{border:1px solid rgba(143,174,116,.28);border-radius:4px;background:rgba(143,174,116,.06)}
.gcell.accent{background:rgba(79,122,74,.5);border-color:rgba(143,174,116,.6)}

/* process ----------------------------------------------------------------- */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:clamp(20px,3vw,34px);list-style:none;padding:0;margin:0;counter-reset:none}
.process-grid li{padding-top:20px;border-top:2px solid var(--verde)}
.process-grid li:nth-child(2){transition-delay:.08s}
.process-grid li:nth-child(3){transition-delay:.16s}
.process-grid li:nth-child(4){transition-delay:.24s}
.step-num{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--verde);margin-bottom:12px}
.process-grid h3{margin-bottom:8px}
.process-grid p{color:var(--muted);font-size:15px;margin:0}
.dark .process-grid li{border-top-color:var(--verde-light)}
.dark .process-grid h3{color:var(--paper)}
.dark .process-grid p{color:var(--muted-light)}

/* module list ------------------------------------------------------------- */
.module-list{border-top:1px solid var(--line)}
.module-row{display:grid;grid-template-columns:76px 1fr;gap:24px;align-items:start;padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.module-key{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--line);border-radius:4px;font-weight:700;font-size:18px;color:var(--verde)}
.module-row h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:8px}
.module-row p{color:var(--muted);margin:0;max-width:62ch}

/* compare ----------------------------------------------------------------- */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px}
.compare article{padding:clamp(24px,3vw,34px);border:1px solid var(--line-light);border-radius:4px}
.compare article.highlight{border-color:var(--verde-light);background:rgba(79,122,74,.14)}
.compare h3{margin-bottom:16px;color:var(--paper)}
.compare ul{list-style:none;padding:0}
.compare li{padding:9px 0 9px 24px;position:relative;color:var(--muted-light);font-size:15px;border-bottom:1px solid var(--line-light)}
.compare li:last-child{border-bottom:0}
.compare li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;border-radius:2px;background:var(--muted)}
.compare .highlight li::before{background:var(--verde-light)}

/* services ---------------------------------------------------------------- */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:0}
.service-card{display:flex;flex-direction:column;padding:clamp(26px,3vw,38px);text-decoration:none;color:inherit;background:var(--paper);box-shadow:0 0 0 1px var(--line);transition:background .25s ease,transform .25s ease}
.service-card:hover{background:#fff;transform:translateY(-2px);z-index:1}
/* Card photo: negative margins pull it to the card edge, then aspect-ratio
   crops it. height:auto is mandatory — the height attribute on the img would
   otherwise override aspect-ratio and render it at full intrinsic height. */
.card-photo{display:block;margin:calc(clamp(26px,3vw,38px) * -1) calc(clamp(26px,3vw,38px) * -1) 22px}
.card-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.service-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:20px;border:1px solid var(--line);border-radius:4px}
.service-icon svg,.aside-icon svg{width:26px;height:26px;fill:none;stroke:var(--verde);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.service-eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--verde);margin-bottom:10px}
.service-card h3{font-family:var(--serif);font-weight:400;font-size:1.32rem;margin-bottom:10px}
.service-card p{color:var(--muted);font-size:15px;margin:0 0 20px}
.service-more{margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.service-more::after{content:"";width:16px;height:1px;background:var(--verde);transition:width .25s ease}
.service-card:hover .service-more::after{width:26px}
.section-foot{margin-top:clamp(28px,4vw,44px)}

/* areas ------------------------------------------------------------------- */
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0}
.area-card{display:flex;flex-direction:column;padding:clamp(26px,3vw,38px);text-decoration:none;color:inherit;background:var(--paper);box-shadow:0 0 0 1px var(--line);transition:background .25s ease,transform .25s ease}
.area-card:hover{background:#fff;transform:translateY(-2px);z-index:1}
.area-card h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-bottom:10px}
.area-card p{color:var(--muted);font-size:15px;margin:0 0 16px}
.area-towns{display:block;font-size:13.5px;color:var(--verde);margin-bottom:20px;line-height:1.6}
.climate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(20px,3vw,34px)}
.climate-grid article{padding-top:20px;border-top:2px solid var(--verde-light)}
.climate-grid h3{margin-bottom:10px;color:var(--paper)}
.climate-grid p{color:var(--muted-light);font-size:15px;margin:0}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pill{display:inline-block;padding:8px 15px;border:1px solid var(--line);border-radius:2px;font-size:14px;color:var(--ink);background:var(--paper)}
.spaced{margin-top:38px}
.check-list li a{color:var(--ink);text-decoration:none;text-underline-offset:3px}
.check-list li a:hover{text-decoration:underline}
.muted-note{margin-top:18px}
.text-link{color:var(--verde);font-size:14px;font-weight:600;text-underline-offset:3px}
.footer-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 26px;max-width:var(--wrap);margin:0 auto 26px}
.footer-areas a{color:var(--muted-light);text-decoration:none;font-size:14px;transition:color .2s}
.footer-areas a:hover{color:var(--paper)}

/* service detail ---------------------------------------------------------- */
.crumbs{max-width:var(--wrap);margin:0 auto;padding:clamp(104px,12vw,138px) var(--pad) 0;display:flex;flex-wrap:wrap;gap:9px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs + .subhero{padding-top:clamp(18px,2.5vw,26px)}
.service-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(30px,5vw,64px);align-items:start}
.service-main h2{font-size:1.5rem;margin-bottom:20px}
.check-list{list-style:none;padding:0;margin:0 0 34px}
.check-list li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line);color:var(--ink);font-size:15.5px}
.check-list li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:9px;border-radius:2px;background:var(--verde)}
.modular-note{background:var(--paper-2);border-left:3px solid var(--verde);padding:24px 28px;border-radius:0 3px 3px 0}
.modular-note p{margin:0;color:var(--ink);font-size:15.5px}
.aside-card{background:var(--ink);color:var(--paper);padding:clamp(26px,3vw,34px);border-radius:4px;position:sticky;top:104px}
.aside-card .aside-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line-light);border-radius:4px;margin-bottom:18px}
.aside-card .aside-icon svg{stroke:var(--verde-light)}
.aside-card h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-bottom:8px;color:var(--paper)}
.aside-card p{color:var(--muted-light);font-size:15px;margin-bottom:22px}
.btn.full{width:100%}

/* faq --------------------------------------------------------------------- */
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;padding:20px 40px 20px 0;position:relative;font-weight:600;font-size:16.5px;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:8px;top:27px;width:11px;height:11px;border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(45deg);transition:transform .25s ease}
.faq-list details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq-list p{margin:0 0 22px;color:var(--muted);max-width:74ch}
.related-section .service-card{background:var(--paper)}

/* banner + work ------------------------------------------------------------ */
.banner-section{padding-top:0;padding-bottom:0}
.banner{margin:0}
.banner img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:4px;display:block}
.banner figcaption{margin-top:12px;font-size:13.5px;color:var(--muted)}
.section.tight{padding-top:0;padding-bottom:clamp(20px,3vw,30px)}
.callout.strong{border-left-color:var(--verde);font-size:15.5px}

.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:clamp(20px,3vw,34px)}
.work-frame{border-radius:4px;overflow:hidden;margin-bottom:14px;background:var(--paper-2)}
.work-frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.ref-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;background:var(--sand);color:#3a3527;padding:3px 9px;border-radius:3px;margin-bottom:9px}
.work-slot h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin-bottom:6px}
.work-slot p{color:var(--muted);font-size:15px;margin:0}

.climate-photo{margin:0 0 clamp(30px,4vw,46px)}
.climate-photo img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:4px;display:block}

/* founder ----------------------------------------------------------------- */
.founder-plate{aspect-ratio:4/5;height:auto;max-width:380px;background:linear-gradient(150deg,var(--ink-2),var(--ink-3));border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.plate-mono{font-family:var(--serif);font-size:clamp(3rem,7vw,4.6rem);color:var(--verde-light);letter-spacing:.04em}
.plate-note{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* prose / legal ----------------------------------------------------------- */
.prose h2{font-size:1.4rem;margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted)}
.prose a{color:var(--verde);text-underline-offset:3px}
.callout{background:var(--paper-2);border-left:3px solid var(--sand);padding:16px 20px;border-radius:0 3px 3px 0}
.notfound h1{margin:8px 0 14px}
.notfound .btn{margin-top:12px}

/* contact ----------------------------------------------------------------- */
.contact-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}
.contact-card{background:var(--ink);color:var(--paper);padding:clamp(28px,3.4vw,42px);border-radius:4px}
.contact-card h2{font-size:1.6rem;margin-bottom:24px;color:var(--paper)}
.contact-list{margin:0}
.contact-list > div{padding:14px 0;border-bottom:1px solid var(--line-light)}
.contact-list dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-light);margin-bottom:5px}
.contact-list dd{margin:0;color:var(--paper);font-size:15.5px}
.contact-list dd a{color:var(--paper);text-underline-offset:3px}
.fine{margin:24px 0 0;font-size:13px;color:var(--muted-light)}
.form-placeholder{border:1px dashed var(--sand);border-radius:4px;padding:clamp(28px,4vw,52px);text-align:center;background:var(--paper-2)}
.form-placeholder strong{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.form-placeholder p{margin:0;color:var(--muted);font-size:15px}
.ghl-form{width:100%;min-height:680px;border:0;display:block}

/* cta --------------------------------------------------------------------- */
.cta-band{background:var(--ink);color:var(--paper);padding:clamp(50px,7vw,86px) var(--pad);display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.cta-band > div:first-child{max-width:52ch}
.cta-band h2{margin-bottom:12px}
.cta-band p{color:var(--muted-light);margin:0}

/* footer ------------------------------------------------------------------ */
.footer{background:var(--ink-2);color:var(--paper);padding:clamp(48px,6vw,76px) var(--pad) 34px}
.footer-top{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;justify-content:space-between;max-width:var(--wrap);margin:0 auto 34px}
.footer-tag{font-family:var(--serif);font-size:1.15rem;color:var(--muted-light);margin:0}
.footer-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 26px;max-width:var(--wrap);margin:0 auto 30px}
.footer-services a{color:var(--muted-light);text-decoration:none;font-size:14px;transition:color .2s}
.footer-services a:hover{color:var(--paper)}
.footer-grid{display:flex;flex-wrap:wrap;gap:14px 30px;max-width:var(--wrap);margin:0 auto;padding-top:26px;border-top:1px solid var(--line-light)}
.footer-grid a{color:var(--muted-light);text-decoration:none;font-size:14px;transition:color .2s;overflow-wrap:anywhere}
.footer-grid a:hover{color:var(--paper)}
.footer-fine{max-width:var(--wrap);margin:30px auto 0;font-size:12.5px;color:var(--muted)}

/* reveal — visible by default, hidden only when JS is confirmed ------------ */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .cell{animation:none;opacity:1}
  html{scroll-behavior:auto}
}

/* responsive -------------------------------------------------------------- */
@media (max-width:900px){
  .service-body{grid-template-columns:1fr}
  .aside-card{position:static}
  .split{grid-template-columns:1fr}
  .split-visual{order:-1;max-width:420px}
  .contact-layout{grid-template-columns:1fr}
  .nav-links,.nav-actions{display:none}
  .menu-toggle{display:block;margin-left:auto}
  .mobile-menu{display:flex}
  .motion-grid{grid-template-columns:repeat(6,1fr);transform:perspective(1200px) rotateX(50deg) rotateZ(-20deg) scale(1.4)}
}
@media (max-width:700px){
  .draft-long{display:none}
  .draft-short{display:inline}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{min-height:auto;padding-top:132px}
  .module-row{grid-template-columns:1fr;gap:14px}
  .cta-band{flex-direction:column;align-items:flex-start}
  .brand-mark{width:154px}
  .footer-top{flex-direction:column;gap:10px}
}