, so the gap to the heading below was just two collapsing paragraph margins and read as cramped everywhere it appears. Ryan flagged it on the scorecard and it was the same on every page. */ p:has(> .eyebrow){margin-bottom:var(--s-5)} p:has(> .eyebrow) + h1, p:has(> .eyebrow) + h2, p:has(> .eyebrow) + h3{margin-top:0} /* Section label (small orange caption above a heading) */ .section-label{ font-size:var(--t-small);font-weight:600;color:var(--orange); letter-spacing:.02em; } /* --- Buttons ---------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;gap:var(--s-3); height:var(--control-h);padding-inline:var(--s-5); font-family:var(--font-body);font-weight:500;font-size:1rem; line-height:var(--lh-ui); border-radius:6px; white-space:nowrap; transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} /* Leading circular arrow - the Twine signature */ .btn__arrow{ display:grid;place-items:center;flex:none; width:34px;height:34px;border-radius:50%; background:var(--orange);color:var(--btn-label); margin-left:-14px; /* nests the circle into the pill */ font-size:1rem;line-height:1; } .btn--sm{height:var(--control-h-sm);font-size:var(--t-small);padding-inline:var(--s-4)} .btn--sm .btn__arrow{width:28px;height:28px;margin-left:-10px} /* Variants */ .btn--paper{background:var(--tan);color:var(--ink)} .btn--paper:hover{background:var(--paper);box-shadow:var(--shadow)} .btn--primary{background:var(--orange);color:var(--btn-label)} .btn--primary .btn__arrow{background:var(--ink);color:var(--btn-label)} .btn--primary:hover{background:var(--orange-hover);box-shadow:var(--shadow)} .btn--ghost{background:transparent;color:var(--btn-label);border:1.5px solid var(--line-strong)} .btn--ghost:hover{background:var(--surface-2);border-color:var(--orange)} .btn--dark{background:var(--ink);color:var(--paper)} .btn--dark:hover{background:#0F1820} /* --- Card ------------------------------------------------------------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-6); backdrop-filter:blur(10px); } .card--flush{padding:var(--s-5)} .card--light{background:var(--card-light);border-color:var(--line-light);color:var(--text-dark)} /* --- Meta tile (hero strip: icon + label + value) --------------------- */ .meta-tile{ display:flex;align-items:center;gap:var(--s-3); padding:var(--s-3) var(--s-4); background:rgba(31,37,39,.82); /* sampled #182024 */ border:1px solid var(--line); border-radius:var(--r-md); backdrop-filter:blur(12px); } .meta-tile__icon{ flex:none;display:grid;place-items:center; width:44px;height:44px;border-radius:6px; background:linear-gradient(150deg,#F5A07A,#E2622F 60%,#B8431C); color:var(--paper); box-shadow:inset 0 1px 0 rgba(255,246,232,.32); } .meta-tile__icon svg{width:21px;height:21px} .meta-tile__label{ font-family:var(--font-body); font-size:var(--t-micro);font-weight:500;color:var(--orange); letter-spacing:.01em;line-height:var(--lh-ui);margin-bottom:2px; } .meta-tile__value{ /* Body face, not display, and light: matches the original tile design. */ font-family:var(--font-body);font-weight:400; font-size:var(--t-tile);color:var(--text-bright); line-height:1.25;letter-spacing:-.005em; white-space:nowrap; /* values stay on one line */ } /* --- Site header ------------------------------------------------------ */ .site-header{ /* Fixed, not sticky: it lifts out of flow so the first section's texture runs full-bleed to the top of the page and the header floats over it. */ position:fixed;top:0;left:0;right:0;z-index:60; padding:var(--s-4) 0; } .site-header__bar{ display:flex;align-items:center;gap:var(--s-5); padding:var(--s-2) var(--s-2) var(--s-2) var(--s-5); background:rgba(18,17,17,.72); border:1px solid var(--line); border-radius:6px; backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 10px 30px rgba(0,0,0,.28); } .brand{ display:flex;align-items:flex-end;gap:var(--s-3);flex:none; --brand-mark-h:26px; /* rendered logo height */ --brand-descender:.199; /* the 'g' descender as a share of the logo box (8.44 of 42.44 viewBox units) */ } .brand__mark{height:var(--brand-mark-h);width:auto} .brand__tag{ font-size:var(--t-small);color:var(--text-soft); border-left:1px solid var(--line-strong);padding-left:var(--s-3); line-height:1;white-space:nowrap;position:relative; /* The wordmark's box bottom is the bottom of the 'g' descender, NOT the baseline, so flex-end alone drops the strapline too low. Lift it by the descender depth, then push back down by the strapline's own descent below its baseline (~.136em at line-height:1). Net: baselines match. */ top:calc(.136em - var(--brand-mark-h) * var(--brand-descender)); } .site-nav{display:flex;align-items:center;gap:var(--s-6);margin-left:auto} .site-nav a:not(.btn){font-size:.95rem;color:var(--text);transition:color .15s ease} .site-nav a:not(.btn):hover{color:var(--text-bright)} @media(max-width:900px){ :root{--header-h:calc(76px + var(--ticker-h,0px))} .brand__tag{display:none} .site-nav{ position:absolute;top:calc(100% + 10px);left:var(--gutter);right:var(--gutter); flex-direction:column;align-items:stretch;gap:0; background:rgba(18,17,17,.96);border:1px solid var(--line); border-radius:var(--r-md);padding:var(--s-3); backdrop-filter:blur(16px); display:none; } .site-nav[data-open="true"]{display:flex} .site-nav a:not(.btn){padding:var(--s-3) var(--s-4);border-radius:var(--r-sm)} .site-nav a:not(.btn):hover{background:var(--surface-2)} .site-nav .btn{margin-top:var(--s-2);justify-content:center} } /* ---------- 06 SECTION SURFACES & RHYTHM ----------------------------- */ .section{position:relative;padding-block:var(--section-y)} .section--flush-top{padding-top:0} .section--light{background:var(--bg-light);color:var(--text-dark)} .section--light h1,.section--light h2,.section--light h3{color:var(--text-dark)} .section--light .muted{color:var(--text-dark-soft)} /* Textured dark surface - the Twine signature background */ .surface-texture{ position:relative; background-color:#05080A; isolation:isolate; /* The colour this surface dissolves into at its foot. Set it to the background of whatever section follows and the join disappears. */ --blend-next:#05080A; --blend-start:58%; } .surface-texture > *{position:relative;z-index:2} .surface-texture::before{ content:"";position:absolute;inset:0;z-index:0; background-image:var(--texture-fallback); /* plain url, always works */ background-image:var(--texture-img); /* overrides where image-set() is supported */ background-size:cover;background-position:center; opacity:var(--texture-opacity,1); } /* Readability scrim so text always passes contrast over photography */ .surface-texture::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; /* Fallback for browsers without color-mix(): plain fade to the blend colour */ background:linear-gradient(180deg, transparent var(--blend-start), var(--blend-next) 100%); /* Light touch: darkens the centre just enough for text contrast while leaving the orange bloom and grey wash of the artwork intact. */ background: /* Foot fade: the texture dissolves into the section below so the two never meet on a hard line. Listed first so it sits on top. */ linear-gradient(180deg, transparent var(--blend-start), color-mix(in srgb, var(--blend-next) 45%, transparent) 76%, color-mix(in srgb, var(--blend-next) 82%, transparent) 90%, var(--blend-next) 100%), radial-gradient(66% 54% at 50% 50%, rgba(8,9,11,0.44), rgba(8,9,11,0.10) 72%, rgba(8,9,11,0) 100%), linear-gradient(180deg, rgba(8,9,11,0) 62%, rgba(8,9,11,.16) 100%); } /* Hairline divider, inset to the content column */ .rule{border:0;height:1px;background:var(--line);margin:0} .rule-wrap{padding-block:0} /* ---------- 07 MOTION ------------------------------------------------ */ .reveal{opacity:0;transform:translateY(14px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)} .reveal.is-in{opacity:1;transform:none} .reveal-delay-1{transition-delay:.07s} .reveal-delay-2{transition-delay:.14s} .reveal-delay-3{transition-delay:.21s} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .btn:hover{transform:none} } /* ---------- 08 UTILITIES --------------------------------------------- */ .visually-hidden{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .flow-tight{--stack-gap:var(--s-2)} .mt-auto{margin-top:auto} .full{width:100%} /* ========================================================================== SECTION LAYER Page-section layouts. The design system above stays generic; anything specific to a named homepage section lives here, in section order. ========================================================================== */ /* ---------- 01 HERO --------------------------------------------------- */ .hero{ /* Texture selection accounts for device pixel ratio, not just CSS width. A 390px phone at 3x needs ~1170 real pixels: serving it a 768px file was what flattened the grain. AVIF is listed first because it holds roughly 99% of the source grain where WebP at the same quality holds 75%. */ --texture-fallback:var(--tex-inline); --texture-img:var(--tex-inline); /* Full-screen panel: the hero always fills the viewport exactly, so nothing of the next section is visible until the visitor scrolls. svh is the viewport with browser chrome showing, which is what you actually see on load; 100vh is the fallback for older engines. */ display:flex;align-items:stretch; min-height:100vh; min-height:100svh; padding-top:calc(var(--header-h) + clamp(24px, 4vw, 56px)); padding-bottom:clamp(40px,4.5vw,72px); text-align:center; } /* Copy sits centred in the space left over; the tiles hold the foot. */ .hero .wrap{justify-content:space-between;flex:1} .hero__inner{margin-block:auto} /* Short viewports: tighten the rhythm so the tiles stay above the fold rather than being pushed off the bottom of a laptop screen. */ @media(max-height:820px) and (min-width:641px){ .hero__inner{--stack-gap:clamp(14px,1.6vw,22px)} .hero__meta{margin-top:clamp(28px,3vw,44px)} } @media(max-height:700px) and (min-width:641px){ .hero{padding-top:calc(var(--header-h) + 16px);padding-bottom:28px} .hero__title{font-size:clamp(1.7rem,.95rem + 2.3vw,2.6rem)} } @media(min-width:641px){ .hero{ --texture-fallback:var(--tex-inline); --texture-img:var(--tex-inline); } } @media(min-width:1025px){ .hero{ --texture-fallback:var(--tex-inline); --texture-img:var(--tex-inline); } } .hero .wrap{display:flex;flex-direction:column;width:100%} .hero__inner{max-width:1000px;margin-inline:auto;--stack-gap:clamp(20px,2.4vw,32px)} .hero__title{margin-inline:auto;max-width:min(1000px,100%)} .hero__sub{margin-inline:auto} .hero__sub .lead{margin-inline:auto} /* Meta strip sits at the foot of the hero */ .hero__dots{display:none} .hero__meta{ --min:236px;--grid-gap:var(--s-3); margin-top:clamp(48px, 6.5vw, 84px); text-align:left; } .meta-tile__label,.meta-tile__value{display:block} @media(max-width:640px){ /* Drop the forced break on phones: at this size it strands a single word. text-wrap:balance then finds even lines across the full sentence. */ .hero__title br{display:none} .hero{padding-top:calc(var(--header-h) + clamp(20px,6vw,40px));padding-bottom:clamp(32px,7vw,56px)} /* Mobile: the tiles become an auto-advancing slideshow. Stacked they are ~330px tall and push themselves off a phone screen; as one full-width slide they cost a single row. */ .hero__meta{ display:flex;grid-template-columns:none; margin-top:clamp(24px,5vw,40px); gap:var(--s-4); overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; scroll-behavior:smooth; padding:0;margin-inline:0; /* aligns with the body copy above */ } .hero__meta::-webkit-scrollbar{display:none} .hero__meta .meta-tile{flex:0 0 100%;scroll-snap-align:start} /* Progress: one segment per slide, the active one filling over its dwell. */ .hero__dots{display:flex;gap:6px;margin-top:var(--s-4);justify-content:center} .hero__dot{ position:relative;height:3px;width:26px;border-radius:8px; background:rgba(233,227,212,.22);overflow:hidden; } .hero__dot i{ position:absolute;inset:0;width:0;border-radius:inherit; background:var(--orange); } .hero__dot.is-active i{width:100%;transition:width var(--meta-dwell,3s) linear} .hero__dot.is-done i{width:100%} /* Once the reader takes over, the active segment sits solid instead of replaying its fill animation on every swipe. */ .hero__dots.is-paused .hero__dot.is-active i{transition:none;width:100%} .meta-tile{padding:var(--s-4) var(--s-5)} .meta-tile__icon{width:40px;height:40px;border-radius:6px} } /* ---------- 02 THE PROBLEMS WE SOLVE ---------------------------------- */ .problems{ background:#0A1013; overflow-x:clip; /* clip, not hidden: hidden would break the sticky pin */ padding-bottom:clamp(56px,7vw,96px); } /* --- top block: copy left, artwork right ----------------------------- */ .problems__top{ display:grid;gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:start; } @media(min-width:900px){ .problems__top{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(32px,4vw,64px)} } .problems__copy{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px);align-items:flex-start} /* Word-by-word reveal. Unlit words stay legible-but-recessed so the paragraph never reads as broken if scripting is unavailable. */ .problems__lede{ font-size:var(--t-h2); line-height:1.16;letter-spacing:-.03em;font-weight:500; color:var(--text-bright); text-wrap:pretty; } .problems__lede .w{ color:#41433E; transition:color .45s cubic-bezier(.22,.61,.36,1); } .problems__lede .w.is-lit{color:var(--text-bright)} .problems__lede .w--accent.is-lit{color:var(--orange)} /* No JS or reduced motion: show the sentence fully lit */ .no-js .problems__lede .w, .problems__lede.is-all-lit .w{color:var(--text-bright)} .no-js .problems__lede .w--accent, .problems__lede.is-all-lit .w--accent{color:var(--orange)} /* --- artwork panel ---------------------------------------------------- The brand mark sits ON the texture rather than being baked into a raster, so it stays crisp at any size and the fade is tunable in CSS. */ .problems__art{ position:relative;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:1/1; /* fixed box = no layout shift */ box-shadow:var(--shadow-lg); display:grid;place-items:center; background-color:#2A1712; background-size:cover;background-position:center; } @media(min-width:900px){ .problems__art{ aspect-ratio:1/1; /* square, to sit level with the copy */ /* The old right-bleed (negative gutter margin) is gone: now that the cards below sit inside the wrap, everything on this section aligns to the same right margin. */ } } /* Faded so the paper grain reads through the mark, with a warm bloom behind. */ .problems__mark{ position:relative; width:min(56%, 340px); display:block; opacity:.92; mix-blend-mode:soft-light; filter:drop-shadow(0 0 46px rgba(255,168,116,.34)); } .problems__mark-svg{width:100%;height:auto;display:block} /* --- sub-heading ------------------------------------------------------ */ .problems__sub{ font-size:var(--t-emph); color:var(--text); margin-top:clamp(40px,5vw,72px); } /* --- horizontal card drift -------------------------------------------- */ .hscroll{margin-top:clamp(24px,3vw,40px)} .hscroll__track{ display:flex;gap:clamp(14px,1.6vw,24px); /* Left edge lines up with the content column; the track then runs on past the right edge of the screen, which is the room it has to travel. */ padding-left:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); --rail-pad:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); padding-right:0; } /* A rail already inside .wrap must not add the gutter again, or its first card sits inboard of the section heading above it. */ .wrap .hscroll__track{padding-left:0;padding-right:0;--rail-pad:0px} /* One rail behaviour at every size: a horizontal snap strip driven by the arrows (and optional autoplay). The earlier desktop scroll-pin was removed in favour of this, so desktop and mobile navigate identically. */ .hscroll{ overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; /* Snap padding mirrors the track's own left padding EXACTLY, so the browser's snapping and the arrows' scrollTo agree on where a card rests. When they disagreed (gutter vs content column) every user swipe settled ~80px off the arrows' positions. No scroll-behavior here: the JS sets it per scroll, so smoothing never stacks. */ scroll-padding-left:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); padding-bottom:var(--s-3); } /* Rails inside .wrap have no track padding, so no snap inset either, and no trailing gutter after the last card - the final pair should end flush on the wrap's right margin, exactly where the exact 50% sizing puts it. */ .wrap .hscroll{scroll-padding-left:0} .wrap .hscroll .hscroll__track::after{width:0} .hscroll::-webkit-scrollbar{display:none} .hscroll__sticky{display:contents} .hscroll__track{transform:none!important} .hscroll .p-card, .hscroll .fibre, .hscroll .tl__step{scroll-snap-align:start} /* End stop: a small trailing box that is itself an end-aligned snap point. With mandatory snapping, a rail may only rest ON a snap point - so without this, any card whose start-position lies past the end of the scroll range simply cannot be reached: the rail bounces back off it. This gives the very end of the scroll a legal resting position, so the last card always lands flush with the right gutter. It replaces BOTH the old JS-measured spacer and the variable-width pseudo-element, which ran at the same time and doubled the dead space after the last card. */ .hscroll__track::after{ content:"";flex:0 0 auto; width:var(--gutter); scroll-snap-align:end; } @media(max-width:900px){ /* Phones and tablets get a plain swipeable strip: native, smooth, and it never fights the user's scrolling. */ .hscroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:var(--s-3); /* snap must respect the gutter, or every slide lands flush to the screen edge instead of lining up with the body copy */ scroll-padding-left:var(--gutter)} .hscroll::-webkit-scrollbar{display:none} .hscroll__track{transform:none!important} /* start-aligned, so the slideshow's scroll target and the snap point agree. With centre alignment the snap pulled every slide ~82px off position. */ .hscroll .p-card{scroll-snap-align:start;flex:0 0 78%} } .hscroll:has(.p-card){--rail-card:clamp(272px, 25vw, 360px)} .p-card{ flex:0 0 clamp(272px, 25vw, 360px); display:flex;flex-direction:column;gap:var(--s-4); padding:clamp(20px,1.8vw,28px); border-radius:var(--r-lg); scroll-snap-align:center; min-height:clamp(230px,20vw,268px); } .p-card__meta{display:flex;align-items:center;gap:var(--s-3)} .p-card__chip{ width:34px;height:34px;border-radius:6px;flex:none; background:var(--orange); box-shadow:inset 0 1px 0 rgba(255,246,232,.28); } .p-card__num{font-size:var(--t-small);color:var(--text-soft);font-weight:400} .p-card__num span{color:var(--orange);margin-right:2px} .p-card__title{ font-size:var(--t-h3); font-weight:500;letter-spacing:-.034em;line-height:1.1; color:#DBD7D5;margin-top:auto; } .p-card__body{font-size:var(--t-body);line-height:1.5;color:var(--text-soft)} /* Card tones, sampled from the design */ .p-card--slate {background:#84878A} .p-card--tan {background:#B8AE96} .p-card--dark {background:#161D21} .p-card--orange{background:var(--orange)} /* Light faces take ink body copy; titles stay pale as designed */ .p-card--slate .p-card__body, .p-card--tan .p-card__body, .p-card--orange .p-card__body{color:#0A1013} .p-card--slate .p-card__num, .p-card--tan .p-card__num, .p-card--orange .p-card__num{color:rgba(25,32,34,.72)} .p-card--slate .p-card__num span, .p-card--tan .p-card__num span{color:var(--orange)} .p-card--orange .p-card__num span{color:#0A1013} /* On the orange face the chip inverts to an outline so it stays visible */ .p-card--orange .p-card__chip{background:transparent;border:2px solid rgba(25,32,34,.45);box-shadow:none} /* --- problems grid: all four cards in view, no scroller ----------------- The four problem cards are short enough to sit side by side inside the content column, so they do: no arrows, no swiping, nothing hidden off screen. Two-up on tablets, stacked on phones. (The old flex-basis on .p-card is ignored by grid items, so the cards simply share the row.) */ .problems__grid{ display:grid; grid-template-columns:1fr; gap:clamp(14px,1.6vw,24px); margin-top:clamp(24px,3vw,40px); } @media(min-width:640px){ .problems__grid{grid-template-columns:repeat(2,1fr)} } @media(min-width:1100px){ .problems__grid{grid-template-columns:repeat(4,1fr)} } @media(prefers-reduced-motion:reduce){ .hero__dot.is-active i{transition:none} .problems__lede .w{transition:none} .hscroll__track{transform:none!important} .hscroll{overflow-x:auto} } /* ---------- 03 THE PROOF ---------------------------------------------- */ .proof{ background:var(--proof-bg,#DAD4C2); /* sampled from the design */ color:var(--ink); text-align:center; } .proof__head{--stack-gap:clamp(20px,2.4vw,32px);margin-inline:auto} .proof__title{ color:#0E1519; font-size:var(--t-h2-sm); line-height:1.2;letter-spacing:-.032em;font-weight:500; margin-inline:auto; } .proof__title .hl{color:var(--orange)} /* --- stage: video panel with the caption card overlapping its foot ----- */ .proof__stage{ position:relative; margin-top:clamp(34px,4.4vw,64px); padding-bottom:clamp(56px,7vw,104px); /* room for the overlapping card */ } .player{ position:relative; max-width:min(1080px,100%); margin-inline:auto; border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/9; background:#0E1519; /* warm bloom behind the panel, as in the design */ box-shadow:0 0 0 1px rgba(27,33,37,.06), 0 26px 70px -18px rgba(226,98,47,.42), 0 10px 30px rgba(27,33,37,.16); } .player__poster, .player video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer} .player__play{ position:absolute;inset:0;margin:auto; width:clamp(56px,5vw,72px);height:clamp(56px,5vw,72px); display:grid;place-items:center; border-radius:50%; background:var(--orange);color:var(--chip-label); box-shadow:0 8px 26px rgba(27,33,37,.34); transition:transform .18s ease, background-color .18s ease; } .player__play svg{width:46%;height:46%;margin-left:6%} .player__play:hover{transform:scale(1.06);background:var(--orange-hover)} .player.is-playing .player__play, .player.is-playing .player__poster{display:none} /* --- caption card ------------------------------------------------------ */ .proof__caption{ position:relative; display:grid;gap:clamp(16px,2vw,32px); grid-template-columns:1fr; align-items:center; text-align:left; width:min(760px,92%); margin:clamp(-72px,-6vw,-40px) auto 0; /* overlaps the video foot */ padding:clamp(20px,2.2vw,30px) clamp(22px,2.6vw,36px); background:#E3DED1; /* sampled */ border-radius:var(--r-md); box-shadow:0 18px 44px rgba(27,33,37,.14); } @media(min-width:700px){ .proof__caption{grid-template-columns:minmax(140px,190px) 1fr} } .proof__logo{width:100%;max-width:190px;height:auto;margin-inline:auto;display:block} .proof__logo path{fill:#0E1519} .proof__note p{font-size:var(--t-small);line-height:1.55;color:#0E1519} .proof__note p + p{margin-top:var(--s-2)} .proof__note p.proof__kicker{color:var(--orange);font-weight:600} .proof__note .muted{color:rgba(27,33,37,.62)} .proof__note strong{color:#0E1519;font-weight:600} @media(max-width:699px){ /* Deeper box, but no more of the video covered than before: the overlap is pinned low and the extra height goes downward. */ .proof__caption{text-align:center;margin-top:calc(-1 * clamp(18px,4vw,26px))} .proof__logo{max-width:150px} } /* ---------- 03b BUILD TIMELINE ---------------------------------------- */ .tl{ margin-top:clamp(48px,6vw,88px); text-align:left; --tl-dot:46px; --tl-progress:0; /* 0-1, set by JS */ } .tl .tl__track{ gap:clamp(20px,2.4vw,40px); align-items:start; counter-reset:tl; padding-top:6px; /* the dot scales up when reached; give it room */ } .hscroll:has(.tl__step){--rail-card:clamp(268px, 26vw, 360px)} .tl__step{ flex:0 0 clamp(268px, 26vw, 360px); scroll-snap-align:start; display:flex;flex-direction:column; } /* --- rail: dot plus the connector running to the next dot ------------- */ .tl__rail{ position:relative; height:calc(var(--tl-dot) + 8px); display:flex;align-items:center; margin-bottom:clamp(22px,2.4vw,34px); } /* the line spans from this dot's centre across the gap to the next dot */ .tl__step:not(:last-child) .tl__rail::before{ content:"";position:absolute;z-index:0; left:calc(var(--tl-dot) / 2); width:calc(100% - var(--tl-dot) / 2 + clamp(20px,2.4vw,40px)); height:2px; background:rgba(27,33,37,.28); } /* orange fill that advances with scroll */ .tl__step:not(:last-child) .tl__rail::after{ content:"";position:absolute;z-index:1; left:calc(var(--tl-dot) / 2); width:calc((100% - var(--tl-dot) / 2 + clamp(20px,2.4vw,40px)) * var(--seg,0)); height:2px; background:var(--orange); transition:width .45s cubic-bezier(.22,.61,.36,1); } .tl__dot{ position:relative;z-index:2;flex:none; width:var(--tl-dot);height:var(--tl-dot);border-radius:50%; display:grid;place-items:center; background:linear-gradient(145deg,#5A3227 0%,#8E4632 42%,var(--orange) 100%); box-shadow:0 4px 14px rgba(27,33,37,.24), inset 0 1px 0 rgba(255,246,232,.22); /* dormant until the timeline reaches it */ filter:saturate(.28) brightness(.82); transition:filter .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); } .tl__step.is-reached .tl__dot{filter:none;transform:scale(1.04)} .tl__num{ font-family:var(--font-body);font-weight:500; font-size:.94rem;color:var(--tan);line-height:1; } .tl__title{ color:var(--orange); font-size:clamp(1.7rem,1.2rem + 1.5vw,2.4rem); font-weight:500;letter-spacing:-.03em;line-height:1.1; margin-bottom:clamp(16px,1.8vw,26px); } .tl__body{ font-size:var(--t-small);line-height:1.6; color:rgba(27,33,37,.78); } .tl__body b{font-weight:600;color:#0E1519} @media(max-width:900px){ .tl{--tl-dot:40px} .tl__step{flex:0 0 78%} } @media(max-width:899px){ /* Phones: one full-width fibre per view, stepped by the same arrows. */ .hscroll .fibre{flex:0 0 100%} } @media(prefers-reduced-motion:reduce){ .tl__dot{filter:none;transition:none} .tl__step:not(:last-child) .tl__rail::after{transition:none} } /* --- static timeline: the whole journey in view, no scroller ------------ Four compact steps fit across the content column, so the rail, arrows, and autoplay are gone. Every step is on screen at once, which means the whole journey reads as reached: dots awake, connectors filled. Stacks to a single column on phones, where the horizontal connectors (which would bridge to nothing) are hidden. The column gap matches the connector's reach - clamp(20px,2.4vw,40px) - so each line still lands on the next dot. */ .tl--static .tl__track{ display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,36px) clamp(20px,2.4vw,40px); } .tl--static .tl__step{--seg:1} .tl--static .tl__dot{filter:none} @media(min-width:900px){ .tl--static .tl__track{grid-template-columns:repeat(4,1fr)} } @media(max-width:899px){ /* Phones: a true vertical timeline. Dot on the left, copy alongside it, and a spine running down from each dot to the next - drawn by the same scroll-driven --seg the desktop connectors use. */ .tl--static .tl__track{gap:0} .tl--static .tl__step{ position:relative; padding-left:calc(var(--tl-dot) + 16px); padding-bottom:clamp(30px,7vw,44px); } .tl--static .tl__step:last-child{padding-bottom:0} .tl--static .tl__rail{position:absolute;left:0;top:-2px;margin:0;height:var(--tl-dot)} .tl--static .tl__step:not(:last-child) .tl__rail::before, .tl--static .tl__step:not(:last-child) .tl__rail::after{display:none} .tl--static .tl__step:not(:last-child)::before{ content:"";position:absolute;z-index:0; left:calc(var(--tl-dot) / 2 - 1px); top:calc(var(--tl-dot) + 4px); bottom:6px; width:2px;background:rgba(27,33,37,.28); } .tl--static .tl__step:not(:last-child)::after{ content:"";position:absolute;z-index:1; left:calc(var(--tl-dot) / 2 - 1px); top:calc(var(--tl-dot) + 4px); bottom:6px; width:2px;background:var(--orange); transform:scaleY(var(--seg,1));transform-origin:top; } .tl--static .tl__title{margin-bottom:clamp(12px,3vw,18px)} } /* Each step's copy lives in a paper tile; the dot rail stays above it, outside the card, so the piece still reads as a timeline. flex:1 makes the four cards equal height across the desktop row. */ .tl--static .tl__track{align-items:stretch} /* overrides the rail-era align-items:start */ .tl--static .tl__step{display:flex;flex-direction:column} .tl__card{ flex:1; background:var(--paper); border:1px solid rgba(27,33,37,.08); border-radius:var(--r-lg); padding:clamp(22px,2.2vw,32px) clamp(20px,2vw,30px) clamp(26px,2.4vw,36px); box-shadow:0 10px 28px rgba(27,33,37,.07); } /* --- timeline journey: the line draws itself on scroll ------------------ With scripting and motion allowed, .tl--journey re-dims the timeline and hands --seg to a scroll handler: as the section crosses the viewport the connector fill sweeps across (or down, on phones), each dot ignites as the line arrives, and each step's copy rises into place. Without JS or under prefers-reduced-motion the class is never added, so the timeline simply renders complete - the .tl--static state above. */ .tl--journey .tl__step{ --seg:0; opacity:.35;transform:translateY(12px); transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); } .tl--journey .tl__step.is-reached{opacity:1;transform:none} .tl--journey .tl__dot{filter:saturate(.28) brightness(.82)} .tl--journey .tl__step.is-reached .tl__dot{filter:none;transform:scale(1.04)} /* The fill is driven continuously per scroll frame; the old eased width transition would smear behind it. */ .tl--journey .tl__step:not(:last-child) .tl__rail::after{transition:none} /* Desktop hover interplay: the step under the pointer lifts and its neighbours recede slightly. Purely additive - nothing is hidden. */ @media(hover:hover) and (min-width:900px){ .tl--static .tl__step{transition:opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1)} .tl--static .tl__track:hover .tl__step{opacity:.55} .tl--static .tl__track:hover .tl__step:hover{opacity:1;transform:translateY(-6px)} .tl--static .tl__step:hover .tl__dot{filter:none;transform:scale(1.1)} } @media(prefers-reduced-motion:reduce){ .tl--static .tl__step, .tl--static .tl__track:hover .tl__step{opacity:1;transform:none;transition:none} } /* ---------- 04 THE METHOD (Five Fibre Framework) ---------------------- */ .method{background:#0A1013} /* sampled */ .method__head{ display:flex;flex-direction:column;align-items:flex-start; gap:clamp(20px,2.6vw,36px); } .method__title{ font-size:var(--t-h2); font-weight:500;letter-spacing:-.035em;line-height:1.06; color:var(--text-bright); } .method__title .hl{color:var(--orange)} .method__title sup{font-size:.32em;vertical-align:super;letter-spacing:0} .method__intro{color:var(--text-soft);font-size:var(--t-lead);line-height:var(--lh-body)} .fibres{margin-top:clamp(36px,4.6vw,64px)} .fibres__track{align-items:stretch;gap:clamp(16px,1.8vw,28px)} .hscroll:has(.fibre){--rail-card:clamp(280px, 38vw, 560px)} .fibre{ /* Exactly two cards per view inside the content column: half the track minus half the gap. The gap value here MUST match .fibres__track's gap, or the pair drifts off the right margin. Because the sizing divides the row exactly, the last pair lands flush on the wrap's right edge - no more part-card cut off at the end. One card per view below 900px. */ flex:0 0 calc((100% - clamp(16px,1.8vw,28px)) / 2); display:flex;flex-direction:column; background:var(--orange); border-radius:var(--r-lg); padding:clamp(26px,2.6vw,44px); scroll-snap-align:start; background:var(--fib,var(--orange)); color:var(--fib-ink,#0E1519); } /* Five Fibre colours - locked palette, signed off on the scorecard. Each card carries its own fibre colour; --fib-ink / --fib-body are tuned per background (contrast-checked) so every card stays legible. */ .fibre{--fib:var(--orange);--fib-ink:#0E1519;--fib-body:rgba(27,33,37,.82)} .fibre:nth-child(1){--fib:#E83001;--fib-ink:#FFFFFF;--fib-body:rgba(255,255,255,.86)} /* Assess - Terracotta */ .fibre:nth-child(2){--fib:#59A2DD;--fib-ink:#0F1820;--fib-body:rgba(20,32,42,.88)} /* Build - Cool Horizon */ .fibre:nth-child(3){--fib:#368C66;--fib-ink:#0E241B;--fib-body:rgba(14,36,27,.92)} /* Launch - Sea Green */ .fibre:nth-child(4){--fib:#4D4B8A;--fib-ink:#FFFFFF;--fib-body:rgba(255,255,255,.86)} /* Grow - Dusty Grape */ .fibre:nth-child(5){--fib:#FCA700;--fib-ink:#3A2600;--fib-body:rgba(40,26,0,.86)} /* Amplify - Amber */ .fibre__meta{display:flex;align-items:center;gap:var(--s-4);margin-bottom:clamp(20px,2.2vw,32px)} .fibre__icon{ flex:none;display:grid;place-items:center; width:clamp(40px,3.4vw,50px);height:clamp(40px,3.4vw,50px); border-radius:8px; background:#0E1519;color:var(--fib,var(--orange)); } .fibre__icon svg{width:56%;height:56%} .fibre__num{font-size:var(--t-small);color:var(--fib-ink);font-weight:400} .fibre__num span{color:var(--fib-ink);opacity:.55;margin-right:2px} .fibre__title{ font-size:var(--t-h3-lg); font-weight:500;letter-spacing:-.03em;line-height:1.08; color:var(--fib-ink); margin-bottom:clamp(18px,1.8vw,26px); } .fibre__points{ display:grid;gap:6px; margin-bottom:clamp(24px,3vw,44px); } .fibre__points li{ color:var(--fib-ink);font-weight:600; font-size:clamp(.94rem,.88rem + .22vw,1.06rem); line-height:1.35; } .fibre__points li::before{content:"- ";} .fibre__lead{ color:var(--fib-ink);font-weight:600; font-size:var(--t-lead); line-height:1.35;margin-bottom:var(--s-2); padding-top:clamp(22px,2.4vw,32px); /* Hairline separator: 50% tint of this card's fibre background colour. color-mix keeps it per-fibre automatically. */ border-top:1px solid color-mix(in srgb, var(--fib) 50%, #ffffff); } .fibre__body{ color:var(--fib-body); font-size:var(--t-body); line-height:1.55; margin-top:auto; } @media(max-width:900px){ .fibre{flex:0 0 84%} } /* ---------- 05 THE FOUNDERS ------------------------------------------- */ .founders{background:#DAD4C2;color:var(--ink);padding-block:clamp(40px,5vw,80px)} .founders__grid{ display:grid;gap:clamp(20px,2.4vw,40px); grid-template-columns:1fr;align-items:start; } @media(min-width:960px){ .founders__grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,3vw,52px)} } .founders__intro{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,2.6vw,36px)} .founders__title{ font-size:var(--t-h2-sm); font-weight:500;letter-spacing:-.032em;line-height:1.18; color:#0E1519;max-width:16ch; } .founders__title .hl{color:var(--orange)} /* Round cue, echoing the numbered dots on the build timeline */ .founders__cue{ display:grid;place-items:center; width:clamp(110px,10vw,150px);aspect-ratio:1; border-radius:50%; /* real texture, not a CSS gradient */ background-color:#4A2419; background-size:cover;background-position:38% 62%; color:var(--paper); box-shadow:0 14px 34px rgba(27,33,37,.22); margin-top:auto; /* aligns to the base of the cards */ } .founders__cue-svg{width:32%;height:auto;transform:rotate(90deg)} .founders__intro{min-height:100%} @media(max-width:959px){.founders__cue{display:none}} /* --- cards ------------------------------------------------------------- */ .founders__cards{ display:grid;gap:clamp(12px,1.4vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); align-items:start; } .founder{ background:#E8E5DA; /* sampled */ border-radius:var(--r-md); overflow:hidden; display:flex;flex-direction:column; } .founder__photo{width:100%;aspect-ratio:8/7;object-fit:cover;object-position:50% 22%;display:block} .founder__panel{padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(20px,2vw,28px)} .founder__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)} .founder__name{ font-size:var(--t-h3); font-weight:500;letter-spacing:-.028em;line-height:1.15;color:#0E1519; } .founder__role{color:var(--orange);font-size:var(--t-small);margin-top:2px} .founder__toggle{ flex:none;display:grid;place-items:center; width:44px;height:44px;border-radius:50%; background:#0E1519;color:var(--paper); transition:transform .3s cubic-bezier(.22,.61,.36,1), background-color .2s ease; } .founder__toggle svg{width:20px;height:20px;transition:transform .35s cubic-bezier(.22,.61,.36,1)} .founder__toggle:hover{background:#26343A} .founder__toggle[aria-expanded="true"] svg{transform:rotate(90deg)} /* Disclosure: grid-template-rows animates cleanly from nothing to auto, with no JavaScript height measurement. */ .founder__bio{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1); } .founder__bio-inner{overflow:hidden;min-height:0} .founder__bio[data-open]{grid-template-rows:1fr} .founder__bio-inner p{ font-size:var(--t-small);line-height:1.6;color:rgba(27,33,37,.78); margin-top:clamp(16px,1.6vw,22px); } .founder__bio-inner p:first-child{margin-top:clamp(18px,1.8vw,24px)} .founder__rule{ border:0;height:1px;background:rgba(27,33,37,.16); margin:clamp(18px,2vw,26px) 0 clamp(14px,1.5vw,20px); } .founder__stats{display:flex;flex-wrap:nowrap;gap:clamp(12px,1.6vw,26px)} .founder__stats .stat{min-width:0;white-space:nowrap} .founder__stats dt{font-size:var(--t-micro);color:rgba(27,33,37,.60);margin-bottom:2px} .founder__stats dd{ font-family:var(--font-display);font-weight:500; font-size:clamp(1.15rem,1rem + .6vw,1.5rem); letter-spacing:-.03em;color:#0E1519;line-height:1.1; } @media(prefers-reduced-motion:reduce){ .founder__bio,.founder__toggle svg{transition:none} } /* ---------- 06 OUR BELIEF --------------------------------------------- */ .belief{background:#DAD4C2} .belief__card{ position:relative; border-radius:var(--r-lg); overflow:hidden; padding:clamp(30px,5vw,84px) clamp(24px,5vw,90px) clamp(40px,6.5vw,110px); background-color:#B99177; background-size:cover;background-position:center; box-shadow:0 22px 60px rgba(27,33,37,.18); } @media(min-width:1000px){ .belief__card{ } } .belief__label{ display:flex;align-items:center;gap:var(--s-3); font-size:var(--t-small);color:#0E1519; margin-bottom:clamp(20px,3vw,44px); } .belief__chip{ width:30px;height:30px;border-radius:6px;flex:none; background:var(--orange); box-shadow:inset 0 1px 0 rgba(255,246,232,.28); } .belief__quote{ font-family:var(--font-body); /* Down from clamp(1.35rem,.95rem + 1.9vw,2.6rem) and 1.28 leading. Now the type is Google Sans rather than Familjen it reads larger at the same size, and a body face at this scale needs less leading than a display face, not more. */ /* Lower floor and a steeper slope: 19px -> 16.6px on a 390px phone while desktop stays at 32px, so only the mobile end comes down. */ font-size:clamp(1rem,.66rem + 1.54vw,2rem); font-weight:500;line-height:1.18;letter-spacing:-.016em; max-width:none; text-wrap:pretty; } /* Mobile size, stated explicitly rather than left to the clamp. Two reasons: it takes another ~15% off the phone size, and an explicit max-width rule is unambiguous to read when checking which build is actually live. Desktop is untouched. */ @media(max-width:640px){ .belief__quote{font-size:clamp(14px,3.6vw,17px);line-height:1.2} } /* Inverted reveal: on this light card the unlit words are LIGHTER than the lit ones, where Section 02 on dark does the opposite. */ .belief__quote .w{ color:rgba(27,33,37,.24); transition:color .45s cubic-bezier(.22,.61,.36,1); } .belief__quote .w.is-lit{color:#0E1519} .no-js .belief__quote .w, .belief__quote.is-all-lit .w{color:#0E1519} /* The forced break only helps at desktop widths; below that the natural wrap is better than a hard break mid-sentence. */ @media(max-width:640px){.belief__quote{max-width:none}} @media(prefers-reduced-motion:reduce){.belief__quote .w{transition:none}} /* ---------- 07 WHO WE WORK WITH --------------------------------------- */ .audience{background:#0A1013} .audience__head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3vw,44px)} .audience__title{ font-size:var(--t-h2); font-weight:500;letter-spacing:-.036em;line-height:1.08; color:var(--text-bright); } .audience__title .hl{color:var(--orange)} .audience__cards{ display:grid;gap:clamp(14px,1.6vw,24px); grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); margin-top:clamp(36px,4.5vw,64px); } .fit-card{ background:#0A1114; /* sampled: sits below the section */ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,2.4vw,38px); display:flex;flex-direction:column; } .fit-card__badge{ display:grid;place-items:center;flex:none; width:44px;height:44px;border-radius:50%; background:radial-gradient(130% 130% at 30% 78%, var(--orange) 0%, #A6472A 60%, #7A3421 100%); color:var(--chip-label); margin-bottom:clamp(26px,3vw,46px); } .fit-card__badge svg{width:20px;height:20px} .fit-card__title{ font-size:var(--t-h3); font-weight:500;letter-spacing:-.03em;line-height:1.18; color:var(--paper); margin-bottom:clamp(16px,1.8vw,26px); } .fit-card__body{ font-size:var(--t-small);line-height:1.62;color:var(--text-soft); margin-top:auto; } /* --- not the right fit ------------------------------------------------- */ .notfit{ margin-top:clamp(16px,1.8vw,24px); background:#0A1114; /* sampled */ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,48px) clamp(24px,3vw,52px); display:grid;gap:clamp(16px,2.4vw,40px); grid-template-columns:1fr; align-items:start; } @media(min-width:860px){ .notfit{grid-template-columns:minmax(180px,.32fr) 1fr} } .notfit__title{ color:var(--orange); font-size:var(--t-h3-lg); font-weight:500;letter-spacing:-.03em;line-height:1.1; } .notfit__body p{font-size:var(--t-small);line-height:1.62;color:var(--text-soft)} .notfit__body p + p{margin-top:clamp(14px,1.4vw,20px)} .notfit__body strong{color:var(--paper);font-weight:600} /* ---------- 08 BEYOND LAUNCH ------------------------------------------ */ .beyond{ /* Brand orange, not the screenshot sample. Screenshots read saturated colour roughly G+33 B+47 lighter than truth (P3 -> sRGB), which is what made this read as salmon. Subtle gradient as in the design. */ background:linear-gradient(158deg, #F2603A 0%, #E9512C 52%, #D9451F 100%); color:#0E1519; } .beyond__head{--stack-gap:clamp(20px,2.6vw,36px);margin-inline:auto;max-width:900px} .beyond__title{ font-size:var(--t-h2); font-weight:500;letter-spacing:-.036em;line-height:1.1; color:#0E1519;margin-inline:auto; } .beyond__title .hl{color:var(--tan)} .beyond__intro{ color:rgba(27,33,37,.82); font-size:var(--t-lead);line-height:var(--lh-body); margin-inline:auto;max-width:56ch; } .beyond__cards{ display:grid;gap:clamp(16px,1.8vw,28px); grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); margin-top:clamp(40px,5vw,80px); } .bl-card{ background:#F4F3ED; /* sampled */ border:2px solid #F4F3ED; /* same as the panel behind the text */ border-radius:var(--r-md); overflow:hidden; display:flex;flex-direction:column; box-shadow:0 16px 40px rgba(27,33,37,.14); } .bl-card__art{ aspect-ratio:16/11; display:grid;place-items:center; background-color:#4A2419; background-size:cover;background-position:center; } .bl-card__icon{ display:block;width:34%;max-width:120px; /* dark edge plus a warm bloom, which is what lifts the mark off the texture */ filter:drop-shadow(0 0 26px rgba(255,150,105,.5)); } .bl-card__icon-svg{width:100%;height:auto;display:block} .bl-card__panel{padding:clamp(20px,2.2vw,32px) clamp(20px,2.2vw,32px) clamp(26px,2.8vw,40px)} .bl-card__kicker{ color:var(--orange);font-size:var(--t-lead);margin-bottom:clamp(14px,1.6vw,22px); } .bl-card__kicker span{opacity:.75;margin-right:2px} .bl-card__title{ font-size:var(--t-h3); font-weight:600;letter-spacing:-.028em;line-height:1.2; color:#0E1519; } /* ---------- 09 BOOK A CONSULTATION ------------------------------------ */ /* no surface of its own: a one-step lift here drew a visible seam above every CTA, and the homepage body is not the ink, so transparent is the only value that is seamless everywhere */ .consult{background:transparent} .consult__card{ border-radius:var(--r-lg); padding:clamp(34px,5vw,80px) clamp(24px,4vw,64px) clamp(40px,5.5vw,84px); /* dark card lifted a step from the page, with a thin edge: the paper version put the strongest contrast on the site at the point every page ends, which fought the footer for attention rather than leading to it */ background:#0A1114;border:1px solid var(--line-strong); color:var(--text); } .consult__title{color:var(--text-bright)} .consult__copy p{color:var(--text-soft)} .consult__copy strong{color:var(--text-bright)} .consult__note{color:var(--text-soft)} .consult__title .soft{color:var(--orange)} /* condensed and centred: eyebrow, a two-line title, one line of copy, the two buttons side by side, and the fibres breathing beneath. The purpose of the card is the call; everything else stays out of its way. */ .consult__card{padding:clamp(30px,4vw,56px) clamp(24px,4vw,64px) clamp(32px,4vw,56px)} .consult__inner{--stack-gap:clamp(18px,2.2vw,28px);max-width:760px} .consult__title{max-width:24ch} @media(min-width:720px){ .consult__inner .consult__actions{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:var(--s-3) clamp(24px,3vw,40px)} } .consult__card .cs-ico{background:#101A1D} /* ambient fibre bars: no hover, no captions. Each fibre rises and settles on its own clock, so the chart never repeats and no two fibres agree, which is the point: every network's five are different. */ .cs-bars.cs-bars--live{border:0;background:transparent;padding:0;max-width:520px;margin:clamp(28px,3.4vw,48px) auto 0} .cs-bars.cs-bars--live .cs-bars__chart{--chart:110px;gap:var(--s-3)} .cs-bars.cs-bars--live .cs-bars__bar{cursor:default;pointer-events:none;color:var(--text-soft)} .cs-bars.cs-bars--live .cs-bars__bar i{ height:calc(var(--h) * var(--chart) / 100);transform-origin:bottom; animation:cs-breathe var(--d,7s) ease-in-out var(--delay,0s) infinite alternate; transition:none } @keyframes cs-breathe{from{transform:scaleY(var(--lo,.5))}to{transform:scaleY(1)}} @media(prefers-reduced-motion:reduce){.cs-bars.cs-bars--live .cs-bars__bar i{animation:none}} .consult__inner{--stack-gap:clamp(26px,3.4vw,52px);max-width:920px;margin-inline:auto} .consult__title{max-width:25ch} .consult__title{ font-size:var(--t-h2-sm); font-weight:500;letter-spacing:-.036em;line-height:1.06; color:var(--text-bright);margin-inline:auto; } /* sampled */ .consult__copy{max-width:56ch;margin-inline:auto} .consult__copy p{ font-size:var(--t-lead);line-height:var(--lh-body); color:var(--text-soft); } .consult__copy strong{color:var(--text-bright);font-weight:600} .consult__actions{ display:flex;flex-direction:column;align-items:center; gap:clamp(12px,1.4vw,18px); } .consult__note{ color:var(--text-soft); max-width:44ch;text-align:center;margin-top:var(--s-2); } /* ---------- 10 FOOTER -------------------------------------------------- */ .site-footer{ position:relative; /* no surface of its own: the lighter ink drew a seam under every page, and the homepage body is not the ink, so transparent is the only value that is seamless everywhere */ background:transparent; padding-top:clamp(40px,5vw,80px); isolation:isolate; } .site-footer .rule{background:#323232;margin-bottom:clamp(40px,5.5vw,88px)} .footer__grid{ display:grid;gap:clamp(32px,4vw,56px); grid-template-columns:1fr; position:relative;z-index:2; padding-bottom:clamp(48px,6vw,96px); } /* The link column carries two headings now, so it needs more of the row than the brand column: at the old 1.15/.95/.9 split each heading sat in about 140px against the ~187px "About Twine Growth" needs, so it always wrapped to two lines. */ @media(min-width:820px){ .footer__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr) minmax(0,.8fr)} } .footer__logo{height:clamp(23px,2.04vw,31px);width:auto;display:block;margin-bottom:var(--s-4)} .footer__tag{ font-family:var(--font-display);font-weight:500; font-size:clamp(1.05rem,.95rem + .4vw,1.3rem); letter-spacing:-.024em;color:var(--text-bright); } .footer__sub{color:var(--orange);font-size:var(--t-small);margin-top:var(--s-2)} .footer__heading{ color:var(--orange); font-size:clamp(1.05rem,.95rem + .4vw,1.3rem); font-weight:500;letter-spacing:-.024em; margin-bottom:clamp(18px,2vw,28px); } .footer__links{display:grid;gap:clamp(7px,.8vw,11px)} .footer__links a{ color:#7E8184; /* sampled */ font-size:clamp(.84rem,.8rem + .16vw,.94rem); line-height:1.35; transition:color .15s ease; } .footer__links a:hover{color:var(--text-bright)} /* ---------- footer: two grouped link columns -------------------------- One ten-item list was a wall. Split by what someone is actually looking for: the framework and its tools, or the company and how to reach it. The two sit side by side inside the footer's existing nav column, so the overall footer grid is unchanged. Promoted from the homepage's inline copy, where it had lived alone: every other page had the markup and none of the rules, so the groups stacked. */ .footer__nav{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:1fr} @media(min-width:520px){.footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}} .footer__group{display:grid;gap:clamp(10px,1.2vw,16px);align-content:start} .footer__group .footer__heading{margin:0} /* ---------- footer offer: the retainer, in one breath ---------------------- Sits under the wordmark in the brand column, which was the one column with room to spare. */ .footer__offer{ margin-top:clamp(22px,2.6vw,34px);padding:clamp(16px,2vw,22px); border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface); max-width:34ch } .footer__offer-k{margin:0 0 var(--s-2);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)} .footer__offer-t{margin:0;font-family:var(--font-body);font-weight:500;letter-spacing:-.025em;font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);line-height:1.15;color:var(--text-bright)} .footer__offer-t br+*{display:inline} .footer__offer-d{margin:var(--s-3) 0 0;font-size:var(--t-small);line-height:1.5;color:#9A9C9D} .footer__offer-go{display:inline-block;margin-top:var(--s-3);font-size:var(--t-small);font-weight:500;color:var(--orange);text-decoration:none} .footer__offer-go:hover{text-decoration:underline} .footer__cta{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.2vw,30px)} .footer__legal{color:#7E8184;font-size:var(--t-small);line-height:1.5} .footer__legal + .footer__legal{margin-top:calc(-1 * clamp(8px,1vw,14px))} .footer__legal{font-size:var(--t-micro);line-height:1.5} .footer__util{margin:var(--s-2) 0 0;display:flex;align-items:center;gap:8px;font-size:var(--t-micro);color:#7E8184} .footer__util a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(126,129,132,.5);padding-bottom:1px} .footer__util a:hover{color:var(--text-bright);border-color:var(--text-bright)} /* Oversized wordmark, bled off the bottom edge. Decorative only. */ .footer__mark{ position:relative;z-index:0; display:block;width:100%; color:#393C39; /* sampled */ margin-bottom:0; /* sits flush on the page base */ pointer-events:none; } .footer__mark svg{width:100%;height:auto;display:block} /* ---------- footer wordmark rises in --------------------------------------- The big wordmark waits below the page base and lifts into place, fading up as the footer arrives; the dot on the i follows a beat later. Driven by the component engine's data-anim gate, so with no JavaScript it just sits where it always did. */ .footer__mark{transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)} .footer__mark .dot{transform-box:fill-box;transform-origin:center;transition:transform .9s cubic-bezier(.22,.61,.36,1) .35s,opacity .9s ease .35s} .footer__mark[data-anim="ready"]:not(.is-in){opacity:0;transform:translateY(42px)} .footer__mark[data-anim="ready"]:not(.is-in) .dot{transform:translateY(38px);opacity:0} @media(prefers-reduced-motion:reduce){.footer__mark,.footer__mark .dot{transition:none}} .footer__mark .dot{fill:var(--orange)} /* ---------- Rail navigation (manual, long-form cards) ------------------- */ .rail-nav{ display:flex;align-items:center;justify-content:flex-start;gap:var(--s-4); margin-top:var(--s-5); } @media(min-width:0px){ .rail-nav__btn{ display:grid;place-items:center;flex:none; width:44px;height:44px;border-radius:50%; background:var(--surface-2);border:1px solid var(--line-strong); color:var(--text-bright); transition:background-color .18s ease, opacity .18s ease; } .rail-nav__btn svg{width:20px;height:20px} .rail-nav__btn:hover{background:var(--orange);border-color:var(--orange);color:var(--chip-label)} .rail-nav__btn:disabled{opacity:.32;pointer-events:none} .rail-nav__count{font-size:var(--t-small);color:var(--text-soft);min-width:3.5em;text-align:center} } /* Progress segments for the problem-card slideshow */ .hscroll__dots{display:none} @media(max-width:900px){ /* Left aligned to match the section, sitting under the first tile and spanning exactly its width. */ .hscroll__dots{ display:flex;gap:6px; margin-top:var(--s-6); margin-left:var(--gutter); justify-content:flex-start; /* exactly one tile wide: the tile is 78% of the track's content box */ width:calc((100% - 2 * var(--gutter)) * 0.78); } .hscroll__dots .hero__dot{flex:1;width:auto} } /* ---------- Snag fixes -------------------------------------------------- */ @media(max-width:900px){ /* Beyond Launch icons ~30% larger so they fill the art panel */ .bl-card__icon{width:45%;max-width:170px} } /* Footer wordmark dot sits at the same faded weight as the mark itself */ .footer__mark .dot{fill:var(--orange);opacity:.42} /* ---------- Snag round: mobile refinements ----------------------------- */ @media(max-width:900px){ /* Controls sit on the left margin, in line with the body copy */ .rail-nav{justify-content:flex-start;margin-left:var(--gutter)} .hscroll__dots{margin-left:var(--gutter);justify-content:flex-start} /* Controls already inside .wrap inherit its gutter; adding it again pushes them inboard of the body copy. */ .wrap .rail-nav, .wrap .hscroll__dots{margin-left:0} /* Timeline dots were clipping their shadow against the rail edge */ .tl .tl__track{padding-top:10px;padding-bottom:4px} .tl__dot{box-shadow:0 3px 10px rgba(27,33,37,.22), inset 0 1px 0 rgba(255,246,232,.22)} /* Fibre body sits closer to its lead line */ .fibre__points{margin-bottom:clamp(12px,1.5vw,18px)} .fibre__lead{margin-bottom:var(--s-1)} /* Founders heading holds two lines */ /* Two lines on mobile: the desktop break would make it three. */ .founders__title{max-width:none} .fnd-br,.fnd-br1{display:none} /* NOTE: the quote size lives in the .belief__quote rule above. A second font-size rule here used to override it and force 26px on mobile. */ .belief{padding-block:clamp(32px,4vw,48px)} .belief__card{padding:clamp(26px,5vw,44px) clamp(22px,5vw,40px) clamp(30px,5.5vw,48px)} } /* Proof caption: deeper box, more air around the logo, without covering any more of the video than before. */ @media(max-width:900px){ .proof__caption{ padding:clamp(28px,5vw,40px) clamp(22px,4vw,32px) clamp(30px,5.5vw,44px); gap:clamp(20px,4vw,30px); } .proof__logo{max-width:170px} } /* ---------- Rail card widths (mobile overrides, declared last) ---------- --rail-card must match each rail's card width so the trailing spacer can size itself and the last card can reach the gutter. */ @media(max-width:900px){ .hscroll:has(.p-card){--rail-card:78%} .hscroll:has(.tl__step){--rail-card:78%} .hscroll:has(.fibre){--rail-card:84%} } /* ---------- entrance reveal: staggered rise-up ---------------------- Cards/tiles start low + hidden and rise into place when their section scrolls into view, each shortly after the last. Gated on JS being live (html loses .no-js pre-paint) so no-JS users get everything in place. */ html:not(.no-js) .reveal > *{ opacity:0; transform:translateY(26px); } html:not(.no-js) .reveal.is-in > *{ opacity:1; transform:none; transition:opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1); } html:not(.no-js) .reveal.is-in > *:nth-child(1){transition-delay:0s} html:not(.no-js) .reveal.is-in > *:nth-child(2){transition-delay:.08s} html:not(.no-js) .reveal.is-in > *:nth-child(3){transition-delay:.16s} html:not(.no-js) .reveal.is-in > *:nth-child(4){transition-delay:.24s} html:not(.no-js) .reveal.is-in > *:nth-child(5){transition-delay:.32s} @media(prefers-reduced-motion:reduce){ html:not(.no-js) .reveal > *, html:not(.no-js) .reveal.is-in > *{opacity:1;transform:none;transition:none} } .preview-flag{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:999; font:600 11px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase; color:#DCD5C2;background:rgba(12,14,16,.82);border:1px solid rgba(255,255,255,.16); padding:8px 14px;border-radius:8px;backdrop-filter:blur(8px);pointer-events:none} /* Scorecard CTA lives permanently in the header bar (primary lead-gen route). It takes the auto margin so it and the toggle sit together on the right, with the hamburger furthest right. */ .header-cta{margin-left:auto;flex:none} .header-cta__short{display:none} @media(max-width:620px){ .header-cta__full{display:none} .header-cta__short{display:inline} } @media(max-width:420px){ .header-cta .btn__arrow{display:none} .header-cta{padding-inline:var(--s-3)} } /* ================= SITE MENU (hamburger, all breakpoints) ============= Replaces the old inline .site-nav links. The bar keeps only the brand and the toggle; everything else lives in a full-screen overlay so the navigation can be visual rather than a cramped row of text links. */ .nav-toggle{ display:inline-flex;align-items:center;gap:var(--s-3); flex:none;cursor:pointer; height:44px;padding:0 var(--s-4) 0 var(--s-4); background:transparent;border:1px solid var(--line-strong); border-radius:6px;color:var(--text-bright); font-family:var(--font-body);font-size:var(--t-small);font-weight:500; transition:border-color .16s ease, background-color .16s ease; } .nav-toggle:hover{border-color:var(--text-soft);background:var(--surface)} .nav-toggle__bars{display:grid;gap:4px;width:18px;flex:none} .nav-toggle__bars span{ display:block;height:2px;width:100%;background:var(--text-bright); border-radius:2px;transition:transform .26s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .nav-toggle__txt{line-height:1} .menu{ position:fixed;inset:0;z-index:55; /* BELOW the header (60) so the toggle stays clickable as Close */ background:rgba(16,26,29,.975); backdrop-filter:blur(18px) saturate(1.1); overflow-y:auto;overscroll-behavior:contain; padding:calc(var(--header-h) + var(--s-5)) 0 var(--s-8); opacity:0;visibility:hidden; transition:opacity .28s ease, visibility .28s ease; } .menu[data-open="true"]{opacity:1;visibility:visible} .menu__cols{display:grid;gap:var(--s-7);grid-template-columns:1fr} @media(min-width:900px){.menu__cols{grid-template-columns:1.25fr .85fr;gap:var(--s-8)}} .menu__label{ display:block;font-size:var(--t-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--text-soft); margin-bottom:var(--s-4); } .menu__side .menu__label{margin-top:var(--s-6)} .menu__side .menu__label:first-child{margin-top:0} .menu__primary{display:grid;gap:var(--s-1)} .menu__link{ display:grid;grid-template-columns:auto 1fr;align-items:baseline; gap:var(--s-4);text-decoration:none; padding:var(--s-4) 0;border-bottom:1px solid var(--line); transition:padding-left .2s ease; } .menu__link:hover,.menu__link:focus-visible{padding-left:var(--s-3)} .menu__n{ font-size:var(--t-micro);color:var(--text-soft); font-variant-numeric:tabular-nums; display:inline-flex;align-items:center;gap:var(--s-2); } .menu__n::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--fib,var(--orange))} .menu__link:nth-child(2) .menu__n::before{background:var(--fibre-1)} .menu__link:nth-child(3) .menu__n::before{background:var(--fibre-2)} .menu__link:nth-child(4) .menu__n::before{background:var(--fibre-3)} .menu__link:nth-child(5) .menu__n::before{background:var(--fibre-4)} .menu__ttl{ font-family:var(--font-body);font-weight:500; font-size:clamp(1.18rem,1.02rem + .72vw,1.68rem); line-height:1.08;letter-spacing:-.03em;color:var(--text-bright); display:block; } .menu__link:hover .menu__ttl{color:var(--orange)} .menu__desc{ display:block;margin-top:6px;font-size:var(--t-small); color:var(--text-soft);line-height:1.45;max-width:46ch; } .menu__card{ display:block;text-decoration:none; padding:var(--s-5);border:1px solid var(--line); border-radius:var(--r-lg);background:var(--surface); transition:border-color .18s ease, background-color .18s ease, transform .18s ease; } .menu__card + .menu__card{margin-top:var(--s-3)} .menu__card:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-2px)} .menu__card h3{ font-family:var(--font-body);font-weight:500;font-size:1.12rem; letter-spacing:-.02em;color:var(--text-bright);margin:0 0 6px;line-height:1.2; } .menu__card p{font-size:var(--t-small);color:var(--text-soft);line-height:1.5;margin:0} .menu__card .menu__go{ display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3); font-size:var(--t-small);color:var(--orange); } .menu__side .btn{margin-top:var(--s-5);width:100%;justify-content:center} .menu__close{ position:absolute;top:calc(var(--header-h) + var(--s-2));right:var(--gutter); display:inline-flex;align-items:center;gap:var(--s-2); height:38px;padding-inline:var(--s-4);cursor:pointer; background:transparent;border:1px solid var(--line-strong); border-radius:6px;color:var(--text-soft); font-family:var(--font-body);font-size:var(--t-small); transition:color .16s ease, border-color .16s ease; } .menu__close:hover{color:var(--text-bright);border-color:var(--text-soft)} .menu__close span{font-size:1.05rem;line-height:1} @media(min-width:900px){.menu__close{display:none}} /* desktop uses the header toggle */ html.no-js .menu__close{display:none} .menu .wrap{position:relative} html[data-menu-open="true"]{overflow:hidden} /* No-JS: the overlay cannot be opened, so let it sit in the flow instead of trapping the links behind a button that does nothing. */ html.no-js .nav-toggle{display:none} html.no-js .menu{ position:static;opacity:1;visibility:visible; background:none;backdrop-filter:none;padding:var(--s-6) 0 0; } @media(prefers-reduced-motion:reduce){ .menu{transition:none} .menu__link,.menu__card,.nav-toggle__bars span{transition:none} } /* ---------- mobile header: icon-only toggle, compact CTA --------------- The word "Menu" and a full-size Scorecard button crowd a phone header. The toggle keeps its accessible name via aria-label, so hiding the visible text costs nothing for screen readers. */ @media(max-width:700px){ .nav-toggle__txt{display:none} .nav-toggle{padding-inline:0;width:44px;justify-content:center;gap:0} .header-cta{height:36px;font-size:.82rem;padding-inline:var(--s-3)} .header-cta .btn__arrow{width:24px;height:24px;margin-left:-6px;font-size:.85rem} .site-header__bar{gap:var(--s-3);padding-right:var(--s-2)} } /* the in-panel close button is retired: the header toggle sits above the overlay and morphs to a cross, so a second control was redundant. */ .menu__close{display:none} /* ========================================================================== 09 COMPONENT SET (cs-) Interactive and infographic components shared by every page. Built for the case study, promoted here once a second page needed them. Every component renders finished with JavaScript off; twine.js adds the motion and the touch. The cs- prefix is the component set namespace. Motion gate: a component carries data-anim. twine.js sets data-anim="ready" on load and adds .is-in when it scrolls into view. Start states only apply between those two, so no JavaScript means the finished state, never a blank. ========================================================================== */ /* ---------- wrap-wide ------------------------------------------------------ Promoted from a page-local rule on why-franchise-networks. */ .wrap-wide{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:1} /* ---------- light-surface combinations twine.css does not cover ---------- */ .section--light .method__intro, .section--light .cs-prose p{color:var(--text-dark-soft)} .section--light .lead, .section--light .cs-prose .cs-close{color:var(--text-dark)} .section--light .method__title{color:var(--text-dark)} /* ---------- anchor offset under the fixed header ------------------------- */ section[id]{scroll-margin-top:calc(var(--header-h) + var(--s-5))} /* ---------- icon tile: identical recipe to .fibre__icon in twine.css ------- Same size, radius and surface so a tile here is indistinguishable from one on the framework pages. Named separately only because .fibre__icon is semantically the fibre component. */ .cs-ico{ flex:none;display:grid;place-items:center; width:clamp(40px,3.4vw,50px);height:clamp(40px,3.4vw,50px); border-radius:8px;background:#0E1519;color:var(--orange) } .cs-ico svg{width:56%;height:56%} .cs-ico--sm{width:36px;height:36px;border-radius:6px} .section--light .cs-ico{background:#101A1D} /* ---------- shared prose block ------------------------------------------- */ .cs-prose p{margin:0;color:var(--text-soft);font-size:var(--t-lead);line-height:var(--lh-body)} .cs-prose p+p{margin-top:var(--s-4)} .cs-prose .cs-close{color:var(--text-bright)} /* ---------- motion gate --------------------------------------------------- Components carry data-anim. The script sets data-anim="ready" on load and adds .is-in when they scroll into view. Start states only apply between those two, so no JavaScript means the finished state, never a blank. */ @media(prefers-reduced-motion:reduce){[data-anim] *{transition:none!important;animation:none!important}} /* ---------- 01 HERO FACTS: five tiles that count up ---------------------- */ .cs-facts{ margin-top:clamp(40px,5vw,64px); display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden } @media(min-width:720px){.cs-facts{grid-template-columns:repeat(5,1fr)}} .cs-facts__item{background:var(--ink);padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,22px);text-align:left;display:grid;gap:var(--s-3)} .cs-facts__n{ display:block;font-family:var(--font-display);font-weight:500;letter-spacing:-.03em; font-size:clamp(2rem,1.4rem + 2.2vw,3rem);line-height:1;color:var(--text-bright); font-variant-numeric:tabular-nums } .cs-facts__l{display:block;font-size:var(--t-small);color:var(--text-soft);line-height:1.35} /* ---------- 02 STARTING CONDITION ---------------------------------------- */ .cs-split{display:grid;gap:clamp(28px,3.4vw,56px);grid-template-columns:1fr;align-items:start} @media(min-width:960px){.cs-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}} .cs-split--flip .cs-split__a{order:2} .cs-split--flip .cs-split__b{order:1} @media(min-width:960px){.cs-split--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}} .cs-split .method__head{margin-bottom:var(--s-6)} .cs-panel{padding:clamp(22px,2.6vw,34px);border-radius:var(--r-md);background:#B8AE96;color:#0A1013} .cs-panel__k{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:rgba(25,32,34,.62);margin:0 0 var(--s-4)} .cs-panel ul{list-style:none;margin:0;padding:0} .cs-panel li{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-4) 0;border-top:1px solid rgba(25,32,34,.18);font-size:var(--t-lead);line-height:var(--lh-body)} .cs-panel li:first-of-type{border-top:0;padding-top:0} .cs-panel li b{display:block;font-weight:600;margin-bottom:2px} .cs-panel .cs-ico{background:#0A1013} .cs-panel__foot{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid rgba(25,32,34,.18);font-family:var(--font-body);font-size:var(--t-statement);line-height:var(--lh-ui);letter-spacing:-.02em} /* ---------- 03 OWNERSHIP ------------------------------------------------- */ .cs-figure{margin:0;min-width:0} .cs-figure picture{display:block;border-radius:var(--r-md);overflow:hidden;background:rgba(16,26,29,.08)} .cs-figure img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover} .cs-figure figcaption{margin-top:var(--s-3);font-size:var(--t-small);line-height:1.5;max-width:42ch} .section--light .cs-figure figcaption{color:var(--text-dark-soft)} /* ---------- 04 THESIS ---------------------------------------------------- */ .cs-statement{font-family:var(--font-body);font-weight:500;letter-spacing:-.035em;font-size:var(--t-display);line-height:1.08;color:var(--text-bright);margin:clamp(32px,4vw,56px) 0 clamp(28px,3.4vw,44px);max-width:22ch} .cs-statement .hl{color:var(--orange)} .cs-pillars{display:grid;gap:var(--s-5);grid-template-columns:1fr} @media(min-width:840px){.cs-pillars{grid-template-columns:1fr 1fr;gap:var(--s-6)}} .cs-pillar{padding:clamp(24px,2.8vw,36px);border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);display:flex;flex-direction:column;gap:var(--s-4)} .cs-pillar__t{font-family:var(--font-body);font-weight:500;letter-spacing:-.025em;font-size:var(--t-h3-lg);line-height:1.12;color:var(--text-bright);margin:0} .cs-pillar__b{margin:0;color:var(--text-soft);font-size:var(--t-lead);line-height:var(--lh-body)} .cs-verdict{margin-top:var(--s-6);padding:clamp(20px,2.6vw,32px);border-left:3px solid var(--orange);background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0} .cs-verdict p{margin:0;color:var(--text);font-size:var(--t-lead);line-height:var(--lh-body);max-width:66ch} .cs-verdict p+p{margin-top:var(--s-3)} /* ---------- 05 BRAND: points with tiles, anchor pinned right ------------ */ .cs-rail{display:grid;gap:clamp(28px,3.4vw,56px);grid-template-columns:1fr;margin-top:var(--s-7)} @media(min-width:1000px){.cs-rail{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}} .cs-rail__side{min-width:0} @media(min-width:1000px){.cs-rail__side>.cs-anchor{position:sticky;top:calc(var(--header-h) + var(--s-5))}} .cs-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-6)} .cs-points>li{display:flex;gap:var(--s-4);align-items:flex-start} .cs-points p{margin:0;color:var(--text-soft);font-size:var(--t-lead);line-height:var(--lh-body)} .cs-points b{color:var(--text-bright);font-weight:600} .cs-anchor{border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .cs-anchor__mark{padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px);text-align:center;border-bottom:1px solid var(--line)} .cs-anchor__mark img{width:min(280px,80%);height:auto;display:inline-block} .cs-anchor__note{padding:clamp(18px,2.2vw,26px)} .cs-anchor__note p{margin:0;color:var(--text);font-size:var(--t-body);line-height:var(--lh-body)} .cs-anchor__note p+p{margin-top:var(--s-3)} .cs-anchor__note b{color:var(--text-bright);font-weight:600} /* ---------- 06 SYSTEMS: the pipeline ------------------------------------- Two ways in, one path through, one branch out, and head office standing off to the side touching none of it. Nodes are buttons so the captions work from a keyboard; the caption area is one live region rather than a floating tooltip per node. */ .cs-pipe{margin-top:var(--s-7);border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);padding:clamp(20px,2.6vw,36px);overflow:hidden} .cs-pipe__grid{display:grid;gap:var(--s-5);grid-template-columns:1fr} @media(min-width:900px){.cs-pipe__grid{grid-template-columns:minmax(0,1fr) auto;align-items:start}} .cs-pipe__lane{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) 0} .cs-pipe__lane+.cs-pipe__lane{margin-top:var(--s-4)} .cs-pipe__lbl{flex:0 0 100%;font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-bottom:var(--s-2)} .cs-pipe__node{ appearance:none;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-bright); border-radius:6px;padding:8px 14px 8px 8px;display:inline-flex;align-items:center;gap:var(--s-2); font:500 var(--t-small)/1.2 var(--font-body);cursor:pointer;white-space:nowrap; transition:border-color .25s,background .25s,opacity .4s,transform .4s } .cs-pipe__node .cs-ico{width:28px;height:28px;border-radius:6px} .cs-pipe__node .cs-ico svg{width:60%;height:60%} .cs-pipe__node:hover,.cs-pipe__node:focus-visible,.cs-pipe__node.is-active{border-color:var(--orange);background:rgba(240,78,36,.12);outline:none} .cs-pipe__node--in{background:transparent} .cs-pipe__node--hq{border-style:dashed;color:var(--text-soft);cursor:default} .cs-pipe__node--hq .cs-ico{color:var(--text-soft);background:transparent;border:1px dashed var(--line-strong)} .cs-pipe__arrow{flex:none;width:clamp(18px,2.6vw,34px);height:2px;margin:0 2px;background:linear-gradient(90deg,var(--line-strong),var(--orange));position:relative;transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1)} .cs-pipe__arrow::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);transform:translateY(-50%) rotate(45deg)} .cs-pipe__or{flex:none;margin:0 var(--s-3);font-size:var(--t-small);color:var(--text-soft)} .cs-pipe__merge{flex:0 0 100%;display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);font-size:var(--t-small);color:var(--text-soft)} .cs-pipe__merge i{display:block;width:2px;height:18px;margin-left:22px;background:linear-gradient(180deg,var(--line-strong),var(--orange));transform-origin:top;transition:transform .5s cubic-bezier(.22,.61,.36,1)} [data-anim="ready"]:not(.is-in) .cs-pipe__merge i{transform:scaleY(0)} .cs-pipe__side{display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-4);border:1px dashed var(--line-strong);border-radius:var(--r-md)} .cs-pipe__side .cs-pipe__lbl{margin:0} .cs-pipe__cap{margin:var(--s-5) 0 0;min-height:2.6em;padding-top:var(--s-4);border-top:1px solid var(--line);color:var(--text);font-size:var(--t-body);line-height:var(--lh-body)} .cs-pipe__cap b{color:var(--text-bright)} [data-anim="ready"]:not(.is-in) .cs-pipe__node{opacity:.28;transform:translateY(6px)} [data-anim="ready"]:not(.is-in) .cs-pipe__arrow{transform:scaleX(0)} .cs-pipe.is-in .cs-pipe__node{transition-delay:calc(var(--i,0)*90ms)} .cs-pipe.is-in .cs-pipe__arrow{transition-delay:calc(var(--i,0)*90ms + 60ms)} .cs-ledger{list-style:none;margin:var(--s-7) 0 0;padding:0;border-top:1px solid var(--line-strong)} .cs-ledger>li{display:grid;gap:var(--s-3) clamp(24px,3vw,48px);grid-template-columns:1fr;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line)} @media(min-width:900px){.cs-ledger>li{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}} .cs-ledger__c{margin:0;display:flex;gap:var(--s-4);align-items:flex-start;font-family:var(--font-body);font-weight:500;letter-spacing:-.025em;font-size:var(--t-h3-lg);line-height:1.15;color:var(--text-bright)} .cs-ledger__e{margin:0;color:var(--text-soft);font-size:var(--t-lead);line-height:var(--lh-body)} /* ten-phase ownership bar: structure only, no phase names, so nothing here leaks the blueprint */ .cs-phases{margin-top:var(--s-4)} .cs-phases__bar{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;height:14px} .cs-phases__seg{border-radius:4px;background:var(--line-strong);transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1),background .3s} .cs-phases__seg[data-o="ho"]{background:var(--stone)} .cs-phases__seg[data-o="tr"]{background:var(--orange)} .cs-phases__seg[data-o="fr"]{background:var(--fibre-2)} [data-anim="ready"]:not(.is-in) .cs-phases__seg{transform:scaleX(0)} .cs-phases.is-in .cs-phases__seg{transition-delay:calc(var(--i,0)*60ms)} .cs-phases__key{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-top:var(--s-3);font-size:var(--t-small);color:var(--text-soft)} .cs-phases__key span{display:inline-flex;align-items:center;gap:6px} .cs-phases__key i{width:10px;height:10px;border-radius:3px;display:inline-block} /* ---------- 07 WHAT CHANGED: the switch, then the table ------------------ One diagram, two states. Before, every arrow passes through the founder. After, the founder node dims and the arrows go direct. The switch is a real switch, so it works with a keyboard and announces its state. */ .cs-flip{margin-top:var(--s-7);border:1px solid rgba(16,26,29,.22);border-radius:var(--r-lg);background:rgba(16,26,29,.045);padding:clamp(20px,2.6vw,32px)} .cs-flip__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)} .cs-flip__t{margin:0;font-family:var(--font-body);font-weight:500;letter-spacing:-.02em;font-size:var(--t-h3);color:var(--text-dark)} .cs-switch{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--t-small);color:var(--text-dark-soft)} .cs-switch__btn{ appearance:none;border:0;cursor:pointer;position:relative;width:64px;height:32px;border-radius:8px; background:#B8AE96;transition:background .3s;flex:none } .cs-switch__btn::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#101A1D;transition:transform .3s cubic-bezier(.22,.61,.36,1)} .cs-switch__btn[aria-checked="true"]{background:var(--orange)} .cs-switch__btn[aria-checked="true"]::after{transform:translateX(32px)} .cs-switch__btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px} .cs-switch b{color:var(--text-dark);font-weight:600} .cs-flip__svg{display:block;width:100%;height:auto;max-width:900px;margin:0 auto} .cs-flip__svg text{font-family:var(--font-body);font-size:13px;fill:#101A1D} .cs-flip__svg .n{fill:#F3EEE4;stroke:#101A1D;stroke-width:1.4} .cs-flip__svg .f{fill:#101A1D;stroke:none} .cs-flip__svg .f-t{fill:#E9E3D4} .cs-flip__svg .a{fill:none;stroke:#101A1D;stroke-width:1.8;stroke-linecap:round} .cs-flip__svg .a-d{stroke:var(--orange)} .cs-flip__svg .via,.cs-flip__svg .direct,.cs-flip__svg .f,.cs-flip__svg .f-t{transition:opacity .45s ease,stroke-dashoffset .6s ease} .cs-flip[data-state="before"] .direct{opacity:0} .cs-flip[data-state="after"] .via{opacity:0} .cs-flip[data-state="after"] .f{opacity:.16} .cs-flip[data-state="after"] .f-t{opacity:0} /* Under 600px the 900-unit viewBox renders labels at about 5px. The shapes still say through-the-middle versus direct, and the note beneath carries the words, so the labels go rather than shrink to nothing. */ @media(max-width:600px){.cs-flip__svg text{display:none}} .cs-flip__note{margin:var(--s-4) 0 0;color:var(--text-dark-soft);font-size:var(--t-small);line-height:1.5;min-height:2.4em} .cs-flip__note b{color:var(--text-dark)} .cs-table{width:100%;border-collapse:collapse;margin-top:var(--s-7)} .cs-table th,.cs-table td{text-align:left;padding:var(--s-4) var(--s-5);vertical-align:top;line-height:var(--lh-body);border-bottom:1px solid rgba(16,26,29,.14)} .cs-table thead th{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--text-dark-soft);border-bottom:1px solid rgba(16,26,29,.32)} .cs-table td{color:var(--text-dark-soft);font-size:var(--t-lead)} .cs-table .cs-after{color:var(--text-dark);background:rgba(16,26,29,.045)} @media(max-width:760px){ .cs-table thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .cs-table tr{display:block;border-bottom:1px solid rgba(16,26,29,.18);padding:var(--s-4) 0} .cs-table td{display:block;border:0;padding:var(--s-2) 0} .cs-table td::before{content:attr(data-label);display:block;font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-dark-soft);margin-bottom:var(--s-1)} .cs-table .cs-after{background:none;padding-top:var(--s-3)} } /* ---------- 08 JOURNEY: two years as three tracks ------------------------- The intro says the brand and systems tracks ran together rather than one after the other. Five cards in a row cannot show that; three lanes on a shared month axis can. Bars draw in on arrival, a playhead sweeps the two years once, then the scrubber is yours: drag it and the caption says what was live that month. Bars are buttons so each one explains itself. */ .cs-gantt{--lbl:132px;--n:24;margin-top:var(--s-7);border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);padding:clamp(18px,2.4vw,32px);overflow:hidden} @media(max-width:700px){.cs-gantt{--lbl:44px}} .cs-gantt__axis{display:grid;grid-template-columns:var(--lbl) 1fr;margin-bottom:var(--s-3)} .cs-gantt__years{display:grid;grid-template-columns:repeat(var(--n),1fr);position:relative;height:34px} .cs-gantt__year{grid-row:1;font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);border-left:1px solid var(--line-strong);padding:2px 0 0 8px;white-space:nowrap} .cs-gantt__tick{grid-row:1;align-self:end;height:6px;border-left:1px solid var(--line)} .cs-gantt__body{position:relative} .cs-gantt__lane{display:grid;grid-template-columns:var(--lbl) 1fr;align-items:center;gap:0;padding:var(--s-2) 0;border-top:1px solid var(--line)} .cs-gantt__lane:first-child{border-top:0} .cs-gantt__lbl{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-small);font-weight:500;color:var(--text-bright);padding-right:var(--s-3)} .cs-gantt__lbl .cs-ico{width:30px;height:30px;border-radius:6px} .cs-gantt__lbl .cs-ico svg{width:58%;height:58%} @media(max-width:700px){.cs-gantt__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}} .cs-gantt__track{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-auto-rows:34px;gap:6px 0;position:relative;min-height:34px} .cs-gantt__track::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/var(--n)));opacity:.6;pointer-events:none} .cs-gantt__bar{ appearance:none;border:0;cursor:pointer;position:relative;z-index:1;margin:0 2px; border-radius:8px;background:var(--c);color:#101A1D; font:500 var(--t-micro)/1.1 var(--font-body);text-align:left;padding:0 10px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transform-origin:left;transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .3s,filter .2s,box-shadow .2s } .cs-gantt__bar[data-lane="brand"]{--c:var(--orange);color:#fff} .cs-gantt__bar[data-lane="systems"]{--c:var(--fibre-2)} .cs-gantt__bar[data-lane="franchise"]{--c:#B8AE96} .cs-gantt__bar:hover,.cs-gantt__bar:focus-visible,.cs-gantt__bar.is-active{filter:brightness(1.12);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--c);outline:none} /* a one- or two-month bar cannot hold its own name. The label sits outside it, the way a printed Gantt does: to the right for the first item on the board, to the left for the last, so neither runs off the axis. */ .cs-gantt__bar--out{overflow:visible;text-overflow:clip} .cs-gantt__bar--out .cs-gantt__t{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-bright);white-space:nowrap;pointer-events:none} .cs-gantt__bar--right .cs-gantt__t{left:calc(100% + 8px)} .cs-gantt__bar--left .cs-gantt__t{right:calc(100% + 8px)} @media(max-width:700px){.cs-gantt__bar--out .cs-gantt__t{display:none}} .cs-gantt.is-scrubbed .cs-gantt__bar:not(.is-live){opacity:.32} @media(max-width:700px){.cs-gantt__bar{font-size:0;padding:0}} [data-anim="ready"]:not(.is-in) .cs-gantt__bar{transform:scaleX(0)} .cs-gantt.is-in .cs-gantt__bar{transition-delay:calc(var(--i,0)*110ms)} .cs-gantt__over{position:absolute;top:0;bottom:0;left:var(--lbl);right:0;pointer-events:none} .cs-gantt__head{position:absolute;top:-6px;bottom:-6px;left:calc((var(--m,0) + .5)/var(--n)*100%);width:2px;margin-left:-1px;background:var(--paper);opacity:0;transition:opacity .3s} .cs-gantt__head::before{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--paper);transform:translateX(-50%)} .cs-gantt.is-scrubbed .cs-gantt__head{opacity:.9} .cs-gantt__scrub{display:grid;grid-template-columns:var(--lbl) 1fr;align-items:center;margin-top:var(--s-4)} .cs-gantt__scrub input{ -webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0 } .cs-gantt__scrub input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line-strong)} .cs-gantt__scrub input::-moz-range-track{height:4px;border-radius:2px;background:var(--line-strong)} .cs-gantt__scrub input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--paper);border:3px solid var(--orange);box-shadow:0 2px 10px rgba(0,0,0,.4)} .cs-gantt__scrub input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--orange)} .cs-gantt__scrub input:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px} .cs-gantt__scrub-l{font-size:var(--t-small);color:var(--text-soft)} .cs-gantt__cap{margin:var(--s-4) 0 0;min-height:2.6em;padding-top:var(--s-4);border-top:1px solid var(--line);color:var(--text);font-size:var(--t-body);line-height:var(--lh-body)} .cs-gantt__cap b{color:var(--text-bright)} .cs-gantt__cap em{font-style:normal;color:var(--orange)} .cs-gantt__key{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-top:var(--s-3);font-size:var(--t-small);color:var(--text-soft)} .cs-gantt__key span{display:inline-flex;align-items:center;gap:6px} .cs-gantt__key i{width:12px;height:12px;border-radius:3px;display:inline-block} /* ---------- 09 EASY PARTS ------------------------------------------------ */ .cs-trio{display:grid;gap:var(--s-5);grid-template-columns:1fr;margin-top:var(--s-7)} @media(min-width:820px){.cs-trio{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}} .cs-trio__item{padding-top:var(--s-4);border-top:1px solid var(--line-strong)} .cs-trio__h{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-3)} .cs-trio__t{margin:0;font-size:var(--t-small);color:var(--orange);font-weight:500} .cs-trio__b{margin:0;color:var(--text-soft);font-size:var(--t-body);line-height:var(--lh-body)} .cs-trio__close{margin:var(--s-7) 0 0;font-family:var(--font-body);font-weight:500;letter-spacing:-.025em;font-size:var(--t-statement);line-height:var(--lh-ui);color:var(--text-bright);max-width:40ch} /* ---------- 10 LESSONS: bento with tiles --------------------------------- */ .cs-bento{list-style:none;padding:0;display:grid;gap:var(--s-5);grid-template-columns:1fr;margin:var(--s-7) 0 0} @media(min-width:900px){.cs-bento{grid-template-columns:repeat(3,1fr)}.cs-bento>li:first-child{grid-column:span 2}} .cs-bento>li{padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);display:grid;gap:var(--s-3);align-content:start} .cs-bento b{display:block;font-family:var(--font-body);font-weight:500;letter-spacing:-.02em;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.2;color:var(--text-bright)} .cs-bento p{margin:0;color:var(--text-soft);font-size:var(--t-body);line-height:var(--lh-body)} /* ---------- 11 TODAY: the territory matrix ------------------------------- One hundred and eleven cells, one lit, one reserved. The honest number, drawn rather than written, so it cannot be skimmed past. */ .cs-today{display:grid;gap:clamp(28px,3.4vw,56px);grid-template-columns:1fr;align-items:start} @media(min-width:960px){.cs-today{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}} .cs-today__big{font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;font-size:var(--t-display);line-height:1.02;color:var(--text-dark);margin:0} .cs-today__big .hl{color:var(--orange)} .cs-map{margin-top:var(--s-6)} .cs-map__grid{display:grid;grid-template-columns:repeat(16,1fr);gap:5px;max-width:480px} .cs-map__grid i{display:block;aspect-ratio:1;border-radius:3px;background:rgba(16,26,29,.16);transition:opacity .35s ease,transform .35s ease,background .3s} .cs-map__grid i.is-reserved{background:#B8AE96;outline:1px solid rgba(16,26,29,.35);outline-offset:-1px} .cs-map__grid i.is-trading{background:var(--orange);box-shadow:0 0 0 3px rgba(240,78,36,.22)} [data-anim="ready"]:not(.is-in) .cs-map__grid i{opacity:0;transform:scale(.4)} .cs-map.is-in .cs-map__grid i{transition-delay:calc(var(--i,0)*9ms)} .cs-map.is-in .cs-map__grid i.is-trading{animation:cs-pulse 1.2s ease 1.2s 2} @keyframes cs-pulse{0%,100%{box-shadow:0 0 0 3px rgba(240,78,36,.22)}50%{box-shadow:0 0 0 8px rgba(240,78,36,.08)}} .cs-map__key{display:grid;gap:var(--s-2);margin-top:var(--s-5);font-size:var(--t-small);color:var(--text-dark-soft)} .cs-map__key span{display:flex;align-items:center;gap:var(--s-3)} .cs-map__key i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none} .cs-map__key b{color:var(--text-dark);font-weight:600;font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right} .cs-today__line{margin:clamp(40px,5vw,72px) 0 0;padding-top:clamp(24px,3vw,40px);border-top:1px solid rgba(16,26,29,.32);font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;font-size:var(--t-display);line-height:1.06;color:var(--text-dark)} .cs-today__line .hl{color:var(--orange)} /* ---------- 12 YOUR NETWORK: fibre bars ---------------------------------- Illustrative, and says so: four fibres in reasonable shape, one holding everything back. Hover or focus a bar to see which it is. */ .cs-bars{border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);padding:clamp(20px,2.4vw,30px)} .cs-bars__k{margin:0 0 var(--s-5);font-size:var(--t-small);color:var(--text-soft);line-height:1.5} .cs-bars__chart{--chart:120px;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3);align-items:end} .cs-bars__bar{ appearance:none;border:0;padding:0;background:none;cursor:pointer; display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-2); height:calc(var(--chart) + 26px); font:500 var(--t-micro)/1.2 var(--font-body);color:var(--text-soft);text-align:center } /* px from a fixed chart height: a percentage here would resolve against an auto-sized track and collapse to nothing */ .cs-bars__bar i{display:block;height:calc(var(--h) * var(--chart) / 100);border-radius:6px 6px 3px 3px;background:var(--c);transform-origin:bottom;transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .2s} .cs-bars__bar:hover i,.cs-bars__bar:focus-visible i{filter:brightness(1.18)} .cs-bars__bar:focus-visible{outline:none;color:var(--text-bright)} .cs-bars__bar--weak{color:var(--text-bright)} [data-anim="ready"]:not(.is-in) .cs-bars__bar i{transform:scaleY(0)} .cs-bars.is-in .cs-bars__bar i{transition-delay:calc(var(--i,0)*80ms)} .cs-bars__cap{margin:var(--s-4) 0 0;min-height:2.4em;font-size:var(--t-small);color:var(--text);line-height:1.5} .cs-bars__cap b{color:var(--text-bright)} .cs-bars .btn{margin-top:var(--s-5);width:100%;justify-content:center} .cs-pipe__n{font:600 .74rem/1 var(--font-body);letter-spacing:.02em} .cs-pipe__node[data-fib]{--c:var(--fib)} .cs-pipe__node[data-fib] .cs-ico{color:var(--fib)} .cs-pipe__node[data-fib]:hover,.cs-pipe__node[data-fib]:focus-visible,.cs-pipe__node[data-fib].is-active{border-color:var(--fib);background:color-mix(in srgb, var(--fib) 14%, transparent)} .cs-pipe__arrow[data-fib]{background:linear-gradient(90deg,var(--line-strong),var(--fib))} .cs-pipe__arrow[data-fib]::after{border-color:var(--fib)} /* dark-surface variant of the flip: the component default is paper */ .cs-flip--dark{border-color:var(--line-strong);background:var(--surface)} .cs-flip--dark .cs-flip__t{color:var(--text-bright)} .cs-flip--dark .cs-switch{color:var(--text-soft)} .cs-flip--dark .cs-switch b{color:var(--text-bright)} .cs-flip--dark .cs-switch__btn{background:var(--line-strong)} .cs-flip--dark .cs-switch__btn::after{background:var(--paper)} .cs-flip--dark .cs-flip__svg text{fill:var(--text-bright)} .cs-flip--dark .cs-flip__svg .n{fill:var(--surface-2);stroke:var(--line-strong)} .cs-flip--dark .cs-flip__svg .a{stroke:var(--line-strong)} .cs-flip--dark .cs-flip__svg .f{fill:var(--orange)} .cs-flip--dark .cs-flip__svg .f-t{fill:#fff} .cs-flip--dark .cs-flip__note{color:var(--text)} .cs-flip--dark .cs-flip__note b{color:var(--text-bright)} /* --hold keeps the centre node solid in the after state, for diagrams where the centre is the network rather than a bottleneck being removed */ .cs-flip--hold[data-state="after"] .f,.cs-flip--hold[data-state="after"] .f-t{opacity:1} .cs-flip--dark .cs-flip__svg .a-d{stroke:var(--orange)} /* the stage rail is built by twine.js from the page's .stage articles; with no script there are no nodes, so the shell stays out of the way */ [data-stage-rail]:not(.is-built){display:none} /* ---------- paper surface: re-scope the tokens --------------------------- Every component that colours itself from the tokens adapts to the paper surface without a rule of its own. Hard-coded card backgrounds (tan, slate, the ink tiles) stay as they are, which is what a card should do. */ .section--light{ --text:var(--text-dark); --text-soft:var(--text-dark-soft); --text-bright:var(--text-dark); --line:rgba(16,26,29,.14); --line-strong:rgba(16,26,29,.32); --surface:rgba(16,26,29,.045); --surface-2:rgba(16,26,29,.08); } /* ---------- weave: seven threads become one twine -------------------------- Seven lines start apart on the left, converge, and run on as a single braided bundle. They draw in on arrival, staggered. The chips beside the head are the seven items as text; hovering or focusing one lights its thread and dims the rest, driven by :has() so the captions engine needs nothing extra. The chip list is also the no-JS and screen-reader copy. */ .cs-weave{position:relative} .cs-weave__svg{display:block;width:100%;height:auto} .cs-weave__path{stroke-dasharray:1;stroke-dashoffset:0;opacity:.9;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1),opacity .3s,stroke-width .3s} [data-anim="ready"]:not(.is-in) .cs-weave__path{stroke-dashoffset:1} .cs-weave.is-in .cs-weave__path{transition-delay:calc(var(--i,0)*110ms)} .cs-weave__start{transition:opacity .4s,r .3s;transition-delay:calc(var(--i,0)*110ms)} [data-anim="ready"]:not(.is-in) .cs-weave__start{opacity:0} .cs-weave__end{fill:var(--orange);stroke:var(--ink);stroke-width:5;transition:opacity .4s 1.6s,r .3s} [data-anim="ready"]:not(.is-in) .cs-weave__end{opacity:0} .cs-weave__lbl{font:500 20px var(--font-body);fill:var(--text-soft);letter-spacing:.02em} .cs-weave__lbl--r{fill:var(--text-bright);font-family:var(--font-display);font-size:34px;letter-spacing:-.02em} [data-captions]:has(.cs-weave__chip.is-active) .cs-weave__path{opacity:.18} [data-captions]:has(.cs-weave__chip.is-active) .cs-weave__start{opacity:.35} #one-partner:has([data-thread="1"].is-active) .cs-weave__path[data-thread="1"],.cs-weave:has([data-thread="1"].is-active) .cs-weave__path[data-thread="1"]{opacity:1;stroke-width:11} #one-partner:has([data-thread="1"].is-active) .cs-weave__start[data-thread="1"]{r:13} #one-partner:has([data-thread="2"].is-active) .cs-weave__path[data-thread="2"],.cs-weave:has([data-thread="2"].is-active) .cs-weave__path[data-thread="2"]{opacity:1;stroke-width:11} #one-partner:has([data-thread="2"].is-active) .cs-weave__start[data-thread="2"]{r:13} #one-partner:has([data-thread="3"].is-active) .cs-weave__path[data-thread="3"],.cs-weave:has([data-thread="3"].is-active) .cs-weave__path[data-thread="3"]{opacity:1;stroke-width:11} #one-partner:has([data-thread="3"].is-active) .cs-weave__start[data-thread="3"]{r:13} #one-partner:has([data-thread="4"].is-active) .cs-weave__path[data-thread="4"],.cs-weave:has([data-thread="4"].is-active) .cs-weave__path[data-thread="4"]{opacity:1;stroke-width:11} #one-partner:has([data-thread="4"].is-active) .cs-weave__start[data-thread="4"]{r:13} #one-partner:has([data-thread="5"].is-active) .cs-weave__path[data-thread="5"],.cs-weave:has([data-thread="5"].is-active) .cs-weave__path[data-thread="5"]{opacity:1;stroke-width:11} #one-partner:has([data-thread="5"].is-active) .cs-weave__start[data-thread="5"]{r:13} #one-partner:has([data-thread="6"].is-active) .cs-weave__path[data-thread="6"],.cs-weave:has([data-thread="6"].is-active) .cs-weave__path[data-thread="6"]{opacity:1;stroke-width:11} #one-partner:has([data-thread="6"].is-active) .cs-weave__start[data-thread="6"]{r:13} #one-partner:has([data-thread="7"].is-active) .cs-weave__path[data-thread="7"],.cs-weave:has([data-thread="7"].is-active) .cs-weave__path[data-thread="7"]{opacity:1;stroke-width:11} #one-partner:has([data-thread="7"].is-active) .cs-weave__start[data-thread="7"]{r:13} .cs-weave__chips{display:grid;gap:var(--s-2);margin-top:var(--s-5)} @media(min-width:560px){.cs-weave__chips{grid-template-columns:1fr 1fr}} .cs-weave__chip{ appearance:none;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-bright); border-radius:6px;padding:9px 14px 9px 10px;display:inline-flex;align-items:center;gap:10px; font:500 var(--t-small)/1.2 var(--font-body);cursor:pointer;text-align:left; transition:border-color .25s,background .25s,opacity .3s,transform .4s } .cs-weave__chip i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)} .cs-weave__chip:hover,.cs-weave__chip:focus-visible,.cs-weave__chip.is-active{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);outline:none} [data-anim="ready"]:not(.is-in)~* .cs-weave__chip{opacity:.3} .cs-weave__cap{margin:var(--s-4) 0 0;min-height:2.6em;padding-top:var(--s-3);border-top:1px solid var(--line);color:var(--text);font-size:var(--t-body);line-height:var(--lh-body)} .cs-weave__cap b{color:var(--text-bright)} @media(prefers-reduced-motion:reduce){.cs-weave__path,.cs-weave__start,.cs-weave__end{transition:none}} /* ---------- light utility: re-scope the tokens on any wrapper ------------- */ .cs-light{--text:var(--text-dark);--text-soft:var(--text-dark-soft);--text-bright:var(--text-dark);--line:rgba(16,26,29,.14);--line-strong:rgba(16,26,29,.32);--surface:rgba(16,26,29,.045);--surface-2:rgba(16,26,29,.08)} .cs-light .cs-ico{background:#101A1D} /* ---------- stepper: one panel at a time, advancing on its own ------------ Fibre tabs across the top, each with a progress bar that fills over the interval; the panel beneath swaps as it completes. Hover or focus pauses it, choosing a tab stops it for good, arrow keys move between tabs. With no JavaScript every panel shows, stacked, and the tabs are inert. */ .cs-stepper{text-align:left;max-width:1080px;margin:var(--s-7) auto 0} .cs-stepper__tabs{display:grid;gap:var(--s-2);grid-template-columns:repeat(2,1fr)} @media(min-width:760px){.cs-stepper__tabs{grid-template-columns:repeat(4,1fr)}} .cs-stepper__tab{ appearance:none;border:1px solid var(--line-strong);background:transparent;color:var(--text-soft); border-radius:var(--r-md);padding:12px 14px 14px;display:grid;grid-template-columns:auto 1fr;gap:var(--s-3); align-items:center;text-align:left;cursor:pointer;position:relative;overflow:hidden; transition:border-color .25s,background .25s,color .25s } .cs-stepper__tab .cs-ico{width:36px;height:36px;border-radius:6px;color:var(--fib)} .cs-stepper__k{display:block;font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)} .cs-stepper__t{display:block;font-family:var(--font-body);font-weight:500;font-size:var(--t-h3);letter-spacing:-.02em;color:var(--text-bright);line-height:1.1;margin-top:2px} .cs-stepper__tab:hover,.cs-stepper__tab:focus-visible{border-color:var(--fib);outline:none} .cs-stepper__tab[aria-selected="true"]{border-color:var(--fib);background:color-mix(in srgb,var(--fib) 10%,transparent)} .cs-stepper__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--fib);transform:scaleX(0);transform-origin:left} .cs-stepper.is-playing .cs-stepper__tab[aria-selected="true"] .cs-stepper__bar{animation:cs-step-fill var(--interval,6500ms) linear forwards} .cs-stepper.is-paused .cs-stepper__bar{animation-play-state:paused} .cs-stepper__tab[aria-selected="true"]:not(.cs-stepper.is-playing *) .cs-stepper__bar{transform:scaleX(1)} @keyframes cs-step-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} .cs-stepper__panels{margin-top:var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);padding:clamp(22px,3vw,40px)} .cs-stepper__panel{display:grid;gap:var(--s-5);grid-template-columns:1fr;align-items:start} @media(min-width:760px){.cs-stepper__panel{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,48px)}} .cs-stepper__panel[hidden]{display:none} .cs-stepper__num{font-family:var(--font-display);font-weight:500;letter-spacing:-.04em;font-size:clamp(3rem,2rem + 4vw,6rem);line-height:.9;color:var(--fib);opacity:.9} .cs-stepper__fib{margin:0 0 var(--s-2);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)} .cs-stepper__body{margin:0;font-size:var(--t-statement);line-height:1.45;color:var(--text-soft);max-width:60ch} .cs-stepper__body b{color:var(--text-bright);font-weight:600} .cs-stepper__panel.is-active{animation:cs-step-in .5s cubic-bezier(.22,.61,.36,1)} @keyframes cs-step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* no JavaScript: every panel shows, stacked */ html:not(.js-stepper) .cs-stepper__panel[hidden]{display:grid} html:not(.js-stepper) .cs-stepper__panel+.cs-stepper__panel{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line)} @media(prefers-reduced-motion:reduce){.cs-stepper__bar,.cs-stepper__panel.is-active{animation:none!important}} /* ---------- self-check: five questions the reader answers on the spot ------ Each question carries two buttons. The tally beside the head keeps score in the fibre colours, the verdict line changes with the count, and the scorecard button appears once a single answer is in. Nothing is stored; it is a mirror, not a form. With no JavaScript the buttons and tally stay out of the way and the questions read as a list. */ .cs-check__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)} .cs-check__q{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start;padding:clamp(16px,2vw,22px);border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);transition:border-color .25s,background .25s} .cs-check__q[data-state="yes"]{border-left-color:var(--fib);background:color-mix(in srgb,var(--fib) 8%,transparent)} .cs-check__q[data-state="no"]{border-left-color:var(--line-strong)} .cs-check__q .cs-ico{color:var(--fib)} .cs-check__t{margin:0;font-family:var(--font-body);font-weight:500;font-size:var(--t-h3);letter-spacing:-.02em;color:var(--text-bright);line-height:1.2} .cs-check__d{margin:var(--s-2) 0 0;font-size:var(--t-small);color:var(--text-soft);line-height:1.5} .cs-check__ans{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)} .cs-check__ans button{appearance:none;border:1px solid var(--line-strong);background:transparent;color:var(--text-soft);border-radius:6px;padding:7px 12px;font:500 var(--t-micro)/1 var(--font-body);cursor:pointer;transition:border-color .2s,background .2s,color .2s} .cs-check__ans button:hover,.cs-check__ans button:focus-visible{color:var(--text-bright);border-color:var(--text-soft);outline:none} .cs-check__ans button[aria-pressed="true"]{color:#101A1D;background:var(--text-bright);border-color:var(--text-bright)} .cs-check__q[data-state="yes"] .cs-check__ans button[aria-pressed="true"]{background:var(--fib);border-color:var(--fib);color:#fff} .cs-check__tally{margin-top:var(--s-6);padding:clamp(18px,2.2vw,26px);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);max-width:34rem} .cs-check__k{margin:0 0 var(--s-3);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)} .cs-check__score{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;font-size:var(--t-h3-lg);line-height:1.1;color:var(--text-soft)} .cs-check__score b{color:var(--orange);font-weight:500;font-variant-numeric:tabular-nums} .cs-check__segs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:var(--s-4)} .cs-check__segs i{display:block;height:8px;border-radius:4px;background:var(--line-strong);transition:background .3s,transform .3s;transform-origin:left} .cs-check__segs i.is-on{background:var(--fib)} .cs-check__verdict{margin:var(--s-4) 0 0;font-size:var(--t-body);color:var(--text);line-height:var(--lh-body)} .cs-check__cta{margin-top:var(--s-4)} .cs-check__cta[hidden]{display:none} html:not(.js-check) .cs-check__ans,html:not(.js-check) .cs-check__tally{display:none} /* ========================================================================== 10 TICKER A fixed strip above the floating header carrying the retainer message. Ink surface, sand body, orange leads. The header sits below it and --header-h (the clearance token every hero, anchor offset and sticky panel is built on) grows by its height, so nothing else needs to know it exists. It slides away as you scroll down and comes back as soon as you scroll up, with the header rising to fill the gap. The track is duplicated for a seamless loop; assistive tech reads the copy once from a static list and the moving copy is hidden from it. Pauses on hover, on focus, on the button, and under reduced motion, where it becomes a static row you can scroll. ========================================================================== */ :root{--ticker-h:34px} .site-header{top:var(--ticker-h);transition:top .35s cubic-bezier(.22,.61,.36,1)} .ticker{ position:fixed;top:0;left:0;right:0;z-index:50;height:var(--ticker-h); background:var(--ink);color:var(--text-bright);border-bottom:1px solid rgba(233,227,212,.10); display:flex;align-items:center;overflow:hidden; font:400 .78rem/1 var(--font-body); transition:transform .35s cubic-bezier(.22,.61,.36,1) } html.ticker-hidden .ticker{transform:translateY(-100%)} html.ticker-hidden .site-header{top:0} .ticker__view{flex:1;min-width:0;overflow:hidden;height:100%;display:flex;align-items:center; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)} .ticker__track{display:flex;align-items:center;white-space:nowrap;will-change:transform; animation:ticker-run var(--ticker-dur,44s) linear infinite} .ticker:hover .ticker__track,.ticker:focus-within .ticker__track,.ticker.is-paused .ticker__track{animation-play-state:paused} .ticker__item{display:inline-flex;align-items:center;gap:.5em;padding:0 clamp(18px,2.4vw,36px)} .ticker__item b{color:var(--orange);font-weight:500} .ticker__item::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange);opacity:.7;margin-left:clamp(18px,2.4vw,36px)} .ticker__btn{ flex:none;appearance:none;border:0;border-left:1px solid rgba(233,227,212,.14);background:var(--ink); color:var(--text-soft);height:100%;padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px; font:400 .74rem/1 var(--font-body) } .ticker__btn:hover,.ticker__btn:focus-visible{color:var(--text-bright);outline:none} .ticker__btn:focus-visible{box-shadow:inset 0 0 0 2px var(--orange)} .ticker__btn svg{width:11px;height:11px} .ticker__btn .on{display:none} .ticker.is-paused .ticker__btn .on{display:inline} .ticker.is-paused .ticker__btn .off{display:none} @keyframes ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .ticker__track{animation:none} .ticker__view{overflow-x:auto;mask-image:none;-webkit-mask-image:none} .ticker__track>[aria-hidden]{display:none} .ticker__btn{display:none} .ticker,.site-header{transition:none} } /* ========================================================================== 11 MENU, CONDENSED The overlay used to stretch four links to fill the viewport and stack the rest beneath, which meant scrolling to see the site. Three columns now, laid from the top: Explore with the five fibres as chips beneath, Read as tight rows, Talk with the scorecard and the call. It fits one screen at 900px tall. The old class names are kept so the header toggle, the current-page markers and the checks keep working. ========================================================================== */ .menu .wrap{align-content:start} .menu__cols{align-content:start;align-items:start;gap:var(--s-6)} @media(min-width:900px){.menu__cols.menu__cols--3{grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.8fr);gap:clamp(28px,3.4vw,56px)}} .menu__primary{gap:0;align-content:start} .menu__label{margin-bottom:var(--s-3)} .menu__link{padding:10px 0;border-top:1px solid var(--line);gap:var(--s-3)} .menu__link:first-of-type{border-top:0} .menu__link:hover,.menu__link:focus-visible{padding-left:var(--s-2)} .menu__ttl{font-size:clamp(1.05rem,.98rem + .35vw,1.3rem)} .menu__desc{margin-top:3px;font-size:var(--t-micro);max-width:38ch} .menu__label--fibres{margin-top:var(--s-6)} .menu__fibres{display:flex;flex-wrap:wrap;gap:6px} .menu__fibres a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;border:1px solid var(--line-strong); color:var(--text-bright);text-decoration:none;font:500 var(--t-small)/1 var(--font-body);transition:border-color .2s,background .2s} .menu__fibres a i{width:8px;height:8px;border-radius:50%;background:var(--fib);display:inline-block} .menu__fibres a:hover,.menu__fibres a:focus-visible,.menu__fibres a[aria-current]{border-color:var(--fib);background:color-mix(in srgb,var(--fib) 14%,transparent)} .menu__read .menu__card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-3);padding:9px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent} .menu__read .menu__card + .menu__card{margin-top:0} .menu__read .menu__card:first-of-type{border-top:0} .menu__read .menu__card:hover,.menu__read .menu__card:focus-visible{background:transparent;transform:none;padding-left:var(--s-2)} .menu__read .menu__card h3{font-size:1rem;margin:0;line-height:1.25} .menu__read .menu__card p{font-size:var(--t-micro);margin-top:3px;max-width:44ch} .menu__read .menu__card h3,.menu__read .menu__card p{grid-column:1;text-align:left} .menu__read .menu__card .menu__go{grid-column:2;grid-row:1/3;margin:0;font-size:1.05rem;color:var(--text-soft)} /* short laptops: the descriptions go so the whole menu still fits one screen */ @media(max-height:780px) and (min-width:900px){.menu__read .menu__card p,.menu__desc{display:none}.menu__read .menu__card{padding:8px 0}.menu__link{padding:8px 0}} .menu__read .menu__card:hover .menu__go,.menu__read .menu__card[aria-current] h3{color:var(--orange)} .menu__talk{display:grid;gap:var(--s-4);align-content:start} .menu__tool{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start;padding:var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .2s,background .2s} .menu__tool:hover,.menu__tool:focus-visible{border-color:var(--orange);background:var(--surface-2)} .menu__tool .cs-ico{width:38px;height:38px;border-radius:6px} .menu__tool-t{display:block;font-family:var(--font-body);font-weight:500;font-size:1.05rem;color:var(--text-bright);letter-spacing:-.02em} .menu__tool-d{display:block;margin-top:3px;font-size:var(--t-micro);color:var(--text-soft);line-height:1.45} .menu__talk .btn{margin-top:0;width:100%;justify-content:center} .menu__foot{margin:0;font-size:var(--t-micro);color:var(--text-soft);line-height:1.5} /* ---------- responsive audit fixes --------------------------------------- Footer links are short words in a tight list; on a phone "Blog" measured 27x17px, under the 24px minimum a fingertip needs. A little vertical padding gives every footer link a proper hit area without changing the list's rhythm on desktop. */ @media(max-width:600px){ .footer__links a,.footer__util a{display:inline-block;padding:5px 0;min-height:24px} .footer__links{gap:2px} } /* the gantt's scrub label hid with font-size:0, which strips it from assistive tech too; hide it visually and keep it readable */ @media(max-width:700px){ .cs-gantt__scrub-l{font-size:inherit;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } @media(min-width:700px) and (max-width:899px){ .menu__cols.menu__cols--3{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)} .menu__cols.menu__cols--3 .menu__talk{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;gap:var(--s-4)} .menu__cols.menu__cols--3 .menu__talk .menu__label{grid-column:1/-1} .menu__cols.menu__cols--3 .menu__talk .btn{width:auto} .menu__cols.menu__cols--3 .menu__foot{grid-column:1/-1} } /* standalone links that measured under 24px tall on a phone: the header wordmark and the retainer card's link. Inline links in running text are left alone, since a fingertip targets the line, not the word. */ @media(max-width:600px){ .brand{min-height:32px;display:inline-flex;align-items:center} .footer__offer-go{padding:5px 0;min-height:28px;display:inline-flex;align-items:center} } /* ---------- stage bodies on a phone -------------------------------------- "What's included" is a list of eight to twelve chips per stage, eight stages per page. On a phone that is a long scroll of chips between the reader and the next stage, so it folds behind a tap, and the outcome panel drops a size. On wider screens nothing changes: the toggle is a plain label and the chips are always shown. With no JavaScript the chips stay open. */ .stage__toggle{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:default;display:inline-flex;align-items:center;gap:8px;width:100%} .stage__toggle svg{display:none;width:12px;height:12px;flex:none;transition:transform .25s} @media(max-width:700px){ html.js-stage .stage__toggle{cursor:pointer;justify-content:space-between;padding:10px 0;min-height:40px} html.js-stage .stage__toggle svg{display:block} html.js-stage .stage__toggle[aria-expanded="true"] svg{transform:rotate(180deg)} html.js-stage .stage__toggle[aria-expanded="false"]+.stage__items{display:none} .stage__out{margin-top:14px!important;padding:12px 14px!important} .stage__out-label{font-size:var(--t-micro)!important;margin-bottom:4px!important} .stage__out p:not(.stage__out-label){font-size:.92rem!important;line-height:1.4!important} } /* ---------- fibre colour on paper -------------------------------------- The fibre colours are tuned for the dark ink. On the paper surface the yellow and the pale blue all but disappear, so any fibre-coloured mark inside a paper section takes ink instead: ticks, icons, numerals and the card rules. The full-colour fibre cards (thinking-about-franchising) keep their backgrounds; only marks drawn *in* a fibre colour change. */ .section--light{--fib:#101A1D;--fib-lt:#3A4448;--fib-ink:#101A1D} .section--light .five__n,.section--light .stage__n{color:var(--text-dark-soft)} /* icons that sit on an ink tile keep a light glyph: ink on ink would vanish */ .section--light .stage__ic,.section--light .why .stage__ic,.section--light .depends__ic,.section--light .intro-card__ic{color:var(--paper)} .section--light .five a{border-top-color:var(--text-dark)} .section--light .leave__tick{background:rgba(16,26,29,.1);color:var(--text-dark)} .section--light .leave li:hover .leave__tick{background:var(--text-dark);color:var(--bg-light)} .section--light .cs-ico{background:#101A1D;color:var(--paper)} .section--light .cs-stepper__tab .cs-ico,.section--light .cs-check__q .cs-ico{color:var(--paper)} /* the retainer card stands out: a warm surface, an orange rule down the left, and the label as a real eyebrow. Full width of the column on phones rather than stopping short of the gutters. */ .footer__offer{ border:1px solid rgba(240,78,36,.35);border-left:3px solid var(--orange); background:linear-gradient(135deg,rgba(240,78,36,.12),rgba(240,78,36,.04) 60%,transparent); box-shadow:0 0 0 1px rgba(233,227,212,.04) inset } .footer__offer .eyebrow{margin-bottom:var(--s-3)} .footer__offer-t{color:var(--paper)} .footer__offer-d{color:#B3B5B4;margin-top:var(--s-2)} @media(max-width:820px){.footer__offer{max-width:none}} /* ---------- belief cards on paper ------------------------------------------ The dark textured card belongs to dark sections. Inside a paper section it takes the homepage's light texture instead, and on a fibre page the texture is re-hued to that page's fibre with a hue blend, so the grain and the light stay and only the colour changes. Text goes ink, with a light wash on the left where the words sit so the texture's darker corner never gets under them. --fib-page is captured on the page body before the paper surface re-scopes --fib to ink. Selectors carry the page class so they outrank each fibre page's own dark-card rules. */ .fibre-page{--fib-page:var(--fib)} .section--light .belief__card,.fibre-page .section--light .belief__card{ background-color:#B99177; background-size:cover;background-position:center;background-blend-mode:color,normal; box-shadow:0 22px 60px rgba(27,33,37,.18) } .section--light .belief__card::before,.fibre-page .section--light .belief__card::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(100deg,rgba(233,227,212,.82) 0%,rgba(233,227,212,.55) 40%,rgba(233,227,212,.22) 100%) } .section--light .belief__label,.fibre-page .section--light .belief__label{color:#0E1519} .section--light .belief__chip,.fibre-page .section--light .belief__chip{background:#0E1519} .section--light .belief__quote .w,.fibre-page .section--light .belief__quote .w{color:rgba(27,33,37,.26)} .section--light .belief__quote .w.is-lit,.fibre-page .section--light .belief__quote .w.is-lit, .no-js .section--light .belief__quote .w,.section--light .belief__quote.is-done .w{color:#0E1519} /* ---------- outcome cards on a phone ---------------------------------- The review-dimension cards (launch, grow, amplify) stacked one per row on a phone, each one tall for a title and a line. Two columns, tighter padding and a smaller tile bring four cards into one screen. Doubled class outranks the pages' own single-column rule. */ @media(max-width:700px){ ul.outcomes.outcomes,ul.outcomes.outcomes--five{grid-template-columns:repeat(2,1fr);gap:10px} .outcomes.outcomes li{padding:14px 12px;gap:8px} .outcomes.outcomes li .sup__ic{width:34px;height:34px;border-radius:6px} .outcomes.outcomes .outcomes__t{font-size:1.02rem;line-height:1.15} .outcomes.outcomes .outcomes__d{font-size:.8rem;line-height:1.4} .outcomes--five.outcomes--five::before{display:none} } /* ---------- text link: the second action ---------------------------------- The button hierarchy, site-wide. One orange pill per view, always the action we most want taken. Anything beside it is a text link with an arrow: it reads as a route, not a rival. The paper and dark pills are chrome only, for the header, the menu and the footer. */ .btn--text{ background:none;border:0;padding:8px 0;color:var(--orange); font-weight:500;gap:8px;box-shadow:none;min-height:0 } .btn--text .btn__arrow{width:22px;height:22px;background:transparent;color:var(--orange);border:1.5px solid rgba(240,78,36,.5);font-size:.85rem;transition:transform .2s,background .2s,color .2s} .btn--text:hover,.btn--text:focus-visible{background:none;color:var(--orange-hover);text-decoration:underline;text-underline-offset:4px} .btn--text:hover .btn__arrow{transform:translateX(3px);background:var(--orange);color:#fff;border-color:var(--orange)} .consult__actions .btn--text{align-self:center;padding:8px 6px} /* ---------- problem cards, readout style ----------------------------------- The same four tones, rebuilt on the stepper's grammar: a big numeral and a small label in a header row with an icon tile, the title straight under it, the body, and a ruled tick strip along the foot that draws in on arrival. Nothing floats and there is no gap for the title to sink into. */ .p-card{gap:var(--s-3);padding:clamp(18px,1.7vw,24px)} .p-card__head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:0 10px;padding-bottom:10px;border-bottom:1px solid rgba(25,32,34,.18)} .p-card__n{font-family:var(--font-display);font-weight:500;letter-spacing:-.04em;font-size:clamp(2rem,1.6rem + 1.4vw,2.8rem);line-height:.9;color:var(--orange);font-variant-numeric:tabular-nums} .p-card__k{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:rgba(25,32,34,.72);padding-bottom:4px} .p-card__ic{width:36px;height:36px;border-radius:6px;align-self:start;color:var(--orange);background:#0E1519;transition:background .2s,transform .3s} .p-card:hover .p-card__ic{transform:translateY(-2px)} .p-card__title{margin-top:0} .p-card__ticks{display:block;height:8px;margin-top:auto; background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 9px);opacity:.28;transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1)} .p-card--slate .p-card__ticks,.p-card--tan .p-card__ticks{color:#0A1013} .p-card--dark .p-card__ticks{color:var(--text-bright)} .p-card--dark .p-card__head{border-bottom-color:var(--line-strong)} .p-card--dark .p-card__k{color:var(--text-soft)} .p-card--dark .p-card__ic{border:1px solid var(--line-strong)} .p-card--orange .p-card__n{color:#0A1013} .p-card--orange .p-card__ticks{color:#0A1013} .p-card--orange .p-card__ic{color:var(--orange)} .reveal:not(.is-in) .p-card__ticks,.p-card.reveal:not(.is-in) .p-card__ticks{transform:scaleX(0)} @media(prefers-reduced-motion:reduce){.p-card__ticks{transition:none}} .p-card--slate .p-card__title,.p-card--tan .p-card__title{color:#0A1013} /* ---------- framework cards, on the homepage ---------------------------- The five fibre cards were full-colour panels, five loud blocks in a row. They are dark cards now, the same surface and edge as the rest of the site's cards, with the fibre colour carried by the icon tile, a rule across the top, the points and the read-more link. Each links to its fibre page. The card layout, scroll rail and locked palette are as before. */ .fibres .fibre{background:var(--surface);border:1px solid var(--line-strong);border-top:3px solid var(--fib);--fib-ink:var(--text-bright);--fib-body:var(--text-soft)} .fibres .fibre .fibre__icon{background:#0E1519;color:var(--fib);border:1px solid var(--line-strong)} .fibres .fibre .fibre__num{color:var(--text-soft)} .fibres .fibre .fibre__num span{color:var(--fib);opacity:1} .fibres .fibre .fibre__title{color:var(--text-bright)} .fibres .fibre .fibre__points li{color:var(--text);font-weight:500} .fibres .fibre .fibre__points li::marker{color:var(--fib)} .fibres .fibre .fibre__lead{color:var(--text-bright)} .fibres .fibre .fibre__body{color:var(--text-soft)} .fibres .fibre .fibre__go{margin-top:var(--s-4);align-self:flex-start;color:var(--fib)} .fibres .fibre .fibre__go .btn__arrow{color:var(--fib);border-color:color-mix(in srgb,var(--fib) 55%,transparent)} .fibres .fibre .fibre__go:hover{color:var(--fib)} .fibres .fibre .fibre__go:hover .btn__arrow{background:var(--fib);border-color:var(--fib);color:#101A1D} .fibres .fibre:hover{border-color:var(--fib)} /* hero leads a step under the body lead, so a two-line strapline does not compete with the title */ .hero .lead{font-size:clamp(.92rem,.88rem + .22vw,1.02rem)} /* ---------- diagrams on phones -------------------------------------------- A 900-unit drawing scaled to a phone renders its labels at five pixels, so each flip carries a second, narrow drawing built for a 360-unit width; the wide one shows from 600px up, the narrow below. The Gantt's bars are too short for their names on a phone, so a legend lists them under the chart. The weave's two labels scale up in viewBox units. */ .cs-flip__svg--narrow{display:none} @media(max-width:599px){ .cs-flip__svg--wide{display:none} .cs-flip__svg--narrow{display:block;width:100%;height:auto} .cs-flip__svg--narrow text{display:block;font-size:12.5px;font-weight:500} .cs-flip__svg--narrow .f-t{font-size:11px} .cs-flip__svg--narrow .a{stroke-width:1.4} } .cs-gantt__legend{display:none} @media(max-width:700px){ .cs-gantt__legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;list-style:none;margin:var(--s-4) 0 0;padding:0;font-size:var(--t-micro);color:var(--text)} .cs-gantt__legend li{display:flex;align-items:flex-start;gap:7px;line-height:1.3} .cs-gantt__legend i{margin-top:3px} .cs-gantt__legend small{display:block;font-size:.68rem;color:var(--text-soft)} .cs-gantt__legend i{width:10px;height:10px;border-radius:3px;flex:none} .cs-gantt__legend li[data-lane="brand"] i{background:var(--orange)} .cs-gantt__legend li[data-lane="systems"] i{background:var(--fibre-2)} .cs-gantt__legend li[data-lane="franchise"] i{background:#B8AE96} .cs-weave__lbl{font-size:30px} .cs-weave__lbl--r{font-size:46px} } /* stragglers the scale mapping could not reach (grouped selectors) */ .frag-result__label{font-size:var(--t-lead)} .chain__t{font-size:var(--t-emph)} .stage__out p:not(.stage__out-label),.stage__out-text{font-size:var(--t-emph)} .band__title{font-size:var(--t-h2-sm)} .founders__title,.proof__title{font-size:var(--t-h2-sm)} .audience__title,.beyond__title,.problems__lede{font-size:var(--t-h2)} @media(max-width:700px){.stage__out p:not(.stage__out-label){font-size:.92rem!important}} /* ---------- before/after table on a phone --------------------------------- Same treatment as the why page's comparison: each row a card, the two cells side by side, the "after" cell tinted and edged in orange. */ @media(max-width:760px){ .cs-table.cs-table{margin-top:var(--s-6)} .cs-table.cs-table tbody{display:grid;gap:12px} .cs-table.cs-table tr{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;padding:14px;border:1px solid rgba(16,26,29,.14);border-radius:8px;background:rgba(233,227,212,.55)} .cs-table.cs-table td{display:block;padding:10px 12px;border:0;border-radius:6px;background:rgba(27,33,37,.05);font-size:var(--t-small);line-height:1.4;color:var(--text-dark-soft)} .cs-table.cs-table td::before{content:attr(data-label);display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:5px;color:var(--text-dark-soft)} .cs-table.cs-table td.cs-after{background:rgba(240,78,36,.10);border:1px solid rgba(240,78,36,.30);color:var(--text-dark);font-weight:500;padding-top:9px} .cs-table.cs-table td.cs-after::before{color:var(--orange)} } /* Familjen Grotesk is for h1 and h2 only; every card title, label and sentence is Google Sans */ h3,h4{font-family:var(--font-body);font-weight:500;letter-spacing:-.012em;line-height:1.25} .p-card__ticks{display:none} .p-card{gap:var(--s-2);padding:clamp(16px,1.5vw,20px)} .p-card__head{padding-bottom:8px} .p-card--slate .p-card__n,.p-card--tan .p-card__n{color:#0A1013} .p-card--slate .p-card__ic,.p-card--tan .p-card__ic{color:var(--paper)} /* the framework grid on thinking-about-franchising takes the homepage's dark fibre-card treatment: fibre colour on the rule, tile and link, not the whole block */ .fib-grid .fib{--fib-ink:var(--text-bright);--fib-body:var(--text-soft);background:var(--surface);border:1px solid var(--line-strong);border-top:3px solid var(--fib);display:flex;flex-direction:column;gap:var(--s-3)} .fib-grid .fib:hover{border-color:var(--fib)} .fib-grid .fib__meta{display:flex;align-items:center;gap:var(--s-3)} .fib-grid .fib .cs-ico{color:var(--fib);border:1px solid var(--line-strong)} .fib-grid .fib__n{color:var(--text-soft);opacity:1} .fib-grid .fib__t{color:var(--text-bright)} .fib-grid .fib__d{color:var(--text-soft)} .fib-grid .fib__go{margin-top:auto;color:var(--fib);align-self:flex-start} .fib-grid .fib__go .btn__arrow{color:var(--fib);border-color:color-mix(in srgb,var(--fib) 55%,transparent)} .fib-grid .fib:hover .fib__go .btn__arrow{background:var(--fib);border-color:var(--fib);color:#101A1D} .footer__legal{white-space:nowrap} @media(max-width:700px){.footer__legal{white-space:normal}.footer__mark[data-anim]{opacity:1!important;transform:none!important;transition:none!important}.footer__mark[data-anim] .dot{opacity:1!important;transform:none!important;transition:none!important}} /* the two header levels, stated once more at the end so no earlier split can take them */ h1,.hero__title{font-family:var(--font-display)} .section--light .fib-grid .fib__go,.section--light .fib-grid .fib__go .btn__arrow{color:var(--text-dark);border-color:rgba(16,26,29,.45)} .section--light .fib-grid .fib:hover .fib__go .btn__arrow{background:var(--text-dark);border-color:var(--text-dark);color:var(--bg-light)} .section--light .fib-grid .fib .cs-ico{color:var(--paper)} /* the homepage problems lede is a seven-line sentence, not a title: one step under the section h2, with a line height that suits a paragraph */ .problems__lede{font-size:var(--t-h2-sm);line-height:1.15} /* the fibre chain on the hub fills its row on desktop: the arrows stretch */ @media(min-width:900px){ .cs-pipe--spread .cs-pipe__lane{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:0} .cs-pipe--spread .cs-pipe__lbl{grid-column:1/-1;margin-bottom:var(--s-3)} .cs-pipe--spread .cs-pipe__arrow{width:auto;min-width:18px;margin:0 6px} } /* stage outcome copy: a step under emphasis on desktop; the phone size is set separately */ .stage__out p:not(.stage__out-label),.stage__out-text{font-size:var(--t-lead)} /* the CTA card takes the retainer card's warmth: an orange wash from the top-left over the dark surface, and an orange-tinted edge */ .consult__card{ background:linear-gradient(135deg,rgba(240,78,36,.14),rgba(240,78,36,.05) 45%,#0A1114 80%); border-color:rgba(240,78,36,.32) } /* ---------- phones: buttons, problem cards, stepper panel ------------------ Buttons take the header pill's size on phones: 40px tall, small type, a 26px arrow. Problem cards size to their content instead of a fixed minimum. The stepper panel's copy drops to lead size with a tighter line. */ @media(max-width:600px){ .btn:not(.btn--text):not(.header-cta){height:40px;padding-inline:var(--s-4);font-size:.88rem;gap:10px} .btn:not(.btn--text):not(.header-cta) .btn__arrow{width:26px;height:26px;margin-left:-8px;font-size:.85rem} .btn--text{padding:6px 0;font-size:.92rem} .p-card.p-card{min-height:0} .cs-stepper__body{font-size:var(--t-lead);line-height:1.45} .cs-stepper__num{font-size:2.4rem} } /* ---------- homepage snags, third batch ----------------------------------- CTA card: the orange wash drifts slowly across the card. Fit cards: the title is given two lines of room so every body starts on the same line. Stepper panel: desktop copy comes down to match the phone treatment. Problem cards: no fixed minimum height, and a smaller numeral. */ @media(min-width:900px){.fit-card__title{min-height:calc(2 * 1.18em);display:flex;align-items:flex-end}} .fit-card__body{margin-top:0} .cs-stepper__body{font-size:var(--t-emph);line-height:1.45} .p-card.p-card{min-height:0} .p-card__n{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)} /* ---------- hero shader --------------------------------------------------- The canvas sits over the image texture and under the readability scrim, so the scrim still fades the foot of the hero into the page. Until the shader has drawn a frame the canvas is invisible and the texture shows. */ .surface-texture > .hero__shader{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease;pointer-events:none} .surface-texture > .hero__shader.is-live{opacity:1} /* problem cards, fourth pass: smaller title with room above it, a smaller numeral, body copy at body size with the site's body line height */ .p-card__title{font-size:1.02rem;margin-top:6px;line-height:1.25} .p-card__n{font-size:1.5rem} .p-card__head{align-items:center} .p-card__body{font-size:var(--t-small);line-height:1.5} /* a still ink shade under the copy, so the shader's bloom can wander without ever taking the words with it */ .surface-texture > .hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 64% 58% at 50% 48%,rgba(11,18,20,.58),rgba(11,18,20,.24) 55%,transparent 100%)} /* Familjen Grotesk, tighter: -.05em on every header level */ h1,.hero__title{letter-spacing:-.05em} .p-card__head{grid-template-columns:auto auto} .p-card__head{justify-content:space-between} /* ---------- typed word reveals -------------------------------------------- Words arrive with a small rise and a settle; the colour transition lives with each page's own .w rules. */ [data-words] .w{display:inline-block;transform:translateX(-.35em);transition:color .3s linear,transform .32s cubic-bezier(.2,.7,.3,1)} [data-words] .w.is-lit,[data-words].is-all-lit .w{transform:none} @media(prefers-reduced-motion:reduce){[data-words] .w{transform:none;transition:none}} /* ---------- coded textures ------------------------------------------------ Every textured surface is a shader canvas now: heroes, belief cards, the artwork panel and the bl-card art. The image textures are gone; the fallback under each canvas is a plain CSS gradient in the same colours, so a browser without WebGL still gets a warm surface and never a photo download. !important because the old image rules live in several page-local stylesheets. */ .surface-texture::before{background-image:radial-gradient(120% 90% at 8% 70%,rgba(240,78,36,.42),transparent 55%),radial-gradient(90% 70% at 90% 10%,rgba(143,44,19,.5),transparent 60%),linear-gradient(#101A1D,#0B1214)!important} .belief__card,.fibre-page .belief__card{background-image:radial-gradient(110% 90% at 85% 20%,rgba(240,78,36,.55),transparent 60%),linear-gradient(135deg,#0B1214,#101A1D)!important;background-color:#101A1D!important;background-blend-mode:normal!important} .section--light .belief__card,.fibre-page .section--light .belief__card{background-image:linear-gradient(120deg,#D8552E,#F04E24 30%,#F5B894 55%,#E9E3D4 80%,#EFE9DB)!important;background-color:#F04E24!important} .section--light .belief__card::before,.fibre-page .section--light .belief__card::before{display:none} .fibre-page .belief__card::before{display:none} .problems__art,.bl-card__art{background-image:linear-gradient(135deg,#D8552E,#F04E24 40%,#F5B894 65%,#E9E3D4)!important;background-color:#F04E24!important} .founders__cue{background-image:radial-gradient(circle at 30% 30%,#F04E24,#7A2A14)!important} .belief__shader,.art__shader{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease;pointer-events:none} .belief__shader.is-live,.art__shader.is-live{opacity:1} .belief__card{position:relative} .belief__card > :not(.belief__shader){position:relative;z-index:1} .problems__art{position:relative} .problems__art > :not(.art__shader),.bl-card__art > :not(.art__shader){position:relative;z-index:1} .bl-card__art{position:relative} #belief .belief__card{background-image:linear-gradient(120deg,#D8552E,#F04E24 30%,#F5B894 55%,#E9E3D4 80%,#EFE9DB)!important;background-color:#F04E24!important} .hero__sub p{max-width:60ch} /* ---------- shader canvases: pinned, whatever the page says ---------------- Several pages style every child of a card or hero (`> *`) as relative, or move children for the reveal stagger. The canvases and the shade are backgrounds and must never join the flow or the animation. */ .hero__shader,.belief__shader,.art__shader{position:absolute!important;inset:0!important;z-index:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;transform:none!important;transition:opacity 1.2s ease!important;pointer-events:none!important} .hero__shade{position:absolute!important;inset:0!important;z-index:1!important;margin:0!important;transform:none!important;opacity:1!important;transition:none!important;pointer-events:none!important} /* ---------- header: wide on arrival, drawn in on scroll -------------------- The bar's wrapper opens to the wide measure at the top of the page and eases back to the content measure once the page has moved 40px. */ .site-header .wrap{max-width:1480px;transition:max-width .55s cubic-bezier(.22,.61,.36,1)} /* plain lengths: a min() here stalls the transition in Chrome */ html.scrolled .site-header .wrap{max-width:1200px} @media(prefers-reduced-motion:reduce){.site-header .wrap{transition:none}} /* ---------- footer: full width with side padding ---------------------------- */ .site-footer > .wrap{max-width:none;padding-inline:clamp(24px,4vw,72px)} .footer__heading{font-family:var(--font-body);font-weight:600;letter-spacing:-.012em} .footer__logo{margin-bottom:var(--s-2)} .footer__sub{margin-top:0} /* h2 leading, one value everywhere: the page-level titles had 1.1 to 1.2 */ h2,.method__title,.beyond__title,.founders__title,.proof__title,.audience__title,.problems__lede,.consult__title,.band__title{line-height:1.02} .footer__heading{font-size:1.05rem;font-weight:500} /* fibre card points: a dot in the fibre colour, not a hyphen */ .fibre__points li{display:flex;align-items:flex-start;gap:10px} .fibre__points li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--fib);margin-top:.5em} .fibres .fibre .fibre__points li::before{background:var(--fib);color:transparent} /* the founders cue is a small textured disc, on the same light recipe as the belief card */ .founders__cue{position:relative;overflow:hidden;isolation:isolate} .founders__cue > :not(.art__shader){position:relative;z-index:1} /* ========================================================================== 12 THE DEEP INK AND THE TIGHT CORNER Established on the homepage, now the whole site. Page ink #05080A, with every surface and line stepped down with it; one corner scale, 8 / 6 / 4; smaller eyebrows; the ticker and header on the same ink as the page. */ :root{--ink:#05080A;--bg:#05080A;--surface:rgba(233,227,212,.038);--surface-2:rgba(233,227,212,.062);--line:rgba(233,227,212,.11);--line-strong:rgba(233,227,212,.19)} :root{--r-sm:4px;--r-md:6px;--r-lg:8px;--r-pill:6px} body{background:#05080A} .site-footer{background:transparent} .ticker,.ticker__view,.ticker__btn{background:#05080A} .site-header__bar{background:rgba(5,8,10,.8)} .menu{background:rgba(4,7,9,.975)} .method,.audience,.section--lift{background:#0A1013} .cs-ico,.stage__ic,.p-card__ic,.fibres .fibre .fibre__icon,.footer__offer .cs-ico,.intro-card__ic,.nextfib__ic,.sup__ic,.depends__ic{background:#0E1519} .consult__card{background:linear-gradient(135deg,rgba(240,78,36,.14),rgba(240,78,36,.05) 45%,#0A1114 80%)} .fit-card{background:#0A1114} .p-card--dark{background:#161D21} .cs-stepper__panels,.cs-facts__tile,.meta-tile,.cs-bars{background:var(--surface)} .eyebrow{border-radius:4px;height:30px;padding-inline:12px;font-size:.8rem} .btn:not(.btn--text){border-radius:6px} .btn__arrow{border-radius:50%} .cs-ico,.p-card__ic,.stage__ic,.fibre__icon,.cs-stepper__tab .cs-ico,.fit-card__badge,.belief__chip,.p-card__chip,.intro-card__ic,.nextfib__ic,.sup__ic,.depends__ic{border-radius:4px} .meta-tile,.fit-card,.p-card,.fibre,.bl-card,.founder,.cs-facts__tile,.cs-stepper__panels,.problems__art,.belief__card,.consult__card,.footer__offer,.bl-card__art,.founders__photo,.cs-check__q,.cs-check__tally,.menu__tool,.menu__card,.stage,.intro-card,.nextfib,.leave li,.outcomes li,.why li,.five a,.fb,.fib,.tcard,.conf,.depends,.post-card,.post-figure,.post-toc,.post-author,.cs-panel,.cs-pillar,.cs-ledger,.cs-trio > *,.cs-flip,.cs-gantt,.cs-map,.cs-weave,.cs-pipe__node,.cs-table,.cmp,.cmp tbody tr,.cs-facts,.legal,.sm__group{border-radius:8px} .site-header__bar,.ticker__toggle,.nav-toggle,.menu{border-radius:8px} .cs-stepper__tab,.cs-check__ans button,.cs-weave__chip,.stage__items li,.post-hero__cat,.cs-gantt__bar,.cs-map__cell,.menu__chip,.menu__row,.fibre-key li,.cmp tbody td,.cs-table td,.blog-filter button,.post-card__cat{border-radius:6px} .problems__lede{line-height:1.08;max-width:18ch} /* ========================================================================== 13 SEAMLESS, AND QUIETER SURFACES No dark section paints its own background any more; the page ink runs through. The lifted band that marked the method and audience sections goes, as does any page-local section fill. The surfaces that sit on the ink step down so cards, chips and tiles contrast a little less. */ .section:not(.section--light):not(.proof):not(.founders):not(.beyond),.method,.audience,.section--lift,#problems,#framework,#who-we-work-with,#fragmentation,#the-truth{background:transparent} .hero,.hero.surface-texture{background-color:#05080A} :root{--surface:rgba(233,227,212,.026);--surface-2:rgba(233,227,212,.045);--line:rgba(233,227,212,.085);--line-strong:rgba(233,227,212,.15)} .cs-ico,.stage__ic,.p-card__ic,.fibres .fibre .fibre__icon,.footer__offer .cs-ico,.intro-card__ic,.nextfib__ic,.sup__ic,.depends__ic{background:#0B1114} .consult__card{background:linear-gradient(135deg,rgba(240,78,36,.12),rgba(240,78,36,.04) 45%,#080E11 80%)} .fit-card{background:#080E11} .p-card--dark{background:#10161A} .stage__items li,.cs-check__ans button,.menu__chip,.cmp tbody td,.cs-table td{background:var(--surface)} /* the CTA card takes the dark shader like the belief cards; its CSS gradient stays underneath as the fallback, and the grain removes the banding a smooth gradient shows across a range this dark */ .consult__card{position:relative;overflow:hidden;isolation:isolate} .consult__card > :not(.art__shader){position:relative;z-index:1} /* ========================================================================== 14 NO BANDING On an ink this deep, a soft shadow or a fade to transparent has only a few grey levels to pass through, and each level shows as a line or a ring. Two answers: shadows on the dark surfaces go, replaced by the hairline that already edges every card; and every remaining fade gets a grain layer over it, which dithers the steps away. The grain is a 96px tile in a data URL, a couple of KB, tiled everywhere it is needed. */ :root{--grain:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAAV7ElEQVR42m1cuZLkSg4DO2TQoEGD//+FZZQhQ4YisAaPZM3b2dgXM93VOjJ5gACywUAQAAMgEAAAEDSACjDgVObXAK/vOpyA5XdQP48g4PT6yfo6Qa3PGAIBr+8AAc/rUpl3DmhdH3kVWD4ZrZ7A6lmNIIg/fPAKANw0RH0IAJQQAHhw4RLNR8c3LyFfXqK8YAgASpW7fu4rX4RcyMUI+UDxAHRClB8+dT+H4sZLwKDy4IN8OAMQ+FIJPAhc+ADiogACzhuBhyG3uKjkM1LlggK4oYR8AQBGyF0rp3jE+RUQYgBvQb0eiPw7DYoHtwCg45UL314KeeB85QLwpYnyI3nPi18JfiSfQfkVUAFRXPwAEgBfAMALxS0PQIjzxS2gy4MHOKFjBIJOhUGZ26bQeQmfsDDG2VQ6HEZjb7czdwUMKHOzg8EMVSPoGYxEBcz8DwDgBI3OfB7A4AhYBbDDmEGtUEAQAB7cMN4AIM4HgOKLXFvFwxDgBfDiBfDUyisNHwFybxxfmFx88AjYq1dXgePFLYDzxYtLLnwrD3onHV9xfJmfNN5ihChevnJT8cjJtgc3NO+DTE8YrGIs1ybf1WFQWEYwjc6gAzQ4jEpHRWalL06C9ooy4MiEy13KvbFVLJwGz68DVJxP5ScUQP2fgCOqHCgAB4NAcNKXwalEcBqCeelg1YNKT2eHleYLMxfBYezX6UUJBgJR9UmZKWyc2kSHroqmuWBw5vPZvHJUcOfTBgP5WCfKGNCKs3wZBWg0KCMvQieY5RXUKW/1arRc78oVpbNrS980F8OptSOOXoIsqNrFup4C9RoOhyKYJdug1CzQ9WD5qB0uAHXSav5el3Miw4egUxn1fesCXGHpXC9HQzDqc1ZfcYJOr2Dr0pGLGvUavYS5vL0I+WwGGBTe36qwycoTU4kqEvNmWG2kmpsjaLTar3wonVvUnnTdqvrjVV/ygbwWzyreOxdiQjbvc+6qdChx8YbJN4uSXLwIXFA+Ar7i/OLO/RHlA+CVG4aQJ6NZgIdfQEzAW14YFF8Bv3A8tX4fMUBAly8hhi9VOmFfgRg/AB1XJyshKg/frH0Myar3hTEEhNx48MiFp+py5z+VmSaVTtSs7VnjTxeoUPEKA1QVyghGb/Vcobfb6chQ0KlIoFb29Svh7P7sHCr2cWocLAPoT24ELlFALjxi/NAkKyzkglIBuQHeyHbucvNGIPiVjs+n1lAlQ+CVtwLiEWdQJQhe8uUtSuCRS97q9tV/KgufysRXAOUlmvfkQ+Q+VzgZXoI3rFZt0jWgsO6tFd0Z+T4dWVeVrzKM+n4laeTfumBW3clKk9Ut6/7pzQaFZ80B4DQGu0sbzr82AgAUlk1JcbYmX6iBgVXJREECdPXOF1wtp+tUvmDX9KxPTs3QhPM3gBJW2MK6gdOJBtNm0DKqrVawsxJeK6ej1rP6I7CjDjHr83tZXZ/xXc+ySsAIalX6XhqlIlETEqzzQOXMA0cwGg8V1Ci8wKBWi5z0qtWkshtF5M2RNT5WD/a6xEA7YMpfvradz+xgq+Zj01s8l2uaow/c8CqiZ7KIfrZEARVORlwI3ABuQMAH4CUZUFnUPngKviWMfvGl4SPnMSCA4+ItD6rg4iHwiBEI+fwk6iU5AdwwufAB6HLhxiWGC8pXHhi+CEDAbwNtvFl4JfiB44HiwaeenattZbGriatHiI5Po68ERYcUM+k7yRTnjzIaXDQ4KNjSkMNnFsxWlfto1cRi2lvf1SowvQCo5liojPqW7phHDnra8Aq2Bsiodp94JX+yAVc01KjK5N25e1SqcNw55D2NUQdvFZSoYDovGgu/diOvVcnRI2uJrjbvs0M1F9f0agPIvTFqf3Ww1BmKUFUk/7bKRH1FE6gUmOgaBiiVhiicm8NXgkT/k+ArD4APPvIi8MEnM0CMDuDBlyYXZhbDl0bly2z/Lj0tfwBcEoTcdIQ8kvX/6RouwIObJgD4sCJdcqhRXDC5emSiAnwFCFFqzs/1DHftxM3A8wfIy6fa/oOPhIRAMkm+CF5wyddTAJAPNFNQFMCFl08GlwSAG58c9CoDPlCBPLT8GhUhmv+S3i0j4PLw5ouXb+UJRAV8cNPwlS+M4I0PIM9M6zeupjemSw6u1xo9anSZ+QrQimmtz/dPBpsmMTq6FFd3/gHWMdjJuySc/pJdOumZype5O/tOWoMYJItaTrG85aElnyCBGw8Dj7xUeXnlrIqbQOCRu8qh4kF++kJRK8VTAC4PFF9CHF84XgDKjxiUr3xhAC5e8vKSD12+cKAYielSotC8tjxQGF8AXwGCH0TNO43Z4ZiGkRNYYRvLT1V18M0g1dr01KAEa47GQY1dQbT6t9GnjWJdTX8alZ+xs/bRoQgoptEBunppNfSqLYODcHgxnQqfJbbGkpx2k5ej9w1ojALf/XpZYK1qWrBLquEXmhcUTOCRvYGnYua1nA7L2q6FbCJZiIq74MYpZzBcf4iVB00QxuF8ik+K6hDTDTgMxoyoAyuqWJ4MSVRUOzQAJHkR/cML8KERuAjmlONwPPjIAxNIoJnKSDZohjrA8IUTeBfg/hRr1IvzxQc3QcMtmsmdLF1NWyYvDB8ZViLZPQFeQl65AfnWLJBTYV71woMna0YgydqEu9ERWAgxOAxA5b4OoO4pTGnUtSvRjMNUDSs0X1xbVTkd/qGZnyjSpWpQ9+hTqQ60pw2xVZg06uE7kotrRnEzhcWdWlvZI18cZmjwkU1J7vIZRTf6DDGbVPQmCzesrjQ2Rs4m9fDJnWR2Fetie6Qp1iAR+ICz2gFFV534mRm0Lh2Lfhk40InHMxcc6qv/JGTRwT/1ib4Ogoa5b82F3nXmcPa9lYunPzQfarxLCmwK7SGAY6OgmeCiS2n9N4mBRbzUDGYF52yWqspBD5+FjbX3EbgEfOD4FrIPfKA0eXK8lm9NPk+91oUXn0b2uHAnqUtA8chTUfv0oopR5eVHgJu3dB+4BHzlyg4iD2658yflLZJZ5c2EJcSg+ABUXPiK8kqiHZAbMXLGiAvOntCUzYeePMiZtpi5BgJVSjM8fMCDNRXCPXM7gt6NDwqFdnU/PB3tzHs9lnLPyN4F4IzsQ+wOJ6ST8zP8Ffff0ax7RujU5OHQnMPEbYavmbYtLrGHKoPTmQXFhtxNocuHmSiBimjNqfiCeojFM8xQ0a8QU/yGmeYZ3u1IFxyQAM3vFIZfREEVRq+J72RRKWb0BoaHLm7QU7R0ZfQ8BLKUatPZLNQylHpDBoNVMGHBhMMVKbvlRTERmXZ6VILetVrG3DedhTE0K9TEbzReZo+dWHPwmpsWWTK1aXRDWjU5nV1SHlDoaF1Ah7iM1hWLcu/dy7q/KlfxUoc1SuLRFn+BAXJa+zISwuYdo7ChTxJnBnTXtkN5UOGbqCpypUmvqH6xh32cSQE9dSjj0DWM5j6zuDJVu6PSxYQnWxOoUKqVc/isqWKx8YiBWpMHq/34KCdNC3SaR/N1Q5sNbMFQWLSZsntS96qNB5JH/WRmzkCzqM0JRvHIfnDH6q3xM7T7ki9sdMVMWi1FzYeEOaqnMjoLmj3FBBesYIcPAgVqZ3H0m5HDehWsBDQMIrFZ5yG3qxw6dciNCqN6jFm/rtqJWajQpQQtwSnzCU3gH7bCUtnPPFgZOlJuQhHdkj+y+lvHfWHHsz6zNrVDupQDXwOR8VCNa1iaTJuJd74fVHqi0tX8mu1W7G41UI7bqdBU9+BOK5gcsE30/oCvw9DZDCp22GQOJV6ZU0xPxTwOnF4IFNOZkqOKTacnz42oPY9TNrXgldFq6FvsAD07ZONDjP2jdEo/DBqOiJfIP+i/evxiwWNKhB8OfLCtDmnm3IA8poYtTlRTOC1x32bVrcRqnXGkI9frhlFitZZsZ4vxxxGfCtW0TSEmtM5c4PNTvpwzRkX6XA5+OnjrrGetrrNUsmEyZ1QZ/Uqx1cwFu+tlB2PBad3Vp9rrHnNyLmB7NaxIxFOrKiwruO3UROQcV5toR8Cpnmy0TDXOYPHDeNblcaDECSFndBnlWcdmM1BgpQdJWy9w5rdSnoc+awG2jSUZavaHDx6CNyCQp3jKh4nKv0hh9JWUVL38OfXI8qGXPqCS/qIXgcBXHqo8AvnKk0El9YCSBg6VB4FbjMEbLiD41idypEo64cWDr4DAhaBC8SYDi69oPndOuQMWioVp04dugZo6hLsm8bV6Mhpgz+rk3NQOCV8d3RedVdaPoWsGqOBHGM+KiBgBvkvtgWGje+0oa960StYPf9PKbopJDe2yQ9jpJZ1+PRSlMwANB/R0kMoH3y2reLy8pk8nWG6VM8THuBw691f88pg5jptlhIhVVEtPwYCRWteeDBynth+HRfwfq0gPVLF0NasoiMm4Lo7sUca7Koyc1FrLVovX/gwo0ObakmAc616pQM1C1IC6+TvrgTGdMmsUtRUuPtJWGz96iZvVrPLpq7bYyoEug4cgbEOY1sR2hr7UGe1H1YnlifGhz33u5TP69A5MQWVPbtGEVz2FC0CXl2heACqfZeYLfAAEPgx5+ELly5QmvrItf55eRL64cOHCLamzQECTm4FXnkPAw6DyYcinkvorxUHxlitthcWTzD3m3yY3HN+i8JHt3npQLEhl1GXQ6220ZfRrhTHHUR3dEIdGXI2vxvsaXdu8sVxak8hekX4mDi0jgy7f6ERG9bMqlzPgJVxaWzkIZvC/ThpOaGD8QmWYLVm1kJQefWCGnvbqTfkYfDoQZ8xR6MmvXBwGA/6IZHkloPIMO/zwI1dBqydbjQQ+kuGC5LIBXIIKg9SwHhoegCZpcL3pvPDgZobUw8ALA/gpEuuG8sEjufOe6pooICrJw14SgLwEXqTAd+HFg5cX1/gew8jr+Dlb++1aoDOfRXFF5QcdcLw8bgMBdHwUqQRZDYso+cO3wIImYCIR8TIqeIbgqoRFiNmWf4a46qp7JLWt5x5zRyFXLOGvSnNMF8iGpVXJDTazt7YDexjCtK8pfmfF021qsuOgIzvTPhW/emL02zaqr5H6kClaBVF7dzLSi+NxHsePThr38kSNTd401bYY/lhJSrnMWYVb618ec5tJaJrFj/0o0+5wNFYtT89IsivDQkkZCLEocfTjNOaCHclpKPdiXKs/2LYuYFXDTXoHDrfWhasfy/Gj97a2driK7JTFas583CrLSHqF6Y9xponDgYwHrqWUeHamw9WaEFtoJlmFjtxhcHyxykd9KfMF/R/5+pBcNhYOK2HbOVTxklWzG8ykPPYrzKxhTXCOY8wX2NSFN5a0YeUgjx/DF46PpDXHTXA1E0Gtlz0U+jke0RNtHL6is2AIF+PyO24278cY1w7vltMW6gCP9DyC55q7gttdYhX1NrupB+8P16M4pBUOA9JW/En3Y3Zo/5afBlfTcFWhRrVF2jbjUyJDLJZfM2lWOz80zHAL2YbGhPyvtlz6bsPo8kS2lD701pTK87M9Ctm2txXrdPjp0siPJO3dHU7jwHIv4txGF2vTBP2hVfr11skczBGL4jpi5usY5axNm73fA1GwpzFwUVnniM8QKrPOQ78PadttpjV+X07Gw61FlwksQoDlCm1Tw4/vsQ0MvpQH9IhZsLProXdVPdq7cwiUqedlPS7e4BxOiAo1XZJDe+LWOLLamRdfugz7NenucMTPLp8FPeeaYtnQY92yORtqixDcwtx429nGu15NxaJaZ7qrabeKZfz45GI8SNbGtonyXt1DS6Jss3GuPx5XFRhvyTNG5dOhihFplwRw57kifiXw4gvlA5MbgZcXPjmO5MkjvDlu8AEEDLlp+LRXS4wpjxrzNM0jVoLsjQDwARiSTgvDVSeYXjE+8lKLXjmj7GfO0IxiddpWYFrJqtMrhbKKYCr5T3KdCUHrGIk2FNiZwYEUKZKMnLcyqorIIYH7DnPqZjw7m5EoitCLh9Gheoetq1FfG9zlGZvmkari13mao7qMicNwjva0KzTWicGDyXQ5lXzE3dgigP+Ase6WfaYgGIs4yZExmiGA/UAvn/jUyoAc7p2HYbVDlw25GHO80Q8iWm30+Ottt9byUA8nN6a+0UP6bJJW9QiMMYbeBEytv7am0GwmfruFnrnjGETWyaQGLnqM9uMH3qqOMbYHFT9yTxtfe21i+cxXj51Q82pI4yj/OT2Wr+zNMLNxlo4tpO9YBORuf+Vq6bNTHQeLBK6noFUgBMf5VvpXHb2qeI0fa1/rWrG9u8cgOGKJTkM8DpSYtqglrJRUtSTdkbRHxAqM+omfFjnWgaKLDtG06G2ufopDedg8th3Kqq4QQyHGHMGKnpUXKNDU7rkljV9S0w8vOtPHVEmccontH/R/nNJzVG2yoA3dWhNzWzRa+a9Rtc+8cJujfB2B7HYV5UmJ9kvAVzbUZIi2K5wDM4vhjLIEBJVLCh37x5x5/PV6LkSZFNas5S/xO952LNNgF2Q7Qt+y4QxSY8zB6HUces/NHWONXmJNZZqtbNmJS1kp2dq2+IyjdelIs4ZVWOcxreqWnqFp5L0D7KL3AlpiunILsEcCGoI8Rew4noUxhC0v8xojW+Dz07FHrnP0scU0qAWPNGW11+2OsTb0HxGj0ttrKul7zMlW+igvR51fVWWftrdfarEt4Ofse0fuziF2i1L2yY2+eTSz0UTjkczPfFxaUcwT6QL7WcZbD6x31unAFXe0ZYjRw9Yx1jGdCYIhYn4FwO7y4wiijj832vaUTop0JVZXODvibaway2XHTXPO64Bnndg4E+0YnGytKXjIk53UPmYCPY1/sfw655DX/LWrUS2VpdowppPAMcf5BGnsqn5Op56TleAe7n0ewmb6iuWePsKRzvATy1a+5rQRAr11+JFM2rMeVcuaKc+fPAubhELRqEuKO9WmYNtRA8pDy8W2jfXI6iC19fnrRjP8rVH642PUhTT7GF23rViOjEMvz4GidnZpn7Njc87+s126qnhUBC+9oNfi1KElhBwXb9QORU8RQ53gHzf8qvbjVdcp2DPb1czmPxdYv5NDx/73wxMt52EM3ehrfIkhyrwr++xdUzZpJOlf1uDHnnko42PnzFL7o17ip1AXsef9rv/99SSFPRrTK8YjVxNxQ2MfY6wu1lRbATj51CzpWRronN6eQ10cCi3l9zl5EOPKAPUcMaujD6cbj4hdnpS2REJPVRkxaaDEsDiN2+fkHw4Ea19eu019TuvpKR6FhpvV1nGtxkwOBj2Aas4TJc9Q1EkdnV30ljWGxGKZF/TTAwC5zuIPuNbZB5sTUMYfbnofEB33gK9037rBqtOLhawm1o+qyzh5HG1nFKwzydXqrJk9bAdQDDA/1NgczqXNOBPYQ/02Rc1ZzvwVJUl4/RX6fpi/uAUwASEfvPKRyGNnBC8gKRF8U4iTjn2Xiy++vOpQe+Cm8s2UzqNWAjo+ULnqcNUjV4kbCsAkDUxNrhgfzikoMUl6wOXGC8dL45fAIyoXvv8De/798WRvyhgAAAAASUVORK5CYII=");--shadow:none;--shadow-lg:none} .problems__art,.bl-card,.founder,.belief__card,.site-header__bar,.fit-card,.p-card,.fibre,.consult__card,.post-card,.meta-tile,.cs-facts__tile,.founders__cue,.tcard,.nextfib,.stage,.cmp{box-shadow:none!important} .btn--primary:hover,.btn--paper:hover{box-shadow:none} /* fades that stay: grain over them */ #book::before,.tcard--to,.nextfib,.outcomes::before,.outcomes--five::before,.post-card__art::before,.sup::before,.mc,.footer__offer,.cs-gantt__track::before{background-blend-mode:normal} .footer__offer{background-image:var(--grain),linear-gradient(135deg,rgba(240,78,36,.12),rgba(240,78,36,.04) 60%,transparent);background-size:96px 96px,auto} /* header wordmark, a step smaller on both */ .brand{--brand-mark-h:22px} @media(max-width:640px){.brand{--brand-mark-h:19px}} /* the case study ledger titles: body-lead size with a tight line, not a feature-card title */ .cs-ledger__c{font-size:var(--t-lead);line-height:1.3;letter-spacing:-.01em} .cs-ledger__c .cs-ico{width:34px;height:34px} /* the before/after table takes the comparison card treatment at every width, as on the why page */ .cs-table.cs-table{margin-top:var(--s-6)} .cs-table.cs-table thead{display:none} .cs-table.cs-table tbody{display:grid;gap:12px} .cs-table.cs-table tr{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;padding:16px;border:1px solid rgba(16,26,29,.14);border-radius:8px;background:rgba(233,227,212,.55)} .cs-table.cs-table td{display:block;padding:12px 14px;border:0;border-radius:6px;background:rgba(27,33,37,.05);font-size:var(--t-small);line-height:1.45;color:var(--text-dark-soft)} .cs-table.cs-table td::before{content:attr(data-label);display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:6px;color:var(--text-dark-soft)} .cs-table.cs-table td.cs-after{background:rgba(240,78,36,.10);border:1px solid rgba(240,78,36,.30);color:var(--text-dark);font-weight:500} .cs-table.cs-table td.cs-after::before{color:var(--orange)} /* phones: copy runs the full width of the column; the text link's arrow sits flush with the text edge above it */ @media(max-width:640px){ .problems__lede,.method__intro,.measure,.hero__sub,.hero__sub p,.lead,.method__head p,.section__intro,.qs-after,.notfit__body p,.fit-card__body{max-width:none!important} .problems__lede{max-width:none!important} } .btn--text{padding-left:0;margin-left:0} .btn--text .btn__arrow{margin-left:0} /* ---------- stage chips, one size everywhere -------------------------------- The "within Assess we define" chips on the hub, the "what's included" chips on the fibre pages and every list that shares .stage__items: a step smaller with tighter padding, the same on all of them. */ .stage__items li,.fb__tags li{font-size:.78rem!important;padding:5px 10px!important;line-height:1.3!important} @media(max-width:700px){.stage__items li,.fb__tags li{font-size:.76rem!important;padding:5px 9px!important}} .fb__sub{margin:6px 0 0;color:var(--fib);font-size:var(--t-small);font-weight:500} .fb__t{margin:0} /* short-card lists go two across on phones instead of one card per row with most of the width empty: hub reasons and consequences, fibre-page leave-with lists, story fibre cards, why capabilities, thinking fibre grid */ @media(max-width:700px){ .why,.cons,.leave,.five,.cap-grid,.fib-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} .why li,.cons li,.leave li,.five li,.five a,.cap,.fib{padding:14px 12px!important;min-height:0!important} .why li .stage__ic,.cons li .cs-ico,.leave__tick{width:30px;height:30px} .five__d,.cap p,.fib__d,.why__d,.leave__d{font-size:.78rem!important;line-height:1.4!important} .five__t,.cap h3,.fib__t,.why__t,.leave__t{font-size:.98rem!important;line-height:1.2!important} .leave li{flex-direction:column;align-items:flex-start;gap:8px} .fib__go{font-size:.82rem} } /* running copy, one size: the stage ledes and any card paragraph that had stepped up to emphasis or lead come back to the body size, with the body line height */ .stage__lede,.stage__d,.cs-stepper__body,.fb__lead,.fibre__body,.nextfib__d,.cs-trio__b,.cs-check__verdict,.cs-pipe__cap,.cs-gantt__cap,.cs-weave__cap,.cs-flip__note{font-size:var(--t-body)!important;line-height:var(--lh-body)!important} /* FAQ answers: room above the copy once the panel opens */ .faq__a{padding-top:clamp(14px,1.6vw,20px)!important} /* ========================================================================== 15 PROSE, ONE VOICE Every paragraph in a prose run renders the same: body size, regular weight, the body colour, one paragraph gap. The closing lines that had stepped up in weight or brightness (.cs-close, .close-note's last line, the thesis and pivot copy) join the run. The gap from a section intro down to its prose is a paragraph gap, not a section gap. */ .cs-prose p,.cs-prose .cs-close,.close-note p,.thesis p,.thesis__t,.pivot p,.pivot__text,.depends__col p,.mc__body p,.notfit__body p,.notfit__body strong,.qs-after,.ones-split__head p:not(.method__intro){font-size:var(--t-body)!important;font-weight:400!important;color:var(--text-soft)!important;line-height:var(--lh-body)!important;letter-spacing:0!important} .cs-prose p+p,.close-note p+p,.mc__body p+p,.pivot p+p,.depends__col p+p,.notfit__body p+p{margin-top:var(--s-4)!important} .method__head+.cs-prose,.method__head+.close-note,.method__head+.mc__body,.method__head+.pivot{margin-top:var(--s-4)!important} .method__intro{margin-bottom:0!important} .qs-split__head .qs-after{margin-top:var(--s-4)!important} /* the scrubber runs the full width on phones, and the legend sits under it */ @media(max-width:700px){ .cs-gantt__scrub{display:block!important;margin-top:var(--s-4)!important} .cs-gantt__scrub input{width:100%!important;height:34px} .cs-gantt__scrub input::-webkit-slider-thumb{width:26px;height:26px;margin-top:-11px} .cs-gantt__legend{margin-top:var(--s-4)} } /* fit-card titles: two lines each, at every width; the slot no longer bottom-aligns since all three fill it */ .fit-card__title{min-height:0;display:block} .fit-card__title br{display:inline} /* typesetting baseline: the browser avoids widows where it can; the script does the rest */ p,li,dd,h1,h2,h3,figcaption{text-wrap:pretty} /* ---------- hero snap ------------------------------------------------------ The heroes are a screen deep. The first scroll snaps past them to the first section, sitting under the header, rather than leaving the reader three swipes into the hero. Proximity, not mandatory: only the top of the page and the first section are snap points, so scrolling elsewhere is free and in-page anchors are unaffected. */ html{scroll-behavior:smooth} /* ========================================================================== 16 THE ORBIT The five fibres as chips around the Twine mark, a Twine-labelled pointer walking them in order and lighting each in its own colour. Sits in the left column of every CTA card; the copy takes the right. On phones the orbit sits above the copy at a shorter height. */ .consult__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center} .consult__card > .orbit{grid-column:1;grid-row:1} .consult__card > .consult__inner,.consult__card > .band__text{grid-column:2;grid-row:1;text-align:left;margin-inline:0} .consult__card > .band__actions{grid-column:2;grid-row:2;justify-content:flex-start} .consult__card.consult__card--band{grid-template-rows:auto auto;row-gap:18px;align-items:center} .consult__card.consult__card--band > .orbit{grid-row:1/3} .consult__card > .band__actions,.consult__inner .consult__actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:16px 22px;justify-self:start;justify-content:flex-start!important} .consult__card > .band__actions .btn{width:auto} .consult__inner.center{text-align:left} .consult__inner.center .consult__actions,.consult__inner.center > p{justify-content:flex-start} @media(max-width:860px){ .consult__card{grid-template-columns:1fr} .consult__card > .orbit{grid-column:1;grid-row:1} .consult__card > .consult__inner,.consult__card > .band__text{grid-column:1;grid-row:2} .consult__card > .band__actions{grid-column:1;grid-row:3} } .orbit{position:relative;height:clamp(220px,26vw,320px);z-index:1} .orbit__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(2,14px);gap:4px} .orbit__mark b{width:14px;height:14px;border-radius:3px;background:var(--text-bright);opacity:.9} .orbit__mark b:nth-child(2){background:var(--orange)} .orbit__chip{position:absolute;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 10px;border-radius:6px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text-soft);font-size:.82rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;transition:border-color .35s,color .35s,background .35s,transform .35s} .orbit__chip i{width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.55;transition:opacity .35s,box-shadow .35s} .orbit__chip.is-on{border-color:var(--c);color:var(--sand,#E9E3D4);background:color-mix(in srgb,var(--c) 16%,transparent);transform:translateY(-2px)} .orbit__chip.is-on i{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 28%,transparent)} .orbit__chip.is-done{color:var(--text);border-color:color-mix(in srgb,var(--c) 55%,transparent)} .orbit__pointer{position:absolute;left:0;top:0;z-index:5;transition:transform .55s cubic-bezier(.2,.7,.3,1);pointer-events:none;opacity:0} .orbit.is-live .orbit__pointer{opacity:1} .orbit__pointer svg{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} .orbit__pointer span{position:absolute;left:16px;top:12px;padding:3px 8px;border-radius:4px;background:var(--orange);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.02em;white-space:nowrap} @media(prefers-reduced-motion:reduce){.orbit__chip{color:var(--text);border-color:color-mix(in srgb,var(--c) 55%,transparent)} .orbit__chip i{opacity:1} .orbit__pointer{display:none}} @media(max-width:600px){.orbit__chip{height:30px;font-size:.76rem;padding:0 10px 0 9px} .orbit__mark{grid-template-columns:repeat(2,11px)} .orbit__mark b{width:11px;height:11px}} /* once the page has moved, the fixed header sits on a fade of page ink so nothing scrolling beneath it shows above or through the bar */ /* ========================================================================== 17 BUTTON MOTION Ripple on every button from the point of press; a cursor-following glow on the orange primary and the paper button; a cursor-following ring on the ghost and dark buttons, in the fibre colour on fibre pages; the arrow dot slides forward and tips north-east on any button that leaves the page. The glow and ring read two numbers the engine sets on pointer move. All of it is off under reduced motion. */ .btn:not(.btn--text){position:relative;isolation:isolate;overflow:hidden} .btn > *{position:relative;z-index:2} .btn__ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.55;background:var(--rc,rgba(5,8,10,.35));animation:btn-rip .6s cubic-bezier(.2,.7,.3,1) forwards;z-index:1} @keyframes btn-rip{to{transform:scale(1);opacity:0}} .btn--paper .btn__ripple{--rc:rgba(240,78,36,.28)} .btn--ghost .btn__ripple,.btn--dark .btn__ripple,.btn--text .btn__ripple{--rc:rgba(233,227,212,.14)} .section--light .btn--ghost .btn__ripple{--rc:rgba(16,26,29,.14)} .btn--text{position:relative} .btn--text .btn__ripple{left:0!important;top:50%!important;width:22px!important;height:22px!important;transform:translateY(-50%) scale(0);animation:btn-rip-dot .5s ease-out forwards;--rc:rgba(240,78,36,.35)} @keyframes btn-rip-dot{to{transform:translateY(-50%) scale(3);opacity:0}} /* glow */ .btn--primary::after,.btn--paper::after{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);background:var(--gc,rgba(255,255,255,.26));opacity:0;transition:width .7s ease,height .7s ease,opacity .35s ease;pointer-events:none;z-index:1} .btn--paper::after{--gc:rgba(240,78,36,.18)} .btn--primary:hover::after,.btn--paper:hover::after{width:240px;height:240px;opacity:1} /* ring */ .btn--ghost::before,.btn--dark::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:radial-gradient(160px 160px at var(--mx,50%) var(--my,50%),var(--fib,var(--orange)),transparent 65%);opacity:0;transition:opacity .35s ease;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1} .btn--ghost:hover::before,.btn--dark:hover::before{opacity:1} .btn--ghost:hover{background:color-mix(in srgb,var(--fib,var(--orange)) 7%,transparent)} /* arrow sweep on anything that leaves the page */ .btn .btn__arrow{transition:transform .45s cubic-bezier(.2,.7,.3,1),background .18s ease,color .18s ease,border-color .18s ease} .btn[target="_blank"]:hover .btn__arrow,.btn.is-away:hover .btn__arrow{transform:translateX(5px) rotate(-45deg)} .btn--text:hover .btn__arrow{transform:translateX(3px)} @media(prefers-reduced-motion:reduce){.btn__ripple{display:none} .btn--primary::after,.btn--paper::after,.btn--ghost::before,.btn--dark::before{display:none} .btn .btn__arrow{transition:none}} /* under a hero, the first section clears the docked header bar on phones, so the snap can land with the hero's foot at the very top of the screen and the eyebrow still sits below the bar */ .hero + section,.hero + main > section:first-child,.hero + div{padding-top:clamp(112px,9vw,128px)!important} /* footer wordmark: a whisper on the ink, not a shout */ .footer__mark{--wm-opacity:.6} .footer__mark.is-in,.footer__mark:not([data-anim]){opacity:var(--wm-opacity)!important} .footer__mark svg{opacity:.7} .footer__mark .dot{opacity:.75} /* intro cards on phones: the tile and the kicker share a row, the title and body follow tightly; no tall column of gaps */ @media(max-width:700px){ .intro-split{gap:12px!important;margin-top:24px!important} .intro-card{padding:16px 16px 18px!important;gap:8px!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important} .intro-card__ic{width:36px!important;height:36px!important;order:0} .intro-card__k{order:1;flex:1;margin:0!important} .intro-card__t{order:2;width:100%;margin:2px 0 0!important} .intro-card__d{order:3;width:100%;margin:0!important} .intro-card:hover{transform:none} } /* ========================================================================== 18 STAT BENTO Case study facts as a grid of tiles: one big tile for the defining number, a wide one with a rising bar, and two small ones. Dark and paper variants. Grain from the site, 8px corners, numbers in Familjen. */ .bento-sec{padding-block:clamp(28px,4vw,56px)} .hero + .bento-sec{padding-top:clamp(112px,9vw,128px)!important} .bento{display:grid;gap:12px;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(150px,auto)} .bento .tile{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line);background:var(--surface);padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;isolation:isolate;box-shadow:none} .bento .tile::before{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:96px 96px;opacity:.6;pointer-events:none;z-index:0} .bento .tile > *{position:relative;z-index:1} .bento .num{font-family:var(--font-display);font-weight:600;letter-spacing:-.05em;line-height:.95;color:var(--text-bright)} .bento .k{font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft)} .bento .tile p{margin:0;color:var(--text-soft);font-size:var(--t-small)} .bento .tile__t{color:var(--text-bright)!important;font-weight:500;font-size:var(--t-body)!important} .bento .tile--hero{grid-column:span 3;grid-row:span 2;background:var(--orange);border-color:var(--orange);color:#fff} .bento .tile--hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(5,8,10,.35) 0 1px,transparent 1px 10px);-webkit-mask:radial-gradient(ellipse 80% 55% at 100% 0%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 80% 55% at 100% 0%,#000 55%,transparent 100%);pointer-events:none;z-index:0} .bento .tile--hero .k{display:inline-block;padding:5px 10px;border-radius:4px;background:rgba(5,8,10,.28);color:#fff} .bento .tile--hero .num{font-size:clamp(3.4rem,7vw,6.2rem);margin-top:18px;color:#fff} .bento .tile--hero p{max-width:30ch;color:rgba(255,255,255,.85)} .bento .tile--wide{grid-column:span 3;flex-direction:row;align-items:center;justify-content:space-between} .bento .tile--wide .num{font-size:2.2rem} .bento .tile--one{grid-column:span 1;align-items:center;justify-content:center;text-align:center} .bento .tile--one .num{font-size:2rem} .bento .tile--two{grid-column:span 2;flex-direction:row;align-items:center;justify-content:flex-start} .bento .bars{display:flex;gap:4px;align-items:flex-end;height:36px;flex:none} .bento .bars i{display:block;width:6px;border-radius:3px;background:var(--text-bright)} .bento .badge{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);border:1px solid var(--line-strong);color:var(--orange);font-family:var(--font-display);font-weight:600;flex:none} /* on paper */ .bento--paper{margin:0 0 clamp(28px,3.5vw,44px)} .bento--paper .tile{background:rgba(244,243,237,.65);border-color:rgba(16,26,29,.14);color:#101A1D} .bento--paper .tile::before{opacity:.35} .bento--paper .tile .k{color:rgba(16,26,29,.6)} .bento--paper .tile p{color:rgba(16,26,29,.7)} .bento--paper .num{color:#101A1D} .bento--paper .tile__t{color:#101A1D!important} .bento--paper .tile--hero{background:#101A1D;border-color:#101A1D;color:#E9E3D4} .bento--paper .tile--hero .num{color:#E9E3D4} .bento--paper .tile--hero p{color:rgba(233,227,212,.75)} .bento--paper .tile--hero .k{background:rgba(233,227,212,.14);color:#E9E3D4} .bento--paper .tile--hero::after{background:repeating-linear-gradient(45deg,rgba(233,227,212,.22) 0 1px,transparent 1px 10px)} .bento--paper .tile--accent{background:var(--orange);border-color:var(--orange)} .bento--paper .tile--accent .num,.bento--paper .tile--accent .k{color:#fff} .bento--paper .bars i{background:#101A1D} .bento--paper .badge{background:#E9E3D4;color:var(--orange);border-color:rgba(16,26,29,.2)} @media(max-width:760px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto} .bento .tile{padding:18px} .bento .tile--hero{grid-column:span 2;grid-row:auto;min-height:240px} .bento .tile--wide{grid-column:span 2} .bento .tile--one,.bento .tile--two{grid-column:span 1} .bento .tile--two{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px} .bento .tile--hero .num{font-size:3.2rem}} /* no numerals on the stage cards, and no slash decorations anywhere */ .stage__n{display:none!important} /* ========================================================================== 19 FOUNDERS, PROFILE CARDS Two capped portraits side by side at every width, an ink fade from the foot of each carrying the name and role, stats beneath, the story a tap away. Replaces the tall photo cards. */ .founders__cards.pcs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;align-items:start} @media(min-width:760px){.founders__cards.pcs{gap:20px!important}} .founder.pc{display:block!important;border-radius:8px;overflow:hidden;background:var(--paper);border:1px solid rgba(16,26,29,.12);padding:0!important} .pc__media{position:relative;width:100%;height:clamp(200px,22vw,300px);overflow:hidden;background:#111} .pc__media picture,.pc__media img{display:block;width:100%;height:100%} .pc__media img{object-fit:cover;object-position:50% 20%;aspect-ratio:auto!important;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .founder.pc:hover .pc__media img{transform:scale(1.04)} .pc__fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,8,10,.55) 72%,rgba(5,8,10,.92) 100%)} .pc__fade::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:96px 96px;opacity:.5} .pc__over{position:absolute;left:0;right:0;bottom:0;padding:14px} .pc__name{font-family:var(--font-display)!important;font-weight:600!important;letter-spacing:-.04em!important;font-size:clamp(1.15rem,1rem+.8vw,1.5rem)!important;line-height:1!important;color:var(--sand,#E9E3D4)!important;margin:0!important} .pc__role{margin:4px 0 0!important;color:var(--orange)!important;font-size:.78rem!important;font-weight:500} .pc__body{padding:12px 14px 14px!important;display:block!important} .pc__stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin:0 0 10px!important;padding:0!important;border:0!important} .pc__stats .stat{margin:0!important} .pc__stats dd{font-family:var(--font-display)!important;font-weight:600!important;letter-spacing:-.04em!important;font-size:1.05rem!important;line-height:1!important;color:#101A1D!important;margin:0!important} .pc__stats dt{font-size:.62rem!important;text-transform:uppercase;letter-spacing:.06em;color:rgba(16,26,29,.55)!important;margin:0 0 3px!important;order:-1} .pc__stats .stat{display:flex;flex-direction:column} .pc__more{font-size:.85rem!important} .pc__more[aria-expanded="true"] .btn__arrow{transform:rotate(90deg);background:var(--orange);color:#fff;border-color:var(--orange)} .founder.pc .founder__bio{margin-top:10px} .founder.pc .founder__bio-inner p{font-size:.86rem!important;color:rgba(16,26,29,.75)!important} .founder__head,.founder__rule,.founder__toggle{display:none!important} @media(max-width:759px){.pc__media{height:200px} .founders__cards.pcs .founder.pc.is-open{grid-column:1/-1} .founders__cards.pcs .founder.pc.is-open .pc__media{height:220px} .pc__stats{grid-template-columns:1fr!important;gap:6px!important} .pc__stats .stat{flex-direction:row!important;justify-content:space-between;align-items:baseline;gap:8px} .pc__stats dt{order:0;margin:0!important} .pc__stats dd{font-size:.95rem!important}} /* founders, tightened: smaller story link, less air beneath, and on phones the roster layout: square portrait, name, one-line hook, arrow */ .pc__body{padding:10px 14px 12px!important} .pc__stats{margin:0 0 6px!important} .pc__more{font-size:.78rem!important;gap:6px!important} .pc__more .btn__arrow{width:18px;height:18px;font-size:.7rem} .founder.pc .founder__bio{margin-top:8px} .pc__hook,.pc__head{display:none} @media(max-width:759px){ .founders__cards.pcs{grid-template-columns:1fr!important;gap:10px!important} .founder.pc{display:grid!important;grid-template-columns:64px 1fr auto!important;gap:12px;align-items:center;padding:12px!important;background:var(--paper)} .founder.pc .pc__media{width:64px;height:64px!important;border-radius:6px;grid-column:1;grid-row:1} .founder.pc .pc__media img{object-position:50% 18%} .founder.pc .pc__fade{display:none} .founder.pc .pc__over,.founder.pc .pc__more{display:none!important} .founder.pc .pc__head{display:block;grid-column:2;grid-row:1} .pc__head-name{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;font-size:1.05rem;line-height:1;color:#101A1D;margin:0} .pc__hook{display:block;margin:4px 0 0;font-size:.8rem;line-height:1.35;color:rgba(16,26,29,.7)} .founder.pc .pc__body{grid-column:1/-1;grid-row:2;padding:0!important;display:none!important} .founder.pc.is-open .pc__body{display:block!important;padding-top:10px!important;border-top:1px solid rgba(16,26,29,.1);margin-top:10px} .founder.pc.is-open{grid-column:auto} .founder.pc.is-open .pc__media{height:64px!important} .pc__more{grid-column:3;grid-row:1} /* the arrow button is the toggle on phones: it sits in the right column */ .founder.pc .pc__toggle{grid-column:3;grid-row:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#101A1D;color:#E9E3D4;border:0;font-size:.95rem;transition:transform .3s} .founder.pc.is-open .pc__toggle{transform:rotate(90deg);background:var(--orange)} .pc__stats{grid-template-columns:repeat(3,1fr)!important;gap:8px!important} .pc__stats .stat{flex-direction:column!important;align-items:flex-start} .pc__stats dt{order:1;margin:2px 0 0!important} } @media(min-width:760px){.founder.pc .pc__toggle{display:none}} /* proof section: the stepper sits closer to the film; the cue arrow is ink */ .proof .proof__stage{padding-bottom:clamp(24px,3vw,40px)!important} .proof .cs-stepper{margin-top:var(--s-4)!important} .founders__cue,.founders__cue svg,.founders__cue path{color:#101A1D!important} .founders__cue path[fill]{fill:#101A1D!important} /* the menu's Talk column carries the offer, condensed from the footer tile */ .menu__offer{display:grid;gap:6px;padding:14px 16px;border:1px solid rgba(240,78,36,.35);border-left:2px solid var(--orange);border-radius:8px;background:var(--surface)} .menu__offer-k{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:4px;background:var(--orange);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;width:max-content} .menu__offer-t{margin:2px 0 0;font-family:var(--font-body);font-weight:500;font-size:var(--t-body);line-height:1.3;color:var(--text-bright)} .menu__offer-d{margin:0;font-size:var(--t-small);line-height:1.5;color:var(--text-soft)} @media(max-width:900px){.menu__cols.menu__cols--3 .menu__offer{grid-column:1/-1}} /* next-fibre box: copy left, the call on the right, less height */ .nextfib{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;row-gap:6px;column-gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px)!important} .nextfib > .nextfib__ic{grid-column:1;grid-row:1;width:36px;height:36px;margin:0 0 8px} .nextfib__k,.nextfib__t,.nextfib__d{grid-column:1} .nextfib .btn,.nextfib__go{grid-column:2;grid-row:1/-1;align-self:center;justify-self:end;margin:0!important} .nextfib__t{margin:4px 0 6px!important} .nextfib__d{margin:0!important;max-width:60ch} @media(max-width:700px){.nextfib{grid-template-columns:1fr} .nextfib .btn,.nextfib__go{grid-column:1;grid-row:auto;justify-self:start;margin-top:12px!important}} #book::before{display:none!important} /* the old readability scrims on the belief cards were tuned for the image textures; over the shader they only darken the field. Off on light cards. */ .section--light .belief__card::after,.fibre-page .section--light .belief__card::after,#belief .belief__card::after{display:none!important} /* section heads: room beneath the intro before whatever follows */ .method__head{margin-bottom:clamp(20px,2.6vw,36px)} .method__head + .cs-prose,.method__head + .close-note,.method__head + .mc__body,.method__head + .pivot{margin-top:0!important} /* lessons tiles: sand tiles with ink icons, so they read on the ink */ .cs-bento .cs-ico{background:var(--sand,#E9E3D4)!important;color:#101A1D!important;border-color:transparent} /* the verdict runs the full measure in two columns */ .cs-verdict{max-width:none!important;column-count:2;column-gap:clamp(24px,3vw,44px)} .cs-verdict p{break-inside:avoid;margin-top:0} @media(max-width:800px){.cs-verdict{column-count:1}} /* brand points as numbered steps: tight on desktop, tighter on phones */ .cs-points--steps{display:grid;gap:10px;counter-reset:step} .cs-points--steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)} .cs-points--steps .cs-ico{width:34px;height:34px} .cs-points--steps p{margin:0;font-size:var(--t-small);line-height:1.5;color:var(--text-soft)} .cs-points--steps b{display:block;color:var(--text-bright);font-weight:500;font-size:var(--t-body);margin-bottom:2px} @media(max-width:700px){.cs-points--steps li{padding:10px 12px;grid-template-columns:28px 1fr;gap:10px} .cs-points--steps .cs-ico{width:28px;height:28px}} @media(max-width:860px){ .consult__card.consult__card--band{grid-template-rows:auto auto auto} .consult__card.consult__card--band > .orbit{grid-row:1!important;grid-column:1!important} .consult__card.consult__card--band > .band__text{grid-row:2!important;grid-column:1!important} .consult__card.consult__card--band > .band__actions{grid-row:3!important;grid-column:1!important} } /* the long-title break is a desktop measure; phones wrap naturally */ @media(max-width:700px){br.ttl{display:none}} /* headings on phones: no forced breaks at all, the lines balance, and a short highlighted phrase never splits across lines */ h1,h2,h3{text-wrap:balance} .hl--tight{white-space:nowrap} @media(max-width:700px){h1 br:not(.fnd-br):not(.fnd-br1),h2 br,h3 br{display:none} .fit-card__title br{display:inline!important}} /* CTA cards: the eyebrow steps back to ink so the orange button owns the card */ .consult__card .eyebrow,.consult__card .eyebrow--solid{background:#0E1519!important;border:1px solid var(--line-strong)!important;color:var(--text-bright)!important} /* ========================================================================== 20 FAMILJEN FOR H1 ONLY (adopted) Everything below the page title sets in Google Sans weights. Google Sans sits larger on the line than Familjen at the same size, so the display sizes step down about a tenth and the tracking loosens from -.05em to -.025em. One block, easy to remove if we go back. */ :root{--t-h2:clamp(1.65rem, 1.12rem + 2.15vw, 3.05rem);--t-h2-sm:clamp(1.45rem, 1.05rem + 1.6vw, 2.35rem);--t-display:clamp(1.8rem, 1.2rem + 2.5vw, 3.25rem);--t-statement:clamp(1rem, .92rem + .45vw, 1.18rem)} h2,.method__title,.beyond__title,.founders__title,.proof__title,.audience__title,.problems__lede,.consult__title,.band__title,.footer__heading,.post-body h2,.cs-today__line,.thesis__t,.frag-result__text,.pivot__text,.cs-trio__close,.belief__quote,.cs-statement,.bento .num,.pc__name,.pc__head-name,.orbit__mark,.founder__name,.cs-facts__n,.stat dd,.pc__stats dd,.stage__n,.five__n,.menu__ttl,.menu__card h3,.tile .num,.p-card__n,.cs-stepper__num,.cs-ledger__n,.cs-facts__n,.bento .badge,.badge{font-family:var(--font-body)!important;font-weight:500!important;letter-spacing:-.025em!important} h2,.method__title,.beyond__title,.founders__title,.proof__title,.audience__title,.consult__title,.band__title{line-height:1.06!important} .problems__lede{line-height:1.12!important} .bento .tile--hero .num{font-size:clamp(3rem,6.2vw,5.6rem)!important;letter-spacing:-.04em!important} html body h1,html body h1[class],.hero__title,.hero__title--post{font-family:var(--font-display)!important;letter-spacing:-.05em!important} .cs-check__score,.cs-check__score b,.nf__code{font-family:var(--font-body)!important;font-weight:500!important;letter-spacing:-.025em!important} /* founders: tighter section, smaller portraits, no cue below wide desktop */ .founders{padding-block:clamp(32px,4vw,56px)!important} .founders__grid{gap:clamp(20px,2.4vw,36px)!important;align-items:center!important} .founders__intro{gap:clamp(14px,1.8vw,24px)!important} .pc__media{height:clamp(180px,17vw,230px)!important} @media(max-width:759px){.pc__media{height:64px!important}} @media(max-width:1299px){.founders__cue{display:none!important}} .founders__cue{width:clamp(88px,7vw,110px)!important} /* ========================================================================== 21 SECTION RHYTHM Sections were carrying 88 to 112px of padding on both edges, so two adjacent sections stacked to 176 to 224px of nothing. Padding halves, and where two dark sections meet, a hairline marks the join at the content width. Light sections mark themselves by their colour. The section under a hero keeps the room the snap lands on. */ .section:not(.hero){padding-block:clamp(40px,5vw,64px)!important} .section--light:not(.hero){padding-block:clamp(44px,5.5vw,72px)!important} .hero + section,.hero + main > section:first-child,.hero + div{padding-top:clamp(112px,9vw,128px)!important} .section:not(.section--light):not(.hero):not(.bento-sec) + .section:not(.section--light):not(.hero):not(.bento-sec){position:relative} .section:not(.section--light):not(.hero):not(.bento-sec) + .section:not(.section--light):not(.hero):not(.bento-sec)::before{content:"";display:block;height:1px;background:var(--line);max-width:calc(var(--wrap) - 2 * var(--gutter));margin:0 auto;transform:translateY(calc(-1 * clamp(40px,5vw,64px)))} .bento-sec + .section::before{display:none} .method__head{margin-bottom:clamp(18px,2.2vw,30px)} /* faq questions a step smaller on phones */ @media(max-width:600px){.faq__qt{font-size:var(--t-body)!important}} /* next-fibre box, condensed: icon beside the title, one row of copy, the call on the right */ .nextfib{grid-template-columns:36px minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:14px!important;row-gap:4px!important;align-items:center!important;padding:clamp(18px,2vw,26px) clamp(20px,2.6vw,34px)!important} .nextfib > .nextfib__ic{grid-column:1!important;grid-row:1!important;margin:0!important} .nextfib__k{grid-column:2!important;grid-row:1!important;margin:0!important;font-size:var(--t-micro)} .nextfib__t{grid-column:2!important;grid-row:1!important;margin:0!important;align-self:center} .nextfib__k + .nextfib__t{grid-row:2!important} .nextfib__d{grid-column:2!important;grid-row:2!important;margin:0!important} .nextfib__k ~ .nextfib__d{grid-row:3!important} .nextfib .btn,.nextfib__go{grid-column:3!important;grid-row:1/-1!important;align-self:center!important} @media(max-width:700px){.nextfib{grid-template-columns:32px minmax(0,1fr)!important} .nextfib .btn,.nextfib__go{grid-column:1/-1!important;grid-row:auto!important;justify-self:start!important;margin-top:10px!important}} /* footer legal: wraps inside its column */ .footer__legal,.footer__legal p{white-space:normal!important;max-width:100%} /* orange band copy: ink, regular weight, body leading */ .beyond__intro,.beyond .beyond__intro,#different .beyond__intro{color:rgba(16,26,29,.85)!important;font-weight:400!important;line-height:1.55!important;font-size:var(--t-lead)!important} /* capability cards on the why page: dark card, fibre stroke and label, no block fill */ .cap{background:var(--surface)!important;border:1px solid var(--line)!important;border-top:2px solid var(--fib)!important;color:var(--text)!important} .cap h3{color:var(--text-bright)!important} .cap p{color:var(--text-soft)!important} .cap .cap-ic{background:transparent!important;color:var(--fib)!important;border:1px solid var(--fib)!important} /* iOS Safari composites a WebGL canvas on its own layer and can paint it over siblings that only carry a z-index; anything that sits over a shader canvas is promoted to a layer of its own */ .bl-card__art > :not(.art__shader),.problems__art > :not(.art__shader),.belief__card > :not(.belief__shader),.consult__card > :not(.art__shader):not(.hero__shade),.founders__cue > :not(.art__shader),.surface-texture > :not(.hero__shader):not(.hero__shade){transform:translateZ(0);-webkit-transform:translateZ(0)} /* ---------- story page, six snags ------------------------------------------ 1. footer column links in the body text colour, everywhere 3. the five fibre cards carry their fibre, subtly 4. the Memory Catcher logo sits top left of the panel copy 5. the together section uses its width: head left, chain right 6. the journey cards get a hierarchy: face and name on one row, kicker beneath, then the story */ footer a,.footer__col a,.footer__links a,.footer__nav a{color:var(--text)!important} footer a:hover{color:var(--text-bright)!important} .five a{border-top:2px solid var(--c)!important;position:relative} .five a .five__n{color:var(--c)!important} .five a:hover{border-color:var(--c)!important;background:color-mix(in srgb,var(--c) 6%,var(--surface))!important} .mc__logo--top{display:block;width:clamp(150px,18vw,220px);height:auto;margin:0 0 clamp(14px,1.6vw,22px)} .mc__logo:not(.mc__logo--top){display:none} .together__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start} .together__grid .method__head{margin:0} .together__grid .chain{margin-top:8px} @media(max-width:900px){.together__grid{grid-template-columns:1fr} .together__grid .chain{margin-top:24px}} .jrn__col{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:center} .jrn__face{grid-column:1;grid-row:1;margin:0!important;width:52px!important;height:52px!important} .jrn__k{grid-column:2;grid-row:1;margin:0!important;display:flex;flex-direction:column;gap:2px} .jrn__name{font-weight:500;color:var(--text-bright);font-size:var(--t-body)} .jrn__k{font-size:var(--t-micro)!important;text-transform:uppercase;letter-spacing:.08em;color:var(--orange)!important} .jrn__name{text-transform:none;letter-spacing:0} .jrn__d{grid-column:1/-1;margin:0!important} .jrn__d:first-of-type{margin-top:8px!important;padding-top:12px;border-top:1px solid var(--line)} .jrn__k .jrn__name{color:var(--text-bright)!important} /* pages that open without a hero (sitemap, privacy, 404): the first section clears the fixed header */ main > .section:first-child:not(.hero),body > .section:first-of-type:not(.hero),main > .nf:first-child,body > .nf{padding-top:calc(var(--header-h) + clamp(32px,4vw,56px))!important} /* beyond-launch cards on phones: the roster layout, a small art tile beside the kicker and title rather than a screen-deep panel each */ @media(max-width:700px){ .bl-card{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;gap:0 14px!important;align-items:center!important;padding:12px!important} .bl-card__art{grid-column:1;grid-row:1;width:76px;height:76px;aspect-ratio:1!important;border-radius:6px;overflow:hidden} .bl-card__icon{width:60%!important;max-width:none!important} .bl-card__panel{grid-column:2;grid-row:1;padding:0!important} .bl-card__kicker{font-size:var(--t-micro)!important;margin:0 0 4px!important;text-transform:uppercase;letter-spacing:.08em} .bl-card__title{font-size:var(--t-body)!important;line-height:1.25!important} .bl-card__body,.bl-card__panel p:not(.bl-card__kicker){grid-column:1/-1;margin:10px 0 0!important;font-size:var(--t-small)!important} .bl-grid,.beyond__grid{gap:10px!important} } /* ========================================================================== 22 CAPTIONED IMAGES Every image caption sits on the image itself, over an ink fade rising from the foot, the treatment the founders' cards use. One rule for all of them, present and future: .cs-figure, .evolve__figure and any figure that pairs a picture with a figcaption. */ .cs-figure,.evolve__figure,figure.captioned{position:relative;overflow:hidden;border-radius:8px;isolation:isolate} .cs-figure picture,.evolve__figure picture,.cs-figure > img,.evolve__figure > img{display:block;width:100%;margin:0} .cs-figure img,.evolve__figure img{display:block;width:100%;height:auto} .cs-figure figcaption,.evolve__figure figcaption,figure.captioned figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:clamp(40px,6vw,64px) clamp(14px,1.8vw,22px) clamp(12px,1.6vw,18px);color:var(--sand,#E9E3D4);font-size:var(--t-small);line-height:1.45;background:linear-gradient(180deg,transparent 0%,rgba(5,8,10,.55) 45%,rgba(5,8,10,.92) 100%);pointer-events:none} .cs-figure figcaption::after,.evolve__figure figcaption::after,figure.captioned figcaption::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:96px 96px;opacity:.45;pointer-events:none;z-index:-1} .cs-figure figcaption b,.evolve__figure figcaption b{color:#fff} /* the verdict is a quote, not an image; it keeps its own caption */ .cs-verdict figcaption{position:static;background:none;padding:0;color:inherit} /* ========================================================================== 23 CONTACT A lead column with the three ways in, and the form. */ .contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start} @media(max-width:860px){.contact{grid-template-columns:1fr}} .contact__ways{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;display:grid;gap:10px} .contact__ways li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)} .contact__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:6px;background:#0B1114;color:var(--orange)} .contact__ic svg{width:20px;height:20px} .contact__ways b{display:block;font-weight:500;color:var(--text-bright);font-size:var(--t-body)} .contact__ways a{color:var(--text-soft);font-size:var(--t-small);text-decoration:none} .contact__ways a:hover{color:var(--orange)} .contact__form{display:grid;gap:14px;padding:clamp(18px,2.4vw,30px);border:1px solid var(--line);border-radius:8px;background:var(--surface)} .contact__row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:600px){.contact__row{grid-template-columns:1fr}} .field{display:grid;gap:6px} .field__l{font-size:var(--t-small);color:var(--text-soft)} .field__i{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:6px;background:#0B1114;color:var(--text-bright);font:400 var(--t-body)/1.4 var(--font-body);outline:none;transition:border-color .18s ease,box-shadow .18s ease} .field__i:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,78,36,.18)} .field__i:user-invalid{border-color:#E83001} .field__t{min-height:140px;resize:vertical} .field__s{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px} .field__s option{background:#0B1114;color:var(--text-bright)} .contact__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .contact__fine{margin:0;font-size:var(--t-micro);color:var(--text-soft)} .contact__fine a{color:var(--text)} .contact__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px} .contact__status{margin:0;font-size:var(--t-small);color:var(--text-soft)} .contact__status.is-err{color:#F04E24} .contact__sent{padding:clamp(22px,3vw,36px);border:1px solid rgba(240,78,36,.35);border-left:2px solid var(--orange);border-radius:8px;background:var(--surface)} .contact__sent-k{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:4px;background:var(--orange);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px} .contact__sent-t{font-size:var(--t-h2-sm);margin:0 0 10px} .contact__sent p:last-child{margin:0;color:var(--text-soft)} /* the bar above the header: one line, no motion, fits a phone */ .ticker{display:flex;align-items:center;justify-content:center;padding:0 12px} .ticker__one{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:var(--t-small);color:var(--text-soft);letter-spacing:-.005em} .ticker__one b{color:var(--orange);font-weight:500} @media(max-width:420px){.ticker__one{font-size:var(--t-micro)}} /* a manual strip's dots mark position; nothing fills or animates */ [data-slideshow-dots][data-manual] .hero__dot::after{animation:none!important;transition:none!important} [data-slideshow-dots][data-manual] .hero__dot{cursor:pointer} [data-slideshow-dots][data-manual] .hero__dot.is-active::after{width:100%!important;transform:none!important} /* ========================================================================== 24 SCORECARD The Five Fibre Franchise Growth Scorecard, rebuilt on this stylesheet rather than its own. It keeps its own topbar and foot rather than the site chrome, because the job of the page is to carry someone through 25 questions, but everything it draws with now comes from the tokens above: page ink, brand orange, 8/6/4 corners, no shadows, Familjen on the h1 only. Namespaced `sc-` throughout so nothing here can reach the rest of the site, and nothing in the site can reach in. */ /* --- shell ------------------------------------------------------------- */ .sc-topbar{position:sticky;top:0;z-index:40;background:rgba(5,8,10,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)} .sc-topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px} .sc-brand{display:flex;align-items:center;gap:var(--s-3);min-width:0} .sc-brand svg{height:22px;width:auto;flex:none} .sc-brand__tag{font-size:var(--t-micro);color:var(--text-soft);white-space:nowrap;letter-spacing:-.005em} @media(max-width:600px){.sc-brand__tag{display:none}.sc-brand svg{height:19px}} .sc-step{font-size:var(--t-micro);color:var(--text-soft);white-space:nowrap;font-variant-numeric:tabular-nums} .sc-main{position:relative} .sc-screen{display:none;padding-block:clamp(48px,7vw,96px)} .sc-screen.is-active{display:block;animation:sc-in .38s cubic-bezier(.22,.61,.36,1) both} @keyframes sc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.sc-screen.is-active{animation:none}} .sc-screen > .wrap{max-width:820px} .sc-foot{border-top:1px solid var(--line);padding-block:var(--s-6);margin-top:clamp(48px,6vw,80px)} .sc-foot .wrap{font-size:var(--t-small);color:var(--text-soft);text-align:center} .sc-foot a{color:inherit} .sc-foot a:hover{color:var(--orange)} /* --- type --------------------------------------------------------------- The h1 is the only Familjen on the page, as everywhere else. */ /* SNAG 1: everything was bunched. The page had no vertical rhythm of its own, it was relying on collapsing default margins, which on a page this sparse reads as cramped. Everything below sets real spacing. */ .sc-screen h2{font-size:var(--t-h2-sm);margin:0 0 var(--s-5)} .sc-screen h3{margin:0 0 var(--s-3)} .sc-lede{font-size:var(--t-lead);color:var(--text);line-height:var(--lh-body);max-width:60ch;margin:0 0 var(--s-6)} .sc-screen p{max-width:66ch;margin:0 0 var(--s-5)} .sc-screen p:last-child{margin-bottom:0} /* a button on its own line needs room above it, not a paragraph's worth */ .sc-screen p > .btn{margin-top:var(--s-3)} .sc-screen .btn{padding-inline:var(--s-6)} .sc-screen .btn__arrow{margin-left:-18px} .sc-hl{color:var(--orange)} /* SNAG 7: the hero heading drops to h2 treatment. It stays an