/* R.D. Pinault Company — site styles
   Tokens → base → chrome (nav, menu, footer) → components → page sections → responsive */

@font-face{font-family:'Byington';src:url('../fonts/byington.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Byington';src:url('../fonts/byington_italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Byington';src:url('../fonts/byington_bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Georgia tuned to Byington's metrics: text keeps its size and line breaks when the web font arrives (no layout shift). */
@font-face{font-family:'Byington Fallback';src:local('Georgia');font-weight:400;font-style:normal;size-adjust:108.9%;ascent-override:75.8%;descent-override:25.2%;line-gap-override:4.7%}
@font-face{font-family:'Byington Fallback';src:local('Georgia Italic'),local('Georgia-Italic');font-weight:400;font-style:italic;size-adjust:100.6%;ascent-override:82%;descent-override:27.2%;line-gap-override:5%}
@font-face{font-family:'Byington Fallback';src:local('Georgia Bold'),local('Georgia-Bold');font-weight:700;font-style:normal;size-adjust:101%;ascent-override:82.2%;descent-override:27.1%;line-gap-override:5.1%}
@font-face{font-family:'Oswald';src:url('../fonts/oswald-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Oswald';src:url('../fonts/oswald-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Caveat';src:url('../fonts/caveat.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'ER Architect';src:url('../fonts/er-architect.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --cream:#f4f0e7; --sheet:#faf7f0; --paper:#f7f2e8;
  --green:#1f3d2e; --ink:#1d2a22; --brown:#8a5a3c; --tan:#c9a27e;
  --line:rgba(31,61,46,.3); --line-soft:rgba(31,61,46,.25);
  --gut:clamp(18px,3vw,44px);
  --max:1360px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --serif:'Byington','Byington Fallback',Georgia,serif;
  --arch:'ER Architect',ui-monospace,monospace;
  --hand:'Caveat',cursive;
  /* hand-made textures, drawn as SVG noise (no image downloads) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 .5 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .36 0 0 0 0 .22 .5 0 0 0 -.26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --linen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .02' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 .1 0 0 0 -.02'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .05 0 0 0 0 .03 .16 0 0 0 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{display:block}
img,picture,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color .2s}
a:hover{color:var(--brown)}
h1,h2,h3,p,figure,blockquote,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}
em{font-style:italic}
address{font-style:normal}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--green);color:var(--cream);border-radius:2px}
.skip:focus{top:12px;color:var(--cream)}

.wrap{max-width:var(--max);margin-inline:auto}
.pad{padding-inline:var(--gut)}
.section{position:relative;padding:clamp(80px,11vw,160px) var(--gut)}
.section--green{background:var(--green);color:var(--cream);overflow:hidden}
.spacer{height:clamp(80px,11vw,160px)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--serif);font-weight:700;font-size:clamp(14px,1.1vw,17px);letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--green)}
.section--green .eyebrow,.panel--green .eyebrow,.cover .eyebrow{color:var(--cream)}
.eyebrow--tan,.section--green .eyebrow--tan{color:var(--tan)}
.display{font-weight:400;font-size:clamp(44px,6vw,104px);line-height:.98;letter-spacing:-.01em;color:var(--green);text-wrap:balance}
.display--md{font-size:clamp(44px,5.6vw,92px)}
.h2{font-weight:400;font-size:clamp(40px,4.8vw,78px);line-height:1;letter-spacing:-.01em;color:var(--green);text-wrap:balance}
.h2--md{font-size:clamp(36px,4.4vw,70px)}
.h2--sm{font-size:clamp(34px,3.6vw,58px)}
.h2--xl{font-size:clamp(40px,5.6vw,92px);line-height:.98}
.display em,.h2 em{color:var(--brown)}
.section--green .h2,.panel--green .h2,.cover .h2{color:inherit}
.section--green .h2 em,.panel--green .h2 em,.cover .h2 em{color:var(--tan)}
.lead{font-size:clamp(17px,1.25vw,20px);line-height:1.5}
.arch{font-family:var(--arch);font-size:14px;letter-spacing:.1em;text-transform:uppercase;-webkit-text-stroke:.6px var(--green)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:15px 28px;border:0;border-radius:2px;font:700 17px/1 var(--serif);letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:background .3s,color .3s}
.btn--green{background:var(--green);color:var(--cream)}
.btn--green:hover{background:var(--brown);color:var(--cream)}
.btn--brown{background:var(--brown);color:var(--cream)}
.btn--brown:hover{background:var(--green);color:var(--cream)}
.btn--cream{background:var(--cream);color:var(--green)}
.btn--cream:hover{background:var(--tan);color:var(--green)}

/* ---------- 12-column grid ---------- */
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.grid12>*{grid-column:var(--c,1 / -1);grid-row:var(--r,auto)}

/* ---------- reveal on scroll (only when JS is running) ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,var(--ry,24px),0);transition:opacity var(--rd,1s) var(--ease),transform var(--rd,1s) var(--ease);transition-delay:var(--dl,0ms)}
.js [data-reveal].slide-in{transform:translate3d(min(40vw,420px),0,0);transition-duration:1.3s}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--gut);background:rgba(244,240,231,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(31,61,46,.12);color:var(--ink);white-space:nowrap;transition:background .5s,box-shadow .5s,padding .5s}
.nav--hero{position:fixed;left:0;right:0;padding-block:18px;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.nav--hero.is-scrolled{padding-block:12px;background:rgba(244,240,231,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(31,61,46,.12)}
.nav__brand{display:flex;flex-direction:column;gap:6px;width:184px;flex-shrink:0;line-height:1}
.nav__brand img{width:184px;height:auto}
.license{display:flex;justify-content:space-between;align-items:center;font:400 11px/1 'Oswald','Arial Narrow',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--green);white-space:nowrap}
.license__dot{flex:1;display:flex;justify-content:center;margin:0 8px}
.license__dot::before{content:"";width:2px;height:2px;border-radius:50%;background:var(--green)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);font-weight:700;font-size:clamp(15px,1.15vw,17px);letter-spacing:.04em;line-height:1}
.nav__links a[aria-current="page"]{color:var(--brown)}
.nav__cta{min-height:0;padding:12px 22px}
.nav__cta:hover{color:var(--cream)}
.nav__toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:46px;height:46px;padding:0;border:1px solid rgba(31,61,46,.35);border-radius:2px;background:transparent;color:var(--green);cursor:pointer}
.nav__toggle span{display:block;width:20px;height:2px;background:currentColor}

/* ---------- mobile menu ---------- */
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;padding:18px var(--gut) 40px;background:var(--green);color:var(--cream);overflow:auto}
.menu[hidden]{display:none}
.menu__top{display:flex;justify-content:space-between;align-items:center}
.menu__top img{height:30px;width:auto}
.menu__close{width:46px;height:46px;padding:0;border:1px solid rgba(244,240,231,.4);border-radius:2px;background:transparent;color:var(--cream);font-size:26px;line-height:1;cursor:pointer}
.menu__links{display:grid;gap:8px;margin-top:48px;font-size:clamp(34px,9vw,48px);line-height:1.15}
.menu__links a:hover,.menu__links a[aria-current="page"]{color:var(--tan)}
.menu__links .menu__cta{justify-self:start;margin-top:24px;font-size:18px;color:var(--green)}
.menu__links .menu__cta:hover{color:var(--green)}
.menu__foot{margin-top:auto;padding-top:40px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
body.menu-open{overflow:hidden}

/* ---------- footer ---------- */
.footer{position:relative;z-index:10;overflow:hidden;padding:clamp(60px,8vw,110px) var(--gut) 0;background:var(--green);color:var(--cream);box-shadow:0 -30px 60px rgba(29,42,34,.3)}
.footer a:hover{color:var(--tan)}
.footer__cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:32px 40px;font-size:16px;line-height:2}
/* Columns size to their content and each footer line stays whole (no orphaned "D" or "Immel"). */
.footer__cols address,.footer__cols p,.footer__links{white-space:nowrap}
@media (max-width:1100px){.footer__cols{gap:28px 24px;font-size:15px}}
.footer__cols p{margin:0}
.footer__head{margin-bottom:10px!important;font:500 11px/1.5 'Oswald','Arial Narrow',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--tan)}
@media (max-width:760px){.footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}.footer__cols address,.footer__cols p,.footer__links{white-space:normal}}
@media (max-width:480px){.footer__cols{grid-template-columns:minmax(0,1fr)}}
.footer__links{display:grid}
.footer__legal{font-weight:700;font-size:14px;letter-spacing:.02em}
.wordmark{margin:clamp(48px,6vw,96px) calc(50% - 50vw) 0;padding-top:.2em;font-size:clamp(24px,8.8vw,190px);line-height:.62;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-align:center}
.wordmark em{color:var(--tan)}

/* ---------- frames & captions ---------- */
.frame{position:relative;overflow:hidden;aspect-ratio:var(--ar,3/2);background:#e6dfd0}
.frame picture,.plx picture,.banner picture{width:100%;height:100%}
.frame img,.plx img,.cover img,.banner img,.hero__media img{width:100%;height:100%;object-fit:cover}
.plx{position:absolute;inset:-6% 0;will-change:transform}
.cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-weight:700;font-size:15px;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--green)}
.cap__n{color:var(--brown);flex-shrink:0}
.credit{font-weight:400;font-size:12.5px;text-transform:none;letter-spacing:0;white-space:nowrap;color:var(--brown)}
.credit a,.gal .credit a{display:inline;text-decoration:none}
.credit a:hover{text-decoration:underline;text-underline-offset:2px}
.ph{display:grid;place-items:center;width:100%;height:100%;min-height:100%;padding:24px;border:1px dashed rgba(31,61,46,.4);background:rgba(31,61,46,.04);font:400 14px/1.8 var(--arch);letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--green)}
.ph small{font-size:inherit;opacity:.6}
.banner>.ph{min-height:clamp(300px,50vh,560px)}

/* ---------- galleries ---------- */
.gal{align-items:start;margin-top:24px}
.gal a{display:block}
.gal a[data-lightbox]{cursor:zoom-in}
.gal a .frame img{transition:transform 1.2s var(--ease)}
.gal a:hover .frame img{transform:scale(1.03)}
.gal-section{padding:0 var(--gut) clamp(80px,10vw,140px)}
.gal-head{margin:0;font-family:var(--serif);line-height:1.4;display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.gal-head+.gal{margin-top:32px}
.showcase{position:relative;display:block;height:clamp(380px,70vh,800px);overflow:hidden;color:inherit}
.showcase__cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;padding:clamp(120px,15vw,220px) clamp(20px,3vw,40px) clamp(20px,3vw,40px);color:var(--cream);background:linear-gradient(180deg,rgba(20,30,24,0) 0%,rgba(20,30,24,.45) 25%,rgba(20,30,24,.78) 55%,rgba(20,30,24,.95) 100%);text-shadow:0 1px 14px rgba(0,0,0,.45)}
.showcase__sum span{display:block}
@media (max-width:760px){.showcase__sum span{display:inline}}
.showcase__cap .eyebrow{font-size:15px;letter-spacing:.08em;color:var(--cream)}
.showcase__title{margin-top:10px;font-size:clamp(26px,2.6vw,40px);line-height:1.05}
.showcase__sum{margin-top:8px;font-size:15px;opacity:.85}
.showcase:hover{color:inherit}
.showcase .btn{padding:13px 22px;font-size:16px;min-height:0}

.alt-list{display:grid;gap:clamp(56px,7vw,110px)}
.alt{gap:clamp(24px,3vw,48px);align-items:center;margin:0}
.code{font:400 16px/1 var(--arch);letter-spacing:.06em;color:var(--brown)}
.alt__text .h2{margin-top:12px}
.alt__text p{margin-top:20px}

.teaser{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;margin-top:32px;padding:clamp(28px,4vw,48px);border:1px dashed rgba(31,61,46,.35);color:var(--green)}
.teaser__text{max-width:640px;font-size:clamp(20px,1.8vw,26px);line-height:1.35}
.teaser__text em{color:var(--brown)}
.teaser:hover{color:var(--green)}

/* ---------- page heads ---------- */
.page-head{padding:clamp(60px,8vw,120px) var(--gut) clamp(40px,5vw,72px)}
.page-head--hero{position:relative;padding-bottom:0;overflow:hidden}
.page-head__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.page-head__lead{max-width:440px}
.jump{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:clamp(28px,3vw,40px);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.jump a{border-bottom:1px solid var(--line);padding-bottom:4px}
.banner{position:relative;height:clamp(320px,56vh,640px);margin-top:clamp(40px,5vw,64px);overflow:hidden}
.banner__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,40px);background:linear-gradient(180deg,rgba(29,42,34,0),rgba(29,42,34,.7));color:var(--cream);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- section heads, spec lists, points ---------- */
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.section-head p{max-width:420px}
.work{margin-top:clamp(40px,5vw,64px)}
.spec{display:grid}
.spec__row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:30px 0;border-top:1px solid var(--line-soft)}
.spec__row:last-child{border-bottom:1px solid var(--line-soft)}
.spec__code{padding-top:8px;font-weight:700;font-size:16px;letter-spacing:.06em;color:var(--brown)}
.spec h3{margin-bottom:8px;font-weight:400;font-size:clamp(24px,2.1vw,32px);line-height:1.1;color:var(--green)}
.spec p{font-size:16px;opacity:.85}
.spec a{text-decoration:underline}

.why{padding:clamp(80px,10vw,150px) var(--gut)}
.why__art{position:absolute;left:-6vw;top:clamp(220px,32%,420px);width:62vw;max-width:980px;opacity:.14;pointer-events:none}
.why__art img{width:100%;height:auto;filter:invert(1)}
.why .grid12{position:relative}
.points{display:grid;gap:clamp(32px,4vw,52px)}
.points h3{margin-bottom:10px;font-weight:400;font-size:clamp(24px,2.4vw,36px);line-height:1.1;color:inherit}
.points p{max-width:520px;opacity:.8}

/* ---------- CTA ---------- */
.cta{text-align:center}
.cta__inner{display:grid;justify-items:center;gap:22px;max-width:820px;margin:0 auto}
.cover{position:relative;height:clamp(460px,70vh,720px);overflow:hidden}
.cover__wash{position:absolute;inset:0;background:rgba(29,42,34,.6)}
.cover__body{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;padding:24px;text-align:center;color:var(--cream)}
.cover__body p{max-width:520px;font-size:clamp(16px,1.15vw,18px)}

/* ================================================================ HOME */
.page-home .stack>.panel,.page-home .stack>.hero{position:sticky;top:0}
.panel{position:relative;z-index:var(--z,1);padding:clamp(80px,11vw,160px) var(--gut);background:var(--cream);box-shadow:0 -30px 60px rgba(29,42,34,.18)}
.panel--green{background:var(--green);color:var(--cream);box-shadow:0 -30px 60px rgba(29,42,34,.25)}
.panel--flush{padding:0;background:none}
.panel--flush>.section--green{box-shadow:0 -30px 60px rgba(29,42,34,.25)}

.hero{z-index:0;background:var(--cream)}
.hero__inner{position:relative;height:100svh;min-height:600px;overflow:hidden}
.hero__media{position:absolute;inset:-3% 0;will-change:transform}
.hero__media picture{width:100%;height:100%}
.hero__media img{transform-origin:100% 50%;animation:rdp-zoomout 14s cubic-bezier(.2,.6,.2,1) both}
@keyframes rdp-zoomout{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero__fade-top{position:absolute;left:0;right:0;top:0;height:160px;background:linear-gradient(180deg,rgba(244,240,231,.85),rgba(244,240,231,0));pointer-events:none}
.hero__fade{position:absolute;left:0;bottom:0;width:min(100%,1100px);height:60%;background:radial-gradient(ellipse at 10% 100%,rgba(244,240,231,1) 0%,rgba(244,240,231,.92) 32%,rgba(244,240,231,.6) 56%,rgba(244,240,231,0) 78%);pointer-events:none}
.hero__text{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(36px,5vh,64px)}
.hero__title{margin-top:22px;font-size:clamp(40px,5.6vw,132px);line-height:.98;letter-spacing:-.01em;color:var(--green)}
.hero__line{display:block;white-space:nowrap}
.hero__btns{display:none;gap:14px;flex-wrap:wrap;margin-top:34px}

.elevation{padding:clamp(70px,9vw,130px) 0 0;overflow:hidden}
.elevation .grid12{padding-inline:var(--gut)}
.elevation__lead{font-size:clamp(16px,1.2vw,19px);color:rgba(244,240,231,.85)}
.elevation__art{position:relative;margin-top:clamp(36px,4vw,64px);padding:0 var(--gut) clamp(56px,7vw,100px)}
.elevation__frame{position:relative;max-width:var(--max);margin:0 auto;aspect-ratio:1789/549}
.elevation__frame img{width:100%;height:100%;object-fit:contain;filter:invert(1) brightness(1.2) sepia(.3) saturate(.6);opacity:.85}

.company{overflow:hidden}
.company__year{position:absolute;right:-2vw;top:4%;font-style:italic;font-size:clamp(180px,30vw,480px);line-height:1;letter-spacing:-.03em;color:rgba(31,61,46,.05);user-select:none;pointer-events:none}
.company .grid12{position:relative;align-items:start}
.company__lead{font-size:clamp(20px,1.8vw,28px);line-height:1.4;text-wrap:pretty}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.stats>div{padding-top:16px;border-top:1px solid var(--line)}
.stats dt{font-size:clamp(36px,3.4vw,48px);line-height:1;white-space:nowrap;color:var(--green)}
.stats dt em{color:var(--brown)}
.stats dd{margin-top:8px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}

.marquee{position:relative;z-index:4;overflow:hidden;padding:22px 0;background:var(--green);color:var(--cream);font-weight:700;font-size:clamp(16px,1.4vw,22px);letter-spacing:.1em;text-transform:uppercase;border-block:1px solid rgba(201,162,126,.5)}
.marquee__track{display:flex;width:max-content;animation:rdp-marquee 46s linear infinite}
.marquee ul{display:flex;gap:44px;padding-right:44px;white-space:nowrap}
.marquee li::after{content:"/";margin-left:44px;color:var(--tan)}
@keyframes rdp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.capabilities::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,rgba(31,61,46,.10),rgba(31,61,46,0));pointer-events:none}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,72px)}
.quotes figure{display:grid;gap:22px;align-content:start;padding-top:24px;border-top:1px solid var(--line)}
.quotes blockquote{font-style:italic;font-size:clamp(22px,1.8vw,28px);line-height:1.3;text-wrap:pretty;color:var(--green)}
.quotes figcaption{font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.quotes--letter{grid-template-columns:minmax(0,1fr);max-width:920px}
.quotes--letter blockquote p+p{margin-top:.8em}

/* ================================================================ WHY PINAULT
   Editorial, centered composition: tracked labels, surveyor's mark ornaments,
   ruled buttons, a notched frame and full-colour blocks. */
.w-label{margin:0;font:500 12px/1.4 'Oswald','Arial Narrow',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--green)}
.w-label--tan{color:var(--tan)}
.w-label--cream{color:var(--cream)}
.w-mark{display:inline-block;color:var(--brown);line-height:0}
.w-display{max-width:14ch;margin:0 auto;font-weight:400;font-size:clamp(48px,7.4vw,124px);line-height:.95;letter-spacing:-.015em;color:var(--green);text-wrap:balance}
.w-display em,.w-h2 em,.w-statement__text em{color:var(--brown)}
.w-h2{max-width:17ch;margin:0 auto;font-weight:400;font-size:clamp(38px,4.6vw,72px);line-height:1;letter-spacing:-.01em;color:var(--green);text-wrap:balance}
.w-intro{display:grid;justify-items:center;gap:22px;max-width:640px;margin:0 auto;text-align:center}
.w-intro>p:not(.w-label){max-width:560px;font-size:18px;line-height:1.6;text-wrap:pretty}

