/* Layout: dark header and hero, off-white mission, dark services list, off-white about and approach, dark contact. Change tokens to restyle every client site. */
:root{--ink:#202020;--black:#000;--paper:#f7f5f1;--paper-2:#eeedeb;--muted:#4b4a47;--line:#d8d4cc;--on-dark:#fff;--on-dark-2:#d9d7d2;--brown:#3a2418;
--font:"Montserrat","Helvetica Neue",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper)}
img{max-width:100%;display:block}a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #9a8f7c;outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.narrow{max-width:820px}
h1,h2,h3{line-height:1.2;text-wrap:balance;margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--black)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--black);color:var(--on-dark);transition:box-shadow .3s ease}
.top.scrolled{box-shadow:0 1px 0 #2e2d2b}
[id]{scroll-margin-top:92px}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;transition:padding .3s ease}
.top.scrolled .top-in{padding-block:10px}
.brand{display:block}.brand img{height:64px;width:auto;max-width:220px;object-fit:contain;transition:height .3s ease}
.top.scrolled .brand img{height:44px}
.top nav{display:flex;gap:32px;flex-wrap:wrap}
.top nav a{position:relative;text-decoration:none;font-weight:500;font-size:15px;padding-block:4px}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.top nav a:hover::after,.top nav a:focus-visible::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;padding:11px 9px;background:none;border:0;color:inherit;cursor:pointer}
.menu-btn span{display:block;height:2px;background:currentColor;margin:5px 0;transition:transform .25s ease,opacity .2s ease}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero{position:relative;overflow:hidden;isolation:isolate;background:#0d0d0d;color:var(--on-dark);min-height:clamp(560px,calc(100vh - 100px),800px);display:grid;align-items:center;padding-block:72px}
.hero::before{content:"";position:absolute;z-index:-1;top:50%;right:clamp(-120px,-4vw,-20px);width:clamp(560px,56vw,820px);aspect-ratio:1/1;transform:translateY(-50%);background:radial-gradient(circle,rgba(185,178,165,.2) 0,rgba(185,178,165,.06) 38%,rgba(13,13,13,0) 68%)}
.hero>.wrap{position:relative;z-index:2;width:100%}
.hero-copy{max-width:640px}
.hero .eyebrow{color:#c9c6bf}
.hero h1{font-size:clamp(38px,5.6vw,72px);font-weight:800;line-height:1.08;letter-spacing:0;margin-top:14px;overflow-wrap:anywhere}
.hero .sub{margin:20px 0 0;max-width:46ch;font-size:clamp(18px,1.7vw,21px);font-weight:500;line-height:1.55;color:var(--on-dark-2)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{display:inline-block;padding:14px 26px;border:1px solid #c9c6bf;border-radius:6px;font-size:15px;font-weight:700;text-decoration:none;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.btn.solid{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn:hover{transform:translateY(-2px);background:#fff;border-color:#fff;color:var(--ink)}
/* Hero geometry: three wireframe hexagonal prisms drawn on a canvas by site.js. */
.geo{position:absolute;right:clamp(-120px,-4vw,-20px);top:50%;width:clamp(560px,56vw,820px);height:auto;aspect-ratio:1/1;transform:translateY(-50%);z-index:0;pointer-events:none}
@keyframes navin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.services{background:var(--ink);color:var(--on-dark);padding-block:clamp(72px,9vw,104px)}
.services{overflow-x:clip}
.svc-list{display:grid;gap:clamp(48px,6vw,72px);margin-top:clamp(40px,5vw,56px)}
.svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,64px);align-items:center}
.svc:nth-of-type(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.svc:nth-of-type(even) .hex{order:2}
/* Hexagon frame: .hex carries the motion and glow, .hex-in draws the charcoal line, the image is cropped inside it. */
.hex{width:100%;max-width:520px;margin-inline:auto;filter:drop-shadow(0 0 0 rgba(217,214,207,0))}
.hex-in{--hexshape:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);aspect-ratio:1.1547/1;padding:4px;background:#3d3b38;clip-path:var(--hexshape);transition:background-color .35s ease}
.hex img{width:100%;height:100%;object-fit:cover;clip-path:var(--hexshape)}
.svc h3{font-size:clamp(23px,2.6vw,29px);font-weight:700}
.svc p{margin:10px 0 0;color:var(--on-dark-2);font-weight:500}
.svc.no-image{grid-template-columns:minmax(0,1fr);max-width:640px}
.svc.no-image:nth-of-type(even){margin-left:auto}
.anim .rise{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.anim .rise:not(.in){opacity:0;transform:translateY(28px)}
/* Scroll motion: rows slide in from their own side and back out when they leave view. */
.anim .svc .copy{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.svc .hex{transition:opacity .7s ease,transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease;will-change:opacity,transform}
.anim .svc:not(.in) .hex{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.anim .svc:not(.in) .hex,.anim .svc:not(.in) .copy{opacity:0}
.anim .svc:nth-of-type(odd):not(.in) .hex,.anim .svc:nth-of-type(even):not(.in) .copy{transform:translateX(-72px)}
.anim .svc:nth-of-type(even):not(.in) .hex,.anim .svc:nth-of-type(odd):not(.in) .copy{transform:translateX(72px)}
.anim .svc.in .copy{transition-delay:.1s}
/* Section system: every section uses the Our Approach pattern, an eyebrow, a large heading, then bordered cards with line accents. */
.mission,.about,.approach{background:var(--paper);padding-block:clamp(72px,9vw,112px)}
.about{padding-bottom:clamp(56px,7vw,80px)}
.divider{background:var(--paper)}.divider .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.divider .wrap::before,.divider .wrap::after{content:"";height:1px;background:var(--line)}
.divider img{width:120px;height:32px}
.svc-rule{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.svc-rule::before,.svc-rule::after{content:"";height:1px;background:rgba(217,214,207,.28)}
.svc-rule svg{width:120px;height:32px;overflow:visible;fill:none;stroke:#d9d6cf;stroke-width:1.2}
.svc-rule polygon{transform-box:fill-box;transform-origin:center}
.anim .svc-rule::before,.anim .svc-rule::after{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.anim .svc-rule polygon{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.svc-rule::before{transform-origin:right center}.svc-rule::after{transform-origin:left center}
.anim .svc-rule:not(.in)::before,.anim .svc-rule:not(.in)::after{transform:scaleX(0)}
.anim .svc-rule:not(.in) polygon{opacity:0;transform:scale(.4) rotate(-60deg)}
.anim .svc-rule.in polygon:nth-child(1),.anim .svc-rule.in polygon:nth-child(3){transition-delay:.15s}
.anim .svc-rule.in::before,.anim .svc-rule.in::after{transition-delay:.25s}
.approach{padding-top:clamp(56px,7vw,80px)}
.eyebrow{margin:0;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.services h2,.about h2,.approach h2,.foot h2{font-size:clamp(32px,5vw,50px);font-weight:800;margin-top:6px}
.split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,80px);align-items:center}
.mission h2{font-size:clamp(27px,3.7vw,42px);font-weight:800;line-height:1.25;margin-top:10px;text-wrap:pretty}
/* Mission art: a honeycomb that assembles from the center as the section appears, then a slow wave of charcoal ripples outward. */
.accent-lg{width:clamp(230px,29vw,350px);height:auto;overflow:visible}
.comb .cell{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s ease;transition-delay:var(--in)}
.comb .w{fill:var(--ink);fill-opacity:0;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round;animation:wave 9s ease-in-out infinite;animation-delay:var(--w);pointer-events:none}
/* Rollover layer sits above the wave, so a cell changes color at any point in the loop. */
.comb .h{fill:url(#silver);stroke:#202020;stroke-width:1;opacity:0;pointer-events:all;cursor:default;transition:opacity 1.1s ease,filter 1.1s ease}
.comb .h:hover{opacity:1;filter:drop-shadow(0 0 7px rgba(32,32,32,.55));transition:opacity .12s ease,filter .12s ease}
.anim .rise:not(.in) .comb .cell{opacity:0;transform:scale(.4)}
@keyframes wave{0%,26%,100%{fill-opacity:0}11%{fill-opacity:.82}}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px;grid-auto-rows:1fr}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{border:1px solid var(--line);border-radius:6px;padding:32px;display:grid;grid-template-rows:auto minmax(3em,auto) 1fr;align-content:start}
.card{transition:transform .28s ease,border-color .28s ease,background-color .28s ease}
.card img{width:80px;height:80px;margin-bottom:20px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.card:hover{transform:translateY(-5px);border-color:#8d8678}.card:hover img{transform:rotate(30deg) scale(1.06)}.foot .card:hover{border-color:#b9b2a5}.foot .card:hover img{transform:scale(1.06)}
.hex-in{overflow:hidden}.hex img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.svc.in .hex:hover,.svc .hex:hover{transform:scale(1.05);filter:drop-shadow(0 0 14px rgba(217,214,207,.5))}.hex:hover .hex-in{background:#c9c6bf}.hex:hover img{transform:scale(1.05)}}
.card h3{font-size:23px;font-weight:700;align-self:end}.card p{margin:12px 0 0;color:var(--muted)}
.cards.two .card{grid-template-rows:auto auto 1fr}
.foot{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--on-dark);padding-block:clamp(72px,9vw,104px)}
.foot::before{content:"";position:absolute;z-index:-1;right:-180px;top:50%;width:min(900px,120vw);aspect-ratio:1/1;transform:translateY(-50%);background:url("assets/footer-geometry.svg") center/contain no-repeat;opacity:.42}
.foot .card{background:rgba(32,32,32,.72)}
.foot .card{border-color:#4a4845;grid-template-rows:auto auto 1fr}
.foot .card p{color:var(--on-dark-2);overflow-wrap:anywhere}
.foot a{text-underline-offset:3px;transition:color .2s ease}.foot a:hover{color:#fff;text-decoration-thickness:2px}
.foot .links{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:36px;font-size:15px;color:var(--on-dark-2)}
.foot .links .co{font-weight:700;color:var(--on-dark);margin-right:auto}
.legal{padding-block:clamp(48px,7vw,80px)}.legal h1{font-size:clamp(32px,5vw,46px);font-weight:800;margin-bottom:24px}
.legal h2{font-size:24px;font-weight:700;margin-top:40px}.legal h3{font-size:19px;font-weight:700;margin-top:26px}
.legal p,.legal li{font-size:16px;color:#33322f}.legal a{text-underline-offset:3px;overflow-wrap:anywhere}
.preview{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:20;width:min(340px,calc(100vw - 32px));background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;font-size:14px;line-height:1.4;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.preview summary{cursor:pointer;padding:12px 14px;font-weight:700}
.preview .body{padding:0 14px 14px;max-height:min(62vh,520px);overflow:auto;display:grid;gap:10px}
.preview label{display:grid;gap:3px;font-weight:600}.preview input[type=text]{font:inherit;font-weight:400;padding:7px 8px;border:1px solid var(--line);border-radius:4px;width:100%}
.preview fieldset{border:0;padding:0;margin:0;display:grid;gap:5px}.preview legend{font-weight:700;padding:0;margin-bottom:4px}
.preview .chk{display:flex;gap:8px;align-items:center;font-weight:500}
@media (max-width:820px){.menu-btn{display:block}.top-in{flex-wrap:wrap;gap:0}.top nav{display:none;width:100%;flex-direction:column;gap:0;padding-top:8px}.top nav.open{display:flex}.top nav a{padding-block:13px;font-size:17px;border-top:1px solid #2e2d2b}.top nav a{transition:padding-left .25s ease}.top nav a:hover,.top nav a:active{padding-left:10px}.top nav a::after{bottom:0;left:0;right:0}.top nav a:active::after{transform:scaleX(1)}.top nav.open a{animation:navin .36s cubic-bezier(.2,.7,.2,1) both}.top nav.open a:nth-child(2){animation-delay:.06s}.top nav.open a:nth-child(3){animation-delay:.12s}.top.scrolled .brand img,.brand img{height:44px}.geo,.hero::before{right:-34vw;width:640px;top:30%}.hero{align-items:end;min-height:620px;padding-block:72px 56px}.hero .sub{color:#e6e3dd}.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,13,13,0) 22%,rgba(13,13,13,.86) 62%)}.svc,.svc:nth-of-type(even){grid-template-columns:minmax(0,1fr);gap:20px}.svc:nth-of-type(even) .hex{order:0}.hex{max-width:440px}.anim .svc:not(.in) .hex,.anim .svc:not(.in) .copy{transform:translateY(32px)!important}.svc.no-image:nth-of-type(even){margin-left:0}.split{grid-template-columns:minmax(0,1fr)}.accent-lg{order:-1;width:min(82vw,320px);justify-self:center;margin-bottom:8px}.cards,.cards.two{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.card{padding:24px;grid-template-rows:none}.card h3{align-self:auto}}
@media (prefers-reduced-motion:reduce){.card,.card img,.hex img,.top-in,.brand img{transition:none}.card:hover{transform:none}.card:hover img,.hex:hover img,.svc .hex:hover{transform:none}html{scroll-behavior:auto}.anim .svc .hex,.anim .svc .copy{transition:none;opacity:1!important;transform:none!important}.anim .rise{transition:none;opacity:1!important;transform:none!important}.comb .w{animation:none}.comb .cell{transition:none}.comb .mid .w{fill-opacity:.82}.top nav.open a{animation:none}.btn{transition:none}}