/* ============================================================================ CFOi — Everybody deserves good finance. Shared stylesheet for every page. Colour is locked to the Brand Kit. Do not introduce new hues: #0D0D0D ink #1F1F1F panel #E6E6E6 paper #E10B17 Signal Red Everything else in here is a neutral derived from those four. Red is a signal, not a decoration — it marks the one thing that matters. ========================================================================= */ /* ---------------------------------------------------------------- tokens */ :root{ /* brand */ --ink:#0D0D0D; --panel:#1F1F1F; --paper:#E6E6E6; --red:#E10B17; /* dark surface (default) */ --bg:var(--ink); --surface:var(--panel); --surface-2:#171717; --line:#2A2A2A; --line-2:#3A3A3A; --text:var(--paper); --muted:#9A9A9A; --dim:#6A6A6A; /* motion + rhythm */ --ease:cubic-bezier(.22,.61,.36,1); --pad:clamp(1.5rem,6vw,3rem); --sec:clamp(4.5rem,12vw,8rem); --nav-h:64px; } /* Inverted band — echoes the light panels in the Brand Kit. */ .invert{ --bg:var(--paper); --surface:#F4F4F4; --surface-2:#DCDCDC; --line:#CBCBCB; --line-2:#B4B4B4; --text:var(--ink); --muted:#4E4E4E; --dim:#767676; background:var(--bg); color:var(--text); } /* ----------------------------------------------------------------- reset */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)} body{ background:var(--ink); color:var(--paper); font-family:'Sora',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; font-weight:300; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} /* Inline links inside body copy. The global reset above strips colour and underline so nav, cards and buttons stay clean — which leaves a link inside a sentence invisible. This is the opt-in style for those: a red rule under the words, using the accent already carrying every other emphasis on the site, rather than a browser-blue underline that belongs to nobody. */ .ln{border-bottom:1px solid var(--red);padding-bottom:1px; transition:color .2s var(--ease),border-color .2s var(--ease)} .ln:hover{color:var(--red)} .ln:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-bottom-color:transparent} img,svg{display:block;max-width:100%} :focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px} .wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:var(--pad)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Skip link — first thing a keyboard lands on. */ .skip{position:absolute;left:var(--pad);top:-4rem;z-index:200; background:var(--red);color:#fff;padding:.7rem 1.1rem;border-radius:2px; font-size:.85rem;font-weight:600;transition:top .2s var(--ease)} .skip:focus{top:.75rem} /* -------------------------------------------------------------- reveals Gated behind .js on . If the script never runs, nothing is hidden. */ .js .rv{opacity:0;transform:translateY(16px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .rv.in{opacity:1;transform:none} /* ------------------------------------------------------------------ mark */ .mark .ring{fill:none;stroke:currentColor;stroke-width:13} .mark .dot{fill:var(--red)} .mark.live .dot{transform-origin:80px 50px;animation:pulse 4s var(--ease) infinite} @keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50% {opacity:.55;transform:scale(.8)} } /* dotless i carrying its own red dot, as drawn in the Brand Kit */ .i{position:relative;display:inline-block} .i .idot{position:absolute;left:50%;top:.06em;translate:-50% 0; width:.2em;height:.2em;border-radius:50%;background:var(--red)} /* ------------------------------------------------------------------- nav */ .nav{ position:fixed;inset:0 0 auto 0;z-index:100; height:var(--nav-h);display:flex;align-items:center; background:rgba(13,13,13,.72); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease),background .3s var(--ease); } .nav.stuck{border-bottom-color:var(--line);background:rgba(13,13,13,.92)} .nav .wrap{display:flex;align-items:center;gap:1rem} .nav .brand{min-height:44px} /* tap target — the mark alone is only 26px */ .brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;color:var(--paper)} .brand .mark{width:26px;height:26px;flex:none} .brand .wm{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;line-height:1} /* Eight items plus the brand and the CTA is a very tight row — the CTA stays on the bar by decision, so the links carry the compromise instead: slightly smaller type and a tighter gap. Measured to hold one line from 1024 up. */ .nav-links{display:none;align-items:center;gap:clamp(.7rem,1.2vw,1.15rem)} .nav-links a{ position:relative;font-size:.84rem;font-weight:400;color:var(--muted); white-space:nowrap; transition:color .25s var(--ease); } .nav-links a::after{ content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px; background:var(--red);transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease); } .nav-links a:hover{color:var(--paper)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)} .nav-links a[aria-current="page"]{color:var(--paper)} .nav .btn{min-height:40px;padding:0 1.1rem;font-size:.85rem;display:none;min-width:0} /* hamburger */ .burger{ width:44px;height:44px;margin-right:-10px;display:grid;place-items:center; background:none;border:0;color:var(--paper);cursor:pointer; } .burger span{display:block;width:20px;height:1.5px;background:currentColor; transition:transform .3s var(--ease),opacity .2s var(--ease)} .burger span+span{margin-top:5px} .menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .menu-open .burger span:nth-child(2){opacity:0} .menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* mobile sheet */ .sheet{ position:fixed;inset:var(--nav-h) 0 0 0;z-index:99; background:var(--ink); padding:clamp(2rem,9vw,3rem) 0; display:flex;flex-direction:column; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s; } .menu-open .sheet{opacity:1;visibility:visible;transform:none} .sheet .wrap{flex:1;display:flex;flex-direction:column} .sheet a.big{ padding:1.1rem 0;border-bottom:1px solid var(--line); font-size:clamp(1.5rem,7vw,2rem);font-weight:600;letter-spacing:-.02em; display:flex;align-items:center;justify-content:space-between; } .sheet a.big .n{font-size:.7rem;font-weight:300;color:var(--dim);letter-spacing:.2em} .sheet .btn{margin-top:auto} /* -------------------------------------------------------------- buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; min-height:56px;padding:0 1.7rem;border-radius:2px; font-size:1rem;font-weight:600;letter-spacing:-.01em;text-align:center; transition:transform .18s var(--ease),background .25s var(--ease), color .25s var(--ease),border-color .25s var(--ease), box-shadow .25s var(--ease); } .btn svg{width:18px;height:18px;flex:none} .btn-primary{background:var(--red);color:#fff} .btn-ghost{border:1px solid var(--line-2);color:var(--text)} .btn:active{transform:scale(.97)} @media (hover:hover){ .btn-primary:hover{box-shadow:0 0 28px 0 rgba(225,11,23,.35)} .btn-ghost:hover{border-color:var(--text);background:rgba(127,127,127,.08)} } .cta-row{display:flex;flex-direction:column;gap:.75rem;margin-top:clamp(2rem,6vw,2.75rem)} /* ----------------------------------------------------------- typography */ .eyebrow{ display:flex;align-items:center;gap:.9rem; font-size:.68rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase; color:var(--muted); } .eyebrow::before{content:'';width:28px;height:2px;background:var(--red);flex:none; transform-origin:left;transition:transform .6s var(--ease) .1s} .js .rv .eyebrow::before,.js .eyebrow.rv::before{transform:scaleX(0)} .js .rv.in .eyebrow::before,.js .eyebrow.rv.in::before{transform:scaleX(1)} h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.1} /* Base h1 serves the interior pages, whose headlines run long. */ h1{font-size:clamp(2rem,7vw,3.6rem)} h2{font-size:clamp(1.8rem,5.6vw,2.9rem);letter-spacing:-.035em} h3{font-size:clamp(1.1rem,4.2vw,1.3rem);letter-spacing:-.02em;line-height:1.25} em{font-style:normal;color:var(--red)} .lede{margin-top:clamp(1rem,3vw,1.4rem);max-width:46ch; font-size:clamp(1rem,3.4vw,1.2rem);color:var(--muted)} /* A heading that should read as an opening line. Keeps the h2 in the document outline for screen readers and search, without looking like a heading. */ .as-lede{max-width:34ch;font-size:clamp(1.05rem,3.6vw,1.32rem); font-weight:300;letter-spacing:-.015em;line-height:1.45;color:var(--text)} .head{margin-top:clamp(1.1rem,3.5vw,1.6rem)} .head+.lede{margin-top:clamp(.9rem,2.5vw,1.2rem)} section{padding-block:var(--sec)} .bordered{border-top:1px solid var(--line)} /* ----------------------------------------------------------------- hero */ .hero{ position:relative;display:flex;flex-direction:column;justify-content:center; min-height:100svh; padding-block:calc(var(--nav-h) + clamp(2.5rem,8vh,5rem)) clamp(2.5rem,7vh,6rem); overflow:hidden; } .hero::before{ content:'';position:absolute;left:50%;top:-14%;translate:-50% 0; width:min(150vw,940px);aspect-ratio:1; background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 62%); pointer-events:none; } .hero>.wrap{position:relative} .hero .mark{width:clamp(48px,12vw,60px);height:auto;color:var(--text)} /* No mark above it any more, so nothing to space away from. */ .hero .wordmark:first-of-type{margin-top:0} .wordmark{ margin-top:clamp(1rem,3.5vw,1.5rem); font-size:clamp(2.4rem,11.5vw,4.2rem); font-weight:600;line-height:1;letter-spacing:-.02em;display:flex; } .tagline{ margin-top:.85rem;font-size:clamp(.6rem,2.4vw,.72rem); font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--muted); } /* The hero triad is three short lines, so it can carry far more weight than the interior headings. Floor tuned to hold one line each at 320px. */ .hero h1{margin-top:clamp(1.8rem,6vw,2.75rem);font-size:clamp(1.55rem,7.8vw,4.6rem); line-height:1.02} /* All three hold one line at every width now, so the statements stack tight — the extra gap existed only to separate wrapped statements. */ .hero h1 span{display:block;text-wrap:balance} /* page header (interior pages) */ .phead{padding-block:calc(var(--nav-h) + clamp(3.5rem,11vw,6rem)) clamp(2.5rem,8vw,4rem)} /* scroll cue */ .cue{position:absolute;left:50%;bottom:1.5rem;translate:-50% 0;color:var(--dim); animation:bob 2.6s var(--ease) infinite} .cue svg{width:20px;height:20px} @keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}} /* ---------------------------------------------------------------- stats */ .stat-grid{display:grid;gap:clamp(2.25rem,7vw,3rem)} .stat .rule{display:block;width:32px;height:2px;background:var(--red);margin-bottom:1.3rem; transform-origin:left;transition:transform .6s var(--ease) .15s} .js .rv .rule{transform:scaleX(0)} .js .rv.in .rule{transform:scaleX(1)} .stat .num{display:block;font-size:clamp(2.4rem,10vw,3.6rem);font-weight:200; line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums} /* A stat whose value is a phrase, not a figure — sized to sit level with the numerals rather than dwarf them. */ .stat .num.txt{font-size:clamp(1.5rem,5vw,1.9rem);font-weight:300; letter-spacing:-.025em;line-height:1.12;text-wrap:balance} .stat .lab{display:block;margin-top:.8rem;max-width:26ch;font-size:.9rem;color:var(--muted)} /* ------------------------------------------------------------------ gap "What most teams have" vs "What's missing". The have-column is inert dashes; the missing-column carries the red dots. The asymmetry is the argument — you should be able to read it without reading it. */ .gap{display:grid;gap:clamp(2rem,6vw,3rem);margin-top:clamp(2.25rem,6vw,3rem)} .gap-col h3{font-size:.68rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase; color:var(--muted)} .gap-col ul{list-style:none;margin-top:1.25rem;border-top:1px solid var(--line)} .gap-col li{display:flex;gap:.85rem;padding:.9rem 0;border-bottom:1px solid var(--line); font-size:.92rem;color:var(--muted)} .gap-col.have li::before{content:'';flex:none;width:9px;height:1px; background:var(--dim);margin-top:.78em} .gap-col.missing li{color:var(--text)} .gap-col.missing li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%; background:var(--red);margin-top:.55em} /* --------------------------------------------------------------- pillars */ .grid{display:grid;gap:1rem;margin-top:clamp(2.25rem,6vw,3rem)} .card{ position:relative;background:var(--surface);border-radius:2px;overflow:hidden; padding:clamp(1.6rem,5vw,2.1rem); transition:transform .3s var(--ease),background .3s var(--ease); } .card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red); transform-origin:top;transition:transform .65s var(--ease) .1s} .js .rv.card::before{transform:scaleY(0)} .js .rv.card.in::before{transform:scaleY(1)} .card .n{display:block;font-size:.7rem;letter-spacing:.2em;color:var(--dim);margin-bottom:1rem} .card p{margin-top:.7rem;font-size:.92rem;color:var(--muted)} .card:active{transform:scale(.99)} @media (hover:hover){.card:hover{transform:translateY(-4px)}} /* A card that is a link says so — otherwise the whole tile is a hit target with nothing indicating it. */ a.card h3::after{content:'\2192';margin-left:.5rem;color:var(--red); display:inline-block;transition:transform .3s var(--ease)} @media (hover:hover){a.card:hover h3::after{transform:translateX(4px)}} /* Two-up grid — used where there are exactly two items and a three-column grid would leave an obvious hole. */ .duo{display:grid;gap:1rem;margin-top:clamp(2.25rem,6vw,3rem)} @media (min-width:700px){.duo{grid-template-columns:1fr 1fr}} /* A row of partner marks under a page header. Left-aligned to sit with the heading rather than centred, per the Brand Kit's alignment discipline. */ .logo-row{display:flex;flex-wrap:wrap;align-items:center; gap:clamp(1.75rem,5vw,3rem); margin-top:clamp(2rem,5vw,2.75rem); padding-top:clamp(1.75rem,4vw,2.25rem); border-top:1px solid var(--line)} .logo-row img{height:clamp(30px,7vw,42px);width:auto;max-width:190px;object-fit:contain} /* Partner logo slot. Height-constrained so marks of different proportions sit on one optical line; drop in each partner's own reversed/white asset rather than recolouring a colour one — most brand guidelines forbid that. */ .plogo{height:56px;display:flex;align-items:center;justify-content:center; margin-bottom:1.75rem} .plogo img{max-height:100%;width:auto;max-width:210px;object-fit:contain} /* Knock a coloured mark to flat white. brightness(0) crushes every channel to black first, so invert(1) lands on pure white regardless of the source colour or gradient. Applied per-logo, not globally — remove the class from the markup to restore a logo's own colours. */ .plogo img.mono{filter:brightness(0) invert(1)} .plogo-ph{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim); border:1px dashed var(--line-2);border-radius:2px;padding:.4rem .7rem;line-height:1} /* --------------------------------------------------------------- domains Domain name left, examples right. Denser than a card grid, so it carries far more detail in the same height — and the five names still scan in a couple of seconds, which a twelve-card menu would not. */ .domains{margin-top:clamp(2.25rem,6vw,3rem);border-top:1px solid var(--line)} .domain{display:grid;gap:.45rem;padding:1.5rem 0;border-bottom:1px solid var(--line)} .domain h3{margin:0;font-size:1.05rem} .domain p{margin:0;font-size:.92rem;color:var(--muted);max-width:60ch} .domain .sep{color:var(--red);padding:0 .15em} @media (min-width:820px){ .domain{grid-template-columns:230px 1fr;gap:0 2.5rem;align-items:baseline} } /* plain (borderless) list grid — services detail, ideal client */ .list-grid{display:grid;gap:clamp(1.75rem,5vw,2.5rem);margin-top:clamp(2.25rem,6vw,3rem)} .item{padding-top:1.25rem;border-top:1px solid var(--line)} .item .n{display:block;font-size:.68rem;letter-spacing:.2em;color:var(--red);margin-bottom:.8rem} .item p{margin-top:.6rem;font-size:.9rem;color:var(--muted)} /* ----------------------------------------------------------------- steps */ .steps{display:grid;gap:0;margin-top:clamp(2.25rem,6vw,3.5rem);counter-reset:s} .step{position:relative;padding:1.5rem 0 1.5rem 3.25rem;border-top:1px solid var(--line)} .step::before{ counter-increment:s;content:'0' counter(s); position:absolute;left:0;top:1.5rem; font-size:.72rem;letter-spacing:.16em;color:var(--red); } .step::after{content:'';position:absolute;left:11px;top:3.1rem;bottom:-1px;width:1px;background:var(--line)} .step:last-of-type::after{display:none} .step p{margin-top:.55rem;font-size:.9rem;color:var(--muted);max-width:60ch} .step-note{ margin-top:1.75rem;padding:1.25rem 1.4rem; background:var(--surface);border-left:2px solid var(--red);border-radius:2px; font-size:.85rem;color:var(--muted); } .step-note strong{color:var(--text);font-weight:600} /* ---------------------------------------------------------------- panels One collapsible per route in. A reader cares about the door they picked, so showing all three expanded is showing two-thirds waste. */ .panels{margin-top:clamp(2.25rem,6vw,3rem);border-top:1px solid var(--line)} .panels > details{border-bottom:1px solid var(--line)} .panels > details > summary{list-style:none;cursor:pointer;display:grid;gap:.35rem; padding:1.6rem 2.75rem 1.6rem 0;position:relative} .panels > details > summary::-webkit-details-marker{display:none} .panels > details > summary::after{content:'+';position:absolute;right:0;top:1.5rem; color:var(--red);font-size:1.5rem;font-weight:300;line-height:1} .panels > details[open] > summary::after{content:'\2212'} .panels summary h3{margin:0;font-size:clamp(1.15rem,3.6vw,1.4rem)} .panels summary .sub{font-size:.85rem;color:var(--muted)} .panels summary:hover h3{color:var(--text)} .panel-body{padding-bottom:2.25rem} .panel-body > .lede:first-child{margin-top:0} /* Stage rows inside the full-engagement panel, left expanded — the panel is already the gate, and a second layer of clicks would be hostile. */ .stages{margin-top:1.5rem;border-top:1px solid var(--line)} .stage{display:grid;gap:.4rem;padding:1.4rem 0;border-bottom:1px solid var(--line)} .stage:last-child{border-bottom:none} .stage .when{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; color:var(--red)} .stage h4{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em} .stage p{margin:0;font-size:.9rem;color:var(--muted);max-width:60ch} .stage .out{margin-top:.85rem;padding-left:1.1rem;border-left:2px solid var(--line-2); font-size:.86rem;color:var(--muted);max-width:58ch} .stage .out b{display:block;margin-bottom:.3rem;font-size:.62rem;font-weight:400; letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} @media (min-width:820px){ .stage{grid-template-columns:180px 1fr;gap:.4rem 2.5rem} .stage .when{grid-column:1;grid-row:1 / span 3} .stage h4,.stage p,.stage .out{grid-column:2} } /* Dated moments — used for the AI track, where the point is *when*. */ .marks{list-style:none;margin-top:clamp(2rem,5vw,2.5rem);border-top:1px solid var(--line)} .marks li{display:grid;gap:.25rem;padding:1.1rem 0;border-bottom:1px solid var(--line)} .marks .w{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)} .marks .t{font-size:.94rem;color:var(--text);max-width:58ch} @media (min-width:820px){ .marks li{grid-template-columns:180px 1fr;gap:0 2.5rem;align-items:baseline} } /* ------------------------------------------------------------ two-column */ .split{display:grid;gap:clamp(2.5rem,7vw,4rem);align-items:start} /* ----------------------------------------------------------- credentials */ .creds{margin-top:clamp(1.5rem,4vw,2rem);border-top:1px solid var(--line)} .creds li{list-style:none;display:flex;gap:.9rem;align-items:baseline; padding:.95rem 0;border-bottom:1px solid var(--line);font-size:.95rem} .creds li::before{content:'';width:5px;height:5px;flex:none;border-radius:50%; background:var(--red);translate:0 -3px} /* -------------------------------------------------------------- triggers Problem-led entry points. People search their symptom, not our service line — so the first thing on offer is their words, not ours. */ .triggers{margin-top:clamp(2rem,5vw,2.75rem);border-top:1px solid var(--line)} .trigger{display:flex;align-items:center;gap:1rem;padding:1.2rem 0; border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease)} .trigger .q{flex:1;min-width:0;font-size:clamp(1rem,3.2vw,1.12rem);letter-spacing:-.01em} .trigger .go{flex:none;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);transition:color .25s var(--ease)} .trigger .arw{width:16px;height:16px;flex:none;color:var(--dim); transition:transform .3s var(--ease),color .25s var(--ease)} /* Only the linked variant gets interaction affordances — a static row that shifts on hover reads as broken. */ a.trigger:active{transform:scale(.995)} @media (hover:hover){ a.trigger:hover{padding-left:.6rem} a.trigger:hover .arw{transform:translateX(4px);color:var(--text)} a.trigger:hover .go{color:var(--text)} } /* Press as a quiet strip rather than three cards — it is corroboration, not an argument, and it should not carry a section of its own. */ .press-strip{margin-top:clamp(2.25rem,5vw,3rem);padding-top:1.5rem; border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:.7rem 1.9rem;align-items:baseline} .press-strip .h{width:100%;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase; color:var(--dim);margin-bottom:.3rem} .press-strip span:not(.h){font-size:.9rem;color:var(--muted)} .press-strip b{color:var(--text);font-weight:400} /* ------------------------------------------------------------------- faq Native
— keyboard-operable and works with JS off. */ .faq{margin-top:clamp(2rem,5vw,2.75rem);border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.25rem; padding:1.25rem 0;cursor:pointer;list-style:none; font-size:1rem;font-weight:600;letter-spacing:-.01em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';flex:none;color:var(--red); font-size:1.4rem;font-weight:300;line-height:1} .faq details[open] summary::after{content:'\2212'} .faq summary:hover{color:var(--text)} .faq .a{padding:0 0 1.5rem;max-width:66ch;font-size:.92rem;color:var(--muted)} .faq .a p+p{margin-top:.8rem} /* ---------------------------------------------------------------- people Portraits are greyscaled in CSS so photos taken in different places and lighting still read as one set — the Brand Kit is monochrome throughout. */ .people{display:grid;gap:clamp(2.25rem,5vw,3rem);margin-top:clamp(2.25rem,6vw,3rem)} .person{display:grid;gap:1.15rem;align-content:start} /* An event poster or designed graphic. Unlike .portrait this keeps its own colour — it is finished artwork carrying partner logos, not a photograph being unified with others. */ /* A wide scene photograph — a stage, a room, an audience. Unlike .portrait it is NOT desaturated: in greyscale the speaker sinks into the banner behind her and the eye has nowhere to land. object-position pulls the frame down to the lower half, dropping the empty ceiling. */ .shot{margin-top:clamp(2.25rem,6vw,3rem);aspect-ratio:3/2;overflow:hidden; border:1px solid var(--line);border-radius:2px;background:var(--surface)} .shot img{width:100%;height:100%;object-fit:cover;object-position:center 75%} .shot-cap{margin-top:.85rem;font-size:.66rem;letter-spacing:.22em; text-transform:uppercase;color:var(--dim)} .poster{border:1px solid var(--line);border-radius:2px;overflow:hidden; background:var(--surface);align-self:start; /* .split only goes two-column at 960px. Below that the poster would otherwise stretch to the full wrap and dominate the page — at 768px that was a 659px square. Capped near the desktop column width so it stays the same size at every breakpoint. */ max-width:420px} .poster img{display:block;width:100%;height:auto} .portrait{aspect-ratio:4/5;background:var(--surface);border:1px solid var(--line); display:grid;place-items:center;overflow:hidden} .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)} .portrait .ph{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; color:var(--dim);text-align:center;padding:1.5rem;line-height:2} .person .nm{font-size:1.15rem;font-weight:600;letter-spacing:-.02em} .person .role{margin-top:.3rem;font-size:.85rem;color:var(--muted)} .person p{margin-top:.75rem;font-size:.9rem;color:var(--muted)} .tags{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.45rem 1rem; font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .tags span{display:flex;align-items:center;gap:.45rem} .tags span::before{content:'';flex:none;width:4px;height:4px;border-radius:50%;background:var(--red)} /* An unfilled slot should read as deliberate, not broken. */ .person.tbd .portrait{border-style:dashed} /* Capped so a stacked portrait cannot stretch to the full column width — the uncapped version rendered 661px tall on a tablet. Scales with the viewport below the row breakpoint so a phone still gets a decently sized photo. */ .person .portrait{max-width:clamp(290px,92vw,380px)} /* A press strip sitting inside a person's entry rather than after the list. */ .press-strip.inline{margin-top:1.25rem;padding-top:1.1rem;gap:.5rem 1.5rem} .press-strip.inline span:not(.h){font-size:.84rem} /* Portrait left, text right — one person per row, so the order reads as an order. Starts early (560px) because the stacked arrangement above it is only sensible on a genuinely narrow screen. The column scales with the viewport rather than sitting at a fixed width, so the photo gets real presence on a wide screen. All four share the value, so they stay identical to each other at every size. */ @media (min-width:560px){ .people{grid-template-columns:1fr;gap:clamp(2.5rem,5vw,3.5rem)} /* Floor raised to 240 so the photo never shrinks as the screen grows — at a 200px floor it dropped from 300px stacked to 200px the moment the row layout kicked in. */ .person{grid-template-columns:clamp(260px,24vw,320px) 1fr; gap:0 clamp(1.5rem,4vw,3rem);align-items:start} .person .portrait{grid-row:1 / span 2;max-width:none} } /* ----------------------------------------------------------------- quote */ .pull p{max-width:24ch;font-size:clamp(1.6rem,6vw,2.5rem);font-weight:200; line-height:1.25;letter-spacing:-.03em} .pull .attrib{margin-top:1.5rem;font-size:.72rem;letter-spacing:.24em; text-transform:uppercase;color:var(--muted)} .quotes{display:grid;gap:1rem;margin-top:clamp(2.25rem,6vw,3rem)} .tm{background:var(--surface);border-radius:2px;padding:clamp(1.75rem,5vw,2.35rem); display:flex;flex-direction:column} /* The quote is the thing doing the persuading, so it is set larger than body copy rather than smaller — and lighter, so the extra size doesn't shout. */ .tm .q{font-size:clamp(1.02rem,2.6vw,1.12rem);font-weight:300;line-height:1.62; letter-spacing:-.005em;color:var(--text)} /* A phrase lifted verbatim from the quote below it. This replaced the large red quotation mark — two red elements stacked would spend the accent twice, and the Brand Kit is explicit that red marks one thing. */ /* Georgia here rather than Sora: it is a system face, so it costs no extra request, and it ships a real italic where Sora has none — the browser was synthesising a slant before, which skews the letterforms instead of redrawing them. Georgia also runs large for its size, hence the smaller value than the Sora equivalent. */ .tm .pull{display:block;color:var(--red); font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.32rem,3.6vw,1.6rem); font-weight:400;font-style:italic; letter-spacing:-.005em;line-height:1.26;margin-bottom:1.25rem} .tm .q::before{content:'\201C';display:block;color:var(--red); font-family:Georgia,'Times New Roman',serif; font-size:clamp(3.2rem,8vw,4rem);line-height:.62;margin-bottom:.5rem} .tm .who{margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--line-2);font-size:.92rem; display:flex;align-items:center;gap:1rem} .tm .who .wt{display:block;min-width:0} .tm .who b{display:block;font-weight:600} .tm .who .wt span{color:var(--muted)} /* Headshot beside the attribution. Greyscaled like the team portraits so photos from four different sources still read as one set. A missing file falls back to initials, which looks deliberate where a broken image or an empty circle would not. */ .avatar{width:68px;height:68px;flex:none;border-radius:50%;overflow:hidden; background:var(--surface-2);display:grid;place-items:center} .avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)} .avatar .initials{font-size:1.05rem;font-weight:600;letter-spacing:.02em;color:var(--dim)} /* ----------------------------------------------------------------- press */ .press{display:grid;gap:1px;margin-top:clamp(2.25rem,6vw,3rem);background:var(--line)} .press article{background:var(--bg);padding:clamp(1.5rem,4.5vw,2rem)} .press .src{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red)} .press h3{margin-top:.9rem;font-size:1.05rem} .press p{margin-top:.6rem;font-size:.86rem;color:var(--muted)} /* --------------------------------------------------------------- contact */ .rows{margin-top:clamp(1.5rem,5vw,2rem);border-top:1px solid var(--line)} .row{display:flex;align-items:center;gap:1rem;min-height:76px;padding:1rem 0; border-bottom:1px solid var(--line); transition:transform .2s var(--ease),padding-left .3s var(--ease)} .row .ico{width:20px;height:20px;flex:none;color:var(--muted);transition:color .25s var(--ease)} .row .txt{flex:1;min-width:0} .row .t{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em} .row .v{display:block;font-size:.85rem;color:var(--muted);overflow-wrap:anywhere} .row .arw{width:16px;height:16px;flex:none;color:var(--dim); transition:transform .3s var(--ease),color .25s var(--ease)} .row:active{transform:scale(.99)} .row:active .arw{transform:translateX(4px);color:var(--text)} @media (hover:hover){ .row:hover{padding-left:.6rem} .row:hover .arw{transform:translateX(4px);color:var(--text)} .row:hover .ico{color:var(--text)} } /* The email row carries two actions, so the whole row can no longer be one anchor — a button inside a link is invalid. The link keeps the icon and text; the button sits beside it. */ .row-copy .rlink{display:flex;align-items:center;gap:1rem;flex:1;min-width:0} .copy{display:none;flex:none;background:none;border:1px solid var(--line); border-radius:2px;padding:.5rem .75rem;color:var(--muted); font:inherit;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease)} .js .copy{display:inline-flex} .copy:hover{color:var(--text);border-color:var(--line-2)} .copy.done{color:var(--red);border-color:var(--red)} /* CTA band */ .band{background:var(--surface-2)} .band .inner{display:grid;gap:clamp(1.5rem,5vw,2rem);align-items:center} .band .inner .cta-row{margin-top:0} /* --------------------------------------------------------------- footer */ footer{padding-block:clamp(2.75rem,8vw,4rem);border-top:1px solid var(--line)} .f-top{display:grid;gap:clamp(2rem,6vw,3rem)} .f-nav{display:flex;flex-direction:column;gap:.7rem;font-size:.9rem;color:var(--muted)} .f-nav .h{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase; color:var(--dim);margin-bottom:.3rem} .f-nav a:hover{color:var(--text)} .f-bot{margin-top:clamp(2.25rem,6vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between; font-size:.74rem;color:var(--dim);letter-spacing:.02em} /* ------------------------------------------------------------- >= 700px */ @media (min-width:700px){ .cta-row{flex-direction:row;flex-wrap:wrap} .btn{min-width:210px} .stat-grid{grid-template-columns:repeat(3,1fr)} .gap{grid-template-columns:1fr 1fr} .grid{grid-template-columns:repeat(3,1fr)} .list-grid{grid-template-columns:repeat(2,1fr)} .quotes{grid-template-columns:repeat(2,1fr)} .press{grid-template-columns:repeat(2,1fr)} .f-top{grid-template-columns:2fr 1fr 1fr} .band .inner{grid-template-columns:1fr auto} } /* ------------------------------------------------------------- >= 960px */ /* The nav switches to its desktop row later than the rest of the layout. Eight items plus the brand and the CTA need ~960px of the row. At 1024 that lands with zero headroom and the last item wraps, so this band keeps the hamburger; from 1100 there is 40px+ to spare. */ @media (min-width:1100px){ :root{--nav-h:76px} .burger,.sheet{display:none} .nav-links{display:flex} .nav .btn{display:inline-flex} } @media (min-width:960px){ .list-grid{grid-template-columns:repeat(3,1fr)} .press{grid-template-columns:repeat(3,1fr)} .split{grid-template-columns:1fr 1fr} .split.narrow{grid-template-columns:1fr 1.4fr} .steps{grid-template-columns:repeat(5,1fr);gap:0 1.5rem} .step{padding:2.5rem 0 0 0;border-top:1px solid var(--line)} .step h3{font-size:1.05rem} /* five to a row — the display size won't fit */ .step::before{top:1rem;left:0} .step::after{display:none} .hero h1{font-size:clamp(4rem,5vw,5rem)} .pull p{max-width:28ch} } /* ------------------------------------------------------ reduced motion */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important; } .js .rv{opacity:1;transform:none} .rule,.eyebrow::before{transform:scaleX(1)!important} .card::before{transform:scaleY(1)!important} .cue{display:none} } /* --------------------------------------------------------------- print */ @media print{ .nav,.sheet,.cue,.skip{display:none} body{background:#fff;color:#000} .card,.tm,.band{background:#fff;border:1px solid #ccc} } /* ------------------------------------------------------- compose chooser Native , so focus trapping, Esc-to-close and inertness of the page behind come from the browser rather than from script. */ dialog.compose{ /* The global reset zeroes margins, which overrides the UA stylesheet rule that centres a modal dialog. Put it back explicitly. */ margin:auto; border:1px solid var(--line-2);border-radius:2px;padding:0; background:var(--surface);color:var(--text); width:min(380px,calc(100vw - 2.5rem)); } dialog.compose::backdrop{background:rgba(0,0,0,.72)} .compose h3{margin:0;padding:1.5rem 1.5rem .4rem;font-size:1.05rem;letter-spacing:-.02em} .compose .sub{margin:0;padding:0 1.5rem 1.1rem;font-size:.84rem;color:var(--muted);line-height:1.5} .compose .opts{border-top:1px solid var(--line)} .compose .opt{ display:flex;align-items:center;justify-content:space-between;gap:1rem; width:100%;padding:.95rem 1.5rem;background:none;border:0; border-bottom:1px solid var(--line); font:inherit;font-size:.92rem;color:var(--text);text-align:left;cursor:pointer; transition:background .2s var(--ease),padding-left .2s var(--ease); } .compose .opt:hover{background:var(--surface-2);padding-left:1.75rem} .compose .opt .v{font-size:.78rem;color:var(--dim);overflow-wrap:anywhere} .compose .close{ display:block;width:100%;padding:.9rem 1.5rem;background:none;border:0; font:inherit;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);cursor:pointer;transition:color .2s var(--ease); } .compose .close:hover{color:var(--text)}