.rule-btn{position:relative;display:inline-block;padding:15px 30px;font:500 12px/1 'Oswald','Arial Narrow',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--green);transition:color .3s,letter-spacing .4s var(--ease)}
.rule-btn::before,.rule-btn::after{content:"";position:absolute;left:0;right:0;height:5px;background:
  radial-gradient(circle,currentColor 1.6px,transparent 2.1px) left center/5px 5px no-repeat,
  radial-gradient(circle,currentColor 1.6px,transparent 2.1px) right center/5px 5px no-repeat,
  linear-gradient(currentColor,currentColor) center/calc(100% - 10px) 1px no-repeat}
.rule-btn::before{top:-2px}
.rule-btn::after{bottom:-2px}
.rule-btn:hover{color:var(--brown);letter-spacing:.36em}

/* hero */
.w-hero{position:relative;overflow:hidden;padding:clamp(90px,12vw,170px) var(--gut) 0;text-align:center}
.w-hero__inner{position:relative;z-index:1;display:grid;justify-items:center;gap:28px}
.w-lead{max-width:34em;font-size:clamp(17px,1.3vw,20px);line-height:1.6;text-wrap:pretty}
.w-hero .rule-btn{margin-top:10px}
.w-hero__art{max-width:1100px;margin:clamp(60px,8vw,110px) auto 0;opacity:.22}
.w-hero__art img{width:100%;height:auto}

