/* ========================================================= CocoNaissance Holdings Corporation: shared design system Carried forward from the approved prototype. Tokens, type scale and component classes below are the source of truth for every page in the site. ========================================================= */ :root{ --carbon:#14100D; --carbon-2:#221B16; --carbon-3:#332A22; --coir:#F1E8D9; --coir-2:#E3D6C0; --husk:#9A5B2A; --husk-lift:#B76F36; --ink:#2A2320; --ink-soft:#5E5147; --gold:#C08A2E; --olive:#6F8F45; --paper:#FBF6EC; --ember:#C1652E; --measure:34rem; --gut:clamp(1.25rem,4vw,4.5rem); --band:clamp(4rem,9vw,8rem); --header-h:4.25rem; --fs-3xl:clamp(2.75rem,1.9rem + 4.2vw,6rem); --fs-xl:clamp(1.6rem,1.3rem + 1.6vw,2.5rem); --dur-mid:600ms; --dur-slow:1100ms; --ease-out:cubic-bezier(.16,.84,.28,1); /* even, unhurried easing: spreads the motion across the whole duration instead of front-loading it the way --ease-out does */ --ease-slow:cubic-bezier(.25,.46,.45,.94); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-snap-type:y proximity;scroll-behavior:smooth;overflow-x:hidden;scrollbar-gutter:stable} main > section:not(.chain),.chain-head,.stage,.recap{scroll-snap-align:start;scroll-margin-top:var(--header-h)} .hero{scroll-margin-top:0} .site-footer{scroll-snap-align:end} @media (prefers-reduced-motion:reduce){ html{scroll-snap-type:none;scroll-behavior:auto} } body{ margin:0;background:var(--coir);color:var(--ink); font-family:"Source Serif 4",Georgia,serif;font-size:1.0625rem;line-height:1.65; -webkit-font-smoothing:antialiased; } html.nav-open{overflow:hidden} h1,h2,h3,h4,.u,.stat-n,.nav a,.btn,.chip,button{font-family:Archivo,system-ui,sans-serif} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.02;text-wrap:balance} p{margin:0} a{color:inherit} img{max-width:100%;display:block} button{font:inherit} .wrap{max-width:76rem;margin:0 auto;padding-inline:var(--gut)} .u{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.3} .lede{font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.6;max-width:var(--measure)} .dim{color:var(--ink-soft)} .prose{max-width:44rem} .prose p + p,.prose p + h3{margin-top:1rem} /* body-copy links (legal pages). Underlined as well as coloured so they are identifiable without relying on colour alone; --husk is 4.99:1 on --paper, clearing AA, whereas --husk-lift (3.65:1) would not. */ .prose a{color:var(--husk);text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.18em} .prose a:hover,.prose a:focus-visible{color:var(--ink)} /* ---------- focus + motion floor ---------- */ :focus-visible{outline:2px solid var(--husk-lift);outline-offset:3px} .on-dark :focus-visible{outline-color:var(--gold)} /* ---------- skip link ---------- */ .skip-link{ position:absolute;left:1rem;top:-3rem;z-index:100; background:var(--gold);color:var(--carbon);font-family:Archivo;font-weight:700; font-size:.8125rem;padding:.75rem 1.25rem;text-decoration:none; transition:top .2s var(--ease-out); } .skip-link:focus{top:1rem} /* ---------- header ---------- */ .top{position:sticky;top:0;z-index:40;background:var(--carbon);color:var(--coir)} .top-in{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h);padding-block:1rem} .mark{display:flex;align-items:baseline;gap:.5rem;font-family:Archivo;font-weight:800;letter-spacing:-.03em;font-size:1.0625rem;text-decoration:none;white-space:nowrap} .mark i{width:.5rem;height:.5rem;border-radius:50%;background:var(--husk-lift);display:block;translate:0 -.15rem} .nav{margin-left:auto;display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap} .nav > ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1.75rem} .nav a{font-size:.8125rem;font-weight:500;letter-spacing:.01em;text-decoration:none;color:#CDBFAC;padding-block:.25rem;display:inline-block} .nav a:hover{color:var(--coir)} .nav a[aria-current="page"]{color:var(--coir);border-bottom:1px solid var(--husk-lift)} .has-sub{position:relative} .sub-toggle{background:none;border:0;color:#CDBFAC;font-size:.8125rem;font-weight:500;letter-spacing:.01em;padding:.25rem 0;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem} .sub-toggle:hover{color:var(--coir)} .sub-toggle .car{font-size:.6em;transition:transform .2s var(--ease-out)} .sub-toggle[aria-expanded="true"] .car{transform:rotate(180deg)} .sub-menu{ list-style:none;margin:0;padding:.5rem;position:absolute;top:100%;left:-.5rem; min-width:14rem;background:var(--carbon-2);border:1px solid var(--carbon-3); display:none;flex-direction:column;gap:.125rem;z-index:50; } .sub-toggle[aria-expanded="true"] + .sub-menu{display:flex} .sub-menu a{padding:.55rem .75rem;font-size:.8125rem;color:#CDBFAC} .sub-menu a:hover{color:var(--coir);background:rgba(241,232,217,.06)} .nav-toggle{ display:none;margin-left:auto;background:none;border:1px solid var(--carbon-3);color:var(--coir); width:2.5rem;height:2.5rem;align-items:center;justify-content:center;cursor:pointer; } .nav-toggle .bars{display:block;width:1.1rem;height:.75rem;position:relative} .nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bars span{ content:"";position:absolute;left:0;right:0;height:1px;background:currentColor; } .nav-toggle .bars::before{top:0} .nav-toggle .bars span{top:50%;margin-top:-.5px} .nav-toggle .bars::after{bottom:0} .nav-panel{display:none} /* ---------- buttons ---------- */ .btn{display:inline-block;background:var(--husk-lift);color:#1A120A;font-size:.875rem;font-weight:700;letter-spacing:.02em;text-decoration:none;padding:1rem 1.75rem;white-space:nowrap;border:1px solid var(--husk-lift);cursor:pointer} .btn:hover{background:var(--gold);border-color:var(--gold)} .btn-outline{display:inline-block;background:transparent;color:var(--coir);font-size:.875rem;font-weight:700;letter-spacing:.02em;text-decoration:none;padding:1rem 1.75rem;white-space:nowrap;border:1px solid var(--carbon-3);cursor:pointer} .btn-outline:hover{border-color:var(--gold);color:var(--gold)} .on-light .btn-outline{color:var(--ink);border-color:var(--coir-2)} .on-light .btn-outline:hover{border-color:var(--husk);color:var(--husk)} .cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem} /* ---------- badges / tags ---------- */ .pending{display:inline-block;font-family:Archivo;font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid #4A3E2E;padding:.2rem .45rem} .on-light .pending{border-color:var(--coir-2);color:var(--husk)} .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.125rem} .tags span{font-family:Archivo;font-size:.6875rem;font-weight:500;letter-spacing:.01em;color:#B4A794;border:1px solid var(--carbon-3);padding:.3rem .6rem;line-height:1} .on-light .tags span{color:var(--ink-soft);border-color:var(--coir-2)} /* ---------- hero (home) ---------- */ .hero{ background:var(--carbon);color:var(--coir); min-height:calc(100svh - var(--header-h)); display:flex;flex-direction:column;justify-content:flex-end; padding-block:clamp(2rem,5vw,4rem); position:relative;overflow:hidden; } .hero-media{position:absolute;inset:0;z-index:0} .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center} .hero-media .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,13,.88) 0%,rgba(20,16,13,.6) 45%,rgba(20,16,13,.35) 75%,rgba(20,16,13,.55) 100%),linear-gradient(180deg,rgba(20,16,13,.25) 0%,transparent 40%,rgba(20,16,13,.85) 100%)} .hero .wrap{position:relative;z-index:1;width:100%} .hero-text{max-width:40rem} .hero h1{font-size:clamp(2.25rem,4.6vw,3.75rem);letter-spacing:-.03em} .hero .u{color:#C9B8A0;margin-bottom:1.25rem} .hero .lede{margin-top:1.25rem;color:#D6C9B6} .hero .cta-row{margin-top:1.75rem} /* ---------- generic dark/light page hero (non-home pages) ---------- */ .page-hero{background:var(--carbon);color:var(--coir);padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,6vw,4rem)} .page-hero .u{color:#9C8B76;margin-bottom:1rem} .page-hero h1{font-size:clamp(2rem,4.5vw,3.25rem);letter-spacing:-.03em} .page-hero .lede{margin-top:1.125rem;color:#D6C9B6;max-width:40rem} /* ---------- short intro (home) ---------- */ .intro{background:var(--paper);padding-block:var(--band)} .intro .u{color:var(--husk);margin-bottom:1rem} .intro h2{font-size:clamp(1.75rem,4vw,2.75rem);max-width:24rem} .intro .lede{margin-top:1.125rem} /* ---------- signature: five-part coconut journey ---------- */ .chain{background:var(--paper)} .chain-head{background:var(--carbon);padding-block:2.25rem clamp(2rem,5vw,3rem)} .chain-head .u{color:#9C8B76} .chain-lede{font-size:1.0625rem;color:#D6C9B6;margin-top:.75rem;max-width:36rem;line-height:1.55} .stage{position:relative;min-height:100svh;min-height:100dvh;display:grid;overflow:clip;isolation:isolate;background:var(--carbon)} .stage-media{position:absolute;inset:0;overflow:hidden} .stage-media img{width:100%;height:100%;object-fit:cover;will-change:transform} .stage-media .ph{width:100%;height:100%;background:var(--carbon-2);border:1px dashed var(--carbon-3);display:grid;place-items:center} .stage-media .ph span{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6E6053;text-align:center;padding:1rem;max-width:20rem} .scrim{position:absolute;inset:0;z-index:1;pointer-events:none} .stage-content{position:relative;z-index:2;padding:var(--gut);display:grid;width:100%} .frame-progress{font-family:Archivo;font-size:.75rem;font-weight:700;letter-spacing:.14em;color:#B4A794;font-variant-numeric:tabular-nums;margin-bottom:.85rem} .material{font-family:Archivo;font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.05em;line-height:.86;color:transparent;-webkit-text-stroke:1px rgba(241,232,217,.42);margin-bottom:.15em} @supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){.material{color:rgba(241,232,217,.32);-webkit-text-stroke:0}} .stage-h{font-family:Archivo;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:var(--fs-xl);color:var(--coir);max-width:22ch} .stage-p{font-size:1.0625rem;color:#D9CCBA;margin-top:1rem;max-width:34ch;line-height:1.55} .biz{display:inline-flex;align-items:baseline;gap:.6rem;margin-top:1.75rem;text-decoration:none} .biz-arrow{font-family:Archivo;font-weight:800;font-size:1.35rem;line-height:1} .biz-name{font-family:Archivo;font-weight:800;letter-spacing:-.025em;font-size:clamp(1.75rem,1.2rem + 2.6vw,3.25rem);line-height:1} .biz:hover .biz-name{text-decoration:underline;text-underline-offset:.18em} .biz.gold{color:var(--gold)} .biz.olive{color:var(--olive)} .biz.ember{color:var(--ember)} .rule{position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;background:rgba(241,232,217,.22);transform-origin:left;z-index:2} .stage[data-align="bottom-center"] .stage-content{align-content:end;justify-items:center;text-align:center;padding-bottom:var(--band)} .stage[data-align="bottom-center"] .stage-h{max-width:26ch} .stage[data-align="bottom-center"] .stage-p{margin-inline:auto} .stage[data-align="bottom-center"] .scrim{background:linear-gradient(180deg,rgba(12,9,7,.35) 0%,transparent 30%,rgba(12,9,7,.9) 100%)} .stage[data-align="bottom-left"] .stage-content{align-content:end;justify-items:start;padding-bottom:var(--band)} .stage[data-align="bottom-left"] .scrim{background:linear-gradient(180deg,rgba(12,9,7,.2) 0%,transparent 35%,rgba(12,9,7,.92) 100%)} .stage[data-align="center-right"] .stage-content{align-content:center;justify-items:end;text-align:right} .stage[data-align="center-right"] .stage-p{margin-left:auto} .stage[data-align="center-right"] .scrim{background:linear-gradient(270deg,rgba(12,9,7,.9) 0%,rgba(12,9,7,.4) 45%,transparent 78%)} .stage[data-align="center-left"] .stage-content{align-content:center;justify-items:start} .stage[data-align="center-left"] .scrim{background:linear-gradient(90deg,rgba(12,9,7,.9) 0%,rgba(12,9,7,.4) 45%,transparent 78%)} .stage[data-align="bottom-right"] .stage-content{align-content:end;justify-items:end;text-align:right;padding-bottom:var(--band)} .stage[data-align="bottom-right"] .stage-p{margin-left:auto} .stage[data-align="bottom-right"] .scrim{background:linear-gradient(200deg,transparent 25%,rgba(12,9,7,.55) 60%,rgba(12,9,7,.94) 100%)} /* closing recap: material flow lines instead of a logo grid */ .recap-close{background:var(--carbon);color:var(--coir);padding-block:var(--band)} .recap-close .u{color:#9C8B76;margin-bottom:1rem} .recap-close h2{font-size:clamp(1.75rem,4vw,2.75rem)} .recap-close .lede{margin-top:1.125rem;color:#D6C9B6} .flow{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:0;border-top:1px solid var(--carbon-3)} .flow-row{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;padding-block:1.5rem;border-bottom:1px solid var(--carbon-3)} .flow-mats{font-family:Archivo;font-weight:700;font-size:1rem;color:#D9CCBA} .flow-arrow{font-family:Archivo;color:#5F5346;font-size:1.25rem} /* ---------- portfolio cards ---------- */ .recap{min-height:100svh;min-height:100dvh;display:grid;align-content:center;background:var(--paper);padding-block:clamp(2rem,5vw,3rem)} .recap-in{display:grid;gap:clamp(2rem,5vw,3.5rem)} .recap-head h2{font-size:clamp(1.75rem,3.4vw,2.5rem);max-width:30rem} .pb-band{padding-bottom:var(--band)} .streams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)} .card{background:#fff;border:1px solid var(--coir-2);border-top:3px solid var(--c);display:flex;flex-direction:column;overflow:clip;transition:border-color .2s var(--ease-out),transform .2s var(--ease-out)} .card:hover{transform:translateY(-2px)} .card-ph{aspect-ratio:16/9;overflow:clip;background:var(--coir)} .card-ph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .35s var(--ease-out),transform .5s var(--ease-out)} .card:hover .card-ph img{filter:grayscale(0);transform:scale(1.03)} .card-b{padding:clamp(1rem,2vw,1.375rem);display:flex;flex-direction:column;gap:.625rem;flex:1} .card .u{color:var(--c)} .card h3{font-size:1.0625rem;line-height:1.35;letter-spacing:-.01em} .card .desc{font-size:.9375rem;color:var(--ink-soft);line-height:1.55;margin-top:-.25rem} .card .go{margin-top:auto;padding-top:1rem;font-family:Archivo;font-size:.8125rem;font-weight:600;text-decoration:none;color:var(--c);border-top:1px solid var(--coir-2)} .card .go:hover{text-decoration:underline} .n-neeyog{--c:var(--gold)} .n-bio{--c:var(--olive)} .n-ool{--c:var(--ember)} /* ---------- our businesses: accent-bar card grid ---------- */ .biz-showcase{background:var(--paper);padding-block:var(--band)} .biz-showcase-head{max-width:34rem} .biz-showcase-head .u{color:var(--husk);margin-bottom:1rem} .biz-showcase-head h2{font-size:clamp(1.75rem,4vw,2.75rem)} .biz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.75rem);margin-top:clamp(2.5rem,5vw,3.5rem)} .biz-card{ position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--coir-2);border-left:3px solid var(--c); padding:clamp(1.75rem,3vw,2.5rem); } /* raised specificity so the hover lift is not cancelled by the later .rv/.rv.in reveal rules */ .biz-grid .biz-card{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),opacity .7s ease} .biz-grid .biz-card:hover,.biz-grid .biz-card:focus-within{transform:translateY(-3px);box-shadow:0 1rem 2rem -1rem rgba(42,35,32,.28)} .biz-card-cat{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .biz-card h3{margin-top:.75rem;font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.02em;color:var(--ink)} .biz-card-desc{margin-top:.75rem;font-size:.9375rem;color:var(--ink-soft);line-height:1.6;flex:1} .biz-card-link{ margin-top:clamp(1.5rem,2.5vw,2rem);align-self:flex-start; display:inline-flex;align-items:center;gap:.45rem; font-family:Archivo;font-weight:700;font-size:.875rem;color:var(--c);text-decoration:none; } .biz-card-link:hover,.biz-card-link:focus-visible{text-decoration:underline;text-underline-offset:.2em} .biz-card-link .a{display:inline-block;transition:transform .3s var(--ease-out)} .biz-card-link:hover .a,.biz-card-link:focus-visible .a{transform:translateX(.3rem)} .biz-card.n-neeyog{--c:var(--gold)} .biz-card.n-bio{--c:var(--olive)} .biz-card.n-ool{--c:var(--ember)} .biz-card.rv:nth-child(1){transition-delay:0s} .biz-card.rv:nth-child(2){transition-delay:.08s} .biz-card.rv:nth-child(3){transition-delay:.16s} .biz-card.rv:nth-child(4){transition-delay:.24s} @media (max-width:60rem){.biz-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){ .biz-grid .biz-card{transition:none} .biz-grid .biz-card:hover,.biz-grid .biz-card:focus-within{transform:none} } /* ---------- conviction: full-height statement plate ---------- Selectors below are deliberately qualified (.conviction-in .cl rather than bare .cl) so the later .rv/.rv.in reveal rules cannot cancel the scaleX / staggered-rise motion at equal specificity. */ .conviction{ background:var(--carbon);color:var(--coir); min-height:100svh;min-height:100dvh; display:grid;align-content:center; padding-block:clamp(3rem,7vw,5rem); border-block:1px solid var(--carbon-3); } .conviction-in{max-width:56rem} /* one face, one size, one weight — the whole sentence reads as a single object */ .conviction-claim{ font-family:Archivo;font-weight:800;letter-spacing:-.03em;line-height:1.1; font-size:clamp(1.875rem,4.2vw,3.5rem); color:#fff; } /* the claim itself carries .rv only as the observer hook — the reveal happens per word, so neutralise .rv's own fade/rise on the paragraph. */ .conviction-in .conviction-claim{opacity:1;transform:none} .conviction-in .cl{display:block} /* word-level mask: every word rises from behind its own edge, staggered by --i (assigned in main.js). padding + negative margin keeps descenders from being clipped by overflow:hidden. Words are only hidden once JS has split them, so with no JS the sentence simply renders as static text. */ .conviction-in .w{ display:inline-block;vertical-align:top;overflow:hidden; padding-bottom:.2em;margin-bottom:-.2em; } .conviction-in .w-i{display:inline-block} .conviction-claim.words-ready .w-i{ transform:translateY(130%); transition:transform 1s var(--ease-slow); transition-delay:calc(var(--i,0) * .06s); } .conviction-claim.words-ready.in .w-i{transform:none} /* key phrases: the rule draws under each phrase while the phrase takes its colour. A background-image underline (not ::after) so it survives line wrapping on narrow screens instead of overflowing an inline-block. */ .conviction-in .k{ color:inherit;padding-bottom:.06em; background-image:linear-gradient(var(--kc),var(--kc)); background-repeat:no-repeat;background-size:0% .07em; -webkit-box-decoration-break:clone;box-decoration-break:clone; transition:color 1.2s var(--ease-slow),background-size 1.2s var(--ease-slow); } .conviction-in .k.in{color:var(--kc);background-size:100% .07em} /* the two ideas sweep toward each other; the resolution opens from the centre */ .conviction-in .k-l{background-position:0 100%;transition-delay:1.6s} .conviction-in .k-r{background-position:100% 100%;transition-delay:1.95s} .conviction-in .k-c{background-position:50% 100%;transition-delay:2.3s} .conviction-in .k-industry{--kc:var(--husk-lift)} .conviction-in .k-environment{--kc:var(--olive)} .conviction-in .k-claim{--kc:var(--gold)} @media (prefers-reduced-motion:reduce){ .conviction-in .w{overflow:visible} .conviction-claim.words-ready .w-i{transform:none;transition:none} .conviction-in .k{color:var(--kc);background-size:100% .07em;transition:none} } /* ---------- role of the holding company / editorial principle grid ---------- */ .role{background:var(--paper)} /* homepage: give "Built as one platform" its own visual break from the "Specialized by purpose" recap right above it (both are .on-light, otherwise identical --paper backgrounds, so they read as one block) */ #platform{background:var(--coir);border-top:1px solid var(--coir-2)} .role-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center} .role-media{aspect-ratio:1/1;min-width:0;min-height:0;overflow:clip;background:var(--coir)} .role-media img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- footprint: auto-crossfading site photos ---------- */ .footprint-crossfade{position:relative;width:100%;height:100%} .footprint-crossfade figure{position:absolute;inset:0;margin:0;opacity:0;animation:fp-crossfade 18s infinite} .footprint-crossfade figure:nth-child(1){animation-delay:0s} .footprint-crossfade figure:nth-child(2){animation-delay:6s} .footprint-crossfade figure:nth-child(3){animation-delay:12s} .footprint-crossfade img{width:100%;height:100%;object-fit:cover;display:block} .footprint-crossfade figcaption{ position:absolute;left:1.25rem;bottom:1.25rem;z-index:1; font-family:Archivo;font-weight:700;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase; color:#fff;text-shadow:0 1px 4px rgba(20,16,13,.65); } @keyframes fp-crossfade{ 0%{opacity:0} 3%{opacity:1} 30%{opacity:1} 33%{opacity:0} 100%{opacity:0} } @media (prefers-reduced-motion:reduce){ .footprint-crossfade figure{animation:none;opacity:0} .footprint-crossfade figure:first-child{opacity:1} } .role h2{font-size:clamp(1.5rem,3vw,2.25rem);max-width:26rem} .growth-strategy h2{font-size:clamp(1.25rem,2.2vw,1.75rem);max-width:34rem;margin-inline:auto} .growth-strategy.fill-screen{grid-template-columns:minmax(0,1fr)} .growth-strategy .wrap.rv{text-align:center} .role .lede{margin-top:.875rem} .role-list{margin-top:clamp(1.25rem,3vw,1.75rem)} .role .structure-list{gap:1rem} .role .structure-item p{margin-top:.35rem} /* ---------- footprint ---------- */ .foot-print{background:var(--paper);padding-block:var(--band)} .fp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:end} .fp-head h2{font-size:clamp(1.6rem,3.4vw,2.375rem)} .fp-head .u{color:var(--husk);margin-bottom:1rem} .sites{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.75rem);margin-top:clamp(2rem,5vw,3rem)} .site{border:1px solid var(--coir-2);background:#fff} .site .ph{aspect-ratio:4/3;background:var(--coir);border-bottom:1px solid var(--coir-2);display:grid;place-items:center;overflow:clip} .site .ph span{font-family:Archivo;font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9C8B76;text-align:center;padding:.5rem} .site .ph img{width:100%;height:100%;object-fit:cover} .site-b{padding:1.25rem} .site-b h3{font-size:1.125rem} .site-b p{margin-top:.5rem;font-size:.9375rem;color:var(--ink-soft)} /* ---------- sustainability / ESG pillars ---------- */ .esg{background:var(--carbon);color:var(--coir);padding-block:var(--band)} .esg .u{color:#8C7C69} .esg h2{font-size:clamp(1.75rem,4vw,2.75rem);margin-top:1rem;max-width:40rem} .esg .lede{margin-top:1.125rem;color:#CBBEAB} .esg .pillars{margin-top:clamp(1.25rem,3vw,2rem)} .esg .pillar{padding:clamp(1rem,2vw,1.5rem)} /* .75rem left the title sitting almost against the photo slot */ .esg .pillar-ph{aspect-ratio:16/9;margin-bottom:clamp(1.5rem,3vw,2.25rem)} .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--carbon-3);margin-top:clamp(2.5rem,5vw,3.5rem)} .pillars.on-light{background:var(--coir-2)} .pillar{background:var(--carbon);padding:clamp(1.5rem,3vw,2.25rem)} .on-light .pillar{background:#fff} .pillar-ph{aspect-ratio:4/3;background:var(--carbon-2);border:1px dashed var(--carbon-3);display:grid;place-items:center;margin-bottom:1.25rem;overflow:clip} .on-light .pillar-ph{background:var(--coir);border-color:var(--coir-2)} .pillar-ph span{font-family:Archivo;font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6E6053;text-align:center;padding:.75rem;max-width:14rem} .on-light .pillar-ph span{color:#9C8B76} .pillar-ph.photo{border:none;background:none} .pillar-ph img{width:100%;height:100%;object-fit:cover} .pillar h3{font-size:1.25rem;color:var(--coir)} .on-light .pillar h3{color:var(--ink)} .pillar p{margin-top:.75rem;font-size:.9375rem;color:#B4A794} .on-light .pillar p{color:var(--ink-soft)} .pillar em{font-style:normal;color:var(--olive);font-family:Archivo;font-weight:600;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.75rem} /* ---------- sustainability: colour separation between E and S pillars ---------- */ .esg-environmental .u{color:var(--olive)} .esg-environmental .pillars .pillar{border-top:3px solid var(--olive)} .esg-environmental .pillars .pillar h3{color:var(--olive)} .esg-social .u{color:var(--husk-lift)} .esg-social .pillars .pillar{border-top:3px solid var(--husk-lift)} .esg-social .pillars .pillar h3{color:var(--husk-lift)} .esg-social .pillars .pillar:nth-child(4){grid-column:span 2} /* ---------- governance ---------- */ .governance{background:var(--carbon);color:var(--coir);padding-block:var(--band)} .governance .u{color:#8C7C69;margin-bottom:1rem} .governance h2{font-size:clamp(1.75rem,4vw,2.75rem);max-width:34rem} .governance .lede{margin-top:1.125rem;color:#CBBEAB} .structure-list{margin-top:clamp(2rem,5vw,3rem);border-left:1px solid var(--carbon-3);padding-left:clamp(1.25rem,3vw,2rem);display:grid;gap:2rem} .on-light .structure-list{border-left-color:var(--coir-2)} .structure-item .k{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .structure-item h3{margin-top:.5rem;font-size:1.0625rem} .on-dark .structure-item h3{color:var(--coir)} .structure-item p{margin-top:.5rem;font-size:.9375rem;color:#B4A794} .on-light .structure-item p{color:var(--ink-soft)} /* ---------- leadership placeholder ---------- */ .leadership{background:var(--paper);padding-block:var(--band)} .leadership .u{color:var(--husk);margin-bottom:1rem} .leader-card{margin-top:clamp(2rem,4vw,3rem);max-width:44rem;border-top:2px solid var(--husk-lift);padding-top:1.75rem} .leader-quote{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:clamp(1.25rem,2.4vw,1.625rem);line-height:1.45;color:var(--ink)} .leader-meta{margin-top:1.25rem;font-family:Archivo} .leader-meta .n{font-weight:700;font-size:.9375rem} .leader-meta .t{margin-top:.15rem;font-size:.8125rem;color:var(--ink-soft)} .leader-card .pending{margin-top:1rem} /* ---------- founders' messages ---------- */ .founder-section{padding-block:var(--band)} .founder-section.on-light{background:var(--paper);color:var(--ink)} .founder-section.on-dark{background:var(--carbon);color:var(--coir)} .founder-section.on-light .u{color:var(--husk)} .founder-section.on-dark .u{color:#C9B8A0} .founder-msg{margin-top:clamp(1.5rem,3vw,2rem);max-width:44rem} .founder-msg p{margin-top:1.125rem;font-size:1.0625rem;line-height:1.7} .founder-msg p:first-child{margin-top:0} .founder-sig{margin-top:1.75rem;padding-top:1.25rem;border-top:2px solid var(--husk-lift);font-family:Archivo} .founder-sig .n{font-weight:700;font-size:.9375rem} .founder-sig .t{margin-top:.15rem;font-size:.8125rem;color:var(--ink-soft)} .founder-section.on-dark .founder-sig .t{color:#B4A794} /* ---------- full-screen scroll-snap sections ---------- */ /* min-height (not height:100dvh) on purpose: dvh recalculates as the mobile address bar shows/hides mid-scroll, forcing layout thrash and jank. svh is stable. overflow/scroll-snap-stop were dropped for the same reason: they turned every section into its own scroll trap and fought native momentum scrolling on phones. Sections are sized via content, not a forced box. */ .fill-screen{min-height:100svh;display:grid;align-content:center;padding-block:clamp(2rem,5vw,3rem)} .esg.fill-screen{align-content:start;padding-block:clamp(3.5rem,7vw,5rem) clamp(1.5rem,4vw,2rem)} /* ---------- final CTA / contact ---------- */ .contact{position:relative;overflow:clip;background:var(--carbon);color:var(--coir);padding-block:var(--band)} .contact-media{position:absolute;inset:0;z-index:0} .contact-media img{width:100%;height:100%;object-fit:cover} .contact-media .scrim{position:absolute;inset:0;background:linear-gradient(rgba(20,16,13,.87),rgba(20,16,13,.87))} .contact .wrap{position:relative;z-index:1} .contact-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end} .contact h2{font-size:clamp(1.75rem,4vw,2.75rem);max-width:30rem} .contact .u{color:#8C7C69;margin-bottom:1rem} .contact .lede{margin-top:1.125rem;color:#D6C9B6} /* closing CTA (full-height variant): stacked so the button reads as the page's final action rather than a control parked beside the headline */ .contact-close{max-width:44rem} .contact-close .btn{ margin-top:clamp(2rem,4vw,2.75rem); padding:1.125rem 2rem;font-size:.9375rem; } /* the button lands as its own beat, after the copy above it has settled. .rv sets transition-delay:0 in its shorthand and is defined later, so this needs the extra class to win. */ .contact-close .btn.rv{transition-delay:.35s} /* hover: a fill sweeping in from the left, echoing the drawn underlines in the conviction statement, plus the arrow nudge used on the business cards */ /* .btn itself has no transition, so the border would otherwise snap to gold while the fill is still sweeping across */ .btn-sweep{ position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem; transition:border-color .55s var(--ease-slow); } .btn-sweep::before{ content:"";position:absolute;inset:0;background:var(--gold); transform:scaleX(0);transform-origin:left; transition:transform .55s var(--ease-slow); } .btn-sweep > span{position:relative} .btn-sweep:hover,.btn-sweep:focus-visible{background:var(--husk-lift)} .btn-sweep:hover::before,.btn-sweep:focus-visible::before{transform:scaleX(1)} .btn-sweep .btn-a{display:inline-block;transition:transform .45s var(--ease-slow)} .btn-sweep:hover .btn-a,.btn-sweep:focus-visible .btn-a{transform:translateX(.35rem)} @media (prefers-reduced-motion:reduce){ .btn-sweep::before,.btn-sweep .btn-a{transition:none} } /* ---------- subsidiary pages, photo-led revamp ---------- */ /* four-up variant of the existing pillar grid */ .pillars.pillars-4{grid-template-columns:repeat(4,1fr)} @media (max-width:60rem){.pillars.pillars-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:38rem){.pillars.pillars-4{grid-template-columns:1fr}} /* two-up variant of the existing pillar grid */ .pillars.pillars-2{grid-template-columns:repeat(2,1fr)} @media (max-width:38rem){.pillars.pillars-2{grid-template-columns:1fr}} /* homepage sustainability teaser: sized against viewport height so the section always fits in one screen, never forcing its own scrollbar */ #sustainability.fill-screen{padding-block:clamp(2rem,6vh,3.5rem) clamp(1rem,3vh,1.5rem)} #sustainability .pillars.pillars-2{margin-top:clamp(1.25rem,3vh,2rem);max-width:52rem;margin-inline:auto} #sustainability .pillars.pillars-2 .pillar{padding:clamp(1rem,2.5vh,1.5rem)} #sustainability .pillars.pillars-2 .pillar-ph{aspect-ratio:3/2;margin-bottom:clamp(.75rem,1.5vh,1.25rem)} #sustainability .pillars.pillars-2 h3{font-size:clamp(1.125rem,1.8vw,1.375rem)} #sustainability .pillars.pillars-2 p{margin-top:.5rem;font-size:.9375rem;max-width:28rem} /* product tiles: photo on top, name beneath — replaces the plain text boxes */ .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2vw,1.5rem);margin-top:clamp(2rem,5vw,3rem)} .prod-tile{background:#fff;border:1px solid var(--coir-2);overflow:clip;display:flex;flex-direction:column} .prod-media{aspect-ratio:3/2;overflow:clip;background:var(--coir);display:grid;place-items:center;border-bottom:1px solid var(--coir-2)} /* plain (non-flip) product photo — direct child only, so the flip cards' own .flip-front img rule below still governs those */ .prod-media > img{width:100%;height:100%;object-fit:cover} .prod-tile b{display:block;padding:1rem 1.125rem;font-family:Archivo;font-weight:700;font-size:.9375rem;color:var(--ink)} /* flip cards: product photo flips to a short description on hover (desktop) or tap (touch) */ .prod-media.flip{position:relative;perspective:1400px;cursor:pointer;-webkit-tap-highlight-color:transparent} .prod-media.flip .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--ease-slow)} .prod-media.flip:hover .flip-inner, .prod-media.flip:focus-visible .flip-inner, .prod-media.flip.is-flipped .flip-inner{transform:rotateY(180deg)} .flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden} .flip-front img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-slow)} .prod-media.flip:hover .flip-front img{transform:scale(1.05)} .flip-back{transform:rotateY(180deg);background:var(--ink);display:flex;align-items:center;justify-content:center;padding:1.125rem} .flip-back p{margin:0;font-family:Archivo;font-size:.8125rem;font-weight:500;line-height:1.5;color:var(--coir);text-align:center} .prod-media.flip:focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media (prefers-reduced-motion:reduce){ .prod-media.flip .flip-inner{transition:none} } .prod-grid.rv:nth-child(n){transition-delay:0s} @media (max-width:60rem){.prod-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:26rem){.prod-grid{gap:.5rem}} /* outcomes sitting beside the footprint copy */ .fp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,4.5rem);align-items:center} @media (max-width:60rem){.fp-split{grid-template-columns:1fr}} .legal{border-top:1px solid var(--carbon-3);margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.5rem;display:flex;gap:1.5rem;flex-wrap:wrap;font-family:Archivo;font-size:.75rem;color:#7D6E5C} /* ---------- footer ---------- */ .site-footer{background:var(--carbon-2);color:#B4A794;padding-block:clamp(3rem,6vw,4.5rem) 2rem;border-top:1px solid var(--carbon-3)} .footer-brand{font-family:Archivo;font-weight:800;font-size:1.375rem;color:var(--coir);letter-spacing:-.02em;max-width:20rem} .footer-grid{display:grid;grid-template-columns:1.1fr 1.4fr 1fr 1.1fr;gap:clamp(1.75rem,4vw,3.25rem);margin-top:clamp(2.5rem,5vw,3.5rem)} .footer-col h4{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8C7C69;margin-bottom:1rem} .footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem} .footer-col a{font-size:.8125rem;text-decoration:none;color:#B4A794} .footer-col a:hover{color:var(--coir)} .footer-col address{font-style:normal;font-size:.8125rem;line-height:1.6;color:#B4A794} .footer-bottom{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--carbon-3);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:Archivo;font-size:.75rem;color:#6E6053} /* ---------- simple prose / legal pages ---------- */ .simple{background:var(--paper);padding-block:var(--band)} .simple h2{font-size:clamp(1.375rem,2.4vw,1.75rem);margin-top:2.25rem} .simple h2:first-child{margin-top:0} .simple p{margin-top:.85rem;font-size:.9375rem;line-height:1.65;color:var(--ink-soft)} .simple ul{margin:.85rem 0 0;padding-left:1.15rem;color:var(--ink-soft);font-size:.9375rem;line-height:1.65} /* ---------- forms (contact page) ---------- */ .form{max-width:38rem;margin-top:clamp(2rem,4vw,3rem)} .field{display:grid;gap:.4rem;margin-bottom:1.25rem} .field label{font-family:Archivo;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)} .field input,.field select,.field textarea{ width:100%;min-width:0;box-sizing:border-box; font:inherit;font-size:.9375rem;padding:.75rem .85rem;border:1px solid var(--coir-2);background:#fff;color:var(--ink); } .field textarea{resize:vertical;min-height:8rem} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--husk-lift)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem} .form-success{display:none;border:1px solid var(--olive);background:#fff;padding:.85rem 1.1rem;font-family:Archivo;font-size:.9375rem} .form-success.show{display:block} .form.hide-on-success{display:none} .contact-details{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:2rem;border-top:1px solid var(--coir-2)} .contact-details .u{color:var(--husk);margin-bottom:1rem} .contact-details address{font-style:normal;font-size:.9375rem;line-height:1.7;color:var(--ink-soft)} .contact-page-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,4rem)} /* office-location map: the iframe has no intrinsic aspect ratio, so the wrapper sets one and the iframe fills it */ .contact-map{aspect-ratio:4/3;margin-bottom:1.75rem;border:1px solid var(--coir-2);background:var(--coir);overflow:hidden} .contact-map iframe{width:100%;height:100%;border:0;display:block} @media (max-width:60rem){.contact-map{aspect-ratio:16/9}} /* ---------- teasers (home: sustainability / governance link-outs) ---------- */ .teasers{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem} .teaser-link{display:inline-flex;align-items:center;gap:.5rem;font-family:Archivo;font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--gold)} .on-dark .teaser-link{color:var(--husk-lift)} .teaser-link:hover{text-decoration:underline} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .stage-media img{transform:none !important} } /* ---------- responsive ---------- */ @media (max-width:64rem){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr} .footer-col:nth-child(4){grid-column:2} } @media (max-width:60rem){ .hero-grid,.problem-grid,.quality-in,.fp-head,.contact-in,.contact-page-in,.role-grid{grid-template-columns:1fr} .role-media{aspect-ratio:16/9} .streams,.pillars,.sites{grid-template-columns:1fr} .pillars{gap:1px} .esg-social .pillars .pillar:nth-child(4){grid-column:auto} .contact-in{align-items:start} .footer-grid{grid-template-columns:1fr 1fr} .footer-col:nth-child(4){grid-column:auto} .stage[data-align="center-right"] .stage-content, .stage[data-align="bottom-right"] .stage-content{justify-items:start;text-align:left} .stage[data-align="center-right"] .stage-p, .stage[data-align="bottom-right"] .stage-p{margin-left:0} .stage[data-align="center-right"] .scrim, .stage[data-align="bottom-right"] .scrim{background:linear-gradient(180deg,rgba(12,9,7,.25) 0%,transparent 35%,rgba(12,9,7,.92) 100%)} .stage[data-align="center-right"] .stage-content, .stage[data-align="center-left"] .stage-content{align-content:end;padding-bottom:var(--band)} .nav{display:none} .nav-toggle{display:inline-flex} .nav-panel{ display:none;position:fixed;left:0;right:0;top:var(--header-h);bottom:0;background:var(--carbon); border-top:1px solid var(--carbon-3);padding:1.25rem var(--gut) 2rem;overflow-y:auto; } .nav-panel.open{display:block} .nav-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem} .nav-panel a{display:block;padding:.75rem .25rem;font-size:1rem;text-decoration:none;color:var(--coir);border-bottom:1px solid var(--carbon-3)} .nav-panel .sub-flat{padding-left:1rem;display:grid;gap:.125rem} .nav-panel .sub-flat a{font-size:.875rem;color:#CDBFAC;border-bottom:0} .field-row{grid-template-columns:1fr} } @media (max-width:38rem){ .fact{grid-template-columns:1fr;gap:.35rem} .fact b{padding-top:0} .stage{min-height:100svh;min-height:100dvh;--band:calc(4rem + var(--header-h) + 1.5rem)} .material{-webkit-text-stroke-width:.75px} .stage[data-align="bottom-center"] .stage-content{justify-items:start;text-align:left} .stage[data-align="bottom-center"] .stage-p{margin-inline:0} .flow-row{grid-template-columns:1fr;text-align:left;gap:.5rem} .footer-grid{grid-template-columns:1fr} } /* ---------- problem/facts band (About page) ---------- */ .problem{padding-block:var(--band)} .problem-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem)} .problem h2{font-size:clamp(1.6rem,3.4vw,2.375rem)} .problem .u{color:var(--husk);margin-bottom:1rem} .facts{display:grid;gap:0;border-top:1px solid var(--coir-2)} .fact{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2rem);padding-block:1.375rem;border-bottom:1px solid var(--coir-2);align-items:start} .fact b{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--husk);padding-top:.35rem;white-space:nowrap} .fact p{font-size:1rem} /* ---------- development model (About page) ---------- */ .dev-model{background:var(--carbon);color:var(--coir);min-height:100svh;min-height:100dvh;display:grid;align-content:center;padding-block:clamp(2rem,5vw,3rem)} .dev-model .u{color:#8C7C69;margin-bottom:1rem} .dev-model h2{font-size:clamp(1.75rem,4vw,2.75rem);max-width:30rem} .dev-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--carbon-3);margin-top:clamp(2.5rem,5vw,3.5rem)} .dev-step{background:var(--carbon);padding:1.5rem 1.25rem} .dev-step .k{font-family:Archivo;font-weight:800;font-size:1.5rem;color:var(--husk-lift)} .dev-step h3{margin-top:.75rem;font-size:.9375rem;color:var(--coir)} .dev-step p{margin-top:.5rem;font-size:.8125rem;color:#B4A794;line-height:1.5} .dev-step.rv:nth-child(1){transition-delay:0s} .dev-step.rv:nth-child(2){transition-delay:.1s} .dev-step.rv:nth-child(3){transition-delay:.2s} .dev-step.rv:nth-child(4){transition-delay:.3s} .dev-step.rv:nth-child(5){transition-delay:.4s} @media (max-width:60rem){.dev-steps{grid-template-columns:1fr 1fr}} @media (max-width:38rem){.dev-steps{grid-template-columns:1fr}} /* ---------- about page: image hero, intro grid, mission, image break ---------- */ .about-hero{ position:relative;overflow:hidden;background:var(--carbon);color:var(--coir); min-height:calc(100svh - var(--header-h));min-height:calc(100dvh - var(--header-h)); display:flex;flex-direction:column;justify-content:flex-end; padding-block:clamp(2rem,5vw,4rem); } .about-hero .wrap{position:relative;z-index:1;width:100%} .about-hero h1{font-size:clamp(2.125rem,4.8vw,3.5rem);letter-spacing:-.03em;max-width:32rem} .about-hero.hero-wide h1{max-width:42rem} .about-hero h1 u{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.06em;text-underline-offset:.14em} /* eyebrow/lede would otherwise inherit the dark body ink on this dark hero */ /* hero photo not yet shot — same dashed convention used in the stage/pillar slots */ .hero-media .ph{width:100%;height:100%;background:var(--carbon-2);border:1px dashed var(--carbon-3);display:grid;place-items:center} .hero-media .ph span{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6E6053;text-align:center;padding:1rem;max-width:20rem} .about-hero .u{color:#C9B8A0;margin-bottom:1.25rem} .about-hero .lede{margin-top:1.25rem;color:#D6C9B6} .about-intro-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,4.5rem);align-items:start} .about-intro-grid .prose{max-width:none} .about-intro-media{aspect-ratio:4/5;min-width:0;min-height:0;background:var(--coir);border:1px dashed var(--coir-2);display:grid;place-items:center;overflow:clip} .about-intro-media span{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9C8B76;text-align:center;padding:1rem;max-width:12rem} .about-intro-media.photo{border:none;background:none} .about-intro-media.photo img{width:100%;height:100%;object-fit:cover} .about-intro-grid .prose h3{font-size:clamp(1.25rem,2.2vw,1.625rem)} .purpose-block{margin-top:clamp(1.5rem,3vw,2rem);padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px solid var(--coir-2);max-width:44rem} .purpose-block h3{font-size:clamp(1.25rem,2.2vw,1.625rem)} .purpose-block .lede{margin-top:.5rem} .purpose-block p:not(.lede){margin-top:1rem} .purpose-block ul{margin-top:1rem;padding-left:1.15rem;color:var(--ink-soft)} .purpose-block ul li{font-size:.9375rem;line-height:1.65} .purpose-block ul li + li{margin-top:.4rem} .about-break{position:relative;min-height:100svh;min-height:100dvh;overflow:hidden} .about-break img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* ---------- operating principles: auto-playing card slider ---------- */ .principle-slider{width:100%;margin-top:clamp(2.5rem,5vh,4rem);display:flex;flex-direction:column;justify-content:center} .principle-track{ display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.25rem; } .principle-track::-webkit-scrollbar{display:none} .principle-track:focus-visible{outline:2px solid var(--husk-lift);outline-offset:4px} .principle-card{flex:0 0 clamp(20rem,30vw,28rem);scroll-snap-align:start;background:#fff;border:1px solid var(--coir-2);display:flex;flex-direction:column} .principle-card:first-child{margin-left:var(--gut)} .principle-card:last-child{margin-right:var(--gut)} .principle-media{height:clamp(10rem,26vh,15rem);background:var(--coir);border-bottom:1px solid var(--coir-2);display:grid;place-items:center;overflow:clip} .principle-media span{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9C8B76;text-align:center;padding:1rem;max-width:12rem} .principle-media img{width:100%;height:100%;object-fit:cover} .principle-body{padding:clamp(1.5rem,2.5vw,2rem)} .principle-body .k{font-family:Archivo;font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--husk);margin-bottom:.6rem} .principle-body h3{font-size:1.1875rem} .principle-body p:last-child{margin-top:.6rem;font-size:.9375rem;line-height:1.6;color:var(--ink-soft)} .principle-controls{display:flex;align-items:center;justify-content:center;margin-top:1.75rem} .principle-arrows{display:flex;gap:.5rem} .principle-arrow{width:2.5rem;height:2.5rem;border:1px solid var(--coir-2);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:1rem;line-height:1} .principle-arrow:hover{border-color:var(--husk);color:var(--husk)} .icon-pause{display:inline-block;width:.7rem;height:.8rem;position:relative} .icon-pause::before,.icon-pause::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:currentColor} .icon-pause::before{left:1px} .icon-pause::after{right:1px} .icon-play{display:inline-block;width:0;height:0;margin-left:2px;border-style:solid;border-width:.4rem 0 .4rem .65rem;border-color:transparent transparent transparent currentColor} @media (max-width:60rem){ .about-intro-grid{grid-template-columns:1fr} .principle-card{flex:0 0 calc(68% - .65rem)} } @media (max-width:38rem){ .principle-card{flex:0 0 86%} } /* ---------- subsidiary pages ---------- */ .biz-hero{background:var(--carbon);color:var(--coir);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,5vw,3.5rem)} .biz-hero .u{color:#9C8B76;margin-bottom:1rem} .biz-hero h1{font-size:clamp(2rem,4.5vw,3.25rem);letter-spacing:-.03em} .biz-hero .lede{margin-top:1.125rem;color:#D6C9B6;max-width:38rem} .biz-overview{background:var(--paper);padding-block:clamp(2.5rem,5vw,3.25rem) 0} .biz-overview .prose p{color:var(--ink)} .biz-overview .prose p + p{color:var(--ink-soft)} .opp-resp{padding-block:var(--band)} .opp-resp .band{max-width:40rem} .opp-resp .band + .band{margin-top:clamp(2.5rem,5vw,3.5rem)} .opp-resp .u{margin-bottom:.85rem} .opp-resp h2{font-size:clamp(1.5rem,3vw,2.125rem)} .opp-resp p{margin-top:.85rem;font-size:1rem;color:var(--ink-soft);line-height:1.6} .lines{background:var(--paper);padding-block:var(--band)} .lines .u{color:var(--husk);margin-bottom:1rem} .lines h2{font-size:clamp(1.5rem,3vw,2.125rem)} .line-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2vw,1.5rem);margin-top:clamp(2rem,5vw,3rem)} .line-card{background:#fff;border:1px solid var(--coir-2);padding:1.25rem 1.5rem;font-family:Archivo;font-weight:600;font-size:.9375rem} .built-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 2.5rem;margin-top:clamp(2rem,4vw,3rem)} .outcomes{margin-top:clamp(2rem,4vw,3rem)} .outcomes ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem} .outcomes li{display:flex;gap:.75rem;font-size:.9375rem;color:var(--ink-soft);align-items:baseline} .outcomes li::before{content:"";width:.4rem;height:.4rem;flex:none;background:var(--c,var(--husk));translate:0 -.15rem} .sib-nav{background:var(--carbon);padding-block:clamp(2.5rem,5vw,3.5rem)} .sib-nav .u{color:#8C7C69;margin-bottom:1.25rem} .sib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2vw,1.5rem)} /* column flow blockifies the two spans: the label sits on its own line and the descriptor starts on the next. As inline spans they ran together and the margin-top below was being ignored. */ .sib{ border:1px solid var(--carbon-3);padding:1.25rem;text-decoration:none;color:var(--coir); display:flex;flex-direction:column; transition:border-color .3s var(--ease-slow),background .3s var(--ease-slow); } .sib:hover{border-color:var(--husk-lift);background:rgba(241,232,217,.03)} .sib .k{font-family:Archivo;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8C7C69} .sib .n{margin-top:.5rem;font-family:Archivo;font-weight:700;font-size:1.125rem;line-height:1.3;text-wrap:balance} @media (max-width:60rem){.line-grid,.built-grid,.sib-grid{grid-template-columns:1fr}} /* ---------- print ---------- This site is built from full-viewport, scroll-snapped sections with absolutely-positioned photo/video backgrounds — none of that survives pagination. The print rules below keep the actual design (section colours, photography) intact and only fix what paper can't render: scroll-triggered reveals, fixed/full-height/absolutely-positioned layout, and chrome with no purpose off-screen (nav, forms, buttons). NOTE: most browsers also require the person printing to enable "Background graphics" in the print dialog, or section colours and photos will be dropped regardless of any CSS here. */ @media print{ /* .rv starts every reveal-on-scroll element at opacity:0 until an IntersectionObserver adds .in as it crosses the viewport; anything below the fold at print time would otherwise print invisible. */ .rv,.rv.in{opacity:1 !important;transform:none !important;transition:none !important} html{scroll-snap-type:none !important;scroll-behavior:auto !important;overflow-x:visible !important} main > section,.chain-head,.stage,.recap{scroll-snap-align:none !important;scroll-margin-top:0 !important} /* ask the browser to actually paint background colours/images instead of stripping them to save ink (still gated by the dialog setting above) */ *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important;box-shadow:none !important;text-shadow:none !important} body{font-size:11pt;line-height:1.5} /* header / nav / skip link / mobile nav panel */ .top,.nav-panel,.nav-toggle,.skip-link{display:none !important} /* full-viewport / scroll-snapped sections become normal flowing content; background colour and text colour are left exactly as designed */ .hero,.about-hero,.page-hero,.stage,.chain-head,.recap,.fill-screen, .esg,.governance,.dev-model,.conviction,.contact,.foot-print,.role, .founder-section,.leadership,.simple,.biz-hero{ min-height:auto !important;height:auto !important; display:block !important;padding-block:1.5rem !important; border:0 !important; } .stage{page-break-inside:avoid;break-inside:avoid} /* background photography/video: pull it out of absolute positioning into a normal, capped-height block instead of hiding it outright */ .hero-media,.stage-media,.contact-media,.about-break,.footprint-crossfade{ position:static !important;inset:auto !important;z-index:auto !important; width:100% !important;height:auto !important;max-height:18rem !important; min-height:0 !important;overflow:hidden !important;margin-bottom:1rem !important; } .hero-media img,.hero-media video,.stage-media img,.contact-media img, .about-break img,.footprint-crossfade figure img{ position:static !important;width:100% !important;height:100% !important; max-height:18rem !important;object-fit:cover !important; } /* the homepage hero has no , only a