/* ============================================================================ AFITA — site stylesheet Loaded after the critical CSS in . Everything below the first screen. White ground, navy ink, one orange accent per viewport. ========================================================================= */ /* ---------- self-hosted faces ---------- */ @font-face{ font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap; src:url("/assets/fonts/instrument-serif-400.woff2") format("woff2"); } @font-face{ font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap; src:url("/assets/fonts/instrument-serif-400-italic.woff2") format("woff2"); } @font-face{ font-family:"Inter";font-style:normal;font-weight:400;font-display:swap; src:url("/assets/fonts/inter-400.woff2") format("woff2"); } @font-face{ font-family:"Inter";font-style:normal;font-weight:500;font-display:swap; src:url("/assets/fonts/inter-500.woff2") format("woff2"); } @font-face{ font-family:"Inter";font-style:normal;font-weight:700;font-display:swap; src:url("/assets/fonts/inter-700.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); } /* ---------- shared bits ---------- */ .italic{font-style:italic} .mono-label{ font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600); } .rule{height:1px;background:var(--line);border:0;margin:0} .tnum{font-variant-numeric:tabular-nums} /* counting numbers reserve their final width so ticking 0 -> 30 shifts nothing */ [data-count]{display:inline-block;min-width:2ch;text-align:left} /* anchors clear the fixed nav */ [id]{scroll-margin-top:calc(var(--nav-h) + var(--s5))} /* ---------- announcement bar ---------- */ .announce{ position:relative;z-index:110;display:flex;align-items:center;gap:var(--s4); justify-content:center;background:var(--ink);color:#fff; padding:var(--s3) var(--s5);font-size:.9375rem; } .announce a{color:#fff;text-underline-offset:3px} .announce-close{ background:none;border:0;color:#fff;font-size:1.25rem;line-height:1; cursor:pointer;padding:0 var(--s2); } /* ---------- section reveals (single run) ---------- */ .rv{opacity:0;transform:translateY(14px); transition:opacity .34s cubic-bezier(.2,.7,.3,1),transform .34s cubic-bezier(.2,.7,.3,1)} .rv.in{opacity:1;transform:none} /* ---------- kinetic tagline ---------- */ .kinetic{padding-block:var(--s9)} .kinetic-lines li{ font-family:var(--display);letter-spacing:-.022em; font-size:clamp(2.25rem,6.4vw,5.5rem);line-height:1.04; } .kinetic-lines li:nth-child(2){padding-left:clamp(0rem,6vw,6rem)} .kinetic-lines li:nth-child(3){padding-left:clamp(0rem,12vw,12rem)} .kmask{display:block;overflow:hidden} .kmask > span{display:block;transform:translateY(105%); transition:transform .85s cubic-bezier(.16,.84,.28,1)} .kinetic.in .kmask > span{transform:none} .kinetic.in li:nth-child(1) .kmask > span{transition-delay:.05s} .kinetic.in li:nth-child(2) .kmask > span{transition-delay:.2s} .kinetic.in li:nth-child(3) .kmask > span{transition-delay:.35s} .kinetic-rule{ height:1px;background:var(--line);margin-top:var(--s7); transform:scaleX(0);transform-origin:left; transition:transform 1s cubic-bezier(.16,.84,.28,1) .5s; } .kinetic.in .kinetic-rule{transform:scaleX(1)} /* ---------- the case ---------- */ .case-head{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--s8);align-items:end; } .case-head .body-copy{padding-bottom:.6rem} .voices{margin-top:var(--s8);border-top:var(--hair)} .voice{ display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1.1fr) minmax(0,1fr); gap:var(--s7);padding-block:var(--s6);border-bottom:var(--hair);align-items:baseline; } .voice-q{ font-family:var(--display);font-size:clamp(1.375rem,2.3vw,2rem); line-height:1.16;letter-spacing:-.015em;margin:0; } .voice-note{color:var(--muted);font-size:1rem;margin:0;max-width:34ch} /* ---------- scorecard ---------- */ .sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);margin-top:var(--s7)} .sc-col h3{margin:0 0 var(--s5)} .chips{display:flex;flex-direction:column;gap:var(--s2)} .chip{ display:flex;align-items:center;gap:var(--s3); border:var(--hair);border-radius:3px;padding:.85rem var(--s4); font-size:1rem;background:#fff; } .dot{ width:9px;height:9px;border-radius:50%;flex:none;background:var(--accent); transition:background-color .5s cubic-bezier(.2,.7,.3,1); } .chip .state{margin-left:auto;font-family:var(--mono);font-size:.6875rem; letter-spacing:.12em;text-transform:uppercase;color:var(--navy-600)} .sc-resolve.in .chip:nth-child(1) .dot{transition-delay:.12s} .sc-resolve.in .chip:nth-child(2) .dot{transition-delay:.32s} .sc-resolve.in .chip:nth-child(3) .dot{transition-delay:.52s} .sc-resolve.in .chip:nth-child(4) .dot{transition-delay:.72s} .sc-resolve.in .dot{background:var(--green)} .sc-resolve.in .chip{border-color:#D7E5DE} /* interactive weekly-scorecard demo */ .sc-demo{margin-top:var(--s7);border:var(--hair);border-radius:4px;overflow:hidden} .sc-demo-row{ display:grid;grid-template-columns:1.6rem minmax(0,1fr) minmax(0,1fr) 6rem; gap:var(--s4);align-items:center;padding:var(--s4) var(--s5); border-bottom:1px solid var(--line);background:none;width:100%; font:inherit;color:inherit;text-align:left;cursor:pointer; transition:background-color .2s ease; } .sc-demo-row:last-child{border-bottom:0} .sc-demo-row:hover,.sc-demo-row:focus-visible{background:var(--paper)} .sc-demo-row .dot{background:var(--amber);transition:background .4s ease} .sc-demo-row[data-green="true"] .dot{background:var(--green)} /* the row underlines itself as it lands */ .sc-demo-row{position:relative} .sc-demo-row::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--green);transform:scaleX(0);transform-origin:left; transition:transform .6s cubic-bezier(.2,.7,.3,1); } .sc-demo-row[data-green="true"]::after{transform:scaleX(1)} /* the two status words cross-fade in place, so the column never reflows */ .sc-demo-state{position:relative;display:inline-block;min-width:5rem} .sc-s{transition:opacity .35s ease} .sc-s-landed{position:absolute;right:0;top:0;opacity:0;color:var(--green)} .sc-demo-row[data-green="true"] .sc-s-flight{opacity:0} .sc-demo-row[data-green="true"] .sc-s-landed{opacity:1} /* Truck routing stays amber. A scorecard where every row is green is a brochure; one row still in flight is a management tool. */ .sc-demo-row-open .dot{background:var(--amber)!important} .sc-demo-row-open::after{display:none} .sc-demo-row-open .sc-s-flight{opacity:1!important} .sc-demo-row-open .sc-s-landed{opacity:0!important} .sc-demo-hint{margin-top:var(--s3);font-size:.875rem;color:var(--muted)} /* ---------- three signatures ---------- */ .sigs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);margin-top:var(--s7)} .sig{border-top:2px solid var(--ink);padding-top:var(--s4)} .sig h3{margin:0 0 var(--s3)} .sig p{margin:0;color:var(--muted);font-size:1rem} .pull{ margin-top:var(--s9);padding-block:var(--s7); border-top:var(--hair);border-bottom:var(--hair); font-family:var(--display);font-size:clamp(1.875rem,4.2vw,3.5rem); line-height:1.06;letter-spacing:-.02em;max-width:20ch; } /* ---------- phases ---------- */ .mv{ display:grid;grid-template-columns:4.5rem minmax(0,11rem) minmax(0,1fr); grid-template-areas:"num name meta" "num name desc"; gap:var(--s2) var(--s7);align-items:baseline; padding-block:var(--s6);border-bottom:var(--hair); } .mv-num{grid-area:num;font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em; color:var(--navy-600)} .mv-name{grid-area:name;font-family:var(--display); font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.02em;margin:0} .mv-tag{grid-area:meta;font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)} .mv-desc{grid-area:desc;margin:0;color:var(--muted);font-size:1rem;max-width:46ch} .mv-list{grid-area:desc;margin-top:var(--s3);display:grid;gap:var(--s1)} .mv-list li{color:var(--muted);font-size:1rem;padding-left:var(--s4);position:relative} .mv-list li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:1px;background:var(--navy-600)} .mv-bridge{font-family:var(--display);font-size:clamp(1.375rem,2.4vw,2rem); letter-spacing:-.012em;line-height:1.2;margin:var(--s7) 0 0;max-width:34ch} /* sticky-scroll build (how-we-engage only) */ /* the sticky panel supplies its own vertical space; the section adding more on top left a dead band above the first phase */ .mv-track{position:relative} main > section:has(> .mv-track){padding-block:0} .mv-sticky{position:sticky;top:var(--nav-h);min-height:100svh; display:flex;flex-direction:column;justify-content:center;padding-block:var(--s7)} /* The step that has not arrived yet is marked, not dimmed: fading text to 24% put it at 1.4:1 against white, which no opacity value can rescue. Everything stays fully legible; the active step gains a rule and ink. */ .mv-step{ border-left:2px solid transparent;padding-left:var(--s5); transition:border-color .4s ease; } .mv-step .mv-num,.mv-step .mv-name{transition:color .4s ease} .mv-step:not([data-active="true"]) .mv-name{color:var(--navy-600)} .mv-step[data-active="true"]{border-left-color:var(--ink)} .mv-step[data-active="true"] .mv-num{color:var(--ink)} .mv-progress{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--navy-600);white-space:nowrap} /* ---------- workflow -> agent -> outcome ---------- */ .wao{margin-top:var(--s7);border-top:var(--hair)} .wao-head{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6); padding-block:var(--s3);border-bottom:var(--hair); } .wao-head span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)} .wao-row{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6); padding-block:var(--s5);border-bottom:var(--hair);align-items:center; } .wao-cell{opacity:0;transform:translateX(-12px); transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)} .wao-row.in .wao-cell{opacity:1;transform:none} .wao-row.in .wao-cell:nth-child(2){transition-delay:.14s} .wao-row.in .wao-cell:nth-child(3){transition-delay:.28s} .wao-outcome{display:flex;align-items:center;gap:var(--s3)} .wao-chip{ width:9px;height:9px;border-radius:50%;flex:none;background:var(--line); transition:background-color .4s ease .42s; } .wao-row.in .wao-chip{background:var(--green)} /* ---------- quarterly cycle ring ---------- pathLength="100" on every ring means one dash unit is one percent, so the three rings share the same timing maths regardless of their radii. */ .cycle{margin-top:var(--s7);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8);align-items:center} .cycle svg{width:100%;height:auto;overflow:visible} .cycle-stage{position:relative;width:min(420px,100%);justify-self:center} .cycle .c-track{fill:none;stroke:var(--line);stroke-width:2} .cycle .c-ring{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round; stroke-dasharray:0 100;transform:rotate(-90deg);transform-origin:center} .cycle .c-q{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round; stroke-dasharray:0 100;transform:rotate(-90deg);transform-origin:center} .cycle .c-q2{opacity:.6} .cycle .c-q3{opacity:.35} .cycle .c-node{fill:#fff;stroke:var(--line);stroke-width:2;transition:stroke .3s ease} .cycle .c-num{font-family:var(--mono);font-size:13px;fill:var(--navy-600); opacity:.35;transition:opacity .3s ease,fill .3s ease} .cycle .c-step[data-on="true"] .c-node{stroke:var(--accent)} .cycle .c-step[data-on="true"] .c-num{opacity:1;fill:var(--navy-800)} .cycle-centre{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:var(--s2);pointer-events:none; } .cycle-q{font-size:2.75rem;line-height:1;letter-spacing:-.03em} .cycle-gain{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:var(--accent-ink)} .cycle-cap{margin-top:var(--s5);font-family:var(--mono);font-size:.6875rem; letter-spacing:.1em;text-transform:uppercase;color:var(--navy-600)} .cycle-steps{display:grid;gap:var(--s3);counter-reset:cyc} .cycle-steps li{ display:grid;grid-template-columns:2.25rem 1fr;gap:var(--s3);align-items:baseline; padding-bottom:var(--s3);border-bottom:var(--hair); transition:border-color .4s ease; } .cycle-steps li[data-on="true"]{border-bottom-color:var(--accent)} .cycle-steps li[data-on="true"]::before{color:var(--accent-ink)} .cycle-steps li::before{ counter-increment:cyc;content:"0" counter(cyc); font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--navy-600); } @media (prefers-reduced-motion:reduce){ .cycle .c-num{opacity:1} } /* ---------- proof numbers ---------- */ /* ---------- pull quote ---------- */ .quote{max-width:36ch;margin-inline:auto;text-align:left} .quote blockquote{ margin:0;font-family:var(--display);font-size:clamp(1.75rem,3.6vw,3rem); line-height:1.1;letter-spacing:-.02em; } .quote figcaption{ margin-top:var(--s5);font-family:var(--mono);font-size:.75rem; letter-spacing:.14em;text-transform:uppercase;color:var(--navy-600); } /* ---------- content slot / brackets ---------- */ .slot{ border:1px dashed var(--navy-600);border-radius:3px; padding:var(--s8);background:var(--paper);display:grid;gap:var(--s3);justify-items:start; } .slot-tag{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-ink)} .slot-title{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.08;letter-spacing:-.018em;margin:0;color:var(--navy-600)} .slot-note{margin:0;color:var(--muted);font-size:1rem;max-width:56ch} /* ---------- workshop steps strip ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);margin-top:var(--s7)} .step{border-top:var(--hair);padding-top:var(--s4)} .step-n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)} .step h3{margin:var(--s2) 0 var(--s2);font-family:var(--display); font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.1} .step p{margin:0;color:var(--muted);font-size:1rem} /* ---------- FAQ ---------- */ .faq{margin-top:var(--s7);border-top:var(--hair)} .faq details{border-bottom:var(--hair)} .faq summary{ cursor:pointer;list-style:none;padding-block:var(--s5); display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5); font-family:var(--display);font-size:clamp(1.125rem,1.9vw,1.5rem);line-height:1.2; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);font-size:1.1rem;color:var(--navy-600);flex:none} .faq details[open] summary::after{content:"–"} .faq-a{padding-bottom:var(--s5);color:var(--muted);max-width:64ch} /* the answers are several paragraphs now, and one of them carries a list */ .faq-a p + p{margin-top:var(--s4)} .faq-a ul{margin:var(--s4) 0 0;padding-left:1.15rem;display:grid;gap:var(--s2)} .faq-a li{list-style:disc} /* ---------- founders ---------- */ .founders{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s7)} .founder{border:var(--hair);border-radius:4px;overflow:hidden;background:#fff} .founder-btn{ width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left; cursor:pointer;padding:var(--s6);display:grid;gap:var(--s3); } .founder-portrait{ width:100%;aspect-ratio:4/5;background:var(--paper);border:1px dashed var(--navy-600); display:grid;place-items:center;color:var(--navy-600); font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase; } .founder h3{font-family:var(--display);font-size:clamp(1.375rem,2.2vw,1.9rem);line-height:1.05} .founder-role{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)} .founder-lead{color:var(--muted);font-size:1rem;margin:0} .founder-more{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.7,.3,1); } .founder[data-open="true"] .founder-more{grid-template-rows:1fr} .founder-more > div{overflow:hidden} .founder-more p{padding:0 var(--s6) var(--s6);color:var(--muted);font-size:1rem;margin:0} .founder-toggle{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase; color:var(--accent-ink); } /* ---------- pillars, glance, offices ---------- */ .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s7);margin-top:var(--s7)} .pillar{border-top:var(--hair);padding-top:var(--s4)} .pillar h3{font-family:var(--display);font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.1;margin-bottom:var(--s2)} .pillar p{margin:0;color:var(--muted);font-size:1rem} .glance{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);margin-top:var(--s7); border-top:var(--hair);padding-top:var(--s5)} .glance dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)} .glance dd{margin:var(--s2) 0 0;font-size:1rem} .offices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s7)} .office{border:var(--hair);border-radius:4px;padding:var(--s6);display:grid;gap:var(--s2)} .office h3{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1} .office-note{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)} .office-addr{color:var(--muted);font-size:1rem;margin:0} .office-time{font-family:var(--mono);font-size:.8125rem;color:var(--navy-600); font-variant-numeric:tabular-nums} /* ---------- contact ---------- */ .copy-email{ display:inline-flex;align-items:center;gap:var(--s3); font-family:var(--mono);font-size:clamp(.9375rem,1.6vw,1.25rem); background:none;border:var(--hair);border-radius:3px;padding:var(--s4) var(--s5); cursor:pointer;color:var(--ink);transition:border-color .2s ease,background-color .2s ease; } .copy-email:hover{border-color:var(--navy-600);background:var(--paper)} /* the address is one long unbreakable token; on a 320px screen the button is wider than the window unless it is allowed to give */ @media (max-width:400px){ .copy-email{ max-width:100%;padding:var(--s3) var(--s4); font-size:.875rem;overflow-wrap:anywhere;text-align:left; } } .copy-email-status{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--green);min-height:1em;display:block;margin-top:var(--s3)} .form{display:grid;gap:var(--s5);max-width:44rem;margin-top:var(--s7)} .field{display:grid;gap:var(--s2)} .field label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)} .field input,.field textarea{ font:inherit;color:var(--ink);background:#fff; border:var(--hair);border-radius:3px;padding:var(--s3) var(--s4); transition:border-color .2s ease; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--navy-600)} .field input:user-invalid,.field textarea:user-invalid{border-color:var(--accent-ink)} .field-error{font-size:.875rem;color:var(--accent-ink);min-height:1em} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-status{font-size:1rem;min-height:1.5em} .form[data-state="sending"] button[type=submit]{opacity:.6;pointer-events:none} /* ---------- newsletter ---------- */ .newsletter{margin:var(--s7) 0 0;display:grid;gap:var(--s3);max-width:32rem} .newsletter-label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)} .newsletter-row{display:flex;gap:var(--s2)} .newsletter-input{flex:1;font:inherit;border:var(--hair);border-radius:3px; padding:var(--s3) var(--s4);background:#fff;color:var(--ink)} .newsletter-note{font-size:.875rem;color:var(--muted);margin:0} /* ---------- insights: the article itself ---------- */ .article{max-width:38rem;margin-inline:auto} .article p{margin:0 0 var(--s5);color:var(--navy-800)} .article h2{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.06;margin:var(--s8) 0 var(--s4)} .article blockquote{ margin:var(--s8) 0;padding-left:var(--s5);border-left:2px solid var(--accent); font-family:var(--display);font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.18; } .article figure{margin:var(--s8) 0} .article figcaption{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600);margin-top:var(--s3)} .article-meta{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600);margin-bottom:var(--s5)} .img-placeholder{ aspect-ratio:16/9;background:var(--paper);border:1px dashed var(--navy-600); display:grid;place-items:center;color:var(--navy-600); font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase; } /* ---------- testimonials + logo wall (dormant) ---------- */ .testimonial{max-width:40ch;margin-top:var(--s7)} .logo-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:var(--s6);margin-top:var(--s7);align-items:center} .logo-slot{aspect-ratio:5/2;border:1px dashed var(--navy-600);display:grid;place-items:center; color:var(--navy-600);font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase} /* ---------- closing CTA + faint field echo ---------- */ .close{position:relative;isolation:isolate} .close-echo{ position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4; -webkit-mask-image:radial-gradient(60% 70% at 78% 50%,#000 0%,transparent 72%); mask-image:radial-gradient(60% 70% at 78% 50%,#000 0%,transparent 72%); } .close-echo canvas{width:100%;height:100%;display:block} /* ---------- footer ---------- */ .foot{border-top:var(--hair);padding-block:var(--s9) var(--s7)} .foot-tag{ font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.06;letter-spacing:-.018em;margin:0 0 var(--s8);max-width:24ch; } .foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7); border-top:var(--hair);padding-top:var(--s6)} .foot-h{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600);margin:0 0 var(--s4)} .foot-list{display:grid;gap:var(--s2);font-size:1rem;color:var(--muted)} /* a thumb needs more than the line box to aim at */ @media (max-width:900px){ .foot-list{gap:var(--s3)} .foot-list a{display:inline-block;padding-block:.35rem} } .foot-list a{text-decoration:none;color:var(--ink)} .foot-list a:hover{text-decoration:underline;text-underline-offset:3px} .foot-legal{ margin-top:var(--s7);padding-top:var(--s5);border-top:var(--hair); display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5); font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--navy-600); } /* ---------- 404 ---------- */ .oops{min-height:70svh;display:grid;align-content:center;gap:var(--s5)} /* ---------- responsive ---------- */ @media (max-width:1024px){ .case-head,.sc-grid,.cycle,.founders,.offices{grid-template-columns:1fr} .sigs,.steps,.pillars{grid-template-columns:1fr 1fr} .glance{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ :root{--section:clamp(3.5rem,7vh + 2rem,5.5rem)} .sigs,.steps,.pillars,.glance,.foot-grid{grid-template-columns:1fr} .voice{grid-template-columns:1fr;gap:var(--s2);padding-block:var(--s5)} .mv{grid-template-columns:3rem 1fr;grid-template-areas:"num name" "num meta" ". desc"} .wao-head{display:none} .wao-row{grid-template-columns:1fr;gap:var(--s2)} .hero .lede{max-width:100%} .kinetic-lines li:nth-child(2),.kinetic-lines li:nth-child(3){padding-left:0} } /* ---------- reduced motion: everything lands composed ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .rv{opacity:1;transform:none} .kmask > span{transform:none} .kinetic-rule{transform:scaleX(1)} .sc-resolve .dot{background:var(--green)} .wao-cell{opacity:1;transform:none} .wao-chip{background:var(--green)} .cycle .c-ring{stroke-dashoffset:0} .cycle .c-node,.cycle .c-num{opacity:1} .mv-step{opacity:1;filter:none} .mv-sticky{position:static;min-height:0} .t-core-halo{opacity:.34;animation:none} .target-tilt{transform:none} .scroll-progress{display:none} } /* ---------- print: clean single column ---------- */ @media print{ .nav,.foot-grid,.scroll-progress,.announce,.hero-field,.hero-veil, .close-echo,.skip-link,.sc-demo,.newsletter,.form{display:none!important} body{font-size:11pt;color:#000;background:#fff} main > section{padding-block:1.5rem;break-inside:avoid} .shell{width:100%} h1.display{font-size:28pt} h2.display{font-size:20pt} .display,.voice-q,.pull,.quote blockquote{font-family:Georgia,serif} .sigs,.steps,.pillars,.offices,.founders,.glance,.sc-grid,.cycle{ grid-template-columns:1fr!important;gap:1rem!important} .rv{opacity:1!important;transform:none!important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444} .foot{border-top:1px solid #999;padding-block:1rem} } /* ---------- screen-reader-only ---------- The count-up spans are aria-hidden; this is where the real value lives. */ .vh{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* ---------- Microsoft band ---------- */ .ms-band{position:relative;background:var(--paper);padding-block:var(--s7)} /* the hairline draws in, the same left-to-right gesture as .link-quiet::after */ .ms-band::before{ content:"";position:absolute;inset-inline:0;top:0;height:1px;background:var(--ink); transform:scaleX(0);transform-origin:left; transition:transform .6s cubic-bezier(.2,.7,.3,1); } .ms-band.in::before{transform:scaleX(1)} .ms-band-in{ display:grid;grid-template-columns:minmax(0,1fr) 18rem; gap:var(--s7);align-items:center; } .ms-band-h{ font-family:var(--display);font-size:clamp(1.375rem,2.2vw,1.875rem); line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--s3); } .ms-band-copy p{margin:0;max-width:62ch;color:var(--muted);font-size:1.0625rem} .ms-band-lockup{display:block;width:auto;height:auto;max-width:14rem;max-height:5.5rem;justify-self:start} .ms-band-logo{ font-family:var(--mono);font-size:.75rem;line-height:1.5; color:var(--navy-600);border:1px dashed var(--line); padding:var(--s4);border-radius:2px; } @media (max-width:900px){ .ms-band-in{grid-template-columns:1fr;gap:var(--s5)} } @media (prefers-reduced-motion:reduce){ .ms-band::before{transform:scaleX(1);transition:none} } /* ========================================================================== HOME — four questions, difference wipe, relay ========================================================================== */ /* ---------- difference-wipe ---------- */ #diffGrid{position:relative} .diff-wipe{position:absolute;top:0;bottom:0;left:0;width:100%;pointer-events:none} .diff-wipe::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:1px; background:var(--accent);opacity:0; } #diffGrid.wiping .diff-wipe::after{animation:diffWipe 1400ms cubic-bezier(.4,0,.2,1) forwards} @keyframes diffWipe{ 0%{left:0;opacity:0} 12%{opacity:.9} 88%{opacity:.9} 100%{left:100%;opacity:0} } /* The left column does not vanish. It goes grey — it becomes the past. */ .sc-past{transition:color .8s ease} #diffGrid.wiped .sc-past{color:var(--muted)} #diffGrid.wiped .sc-past .dot{background:var(--line)} .sc-resolve{transition:color .8s ease} #diffGrid:not(.wiped) .sc-resolve{color:var(--muted)} /* ---------- signature-relay ---------- */ #sigRelay{position:relative;padding-top:var(--s5)} .relay-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);overflow:hidden} .relay-pulse{ position:absolute;top:0;left:0;width:40px;height:1px;background:var(--accent); transform:translateX(-40px); } #sigRelay.in .relay-pulse{animation:relay 1400ms cubic-bezier(.4,0,.2,1) 0s 1 forwards} #sigRelay.in.looping .relay-pulse{animation:relay 1400ms cubic-bezier(.4,0,.2,1) 0s infinite;animation-delay:0s} @keyframes relay{ from{transform:translateX(-40px)} to{transform:translateX(calc(var(--rail, 100vw) + 40px))} } /* ---------- Brown Strauss proof ---------- */ .bs-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--s8);align-items:start;margin-top:var(--s6)} .bs-copy h2{font-size:clamp(1.875rem,3.8vw,3rem);line-height:1.05;letter-spacing:-.025em;max-width:20ch;margin:0 0 var(--s5)} .bs-copy .body-copy{margin-top:var(--s5)} .quote-client{margin:var(--s7) 0 0;padding:var(--s5) 0 0;border-top:2px solid var(--ink)} .quote-client blockquote{ margin:0;font-family:var(--display);font-size:clamp(1.125rem,1.8vw,1.5rem); line-height:1.25;letter-spacing:-.01em; } .quote-client figcaption{ margin-top:var(--s4);font-family:var(--mono);font-size:.75rem; letter-spacing:.1em;color:var(--navy-600); } /* ---------- adoption-arc ---------- pathLength="100" makes the dash values read as percentages: the visible track is 75 of 100 units, which is the 270° sweep. */ .arc{position:relative;margin:0;width:min(320px,100%);justify-self:end} .arc svg{display:block;width:100%;height:auto;overflow:visible} .arc-track{fill:none;stroke:var(--line);stroke-width:9; stroke-dasharray:75 100;stroke-linecap:butt} .arc-fill{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:butt; stroke-dasharray:0 100} .arc-tick{stroke-width:2} .arc-tick-jun{stroke:var(--navy-600)} .arc-tick-aug{stroke:var(--accent)} .arc-centre{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;pointer-events:none; } .arc-n{font-size:clamp(2.25rem,4vw,3.5rem);line-height:1;letter-spacing:-.03em} .arc figcaption{ margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4); font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--navy-600); } .arc-legend{display:inline-flex;align-items:center;gap:.4em} .arc-key{width:10px;height:2px;display:inline-block} .arc-key-jun{background:var(--navy-600)} .arc-key-aug{background:var(--accent)} .arc-sub{flex-basis:100%;color:var(--muted);letter-spacing:.08em} /* ========================================================================== RESULTS INDEX + CASE STUDY ========================================================================== */ /* ---------- results: the story index ---------- */ .stories{list-style:none;margin:var(--s8) 0 0;padding:0;display:grid;gap:var(--s7)} .story{border-top:2px solid var(--ink);padding-top:var(--s5);max-width:64ch} .story h2{font-size:clamp(2rem,4vw,3.25rem);line-height:1;letter-spacing:-.03em;margin:var(--s3) 0 var(--s4)} .story-lede{margin:0;font-size:1.1875rem;color:var(--muted);max-width:52ch} .story-tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0;padding:0} .story-tags li{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase; border:var(--hair);padding:.4em .7em;color:var(--navy-600);border-radius:2px; } .story-more{margin-top:var(--s5)} /* ========================================================================== HOW WE ENGAGE — the approach, as a scrollable dashboard ========================================================================== The deck this came from is dark navy throughout. The site is white with navy ink, so the page is white and spends the deck's darkness in exactly two places: the opening and the Quarterly Cycle. Two dark moments read as deliberate; twelve would read as a different website. Brand orange is #E8401B, which measures 3.57:1 on the navy ground — fine for display type, short of AA for anything smaller. Rather than police which orange goes where, dark grounds get one lighter tint that clears 5.4:1 at every size. */ :root{ --accent-on-navy:#FF7A57; --navy-ground:#0A2533; --navy-panel:#12303F; } /* ---------- the chapter rail ---------- The dashboard's own chrome, and it has to live in the page gutter, which is 5rem at 1440px. So it is a column of numbers about 2rem wide, and the label slides out only on hover or keyboard focus. A labelled rail wide enough to read at rest would sit on top of the text. It stays hidden over the opening: that screen should be uninterrupted. Every entry is a plain anchor, so the page works with this switched off. */ .rail{ display:none;position:fixed;left:var(--s4);top:50%;transform:translateY(-50%); z-index:40;opacity:0;pointer-events:none;transition:opacity .35s ease; } .rail[data-ready="true"]{opacity:1;pointer-events:auto} .rail-list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem} .rail-list a{ position:relative;display:flex;align-items:center;gap:var(--s3); padding:.28rem 0 .28rem .5rem;text-decoration:none; border-left:2px solid var(--line); transition:border-color .25s ease; } .rail-n{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em; color:var(--muted);transition:color .25s ease; } /* the label is the second span; it is laid out but clipped until wanted */ .rail-list a > span + span{ position:absolute;left:2.4rem;white-space:nowrap; font-size:.875rem;line-height:1.2;color:var(--ink); background:var(--bg);border:var(--hair);border-radius:2px; padding:.25rem var(--s3); opacity:0;transform:translateX(-4px);pointer-events:none; transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.3,1); } .rail-list a:hover > span + span, .rail-list a:focus-visible > span + span{opacity:1;transform:none} .rail-list a:hover{border-left-color:var(--navy-600)} .rail-list a:hover .rail-n{color:var(--navy-600)} .rail-list a[data-on="true"]{border-left-color:var(--accent)} .rail-list a[data-on="true"] .rail-n{color:var(--accent-ink)} .rail-list a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} /* over the two full-bleed navy sections the rail would vanish, so it flips */ /* the rail is fixed over a navy section painted by a sibling, so walking ancestors for the ground finds the white page. Tell the audit what is actually behind it. */ .rail[data-invert="true"]{--audit-bg:#0A2533} .rail[data-invert="true"] .rail-list a{border-left-color:rgba(255,255,255,.22)} .rail[data-invert="true"] .rail-n{color:rgba(255,255,255,.62)} .rail[data-invert="true"] .rail-list a:hover{border-left-color:rgba(255,255,255,.6)} .rail[data-invert="true"] .rail-list a:hover .rail-n{color:#fff} .rail[data-invert="true"] .rail-list a[data-on="true"]{border-left-color:var(--accent-on-navy)} .rail[data-invert="true"] .rail-list a[data-on="true"] .rail-n{color:var(--accent-on-navy)} /* the orange full stop the deck sets after a headline. Not .dot — that is the scorecard's 9px status circle and the two collide badly. */ .stop{color:var(--accent-ink)} .dash-h1 .stop{color:var(--accent-on-navy)} /* ---------- act dividers ---------- */ .act{ display:flex;align-items:baseline;gap:var(--s4); margin-top:var(--s7);padding-bottom:var(--s3);border-bottom:var(--hair); } .act-n{ margin:0;font-family:var(--mono);font-size:.75rem;letter-spacing:.16em; color:var(--accent-ink); } .act-name{ margin:0;font-family:var(--mono);font-size:.75rem;letter-spacing:.16em; text-transform:uppercase;color:var(--navy-600); } .dash-intro{padding-top:var(--s5)} /* ---------- what the CEO gets: six cards ---------- */ .gets{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7)} .get{border-top:var(--hair);padding-top:var(--s4)} .get-ico{ width:1.75rem;height:1.75rem;display:block;margin-bottom:var(--s4); fill:none;stroke:var(--accent-ink);stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round; } .get h3{ font-family:var(--display);font-size:clamp(1.125rem,1.9vw,1.4rem); line-height:1.12;margin:0 0 var(--s2); } .get p{margin:0;color:var(--muted);font-size:1rem} /* ---------- colour on white ---------- The page used to spend two full-bleed navy sections. Without them it needs colour that is not a ground: tinted panels, a warm rule, and cards that carry the accent themselves. */ .page-approach .dash-intro h1{max-width:20ch} .page-approach .dash-intro::after{ content:"";display:block;width:5rem;height:3px;margin-top:var(--s6); background:linear-gradient(to right,var(--accent),var(--ask-box)); } /* the six cards: each one on its own tinted card rather than a hairline */ .page-approach .gets{gap:var(--s4)} .page-approach .get{ border:var(--hair);border-top:2px solid var(--accent);border-radius:3px; background:var(--paper);padding:var(--s5); transition:background-color .3s ease,border-color .3s ease; } .page-approach .get:hover{background:#fff;border-color:var(--accent)} .page-approach .get:nth-child(3n+2){border-top-color:var(--accent-ink)} .page-approach .get:nth-child(3n+3){border-top-color:var(--navy-600)} .page-approach .get-ico{stroke:var(--accent-ink)} /* the cycle, on a warm panel instead of navy */ .page-approach #cycle{ background:var(--warn-wash);border-block:1px solid var(--ask-box-sub); } /* the phases: give the spine and its nodes some colour to travel through */ .page-approach .move-n{border-color:var(--ask-box)} .page-approach .move:nth-child(2) .move-n{border-color:var(--ask-box-sub)} .page-approach .move:nth-child(3) .move-n{border-color:var(--accent-ink);color:var(--accent-ink)} .page-approach .move:last-child .move-n{background:var(--accent);border-color:var(--accent);color:#fff} /* ---------- responsive ---------- */ @media (min-width:1180px){ .rail{display:block} } @media (max-width:900px){ .chap{padding-block:var(--s7)} .chap-grid{grid-template-columns:1fr;gap:var(--s6)} .vs{grid-template-columns:1fr;gap:var(--s7)} .gets{grid-template-columns:1fr 1fr} .dash-strap{gap:var(--s2) var(--s4);font-size:.75rem} } @media (max-width:620px){ .gets,.fourup,.kpis{grid-template-columns:1fr} .kpi-lead{grid-column:auto} .dash-ghost{font-size:clamp(4rem,26vw,9rem)} } @media (prefers-reduced-motion:reduce){ .rail-list a{transition:none} } /* ========================================================================== FOUR MOVEMENTS — a vertical journey ========================================================================== This was a pinned horizontal track: the page held still while four panels travelled sideways. It reads as a plain vertical list now. The spine down the left is what carries "one journey" instead — the numbers are stops on it, and the last one has nowhere further to go, which is the point. Nothing here is pinned and nothing waits on scroll position, so there is no static fallback to maintain and no behaviour to tear down. */ /* margin-top only: the margin shorthand would set margin-inline to 0 and cancel the auto-centring .shell puts on this same element. */ .moves{list-style:none;margin-top:var(--s6);padding:0;display:grid;gap:0} .move{ position:relative;display:grid;grid-template-columns:5.5rem 1fr; gap:var(--s5);padding-block:var(--s6); } .move + .move{border-top:var(--hair)} /* the spine: one line through every stop, stopping at the last */ .move::before{ content:"";position:absolute;left:1.55rem;top:0;bottom:0; width:1px;background:var(--line); } .move:first-child::before{top:var(--s6)} .move:last-child::before{bottom:calc(100% - var(--s6))} .move-n{ position:relative;z-index:1;display:grid;place-items:center; width:3.25rem;height:3.25rem;border-radius:50%; background:var(--bg);border:1px solid var(--line); font-family:var(--mono);font-size:.875rem;letter-spacing:.06em; color:var(--navy-600); } .move:last-child .move-n{border-color:var(--accent);color:var(--accent-ink)} .move-name{ font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.025em; margin:0 0 var(--s2); } .move-tag{ margin:0 0 var(--s4);font-family:var(--mono);font-size:.6875rem; letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink); } .move-desc{margin:0 0 var(--s4);max-width:52ch;color:var(--navy-800)} .move-list{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s5); } .move-list li{ position:relative;padding-left:var(--s4); font-size:1rem;color:var(--muted); } .move-list li::before{ content:"";position:absolute;left:0;top:.62em; width:7px;height:1px;background:var(--accent); } @media (max-width:760px){ .move{grid-template-columns:2.75rem 1fr;gap:var(--s4)} .move::before{left:1.05rem} .move-n{width:2.25rem;height:2.25rem;font-size:.75rem} .move-list{grid-template-columns:1fr} } /* ---------- article extras ---------- */ .article-kicker{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-ink);margin:0 0 var(--s4); } .article-sub{ margin:var(--s4) 0 0;font-size:1.375rem;line-height:1.35;color:var(--muted); } .article-cite{ margin:calc(var(--s5) * -1) 0 var(--s6);font-family:var(--mono); font-size:.6875rem;letter-spacing:.1em;color:var(--navy-600);line-height:1.6; } .article ul{margin:0 0 var(--s5) var(--s5);padding:0;color:var(--navy-800)} .article ul li{margin-bottom:var(--s3)} .article-next{margin-top:var(--s8);padding-top:var(--s5);border-top:2px solid var(--ink)} /* pull-quote-scale: the quote arrives rather than simply being there */ .article blockquote{ opacity:0;transform:scale(.96); transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1); } .article blockquote.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .article blockquote{opacity:1;transform:none;transition:none} } /* ========================================================================== ORGANIZATION OF THE FUTURE ========================================================================== */ /* This page is an article, not a landing page: the sections are its sub-headings, so they sit closer together than the site's default band. */ .page-oof main > section{--section:clamp(2.5rem, 4vh + 1.5rem, 4rem)} .page-oof .oof-cols{gap:var(--s7)} .oof-hero{padding-top:calc(var(--nav-h) + var(--s6))} .oof-hero h1{font-size:clamp(2.25rem,5vw,4.25rem);line-height:.98;letter-spacing:-.03em;max-width:18ch} .oof-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);margin-top:var(--s7)} .oof-cols .body-copy + .body-copy{margin-top:var(--s5)} /* ---------- maturity-climb ---------- */ .climb{margin-top:var(--s7)} .climb-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center} .climb-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)} .climb-step{border-left:2px solid var(--line);padding-left:var(--s5); transition:border-color .4s ease} .climb-step[data-on="true"]{border-left-color:var(--accent)} .climb-step h3{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.125rem); line-height:1.05;letter-spacing:-.02em;margin:var(--s3) 0 var(--s3)} .climb-step p{margin:0;color:var(--muted);max-width:44ch} .climb-svg{width:100%;height:auto;overflow:visible} .cl-p{fill:var(--line);transition:fill .4s ease} .cl-p[data-on="true"]{fill:var(--ink)} .cl-r{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4} .cl-marker{fill:var(--accent);transition:cx .5s cubic-bezier(.2,.7,.3,1),cy .5s cubic-bezier(.2,.7,.3,1)} .cl-bridge line{stroke:var(--accent);stroke-width:2; stroke-dasharray:100;stroke-dashoffset:100; transition:stroke-dashoffset .8s ease-out} .cl-bridge text{font-family:var(--mono);font-size:11px;letter-spacing:.1em; fill:var(--accent-ink);opacity:0;transition:opacity .4s ease .4s} .cl-bridge[data-on="true"] line{stroke-dashoffset:0} .cl-bridge[data-on="true"] text{opacity:1} /* ---------- the five board questions ---------- */ .oof-q{margin:var(--s8) 0 0} .oof-q-row{border-top:var(--hair);padding:var(--s5) 0; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)} .oof-q dt{font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.75rem); line-height:1.15;letter-spacing:-.02em} .oof-q dd{margin:0;color:var(--muted)} @media (max-width:900px){ .oof-cols,.climb-grid,.oof-q-row{grid-template-columns:1fr;gap:var(--s5)} .climb-stage{order:-1} } @media (prefers-reduced-motion:reduce){ .cl-marker,.cl-p,.cl-bridge line,.cl-bridge text{transition:none!important} } /* the point-of-view hub, promoted on the Insights index */ .pov{margin-top:var(--s8);border-top:2px solid var(--ink);padding-top:var(--s5);max-width:56ch} .pov h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.05;letter-spacing:-.025em; margin:var(--s3) 0 var(--s4)} /* ========================================================================== MANUFACTURING — tagged workflow table, the money story, the DSO slider ========================================================================== */ /* a fourth column, only on the tagged table */ .wao-tagged .wao-head, .wao-tagged .wao-row{grid-template-columns:1fr 1.3fr 1.5fr 7rem} .wao-tag{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase; color:var(--navy-600);display:flex;align-items:center;gap:.5em;justify-content:flex-end; } .wao-tag::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 auto; } .wao-tag[data-status="deployed"]{color:var(--green)} .wao-tag[data-status="deployed"]::before{background:var(--green)} .money-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);margin-top:var(--s6)} /* ---------- dso-slider ---------- */ .dso{ margin-top:var(--s8);display:grid;grid-template-columns:minmax(0,1fr) 220px; gap:var(--s8);align-items:start;border-top:2px solid var(--ink);padding-top:var(--s6); } .dso-out{ margin:0 0 var(--s6);font-size:clamp(2.5rem,6vw,4.5rem);line-height:.95;letter-spacing:-.03em; } .dso-controls{display:grid;gap:var(--s5);max-width:34rem} .dso-field{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);align-items:center} .dso-field label{grid-column:1/-1;color:var(--navy-600)} .dso-range{ appearance:none;width:100%;height:2px;background:var(--line);border-radius:1px;outline-offset:6px; } .dso-range::-webkit-slider-thumb{ appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent); border:2px solid #fff;cursor:pointer;box-shadow:0 0 0 1px var(--line); } .dso-range::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;background:var(--accent); border:2px solid #fff;cursor:pointer;box-shadow:0 0 0 1px var(--line); } .dso-val{color:var(--ink);font-variant-numeric:tabular-nums;min-width:5.5rem;text-align:right} /* the caveat is part of the control, not a footnote and never a tooltip */ .dso-caveat{ margin-top:var(--s5);max-width:56ch;font-family:var(--mono);font-size:.6875rem; line-height:1.7;letter-spacing:.06em;color:var(--navy-600); border-left:2px solid var(--accent);padding-left:var(--s4); } .dso-side{list-style:none;margin:var(--s6) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} .dso-side li{display:grid;gap:var(--s2);border-top:var(--hair);padding-top:var(--s3)} .dso-s{font-family:var(--display);font-size:1.1875rem;letter-spacing:-.01em} /* the pile, and the part of it that leaves */ .dso-viz{margin:0} .dso-stack{ display:flex;flex-direction:column;justify-content:flex-end;gap:6px; height:260px; } .dso-held,.dso-freed{ display:block;position:relative;border-radius:2px; transition:height .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1); } .dso-held{background:var(--paper);border:var(--hair);flex:1 1 auto} .dso-freed{background:var(--accent);height:14%;transform:translateX(18px)} .dso-held em,.dso-freed em{ position:absolute;left:var(--s3);top:50%;transform:translateY(-50%); font-style:normal;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em; text-transform:uppercase; } .dso-held em{color:var(--navy-600)} .dso-freed em{color:var(--accent-ink);left:auto;right:calc(100% + var(--s3));white-space:nowrap} .dso-viz figcaption{margin-top:var(--s3);color:var(--navy-600)} .dso-static{border-collapse:collapse;margin-top:var(--s5);font-size:1rem} .dso-static caption{text-align:left;color:var(--navy-600);font-size:.875rem;padding-bottom:var(--s3)} .dso-static th,.dso-static td{border-top:var(--hair);padding:var(--s3) var(--s5) var(--s3) 0;text-align:left} @media (max-width:900px){ .money-cols{grid-template-columns:1fr;gap:var(--s5)} .dso{grid-template-columns:1fr;gap:var(--s6)} .dso-side{grid-template-columns:1fr} .wao-tagged .wao-head,.wao-tagged .wao-row{grid-template-columns:1fr} .wao-tag{justify-content:flex-start} } @media (prefers-reduced-motion:reduce){ .dso-held,.dso-freed{transition:none} } /* ========================================================================== AI READINESS INDEX ========================================================================== */ .ri{margin-top:var(--s7);border-top:2px solid var(--ink);padding-top:var(--s6)} .ri-privacy{ margin-top:var(--s5);max-width:52ch;font-family:var(--mono);font-size:.6875rem; line-height:1.7;letter-spacing:.06em;color:var(--navy-600); } .ri-dots{list-style:none;display:flex;gap:6px;margin:0 0 var(--s4);padding:0} .ri-dots li{width:100%;max-width:2.5rem;height:2px;background:var(--line);transition:background .3s} .ri-dots li[data-state="done"]{background:var(--accent)} .ri-dots li[data-state="now"]{background:var(--ink)} .ri-count{color:var(--navy-600)} .ri-card{border:0;margin:var(--s5) 0 0;padding:0;min-width:0} .ri-q{ font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.1;letter-spacing:-.02em; padding:0;max-width:28ch; } .ri-options{display:grid;gap:var(--s2);margin-top:var(--s6);max-width:44rem} .ri-opt{ appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer; border:var(--hair);background:#fff;border-radius:2px; padding:var(--s4) var(--s5);transition:border-color .2s ease,background .2s ease; } .ri-opt:hover{border-color:var(--navy-600)} .ri-opt[aria-checked="true"]{border-color:var(--accent);background:var(--paper)} .ri-nav{display:flex;justify-content:space-between;align-items:center; gap:var(--s4);margin-top:var(--s6);max-width:44rem} .ri-back{background:none;border:0;font:inherit;cursor:pointer;padding:0} .ri-back:disabled{opacity:0;pointer-events:none} /* ---------- the result ---------- */ .ri-result{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s8); align-items:center;margin-top:var(--s5)} .ri-dial-wrap{position:relative} .ri-dial{width:100%;height:auto;display:block;overflow:visible} .ri-arc{fill:none;stroke:var(--line);stroke-width:12;stroke-linecap:butt; transition:stroke .4s ease} .ri[data-band="try"] .ri-arc-try, .ri[data-band="build"] .ri-arc-build, .ri[data-band="scale"] .ri-arc-scale, .ri[data-band="optimize"] .ri-arc-optimize{stroke:var(--accent)} .ri-needle{transform-origin:120px 130px;transform:rotate(-90deg)} .ri-needle line{stroke:var(--ink);stroke-width:3;stroke-linecap:round} .ri-needle circle{fill:var(--ink)} .ri-score{ margin:var(--s4) 0 0;text-align:center; font-size:3rem;line-height:1;letter-spacing:-.03em; } .ri-verdict h3{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.25rem); line-height:1.05;letter-spacing:-.02em;margin:var(--s3) 0 var(--s4)} .ri-verdict .body-copy{max-width:48ch} /* the ask arrives after the answer, never before it */ .ri-ask{margin-top:var(--s6);border-top:var(--hair);padding-top:var(--s5)} .ri-ask-h{margin:0 0 var(--s4);font-size:1.0625rem;max-width:44ch} .ri-form{display:grid;grid-template-columns:1fr auto;gap:var(--s3); align-items:end;max-width:34rem} .ri-form label{grid-column:1/-1;color:var(--navy-600)} .ri-form input[type="email"]{ font:inherit;padding:var(--s3) var(--s4);border:var(--hair);border-radius:2px;background:#fff; } .ri-ask-note{margin:0;font-size:1rem;color:var(--muted)} .ri-ask-todo{display:block;margin-top:var(--s3);font-family:var(--mono); font-size:.6875rem;line-height:1.6;color:var(--navy-600)} .ri-static{margin-top:var(--s5);max-width:56ch;color:var(--muted)} .ri-static-bands{color:var(--ink)} @media (max-width:900px){ .ri-result{grid-template-columns:1fr;gap:var(--s6)} .ri-dial-wrap{max-width:280px} .ri-form{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .ri-needle,.ri-arc,.ri-opt,.ri-dots li{transition:none!important} } /* a button that reads as a link still needs the browser chrome removed */ button.link-quiet{background:none;border:0;font:inherit;color:inherit;padding:0;cursor:pointer} /* ---------- about: advisors and partner ecosystem ---------- */ .advisors{list-style:none;margin:var(--s7) 0 0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)} .advisors li{border-top:2px solid var(--ink);padding-top:var(--s4)} .advisors h3{font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.05; letter-spacing:-.02em;margin:0 0 var(--s3)} .advisor-role{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em; text-transform:uppercase;color:var(--navy-600)} .partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7);margin-top:var(--s7)} .partner-card{border-top:2px solid var(--ink);padding-top:var(--s4)} .partner-card h3{font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.05; letter-spacing:-.02em;margin:0 0 var(--s4)} .partner-card p{margin:0;color:var(--muted)} .partner-held{border-left:2px solid var(--accent);padding-left:var(--s4)} @media (max-width:900px){ .advisors,.partners{grid-template-columns:1fr} } /* the case study's numbered section labels are headings, set as mono labels */ .cs-h{font-weight:inherit;margin:0} /* The planes are translucent and stacked in depth, so every plane's contents were showing through every other one — five charts on top of each other. Only the plane in focus draws its contents; in the final aligned beat they all do, which is the point of that beat. */ .ly-plane .ly-viz, .ly-plane .ly-chips, .ly-plane .ly-figure{opacity:0;transition:opacity .35s ease} .ly-plane[data-on="true"] .ly-viz, .ly-plane[data-on="true"] .ly-chips, .ly-plane[data-on="true"] .ly-figure, .ly-planes[data-aligned="true"] .ly-viz, .ly-planes[data-aligned="true"] .ly-chips, .ly-planes[data-aligned="true"] .ly-figure{opacity:1} .ly-plane{background:rgba(255,255,255,.94)} /* ---------- Microsoft Solutions Partner badge ---------- Drawn rather than placed, so it stays sharp at any size. Everything is sized in em, so one font-size on the parent scales the whole lockup. Segoe UI is Microsoft's own face and is present on Windows; the site's own sans stands in everywhere else. */ .mspartner{ display:inline-flex;align-items:center;gap:.5em; font-family:"Segoe UI",var(--body);color:#737373; line-height:1.12;white-space:nowrap; } .mspartner-flag{width:2.5em;height:2.5em;flex:0 0 auto;display:block} .mspartner-type{display:flex;flex-direction:column} .mspartner-name{font-size:1.45em;font-weight:600;letter-spacing:-.012em} .mspartner-tier{font-size:1.12em;font-weight:400;letter-spacing:-.004em} /* in the hero strip */ .hero-strip .mspartner{font-size:1.425rem} /* in the Microsoft band, where there is room for it to sit larger */ .ms-band .mspartner{font-size:1.62rem} /* ========================================================================== THE FOUR QUESTIONS — somebody is asking them ========================================================================== Orange boxes, navy text. The solid brand orange cannot carry navy type — it measures 3.91:1 and needs 4.5 — so the boxes are the accent at 62% and 18%. Both clear AA comfortably, and the two tints do the hierarchy work alongside the type size. */ .ask-sprite{position:absolute;width:0;height:0;overflow:hidden} /* The right-hand beats start 40px to the right and slide in. Before the reveal fires that overhang is real and shows as a scrollbar at 900px, so the list clips it. clip rather than hidden: hidden would make this a scroll container and swallow the sticky behaviour further down. */ .ask-list{ list-style:none;margin:var(--s8) 0 0;padding:0; display:grid;gap:var(--s6); overflow-x:clip; } .ask{ display:grid;align-items:center;gap:var(--s6); grid-template-columns:minmax(0,10.5rem) minmax(0,1fr); max-width:52rem; } /* the beats alternate sides, and the odd ones sit off the left margin while the even ones push right, so the eye zig-zags down the page */ .ask[data-side="right"]{ grid-template-columns:minmax(0,1fr) minmax(0,10.5rem); margin-left:auto; } .ask[data-side="right"] .ask-fig{order:2} /* ---------- the figures ---------- */ .ask-fig{ width:100%;max-width:10rem;height:auto;display:block;justify-self:center; } /* Every shape carries its own fill attribute, so the stylesheet sets only the colour — inherited, and therefore the one thing that reaches inside the shadow tree. */ .ask-fig{color:var(--ink)} /* drawn facing right; the right-hand beats are mirrored so every figure faces the boxes it is speaking into */ .ask[data-side="right"] .ask-fig{transform:scaleX(-1)} /* ---------- what they say ---------- */ .ask-says{position:relative;display:grid;gap:var(--s3);justify-items:start} .ask[data-side="right"] .ask-says{justify-items:end;text-align:right} /* the leader line, standing in for a speech-bubble tail: it ties the boxes to the person without going cartoonish */ .ask-says::before{ content:"";position:absolute;top:1.9rem;width:var(--s6);height:2px; background:var(--ask-box); left:calc(var(--s6) * -1); } .ask[data-side="right"] .ask-says::before{left:auto;right:calc(var(--s6) * -1)} .ask-q,.ask-sub{margin:0;border-radius:14px;color:var(--ink)} .ask-q{ background:var(--ask-box); font-family:var(--display); font-size:clamp(1.5rem,2.9vw,2.25rem);line-height:1.12;letter-spacing:-.02em; padding:var(--s4) var(--s5); } .ask-sub{ background:var(--ask-box-sub); font-size:1.0625rem;line-height:1.35; padding:var(--s3) var(--s5);max-width:34ch; } /* ---------- entry ---------- */ .ask{ opacity:0;transform:translateX(-40px); transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1); } .ask[data-side="right"]{transform:translateX(40px)} .ask.in{opacity:1;transform:none} /* the follow-up lands just behind the question rather than with it */ .ask .ask-sub{opacity:0;transform:translateY(10px); transition:opacity .45s ease .18s,transform .45s cubic-bezier(.2,.7,.3,1) .18s} .ask.in .ask-sub{opacity:1;transform:none} @media (max-width:820px){ /* the figure goes above its boxes — side by side at this width leaves the question three words to a line */ .ask,.ask[data-side="right"]{ grid-template-columns:1fr;gap:var(--s4);margin-left:0;max-width:none; } .ask[data-side="right"] .ask-fig{order:0} .ask-fig{max-width:8.5rem;justify-self:start} .ask[data-side="right"] .ask-fig{justify-self:end} .ask-says::before,.ask[data-side="right"] .ask-says::before{display:none} /* sideways travel on a narrow screen just causes overflow */ .ask,.ask[data-side="right"]{transform:translateY(24px)} } @media (prefers-reduced-motion:reduce){ .ask,.ask[data-side="right"],.ask .ask-sub{ opacity:1!important;transform:none!important;transition:none!important; } } /* ---------- the target, brought back as the story's spine ---------- The drawing rules only. Its hero positioning and its own tilt wrapper live with the archived copy in assets/3D animated target logo/; the story stage supplies its own. The two lit strokes are what read as thickness — see that folder's README before changing any of them. */ .target{width:100%;height:100%;overflow:visible;display:block} .t-ring{fill:none;stroke:#0A2E3F;stroke-width:15} .t-ring-lit{fill:none;stroke:#3C7E9C;stroke-width:4;transform:translate(-2px,-3px)} .t-ticks rect{fill:#0A2E3F} .t-ticks-lit rect{fill:#3C7E9C} .t-dash{fill:none;stroke:#0A2E3F;stroke-width:13;stroke-dasharray:17 13;stroke-linecap:butt} .t-dash-lit{fill:none;stroke:#3C7E9C;stroke-width:4.5;stroke-dasharray:11 19;stroke-dashoffset:-3;stroke-linecap:butt} .t-core-ball{fill:var(--accent)} .t-core-halo{ fill:var(--accent);transform-box:fill-box;transform-origin:50% 50%; animation:corePulse 2.8s cubic-bezier(.45,0,.35,1) infinite; } @keyframes corePulse{ 0%{transform:scale(1);opacity:.34} 60%{transform:scale(2.05);opacity:0} 100%{transform:scale(2.05);opacity:0} } @media (prefers-reduced-motion:reduce){ .t-core-halo{animation:none;opacity:.2} } /* ========================================================================== THE SAGA — pinned, with the target as its spine ========================================================================== Sticky positioning plus a read of scroll offset. The page always scrolls at its own speed; nothing here drives it. The whole stage is sized off two custom properties: --tgt is the target's diameter and --edge is where its pointer lands. Everything else measures from those, so the layout holds at any window size instead of needing a breakpoint per case. */ .saga{position:relative} /* and the stage itself starts a little before the questions have finished, so the first beat follows them rather than arriving a third of a screen later. The stage paints no background, so the overlap is invisible. Pinned case only — the same conditions the script uses. */ @media (min-width:901px) and (min-height:701px) and (prefers-reduced-motion:no-preference){ .saga{margin-top:-22vh} } /* the sticky stage supplies its own breathing room, so the section above it does not need a full band of padding as well */ #case{padding-bottom:var(--s5)} main > section.saga{padding-block:0} .saga-track{position:relative} .saga-stage{ /* nearly the full height of the window, but never so wide it eats the copy */ --tgt:min(92vh, 58vw); /* the drawing does not fill its own box: in the 1000-unit viewBox the ring and its tick end at x=843, so the pointer lands at 84.3% of the width, not at the box edge. Measuring from the box left a 150px hole. */ --edge:calc(var(--tgt) * 0.343); --gutter:max(2rem, (100vw - 1280px) / 2); position:sticky;top:0;height:100vh; overflow:hidden; } /* exactly half the target shows: its centre sits on the left edge */ .saga-target{ position:absolute; left:var(--path-x, 34%);top:var(--path-y, 26%); width:var(--path-size, 16vh);aspect-ratio:1; transform:translate(-50%, -50%) scale(var(--path-scale, 1)); opacity:var(--target-in, 0); will-change:transform; perspective:1200px; z-index:3; } .saga-tilt{ display:block;width:100%;height:100%; transform:rotateX(0) rotateY(0); transition:transform .28s cubic-bezier(.22,.61,.36,1); } .saga-target[data-resting="true"] .saga-tilt{transition:transform .85s cubic-bezier(.22,.61,.36,1)} .saga-target .target{width:100%;height:100%;overflow:visible;display:block} .saga-target[data-hollow="true"] .t-core{opacity:0} .saga-target[data-hollow="true"]{pointer-events:none} #sagaRing,#sagaDash{transform-box:fill-box;transform-origin:50% 50%} /* it turns between beats and comes to rest with a point at the pointer */ #sagaRing{transition:transform .85s cubic-bezier(.4,0,.2,1)} #sagaDash{transition:transform 1.1s cubic-bezier(.4,0,.2,1)} /* the copy starts just past the pointer and runs to the page gutter */ /* The beats sat dead centre of the stage, which left about a third of a screen of white above the first one as the stage came up behind the four questions. Sitting them higher closes that gap without moving the mark. */ .saga-panels{ position:absolute;left:calc(var(--edge) + var(--s4));right:var(--gutter); top:40%;transform:translateY(-50%); display:grid;align-items:center;z-index:1; } .saga-panel{ grid-area:1/1;opacity:0;transform:translateY(24px); transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1); pointer-events:none; } .saga-panel[data-on="true"]{opacity:1;transform:none;pointer-events:auto} .saga-lead{ font-size:clamp(1.75rem, 1.1rem + 2.1vh + .9vw, 3.5rem); line-height:1.04;letter-spacing:-.03em;margin:0;max-width:22ch; } .saga-lead-sub{ margin:var(--s5) 0 0;color:var(--muted); font-size:clamp(1rem, .85rem + .8vh + .2vw, 1.5rem); } .warn-h{ font-size:clamp(1.375rem, 1.1rem + 1.4vh + .6vw, 2.5rem); line-height:1.08;letter-spacing:-.025em;margin:0 0 var(--s4);max-width:24ch; } /* ---------- the tabs ---------- One treatment for all three beats. The wash runs warm rather than red: red would be the only alarm colour on the site and would fight the accent it sits beside. Type is sized partly in vh so a short window shrinks the rows instead of overflowing the pinned stage. */ .tab-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.6rem,1.4vh,1.15rem); max-width:min(100%, 64rem)} .tab-row{ display:grid;grid-template-columns:clamp(2.25rem,4vh,3.5rem) 1fr; gap:clamp(1rem,1.9vw,1.9rem);align-items:start; background:var(--warn-wash);border-left:2px solid var(--warn-edge); padding:clamp(1rem,2.3vh,1.9rem) clamp(1.25rem,2.4vw,2.25rem); border-radius:2px; opacity:0;transform:translateX(-26px); transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1); transition-delay:calc(var(--i) * 110ms); } .saga-panel[data-on="true"] .tab-row{opacity:1;transform:none} .tab-icon{ width:clamp(2.25rem,4vh,3.5rem);height:clamp(2.25rem,4vh,3.5rem);display:block; fill:none;stroke:var(--warn-edge);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;color:var(--warn-edge); } .tab-role{ display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600);margin-bottom:.35em; } .tab-row h3{ font-family:var(--display);font-weight:400; font-size:clamp(1.125rem, .82rem + 1.35vh + .45vw, 2.125rem); line-height:1.14;letter-spacing:-.015em;margin:0 0 .3em; } .tab-row p{ margin:0;color:var(--navy-800); font-size:clamp(.875rem, .7rem + .7vh + .18vw, 1.1875rem); line-height:1.45; } /* ========================================================================== THE CORE — the centre swallows the screen ========================================================================== */ /* ---------- the orange, grown from the target's own core ---------- Anchored wherever the target's centre currently is, so the fill genuinely comes out of the mark. Anchoring it to a fixed point on a stage the target had already left is what made the orange arrive from nowhere. */ .core-fill{ position:absolute;left:var(--core-x, 50%);top:var(--core-y, 50%); width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%; background:var(--orange-deep); transform:scale(var(--core-scale, 0)); will-change:transform;z-index:2; } /* ---------- inside the orange ---------- */ /* the CEO table, drawn for the orange ground. The white version tints its outcome cells with a wash of the accent; on the accent itself that disappears, so here the outcome is white-on-orange and the emphasis comes from weight and ground rather than hue. */ /* the CEO panel has no illustration beside it: the table IS the illustration, so it takes the full column */ /* The CEO panel has no illustration beside it: the table IS the picture, so it takes the whole column and sits centred in the stage. */ /* .core-panel is declared further down the file, so this needs the extra class to win: at equal specificity the later rule takes it. */ .core-panel.core-panel-wide{ grid-template-columns:minmax(0,1fr);width:min(100%,64rem); margin-inline:auto;justify-items:stretch; } .core-panel-wide .core-copy{max-width:none} .core-panel-wide .core-h{max-width:24ch} .ctrio{margin-top:var(--s7);display:grid;gap:0} .ctrio-head,.ctrio-row{ display:grid; grid-template-columns:2rem minmax(0,1fr) 1.5rem minmax(0,1.15fr) 1.5rem minmax(0,1.7fr); align-items:center;gap:var(--s4); } .ctrio-head{ padding:0 var(--s3) var(--s3); font-family:var(--mono);font-size:.625rem;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.68); } /* a hairline between rows rather than a box around each: on a saturated ground four boxes fight the type they contain */ .ctrio-row{padding:var(--s4) var(--s3);border-bottom:1px solid rgba(255,255,255,.22)} .ctrio-row:last-child{border-bottom:0} .ctrio-n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em; color:rgba(255,255,255,.7)} .ctrio-cell{font-size:1.125rem;line-height:1.3;color:#fff} .ctrio-go{font-size:1.0625rem;line-height:1;color:rgba(255,255,255,.55);text-align:center} .ctrio-head .ctrio-go{color:rgba(255,255,255,.4)} .ctrio-out{ padding:var(--s3) var(--s4);border-radius:2px; background:#fff;color:var(--orange-deep); font-size:1.125rem;line-height:1.3;font-weight:500; } /* ---------- out of the orange, one door ---------- */ .handoff{padding-top:var(--s5);padding-bottom:var(--section);text-align:center} /* The orange section ends the way any section ends: the pinned stretch runs out, the stage unpins, and the orange scrolls up off the top while this follows it in. No pull-up and no cross-fade — just the page scrolling. */ .btn-big{ display:inline-flex;align-items:center;gap:var(--s4); padding:var(--s5) var(--s7);border:2px solid var(--ink);border-radius:3px; font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.25rem); line-height:1;letter-spacing:-.02em;color:var(--ink);text-decoration:none; transition:background-color .3s ease,color .3s ease,border-color .3s ease; } .btn-big:hover,.btn-big:focus-visible{background:var(--ink);color:#fff} .btn-big-arrow{transition:transform .3s cubic-bezier(.2,.7,.3,1)} .btn-big:hover .btn-big-arrow{transform:translateX(6px)} /* ---------- the closing ---------- The title and the button used to travel toward each other on scroll. It read as slow: by the time they settled you had scrolled past them. They are simply laid out now. */ .close-meet{display:grid;grid-template-columns:1fr auto;gap:var(--s7);align-items:center} .close-h{margin:0;max-width:20ch} .close-act{margin:0;justify-self:end} @media (max-width:860px){ .close-meet{grid-template-columns:1fr;gap:var(--s6)} .close-act{justify-self:start} } /* the door and the close sit close together; the section rhythm here was leaving most of a screen of white between them */ .handoff{padding-bottom:var(--s7)} .page-home .close,.page-customer .close{padding-top:var(--s7)} @media (max-width:900px){ .ctrio-head{display:none} .ctrio-row{grid-template-columns:2.25rem 1fr;gap:var(--s2) var(--s3)} .ctrio-n{grid-column:1;grid-row:1 / span 5} .ctrio-cell,.ctrio-out,.ctrio-go{grid-column:2} .ctrio-go{text-align:left;transform:rotate(90deg);transform-origin:left center} .ctrio-out{justify-self:start} } .core-panels{ position:absolute;inset:0;z-index:4; display:grid;place-items:center; padding-inline:var(--gutter); pointer-events:none; } .core-panel{ grid-area:1/1;width:min(100%, 62rem); display:grid;grid-template-columns:minmax(0,1fr) clamp(9rem,20vw,17rem); gap:clamp(1.5rem,4vw,4rem);align-items:center; color:#fff; opacity:0;visibility:hidden; transform:translateY(18px); /* Out fast, in slow. Matched timings meant the old beat was still at half opacity while the next arrived — three of them legible at once. */ transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; } .core-panel[data-on="true"]{ opacity:1;visibility:visible;transform:none;pointer-events:auto; transition:opacity .42s ease .1s, transform .42s cubic-bezier(.2,.7,.3,1) .1s, visibility 0s; } .core-h{font-size:clamp(1.75rem,1rem + 2.6vh + 1vw,3.5rem);line-height:1.03; letter-spacing:-.03em;margin:0;max-width:20ch} .core-sub{margin:var(--s5) 0 0;line-height:1.5;max-width:54ch; font-size:clamp(.9375rem,.8rem + .8vh + .2vw,1.3125rem);color:rgba(255,255,255,.93)} .core-how{font-size:clamp(3.5rem,2rem + 8vh + 2vw,10rem);line-height:1; letter-spacing:-.04em;margin:0} .core-develop{font-size:clamp(1.5rem,1rem + 2.4vh + .8vw,3rem);line-height:1.1; letter-spacing:-.03em;margin:0} /* the pic art beside each beat */ .core-art{ width:100%;height:auto;display:block; fill:none;stroke:#fff;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round; color:#fff;opacity:.92; } .core-art .ca-grid{stroke:#fff;opacity:.24;stroke-width:1.4} .sig-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.9rem,2.2vh,1.75rem)} .sig-row{ opacity:0;transform:translateX(-26px); transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1); transition-delay:calc(var(--i) * 130ms + 150ms); } .core-panel[data-on="true"] .sig-row{opacity:1;transform:none} .sig-n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:rgba(255,255,255,.75)} .sig-row h3{font-family:var(--display);font-weight:400; font-size:clamp(1.1875rem,.9rem + 1.5vh + .4vw,2rem); line-height:1.08;letter-spacing:-.02em;margin:.15em 0 .18em} .sig-lead{margin:0 0 .2em;font-size:clamp(.875rem,.78rem + .5vh + .12vw,1.0625rem)} .sig-row p:last-child{margin:0;max-width:56ch;color:rgba(255,255,255,.86); font-size:clamp(.8125rem,.72rem + .45vh + .1vw,1rem);line-height:1.45} @media (max-width:900px), (max-height:700px){ .core-fill{display:none} .core-panels{ position:static;inset:auto;display:grid;gap:var(--s8); background:var(--orange-deep);padding-block:var(--s8); margin-top:var(--s8); } .core-panel{ grid-area:auto;grid-template-columns:1fr;width:auto; opacity:1;visibility:visible;transform:none;pointer-events:auto; } .core-panel .sig-row{opacity:1;transform:none} .core-art{max-width:14rem;order:-1} } /* ========================================================================== THE APPROACH — out of the orange, the mark small beside the words ========================================================================== */ .approach{padding-block:var(--s9)} .approach-in{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--s7);align-items:start} .approach-mark{width:9rem;height:9rem} .approach-mark svg{width:100%;height:auto;display:block;overflow:visible} .approach-h{font-size:clamp(1.875rem,3.6vw,3rem);line-height:1.05; letter-spacing:-.03em;margin:var(--s3) 0 var(--s6);max-width:20ch} .approach-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);max-width:52ch} .approach-steps li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s4); align-items:baseline;border-top:var(--hair);padding-top:var(--s4);color:var(--navy-800)} .approach-n{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--accent-ink)} .approach-cta{margin-top:var(--s7)} /* the four-phases link, given some weight */ .btn-move{ display:inline-flex;align-items:center;gap:var(--s4); text-decoration:none;color:var(--ink); border:2px solid var(--ink);border-radius:2px; padding:var(--s4) var(--s6); font-family:var(--display);font-size:clamp(1.125rem,2vw,1.5rem);letter-spacing:-.01em; transition:background-color .25s ease,color .25s ease; } .btn-move-arrow{ font-size:1.1em;transition:transform .25s cubic-bezier(.2,.7,.3,1); } .btn-move:hover,.btn-move:focus-visible{background:var(--ink);color:#fff} .btn-move:hover .btn-move-arrow, .btn-move:focus-visible .btn-move-arrow{transform:translateX(6px)} /* ---------- phones: no pin, no rotation, no zoom ---------- Everything becomes ordinary sections. The target appears once at the top of the stretch rather than travelling, and the core beat is a plain orange band. A pinned, rotating, zooming sequence on a small screen feels trapped, and this one is long. */ @media (max-width:900px), (max-height:700px){ .saga-track[data-static="true"] .saga-stage, .core-track[data-static="true"] .core-stage{ position:static;height:auto;overflow:visible;display:block; } .saga-track[data-static="true"]{height:auto!important} .core-track[data-static="true"]{height:auto!important} .saga-target{ position:relative;left:auto;top:auto;transform:none;opacity:1; width:min(56vw,240px);margin:0 auto var(--s6); } /* Pinned, these sit against the stage edges. Static, left and right stop applying, so with no width of their own they ran the full bleed and the copy touched both edges of the window — the cut-off look. The shell puts them back on the same column as every other section. */ .saga-panels{ position:static;transform:none;left:auto;right:auto; display:grid;gap:var(--s8); width:var(--shell);margin-inline:auto; } .saga-panel{grid-area:auto;opacity:1;transform:none;pointer-events:auto} .saga-panel .tab-row{opacity:1;transform:none} /* These rules used to hang the orange on a .core-stage wrapper that was never added to the markup, so the colour stayed on .core-panels while the width and padding came off it — an inset orange block with the white copy hard against its edge. The orange runs edge to edge and the copy sits on the page's own gutter. */ .core-fill{display:none} .core-panels{ position:static;inset:auto; display:grid;gap:var(--s8); width:auto;margin-inline:0; padding-inline:calc((100% - var(--shell)) / 2); } .core-panel{grid-area:auto;opacity:1;transform:none;width:auto} .core-panel .sig-row{opacity:1;transform:none} .approach-in{grid-template-columns:1fr;gap:var(--s5)} .approach-mark{width:6rem;height:6rem} } @media (prefers-reduced-motion:reduce){ .saga-panel,.tab-row,.core-panel,.sig-row,.saga-target{ transition:none!important; } } /* ========================================================================== THE FOUNDERS — cards that open ========================================================================== Modelled on Watermelon's expandable profile card, rebuilt from scratch: the original is React and depends on a motion library, and this site is one stylesheet and one script with no dependencies. Collapsed, a card is a circular headshot with a name under it. Open, it takes the whole row and lays out photo-left, detail-right. One at a time. The trigger is a real button and the panel is ordinary markup below it, so it works from the keyboard and it still reads with the script switched off. */ /* .founders was already taken by the About page bios, hence .who */ .who{padding-block:var(--section);border-top:var(--hair)} .fdr-grid{ display:grid;grid-template-columns:1fr 1fr;gap:var(--s6); margin-top:var(--s7);align-items:start; } .fdr{ border:var(--hair);border-radius:3px;background:var(--paper); overflow:hidden; transition:background-color .3s ease,border-color .3s ease; } .fdr[data-open="true"]{ grid-column:1 / -1;background:#fff;border-color:var(--accent); } /* ---------- the face ---------- */ .fdr-face{ display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:var(--s5);width:100%; padding:var(--s5);background:none;border:0;cursor:pointer;text-align:left; font:inherit;color:inherit; } .fdr-face:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px} .fdr-photo{ display:block;width:5.5rem;height:5.5rem;border-radius:50%; overflow:hidden;background:var(--line);flex:none; transition:width .35s cubic-bezier(.2,.7,.3,1),height .35s cubic-bezier(.2,.7,.3,1); } .fdr-photo img{width:100%;height:100%;object-fit:cover;display:block} .fdr-name{ display:block;font-family:var(--display); font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.1;letter-spacing:-.02em; } .fdr-role{ display:block;margin-top:.35rem;font-family:var(--mono);font-size:.6875rem; letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink); } /* a plus that becomes a minus, rather than a word that has to be translated */ .fdr-cue{ position:relative;width:1.5rem;height:1.5rem;flex:none; border:1px solid var(--line);border-radius:50%; transition:background-color .3s ease,border-color .3s ease,transform .3s ease; } .fdr-cue::before,.fdr-cue::after{ content:"";position:absolute;left:50%;top:50%;background:var(--navy-600); transform:translate(-50%,-50%);transition:opacity .3s ease,background-color .3s ease; } .fdr-cue::before{width:.7rem;height:1px} .fdr-cue::after{width:1px;height:.7rem} .fdr-face:hover .fdr-cue{border-color:var(--accent)} .fdr[data-open="true"] .fdr-cue{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)} .fdr[data-open="true"] .fdr-cue::before, .fdr[data-open="true"] .fdr-cue::after{background:#fff} .fdr[data-open="true"] .fdr-cue::after{opacity:0} /* ---------- the panel ---------- Height is animated from a measured pixel value the script writes, because auto does not transition. With no script the panel is simply open. */ .fdr-panel{ overflow:hidden;height:0; transition:height .38s cubic-bezier(.2,.7,.3,1); } .fdr[data-open="true"] .fdr-panel{height:var(--panel-h, auto)} .fdr-body{ padding:0 var(--s5) var(--s6); max-width:64ch; opacity:0;transform:translateY(8px); transition:opacity .3s ease .06s,transform .3s cubic-bezier(.2,.7,.3,1) .06s; } .fdr[data-open="true"] .fdr-body{opacity:1;transform:none} .fdr-body p{margin:0 0 var(--s4);color:var(--navy-800)} .fdr-find{ margin-top:var(--s6)!important;margin-bottom:var(--s3)!important; font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--navy-600)!important; } .fdr-links{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4); margin-bottom:0!important; } /* Open, the card is a row: the photo grows and moves to the left of the copy. The button keeps its own grid; the panel simply sits beside it. */ @media (min-width:861px){ .fdr[data-open="true"]{ display:grid;grid-template-columns:auto 1fr;align-items:start; column-gap:var(--s7);padding:var(--s6); } .fdr[data-open="true"] .fdr-face{ grid-template-columns:1fr;justify-items:start;gap:var(--s4); padding:0;width:auto;max-width:15rem; } .fdr[data-open="true"] .fdr-photo{width:11rem;height:11rem} .fdr[data-open="true"] .fdr-cue{position:absolute;top:var(--s5);right:var(--s5)} .fdr[data-open="true"]{position:relative} .fdr[data-open="true"] .fdr-body{padding:0} } @media (max-width:860px){ .fdr-grid{grid-template-columns:1fr;gap:var(--s5)} .fdr-photo{width:4.25rem;height:4.25rem} } @media (prefers-reduced-motion:reduce){ .fdr,.fdr-photo,.fdr-panel,.fdr-body,.fdr-cue{transition:none!important} .fdr-body{opacity:1;transform:none} } /* ========================================================================== INSIGHTS — the index, and the byline shared with the articles ========================================================================== The two pieces are meant to sit above the fold together, so the header earns its detail through typography rather than height: a heavier eyebrow, an accent rule, and a standing line of status under the lede. */ .ins-head{padding-bottom:var(--s6)} .ins-head-in{max-width:60rem} .ins-head .eyebrow{ display:inline-block;padding-bottom:var(--s2); border-bottom:2px solid var(--accent); } .ins-head h1{ font-size:clamp(2.5rem,6vw,4.75rem);line-height:.98;letter-spacing:-.035em; margin:var(--s5) 0 0; } .ins-rule{ display:block;height:2px;width:min(22rem,60%);margin:var(--s6) 0; background:linear-gradient(to right,var(--accent),var(--ask-box) 55%,transparent); } .ins-head .lede{margin:0;max-width:52ch} .ins-count{ display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s6) 0 0; font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--navy-600); } .ins-count span{position:relative} .ins-count span + span::before{ content:"";position:absolute;left:calc(var(--s5) / -2);top:.3em;bottom:.3em; width:1px;background:var(--line); } /* ---------- the rows ---------- One link per piece, the whole bar clickable. Hover fills it with the accent, so the target and the feedback are the same shape. */ .ins-list-wrap{padding-top:0} .ins-list{list-style:none;margin:0;padding:0;border-top:var(--hair)} .ins-list li{border-bottom:var(--hair)} .ins-row{ display:grid;grid-template-columns:17.5rem 1fr 2.5rem; align-items:center;gap:var(--s6); padding:var(--s6) var(--s5);text-decoration:none;color:inherit; transition:background-color .25s ease,color .25s ease,padding-left .25s ease; } .ins-row:hover,.ins-row:focus-visible{ background:var(--accent-ink);color:#fff;padding-left:var(--s6); } .ins-row:focus-visible{outline:2px solid var(--ink);outline-offset:-4px} .ins-who{display:flex;align-items:center;gap:var(--s4)} .ins-avatar{ display:block;width:3.25rem;height:3.25rem;border-radius:50%; overflow:hidden;background:var(--line);flex:none; box-shadow:0 0 0 1px var(--line); transition:box-shadow .25s ease; } .ins-row:hover .ins-avatar{box-shadow:0 0 0 1px rgba(255,255,255,.5)} .ins-avatar img{width:100%;height:100%;object-fit:cover;display:block} .ins-date{ display:block;font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em; text-transform:uppercase; } .ins-by{ display:block;margin-top:.25rem;font-size:.8125rem;line-height:1.3; color:var(--muted);transition:color .25s ease; } .ins-row:hover .ins-by{color:rgba(255,255,255,.8)} .ins-title{ display:block;font-family:var(--display); font-size:clamp(1.375rem,2.6vw,2rem);line-height:1.08;letter-spacing:-.02em; } .ins-desc{ display:block;margin-top:var(--s3);max-width:62ch; color:var(--muted);font-size:1rem;line-height:1.5; transition:color .25s ease; } .ins-row:hover .ins-desc{color:rgba(255,255,255,.82)} .ins-go{ font-size:1.5rem;line-height:1;text-align:right;color:var(--line); transition:transform .25s cubic-bezier(.2,.7,.3,1),color .25s ease; } .ins-row:hover .ins-go{color:#fff;transform:translateX(5px)} @media (max-width:860px){ .ins-row{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5) var(--s4)} .ins-row:hover{padding-left:var(--s4)} .ins-go{display:none} } @media (prefers-reduced-motion:reduce){ .ins-row,.ins-go,.ins-avatar,.ins-by,.ins-desc{transition:none} } /* ========================================================================== THE BYLINE — under an article's title, and the same shape as the rows ========================================================================== */ .byline{ display:flex;align-items:center;gap:var(--s4); margin:var(--s6) 0 0;padding-bottom:var(--s6);border-bottom:var(--hair); } .byline-avatar{ display:block;width:3rem;height:3rem;border-radius:50%;overflow:hidden; background:var(--line);flex:none;box-shadow:0 0 0 1px var(--line); } .byline-avatar img{width:100%;height:100%;object-fit:cover;display:block} .byline-who{display:block;font-size:1rem;line-height:1.3;color:var(--ink)} .byline-who b{font-weight:500} .byline-meta{ display:block;margin-top:.2rem;font-family:var(--mono);font-size:.6875rem; letter-spacing:.12em;text-transform:uppercase;color:var(--navy-600); } /* ========================================================================== CUSTOMER SUCCESS — one story, told once ========================================================================== The three photographs sit in the margin beside the text rather than interrupting it: the column of prose stays unbroken and readable, and the pictures alternate sides so the eye has somewhere to go between paragraphs. Below 1100px there is no margin to sit in, so they fall into the flow. */ .cust-open{padding-bottom:var(--s6)} .cust-intro{ max-width:56ch;font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.45; color:var(--ink); } .cust-story-wrap{padding-top:var(--s6)} /* ---------- the name, with the client's mark beside it ---------- */ .cust-head{ display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap; padding-bottom:var(--s6);border-bottom:2px solid var(--ink); } .cust-logo:empty{display:none} .cust-logo img{width:auto;height:clamp(3.5rem,6vw,5.5rem);display:block} .cust-name{ font-size:clamp(2.25rem,5vw,3.75rem);line-height:1;letter-spacing:-.03em; margin:0; } .cust-sub{ margin:var(--s3) 0 0;font-family:var(--mono);font-size:.75rem; letter-spacing:.13em;text-transform:uppercase;color:var(--navy-600); } /* ---------- the story ---------- One grid: each row is a paragraph and the picture that belongs to it, so the pairing survives an edit to the copy. On a narrow screen the same rows collapse to one column and the order still reads correctly. */ .cust-body{ margin-top:var(--s8);display:grid;gap:var(--s8); grid-template-columns:minmax(0,64ch) minmax(0,1fr);align-items:start; } .cust-p{margin:0;font-size:1.125rem;line-height:1.7;color:var(--navy-800)} .cust-shot{margin:0} .cust-shot img{width:100%;height:auto;display:block;border-radius:3px;background:var(--paper)} .cust-shot::after{ content:"";display:block;width:2.5rem;height:2px;margin-top:var(--s4); background:var(--accent); } /* the portrait does not need the full column beside a short paragraph */ .cust-shot-tall{width:min(100%,22rem)} @media (max-width:1099px){ .cust-body{grid-template-columns:1fr;gap:var(--s6)} .cust-shot{max-width:34rem} .cust-shot-tall{max-width:22rem} } /* ========================================================================== ABOUT — the promise first, the credibility after ========================================================================== */ .ab-open{padding-bottom:var(--s7)} .ab-h1{font-size:clamp(2.75rem,6.4vw,5.5rem);line-height:.96;letter-spacing:-.035em} .ab-promise{ margin:var(--s6) 0 0;max-width:24ch; font-family:var(--display);font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1.08;letter-spacing:-.025em;color:var(--ink); } .ab-lede{margin-top:var(--s6);max-width:62ch} /* ---------- why we exist ---------- */ .ab-why{border-top:var(--hair);border-bottom:var(--hair);background:var(--paper)} .ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start} .ab-why h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.06;max-width:20ch} .ab-why-copy{display:grid;gap:var(--s5);padding-top:var(--s5)} .ab-why-copy p{margin:0;color:var(--navy-800);max-width:56ch} /* ---------- three differentiators ---------- */ .ab-diff{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;gap:0} .ab-diff li{ display:grid;grid-template-columns:4.5rem 1fr;gap:var(--s5); padding-block:var(--s6);border-top:var(--hair); } .ab-diff li:last-child{border-bottom:var(--hair)} .ab-n{ font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em; color:var(--accent-ink);padding-top:.4rem; } .ab-diff h3{ font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.1; letter-spacing:-.02em;margin:0 0 var(--s3); } .ab-diff p{margin:0;color:var(--navy-800);max-width:62ch} /* ---------- the team leads ---------- The founders are the shared expandable cards above; these three are simply a face, a name and a role. */ /* The three leads sit on the same width as the founder cards above them and each one is centred in its own column, so the circles are evenly spaced and the names line up. They were capped at 52rem and left-aligned, which bunched all three into the left third of the page. */ .ab-team{ list-style:none;margin:var(--s8) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6); } .ab-person{display:grid;justify-items:center;text-align:center;gap:0} .ab-face{ display:block;width:9rem;height:9rem;border-radius:50%;overflow:hidden; background:var(--line);box-shadow:0 0 0 1px var(--line); margin-bottom:var(--s4); } .ab-face img{width:100%;height:100%;object-fit:cover;display:block} .ab-person-name{ display:block;font-family:var(--display); font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.1;letter-spacing:-.02em; } .ab-person-role{ display:block;margin-top:var(--s2);font-family:var(--mono);font-size:.6875rem; letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink); line-height:1.6;text-wrap:balance; } /* ---------- the closing keeps its eyebrow ---------- */ .page-about .close .eyebrow{margin-bottom:var(--s6)} @media (max-width:900px){ .ab-grid{grid-template-columns:1fr;gap:var(--s6)} .ab-why-copy{padding-top:0} .ab-team{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)} .ab-face{width:7rem;height:7rem} } @media (max-width:560px){ .ab-team{grid-template-columns:1fr} .ab-diff li{grid-template-columns:1fr;gap:var(--s3)} } /* The AI Dilemma nav link lands here. Without a scroll margin the fixed header sits on the eyebrow, so the section is offset by exactly the bar height and the heading arrives just under it — no hero left on screen. */ /* The AI Dilemma nav link lands on the eyebrow, not on the section: the section carries a full band of top padding, so anchoring it would leave the heading most of a screen further down. The offset is the height of the scrolled header plus a little air, so nothing of the hero is left showing. */ /* Tuned so the eyebrow clears the stuck header rather than sitting just under its translucent edge, and so no part of the hero is left on screen. */ #the-case{scroll-margin-top:calc(var(--nav-h) + .7rem)} /* ---------- the LinkedIn line in the footer ---------- The other footer links go to pages of this site; this one leaves it, so it carries the mark and a corner arrow to say so before it is clicked. The glyph inherits the link's colour, so it darkens with the text on hover. */ .foot-social{display:inline-flex;align-items:center;gap:.55rem} .foot-in{width:1.0625rem;height:1.0625rem;flex:none;color:var(--muted);transition:color .18s ease} .foot-out{font-size:.85em;color:var(--muted);transition:color .18s ease} .foot-social:hover .foot-in,.foot-social:focus-visible .foot-in, .foot-social:hover .foot-out,.foot-social:focus-visible .foot-out{color:var(--accent-ink)} .foot-social:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}