/* statement band */
.w-statement{position:relative;display:grid;justify-items:center;padding:clamp(56px,7vw,96px) var(--gut) clamp(40px,5vw,70px);background-color:var(--green);background-image:var(--linen);color:var(--cream);text-align:center}
.cert{position:relative;display:grid;justify-items:center;gap:26px;width:min(100%,980px);padding:clamp(56px,7vw,96px) clamp(20px,5vw,72px);border:3px double rgba(201,162,126,.55);outline:1px solid rgba(201,162,126,.25);outline-offset:8px}
.cert::before,.cert::after{content:"";position:absolute;left:50%;width:12px;height:12px;border:1px solid rgba(201,162,126,.8);background:var(--green);transform:translateX(-50%) rotate(45deg)}
.cert::before{top:-8px}
.cert::after{bottom:-8px}
.w-statement__rule{display:flex;align-items:center;gap:14px;color:rgba(201,162,126,.8)}
.w-statement__rule::before,.w-statement__rule::after{content:"";width:clamp(40px,8vw,90px);height:1px;background:currentColor}
.w-statement__text{max-width:20ch;font-size:clamp(40px,5.4vw,88px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.w-statement__text em{color:var(--tan)}

/* ledger */
.w-ledger{position:relative;padding:clamp(20px,3vw,40px) var(--gut) clamp(90px,11vw,150px);background-color:var(--green);background-image:var(--linen);color:var(--cream)}
.w-ledger .w-intro{position:relative}
.w-ledger .w-h2{color:var(--cream)}
.w-ledger .w-h2 em{color:var(--tan)}
.w-ledger .w-intro>p:not(.w-label){color:rgba(244,240,231,.82)}

/* notched frame */
.w-word{padding:clamp(90px,11vw,150px) var(--gut)}
.notch{--nb:var(--cream);--nc:rgba(31,61,46,.45);--nr:44px;position:relative;max-width:1180px;margin:0 auto;padding:clamp(56px,7vw,96px) clamp(24px,6vw,96px);border:1px solid var(--nc);overflow:hidden}
.notch__c{position:absolute;width:calc(var(--nr)*2);height:calc(var(--nr)*2);border:1px solid var(--nc);border-radius:50%;background:var(--nb)}
.notch__c--tl{left:calc(var(--nr)*-1 - 1px);top:calc(var(--nr)*-1 - 1px)}
.notch__c--tr{right:calc(var(--nr)*-1 - 1px);top:calc(var(--nr)*-1 - 1px)}
.notch__c--bl{left:calc(var(--nr)*-1 - 1px);bottom:calc(var(--nr)*-1 - 1px)}
.notch__c--br{right:calc(var(--nr)*-1 - 1px);bottom:calc(var(--nr)*-1 - 1px)}
.w-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);border-top:1px solid rgba(31,61,46,.2)}
.w-points>div{display:grid;justify-items:center;align-content:start;gap:14px;padding:clamp(32px,4vw,52px) clamp(16px,3vw,48px);text-align:center}
.w-points>div:nth-child(odd){border-right:1px solid rgba(31,61,46,.2)}
.w-points>div:nth-child(-n+2){border-bottom:1px solid rgba(31,61,46,.2)}
.w-code{font:400 14px/1 var(--arch);letter-spacing:.14em;color:var(--brown)}
.w-points h3{max-width:16ch;font-weight:400;font-size:clamp(26px,2.3vw,34px);line-height:1.08;color:var(--green);text-wrap:balance}
.w-points p{max-width:30em;font-size:16px;line-height:1.6;opacity:.85;text-wrap:pretty}

