/* ============================================================ DIRECTION D — MATERIAL Dark, tactile, hard-edged. Photographs run full width and bleed off the page; the palette is walnut, oak, glazed tile and concrete, taken off the job. Tone flips dark → concrete → dark so no two sections sit at the same brightness. Type: Host Grotesk + Instrument Sans. Nothing over 44px. ============================================================ */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} :root{ --night:#171614; --night-2:#1F1E1B; --night-3:#2B2926; --con:#E7E4DD; --con-2:#D3CFC6; --con-3:#F1EFEA; --walnut:#6B4630; --oak:#C89152; --oak-2:#B57F42; --tile:#3A6B5E; --tile-2:#2E574C; --paper:#F2F0EB; --dim:rgba(242,240,235,.64); --dim-2:rgba(242,240,235,.42); --hair:rgba(242,240,235,.16); --ink:#1C1B19; --ink-2:#57544E; --ink-3:#8B8880; --hair-d:rgba(28,27,25,.16); --ease:cubic-bezier(.22,.88,.28,1); /* every image hover on the site: the photograph comes up out of the dark rather than swelling. Tune the whole site from this one line. */ --im-hover:brightness(1.06) saturate(1.06) contrast(1.02); --shell:min(1280px,100% - 8vw); --bleed:width:100vw; } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--night);color:var(--paper); font-family:'Instrument Sans',sans-serif;font-size:16.5px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-family:'Host Grotesk',sans-serif;font-weight:700;letter-spacing:-.026em;line-height:1.1} h1{font-size:clamp(29px,3.2vw,44px);line-height:1.05} h2{font-size:clamp(22px,2.2vw,31px)} h3{font-size:clamp(16.5px,1.22vw,18.5px);font-weight:600;letter-spacing:-.012em} p{margin:0 0 1em} .shell{width:var(--shell);margin-inline:auto} .full{width:100vw;margin-left:calc(50% - 50vw)} /* solid chips — no letterspaced labels anywhere in this direction */ .chip{display:inline-flex;align-items:center;gap:9px;background:var(--night-3);color:var(--paper);padding:7px 12px;border-radius:3px;font-family:'Host Grotesk',sans-serif;font-size:13px;font-weight:600} .chip .sq{width:11px;height:11px;flex:none;border-radius:2px} .chip.on-con{background:var(--con-2);color:var(--ink)} .chip.oak{background:var(--oak);color:#241708} .chip.tile{background:var(--tile);color:#EAF2EF} /* buttons — milled square shoulders */ .b{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer; font-family:'Host Grotesk',sans-serif;font-size:15.5px;font-weight:600;border-radius:3px;padding:12px 20px; transition:background-color .34s var(--ease),color .34s var(--ease),box-shadow .34s var(--ease),transform .34s var(--ease)} .b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)} .b:hover svg{transform:translateX(3px)} .b:active{transform:scale(.982)} .b-oak{background:var(--oak);color:#241708} .b-oak:hover{background:var(--oak-2)} .b-ghost{box-shadow:inset 0 0 0 1.4px var(--hair);color:var(--paper)} .b-ghost:hover{box-shadow:inset 0 0 0 1.4px var(--paper);background:rgba(242,240,235,.06)} .b-ink{background:var(--ink);color:var(--paper)} .b-ink:hover{background:var(--tile)} .b-ink-line{box-shadow:inset 0 0 0 1.4px var(--hair-d);color:var(--ink)} .b-ink-line:hover{box-shadow:inset 0 0 0 1.4px var(--ink);background:rgba(28,27,25,.05)} /* one notch up from the default .b — same shape, more presence in body copy */ .b-lg{font-size:17.5px;padding:14px 28px;border-radius:4px} /* doubled class beats the section-wide `.welcome svg` icon cap further down */ .b.b-lg svg{width:19px;height:19px;stroke-width:2.3} .copy .b{margin-top:clamp(16px,2vw,24px)} .b-paper{background:var(--paper);color:var(--ink)} .b-paper:hover{background:var(--oak);color:#241708} /* ============ NAV ============ */ .nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:16px 0;transition:padding .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)} /* scrim so the white logo stays legible over the pale part of the hero photograph */ .nav::before{content:"";position:absolute;inset:0 0 auto;height:132px;pointer-events:none; background:linear-gradient(to bottom,rgba(20,19,17,.82),rgba(20,19,17,.42) 52%,transparent); transition:opacity .4s var(--ease)} .nav.stuck::before{opacity:0} .nav-row{position:relative} .nav.stuck{padding:10px 0;background:rgba(23,22,20,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair)} .nav-row{display:flex;align-items:center;justify-content:space-between;gap:22px} .nav img{width:126px;height:auto} .nav-links{display:flex;align-items:center;gap:24px} .nav-links a{font-family:'Host Grotesk',sans-serif;font-size:14.5px;font-weight:500;color:var(--dim);transition:color .3s var(--ease)} .nav-links a:hover{color:var(--oak)} .nav-end{display:flex;align-items:center;gap:13px} .nav-tel{font-family:'Host Grotesk',sans-serif;font-weight:600;font-size:15px} .nav-tel:hover{color:var(--oak)} .bars{display:none;width:42px;height:42px;border:0;background:var(--night-3);border-radius:3px;position:relative;cursor:pointer} .bars span{position:absolute;left:12px;width:18px;height:2px;background:var(--paper);transition:transform .45s var(--ease),opacity .3s} .bars span:nth-child(1){top:15px}.bars span:nth-child(2){top:20px}.bars span:nth-child(3){top:25px} .bars.on span:nth-child(1){transform:translateY(5px) rotate(45deg)} .bars.on span:nth-child(2){opacity:0} .bars.on span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} @media(max-width:1020px){.nav-links,.nav-end .b,.nav-tel{display:none}.bars{display:block}} .panel{position:fixed;inset:0;z-index:39;background:var(--night);padding:84px 8vw 40px;display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s} .panel.open{opacity:1;visibility:visible} .panel a{font-family:'Host Grotesk',sans-serif;font-size:22px;font-weight:600;padding:13px 0;border-bottom:1px solid var(--hair)} .panel a:hover{color:var(--oak)} .panel .b{margin-top:22px;align-self:flex-start} /* ============ HERO — photograph bleeds off the left edge ============ */ .hero{display:grid;grid-template-columns:46vw minmax(0,1fr);min-height:100dvh;align-items:stretch} .hero-im{position:relative;overflow:hidden;background:var(--night-3)} .hero-im img{width:100%;height:100%;object-fit:cover;object-position:center 32%;transform:scale(1.06);animation:settle 2.4s var(--ease) forwards} @keyframes settle{to{transform:scale(1)}} .hero-im .plate{position:absolute;left:0;bottom:0;background:var(--night);padding:12px 18px;font-family:'Host Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--paper)} .hero-im .plate i{color:var(--oak);font-style:normal} .hero-txt{display:flex;flex-direction:column;justify-content:center;padding:120px clamp(28px,5vw,84px) 56px clamp(26px,3.6vw,62px)} .hero h1{margin:16px 0 14px;max-width:20ch} .hero .deck{color:var(--dim);max-width:44ch;font-size:17px} .hero .deck b{font-weight:600;color:var(--paper)} .hero .acts{display:flex;flex-wrap:wrap;gap:11px;margin:22px 0 30px} .hero .sig{margin-top:26px;font-size:15px;color:var(--dim-2)} /* material rail — hard-edged squares, no rounded pills */ .rail{display:flex;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .rail>div{flex:1;padding:14px 12px;border-right:1px solid var(--hair)} .rail>div:first-child{padding-left:0} .rail>div:last-child{border-right:0} .rail .sq{display:block;width:100%;height:26px;margin-bottom:9px} .rail .nm{font-family:'Host Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--dim);line-height:1.25} @media(max-width:980px){ .hero{grid-template-columns:1fr;min-height:0} .hero-im{aspect-ratio:4/3;order:1} .hero-txt{order:2;padding:34px 0 40px;width:var(--shell);margin-inline:auto} .nav{background:rgba(23,22,20,.94)} } /* fact bar */ .facts{background:var(--night-2);border-bottom:1px solid var(--hair)} .facts-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .facts-in>div{padding:18px 20px 18px 0;border-right:1px solid var(--hair)} .facts-in>div+div{padding-left:20px} .facts-in>div:last-child{border-right:0} .facts .v{font-family:'Host Grotesk',sans-serif;font-weight:600;font-size:16px} .facts .k{font-size:14px;color:var(--dim-2);margin-top:2px} @media(max-width:760px){.facts-in{grid-template-columns:1fr}.facts-in>div{border-right:0;border-bottom:1px solid var(--hair);padding:14px 0}.facts-in>div+div{padding-left:0}.facts-in>div:last-child{border-bottom:0}} /* ============ MATERIALS — full-bleed filmstrip ============ */ .mat{padding:clamp(52px,6vw,88px) 0 0} .mat-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,3vw,52px);align-items:end;margin-bottom:28px} .mat-head p{margin:0;color:var(--dim)} .strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair)} .strip figure{margin:0;background:var(--night);position:relative;overflow:hidden} .strip img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:filter .6s var(--ease);filter:saturate(.92)} .strip figure:hover img{filter:var(--im-hover)} .strip figcaption{padding:16px 18px 20px;position:relative} .strip figcaption .bar{position:absolute;left:0;top:0;height:3px;width:100%} .strip h3{margin-bottom:5px} .strip p{margin:0;font-size:14.4px;color:var(--dim-2)} @media(max-width:980px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.mat-head{grid-template-columns:1fr;gap:14px}} @media(max-width:520px){.strip{grid-template-columns:1fr}.strip img{aspect-ratio:16/10}} /* ============ WELCOME — tone flips to concrete ============ */ .wel{background:var(--con);color:var(--ink);padding:clamp(52px,6vw,88px) 0} .wel-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4vw,64px);align-items:start} .wel h2{max-width:20ch} .wel .sub{font-family:'Host Grotesk',sans-serif;font-weight:600;font-size:clamp(17px,1.5vw,20px);color:var(--tile);margin:12px 0 14px} .wel p{color:var(--ink-2);max-width:52ch} .stds{display:grid;gap:0;align-self:center;border-top:1px solid var(--hair-d)} .std{padding:22px 0 22px 22px;border-bottom:1px solid var(--hair-d);position:relative} .std .bar{position:absolute;left:0;top:22px;bottom:22px;width:4px} .std h3{margin-bottom:5px} .std p{margin:0;font-size:15px;color:var(--ink-2)} @media(max-width:920px){.wel-in{grid-template-columns:1fr;gap:30px}} /* ============ SERVICES — back to dark ============ */ .svc{padding:clamp(52px,6vw,88px) 0} .svc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px} .svc-head span{font-size:14.6px;color:var(--dim-2)} .list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3.4vw,52px);border-top:1px solid var(--hair)} .list .item{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--hair);transition:padding-left .38s var(--ease)} .list .item .mk{width:4px;height:20px;background:var(--night-3);flex:none;transition:height .38s var(--ease),background-color .38s var(--ease)} .list .item .nm{flex:1;font-family:'Host Grotesk',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.012em} .list .item .ar{color:var(--dim-2);opacity:0;transform:translateX(-6px);transition:all .38s var(--ease)} .list .item:hover{padding-left:10px} .list .item:hover .mk{height:28px;background:var(--oak)} .list .item:hover .ar{opacity:1;transform:none;color:var(--oak)} /* specialty — full-bleed tile-green band */ .spec{background:var(--tile);color:#EDF3F1;margin-top:clamp(28px,3.4vw,48px)} .spec-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(22px,3.4vw,56px);align-items:center;padding:clamp(26px,3.2vw,44px) 0} .spec h3{font-size:clamp(19px,1.8vw,24px);font-weight:700;margin:12px 0 8px;color:#fff} .spec p{color:rgba(237,243,241,.82);font-size:15.5px;max-width:44ch;margin-bottom:18px} .spec .im{overflow:hidden} .spec .im img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:filter .6s var(--ease)} .spec .im:hover img{filter:var(--im-hover)} @media(max-width:900px){.list{grid-template-columns:1fr}.spec-in{grid-template-columns:1fr}} /* ============ WORK — one wide bleed, then a spec pairing ============ */ .work{padding:clamp(52px,6vw,88px) 0 clamp(52px,6vw,88px)} .work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px} .hero-work{position:relative;overflow:hidden} .hero-work img{width:100%;aspect-ratio:21/9;object-fit:cover;transition:filter .6s var(--ease)} .hero-work:hover img{filter:var(--im-hover)} .hero-work .plate{position:absolute;left:0;bottom:0;background:var(--night);padding:18px 26px;max-width:min(520px,86%)} .hero-work .plate .loc{font-family:'Host Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--oak);margin-bottom:6px} .hero-work .plate h3{font-size:clamp(17px,1.5vw,20px);margin-bottom:6px} .hero-work .plate p{margin:0;font-size:14.6px;color:var(--dim-2)} .made{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3.4vw,56px);margin-top:clamp(26px,3.4vw,48px);align-items:start} .made .rows{border-top:1px solid var(--hair)} .made .rows .h{font-family:'Host Grotesk',sans-serif;font-weight:600;font-size:15px;padding:14px 0 10px} .made .row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--hair);font-size:15px;color:var(--dim)} .made .row .sq{width:14px;height:14px;flex:none} .made .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair)} .made .pair a{background:var(--night);display:block} .made .pair .im{overflow:hidden} .made .pair img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:filter .6s var(--ease)} .made .pair a:hover img{filter:var(--im-hover)} .made .pair .cap{padding:14px 16px 18px} .made .pair .loc{font-family:'Host Grotesk',sans-serif;font-size:12.8px;font-weight:600;color:var(--oak)} .made .pair h3{margin-top:5px} /* the plate leaves the image and becomes ordinary flow content here, so it needs the page gutter back — .full is edge to edge and would otherwise sit the text at x:0 */ @media(max-width:900px){.made{grid-template-columns:1fr}.pair{grid-template-columns:1fr}.hero-work img{aspect-ratio:16/10}.hero-work .plate{position:static;max-width:none;padding:16px 4vw 0}} /* ============ ADU — concrete again, photograph on the left ============ */ .adu{background:var(--con);color:var(--ink);padding:clamp(52px,6vw,88px) 0} .adu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:center} .adu .im{overflow:hidden} .adu .im img{width:100%;aspect-ratio:4/3.2;object-fit:cover;transition:filter .6s var(--ease)} .adu .im:hover img{filter:var(--im-hover)} .adu .cap{margin-top:10px;font-size:14px;color:var(--ink-3)} .adu h2{margin:14px 0 12px;max-width:19ch} .adu p{color:var(--ink-2);max-width:46ch} .why{margin-top:clamp(40px,4.8vw,70px);border-top:1px solid var(--hair-d);padding-top:clamp(26px,3.2vw,44px)} .why-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,52px);align-items:end;margin-bottom:26px} .why-top p{margin:0;color:var(--ink-2)} .four{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:1px;background:var(--hair-d)} .f-photo{grid-row:span 2;margin:0;position:relative;overflow:hidden;background:var(--con-2)} .f-photo img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block;transition:filter .6s var(--ease)} .f-photo:hover img{filter:var(--im-hover)} .f-photo figcaption{position:absolute;left:0;bottom:0;background:var(--night);color:var(--paper); padding:9px 14px;font-family:'Host Grotesk',sans-serif;font-size:12.5px;font-weight:600} .f{position:relative;overflow:hidden;background:var(--con-3);padding:clamp(20px,2.4vw,30px)} /* hover — the same oak rule the cards use, and the numeral warms. Flashing the cell to white read as a mis-click on a concrete field this pale. */ .f::after{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--oak);transform:scaleX(0);transform-origin:left center; transition:transform .55s var(--ease)} .f:hover::after{transform:scaleX(1)} .f .n{position:absolute;right:10px;top:-6px;font-family:'Host Grotesk',sans-serif;font-weight:800; font-size:clamp(52px,5vw,72px);line-height:1;color:rgba(92,60,42,.13);pointer-events:none; transition:color .45s var(--ease)} .f:hover .n{color:rgba(200,145,82,.38)} @media(prefers-reduced-motion:reduce){.f::after{transition:none}} .f h3{position:relative;margin-bottom:6px} .f p{position:relative;margin:0;font-size:14.8px;color:var(--ink-2)} @media(max-width:960px){.four{grid-template-columns:repeat(2,minmax(0,1fr))}.f-photo{grid-row:auto;grid-column:span 2}.f-photo img{min-height:220px}} @media(max-width:860px){.adu-grid{grid-template-columns:1fr;gap:28px}.why-top{grid-template-columns:1fr;gap:14px}} @media(max-width:540px){.four{grid-template-columns:1fr}.f-photo{grid-column:span 1}} /* ============ TESTIMONIAL ============ */ .said{padding:clamp(52px,6vw,88px) 0;background:var(--night-2)} .said-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;margin-bottom:clamp(24px,3vw,38px)} .said-head h2{margin:0} .said-note{font-family:'Host Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--dim-2)} .said-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair)} .rev{margin:0;background:var(--night);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column; justify-content:space-between;gap:22px;transition:background-color .4s var(--ease)} .rev:hover{background:var(--night-3)} .rev::before{content:"";display:block;width:26px;height:3px;background:var(--oak)} .rev p{margin:0;font-family:'Host Grotesk',sans-serif;font-weight:500;font-size:clamp(16px,1.35vw,18.5px); line-height:1.46;letter-spacing:-.01em;color:#fff} .rev footer{display:flex;flex-direction:column;gap:3px} .rev footer b{font-family:'Host Grotesk',sans-serif;font-size:14.5px;font-weight:600;color:var(--oak)} .rev footer span{font-size:13.5px;color:var(--dim-2)} @media(max-width:900px){.said-grid{grid-template-columns:1fr}} /* ============ CTA — oak ============ */ .cta{background:var(--oak);color:#241708;padding:clamp(44px,5.2vw,74px) 0} .cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px} .cta h2{color:#1D1204;max-width:18ch} .cta p{margin:10px 0 0;color:rgba(36,23,8,.76);max-width:40ch} .cta .acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .cta .tel{font-family:'Host Grotesk',sans-serif;font-weight:700;font-size:19px} .cta .tel:hover{color:#fff} .cta .b-ink{background:#241708;color:var(--oak)} .cta .b-ink:hover{background:#0F0A03;color:#fff} /* ============ FOOTER ============ */ .ft{background:var(--night-2);color:var(--dim);padding:clamp(42px,5vw,68px) 0 24px;border-top:1px solid var(--hair)} .ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(20px,3vw,46px)} .ft h4{font-family:'Host Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:var(--paper);margin:0 0 11px} /* the mark carries the company name in the first column, so no heading there */ .ft-logo{display:block;margin:0 0 14px} .ft-logo img{display:block;width:clamp(148px,13vw,188px);height:auto} .ft p{margin:0;font-size:15px;line-height:1.75} .ft .m{display:flex;flex-direction:column;gap:6px} .ft .m a{font-size:15px;transition:color .3s var(--ease)} .ft .m a:hover{color:var(--oak)} .ft .base{margin-top:32px;padding-top:18px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--dim-2)} @media(max-width:900px){.ft-cols{grid-template-columns:1fr 1fr;gap:26px}} /* two ragged columns on a phone: the six-link menu sets the first row's height and leaves a hole under the address. one column keeps the rhythm even. */ @media(max-width:560px){.ft-cols{grid-template-columns:1fr;gap:30px}.ft-cols>div>h4:first-child{margin-top:0}} /* reveals */ .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero-im img{animation:none;transform:none}html{scroll-behavior:auto}} /* review ribbon */ .rib{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#0F0E0D;color:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 5vw;font-size:12.5px} .rib b{color:var(--oak)} .rib a{text-decoration:underline;text-underline-offset:3px} .rib a:hover{color:var(--oak)} body{padding-bottom:42px} /* ============================================================ DIRECTION D — INNER PAGES Everything below styles the shared page furniture the site already uses (masthead, prose, galleries, cards, forms) in Material's language: dark base, concrete for long reading, hard 3px shoulders, oak accents, no section numbering. ============================================================ */ .wrap{width:var(--shell);margin-inline:auto} body.inner{padding-top:0} section{position:relative} /* ---------- masthead ---------- */ .masthead{background:var(--night);padding:calc(clamp(70px,8vw,110px) + 46px) 0 clamp(34px,4vw,56px);border-bottom:1px solid var(--hair)} .masthead .lead{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:clamp(20px,2.6vw,34px)} .crumbs{font-size:13.5px;color:var(--dim-2)} .crumbs a{color:var(--dim)} .crumbs a:hover{color:var(--oak)} .masthead .tag{display:inline-flex;align-items:center;gap:9px;background:var(--night-3);color:var(--paper); padding:7px 12px;border-radius:3px;font-family:'Host Grotesk',sans-serif;font-size:12.5px;font-weight:600} .masthead .tag::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--oak);flex:none} .masthead h1{font-size:clamp(30px,3.4vw,46px);line-height:1.05;max-width:22ch;color:#fff} .masthead h1 em{font-style:normal;color:var(--oak)} .masthead .deck{margin:16px 0 0;color:var(--dim);font-size:17px;max-width:62ch} .masthead .deck b{color:var(--paper);font-weight:600} /* ---------- generic content sections ---------- */ .welcome,.trust,.services,.work,.blog,.contact,.proj,.article,.reasons{padding:clamp(48px,5.6vw,84px) 0} .welcome,.services,.blog{background:var(--night)} .trust,.work,.proj{background:var(--night-2)} .sec-head{display:none} /* Monolith's §01 rail has no place here */ .frameline,.tick,.qmark{display:none} h2{color:#fff;margin:0 0 14px} h2 em{font-style:normal;color:var(--oak)} .sub,.lede{color:var(--dim);font-size:17px} p{color:var(--dim)} .grid,.copy{max-width:none} .mono{font-family:'Host Grotesk',sans-serif} /* ---------- long-form reading: concrete, not night ---------- */ .article{background:var(--con);color:var(--ink);--measure:816px} /* 816px == the 70ch measure below, in px so the foot can share it */ /* One centred reading column. The measure used to sit hard against the left of an 1100px shell, which left a dead column down the right of every post; the shell now hugs the column and the hero frames it. */ .article .wrap{max-width:min(980px,100% - 8vw)} .article .prose,.article .article-foot{max-width:var(--measure);margin-inline:auto} .article-hero{margin-bottom:clamp(26px,3.2vw,44px);overflow:hidden;border-radius:3px} .article-hero img{width:100%;height:auto;display:block} /* .prose defaults to the night surface (privacy policy et al); the concrete overrides below apply inside .article, which is where blog posts live */ .prose{max-width:70ch;font-size:17.5px;line-height:1.72;color:var(--dim)} .prose h2,.prose h3{color:#fff;margin:1.9em 0 .5em;line-height:1.2} .prose h2{font-size:clamp(21px,2vw,27px)} .prose h3{font-size:clamp(18px,1.5vw,21px)} .prose p{margin:0 0 1.15em;color:var(--dim)} .prose a{color:var(--oak);text-decoration:underline;text-underline-offset:3px} .prose a:hover{color:var(--paper)} .prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.15em} .prose li{margin-bottom:.45em} .prose strong{color:var(--paper);font-weight:600} .prose blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:4px solid var(--oak); font-family:'Host Grotesk',sans-serif;font-weight:500;font-size:19px;color:var(--ink)} .prose img{border-radius:3px;margin:1.5em 0} .prose table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15.5px} .prose th,.prose td{border:1px solid var(--hair-d);padding:10px 12px;text-align:left} .prose th{background:var(--night-3);font-family:'Host Grotesk',sans-serif;font-weight:600;color:#fff} .prose th,.prose td{border-color:var(--hair)} /* ---------- blog index ---------- */ .post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border-block:1px solid var(--hair)} .post{display:block;background:var(--night);padding:clamp(22px,2.4vw,30px);transition:background-color .35s var(--ease)} .post:hover{background:var(--night-3)} .post-meta{display:flex;justify-content:space-between;gap:14px;font-family:'Host Grotesk',sans-serif; font-size:12.5px;font-weight:600;color:var(--dim-2);margin-bottom:12px} .post-meta .cat{color:var(--oak)} .post h3{font-size:clamp(17px,1.5vw,20px);color:#fff;margin:0 0 12px;line-height:1.24} .post .rd{font-family:'Host Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--dim-2)} .post:hover .rd{color:var(--oak)} @media(max-width:820px){.post-grid{grid-template-columns:1fr}} /* ---------- portfolio grid ---------- */ .trip,.pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)} .pair{grid-template-columns:repeat(2,minmax(0,1fr));background:none} .item .frame{position:relative;overflow:hidden;border-radius:3px;background:var(--night-3);aspect-ratio:4/3} .item .frame img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .6s var(--ease)} /* the card hover, spoken the same way everywhere: nothing swells. The card lifts, an oak rule draws along the sill of the photograph, the heading turns oak and the image comes up out of the dark. Scoped to cards that carry a photograph — .list and .reasons reuse .item for rows of text that have hovers of their own. */ .item:has(.frame){transition:transform .5s var(--ease)} .item:has(.frame) h3{transition:color .3s var(--ease)} .item:has(.frame):hover,.item:has(.frame):focus-visible{transform:translateY(-4px)} .item:has(.frame):hover h3,.item:has(.frame):focus-visible h3{color:var(--oak)} .item:hover .frame img,.item:focus-visible .frame img{filter:var(--im-hover)} .item .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--oak);transform:scaleX(0);transform-origin:left center; transition:transform .55s var(--ease)} .item:hover .frame::after,.item:focus-visible .frame::after{transform:scaleX(1)} @media(prefers-reduced-motion:reduce){ .item:has(.frame),.item .frame::after{transition:none} .item:has(.frame):hover,.item:has(.frame):focus-visible{transform:none} } .item .pn{display:block;margin-top:13px;font-family:'Host Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--oak)} .item h3{font-size:clamp(16.5px,1.35vw,19px);color:#fff;margin:6px 0 8px} .pmore{display:inline-flex;align-items:center;gap:7px;font-family:'Host Grotesk',sans-serif; font-size:13.5px;font-weight:600;color:var(--dim);transition:color .3s var(--ease)} .pmore:hover{color:var(--oak)} .feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,3vw,40px); align-items:center;margin-bottom:clamp(24px,3vw,40px)} .feature .frame{overflow:hidden;border-radius:3px} .feature .frame img{width:100%;aspect-ratio:16/10;object-fit:cover} @media(max-width:900px){.trip,.pair,.feature{grid-template-columns:1fr}} /* ---------- reel — one line of projects, drifting ---------- Six builds stacked two rows deep read as a catalogue; run end to end they read as work passing by. Without script it is a plain swipeable line that starts on the shell edge. The script clones the set once and adds .is-live, and from there the track walks left by exactly one set — half its width plus half a gap — so the seam never lands. */ .reel{--rg:clamp(14px,1.8vw,24px);position:relative; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;scrollbar-width:none} .reel::-webkit-scrollbar{display:none} .reel-track{display:flex;gap:var(--rg);width:max-content; padding-inline:max(4vw,calc(50vw - 640px))} .reel .item{flex:0 0 clamp(255px,24vw,370px);scroll-snap-align:start} .reel.is-live{overflow-x:hidden;scroll-snap-type:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .reel.is-live .reel-track{padding-inline:0;animation:reel 66s linear infinite} /* stop the line so a card can be read, or tabbed to */ .reel.is-live:hover .reel-track, .reel.is-live:focus-within .reel-track{animation-play-state:paused} @keyframes reel{from{transform:translate3d(0,0,0)} to{transform:translate3d(calc(-50% - var(--rg) / 2),0,0)}} @media(prefers-reduced-motion:reduce){.reel.is-live .reel-track{animation:none}} /* pointing at a card stops the line, so the card hover above has time to be read — the reel adds nothing of its own. */ /* ---------- project pages ---------- */ .proj-hero{overflow:hidden;border-radius:3px;aspect-ratio:16/9} .proj-hero img{width:100%;height:100%;object-fit:cover;display:block} .proj-facts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 0; margin-bottom:clamp(20px,2.6vw,34px);border-bottom:1px solid var(--hair); font-family:'Host Grotesk',sans-serif;font-size:13.5px;color:var(--dim-2)} .proj-facts b{color:var(--paper);font-weight:600} .proj-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair)} .proj-gallery .cell{background:var(--night-2);overflow:hidden;aspect-ratio:4/3} .proj-gallery .cell img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .6s var(--ease)} .proj-gallery .cell:hover img{filter:var(--im-hover)} .proj .pmore{margin-top:clamp(20px,2.6vw,32px)} @media(max-width:900px){.proj-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.proj-gallery{grid-template-columns:1fr}} /* ---------- service cards ---------- */ .svc-card{border-top:1px solid var(--hair);padding:20px 0} .svc-card .pn{font-family:'Host Grotesk',sans-serif;font-size:16px;font-weight:600;color:#fff} .svc-card p{margin:8px 0 0;font-size:15.5px} .trip .svc-card,.grid .svc-card{border-top:1px solid var(--hair)} /* ---------- cta strip ---------- */ .cta-strip{background:var(--oak);color:#241708;padding:clamp(40px,4.6vw,66px) 0} .cta-strip .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px} .cta-strip h2{color:#1D1204;margin:0;max-width:20ch} .cta-strip h2 em{color:#1D1204;font-style:normal} /* sized to match the other closing CTA button (.cta .acts .b) — this is the last thing on the page and the only ask, so it carries the weight in the type, not in a slab of padding around it */ .btn-solid{display:inline-flex;align-items:center;gap:12px;background:#241708;color:var(--oak); border-radius:4px;padding:14px 28px;font-family:'Host Grotesk',sans-serif;font-size:17.5px;font-weight:700; transition:background-color .35s var(--ease),color .35s var(--ease)} .btn-solid .mono{font-size:19px} .btn-solid:hover{background:#0F0A03;color:#fff} /* ---------- contact ---------- */ /* .wrap holds a hidden .sec-head plus .grid — making .wrap the grid dropped the whole form into one half-width column, which is what squashed the form */ .contact .grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,4vw,60px);align-items:start} .contact .copy h2{margin-bottom:14px} .contact .copy>p{max-width:44ch} .contact dl{margin:clamp(22px,2.6vw,34px) 0 0;display:grid;grid-template-columns:auto 1fr;gap:1px; background:var(--hair);border-block:1px solid var(--hair)} .contact dt{background:var(--night);padding:13px 16px 13px 0;font-family:'Host Grotesk',sans-serif; font-size:12.5px;font-weight:600;color:var(--oak);white-space:nowrap} .contact dd{background:var(--night);margin:0;padding:13px 0 13px 16px;font-size:15.5px;color:var(--paper)} /* the form gets its own concrete panel — the tone flip D uses everywhere else */ .contact form{display:grid;gap:15px;background:var(--con);color:var(--ink); padding:clamp(22px,2.6vw,34px);border-radius:3px} .contact label{display:block;font-family:'Host Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--ink-2)} .contact input,.contact select,.contact textarea{ width:100%;margin-top:7px;background:#fff;color:var(--ink);border:0;border-radius:3px; padding:13px 14px;font-family:'Instrument Sans',sans-serif;font-size:16px; box-shadow:inset 0 0 0 1px rgba(28,27,25,.12);transition:box-shadow .3s var(--ease)} .contact textarea{min-height:150px;resize:vertical} .contact input:focus,.contact select:focus,.contact textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--oak)} .contact .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .contact .consent{display:flex;gap:11px;align-items:flex-start;font-size:12.8px;line-height:1.5;color:var(--ink-3)} .contact .consent a{color:var(--tile);text-decoration:underline;text-underline-offset:2px} .contact .consent input{width:auto;margin-top:3px} .contact button[type=submit]{justify-self:start;background:var(--oak);color:#241708;border:0;border-radius:3px; padding:15px 24px;font-family:'Host Grotesk',sans-serif;font-size:15px;font-weight:600;cursor:pointer; transition:background-color .35s var(--ease)} .contact button[type=submit]:hover{background:var(--oak-2)} @media(max-width:860px){.contact .grid{grid-template-columns:1fr}.contact .row2{grid-template-columns:1fr}.contact dl{grid-template-columns:1fr}.contact dt{padding-bottom:0}.contact dd{padding-left:0;padding-top:4px}} /* ---------- transplanted section furniture ---------- */ /* icons arrive from the old markup with no intrinsic size — cap them */ .masthead svg,.welcome svg,.trust svg,.services svg,.work svg,.contact svg,.proj svg,.blog svg{ width:22px;height:22px;flex:none} .badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);margin-top:clamp(20px,2.6vw,32px)} .badge{background:var(--night);padding:22px;display:flex;flex-direction:column;gap:9px;color:var(--dim)} .badge svg{width:24px;height:24px;stroke:var(--oak);fill:none;stroke-width:1.4} .badge .pn{font-family:'Host Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--oak)} .badge .name{font-family:'Host Grotesk',sans-serif;font-size:17px;font-weight:600;color:#fff;line-height:1.25} @media(max-width:700px){.badges{grid-template-columns:1fr}} .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:start} .welcome .grid,.trust .grid{align-items:center} @media(max-width:900px){.grid{grid-template-columns:1fr;gap:30px}} .figure,.side{position:relative} .figure img,.side img{width:100%;height:auto;object-fit:cover;border-radius:3px;display:block} .figure .cap,.side .cap{display:block;margin-top:11px;font-family:'Host Grotesk',sans-serif; font-size:12.5px;font-weight:600;color:var(--dim-2)} .figure .cap span+span{margin-left:10px} .copy .sub{margin-bottom:14px} .body p,.drop{color:var(--dim)} .drop::first-letter{font:inherit;float:none;color:inherit} /* no drop caps in this direction */ /* links only — a bare .cta here also matched the homepage's
and shrink-wrapped the whole band to its content width */ a.cta,.cta-line,.morelink,.more,.back{display:inline-flex;align-items:center;gap:8px; font-family:'Host Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--oak); transition:gap .3s var(--ease),color .3s var(--ease)} a.cta:hover,.cta-line:hover,.morelink:hover,.more:hover,.back:hover{gap:13px;color:var(--paper)} .article-foot{margin-top:clamp(28px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--hair-d)} .article-foot .back{color:var(--tile)} .article-foot .back:hover{color:var(--walnut)} .no{display:none} .num{font-family:'Host Grotesk',sans-serif;font-weight:700;font-size:20px;color:var(--oak);display:block;margin-bottom:8px} .reasons .grid,.head-grid{display:grid;gap:clamp(20px,3vw,44px)} .head-grid{margin-bottom:clamp(26px,3.4vw,46px);align-items:start} .reasons .grid{row-gap:clamp(28px,3.4vw,48px)} .head-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .reasons .item{border-top:1px solid var(--hair);padding-top:22px} .reasons .item h3{color:#fff;font-size:17px;margin:0 0 6px} .topline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px} .cnt{font-family:'Host Grotesk',sans-serif;font-size:13px;color:var(--dim-2)} .wide,.svc-detail,.privacy,.post-feature{max-width:none} .svc-detail{border-top:1px solid var(--hair);padding-top:22px;margin-top:22px} .privacy{max-width:74ch;color:var(--dim)} .privacy h2,.privacy h3{color:#fff} .rule-amber{height:3px;background:var(--oak);border:0;margin:22px 0;max-width:64px} .post-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,40px); align-items:center;border-bottom:1px solid var(--hair);padding-bottom:clamp(22px,2.6vw,34px);margin-bottom:clamp(22px,2.6vw,34px)} .post-feature .frame{overflow:hidden;border-radius:3px;background:var(--night-3)} .post-feature .frame img{width:100%;height:auto;display:block;transition:filter .6s var(--ease)} .post-feature:hover .frame img{filter:var(--im-hover)} .post-feature h2{color:#fff;font-size:clamp(20px,2.1vw,29px);line-height:1.16;margin:10px 0 12px} .post-feature p{margin:0 0 14px;font-size:16px;color:var(--dim)} .post-feature .rd{font-family:'Host Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:var(--oak)} @media(max-width:900px){.post-feature{grid-template-columns:1fr}} /* ---------- balcony & deck compliance page ---------- Three components on top of the shared vocabulary: a full-bleed band of the same job at three stages, a fifth mosaic cell wide enough for a second photograph, and a five-across process row. --------------------------- */ .stages{background:var(--night-2)} .stage3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair)} .stage3 figure{margin:0;position:relative;overflow:hidden;background:var(--night-3)} .stage3 img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block; transition:filter .6s var(--ease)} .stage3 figure:hover img{filter:var(--im-hover)} .stage3 figcaption{position:absolute;left:0;bottom:0;background:var(--night);color:var(--paper); font-family:'Host Grotesk',sans-serif;font-size:12.8px;font-weight:600;padding:10px 16px} .stage3 figcaption .n{color:var(--oak);margin-right:9px} @media(max-width:760px){.stage3{grid-template-columns:1fr}.stage3 img{aspect-ratio:4/3}} /* the mosaic's last row: one tile, then a photograph across the other two. Rows are held to the text, not to the photographs — left to themselves a portrait photograph spanning two rows stretched every tile beside it. */ .four--tight{grid-auto-rows:minmax(0,200px)} .four--tight .f-photo img{min-height:0;height:100%} @media(max-width:540px){ .four--tight{grid-auto-rows:auto} .four--tight .f-photo img{min-height:220px} } .four .f-photo.wide{grid-row:auto;grid-column:span 2} .four .f-photo.wide img{height:auto;min-height:0;aspect-ratio:16/5} @media(max-width:900px){.four .f-photo.wide img{aspect-ratio:16/8}} @media(max-width:540px){.four .f-photo.wide{grid-column:span 1}} /* five process steps, one row, hairline over each */ .reasons .grid.g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,26px)} @media(max-width:1040px){.reasons .grid.g5{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.reasons .grid.g5{grid-template-columns:minmax(0,1fr)}} /* portrait project photographs keep their shape */ .frame.tall{aspect-ratio:3/4} /* a trailing note on a list row, quieter than the label it follows */ .list .nm em{font-style:normal;font-weight:400;color:var(--dim-2)} /* the .why rows carry a whole clause each, not a service name — so the label takes its own line and the explainer drops beneath it, instead of wrapping one 17px line twice and reading as a paragraph */ .why .list .item{align-items:flex-start;padding:17px 4px} .why .list .item .mk{margin-top:4px} .why .list .nm{display:block;font-size:16.5px} .why .list .nm em{display:block;margin-top:5px;font-size:14.5px;line-height:1.5; font-weight:400;letter-spacing:0;color:var(--dim)} .table-scroll{overflow-x:auto;margin:1.4em 0} .law-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px} .law-table th,.law-table td{border:1px solid var(--hair-d);padding:10px 12px;text-align:left} .law-table th{background:var(--con-2);font-family:'Host Grotesk',sans-serif;font-weight:600;color:var(--ink)} @media(max-width:820px){.head-grid{grid-template-columns:1fr}} /* ---------- collisions with the homepage's own section classes ---------- The homepage uses .cta for its oak CTA band and .adu for a concrete section. Inner pages use .cta as an inline link and reuse .adu as a full section, so both need untangling. */ a.cta{background:none;padding:0;display:inline-flex;align-items:center;gap:8px; font-family:'Host Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--oak)} a.cta:hover{background:none;gap:13px;color:var(--paper)} /* any section sitting on concrete needs dark text, not the dark-page defaults */ .adu,.wel,.article{color:var(--ink)} .adu h2,.adu h3,.adu h4,.wel h2,.wel h3{color:var(--ink)} .adu h2 em,.wel h2 em{color:var(--tile)} .adu p,.adu li,.adu .body p,.adu .drop,.adu .sub,.adu .lede, .wel p,.wel li{color:var(--ink-2)} .adu .cap{color:var(--ink-3)} .adu a.cta,.adu .cta-line,.adu .morelink,.wel a.cta{color:var(--tile)} .adu a.cta:hover,.adu .cta-line:hover,.wel a.cta:hover{color:var(--walnut)} .adu svg,.wel svg{stroke:var(--tile)} /* ---------- team cards ---------- */ /* capped — at full shell width the three portraits ran ~600px wide each. The heading rides the same centred rail so the cards aren't the only thing floating in the middle of the section. */ .team-sec .wrap>*{max-width:1020px;margin-inline:auto} .team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair); margin-top:clamp(26px,3vw,40px);max-width:1020px;margin-inline:auto} .team-card{background:var(--night);display:flex;flex-direction:column} .team-card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--night-3)} .team-card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .6s var(--ease)} .team-card:hover .ph img{filter:var(--im-hover)} .team-card .txt{padding:clamp(18px,2vw,24px)} .team-card .role{font-family:'Host Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--oak)} .team-card h3{color:#fff;font-size:clamp(17px,1.5vw,20px);margin:6px 0 0} @media(max-width:820px){.team-grid{grid-template-columns:1fr;max-width:400px}} /* ---------- video section ---------- */ .films{background:var(--night-2);padding:clamp(48px,5.6vw,84px) 0} .film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);margin-top:clamp(22px,2.6vw,34px)} .film{margin:0;background:var(--night)} .film video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:#000} .film figcaption{padding:16px clamp(14px,1.6vw,22px) 20px} .film .loc{font-family:'Host Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--oak)} .film h3{color:#fff;font-size:clamp(16px,1.4vw,19px);margin:6px 0 0} .film .note{margin:7px 0 0;font-size:14.5px;line-height:1.5;color:var(--dim);max-width:62ch} @media(max-width:820px){.film-grid{grid-template-columns:1fr}} /* solo mode — one clip, arrows to step through the rest. Applied by script, so the plain grid above is what a JS-less visitor gets. */ /* the solo player caps at 1040px, so the heading and nav ride the same centred rail rather than leaving the clip stranded against the left edge */ .films .wrap>*{max-width:1040px;margin-inline:auto} .film-grid--solo{display:block;background:none;gap:0;max-width:1040px} .film-grid--solo .film{display:none} .film-grid--solo .film.on{display:block} .film-grid--solo .film video{aspect-ratio:16/9;border-radius:3px} .film-grid--solo .film figcaption{padding:16px 0 0} .film-nav{display:flex;align-items:center;gap:16px;margin-top:18px} .fbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border:0;border-radius:3px;cursor:pointer;background:rgba(242,240,235,.07);color:var(--paper); font-family:'Host Grotesk',sans-serif;font-size:19px;line-height:1; transition:background-color .3s var(--ease),color .3s var(--ease)} .fbtn:hover{background:var(--oak);color:#241708} .fcount{font-family:'Host Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--dim-2)} /* ---------- blog: category nav + pagination ---------- */ .cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,38px)} .cat-link{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:3px; background:var(--night-3);color:var(--dim);font-family:'Host Grotesk',sans-serif;font-size:13px;font-weight:600; transition:background-color .35s var(--ease),color .35s var(--ease)} .cat-link span{color:var(--dim-2)} .cat-link:hover{background:var(--night-2);color:var(--paper)} .cat-link.on{background:var(--oak);color:#241708} .cat-link.on span{color:rgba(36,23,8,.65)} .pager{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:clamp(30px,3.4vw,46px);padding-top:22px;border-top:1px solid var(--hair)} .pager .nums{display:flex;gap:3px} .pager .nums a,.pager .nums .on{padding:7px 12px;border-radius:3px;font-family:'Host Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:var(--dim)} .pager .nums a:hover{background:var(--night-3);color:var(--paper)} .pager .nums .on{background:var(--oak);color:#241708} .pager .step{font-family:'Host Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:var(--dim)} .pager .step:hover{color:var(--oak)} .pager .step.off{opacity:.3} @media(max-width:600px){.pager{justify-content:center}} /* ---------- services dropdown in the header ---------- */ .nav-links .navitem{position:relative;display:flex;align-items:center} .nav-links .navitem>a{display:inline-flex;align-items:center;gap:7px} .nav-links .chev{display:inline-flex;transition:transform .35s var(--ease)} .nav-links .chev svg{width:10px;height:6px} .nav-links .navitem:hover .chev,.nav-links .navitem:focus-within .chev{transform:rotate(180deg)} .nav-links .dropdown{ position:absolute;top:calc(100% + 14px);left:-12px;min-width:216px;z-index:5; background:var(--night-2);border-radius:3px;padding:8px; box-shadow:0 24px 44px -26px rgba(0,0,0,.85),inset 0 0 0 1px var(--hair); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s} .nav-links .dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} .nav-links .navitem:hover .dropdown,.nav-links .navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:none} .nav-links .dropdown a{display:block;padding:10px 12px;border-radius:2px;font-size:14.5px;font-weight:500; color:var(--dim);white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease)} .nav-links .dropdown a:hover{background:var(--night-3);color:var(--oak)} .ft .base a{color:var(--dim);text-decoration:underline;text-underline-offset:3px} .ft .base a:hover{color:var(--oak)} /* the closing CTA carries the whole ask now, so the button carries more weight */ /* the label sets the size, not the padding — a big box round small type read as an oversized button on every page */ .cta .acts .b{font-size:17.5px;font-weight:700;padding:14px 28px;border-radius:4px} .cta .acts .b svg{width:19px;height:19px;stroke-width:2.3} /* long-form on the concrete reading surface */ .article .prose{color:var(--ink-2)} .article .prose h2,.article .prose h3{color:var(--ink)} .article .prose p{color:var(--ink-2)} .article .prose strong{color:var(--ink)} .article .prose a{color:var(--tile)} .article .prose a:hover{color:var(--walnut)} .article .prose th{background:var(--con-2);color:var(--ink)} .article .prose th,.article .prose td{border-color:var(--hair-d)} /* ---------- cookie notice ---------- */ /* sits on the bottom edge — the 42px it used to hold back was clearance for the .rib preview ribbon, which no page carries any more */ .cookie{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:16px;padding:16px clamp(20px,5vw,64px); background:var(--night-2);border-top:1px solid var(--hair)} .cookie[hidden]{display:none} .cookie p{margin:0;font-size:14.5px;color:var(--dim);max-width:70ch} .cookie a{color:var(--oak);text-decoration:underline;text-underline-offset:3px} .cookie a:hover{color:var(--paper)} .cookie-acts{display:flex;gap:10px;flex:none} .cookie button{cursor:pointer;border:0;border-radius:3px;padding:12px 22px; font-family:'Host Grotesk',sans-serif;font-size:14px;font-weight:600; background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1px var(--hair); transition:color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)} .cookie button:hover{color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)} .cookie button.ok{background:var(--oak);color:#241708;box-shadow:none} .cookie button.ok:hover{background:var(--oak-2)} @media(max-width:700px){.cookie{flex-direction:column;align-items:flex-start}.cookie-acts{width:100%}.cookie button{flex:1}} /* two items now the direction mark is gone, so the base row goes back to space-between: the legal line left, the almndtree credit right. Stacks and centres once there isn't room for both on one line. */ /* three parts: copyright left, legal links centred on the page, credit right. Grid rather than flex because 1fr/auto/1fr centres the middle column on the footer's true centre-line — with space-between it would only centre in whatever space the two outer items left over, which is not the same thing unless they happen to be equal widths. */ .ft .base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 24px} .ft .base .legal{justify-self:start;text-align:left} .ft .base .links{justify-self:center;text-align:center;white-space:nowrap} /* .made is also the homepage's "how it's made" section — a two-column grid carrying a top margin (see line ~204). The footer credit was inheriting all of it, which stretched the span and pushed it a line below the legal text. Reset it here to plain text; nowrap keeps it off a second line. */ .ft .base .made{display:block;margin:0;justify-self:end;text-align:right; color:var(--dim-2);white-space:nowrap} /* no room for three across — stack them, each centred */ @media(max-width:900px){ .ft .base{grid-template-columns:minmax(0,1fr);gap:8px} .ft .base .legal,.ft .base .links,.ft .base .made{justify-self:center;text-align:center;white-space:normal} } /* ---------- portfolio mosaic ---------- Replaces the pair/trip rhythm on /portfolio/. Every row carries its own column split AND its own aspect ratio, so tile width and tile height both change as you scroll and the page never settles into a grid. Under each photograph sits a peek strip — four frames from inside that project plus the count of what's left — so a twenty-photograph job stops looking the same size as a three-photograph one. The strip links into the project, and hovering a frame swaps it into the tile above it. --------------------------------------- */ .mosaic{display:flex;flex-direction:column;gap:clamp(30px,3.6vw,54px)} /* a row sets one frame HEIGHT, not one aspect ratio — otherwise the wider column in an uneven split comes out taller and the captions stagger */ .mrow{display:grid;gap:clamp(14px,1.8vw,24px);align-items:start} .mrow--lead {grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);--h:clamp(300px,37vw,520px)} .mrow--three{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);--h:clamp(220px,23vw,330px)} .mrow--wide {grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);--h:clamp(240px,26vw,380px)} .mrow--four {grid-template-columns:repeat(4,minmax(0,1fr));--h:clamp(170px,16vw,235px)} .mrow--even {grid-template-columns:repeat(3,minmax(0,1fr));--h:clamp(200px,20vw,290px)} .mrow--band {grid-template-columns:minmax(0,1fr);--h:clamp(280px,29vw,430px)} .mtile{display:flex;flex-direction:column;min-width:0; transition:transform .55s var(--ease)} .mtile .frame{position:relative;display:block;overflow:hidden;border-radius:3px;background:var(--night-3); height:var(--h,260px)} .mtile .frame img{width:100%;height:100%;object-fit:cover;display:block; transition:filter .7s var(--ease)} /* hover — the tile lifts, an oak rule draws along the sill, and the photograph comes up out of the dark without changing size */ .mtile:hover{transform:translateY(-4px)} .mtile:hover .frame img{filter:var(--im-hover)} .mtile .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--oak);transform:scaleX(0);transform-origin:left center; transition:transform .6s var(--ease)} .mtile:hover .frame::after,.mtile:focus-within .frame::after{transform:scaleX(1)} .mtile h3 a,.mtile .pmore{transition:color .3s var(--ease)} .mtile:hover .pmore{color:var(--oak)} @media(prefers-reduced-motion:reduce){ .mtile,.mtile .frame img,.mtile .frame::after{transition:none} .mtile:hover{transform:none} .mtile:hover .frame img{filter:none} } /* four frames, running the full width of the photograph above — a capped strip left a gap under the right-hand end of every tile */ .peek{display:flex;gap:4px;margin-top:4px} .peek a{position:relative;flex:1;min-width:0;display:block;overflow:hidden;border-radius:2px; height:clamp(46px,5.2vw,72px);background:var(--night-3);opacity:.58; transition:opacity .3s var(--ease)} .peek a:hover,.peek a:focus-visible{opacity:1} .peek img{width:100%;height:100%;object-fit:cover;display:block} .peek .rest{position:absolute;inset:0;display:grid;place-items:center; background:rgba(23,22,20,.74);font-family:'Host Grotesk',sans-serif; font-size:12.5px;font-weight:700;color:var(--oak)} .mtile .pn{display:block;margin-top:14px;font-family:'Host Grotesk',sans-serif; font-size:12.5px;font-weight:600;color:var(--oak)} .mtile h3{font-size:clamp(16.5px,1.35vw,19px);color:#fff;margin:6px 0 8px;line-height:1.24} .mtile h3 a{color:inherit;transition:color .3s var(--ease)} .mtile h3 a:hover{color:var(--oak)} .mtile .note{margin:0 0 10px;font-size:15px;color:var(--dim)} /* the two tiles that carry a row on their own get a heavier heading */ .mrow--lead .mtile:first-child h3,.mrow--band h3{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.015em} /* option J on its own — even tiles, three across, no varying weights. The only thing that changes between projects is the peek strip and the count next to the location. Tiles stretch to a common height so the "View project" links sit on one line however long the heading runs. */ /* four projects to a page, so two up — the tiles get to be big */ .mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3vw,44px) clamp(16px,2vw,28px);--h:clamp(260px,28vw,410px)} .mgrid .mtile{height:100%} .mgrid .mtile .pmore{margin-top:auto;padding-top:6px} @media(max-width:1040px){ .mgrid{--h:clamp(210px,30vw,330px)} .mrow--lead,.mrow--wide{grid-template-columns:minmax(0,1fr);--h:clamp(260px,44vw,420px)} .mrow--three{grid-template-columns:repeat(2,minmax(0,1fr));--h:clamp(200px,26vw,300px)} .mrow--four{grid-template-columns:repeat(2,minmax(0,1fr));--h:clamp(180px,24vw,260px)} } @media(max-width:640px){ .mgrid, .mrow{grid-template-columns:minmax(0,1fr) !important;--h:clamp(220px,58vw,320px)} .peek a{height:clamp(46px,13vw,64px)} } /* ---------- services index cards ---------- .item carries the frame + label + heading already; the index needs body copy and the odd bullet list under each one. */ .svc-grid{row-gap:clamp(26px,3.2vw,46px)} .svc-grid .item p{margin:0;font-size:15px;line-height:1.62;color:var(--dim)} .svc-grid .item ul{margin:10px 0 0;padding-left:17px;color:var(--dim-2);font-size:14.4px} .svc-grid .item li{margin:3px 0} /* points list on a service page's concrete split */ .svc-points{margin:16px 0 22px;padding-left:17px;color:var(--ink-2);font-size:15.4px} .svc-points li{margin:5px 0} /* ---------- mission & standards ---------- Five standards, so any two-up grid leaves an orphan sitting on its own row. One column of full-width rows reads like the document it actually is, and the number carries the structure a card border would. */ .standards{border-top:1px solid var(--hair);margin-top:clamp(22px,3vw,40px)} .standards .std-row{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr); gap:clamp(12px,3vw,44px);padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--hair)} .standards .n{font-family:'Host Grotesk',sans-serif;font-size:12.5px;font-weight:600; color:var(--oak);padding-top:4px} .standards h3{color:#fff;font-size:clamp(18px,1.7vw,22px);margin:0 0 9px;line-height:1.25} .standards p{margin:0;max-width:64ch} @media(max-width:760px){.standards .std-row{grid-template-columns:1fr;gap:8px} .standards .n{padding-top:0}} /* the promise closes the page — one statement, given room, on the tile green so it reads as a commitment rather than another content block */ .promise{background:var(--tile);padding:clamp(44px,5vw,76px) 0} .promise h2{color:#fff;max-width:20ch} .promise p{color:rgba(237,243,241,.85);font-size:clamp(17px,1.6vw,20px); line-height:1.6;max-width:60ch;margin:14px 0 0} /* the videos page is not the portfolio's solo player — nothing here gets swapped for a single centred clip, so its grid runs the full shell and lines up with the masthead above it */ .films--page .wrap>*{max-width:none;margin-inline:0} /* ---------- videos page: the cinema ---------- Eighteen native