/* ========================================================================== BYZ — Design system Derived from: Byworth & Syz Corporate Identity, © Studio Voile 2026 Every colour and typeface below traces to a page in that document. ========================================================================== */ /* -------------------------------------------------------------------------- 1. BRAND TYPEFACES Rapid ST (wordmark), Unica 77 (sans), Lyon Text (serif) are commercially licensed. Drop the licensed .woff2 files into /assets/fonts/ and these rules activate automatically. Until then the stacks fall through to the free stand-ins loaded from Google Fonts in each page . See /assets/fonts/README.md before self-hosting — a DESKTOP licence does not permit web serving. -------------------------------------------------------------------------- */ @font-face{ font-family:'Unica 77'; src:url('../fonts/Unica77LL-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Unica 77'; src:url('../fonts/Unica77LL-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Lyon Text'; src:url('../fonts/LyonText-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Lyon Text'; src:url('../fonts/LyonText-RegularItalic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Lyon Text'; src:url('../fonts/LyonText-Semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:'Rapid ST'; src:url('../fonts/RapidST-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } /* -------------------------------------------------------------------------- 2. TOKENS -------------------------------------------------------------------------- */ :root{ /* Structure colours (CI p.17) */ --core:#1D1D1B; /* BYZ Core — authority, precision, confidence */ --core-raised:#252523; /* Core, one step up, for surface separation */ --core-soft:#2B2B28; --canvas:#D0C8BB; /* BYZ Canvas — clarity, openness, perspective */ /* Activation colours (CI p.17) */ --foundation:#B46930; /* Copper. NOTE: 4.02:1 on Core — large text, */ /* rules and graphics only, never body copy. */ --signal:#FDD41A; /* Used SELECTIVELY: insight, action, emphasis */ /* Derived tints (not new brand colours — Canvas and Core mixed) */ --canvas-dim:#A7A199; /* body copy on Core — 6.3:1 */ --canvas-faint:#7C776F; /* de-emphasised meta on Core */ --core-dim:#55534C; /* body copy on Canvas */ --line:rgba(208,200,187,.16); --line-strong:rgba(208,200,187,.30); --line-on-canvas:rgba(29,29,27,.16); --foundation-line:rgba(180,105,48,.45); /* Type */ --sans:'Unica 77','Inter','Helvetica Neue',Arial,sans-serif; --serif:'Lyon Text','Source Serif 4',Georgia,'Times New Roman',serif; --wordmark:'Rapid ST','Unica 77','Inter',sans-serif; /* Layout */ --max:1180px; --gut:32px; --nav-h:76px; } /* -------------------------------------------------------------------------- 3. RESET & BASE -------------------------------------------------------------------------- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--core); color:var(--canvas); font-family:var(--sans); font-size:16px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--signal);outline-offset:3px; } ::selection{background:var(--signal);color:var(--core)} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--signal);color:var(--core);padding:12px 20px; font-size:12px;letter-spacing:.14em;text-transform:uppercase; } .skip:focus{left:0} /* -------------------------------------------------------------------------- 4. TYPE SCALE Serif carries display. Sans carries UI, labels and body. The CI has no monospace face, so tracked sans caps do the label job. -------------------------------------------------------------------------- */ .display-xl,h1{ font-family:var(--serif);font-weight:400;font-style:normal; font-size:clamp(46px,6.6vw,96px);line-height:1.05;letter-spacing:-.006em; } .display-l,h2{ font-family:var(--serif);font-weight:400; font-size:clamp(33px,4.2vw,54px);line-height:1.14;letter-spacing:-.005em; } .display-m,h3{ font-family:var(--serif);font-weight:400; font-size:clamp(24px,2.5vw,32px);line-height:1.22; } h4{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.3} h1 em,h2 em,h3 em,.display-xl em,.display-l em{ font-style:italic;color:var(--signal); } .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--canvas-dim);max-width:60ch} .prose p{color:var(--canvas-dim);font-size:16px;margin-bottom:20px;max-width:68ch} .prose p:last-child{margin-bottom:0} .prose strong{color:var(--canvas);font-weight:500} /* Eyebrow label. The rule before it is Foundation copper — a graphic element, so the 4.02:1 ratio is not a text-contrast concern. */ .label{ font-family:var(--sans); font-size:11.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase; color:var(--canvas);display:flex;align-items:center;gap:15px; } .label::before{content:"";width:38px;height:1px;background:var(--foundation);flex:none} .label--bare::before{display:none} /* -------------------------------------------------------------------------- 5. HEX MOTIF The honeycomb cell is the brand's structural module (CI p.16). It is used as the list bullet and the section divider so the device encodes the identity rather than decorating it. -------------------------------------------------------------------------- */ .hex{ width:10px;height:11px;flex:none;background:var(--foundation); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } .hex-rule{ display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0; } .hex-rule::before,.hex-rule::after{content:"";height:1px;background:var(--line);flex:1} .hex-rule i{width:9px;height:10px;background:var(--foundation);flex:none; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)} /* -------------------------------------------------------------------------- 6. HEADER -------------------------------------------------------------------------- */ .site-header{ position:sticky;top:0;z-index:60; background:linear-gradient(to bottom,rgba(29,29,27,.96),rgba(29,29,27,.86)); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px} /* Public-facing brand is "BYZ" only (CI p.8/10) */ .brand{display:flex;align-items:center;gap:12px;flex:none} .brand .mark{width:32px;height:32px;color:var(--canvas)} .brand .type{ font-family:var(--wordmark);font-size:20px;font-weight:400; letter-spacing:.22em;color:var(--canvas);line-height:1;padding-top:2px; } .nav-list{display:flex;align-items:center;gap:34px;list-style:none} .nav-list > li{position:relative} .nav-link{ font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; color:var(--canvas-dim);transition:color .22s;display:flex;align-items:center;gap:6px; background:none;border:0;font-family:inherit;cursor:pointer;padding:0; } .nav-link:hover,.nav-link[aria-current="page"]{color:var(--canvas)} .nav-link[aria-current="page"]{color:var(--signal)} .nav-link .caret{width:7px;height:7px;border-right:1px solid currentColor; border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)} .submenu{ position:absolute;top:calc(100% + 18px);left:-20px;min-width:255px; background:var(--core-raised);border:1px solid var(--line); padding:8px 0;list-style:none;display:none; } /* The 18px offset above used to be dead space belonging to neither the trigger nor the menu, so the pointer lost hover while crossing it and the dropdown closed before it could be reached. This transparent bridge spans the gap. */ .submenu::before{ content:"";position:absolute;left:0;right:0;top:-19px;height:19px; } /* Opens on hover and on keyboard focus. :focus-within means tabbing to the parent link reveals the submenu with no JavaScript involved. */ .nav-list > li:hover .submenu, .nav-list > li:focus-within .submenu, .submenu.open{display:block} .submenu a{ display:block;padding:11px 22px;font-size:13px;color:var(--canvas-dim); transition:color .2s,background .2s; } .submenu a:hover{color:var(--canvas);background:rgba(208,200,187,.05)} .submenu .group{ padding:14px 22px 6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--foundation);font-weight:500; } .nav-cta{ font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; border:1px solid var(--line-strong);color:var(--canvas);padding:11px 20px; transition:background .22s,color .22s,border-color .22s;white-space:nowrap;flex:none; } .nav-cta:hover{background:var(--signal);border-color:var(--signal);color:var(--core)} .menu-btn{ display:none;background:none;border:1px solid var(--line-strong);color:var(--canvas); font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.15em; text-transform:uppercase;padding:10px 15px;cursor:pointer; } #mobile-nav{display:none;background:var(--core);border-top:1px solid var(--line); max-height:calc(100vh - var(--nav-h));overflow-y:auto} #mobile-nav.open{display:block} #mobile-nav ul{list-style:none} #mobile-nav a{display:block;padding:15px var(--gut);font-size:13px; letter-spacing:.12em;text-transform:uppercase;color:var(--canvas); border-bottom:1px solid var(--line)} #mobile-nav .sub a{padding-left:calc(var(--gut) + 20px);font-size:12px; text-transform:none;letter-spacing:.04em;color:var(--canvas-dim)} /* -------------------------------------------------------------------------- 7. HERO — home Signature element: the honeycomb lattice. It is the one bold move; every other surface stays quiet. -------------------------------------------------------------------------- */ .hero{ position:relative;min-height:calc(100vh - var(--nav-h));display:flex;align-items:center; overflow:hidden; background:radial-gradient(1100px 640px at 76% 16%,rgba(43,43,40,.92) 0,transparent 62%),var(--core); /* Containment boundary for the hero mark's screen blend: it composites against the hero ground, the veil and the lattice, and nothing beyond. */ isolation:isolate; } #hive-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55} .hero-veil{position:absolute;inset:0; background:linear-gradient(100deg,rgba(29,29,27,.95) 36%,rgba(29,29,27,.55) 66%,rgba(29,29,27,.15) 100%)} /* No z-index here on purpose. z-index would make this a stacking context and isolate the mark's blend from the hero ground behind it — which is exactly why the mark showed as a dark square. It still paints above the canvas and veil because all three are positioned and this one comes last in the DOM. */ .hero-inner{ position:relative;padding:120px 0; display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center; } .hero h1{max-width:12ch;margin-top:26px} .hero .lede{margin-top:30px;max-width:540px} .hero-actions{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap} /* Animated brand mark. Decorative — the wordmark in the header already names the brand, so this carries aria-hidden and an empty alt. */ /* screen blend drops the mark's dark ground out against Core, so the square video frame reads as a floating glow rather than a pasted-on tile. */ .hero-logo{display:flex;justify-content:flex-end} .hero-logo video{width:100%;max-width:400px;height:auto;mix-blend-mode:screen} .hero-foot{position:absolute;bottom:0;left:0;right:0;z-index:2;border-top:1px solid var(--line)} .hero-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; padding-top:18px;padding-bottom:18px} .hero-foot span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--canvas-faint)} /* -------------------------------------------------------------------------- 8. BUTTONS Signal is the primary action — the CI reserves it for exactly this. -------------------------------------------------------------------------- */ .btn{ display:inline-block;font-family:inherit;font-size:12.5px;font-weight:500; letter-spacing:.15em;text-transform:uppercase;padding:16px 30px; border:1px solid var(--line-strong);transition:.22s;cursor:pointer; } .btn--signal{background:var(--signal);color:var(--core);border-color:var(--signal)} .btn--signal:hover{background:#FFE04F;border-color:#FFE04F} .btn--ghost{color:var(--canvas);background:none} .btn--ghost:hover{background:rgba(208,200,187,.07);border-color:var(--line-strong)} .btn--on-canvas{color:var(--core);border-color:var(--line-on-canvas)} .btn--on-canvas:hover{background:var(--core);color:var(--canvas);border-color:var(--core)} /* -------------------------------------------------------------------------- 9. SECTIONS & SURFACES Two grounds only: Core (dark) and Canvas (light). The CI describes Canvas as the surface that lets "ideas, insights, and information stand with precision and focus", so long-form reading inverts to it. -------------------------------------------------------------------------- */ .section{padding:120px 0} .section--tight{padding:84px 0} .section--core{background:var(--core)} .section--raised{background:var(--core-raised)} .section--canvas{background:var(--canvas);color:var(--core)} .section--canvas .label{color:var(--core)} .section--canvas .lede,.section--canvas .prose p{color:var(--core-dim)} .section--canvas .prose strong{color:var(--core)} .section--canvas h1 em,.section--canvas h2 em,.section--canvas h3 em{color:var(--foundation)} .section--canvas .hex-rule::before,.section--canvas .hex-rule::after{background:var(--line-on-canvas)} .sec-head{max-width:660px;margin-bottom:70px} /* Section head whose standfirst runs the full page measure. */ .sec-head--wide{max-width:none} .sec-head--wide .lede{max-width:none} .sec-head .label{margin-bottom:20px} .sec-head .lede{margin-top:22px} /* -------------------------------------------------------------------------- 10. PAGE HERO — inner pages -------------------------------------------------------------------------- */ .page-hero{position:relative;background:var(--core);overflow:hidden} .page-hero__media{position:absolute;inset:0} .page-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.42} .page-hero__media::after{content:"";position:absolute;inset:0; background:linear-gradient(94deg,rgba(29,29,27,.95) 30%,rgba(29,29,27,.62) 62%,rgba(29,29,27,.34) 100%)} .page-hero__inner{position:relative;z-index:2;padding:126px 0 108px;max-width:820px} .page-hero h1{margin-top:24px;font-size:clamp(38px,5vw,72px)} .page-hero .lede{margin-top:26px} .crumb{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--canvas-faint); margin-bottom:22px} .crumb a:hover{color:var(--canvas)} .crumb span{color:var(--foundation);padding:0 8px} /* -------------------------------------------------------------------------- 11. STRATEGY / ENGINE CARDS No 01/02 numbering: the two engines are a pair, not a sequence, so the label carries the real distinction instead. -------------------------------------------------------------------------- */ .engine-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)} .engine{padding:56px 48px} .engine + .engine{border-left:1px solid var(--line)} /* Pillar photograph, full-bleed across the top of the card. The negative margins cancel the card padding, so they track it at each breakpoint. */ .engine__media{aspect-ratio:16/10;overflow:hidden;background:var(--core); margin:-56px -48px 34px} .engine__media img{width:100%;height:100%;object-fit:cover} .engine__tag{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--foundation);margin-bottom:22px} .engine h3{margin-bottom:18px} .engine > p{color:var(--canvas-dim);font-size:15.5px;margin-bottom:30px} .engine ul{list-style:none} .engine li{padding:14px 0;border-top:1px solid rgba(208,200,187,.12); font-size:14.5px;display:flex;align-items:flex-start;gap:14px;color:var(--canvas-dim)} .engine li .hex{margin-top:6px} .engine li a{color:var(--canvas);border-bottom:1px solid var(--foundation-line); transition:border-color .2s} .engine li a:hover{border-bottom-color:var(--signal)} /* The engine block was built for the dark grounds. Dropped onto Canvas its inherited colours measured 1.5:1, and the list links were Canvas-on-Canvas, i.e. invisible. On the light ground everything is restated in Core. */ .section--canvas .engine-grid, .section--canvas .engine li{border-color:var(--line-on-canvas)} .section--canvas .engine + .engine{border-left-color:var(--line-on-canvas)} .section--canvas .engine li{border-top-color:var(--line-on-canvas)} .section--canvas .engine > p, .section--canvas .engine li, .section--canvas .engine li a{color:var(--core)} .section--canvas .engine li a{border-bottom-color:var(--foundation)} .section--canvas .engine li a:hover{border-bottom-color:var(--core)} /* Partner responsible for a pillar. The type styling sits on the paragraph so the "Led by" prefix matches the name; only the name carries the profile link. */ .engine__partner{ margin-top:28px;padding-top:20px;border-top:1px solid var(--line); font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--canvas-faint); } .section--canvas .engine__partner{border-top-color:var(--line-on-canvas);color:var(--core)} .engine__partner a{color:var(--canvas);border-bottom:1px solid var(--foundation); transition:border-color .2s} .section--canvas .engine__partner a{color:var(--core)} .engine__partner a:hover{border-bottom-color:var(--signal)} .section--canvas .engine__partner a:hover{border-bottom-color:var(--core)} /* -------------------------------------------------------------------------- 12. CARD GRID -------------------------------------------------------------------------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px; background:var(--line);border:1px solid var(--line)} .card{background:var(--core-raised);display:flex;flex-direction:column; transition:background .25s} .card:hover{background:var(--core-soft)} /* The comps are portrait (762x1018, ~3:4). A 4:3 landscape window cropped away 44% of each photo, which read as heavily zoomed in. At 4:5 roughly 94% of the frame survives. Go to 3/4 to show the photo whole. */ .card__media{aspect-ratio:4/5;overflow:hidden;background:var(--core)} .card__media img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease,opacity .3s;opacity:.9} .card:hover .card__media img{transform:scale(1.04);opacity:1} .card__body{padding:32px 30px 34px;flex:1;display:flex;flex-direction:column} .card__tag{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--foundation);margin-bottom:14px} .card h3{font-size:23px;margin-bottom:12px} .card p{font-size:14.5px;color:var(--canvas-dim);margin-bottom:22px;flex:1} .card__more{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--canvas);display:flex;align-items:center;gap:9px} .card__more .hex{width:8px;height:9px} .card:hover .card__more{color:var(--signal)} .card:hover .card__more .hex{background:var(--signal)} /* -------------------------------------------------------------------------- 13. PILLARS (Visual Pillars, CI p.26) & PRINCIPLES -------------------------------------------------------------------------- */ .pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border:1px solid var(--line)} /* Two-up variant. A class, not an inline style: inline styles outrank media queries, so an inline grid-template-columns stayed two-wide at 375px and squeezed the cards into ~160px tracks. */ .pillar-grid--2{grid-template-columns:repeat(2,1fr)} .pillar{background:var(--core-raised);padding:46px 38px} .section--canvas .pillar-grid{background:var(--line-on-canvas);border-color:var(--line-on-canvas)} .section--canvas .pillar{background:var(--canvas)} .pillar svg{color:var(--foundation);margin-bottom:22px} /* Foundation copper measures only 2.53:1 against Canvas — below the 3:1 that WCAG 1.4.11 requires for non-text graphics, and these are 1.2px strokes. On the light ground the icons switch to Core (10.2:1). */ .section--canvas .pillar svg{color:var(--core)} /* Pillar cards sit under a section h2, so their headings are h3 to keep the outline contiguous. They keep the h4 visual size. */ .pillar h3{font-size:22px;font-weight:600;line-height:1.3;margin-bottom:11px} .pillar h4{margin-bottom:11px} .pillar p{font-size:14.5px;color:var(--canvas-dim)} .section--canvas .pillar p{color:var(--core-dim)} /* -------------------------------------------------------------------------- 14. STATS & KEYWORD STRIP -------------------------------------------------------------------------- */ .stats{display:flex;gap:52px;flex-wrap:wrap;margin-top:40px} .stats div span{display:block;font-family:var(--serif);font-size:42px;line-height:1; color:var(--canvas)} .stats div small{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--canvas-faint)} .section--canvas .stats div span{color:var(--core)} .section--canvas .stats div small{color:var(--core-dim)} /* Positioning keywords, verbatim from CI p.19. An explicit three-column grid, not flex-wrap: wrapping fitted as many as would go per row, which left the six commitments as a row of five and a lone orphan. Two rows of three. */ .keywords{display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);border-left:1px solid var(--line)} /* Tracked caps variant, for short declarative statements. */ .keywords--caps li{text-transform:uppercase;letter-spacing:.13em;font-size:12px} /* This block was written for the dark grounds: its text is Canvas and its rules are the Canvas-on-dark hairline. Dropped onto the light ground that rendered beige on beige, i.e. invisible. Restated in Core. */ .section--canvas .keywords{ border-top-color:var(--line-on-canvas);border-left-color:var(--line-on-canvas); } .section--canvas .keywords li{ color:var(--core); border-right-color:var(--line-on-canvas);border-bottom-color:var(--line-on-canvas); } .keywords li{list-style:none;padding:26px 24px; border-right:1px solid var(--line);border-bottom:1px solid var(--line); font-size:13.5px;letter-spacing:.02em;color:var(--canvas); display:flex;align-items:center;gap:12px} /* -------------------------------------------------------------------------- 15. SPLIT / EDITORIAL -------------------------------------------------------------------------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center} .split--wide{grid-template-columns:1fr 1fr;gap:70px} .split__media img{width:100%;height:auto;object-fit:cover} .split__media figcaption{font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--canvas-faint);margin-top:14px} blockquote.pull{font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(26px,3vw,40px);line-height:1.32;color:var(--canvas)} blockquote.pull strong{color:var(--signal);font-weight:400} .section--canvas blockquote.pull{color:var(--core)} .section--canvas blockquote.pull strong{color:var(--foundation)} /* h2 used as a column heading rather than a section opener, so it sits at the scale of the copy beside it instead of dominating it. */ .h2--compact{font-size:clamp(24px,2.4vw,30px);line-height:1.2;margin-bottom:18px} /* Attributed quote closing a section. */ .quote{margin-top:64px;max-width:70ch;border-top:1px solid var(--line);padding-top:34px} /* Quote opening a column rather than closing a section: no leading rule. */ .quote--flush{margin-top:0;border-top:0;padding-top:0} .section--canvas .quote{border-top-color:var(--line-on-canvas)} .quote blockquote{ font-family:var(--serif);font-size:clamp(20px,2.1vw,27px);line-height:1.4; color:var(--canvas); } .section--canvas .quote blockquote{color:var(--core)} .quote figcaption{ margin-top:20px;font-size:11.5px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--canvas-faint); display:flex;align-items:center;gap:14px; } .quote figcaption::before{content:"";width:26px;height:1px;background:var(--foundation);flex:none} .section--canvas .quote figcaption{color:var(--core-dim)} /* Photograph filling a column beside a fact table. Capped so a portrait comp cannot outrun the copy it sits next to. */ .contact-figure{margin:0} .contact-figure img{width:100%;max-width:420px;height:auto} /* Quotation carried inside a value card, above its explanatory copy. */ .pillar__quote{ font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.45; color:var(--canvas);margin-bottom:14px;padding-left:15px; border-left:2px solid var(--foundation); } .section--canvas .pillar__quote{color:var(--core)} /* Compact list nested inside a pillar card, where .point-list rules would be too heavy. Hexagon markers, no dividing rules. */ .mini-list{list-style:none;margin-top:15px} .mini-list li{ position:relative;padding-left:17px;margin-bottom:7px; font-size:13.5px;line-height:1.6;color:var(--canvas-dim); } .mini-list li:last-child{margin-bottom:0} .mini-list li::before{ content:"";position:absolute;left:0;top:8px;width:6px;height:7px; background:var(--foundation); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } .section--canvas .mini-list li{color:var(--core-dim)} /* "cause -> effect" pairs inside a point list. */ .implies{color:var(--foundation);padding:0 4px} .implies-label{color:var(--canvas)} .section--canvas .implies-label{color:var(--core)} /* Closing statement of an argument: the one line a reader should leave with. */ .objective{border-left:2px solid var(--foundation);padding:22px 0 22px 26px} .objective p:last-child{ font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);line-height:1.35; color:var(--canvas);margin-top:14px; } .section--canvas .objective p:last-child{color:var(--core)} .objective__arrow{color:var(--foundation);margin-right:10px} /* Data / fact table */ .facts{width:100%;border-collapse:collapse;margin-top:8px} .facts th,.facts td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line); font-size:14.5px;vertical-align:top} .facts th{width:38%;font-weight:500;color:var(--canvas);letter-spacing:.02em} .facts td{color:var(--canvas-dim)} .section--canvas .facts th,.section--canvas .facts td{border-color:var(--line-on-canvas)} .section--canvas .facts th{color:var(--core)} .section--canvas .facts td{color:var(--core-dim)} /* -------------------------------------------------------------------------- 16. NOTICES -------------------------------------------------------------------------- */ .notice{border:1px solid var(--line);padding:30px 32px;background:var(--core-raised)} .notice h6{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--foundation);margin-bottom:13px} .notice p{font-size:13.5px;line-height:1.75;color:var(--canvas-dim);margin-bottom:12px} .notice p:last-child{margin-bottom:0} /* Content the client still has to supply — visible on purpose, easy to grep */ .todo{border-left:2px solid var(--signal);background:rgba(253,212,26,.05); padding:18px 22px;margin:24px 0;max-width:68ch} .todo p{font-size:13.5px;color:var(--canvas-dim);margin:0} .todo b{color:var(--signal);font-weight:500;letter-spacing:.1em;text-transform:uppercase; font-size:10.5px;display:block;margin-bottom:7px} .section--canvas .todo{background:rgba(180,105,48,.07);border-left-color:var(--foundation)} .section--canvas .todo p{color:var(--core-dim)} .section--canvas .todo b{color:var(--foundation)} /* -------------------------------------------------------------------------- 17. CTA BAND -------------------------------------------------------------------------- */ .cta-band{background:var(--core-raised);border-top:1px solid var(--line); border-bottom:1px solid var(--line);padding:84px 0} .cta-band .inner{display:flex;justify-content:space-between;align-items:center; gap:44px;flex-wrap:wrap} .cta-band h2{max-width:20ch} /* -------------------------------------------------------------------------- 18. FOOTER The four-column link grid was removed in the 2026 restructure — with a five-item nav it only duplicated the header. Legal base line only. -------------------------------------------------------------------------- */ .site-footer{background:var(--core);border-top:1px solid var(--line);padding:40px 0 34px} .foot-base{display:flex;justify-content:space-between;align-items:center;gap:24px; flex-wrap:wrap} .foot-base small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--canvas-faint)} .foot-base nav{display:flex;gap:24px} .foot-base nav a{font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--canvas-faint)} .foot-base nav a:hover{color:var(--canvas)} /* -------------------------------------------------------------------------- 19. REVEAL -------------------------------------------------------------------------- */ /* Only hide reveal blocks when JavaScript is present to un-hide them. The .js class is set by an inline script in , so if the script never runs the content is simply visible instead of permanently invisible. */ .js .reveal{opacity:0;transform:translateY(22px); transition:opacity .75s ease,transform .75s ease} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;transition:none} #hive-canvas{display:none} html{scroll-behavior:auto} .card__media img,.card,.btn,.nav-link{transition:none} .card:hover .card__media img{transform:none} } /* -------------------------------------------------------------------------- 20. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width:1080px){ .split,.split--wide{gap:52px} .hero-logo video{max-width:320px} } @media (max-width:960px){ :root{--gut:24px} .nav-list,.nav-cta{display:none} .menu-btn{display:block} .engine-grid,.pillar-grid,.pillar-grid--2{grid-template-columns:1fr} .keywords{grid-template-columns:repeat(2,1fr)} .engine + .engine{border-left:0;border-top:1px solid var(--line)} .split,.split--wide{grid-template-columns:1fr;gap:44px} .split__media{order:-1} .section{padding:82px 0} .section--tight{padding:60px 0} .engine{padding:40px 28px} .engine__media{margin:-40px -28px 28px} .pillar{padding:36px 28px} .sec-head{margin-bottom:46px} .page-hero__inner{padding:78px 0 66px} .hero-inner{padding:96px 0;grid-template-columns:1fr;gap:40px} .hero-logo{justify-content:flex-start;order:-1} .hero-logo video{max-width:220px} .cta-band{padding:62px 0} .stats{gap:34px} } @media (max-width:560px){ .keywords{grid-template-columns:1fr} .stats div span{font-size:34px} .hero-foot{position:static;border-top:1px solid var(--line)} .hero{min-height:0} .hero-inner{padding:70px 0 56px} } /* -------------------------------------------------------------------------- 22. PRACTICE GRID Two columns sharing a heading row, so the right-hand column begins level with the left column's body copy rather than with the heading above it. The rows size to content, so the alignment holds however many lines the heading wraps to; a fixed offset would break as soon as it went from two lines to one. -------------------------------------------------------------------------- */ .practice-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:70px;align-items:start} .practice-grid__head{grid-column:1;grid-row:1} /* Row 2 holds both intros. It sizes to the taller of them, so row 3 starts at one height and the two lists' rules line up across the columns. Without the shared row the one-line label pulled its list above the two-line paragraph's. */ .practice-grid__intro{grid-row:2;margin-top:18px} .practice-grid__intro--a{grid-column:1} .practice-grid__intro--b{grid-column:2} .practice-grid__list{grid-row:3} .practice-grid__list--a{grid-column:1} .practice-grid__list--b{grid-column:2} @media (max-width:960px){ .practice-grid{grid-template-columns:1fr;column-gap:0} .practice-grid__intro--a{grid-column:1;grid-row:2} .practice-grid__list--a{grid-column:1;grid-row:3} .practice-grid__intro--b{grid-column:1;grid-row:4;margin-top:46px} .practice-grid__list--b{grid-column:1;grid-row:5} } /* -------------------------------------------------------------------------- 21. POINT LIST Standalone version of the engine bullet list, for strategy pages. -------------------------------------------------------------------------- */ .point-list{list-style:none;margin-top:30px} .point-list li{padding:14px 0;border-top:1px solid var(--line-on-canvas); font-size:14.5px;display:flex;align-items:flex-start;gap:14px;color:var(--core-dim)} .point-list li .hex{margin-top:6px} .section--core .point-list li{border-top-color:var(--line);color:var(--canvas-dim)}