/* photo */
.w-photo{max-width:1160px;margin:0 auto;padding:0 var(--gut)}
.w-photo__frame{height:clamp(340px,62vh,720px);overflow:hidden;border-radius:14px}
.w-photo__frame picture{height:100%}
.w-photo__frame img{width:100%;height:100%;object-fit:cover}
.w-photo figcaption{display:grid;justify-items:center;gap:6px;margin-top:18px;font:500 11px/1.5 'Oswald','Arial Narrow',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--green);text-align:center}
.w-photo figcaption span{font:italic 400 15px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--brown)}
.w-photo figcaption a{text-decoration:underline;text-underline-offset:3px}

/* client quote block */
.w-quote{display:grid;justify-items:center;gap:30px;margin-top:clamp(90px,11vw,150px);padding:clamp(90px,11vw,150px) var(--gut);background:var(--brown);color:var(--cream);text-align:center}
.w-quote blockquote{max-width:26em;margin:0;font-style:italic;font-size:clamp(24px,2.4vw,36px);line-height:1.3;text-wrap:pretty}
.w-quote__by{display:grid;gap:4px;font:500 12px/1.4 'Oswald','Arial Narrow',sans-serif;letter-spacing:.28em;text-transform:uppercase}
.w-quote__by span{font:italic 400 16px/1 var(--serif);letter-spacing:0;text-transform:none;opacity:.8}

/* CTA */
.w-cta{display:grid;justify-items:center;gap:24px;padding:clamp(100px,12vw,170px) var(--gut);text-align:center}
.w-cta .rule-btn{margin-top:12px}

@media (max-width:860px){
  .w-points{grid-template-columns:minmax(0,1fr)}
  .w-points>div:nth-child(odd){border-right:0}
  .w-points>div:not(:last-child){border-bottom:1px solid rgba(31,61,46,.2)}
  .notch{--nr:28px}
}
/* One shared column grid for every row (subgrid){display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) max-content;column-gap:24px}

/* ================================================================ CONTACT */
.contact{padding-bottom:clamp(90px,11vw,160px)}
.contact__grid{gap:clamp(32px,4vw,64px);align-items:start}
.contact__lead{max-width:440px;margin-top:28px;font-size:clamp(17px,1.2vw,19px);line-height:1.5}

.form{display:grid;gap:26px;padding:clamp(24px,3.5vw,48px);background:var(--sheet);box-shadow:0 30px 60px -30px rgba(29,42,34,.35)}
.form label,.form legend{display:grid;gap:8px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.form fieldset{margin:0;padding:0;border:0;display:grid;gap:12px}
.form legend{padding:0;margin-bottom:12px}
.form input,.form select,.form textarea{width:100%;min-height:48px;padding:14px 16px;border:1px solid rgba(31,61,46,.35);border-radius:2px;background:#fff;color:var(--ink);font:400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none}
.form textarea{resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(31,61,46,.45)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--brown);outline-offset:0;border-color:transparent}
.form__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.form .span-2{grid-column:1 / -1}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pills label{display:block;letter-spacing:.02em;text-transform:none;font-size:15px}
.pills input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.pills span{display:inline-flex;align-items:center;min-height:44px;padding:12px 18px;border:1px solid rgba(31,61,46,.35);border-radius:2px;cursor:pointer;transition:background .2s,color .2s}
.pills input:checked+span{background:var(--green);border-color:var(--green);color:var(--cream)}
.pills input:focus-visible+span{outline:2px solid var(--brown);outline-offset:2px}
.form__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:#3f5347}
.form__error{padding:14px 16px;border-left:3px solid var(--brown);background:#fff;font-size:15px}
.form__error a{text-decoration:underline}
.form.is-sending button{opacity:.6;pointer-events:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.received{display:grid;gap:18px;padding:clamp(32px,4vw,56px);background:var(--green);color:var(--cream)}
.received[hidden]{display:none}
.received:focus{outline:none}
.received__title{font-size:clamp(30px,3vw,44px);line-height:1.05}
.received__title em{color:var(--tan)}
.received p:last-child{opacity:.85}
.received a{text-decoration:underline}

/* ================================================================ RESPONSIVE */
@media (max-width:1100px){
  .contact__grid>*{grid-column:1 / -1}
  .contact__grid>*+*{margin-top:24px}
}
@media (max-width:980px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
}
@media (max-width:760px){
  .grid12{grid-template-columns:minmax(0,1fr)}
  .grid12>*{grid-column:auto;grid-row:auto}
  .page-home .stack>.panel,.page-home .stack>.hero{position:relative}
  .panel{box-shadow:none}
  .plx{transform:none!important}
  .hero__inner{min-height:520px}
  .hero__media img{object-position:47% 50% !important;transform-origin:47% 50%}
  .hero__line{white-space:normal}
  .hero__btns{display:flex}
  .form__two{grid-template-columns:minmax(0,1fr)}
  .alt .alt__media{order:1}
  .alt .alt__text{order:2}
  .cap{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .hero__media img,.marquee__track{animation:none}
  .plx,.hero__media,[data-plx]{transform:none!important}
  .page-home .stack>.panel,.page-home .stack>.hero{position:relative}
}
@media print{
  .nav,.menu,.marquee{display:none}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ================================================================ SHARED ACCENTS
   Carried over from Why Pinault: tracked Oswald labels, linen greens,
   ruled buttons, surveyor's mark, certificate and notched frames. */
.eyebrow{font:500 12px/1.5 'Oswald','Arial Narrow',sans-serif;letter-spacing:.32em}
.hero .eyebrow{font-size:13px}
.showcase__cap .eyebrow{font-size:11px;letter-spacing:.28em}
.section--green,.panel--green,.marquee,.footer,.received{background-image:var(--linen)}
.rule-btn--light{color:var(--cream)}
.rule-btn--light:hover{color:var(--tan)}
.mark-center{display:flex;justify-content:center;color:var(--brown);line-height:0}
.cover .mark-center,.section--green .mark-center{color:var(--tan)}
.cta .rule-btn{margin-top:8px}

/* Home CTA: certificate frame inside the photo wash */
.cover__body .cert{gap:22px;padding:clamp(40px,5vw,64px) clamp(24px,5vw,72px);border-color:rgba(244,240,231,.5);outline-color:rgba(244,240,231,.22);width:min(100%,760px)}
.cover__body .cert::before,.cover__body .cert::after{background:#3a4a3f;border-color:rgba(244,240,231,.7)}
.showcase .rule-btn{flex-shrink:0}

/* Residential: commercial teaser in a notched frame */
.teaser.notch{display:grid;grid-template-columns:minmax(0,1fr);justify-content:center;justify-items:center;gap:22px;margin-top:32px;text-align:center;--nb:var(--cream)}
.teaser.notch .teaser__text{max-width:30em}

/* Contact: paper grain on the form card */
.form{background-color:#f8f2e4;background-image:var(--grain)}

/* ================================================================ CREDITS */
.credits-hero{padding-bottom:clamp(40px,5vw,70px)}
.credits{display:grid;gap:0;max-width:760px;margin:0 auto;padding:0 var(--gut)}
.credits__item{display:grid;justify-items:center;gap:18px;padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line);text-align:center}
.credits__item .w-h2{font-size:clamp(34px,3.6vw,54px)}
.credits__item p:not(.w-label){max-width:36em;font-size:17px;line-height:1.65;text-wrap:pretty}
.credits__item a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(138,90,60,.5)}

/* ================================================================ ARCHIVE + LIGHTBOX */
.archive-grid{columns:3 300px;column-gap:18px}
.archive-grid__item{break-inside:avoid;margin:0 0 18px}
.archive-grid__item a{display:block;overflow:hidden;background:#e6dfd0;cursor:zoom-in}
.archive-grid__item img{width:100%;height:auto;transition:transform 1.1s var(--ease),filter .6s}
.archive-grid__item a:hover img{transform:scale(1.03)}
.archive-grid__item figcaption{margin-top:8px;font:500 11px/1.5 'Oswald','Arial Narrow',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(20,30,24,.94);color:var(--cream)}
.lightbox[open]{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center}
.lightbox::backdrop{background:transparent}
.lightbox__fig{display:grid;justify-items:center;gap:12px;margin:0;padding:48px 0}
.lightbox__fig img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__fig figcaption{font:500 11px/1.5 'Oswald','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,240,231,.8);text-align:center}
.lightbox__nav,.lightbox__close{width:48px;height:48px;border:1px solid rgba(244,240,231,.35);border-radius:50%;background:transparent;color:var(--cream);font-size:20px;cursor:pointer;justify-self:center}
.lightbox__nav:hover,.lightbox__close:hover{border-color:var(--tan);color:var(--tan)}
.lightbox__close{position:absolute;top:16px;right:16px;font-size:26px;line-height:1}
@media (max-width:600px){
  .lightbox[open]{grid-template-columns:minmax(0,1fr)}
  .lightbox__nav{position:absolute;bottom:18px}
  .lightbox__nav--prev{left:calc(50% - 60px)}
  .lightbox__nav--next{right:calc(50% - 60px)}
}

/* ================================================================ PROJECTS */
.alt__link{display:block}
.alt__link .frame img{transition:transform 1.2s var(--ease)}
.alt__link:hover .frame img{transform:scale(1.03)}
.cap a.cap__n{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:500;font-size:12px;letter-spacing:.2em;white-space:nowrap}
.proj-section{padding-top:0}
.proj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) 24px;margin-top:clamp(48px,6vw,80px)}
.proj-card{display:grid;gap:12px;color:var(--green)}
.proj-card:hover{color:var(--green)}
.proj-card__img{aspect-ratio:4/3;overflow:hidden;background:#e6dfd0}
.proj-card__img picture{height:100%}
.proj-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.proj-card:hover .proj-card__img img{transform:scale(1.04)}
.proj-card__meta{display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line);font:500 11px/1.4 'Oswald','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase}
.proj-card__cat{color:var(--brown)}
.proj-card__count{color:#4f6356}
.proj-card__title{font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.1}
.proj-card:hover .proj-card__title{color:var(--brown)}
.proj-hero{position:relative;padding:clamp(40px,5vw,70px) var(--gut) clamp(40px,5vw,64px);text-align:center}
.proj-hero .w-hero__inner{display:grid;justify-items:center;gap:22px}
.proj-hero__title{font-size:clamp(44px,6vw,96px);max-width:16ch}
.proj-crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;line-height:1.5;margin-bottom:clamp(36px,4vw,56px);font:500 11px/1 'Oswald','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#4f6356}
.proj-crumbs a{color:var(--brown)}
.proj-gallery{max-width:1360px;margin:0 auto;padding:clamp(70px,9vw,120px) var(--gut) 0}
.proj-gallery__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.proj-gallery__note{font-size:15px;font-style:italic;color:rgba(29,42,34,.7)}
.proj-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;max-width:1360px;margin:clamp(60px,8vw,110px) auto 0;padding:32px var(--gut);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proj-pager__link{display:grid;gap:8px;color:var(--green)}
.proj-pager__link--next{text-align:right}
.proj-pager__title{font-size:clamp(20px,1.8vw,28px);line-height:1.1}
.proj-pager__link:hover .proj-pager__title{color:var(--brown)}
@media (max-width:1000px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .proj-grid{grid-template-columns:minmax(0,1fr)}
  .proj-pager{grid-template-columns:1fr 1fr}
  .proj-pager .rule-btn{grid-column:1 / -1;grid-row:2;justify-self:center}
}

.proj-grid--large{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(24px,3vw,40px)}
.proj-grid--large .proj-card__img{aspect-ratio:3/2}
.proj-grid--large .proj-card__title{font-size:clamp(28px,2.6vw,40px)}
@media (max-width:760px){.proj-grid--large{grid-template-columns:minmax(0,1fr)}}

.w-h2--wide{max-width:24ch}
.w-ledger .w-intro{max-width:880px}

.contact__photo{margin:0;align-self:start}
.contact__info .contact__lead{margin-top:0}
.contact__grid{row-gap:clamp(24px,3vw,40px)}
.contact__photo picture,.contact__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.contact__photo figcaption{margin-top:12px;font:500 11px/1.5 'Oswald','Arial Narrow',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--green)}
.contact__card{position:relative;display:grid;gap:0;padding:clamp(32px,4.5vw,64px);background:var(--sheet);border:3px double rgba(138,90,60,.45);outline:1px solid rgba(138,90,60,.2);outline-offset:8px;box-shadow:0 30px 60px -30px rgba(29,42,34,.35)}
.contact__card .w-label{color:var(--brown)}
.contact__call{display:grid;gap:14px;padding-bottom:clamp(28px,3vw,40px)}
.contact__phone{font:400 clamp(40px,5.2vw,72px)/1 var(--serif);letter-spacing:-.01em;color:var(--green);white-space:nowrap;transition:color .3s}
.contact__phone:hover,.contact__email:hover{color:var(--brown)}
.contact__row{display:grid;gap:10px;padding:clamp(22px,2.5vw,32px) 0;border-top:1px solid var(--line)}
.contact__email{font-size:clamp(22px,2vw,28px);color:var(--green);overflow-wrap:anywhere;transition:color .3s}
.contact__visit address{font-style:normal;font-size:20px;line-height:1.45}
.contact__note{font-size:15px;color:#3f5347}
.contact__actions{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.contact__actions .btn{grid-column:1 / -1}
.contact__actions .rule-btn{text-align:center;padding-inline:8px}
@media (max-width:1100px){.contact__grid>*{grid-row:auto}.contact__head{order:1}.contact__card{order:2}.contact__info{order:3}.contact__photo{order:4}}
@media (max-width:560px){.contact__card{outline-offset:5px;padding:32px 22px}.contact__email{font-size:clamp(17px,5.4vw,22px)}}

/* Commercial: centered H1, office photo left, headline + intro right */
.com-hero{padding-bottom:0}
.com-hero__h1{text-align:center;margin:0 auto clamp(36px,5vw,64px)}
.com-hero__grid{align-items:center;row-gap:32px}
.com-hero__photo{position:relative;margin:0;overflow:hidden}
.com-hero__photo picture,.com-hero__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.com-hero__photo .banner__cap{padding-top:clamp(70px,9vw,120px);background:linear-gradient(180deg,rgba(20,30,24,0) 0%,rgba(20,30,24,.55) 45%,rgba(20,30,24,.9) 100%);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.com-hero__text .display{font-size:clamp(44px,5vw,88px)}
.com-hero__text .lead{margin-top:24px}

.com-services{margin-top:clamp(70px,9vw,120px);padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.com-services__intro{margin-bottom:clamp(48px,6vw,88px)}
.com-services__intro .w-mark{margin-top:calc(-1 * clamp(56px,7vw,96px) - 22px);padding:0 18px;background:var(--cream)}