/* C4S Global homepage styles (c4s-home.css). Loaded by the homepage's first code box, after Webflow's site stylesheet.

   HOW THIS FILE IS ORGANISED
   It is one file in cascade order: later sections deliberately override earlier ones, so ORDER MATTERS. It was joined
   from the homepage's earlier separate sources, in the order the page loaded them, and keeps that order:
     1. Base (every section and component), then one short part per homepage section (Hero ... Discuss your needs).
     2. Type hierarchy, short-screen hero.
     3. Size tiers and behaviour tiers by screen.
     4. The story ("look A") in three screen classes, each a layer over everything above it:
          - desktops with a mouse, 680px+ tall:   the full story, with held (pinned) scenes
              (min-width: 992px) and (pointer: fine) and (height >= 680px), split further by height:
              680-730, 680-850, 850+ and 680-1190px;
          - large screens: extra room (the "large screens" part);
          - everything else (touch, tablets, phones, short laptops, reduced motion): the same story in its FINISHED
              state, scrolling freely:  not screen and (min-width: 992px) and (pointer: fine) and (min-height: 680px).
        A rule that must hold on EVERY screen therefore appears once in each class; that is why some rules repeat.
     5. The enquiry form, then Finishing (contrast and small sizes), last so it wins.
     6. After Finishing, small parts added since, each for one section and each saying in its heading what it is:
          the founder portraits' proportions; How we develop performance's dots and navy cards (batch D1);
          the programme portfolio's ground picture, the stairs, on desktops (batch PG1);
          which part of the hero's picture an upright screen shows (batch HP1).
        The organisational problem's part (in 1) was written again whole by batch P4: one picture, the words on its wall.
        Then Problems we solve's ground, the building's navy wall (batch SW1); and, the file's last part, the
        method's five photographs and what they need (batch MJ1).
        Batch DD1 (11 Oct): the wall is the proper picture; the five photographs are named only on a marked
        section (#method.is_pictured: the script marks it once the runtime has started); and, the file's last part now, the
        development loop's photograph in the ring's place.
        Batch DD3 (11 Oct), the file's last part now, fixes from the day's review: Problems we solve from 992 to 1,180px keeps the list clear of the card;
        the hero has a shade behind the menu and, up to 1,100px, the navy held further across;
        the light sections stand on the house beige.
        Batch DD5 (11 Oct), the file's last part now, the day's polish: the hero on phones and tablets stands clear of the logo's bar, and its strip shows its logos;
        Problems we solve, one column: room between the button, the card's foot and the list;
        How we develop performance under 992px: room above its button.
        Batch DD9 (11 Oct), the file's last part now, two things Dex asked for: Problems we solve stands on the plaster wall (home-solve-wall-4) in the panelled wall's place;
        the programme portfolio two by two: room between its rows.
        Batch DD10 (11 Oct), the file's last part now, two more things Dex asked for: Problems we solve, its card in one column (up to 991px): room over the label as under the button, the closing block nearer, no empty stage;
        the labels of the five light sections from 992px wide: the darker gold.

   WHY SO MANY RULES START "html:root body" AND END "!important"
   - "html:root body ..." is always true. It adds weight (specificity) so a story rule outranks the base rules above it
     and Webflow's own class styles, without depending on file order alone.
   - "!important" is used where a rule must also beat an inline style that the animation runtime (GSAP) writes while a
     scene plays, or an earlier !important. Removing either can change the page in a state the eye rarely checks
     (mid-scroll, a held scene, a touch device). Change them only with the 8-view proof AND a mid-scroll check.
   A future rework (one layer instead of overrides) is sized in the night-run plan, task 5.0.

   RULES FOR EDITING
   - Edit THIS file in the build folder (see audit/build/README.md for which folder is live), never the uploaded copy.
   - Keep "c4s-home" in the uploaded file's name: the homepage script finds the stylesheet by it and waits for it.
   - The script finds sections by their ids and by [data-reveal] / [data-scene], and elements inside them by class
     names (about 38): search c4s-home.js before renaming a class, and rename it there in the same change.
   - Class names follow the site convention: block_element in lower case with underscores; variants is_x. */

/* ==== Base: every homepage section and component ==== */
:root{
  --navy:#022759;--navy-700:#0a3a7a;--amber:#ffb44a;--amber-deep:#e89a2a;
  --ink:#1f1d1e;--ink-soft:#474747;--ink-faint:#6b6b6b;
  --paper:#fafafa;--paper-raised:#ffffff;--tint:#f3f3f3;--line:#e1e1e1;--line-soft:#ebebeb;
  --d-ink:#f2f0ee;--d-ink-soft:#c7c3bf;--d-ink-faint:#a09c98;--d-line:#2b323d;--d-tint:#0b3268;
  --display:"Inter Tight","Neue Haas Grotesk Display Pro","Helvetica Neue",Arial,sans-serif;
  --body:Inter,"Neue Haas Display Roman","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --max:calc(clamp(1240px, 100vw - 560px, 1520px) + 48px);--gutter:calc(24px + clamp(20px, 5vw, 72px));
}
*{box-sizing:border-box}
html{scroll-behavior:auto;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,4vw,54px)}
h2{font-size:clamp(2rem,3.8vw,3.3rem)}
h3{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.01em;line-height:1.15}
h1 em,h2 em{font-style:italic;font-weight:600;color:var(--amber)}
:is(.is_paper) h2 em{color:var(--navy-700)}
p{margin:0}
:is(.hero_container,.solve_container,.develop_container,.method_container,.portfolio_container,.trust_container,.results_container,.testimonials_container,.contact_container){max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(56px,5vw,72px) 0}

:is([data-scene],:where(#loop)){min-height:100svh;display:flex;align-items:flex-start;padding:clamp(56px,5vw,72px) 0}
:is([data-scene],:where(#loop))>:is(.hero_container,.solve_container,.develop_container,.method_container,.portfolio_container,.trust_container,.results_container,.testimonials_container,.contact_container){width:100%}
:is([data-scene],:where(#loop)):is([data-scene="held"],:where(#loop)){align-items:center}
.eyebrow_text{font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);display:flex;gap:10px;align-items:center;margin-bottom:22px}
.eyebrow_text::before{content:"";flex:none;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFB44A%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710.10%27%2F%3E%3Cg%20transform%3D%27rotate(30%2012%2012)%27%3E%3Cpath%20d%3D%27M12%201.90V22.10%27%2F%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2712%27%20rx%3D%274.7%27%20ry%3D%2710.10%27%2F%3E%3Cpath%20d%3D%27M1.90%2011.4Q12%2017.6%2022.10%2011.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat}
:is(.is_dark,:where(#method)){background:var(--navy);color:var(--d-ink)}
:is(.is_dark,:where(#method)) .eyebrow_text{color:var(--amber)}
:is(.is_dark,:where(#method)) p{color:var(--d-ink-soft)}
.intro_text{font-size:1.1rem;color:var(--ink-soft);max-width:60ch;margin-top:22px}
:is(.is_dark,:where(#method)) .intro_text{color:var(--d-ink-soft)}

.button{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 19px 0 25px;border-radius:8px;background:transparent;color:var(--navy);font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:.005em;border:1px solid var(--amber);cursor:pointer;text-decoration:none;transition:border-color .4s ease}

.button::before{content:"";position:absolute;right:19px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--amber);transform:scale(30);transition:transform .55s cubic-bezier(.4,0,.2,1);z-index:-1}
.button:hover::before,.button:focus-visible::before{transform:scale(1)}
.button:hover,.button:focus-visible{border-color:rgba(255,255,255,.4)}
.button .button_label{position:relative;transition:color .35s ease}
.button:hover .button_label,.button:focus-visible .button_label{color:var(--d-ink)}
.button .button_arrow{width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--amber);border:1px solid transparent;display:grid;place-items:center;flex:0 0 auto;transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s cubic-bezier(.4,0,.2,1)}
.button .button_arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.button:hover .button_arrow,.button:focus-visible .button_arrow{background:var(--amber);color:var(--navy);border-color:var(--amber)}

:is(.is_paper) .button:hover,:is(.is_paper) .button:focus-visible{border-color:#9a9a9a}
:is(.is_paper) .button:hover .button_label,:is(.is_paper) .button:focus-visible .button_label{color:var(--navy)}
.button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.is_ghost{border-color:#9a9a9a;background:transparent}
.is_ghost::before{display:none}
.is_ghost .button_label{color:var(--navy)}
.is_ghost .button_arrow{background:transparent;color:var(--navy);border-color:#9a9a9a}
.is_ghost:hover,.is_ghost:focus-visible{border-color:var(--navy)}
.is_ghost:hover .button_label,.is_ghost:focus-visible .button_label{color:var(--navy)}
.is_ghost:hover .button_arrow,.is_ghost:focus-visible .button_arrow{background:var(--navy);color:var(--amber);border-color:var(--navy)}
:is(.is_dark,:where(#method)) .is_ghost,footer .is_ghost{border-color:rgba(255,255,255,.35)}
:is(.is_dark,:where(#method)) .is_ghost .button_label,:is(.is_dark,:where(#method)) .is_ghost .button_arrow,footer .is_ghost .button_label,footer .is_ghost .button_arrow{color:var(--d-ink);border-color:rgba(255,255,255,.35)}
:is(.is_dark,:where(#method)) .is_ghost:hover,footer .is_ghost:hover{border-color:var(--amber)}
:is(.is_dark,:where(#method)) .is_ghost:hover .button_label,footer .is_ghost:hover .button_label{color:var(--amber)}
:is(.is_dark,:where(#method)) .is_ghost:hover .button_arrow,footer .is_ghost:hover .button_arrow{background:var(--amber);color:var(--navy);border-color:var(--amber)}

section,footer{position:relative;z-index:2;background:var(--paper)}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.025)}}

:is(.section_trust){padding-top:clamp(56px,5vw,72px)}
.trust_stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--line);padding-top:36px}
:is(.trust_stat) :is(.trust_stat_number){font-family:var(--display);font-size:clamp(2.6rem,5vw,4.4rem);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--navy)}
:is(.trust_stat) .trust_stat_label{font-weight:600;margin-top:10px}
:is(.trust_stat) .trust_stat_detail{font-size:15px;line-height:1.5;color:var(--ink-faint);margin-top:8px;max-width:36ch}
@keyframes scroll{to{transform:translateX(-50%)}}

.section_solve .eyebrow_text{margin-bottom:18px}
.solve_grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,88px);align-items:start}
.section_solve h2{font-size:40px;line-height:1.1}
.section_solve .intro_text{max-width:44ch;margin-top:18px;font-size:16px}

.solve_index{list-style:none;margin:0;padding:0}
.solve_index li{border-top:1px solid rgba(255,255,255,.14)}
.solve_index li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.solve_index a{display:grid;grid-template-columns:40px 1fr;gap:3px 12px;padding:8px 0;color:var(--d-ink);transition:transform .25s ease}
.solve_index i{grid-row:1/3;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--d-ink-faint);padding-top:3px;transition:color .3s ease}
.solve_index b{font-size:14.5px;font-weight:500;line-height:1.4;color:var(--d-ink);text-wrap:pretty}
.solve_index span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink-soft)}
.solve_index li.is_active i{color:var(--amber)}
.solve_index a:hover,.solve_index a:focus-visible{transform:translateX(4px)}
.solve_index a:hover span,.solve_index a:focus-visible span{color:var(--amber)}

.solve_stage{margin-top:28px}
.solve_item{display:none}
.solve_item.is_fallback{display:block;padding-top:14px}
.solve_item.is_fallback b{display:block;font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--amber)}
.solve_item.is_fallback p{font-size:14px;color:var(--d-ink-soft);margin-top:8px;max-width:40ch}
.solve_item.is_fallback .button{margin-top:16px}
html.is_js .solve_index li{opacity:0}
html.is_js .solve_stage{position:relative;min-height:300px}
html.is_js .solve_track{position:relative;min-height:300px}
html.is_js .solve_item{position:absolute;left:0;top:0;width:100%;display:block;padding:0;border:0;color:var(--d-ink);transition:none;will-change:transform,opacity}
html.is_js .solve_item i{display:block;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--d-ink-faint);margin-bottom:12px;transition:color .25s ease}
html.is_js .solve_item.is_active i{color:var(--amber)}
html.is_js .solve_item b{display:block;font-family:var(--display);font-size:30px;font-weight:500;letter-spacing:-.015em;line-height:1.2;color:var(--d-ink);text-wrap:balance}
html.is_js .solve_item > span{display:block;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-ink-soft)}
html.is_js .solve_item.is_fallback{padding:0;top:64px}
html.is_js .solve_item.is_fallback b{font-size:36px;line-height:1.1;margin:0;color:var(--amber)}
html.is_js .solve_item.is_fallback p{margin-top:14px;font-size:16px;line-height:1.55}
html.is_js .solve_item.is_fallback .button{margin-top:20px}
.is_small{height:42px;font-size:15px;padding:0 14px 0 18px;gap:10px}
.is_small .button_arrow{width:24px;height:24px}
.is_small .button_arrow svg{width:14px;height:14px}

.section_develop .grid_split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,88px);align-items:start}
.section_develop h2{font-size:40px;line-height:1.1}
.section_develop .body_text{margin-top:22px;color:var(--ink-soft);font-size:16px;line-height:1.6;max-width:60ch}
.section_develop .lead_text{margin-top:24px;font-weight:600;color:var(--navy);font-size:16px}
.section_develop ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.section_develop ul li{padding-left:22px;position:relative;color:var(--ink-soft);font-size:16px;text-wrap:pretty;max-width:52ch}
.section_develop ul li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--navy)}
.develop_capabilities{border-top:1px solid var(--line)}
.develop_capability{padding:14px 0;border-bottom:1px solid var(--line)}
.develop_capability b{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.01em;display:block;color:var(--navy);margin-bottom:4px;line-height:1.2}
.develop_capability span{display:block;color:var(--ink-soft);font-size:14px;line-height:1.5}
.develop_capabilities .button{margin-top:18px}

.section_method h2{font-size:40px;line-height:1.1}
.section_method .intro_text{max-width:56ch;margin-top:18px;font-size:16px}






@media (max-width:1180px){
  .solve_grid{grid-template-columns:1fr;gap:24px}
  html.is_js .solve_stage,html.is_js .solve_track{min-height:240px}
  html.is_js .solve_item b{font-size:26px}
  html.is_js .solve_item.is_fallback b{font-size:30px}
}

.portfolio_head{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,88px);align-items:start}
.section_portfolio h2{font-size:40px;line-height:1.1}
.section_portfolio .intro_text{max-width:56ch;margin:6px 0 0;font-size:16px}
.portfolio_tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:34px;align-items:stretch}
.portfolio_tier{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;border:1px solid var(--navy);border-radius:8px;background:var(--navy);color:var(--d-ink);transition:transform .25s ease,border-color .25s ease}
.portfolio_tier .portfolio_level{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-ink-faint);display:flex;align-items:center;gap:10px}
.portfolio_tier .portfolio_tag{display:inline-block;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:none;color:var(--navy);background:var(--amber);border-radius:4px;padding:2px 7px;line-height:1.5}
.portfolio_tier .item_title{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:-.01em;color:var(--d-ink);line-height:1.15;text-wrap:balance;margin-top:16px}
.portfolio_tier .item_text{color:var(--d-ink-soft);font-size:14px;line-height:1.5;text-wrap:pretty;margin-top:12px}
.portfolio_tier .item_text{margin-bottom:18px}
.portfolio_tier .button{margin-top:auto;align-self:stretch;display:flex;justify-content:space-between;width:100%;height:44px;padding:0 12px 0 16px}
.portfolio_tier .button .button_label{white-space:nowrap;text-align:left;line-height:1;font-size:13px}
.portfolio_tier .is_ghost{border-color:rgba(255,255,255,.35)}
.portfolio_tier .is_ghost .button_label,.portfolio_tier .is_ghost .button_arrow{color:var(--d-ink);border-color:rgba(255,255,255,.35)}
.portfolio_tier .is_ghost:hover{border-color:var(--amber)}
.portfolio_tier .is_ghost:hover .button_label{color:var(--amber)}
.portfolio_tier .is_ghost:hover .button_arrow{background:var(--amber);color:var(--navy);border-color:var(--amber)}
.portfolio_tier:hover{transform:translateY(-4px);border-color:rgba(255,180,74,.55)}

.portfolio_tier{--mx:50%;--my:50%;overflow:hidden}
.portfolio_tier::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(255,180,74,.16),transparent 62%);opacity:0;transition:opacity .35s ease}
.portfolio_tier:hover::after{opacity:1}
.portfolio_tier>*{position:relative;z-index:1}
.portfolio_tier.is_flagship::after{background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,180,74,.16),transparent 62%)}
.portfolio_tier.is_flagship .button .button_label{color:var(--navy)}
.portfolio_tier.is_flagship .button{background:var(--amber);transition:background .3s ease,border-color .3s ease}
.portfolio_tier.is_flagship .button::before{display:none}
.portfolio_tier.is_flagship .button:hover,.portfolio_tier.is_flagship .button:focus-visible{background:var(--amber-deep);border-color:var(--amber-deep)}
.portfolio_tier.is_flagship .button:hover .button_label,.portfolio_tier.is_flagship .button:focus-visible .button_label{color:var(--navy)}
.portfolio_tier.is_flagship .button:hover .button_arrow,.portfolio_tier.is_flagship .button:focus-visible .button_arrow{background:var(--navy);color:var(--amber);border-color:var(--navy)}
.portfolio_tier.is_flagship{background:var(--navy);border-color:var(--navy);color:var(--d-ink)}
.portfolio_tier.is_flagship .portfolio_level{color:var(--d-ink-faint)}
.portfolio_tier.is_flagship .item_title{color:var(--d-ink)}
.portfolio_tier.is_flagship .item_text{color:var(--d-ink-soft)}
.portfolio_tier.is_flagship:hover{border-color:rgba(255,180,74,.55)}

@media (max-width:1180px){
  .portfolio_head{grid-template-columns:1fr;gap:24px}
  .portfolio_tiers{grid-template-columns:1fr 1fr;gap:20px}
  .portfolio_tier,.portfolio_tier.is_flagship{min-height:0}
}
.section_portfolio .intro_text{max-width:84ch;margin-top:10px;font-size:16px}

.results_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--line);padding-top:26px;margin-top:4px}
.results_grid .results_figure{font-family:var(--display);font-size:56px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.results_grid .results_detail{font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--navy);margin-top:12px;text-wrap:pretty}
.results_grid .attribution_text{display:flex;gap:12px;align-items:center;margin-top:14px}
.results_grid .attribution_text img{height:20px;width:auto;filter:grayscale(1);opacity:.8}
.results_grid .attribution_text span{font-size:13px;color:var(--ink-faint)}
.testimonials_quotes{margin-top:36px;border-top:1px solid var(--line);padding:28px 0 0 64px;position:relative;min-height:150px}
.testimonials_quotes .testimonials_mark{position:absolute;left:0;top:14px;font-family:var(--display);font-size:96px;line-height:1;color:var(--navy);opacity:.14;pointer-events:none}
.testimonials_quote{position:absolute;inset:28px 0 auto 64px;opacity:0;transition:opacity .6s ease;max-width:78ch}
.testimonials_quote.is_active{opacity:1;position:relative;inset:auto}
.testimonials_quote blockquote{margin:0;font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.01em;line-height:1.35;color:var(--ink);text-wrap:pretty}
.testimonials_quote .attribution_text{margin-top:14px;display:flex;align-items:center;gap:12px}
.testimonials_quote .attribution_text img{height:20px;filter:grayscale(1);opacity:.8}
.testimonials_quote .attribution_text span{font-size:13px;color:var(--ink-faint)}

.section_testimonials{overflow-x:clip}
.section_testimonials h2{max-width:26ch}
.text_nowrap{white-space:nowrap}
.testimonials_card{flex:0 0 236px;position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--d-tint);opacity:.38;filter:grayscale(.75);transform:scale(.9);transition:opacity .65s ease,filter .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.testimonials_card img{width:100%;height:100%;object-fit:cover}
.testimonials_card .testimonials_shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,39,89,0) 45%,rgba(2,39,89,.92))}
.testimonials_card .testimonials_plate{position:absolute;left:16px;right:16px;bottom:14px;color:var(--d-ink)}
.testimonials_card .testimonials_plate b{display:block;font-weight:600;font-size:15px}
.testimonials_card .testimonials_plate span{font-size:13px;color:var(--d-ink-soft)}
.testimonials_card .testimonials_play{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;color:#fff}
.testimonials_card .testimonials_play svg{width:14px;height:14px;fill:currentColor;margin-left:2px}



.section_contact .grid_split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,88px);align-items:start}
.section_contact h2{font-size:44px}
.section_contact .intro_text{font-size:17px;margin-top:16px}
.section_contact .note_text{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:15px;line-height:1.5;max-width:40ch}
form{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.form_field{display:grid;gap:5px}
.form_field.is_full{grid-column:1/-1}
label{font-size:13px;font-weight:600;color:var(--ink-soft)}
input,select,textarea{font:inherit;font-size:15px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--paper-raised);color:var(--ink);width:100%}

select:invalid{color:var(--ink-faint)}
select option{color:var(--ink)}
select option[value=""]{color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy-700);outline-offset:1px;border-color:var(--navy-700)}
textarea{min-height:64px;resize:vertical}
.form_check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-soft);font-weight:400;line-height:1.45}
.form_check input{width:auto;margin-top:3px}
form .button{grid-column:1/-1;justify-self:start;margin-top:4px}
.form_message{grid-column:1/-1;font-size:15px;line-height:1.5;padding:12px 14px;border-radius:8px}
.form_message.is_success{background:#eaf3ec;color:#1f4d2b;border:1px solid #cfe3d4}
.form_message.is_error{background:#fbeeee;color:#7a1f1f;border:1px solid #f0cfcf}

footer{background:var(--navy);color:var(--d-ink)}

@media (min-width:1800px){
  body{font-size:19px}
  .eyebrow_text{font-size:.95rem}
  h2{font-size:clamp(2.4rem,3.4vw,60px)}
  .intro_text{font-size:21px}
  .button{height:60px;font-size:17px;padding:0 22px 0 28px}
  .button .button_arrow{width:32px;height:32px}
  :is(.trust_stat) :is(.trust_stat_number){font-size:88px}
  :is(.trust_stat) .trust_stat_detail{font-size:1rem}
  .section_develop h2{font-size:48px}
  .section_develop .body_text,.section_develop .lead_text,.section_develop ul li{font-size:18px}
  .develop_capability b{font-size:22px}
  .develop_capability span{font-size:16px}
  .develop_capability{padding:18px 0}
  .solve_index b{font-size:16px}
  html.is_js .solve_item b{font-size:34px}
  html.is_js .solve_item.is_fallback b{font-size:40px}
}

html.is_js [data-reveal]{opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}
@media (max-width:900px){
  [data-reveal]{opacity:1;transform:none}
  .trust_stats,.results_grid{grid-template-columns:1fr;gap:28px}
  .section_develop .grid_split,.section_contact .grid_split{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
}

#results blockquote{margin:0;padding:0;border:0;border-left:0}

#enquiry .w-input,#enquiry .w-select{margin:0;padding:7px 11px;border:1px solid var(--line);border-radius:8px;font:400 15px/24px var(--body);color:var(--ink);background:var(--paper-raised);height:auto;vertical-align:baseline}
#enquiry .w-select{line-height:normal}
#enquiry select.w-select:invalid{color:var(--ink-faint);background:var(--tint)}
#enquiry textarea.w-input{min-height:64px}
#enquiry label{margin:0}
#enquiry .w-checkbox{display:contents}
#enquiry .w-checkbox .w-form-label{display:none}
#enquiry .w-checkbox-input{margin:3px 3px 3px 4px;font-weight:400;line-height:1.45}
#enquiry .form_check{font-weight:400}

#enquiry input[type=submit].button{width:auto;justify-self:start;height:60px;padding:0 74px 0 28px;text-align:left;cursor:pointer;background:var(--amber) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%23022759'/><path d='M9 16h14M17 10l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 19px center/32px 32px;transition:background-color .3s ease,filter .3s ease}
#enquiry input[type=submit].button:hover,#enquiry input[type=submit].button:focus-visible{background-color:var(--amber-deep);color:var(--navy);border-color:var(--amber-deep)}

#enquiry ~ .form_message.w-form-done,#enquiry ~ .form_message.w-form-fail{display:none;margin:0;padding:14px 16px;text-align:left;background:none}
#enquiry ~ .form_message.w-form-done.is_success{background:#eef7ee}
#enquiry ~ .form_message.w-form-fail.is_error{background:#fdecec}

@media (min-height:1000px){
  :is(#problem,#solve,#develop,#method,#portfolio,#trust,#loop,#results,#video,#contact)>div:first-child{margin-block:auto}
}

#portfolio.section_portfolio{background:#f6f4f0}
#portfolio .portfolio_head{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(48px,7vw,104px);align-items:end}
#portfolio .portfolio_head h2{font-size:clamp(42px,3.5vw,58px);line-height:1.02;letter-spacing:-.035em;max-width:14ch}
#portfolio .portfolio_head .intro_text{font-size:17px;line-height:1.65;max-width:64ch;margin:0;padding:0 0 4px}
#portfolio .portfolio_tiers{gap:18px;margin-top:52px;align-items:stretch}
#portfolio .portfolio_tier{min-height:380px;padding:30px 28px 28px;border-radius:12px;overflow:hidden;transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease}
#portfolio .portfolio_tier::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--navy);z-index:2}
#portfolio .portfolio_tier:not(.is_flagship){background:#fff;color:var(--ink);border-color:rgba(2,39,89,.18);box-shadow:0 14px 34px rgba(2,39,89,.08)}
#portfolio .portfolio_tier:not(.is_flagship) .portfolio_level{color:#657185}
#portfolio .portfolio_tier .portfolio_level{font-size:11px;letter-spacing:.17em;font-weight:600}
#portfolio .portfolio_tier .portfolio_level::after{content:"";height:1px;flex:1;background:currentColor;opacity:.24}
#portfolio .portfolio_tier:not(.is_flagship) .item_title{color:var(--navy)}
#portfolio .portfolio_tier .item_title{font-size:clamp(23px,1.75vw,27px);line-height:1.08;letter-spacing:-.025em;margin-top:26px}
#portfolio .portfolio_tier:not(.is_flagship) .item_text{color:var(--ink-soft)}
#portfolio .portfolio_tier .item_text{font-size:15px;line-height:1.58;margin-top:16px;margin-bottom:28px}
#portfolio .portfolio_tier:not(.is_flagship) .is_ghost{border-color:rgba(2,39,89,.28)}
#portfolio .portfolio_tier:not(.is_flagship) .is_ghost .button_label,
#portfolio .portfolio_tier:not(.is_flagship) .is_ghost .button_arrow{color:var(--navy);border-color:rgba(2,39,89,.32)}
#portfolio .portfolio_tier:not(.is_flagship) .is_ghost:hover{border-color:var(--navy)}
#portfolio .portfolio_tier:not(.is_flagship) .is_ghost:hover .button_arrow{background:var(--navy);color:var(--amber);border-color:var(--navy)}
#portfolio .portfolio_tier.is_flagship{min-height:410px;margin-top:-15px;margin-bottom:-15px;padding-top:34px;padding-bottom:34px;border-color:var(--navy);box-shadow:0 24px 54px rgba(2,39,89,.24)}
#portfolio .portfolio_tier.is_flagship::before{height:5px;background:var(--amber)}
#portfolio .portfolio_tier.is_flagship .portfolio_tag{box-shadow:0 0 0 1px rgba(255,180,74,.35)}
#portfolio .portfolio_tier:hover{transform:translateY(-7px);box-shadow:0 24px 58px rgba(2,39,89,.16)}
#portfolio .portfolio_tier.is_flagship:hover{box-shadow:0 30px 66px rgba(2,39,89,.30)}
#portfolio .portfolio_tier .button{height:48px;padding-left:17px;padding-right:11px;border-radius:7px}
#portfolio .portfolio_tier .button .button_label{font-size:13px;font-weight:650;letter-spacing:0}
@media screen and (max-width:1180px){
 #portfolio .portfolio_head{grid-template-columns:1fr;gap:22px;align-items:start}
 #portfolio .portfolio_head h2{max-width:18ch}
 #portfolio .portfolio_tiers{grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
 #portfolio .portfolio_tier,#portfolio .portfolio_tier.is_flagship{min-height:360px;margin:0}
}
@media screen and (max-width:767px){
 #portfolio .portfolio_tiers{grid-template-columns:1fr}
 #portfolio .portfolio_tier,#portfolio .portfolio_tier.is_flagship{min-height:0}
}


:where(a,button,input,select,textarea,[role="button"]):focus-visible{outline:2px solid var(--amber);outline-offset:3px}

@media screen and (max-width:991px){
 :root{--gutter:48px}
}

@media screen and (max-width:900px){
 #contact .grid_split{gap:36px}
}

@media screen and (max-width:767px){
 :root{--gutter:32px}
 section{padding-top:60px;padding-bottom:60px}
 .eyebrow_text{margin-bottom:18px}
 #portfolio .portfolio_head h2{font-size:clamp(36px,9vw,46px);max-width:16ch}
 #portfolio .portfolio_head .intro_text{font-size:16px;line-height:1.6}
 #portfolio .portfolio_tiers{gap:16px;margin-top:32px}
 #portfolio .portfolio_tier,#portfolio .portfolio_tier.is_flagship{padding:26px 24px;min-height:0}
 #portfolio .portfolio_tier .item_title{font-size:25px}
 #video .testimonials_card{flex-basis:min(76vw,260px)}
 #contact .note_text{max-width:none}
 #enquiry input[type=submit].button{min-height:54px}
}

@media screen and (max-width:479px){
 :root{--gutter:36px}
 body{font-size:16px}
 h2{font-size:clamp(30px,9vw,38px);line-height:1.08}
 .eyebrow_text{font-size:.72rem;letter-spacing:.13em}
 #portfolio .portfolio_tier,#portfolio .portfolio_tier.is_flagship{padding:24px 20px}
 #portfolio .portfolio_tier .button{height:48px}
 #contact .grid_split{gap:30px}
 #enquiry input[type=submit].button{width:100%;justify-self:stretch}
}

#solve .solve_index li{transition:background-color .28s ease,border-color .28s ease}
#solve .solve_index li.is_active{background:linear-gradient(90deg,rgba(255,180,74,.11),transparent 72%);border-top-color:rgba(255,180,74,.46)}
#solve .solve_index li.is_active a{transform:translateX(8px)}
#solve .solve_intro{position:relative;isolation:isolate}
#solve .solve_intro::before{
  content:"";position:absolute;inset:-46px -24px -12px;z-index:-1;pointer-events:none;
  border:1px solid rgba(255,255,255,.075);border-radius:14px;
  background:
    radial-gradient(circle at 8% 48%,rgba(255,180,74,.10),transparent 58%),
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 64%);
  box-shadow:inset 0 1px rgba(255,255,255,.055);
}
#solve .button{min-width:172px;justify-content:space-between}
@media screen and (min-width:1800px){#solve .button{min-width:188px}}
@media screen and (max-width:991px){
  #solve .solve_intro::before{inset:-42px -14px -10px;border-radius:12px}
  #solve .button{min-width:168px}
}


#portfolio{overflow:hidden}
#portfolio::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 67% 54%,rgba(255,180,74,.10),transparent 34%);
}
#portfolio .portfolio_head,#portfolio .portfolio_tiers{position:relative}
#portfolio .portfolio_tier{isolation:isolate}
#portfolio .portfolio_tier>*{position:relative;z-index:2}
#portfolio .portfolio_tier.is_flagship{transform:translateY(-2px)}


@media (hover:none){#portfolio .portfolio_tier:hover,#portfolio .portfolio_tier.is_flagship:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  #solve .solve_index li,#method .method_journey li,#loop .method_loop li{transition:none}
}

:is(#top,#problem,#solve,#develop,#method,#portfolio,#trust,#loop,#results,#video,#contact) :is(p,li,blockquote,.intro_text,.body_text,.lead_text,.method_desc,.trust_stat_detail,.item_text,.note_text,.button_label){word-spacing:.1em}

#develop .button{height:54px;font-size:16px;padding:0 19px 0 25px;border-radius:8px}
#enquiry input[type=submit].button{height:54px}

#develop .develop_capability:last-of-type{border-bottom:0}
#develop .develop_capabilities>.button{margin-top:26px}

@media screen and (min-width:1800px){
  #develop .button{height:60px;font-size:17px;padding:0 22px 0 28px}
  #enquiry input[type=submit].button{height:60px}
}

@media screen and (max-width:991px){

  :is(#problem,#solve,#develop,#method,#portfolio,#trust,#loop,#results,#video,#contact){
    min-height:0!important;height:auto!important;align-items:flex-start!important
  }
  :is(#problem,#solve,#develop,#method,#portfolio,#trust,#loop,#results,#video,#contact)>div:first-child{
    margin-block:0!important
  }

}

@media screen and (max-width:991px){

  :is(#problem,#solve,#develop,#method,#portfolio,#trust,#loop,#results,#video,#contact)[data-scene]{align-items:flex-start!important}
}


.closing_scene{position:relative}
@media screen and (min-width:1600px) and (min-height:900px) and (pointer:fine){
  .closing_scene{
    min-height:100svh;height:100svh;display:grid;
    grid-template-rows:minmax(0,1fr) auto;overflow:hidden;background:var(--paper);
  }
  #contact[data-scene]{
    min-height:0;height:auto;padding:clamp(32px,3.6svh,50px) 0;
    align-items:center!important;
  }
  #contact>div:first-child{
    margin-block:0!important;
    transform:translateY(clamp(14px,1.6svh,22px));
  }
}
@media screen and (min-width:2200px) and (min-height:1000px) and (pointer:fine){
  #contact>div:first-child{transform:translateY(clamp(32px,3.2svh,42px))}
}

#video .testimonials_card{
  flex:0 0 clamp(250px,19vw,310px);
  width:auto;
  height:auto;
  aspect-ratio:3/4;
  opacity:.76;
  filter:grayscale(.42);
  transform:scale(.965);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  box-shadow:0 18px 42px rgba(0,16,43,.24);
  transition:opacity .28s ease,filter .28s ease,transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
#video .testimonials_card:hover,
#video .testimonials_card:focus-visible{
  opacity:1;
  filter:none;
  transform:scale(1.02);
  border-color:rgba(255,180,74,.5);
  box-shadow:0 26px 58px rgba(0,16,43,.38);
  z-index:2;
}
#video .testimonials_card .testimonials_play{
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
#video .testimonials_card:hover .testimonials_play,
#video .testimonials_card:focus-visible .testimonials_play{
  background:var(--amber);
  border-color:var(--amber);
  color:var(--navy);
  transform:scale(1.06);
}
@media screen and (max-width:991px){
  #video .testimonials_card{flex-basis:clamp(230px,38vw,280px)}
}
@media screen and (max-width:479px){
  #video .testimonials_card{
    flex-basis:min(72vw,268px);
    border-radius:10px;
  }
}
@media (prefers-reduced-motion:reduce){
  #video .testimonials_card{
    scroll-snap-align:center;
    opacity:1;
    filter:none;
    transform:none;
  }
}



#portfolio .portfolio_tier.is_flagship{
  min-height:380px;
  margin-top:0;
  margin-bottom:0;
  padding:30px 28px 28px;
  transform:none;
}
@media (hover:hover) and (pointer:fine){
  #portfolio .portfolio_tier:hover,
  #portfolio .portfolio_tier.is_flagship:hover{
    transform:scale(1.025);
    z-index:3;
  }
}
@media screen and (max-width:1180px){
  #portfolio .portfolio_tier.is_flagship{min-height:360px}
}
@media screen and (max-width:767px){
  #portfolio .portfolio_tier.is_flagship{
    min-height:0;
    padding:26px 24px;
  }
}
@media screen and (max-width:479px){
  #portfolio .portfolio_tier.is_flagship{padding:24px 20px}
}

#enquiry input[type="submit"].button{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  box-sizing:border-box;
  width:auto!important;
  min-width:144px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 24px!important;
  justify-self:start;
  border:1px solid var(--amber);
  border-radius:7px;
  background:var(--amber);
  color:var(--navy);
  font-size:14px;
  font-weight:650;
  line-height:48px;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
}
#enquiry input[type="submit"].button:hover,
#enquiry input[type="submit"].button:focus-visible{
  background:var(--navy);
  color:var(--amber);
}
@media screen and (max-width:479px){
  #enquiry input[type="submit"].button{
    width:100%!important;
    min-width:0!important;
    justify-self:stretch;
  }
}

#solve .is_fallback .button{
  min-width:172px;
  min-height:48px;
  padding:0 11px 0 20px;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--amber)!important;
  border-radius:7px;
  background:var(--amber)!important;
  color:var(--navy)!important;
}
#solve .is_fallback .button .button_label{color:var(--navy)!important}
#solve .is_fallback .button .button_arrow{
  background:var(--navy)!important;
  border-color:var(--navy)!important;
  color:var(--amber)!important;
}
#solve .is_fallback .button:hover,
#solve .is_fallback .button:focus-visible{background:transparent!important;color:var(--amber)!important}
#solve .is_fallback .button:hover .button_label,
#solve .is_fallback .button:focus-visible .button_label{color:var(--amber)!important}
#solve .is_fallback .button:hover .button_arrow,
#solve .is_fallback .button:focus-visible .button_arrow{
  background:var(--amber)!important;
  border-color:var(--amber)!important;
  color:var(--navy)!important;
}
@media screen and (max-width:479px){
  #solve .is_fallback .button{width:auto;min-width:148px;max-width:100%}
}

/* ==== Vertical rhythm ==== */
html body .section_hero{background-color:#021634!important}
html body #top .hero_summary{margin-top:32px!important;color:rgba(255,255,255,.72)!important;max-width:600px!important}
html body #solve .eyebrow_text{margin-bottom:22px!important}
html body #solve h2~.intro_text,html body #method h2~.intro_text,html body #loop h2~.intro_text,html body #contact .contact_ask .intro_text,html body #develop h2~.body_text{margin-top:24px!important}

/* ==== Header and navigation ==== */
.navbar_component{z-index:1}

/* ==== Hero ==== */
.section_hero{position:sticky;top:0;z-index:0;height:100svh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:var(--d-ink);overflow:hidden;padding:0}
.section_hero{background:none}
.hero_scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(2,39,89,.92) 0%,rgba(2,39,89,.78) 38%,rgba(2,39,89,.35) 70%,rgba(2,39,89,.55) 100%)}
.hero_scrim::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,rgba(2,39,89,0),rgba(2,39,89,.85))}
.section_hero .hero_container{position:relative;z-index:2;width:100%;min-height:100svh;display:flex;align-items:center;padding-top:0;padding-bottom:0}
.section_hero h1{font-size:60px}
.hero_buttons{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:34px}
@media (min-width:1800px){
  .section_hero h1{font-size:72px}
}
@media (max-width:900px){
  .section_hero h1{font-size:clamp(2.5rem,7vw,3.25rem);line-height:1.02;text-wrap:pretty}
  .section_hero .hero_container{padding-top:110px}
}

#top h1{max-width:17ch;text-wrap:balance}

#top .hero_container{padding-bottom:clamp(84px,9svh,104px)}

#top .button::before{z-index:0}
#top .button .button_label,#top .button .button_arrow{position:relative;z-index:1}
#top .button:hover::before,#top .button:focus-visible::before{transform:scale(0)}
/* the Problems we solve button closes the same way, into its arrow (Dex, 28 Sep): the fill centred on the arrow (the
   button's 11px padding and 1px border, plus half the 28px arrow) and shrinking to nothing */
#solve .button::before{right:12px}
#solve .button:hover::before,#solve .button:focus-visible::before{transform:scale(0)}

#top .hero_proof{box-sizing:border-box;overflow:hidden}
#top .hero_proof_inner{box-sizing:border-box;width:100%;max-width:1280px}
#top .hero_proof_logos{min-width:0}
#top .hero_proof_logo{
  box-sizing:border-box;min-width:0;max-width:132px;object-fit:contain;
  filter:grayscale(1) invert(1)!important;opacity:.82!important
}

@media screen and (min-width:992px){
  #top .hero_proof{padding-top:14px;padding-bottom:16px}
  #top .hero_proof_inner{gap:clamp(24px,3.2vw,52px)}
  #top .hero_proof_label{font-size:9.5px;letter-spacing:.13em}
  #top .hero_proof_logos{gap:clamp(20px,2.4vw,42px)}
  #top .hero_proof_logo{height:25px;max-width:112px}
  #top .is_tall{height:29px}
  #top .is_short{height:23px}
}

@media screen and (min-width:901px) and (max-width:1100px){
  #top h1{font-size:clamp(46px,5.2vw,56px)}
}

@media screen and (min-width:1800px){
  #top .button::before{right:22px;width:32px;height:32px;margin-top:-16px}
}

@media screen and (max-width:991px){
  #top .hero_container{padding-bottom:76px}
  #top .hero_proof{padding-left:var(--gutter,32px);padding-right:var(--gutter,32px)}
  #top .hero_proof_inner{max-width:none;gap:18px}
  #top .hero_proof_label{text-align:left;white-space:normal}
  #top .hero_proof_logos{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,6vw,56px);row-gap:22px}
  #top .hero_proof_logo{width:100%;max-width:118px}
}

@media screen and (max-width:479px){
  #top .hero_container{padding-top:88px;padding-bottom:68px}
  #top h1{font-size:clamp(34px,10.4vw,42px);line-height:1.02}
  #top .hero_buttons{margin-top:24px}
  #top .button{
    width:fit-content;max-width:100%;height:54px;padding:0 13px 0 16px;align-self:flex-start;
    justify-content:flex-start;gap:8px;font-size:13px;white-space:nowrap
  }
  #top .button .button_arrow{width:26px;height:26px}
  #top .button::before{right:13px;width:26px;height:26px;margin-top:-13px}
  #top .hero_proof{padding-left:20px;padding-right:20px}
  #top .hero_proof_logos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:20px}
  #top .hero_proof_logo{max-width:112px}
  #top .hero_proof_logos>img:nth-child(n+5){display:none}
}

/* ==== The organisational problem ==== */
/* The organisational problem: ONE picture, and the words on its wall (batch P4, 10 Oct 2026; Dex's direction: "I want
   the image to be the hero while the content changes alongside it"). Before it the section had three photographs, one
   a scene, each under a white panel (batch P2, 4 Oct; in git).
   The picture is one wide photograph of a boardroom: a pale wall across its left half, two colleagues and the
   presenter on its right. It never moves. The three scenes' words stand on the wall.
   The Designer holds the words and the photographs: three scenes (story_scene is_1 to is_3), each its copy
   (story_copy) and a photograph in a frame (story_frame > story_photo), inside story_stage > story_card. Only the
   FIRST scene's photograph is drawn, on every screen; the other two stay in the Designer undrawn (display:none, so a
   browser does not fetch them). This layer is every rule the section has. One card, three arrangements:
     upright (under 1140px): the picture across the top of the card, the three scenes' words beneath it, one after
       another;
     wide (from 1140px): the whole picture across the top of the card with scene 1's words on its wall; scenes 2 and
       3 beneath it, side by side;
     the story (class is_story, set by the section's scene in c4s-home.js: from 1140px, a mouse, 680px of height,
       wider than tall, motion allowed): the card IS the picture and holds one screen while the page scrolls; the
       three scenes' words change on the wall.
   WHERE THE WORDS MAY STAND is the picture's own geometry, measured from the picture (images-session/a2-story-first/
   wall-facts.py), in hundredths of the picture's width, which is the card's width (cqw), across AND down:
     down to 24: the wall is clear to 53 across;
     from 24 to 35.5 down (beside the seated woman): clear to 44.4 across;
     from 35.9 down (a chair's back): clear to 34.8 across only.
   So the words keep between --wall-top and --wall-foot down, headings end by --wall-head across and text and
   statements by --wall-text; and type is sized in the same unit, so the words keep their size against the picture
   on every screen. ANOTHER PICTURE NEEDS THESE FOUR NUMBERS READ AGAIN, and the section's check run
   (audit/build/p4/story-check.mjs).
   Sizes, weights and gaps are the homepage's own (measured: evidence-2026-10-04/p2/house/). Upright headings are
   500, italics 600: the site carries the heading font (Inter Tight) in 400 and 500 upright and 600 italic only.
   To tune: --story-accent / --story-em (the orange), --story-travel (how far the page scrolls while the story holds). */

/* ---- the section ---- */
html body #organisational-problem{
  --story-accent:var(--amber);--story-accent-soft:rgba(255,180,74,.42);--story-em:var(--amber);
  --story-ink:var(--navy);--story-body:var(--ink-soft);--story-line:rgba(2,39,89,.13);
  --story-travel:260svh;--story-pad:clamp(40px,4.2vw,84px);--story-radius:clamp(20px,2.1vw,30px);
  --wall-top:5cqw;--wall-foot:34.5cqw;--wall-head:45cqw;--wall-text:41.5cqw;
  --copy-pad:24px;
  min-height:0;padding:clamp(56px,5vw,72px) 0
}
#organisational-problem .story_stage{box-sizing:border-box;width:100%;padding-inline:12px}

/* ---- the words ---- */
#organisational-problem .eyebrow_dotted{margin:0 0 22px}
#organisational-problem .story_heading{margin:0;font-family:var(--display);font-size:clamp(1.75rem,1.6rem + .9vw,1.875rem);font-weight:500;line-height:1.18;letter-spacing:-.02em;color:var(--story-ink);text-wrap:balance}
#organisational-problem .story_heading em{font-style:italic;font-weight:600;color:var(--story-em)}
#organisational-problem .story_text{margin:0;font-family:var(--body);font-size:16px;font-weight:400;line-height:1.6;color:var(--story-body);max-width:60ch;text-wrap:pretty}
#organisational-problem .story_heading+.story_text{margin-top:24px}
/* the three statements: a ring before each, each joined to the next by a fine line */
#organisational-problem .story_points{--point-pad:13px;--ring-x:-27px;margin-top:20px;padding-left:34px}
#organisational-problem .story_point{position:relative;margin:0;padding:var(--point-pad) 0;border-bottom:1px solid var(--story-line);font-family:var(--display);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--story-ink);text-wrap:balance}
#organisational-problem .story_point:last-child{border-bottom:0}
#organisational-problem .story_point::before{--ring:clamp(12px,.54em,18px);content:"";position:absolute;z-index:1;left:calc(var(--ring-x) - var(--ring) / 2);top:calc(var(--point-pad) + .6em - var(--ring) / 2);box-sizing:border-box;width:var(--ring);height:var(--ring);border:2.5px solid var(--story-accent);border-radius:50%;background:#fff}
#organisational-problem .story_point:not(:last-child)::after{content:"";position:absolute;left:calc(var(--ring-x) - 1px);top:calc(var(--point-pad) + .6em);bottom:calc(-1px - var(--point-pad) - .6em);width:2px;background:var(--story-accent-soft)}
#organisational-problem .story_point em{font-style:italic;font-weight:600;color:var(--story-em)}

/* ---- one card, one picture. Upright: the picture across the top (it stands at its right edge, so the presenter and
   both colleagues show), cut at its foot to a soft step (--story-edge: high over the left half, a step down at exactly
   half the width, low over the right half, round where it meets the card's sides); the scenes' words beneath it, a
   fine line between one scene and the next ---- */
#organisational-problem .story_card{container-type:inline-size;overflow:hidden;border-radius:var(--story-radius);background:#fff;box-shadow:0 1px 2px rgba(2,22,52,.05),0 22px 48px -30px rgba(2,22,52,.3)}
#organisational-problem .story_scene{position:relative;display:flex;flex-direction:column}
#organisational-problem :is(.is_2,.is_3) .story_frame{display:none}
#organisational-problem .story_frame{order:-1;overflow:hidden;aspect-ratio:1.1;max-height:70svh;-webkit-mask:var(--story-edge) 0 0/100% 100% no-repeat;mask:var(--story-edge) 0 0/100% 100% no-repeat;
  --story-edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V100C100 96 97.1 92.8 93.5 92.8H62C54 92.8 46 83.8 38 83.8H6.5C2.9 83.8 0 87 0 91Z'/%3E%3C/svg%3E")}
#organisational-problem .story_photo{display:block;width:100%;max-width:none;height:100%;object-fit:cover;object-position:100% 35%}
#organisational-problem .story_copy{position:relative;padding:10px var(--copy-pad) 36px}
#organisational-problem :is(.is_2,.is_3) .story_copy{padding-top:32px}
#organisational-problem :is(.is_2,.is_3) .story_copy::before{content:"";position:absolute;top:0;left:var(--copy-pad);right:var(--copy-pad);height:1px;background:var(--story-line)}

@media screen and (min-width:480px){
  html body #organisational-problem{--copy-pad:20px}
}
@media screen and (min-width:600px){
  #organisational-problem .story_frame{aspect-ratio:1.6;--story-edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V100C100 96.1 98 93 95.6 93H58.2C52.7 93 47.3 84.2 41.8 84.2H4.4C2 84.2 0 87.3 0 91.2Z'/%3E%3C/svg%3E")}
  #organisational-problem .story_copy{padding-top:14px;padding-bottom:42px}
  #organisational-problem :is(.is_2,.is_3) .story_copy{padding-top:36px}
}
@media screen and (min-width:768px){
  html body #organisational-problem{--copy-pad:28px}
  #organisational-problem .story_stage{padding-inline:20px}
  #organisational-problem .story_copy{padding-top:16px;padding-bottom:48px}
  #organisational-problem :is(.is_2,.is_3) .story_copy{padding-top:40px}
  #organisational-problem .story_heading{font-size:32px;line-height:1.15}
  #organisational-problem .story_points{--point-pad:15px}
  #organisational-problem .story_point{font-size:24px}
}
/* from 992px the card runs past the page's gutter by its own padding, so the words still start on the logo's line */
@media screen and (min-width:992px){
  html body #organisational-problem{--copy-pad:var(--story-pad)}
  #organisational-problem .story_stage{max-width:var(--max);margin-inline:auto;padding-inline:calc(var(--gutter) - var(--story-pad))}
  #organisational-problem .story_copy{padding-top:22px;padding-bottom:56px}
  #organisational-problem :is(.is_2,.is_3) .story_copy{padding-top:44px}
  /* the three statements, each on one line: never wider than the card allows */
  #organisational-problem .story_points{--ring-x:-31px;margin-top:24px;padding-left:38px}
  #organisational-problem .story_point{font-size:min(24px,2.15cqw);white-space:nowrap}
}
@media screen and (min-width:992px) and (pointer:fine){
  #organisational-problem .story_heading{font-size:36px}
  #organisational-problem .story_text{font-size:17px;line-height:1.55}
  #organisational-problem .story_point{font-size:min(28px,2.15cqw)}
}

/* ---- wide (from 1140px: the card is then at least 1,040px, wide enough for scene 1's words to stand clear of the
   people): the whole picture across the top of the card, scene 1's words on its wall; scenes 2 and 3 beneath it,
   side by side, a fine upright line between them. The words on the wall are sized in hundredths of the card's width,
   as the picture is, so they keep their place against it ---- */
@media screen and (min-width:1140px){
  #organisational-problem .story_card{display:grid;grid-template-columns:1fr 1fr}
  #organisational-problem .story_scene.is_1{grid-column:1 / -1;display:block;aspect-ratio:1672 / 941}
  #organisational-problem .is_1 .story_frame{position:absolute;inset:0;aspect-ratio:auto;max-height:none;-webkit-mask:none;mask:none}
  #organisational-problem .is_1 .story_photo{object-position:50% 0}   /* the whole width; if the card is lower than the picture, its top */
  #organisational-problem .is_1 .story_copy,
  #organisational-problem.is_story .story_copy{position:absolute;z-index:1;left:var(--story-pad);top:var(--wall-top);box-sizing:border-box;width:calc(50cqw - var(--story-pad));height:calc(var(--wall-foot) - var(--wall-top));display:flex;flex-direction:column;justify-content:center;padding:0}
  /* on the wall the orange is the house's deeper one (--amber-deep): the wall is darker than the page's white, and the
     lighter orange all but vanishes on it (measured: 1.09 to 1 against the wall, 1.77 against white). And a wash of
     light lies on the wall under the words, fading out before the people and the chairs (it ends by 44 across and
     35.5 down): with it the deeper orange reads as the lighter one does on white */
  #organisational-problem .is_1,
  #organisational-problem.is_story .story_scene{--story-em:var(--amber-deep)}
  #organisational-problem .is_1 .eyebrow_dotted{margin-bottom:clamp(14px,1.6cqw,22px);color:var(--amber-deep)}
  #organisational-problem .is_1 .story_frame::after{content:"";position:absolute;left:0;top:0;width:44cqw;height:35.5cqw;pointer-events:none;background:linear-gradient(to right,rgba(255,253,250,.5) 0,rgba(255,253,250,.5) 76%,rgba(255,253,250,0) 100%);-webkit-mask:linear-gradient(to bottom,#000 78%,transparent);mask:linear-gradient(to bottom,#000 78%,transparent)}
  #organisational-problem .is_1 .story_heading,
  #organisational-problem.is_story .story_heading{max-width:calc(var(--wall-head) - var(--story-pad));font-size:clamp(28px,3.1cqw,44px);line-height:1.1}
  #organisational-problem .is_1 .story_text,
  #organisational-problem.is_story .story_text{max-width:calc(var(--wall-text) - var(--story-pad));font-size:clamp(14px,1.3cqw,20px);line-height:1.5}
  #organisational-problem .is_1 .story_heading+.story_text,
  #organisational-problem.is_story .story_heading+.story_text{margin-top:clamp(16px,1.8cqw,24px)}
  #organisational-problem :is(.is_2,.is_3) .story_copy{padding:clamp(36px,3.6cqw,56px) var(--story-pad) clamp(40px,4cqw,60px)}
  #organisational-problem .is_2 .story_copy::before{display:none}
  #organisational-problem .is_3 .story_copy::before{top:clamp(36px,3.6cqw,56px);bottom:clamp(40px,4cqw,60px);left:0;right:auto;width:1px;height:auto}
  #organisational-problem .story_point{font-size:clamp(18px,1.7cqw,26px);white-space:normal}   /* each on one line in its half of the card; if one ever does not fit it turns, it does not run out */

  /* ---- the story: the card is the picture and holds a screen (class set by the scene script); the three scenes'
     words lie on one another on the wall, and the script shows one at a time ---- */
  html body #organisational-problem.is_story{height:calc(100svh + var(--story-travel));padding:0}
  /* a whole number of pixels, as the section had before (four screens): the sections after it then stand on whole pixels too */
  @supports (height:round(1.5px,1px)){html body #organisational-problem.is_story{height:round(calc(100svh + var(--story-travel)),1px)}}
  #organisational-problem.is_story .story_stage{position:sticky;top:0;display:flex;align-items:center;height:100svh}
  #organisational-problem.is_story .story_card{position:relative;display:block;isolation:isolate;width:100%;aspect-ratio:1672 / 941;max-height:calc(100svh - clamp(72px,11svh,120px));box-shadow:0 1px 2px rgba(2,22,52,.05),0 30px 70px -40px rgba(2,22,52,.38)}
  #organisational-problem.is_story .story_scene{position:static;display:block;aspect-ratio:auto}
  #organisational-problem.is_story .story_copy{will-change:opacity,transform}
  #organisational-problem.is_story .story_copy::before{display:none}
  #organisational-problem.is_story .story_points{--point-pad:clamp(9px,1cqw,15px);max-width:calc(var(--wall-text) - var(--story-pad));margin-top:clamp(12px,1.4cqw,20px);box-sizing:border-box}
  #organisational-problem.is_story .story_point{font-size:clamp(18px,1.8cqw,28px)}   /* each on one line beside the people (measured: the longest is 17.7 times its size wide) */
  /* until the script draws its first frame: the first scene */
  #organisational-problem.is_story :is(.is_2,.is_3) .story_copy{padding:0;opacity:0}
}


/* ==== Problems we solve ==== */
@media screen and (min-width:992px){
  #solve .solve_grid{align-items:start}
  #solve .solve_intro::before{inset:-84px -28px -8px}
  #solve .solve_index{align-self:center;position:relative;top:-38px}
  #solve .solve_index li a{padding-top:4px;padding-bottom:4px}

  #solve .solve_intro .intro_text,
  #solve .solve_item.is_fallback p{font-size:18px;line-height:28px}
  #solve .solve_index b{font-size:17px;line-height:1.35}
  #solve .solve_index i{font-size:13px}
  #solve .solve_index span{font-size:12px;letter-spacing:.1em}
}

/* ==== How we develop performance ==== */
@media screen and (min-width:992px){
  #develop>div:first-child{padding-bottom:37px}
  #develop .grid_split{align-items:stretch}
  #develop .develop_argument ul li{max-width:none}
  #develop .develop_argument>.button{margin-top:44px}
  #develop .develop_capabilities{display:flex;flex-direction:column}
  #develop .develop_capabilities .develop_capability{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
}

/* ==== The method ==== */
/* The method's first part, the organisational journey, on the navy ground (batch M3, 7 Oct 2026; Dex: the section
   freezes and tells its story, the five stages as five cards of which one is open, after the reference he chose).
   Centred: the label, the heading and its intro; then the journey's own title; then the five stages.
   - From 992px the stages are a row of cards, one open and four closed. A card opens when it is pointed at, tapped
     or reached by keyboard, and stays open (c4s-home.js sets is_open; before the script runs the first is open).
     Only widths, places and opacities move, so nothing re-wraps while a card opens: each card's words are set to
     the width of an OPEN card from the start.
   - Under 992px there is no room for a row of cards: the five numbers become a row of tabs, and the open stage
     shows as one card with its name on it and its words beneath.
   - Where the desktop story plays (is_scene, set by the script), the section holds while the page scrolls: first
     the heading and intro alone, then the journey with its stages opening in turn.
   A stage's picture is the custom property --c4s-journey-1 to -5 (none is set here: without one a card stands on
   its navy ground). The method's second part, the development loop, has its own section: "The development loop".
   Type sizes come from the shared type rules per screen where these rules do not set one. */
.section_method .eyebrow_text{justify-content:center}
.section_method .method_system{margin-top:18px}
.section_method .method_intros{text-align:center}
.section_method .method_intros h2{margin:0}
.section_method .method_intros .intro_text{margin-inline:auto}
.section_method .method_models{margin-top:40px}
.section_method .method_intro{text-align:center}
.section_method .method_kicker{font:600 11.5px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.section_method .method_intro h3{margin-top:10px;font-size:22px;line-height:1.22;color:var(--d-ink)}
.section_method .method_desc{margin:8px auto 0}

/* the five stages: what every screen shares. The list is the measure of its stages (container): their widths are set
   in its own width (cqw). */
.section_method .method_journey{--stage-gap:16px;--stage-pad:clamp(24px,2.6vw,40px);--stage-h:clamp(320px,62svh,500px);--stage-ease:cubic-bezier(.25,.1,.25,1);
  container-type:inline-size;list-style:none;margin:36px 0 0;padding:0;text-align:left}
.section_method .method_journey li:nth-child(1){--stage-pic:var(--c4s-journey-1)}
.section_method .method_journey li:nth-child(2){--stage-pic:var(--c4s-journey-2)}
.section_method .method_journey li:nth-child(3){--stage-pic:var(--c4s-journey-3)}
.section_method .method_journey li:nth-child(4){--stage-pic:var(--c4s-journey-4)}
.section_method .method_journey li:nth-child(5){--stage-pic:var(--c4s-journey-5)}
.section_method .method_journey i{font:600 13px/1 var(--display);font-style:normal;letter-spacing:.04em;color:var(--amber)}
.section_method .method_journey b{font:500 clamp(24px,2.1vw,32px)/1.2 var(--display);letter-spacing:-.02em;color:#fff}
.section_method .method_journey li>span{font-size:17px;line-height:1.5;color:rgba(255,255,255,.92)}
/* reached by keyboard: the ring sits just inside the card, so nothing that holds the row can cut it */
.section_method .method_journey li:focus-visible{outline:2px solid var(--amber);outline-offset:-6px}

/* from 992px: a row of cards, one open */
@media (min-width:992px){
  /* a closed card is the share of the row the reference gives it (112 of 1360), so the open one keeps its proportion on a narrower row */
  .section_method .method_journey{--stage-closed:clamp(72px,8.24cqw,112px);--stage-open:calc(100cqw - 4 * (var(--stage-closed) + var(--stage-gap)));display:flex;gap:var(--stage-gap);height:var(--stage-h)}
  .section_method .method_journey li{position:relative;isolation:isolate;flex:none;width:var(--stage-closed);overflow:hidden;border-radius:20px;cursor:pointer;
    background:linear-gradient(160deg,var(--d-tint),var(--navy) 62%);transition:width .86s var(--stage-ease)}
  .section_method .method_journey li.is_open,
  .section_method .method_journey:not(.is_live) li:first-child{width:var(--stage-open);cursor:default}
  /* the picture, and over it the shade that keeps the words readable: deeper on a closed card */
  .section_method .method_journey li::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--stage-pic,none) center/cover no-repeat;transform:scale(1.05);transition:transform .86s var(--stage-ease)}
  .section_method .method_journey li::before{content:"";position:absolute;inset:0;z-index:-1;background-color:rgba(2,20,48,.5);
    background-image:linear-gradient(90deg,rgba(2,20,48,.8),rgba(2,20,48,.34) 50%,rgba(2,20,48,0) 80%),linear-gradient(0deg,rgba(2,20,48,.78),rgba(2,20,48,0) 48%);transition:background-color .6s}
  .section_method .method_journey li.is_open::after,
  .section_method .method_journey:not(.is_live) li:first-child::after{transform:none}
  .section_method .method_journey li.is_open::before,
  .section_method .method_journey:not(.is_live) li:first-child::before{background-color:rgba(2,20,48,0)}
  /* the number: in the middle of a closed card, at the top left of the open one */
  .section_method .method_journey i{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;border:1px solid var(--amber);display:grid;place-items:center;
    transform:translate(-50%,-50%);transition:left .86s var(--stage-ease),top .86s var(--stage-ease),transform .86s var(--stage-ease)}
  .section_method .method_journey li.is_open i,
  .section_method .method_journey:not(.is_live) li:first-child i{left:var(--stage-pad);top:var(--stage-pad);transform:none}
  /* the name under the number and the words at the foot: there all the time at the open card's width, shown only when open */
  .section_method .method_journey b,
  .section_method .method_journey li>span{position:absolute;left:var(--stage-pad);width:calc(var(--stage-open) - 2 * var(--stage-pad));opacity:0;transform:translateY(30px);
    transition:opacity .4s,transform .4s}
  .section_method .method_journey b{top:calc(var(--stage-pad) + 52px);max-width:580px}
  .section_method .method_journey li>span{bottom:var(--stage-pad);max-width:46ch}
  .section_method .method_journey li.is_open b,
  .section_method .method_journey:not(.is_live) li:first-child b{opacity:1;transform:none;transition:opacity .7s .18s,transform .7s .18s}
  .section_method .method_journey li.is_open>span,
  .section_method .method_journey:not(.is_live) li:first-child>span{opacity:1;transform:none;transition:opacity .74s .24s,transform .74s .24s}
}

/* under 992px: the five numbers are tabs; the open stage is one card with its name, and its words beneath. A stage is
   one column of the row of tabs, so it keeps a box of its own (the keyboard can reach it); the open stage's card and
   words are as wide as the whole row (100cqw) and drawn back to the row's left edge, past the tabs before it
   (--stage-n of them). */
@media (max-width:991px){
  .section_method .method_journey{--stage-gap:10px;--stage-tab:calc((100cqw - 4 * var(--stage-gap)) / 5);display:flex;align-items:flex-start;gap:var(--stage-gap);margin-top:28px}
  .section_method .method_journey li{flex:1 1 0;min-width:0}
  .section_method .method_journey li:nth-child(2){--stage-n:1}
  .section_method .method_journey li:nth-child(3){--stage-n:2}
  .section_method .method_journey li:nth-child(4){--stage-n:3}
  .section_method .method_journey li:nth-child(5){--stage-n:4}
  .section_method .method_journey i{height:52px;border-radius:12px;border:1px solid rgba(242,240,238,.24);display:grid;place-items:center;color:var(--d-ink);cursor:pointer}
  .section_method .method_journey li.is_open i,
  .section_method .method_journey:not(.is_live) li:first-child i{border-color:var(--amber);color:var(--amber);background:rgba(255,180,74,.1)}
  /* reached by keyboard: the ring goes round the stage's tab, not round its column */
  .section_method .method_journey li:focus-visible{outline:none}
  .section_method .method_journey li:focus-visible i{outline:2px solid var(--amber);outline-offset:3px}
  .section_method .method_journey b,
  .section_method .method_journey li>span{width:100cqw;margin:16px 0 0 calc(-1 * var(--stage-n,0) * (var(--stage-tab) + var(--stage-gap)))}
  .section_method .method_journey b{aspect-ratio:16/10;border-radius:20px;padding:24px;display:flex;align-items:flex-end;
    background:linear-gradient(0deg,rgba(2,20,48,.82),rgba(2,20,48,.12) 60%),var(--stage-pic,linear-gradient(160deg,var(--d-tint),var(--navy) 62%)) center/cover no-repeat}
  .section_method .method_journey li>span{display:block;color:var(--d-ink-soft)}
  /* a closed stage keeps its name and words for a screen reader, out of sight (before the script runs, all but the first) */
  .section_method .method_journey.is_live li:not(.is_open) b,
  .section_method .method_journey.is_live li:not(.is_open)>span,
  .section_method .method_journey:not(.is_live) li:not(:first-child) b,
  .section_method .method_journey:not(.is_live) li:not(:first-child)>span{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:599px){
  .section_method .method_journey b{aspect-ratio:5/6}
}

/* desktop-story screens (992px+ wide, a mouse, 680px+ tall, motion allowed), once the script has set up the hold
   (is_scene): the section fills the screen and tells the method in two beats. The promise: the heading and its intro
   alone, a little larger, in the middle of the screen. The journey: the intro gives way, the journey's title arrives
   and the five stages open in turn as the page scrolls. The script only names the beat (data-beat) and the open
   stage; every movement is here. A stage reached by keyboard shows the journey whatever the beat
   (:has(li:focus-visible)), so the keyboard never rests on a stage that is out of sight. */
@media screen and (min-width:992px) and (pointer:fine) and (height >= 680px) and (prefers-reduced-motion:no-preference){
  #method.is_scene>.method_container{align-self:stretch;margin-block:0;display:flex;flex-direction:column;justify-content:center}
  #method.is_scene .method_journey{--stage-h:clamp(280px,calc(100svh - 404px),500px)}
  #method.is_scene .method_intros{transform-origin:50% 0;transition:transform .86s cubic-bezier(.25,.1,.25,1)}
  #method.is_scene .method_intros .intro_text{max-height:9em;overflow:hidden;transition:max-height .7s cubic-bezier(.25,.1,.25,1),filter .45s}
  #method.is_scene .method_models{max-height:900px;overflow:hidden;transition:max-height .86s cubic-bezier(.25,.1,.25,1),opacity .6s .22s,margin-top .86s cubic-bezier(.25,.1,.25,1)}
  #method.is_scene[data-beat="promise"]:not(:has(li:focus-visible)) .method_intros{transform:scale(1.2)}
  #method.is_scene[data-beat="promise"]:not(:has(li:focus-visible)) .method_models{max-height:0;opacity:0;margin-top:0;transition:max-height .86s cubic-bezier(.25,.1,.25,1),opacity .3s,margin-top .86s cubic-bezier(.25,.1,.25,1)}
  #method.is_scene:is([data-beat="journey"],:has(li:focus-visible)) .method_intros .intro_text{max-height:0;filter:opacity(0)}
  #method.is_scene:is([data-beat="journey"],:has(li:focus-visible)) .method_models{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .section_method .method_journey li,
  .section_method .method_journey li *,
  .section_method .method_journey li::before,
  .section_method .method_journey li::after{transition:none}
}

/* ==== Programme portfolio ==== */
@media screen and (min-width:992px){
  html body #portfolio .portfolio_head{align-items:end}
  html body #portfolio .portfolio_head h2{max-width:none;width:auto}
  html body #portfolio .portfolio_tiers{gap:24px;margin-top:64px}
  html body #portfolio .portfolio_tier>.item_title{min-height:90px}
  html body #portfolio .portfolio_tier{position:relative;transition:scale .35s cubic-bezier(.22,.61,.36,1),transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .28s}
  html body #portfolio .portfolio_tier:hover,
  html body #portfolio .portfolio_tier:focus-within{scale:1.045!important;z-index:2;box-shadow:0 28px 60px -24px rgba(2,39,89,.35)}
}

/* ==== Meet the founders ==== */
/* ---- Meet the founders: every rule of the section is here (batches F2-F6). Phones (under 600px) first, then "a shared
   centre" from 600px wide (Dex's design, Astra's direction; mock-up design/2026-09-30-founders-laptop/section.html;
   it began at 768px and moved to 600px in batch F5, 2 Oct: the mock-up's own tablet range) ----
   From 600px: one composition, centred on the join. The heading and its amber rule, the belief; Mark's and Sandy's photos side by
   side, each founder standing in the middle of their own half of a quiet name base that hides their flat cut and
   carries both names, each in the middle of its own half; each founder's words in a quiet card; Together centred under a short amber rule. Desktops
   (992px+, clearly wider than tall): each founder's words in a quiet card beside the photos, level with the heads.
   Tablets (600-991px, phones held sideways, and upright or nearly square screens from 992px): the phone's layout,
   the photos first and four plain paragraphs beneath, no cards. The base arrives in two halves that travel with their founder (Mark's with a small
   key, Sandy's with the matching notch) and becomes one piece as they join; the script plays it (the held scene on
   desktop-story screens, once as it arrives elsewhere). Without the script, or with reduced motion: the finished
   picture.
   Geometry from the cut-outs (749 x 1038, so a photo is .7216 of its height wide; the pair spans 1.2432 of it): at
   the cut Mark's body fills 4.5-96% of his photo's width, Sandy's 24-84% of hers. The join sits at 69.28% of the
   height from Mark's left edge, between the two bodies; each half covers its own founder's cut, even while they
   stand apart. Mark's half starts flush with his fingertips (at the cut they reach 4.5% of his photo's width; Dex,
   30 Sep 17:3x: "Mark's name tag ... shortened to where his fingers end") and runs to the join: .6603 of the height.
   THE TWO HALVES ARE EQUAL (batch F6; Dex, 2 Oct: "we've got to make those puzzle pieces equal because there are equal
   partners in this ... I don't mind if you make Sandy's a little bit bigger"): Mark's cannot be shorter, so Sandy's is
   the same .6603. SANDY STANDS IN THE MIDDLE OF HER HALF, as Mark does on his (Dex, 3 Oct: "move Sandy's image more to
   the center of her card"): her body at the cut is .4337 of the height wide, so it sits .1133 in from each end of her
   half, and her photo's box overlaps Mark's by .0887 of the height (it was tucked .2 behind his shoulder until F6;
   the two bodies now stand about .11 of the height apart at the cut). So that the join sits on the section's centre
   line (under the heading, above the Together rule), the two photo columns are symmetric about it: 1.3856 of the
   height wide in all, Sandy's photo keeping .0311 of room on its outer side, and the base (1.3206) sits .0325 in from
   each end. --m, the reach of the base past Mark's fingertips, is 0.
   The section's height (batch F5, D-007): with the cards beneath, as tall as its content, like every other section
   under 992px; with the cards beside, at least one screen tall with its content in the middle, like the page's other
   held sections from 992px; on desktop-story screens always one screen, for the hold. */
/* every screen: the paragraphs carry the page's body-text word spacing (the page's rule lists the other sections; D-008) */
html body #founders .founders_copy>p{word-spacing:.1em}
/* phones (under 600px): the design Dex approved on 28 Sep (design/2026-09-28-scroll-journey/proposals.html; built in
   batch F4, 2 Oct). One column on the page's own edge: the heading and its short amber rule; Mark and Sandy side by
   side (the pair at most 360px wide, centred; Sandy's photo tucked 8% of that width behind Mark's), standing on the
   name base that carries their names; the belief in the larger type; Mark's words, then Sandy's; a fine divider and the Together line. The
   page's own order is words first, photos last: the order drawn is set here, by grid rows. Nothing moves: like every
   section on a phone, it stands in its finished state. The base's two halves (the join) belong to the wider screens.
   What is the page's own, and must stay in step with it: the top and bottom space (the page's [data-scene] rule gives
   it; nothing is set here), the edge (--max, --gutter, as every section's container), the section as tall as its
   content (the page's rule for every other section under 992px), the body size (16px/1.6) and, on touch screens, the
   heading's type (the page's rule for every section heading: search "1.6rem + 0.9vw"; with a mouse the page's plain
   h2 rule applies to the founders as to the others). */
@media (max-width:599.98px){
  html body #founders{display:block;position:relative;min-height:0;height:auto;overflow-x:clip;
    background:radial-gradient(at 70% 40%,rgba(30,91,151,.35),transparent 55%),var(--navy)}
  html body #founders .founders_container{container:founders/inline-size;display:grid;grid-template-columns:1fr auto auto 1fr;
    width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
  html body #founders :is(.founders_copy,.founders_duo){display:contents}
  html body #founders :is(.founders_half_mark,.founders_half_sandy){display:none}
  html body #founders :is(h2,.founders_copy>p,.founders_names){grid-column:1/-1}
  html body #founders h2{grid-row:1;margin:0;color:var(--d-ink)}
  html body #founders h2::after{content:"";display:block;width:120px;height:2px;margin-top:16px;background:var(--amber)}
  /* the photos: each 52% of the pair's width, their space reserved before they load */
  html body #founders :is(.founders_mark,.founders_sandy){grid-row:2;align-self:end;display:block;position:relative;
    width:calc(min(360px,100cqw) * .52);height:auto;aspect-ratio:749/1038;max-width:none;margin:28px 0 0}
  html body #founders .founders_mark{grid-column:2;z-index:2}
  /* Sandy stands in the middle of her half of the base (her photo overlaps Mark's by .064 of the pair's width and keeps
     .0224 of room on its outer side), and the two photo columns are symmetric about the join, so the join sits on the
     column's centre line (as from 600px) */
  html body #founders .founders_sandy{grid-column:3;z-index:1;margin:28px calc(min(360px,100cqw) * .0224) 0 calc(min(360px,100cqw) * -.064)}
  /* the name base the photos stand on (Dex, 2 Oct: "I love B"): the wider screens' base, already joined and still. It
     hides the photos' flat cut and carries both names, each in the middle of its own half. Two equal halves, as from
     600px: it starts at Mark's fingertips (4.5% of his photo's width), each half is .4758 of the pair's width, so it
     is .9516 of it and centred on the join. Its height and its names are full size where the column is 318px or wider
     (a 390px phone) and shrink in step with narrower columns */
  html body #founders .founders_names{grid-row:3;justify-self:center;box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center;
    width:calc(min(360px,100cqw) * .9516);height:min(34px,10.7cqw);margin:0;
    background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));border-top:1px solid rgba(255,255,255,.2);
    border-radius:0 0 12px 12px;box-shadow:0 26px 48px -26px rgba(0,0,0,.5)}
  html body #founders .founders_name{margin:0;padding:0 0 0 .13em;font:600 min(11px,3.46cqw)/1 var(--display);letter-spacing:.13em;text-transform:uppercase;
    white-space:nowrap;color:rgba(255,255,255,.92)}
  /* the belief, the two founders' words, the divider and Together */
  html body #founders .founders_copy>p{max-width:54ch;margin:0;font:400 16px/1.6 var(--body);color:var(--d-ink-soft)}
  html body #founders .founders_copy>p:nth-of-type(1){grid-row:4;margin-top:30px;font:500 20px/1.45 var(--display);letter-spacing:-.01em;color:var(--d-ink)}
  html body #founders .founders_copy>p:nth-of-type(2){grid-row:5;margin-top:22px}
  html body #founders .founders_copy>p:nth-of-type(3){grid-row:6;margin-top:18px}
  html body #founders .founders_copy>p:nth-of-type(4){grid-row:7;margin-top:24px;padding-top:20px;border-top:1px solid rgba(242,240,238,.14);color:var(--d-ink)}
}
@media (pointer:coarse) and (max-width:599.98px){
  html body #founders h2{font-size:clamp(1.75rem,1.6rem + .9vw,1.875rem);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
}
@property --halves{syntax:'<number>';inherits:true;initial-value:0}
@property --join{syntax:'<number>';inherits:true;initial-value:1}
@property --join-o{syntax:'<number>';inherits:true;initial-value:0}
@media (min-width:600px){
  html body #founders{--m:0px;--base-h:clamp(34px,5vh,42px);--key-h:calc(var(--base-h) * .4);
    display:block;position:relative;padding:clamp(56px,8vh,96px) clamp(20px,5vw,72px);background:var(--navy);overflow-x:clip}
  /* one quiet field of light behind the two of them (the held scene brings it up) */
  html body #founders::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--light,1);
    background:radial-gradient(ellipse 60% 55% at 50% 56%,rgba(38,104,168,.42),rgba(30,91,151,.12) 55%,transparent 75%)}
  html body #founders .founders_container{position:relative;container:founders/inline-size;width:100%;max-width:clamp(1180px,80vw,1400px);
    margin:0 auto;padding:0;display:grid;grid-template-columns:1fr auto auto 1fr;align-items:start;top:auto}
  html body #founders :is(.founders_copy,.founders_duo){display:contents}
  /* the heading, its rule and the belief */
  html body #founders h2{grid-column:1/-1;grid-row:1;justify-self:center;margin:0;text-align:center;
    font:500 clamp(30px,min(5.4vh,9vw),46px)/1.08 var(--display);letter-spacing:-.02em;color:var(--d-ink)}
  html body #founders h2::after{content:"";display:block;width:88px;height:2px;margin:14px auto 0;background:var(--amber)}
  html body #founders .founders_copy>p:nth-of-type(1){grid-column:1/-1;grid-row:2;justify-self:center;max-width:780px;
    margin:clamp(12px,2.2vh,20px) 0 0;text-align:center;font:500 clamp(17px,min(2.9vh,4.8vw),21px)/1.45 var(--display);
    letter-spacing:-.01em;color:var(--d-ink);text-wrap:balance}
  /* the photos, close together */
  html body #founders :is(.founders_mark,.founders_sandy){grid-row:3;align-self:end;display:block;position:relative;inset:auto;
    height:var(--photo-h);width:auto;aspect-ratio:749/1038;max-width:none;max-height:none;margin:clamp(24px,4vh,40px) 0 0;filter:none}
  html body #founders .founders_mark{grid-column:2;z-index:2}
  /* Sandy stands in the middle of her half of the base: her photo overlaps Mark's by .0887 of the height and keeps
     .0311 of room on its outer side. The two photo columns are symmetric about the join, so the join sits on the
     section's centre line */
  html body #founders .founders_sandy{grid-column:3;z-index:1;margin-left:calc(var(--photo-h) * -.0887);margin-right:calc(var(--photo-h) * .0311)}
  /* the base's two halves, equal, one under each founder: Mark's from --m past his fingertips to the join, with a small
     rounded key; Sandy's from the join the same width, with the notch. Each stops half a pixel short of the join, so a
     hairline seam reads until they become one */
  html body #founders :is(.founders_half_mark,.founders_half_sandy){grid-row:4;display:block;position:relative;height:var(--base-h)}
  html body #founders .founders_half_mark{grid-column:2;z-index:2;margin:0 calc(var(--photo-h) * .0289 + .5px) 0 calc(var(--photo-h) * .0325 - var(--m))}
  html body #founders .founders_half_sandy{grid-column:3;z-index:1;margin:0 calc(var(--photo-h) * .0325 - var(--m)) 0 calc(var(--photo-h) * -.0288 + .5px)}
  html body #founders :is(.founders_half_mark,.founders_half_sandy)::before{content:"";position:absolute;inset:0;opacity:var(--halves);
    background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));border-top:1px solid rgba(255,255,255,.2)}
  html body #founders .founders_half_mark::before{border-radius:0 0 0 12px}
  html body #founders .founders_half_mark::after{content:"";position:absolute;left:100%;top:50%;width:7px;height:var(--key-h);
    margin-top:calc(var(--key-h) / -2);border-radius:0 999px 999px 0;background:rgba(255,255,255,.057);opacity:var(--halves)}
  html body #founders .founders_half_sandy::before{border-radius:0 0 12px 0;
    -webkit-mask:linear-gradient(#000 0 0),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 20' preserveAspectRatio='none'%3E%3Crect x='-9' width='18' height='20' rx='9' ry='10'/%3E%3C/svg%3E") left center / 8px calc(var(--key-h) + 2px) no-repeat;-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 20' preserveAspectRatio='none'%3E%3Crect x='-9' width='18' height='20' rx='9' ry='10'/%3E%3C/svg%3E") left center / 8px calc(var(--key-h) + 2px) no-repeat;mask-composite:exclude}
  /* the joined base with both names, each in the middle of its own half (the trailing tracking balanced on the left, so
     the letters are centred), and the thin amber line that runs from the join, the base's centre, as it closes */
  html body #founders .founders_names{grid-column:2/4;grid-row:4;justify-self:start;position:relative;z-index:0;display:grid;
    grid-template-columns:1fr 1fr;justify-items:center;align-items:center;height:var(--base-h);width:calc(var(--photo-h) * 1.3206 + 2 * var(--m));
    margin:0 0 0 calc(var(--photo-h) * .0325 - var(--m));opacity:calc(1 - var(--halves));font-size:clamp(10px,calc(var(--photo-h) * .028),12px);
    background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));border-top:1px solid rgba(255,255,255,.2);
    border-radius:0 0 12px 12px;box-shadow:0 26px 48px -26px rgba(0,0,0,.5)}
  html body #founders .founders_name{margin:0;padding:0 0 0 .13em;font:600 1em/1 var(--display);letter-spacing:.13em;text-transform:uppercase;
    color:rgba(255,255,255,.92);white-space:nowrap;text-box:trim-both cap alphabetic}
  html body #founders .founders_names::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;opacity:var(--join-o);
    background:linear-gradient(90deg,transparent,var(--amber) 14%,var(--amber) 86%,transparent);box-shadow:0 0 10px 1px rgba(255,180,74,.45);
    transform:scaleX(var(--join));transform-origin:50% 50%}
  /* each founder's words in a quiet card, as tall as its words, text left-aligned */
  html body #founders .founders_copy>p:is(:nth-of-type(2),:nth-of-type(3)){box-sizing:border-box;max-width:none;margin:0;padding:22px 24px 24px;
    border-radius:14px;text-align:left;color:#dcd8d4;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));
    border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.18)}
  /* Together, beneath them all, under a short amber rule */
  html body #founders .founders_copy>p:nth-of-type(4){grid-column:1/-1;justify-self:center;position:relative;max-width:780px;
    margin:clamp(24px,4vh,40px) 0 0;padding:18px 0 0;text-align:center;font:400 clamp(16px,2.4vh,18px)/1.55 var(--body);color:var(--d-ink);text-wrap:balance}
  html body #founders .founders_copy>p:nth-of-type(4)::before{content:"";position:absolute;top:0;left:50%;width:64px;height:2px;margin-left:-32px;
    background:var(--amber);transform:scaleX(var(--tog,1))}
}
/* desktops: the cards beside the photos, their tops level with the founders' heads (6% of the photo height down; Mark's
   arm widens out from about halfway down his photo, so a card beside it would meet it as he arrives); both one width
   (at most 29% of the stage) and the same distance from the join, so the picture is symmetric about the centre line.
   The photos are sized from the space under the fixed header (89px), so the held scene fits one screen, and never so
   large that a card beside them would be under 250px wide (a tablet held sideways: the photos give way a little). The section is at least one screen tall with its content in the
   middle, like the page's other held sections from 992px (stated here so it does not depend on the page's rule).
   Only on screens clearly wider than they are tall (more than 11:10): the photos take their size from the screen's
   height, so on an upright or nearly square screen they would leave the cards a sliver each side (an upright
   1024 x 1366 tablet: about 135px; Dex, 2 Oct: "squashed ... put it beneath ... just like the other ones"). Those
   screens take the tablets' arrangement below. */
@media (min-width:992px) and (aspect-ratio > 11/10){
  html body #founders{--photo-h:min(clamp(200px,calc((100svh - 89px) * .48),480px),calc((100cqw - 2 * (250px + clamp(24px,3cqw,36px))) / 1.3856));
    min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  html body #founders .founders_copy>p:is(:nth-of-type(2),:nth-of-type(3)){grid-row:3/5;align-self:start;
    width:min(clamp(290px,29cqw,400px),calc((100cqw - var(--photo-h) * 1.3856) / 2 - clamp(24px,3cqw,36px)));
    margin-top:calc(clamp(24px,4vh,40px) + var(--photo-h) * .06);font-size:clamp(15px,1.4cqw,17px);line-height:1.6}
  html body #founders .founders_copy>p:nth-of-type(2){grid-column:1;justify-self:end;margin-right:clamp(24px,3cqw,36px)}
  html body #founders .founders_copy>p:nth-of-type(3){grid-column:4;justify-self:start;margin-left:clamp(24px,3cqw,36px)}
  html body #founders .founders_copy>p:nth-of-type(4){grid-row:5}
}
/* tablets, phones held sideways, and screens from 992px that are upright or nearly square (no more than 11:10): THE
   PHONE'S LAYOUT (Dex, 3 Oct: "I want tablet to look like that four paragraphs beneath. I don't want the containers. So
   make tablet look the same like mobile"): the heading and its short amber rule on the left; Mark and Sandy on their
   base; then four plain paragraphs: the belief in the larger type, Mark's words, Sandy's, a fine divider and Together.
   No cards. All of it in one centred column 560px wide at most, so a line of text stays a comfortable length and the
   photos fill the column as they do on a phone. The section as tall as its content. (Unlike the phone it keeps the
   arrival: the two pieces of the base travel in with the founders and join.) */
@media (min-width:600px) and (max-width:991.98px), (min-width:992px) and (aspect-ratio <= 11/10){
  html body #founders{--photo-h:min(clamp(240px,31vh,370px),calc(100cqw / 1.3856));
    min-height:0;height:auto;padding-inline:clamp(36px,calc(36px + (100vw - 768px) * .2308),48px)}
  html body #founders .founders_container{max-width:560px}
  /* the heading's type follows the page's rule for section headings on touch tablets (search "1.6rem + 0.9vw" and the
     32px rule beside it) */
  html body #founders h2{justify-self:start;text-align:left;font-size:32px;line-height:1.15}
  html body #founders h2::after{width:120px;margin:16px 0 0}
  html body #founders :is(.founders_mark,.founders_sandy){grid-row:2;margin-top:34px}
  html body #founders :is(.founders_half_mark,.founders_half_sandy,.founders_names){grid-row:3}
  /* the four paragraphs, plain (the card look of the wider screens taken off) */
  html body #founders .founders_copy>p:nth-of-type(n){grid-column:1/-1;justify-self:stretch;align-self:start;width:auto;max-width:none;margin:0;padding:0;
    border:0;border-radius:0;background:none;text-align:left;text-wrap:wrap;font:400 16px/1.6 var(--body);letter-spacing:normal;color:var(--d-ink-soft)}
  html body #founders .founders_copy>p:nth-of-type(1){grid-row:4;margin-top:30px;font:500 20px/1.45 var(--display);letter-spacing:-.01em;color:var(--d-ink)}
  html body #founders .founders_copy>p:nth-of-type(2){grid-row:5;margin-top:22px}
  html body #founders .founders_copy>p:nth-of-type(3){grid-row:6;margin-top:18px}
  html body #founders .founders_copy>p:nth-of-type(4){grid-row:7;margin-top:24px;padding-top:20px;border-top:1px solid rgba(242,240,238,.14);color:var(--d-ink)}
  html body #founders .founders_copy>p:nth-of-type(4)::before{content:none}
}
@media (min-width:600px) and (max-width:767.98px){
  html body #founders h2{font-size:clamp(1.75rem,1.6rem + .9vw,1.875rem);line-height:1.18}
}
/* desktop-story screens (either arrangement): the section holds one screen (the page's hold), its picture centred
   under the header. After the two arrangements, so it decides the height and the space top and bottom */
@media (min-width:992px) and (pointer:fine) and (height >= 680px){
  html body #founders{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(89px + clamp(8px,1.2vh,24px));padding-bottom:clamp(8px,1.2vh,24px)}
}
/* a desktop-story screen with the cards beneath (an upright monitor, a nearly square window): the photos give way so
   the picture still fits the one held screen (everything but the photos is about 650px tall; 660 allowed). Where even
   the smallest photos do not fit (a window under about 860px tall, which is wider than 11:10 anyway), the script plays
   the arrival instead of the held scene */
@media (min-width:992px) and (pointer:fine) and (height >= 680px) and (aspect-ratio <= 11/10){
  html body #founders{--photo-h:min(clamp(200px,calc(100svh - 660px),370px),calc(100cqw / 1.3856))}
}
/* the once-only arrival (from 600px, wherever the held scene does not play; the script adds is_arrive, then is_in to
   each part as a third of it comes into view, then is_together and is_joined): each part moves a short way towards
   the centre and settles without bounce; the photos stand a little apart, then glide together; the halves become one
   base with the names and the amber line runs once; then Together settles. :where() keeps every rule here at one weight, so their order
   decides (the arrived state last) */
@media (min-width:600px){
  html body #founders.is_arrive{--halves:1;--join:0;--join-o:1;transition:--halves .35s linear,--join .6s cubic-bezier(.2,.75,.25,1),--join-o .5s ease .5s}
  html body #founders.is_arrive.is_joined{--halves:0;--join:1;--join-o:0}
  html body #founders.is_arrive :where(.founders_mark,.founders_half_mark,.founders_sandy,.founders_half_sandy,.founders_copy>p:not(:first-of-type)){
    opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.25,1),translate .9s cubic-bezier(.45,0,.2,1) .95s}
  html body #founders.is_arrive :where(.founders_mark,.founders_half_mark,.founders_copy>p:nth-of-type(2)){transform:translateX(-32px)}
  html body #founders.is_arrive :where(.founders_sandy,.founders_half_sandy,.founders_copy>p:nth-of-type(3)){transform:translateX(32px)}
  html body #founders.is_arrive :where(.founders_copy>p:nth-of-type(4)){transform:translateY(10px)}
  html body #founders.is_arrive :where(.founders_mark,.founders_half_mark){translate:calc(var(--photo-h) * -.09) 0}
  html body #founders.is_arrive :where(.founders_sandy,.founders_half_sandy){translate:calc(var(--photo-h) * .09) 0}
  html body #founders.is_arrive :where(.is_in){opacity:1;transform:none}
  html body #founders.is_arrive :where(.founders_sandy,.founders_half_sandy).is_in{transition-delay:.2s,.2s,.95s}
  /* Together follows the names (Dex, 30 Sep 17:3x): it waits for the join, then settles */
  html body #founders.is_arrive:not(.is_joined) :where(.founders_copy>p:nth-of-type(4)){opacity:0;transform:translateY(10px)}
  html body #founders.is_arrive :where(.founders_copy>p:nth-of-type(4)).is_in{transition-delay:.35s}
  html body #founders.is_arrive.is_together :where(.founders_mark,.founders_half_mark,.founders_sandy,.founders_half_sandy){translate:none}
}
/* the tablets' arrangement: shorter moves (14px in, 15px apart); the two arrive as one introduction; their words, plain
   paragraphs one under the other, rise a little as they come into view */
@media (min-width:600px) and (max-width:991.98px), (min-width:992px) and (aspect-ratio <= 11/10){
  html body #founders.is_arrive :where(.founders_mark,.founders_half_mark,.founders_sandy,.founders_half_sandy,.founders_copy>p:not(:first-of-type)){
    transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.25,1),translate .75s cubic-bezier(.45,0,.2,1) .95s}
  html body #founders.is_arrive :where(.founders_mark,.founders_half_mark){transform:translateX(-14px)}
  html body #founders.is_arrive :where(.founders_sandy,.founders_half_sandy){transform:translateX(14px)}
  html body #founders.is_arrive :where(.founders_copy>p:nth-of-type(2),.founders_copy>p:nth-of-type(3)){transform:translateY(10px)}
  html body #founders.is_arrive :where(.founders_mark,.founders_half_mark){translate:-15px 0}
  html body #founders.is_arrive :where(.founders_sandy,.founders_half_sandy){translate:15px 0}
  html body #founders.is_arrive :where(.is_in){opacity:1;transform:none}
  html body #founders.is_arrive :where(.founders_sandy,.founders_half_sandy).is_in{transition-delay:.15s,.15s,.95s}
  html body #founders.is_arrive :where(.founders_copy>p:nth-of-type(4)).is_in{transition-delay:.35s}
  html body #founders.is_arrive.is_together :where(.founders_mark,.founders_half_mark,.founders_sandy,.founders_half_sandy){translate:none}
}

/* ==== Held scenes: centring ==== */
@media screen and (min-width:992px){
  #solve>div:first-child{padding-top:42px}
  #portfolio>div:first-child,
  #trust>div:first-child,
  #loop>div:first-child,
  #results>div:first-child{padding-bottom:37px}
}

/* ==== Uniform type ==== */
:root{--mono:"Inter Tight","Helvetica Neue",Arial,sans-serif}
body .eyebrow_text{font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:.08em;line-height:1.2}
#portfolio .portfolio_tier .button .button_label,
#enquiry input[type="submit"].button{font-weight:600}
#solve .is_fallback .button .button_label{font-weight:600!important}

/* ==== Type scale ==== */
@media screen and (min-width:992px){

  #develop h2,#method h2,#portfolio .portfolio_head h2,#loop h2,#video h2,#video h2 .text_nowrap,#contact h2{font-size:44px;line-height:48px;letter-spacing:-.02em}

  #develop .develop_capability>b,#method .method_intro>h3,#portfolio .portfolio_tier>.item_title{font-size:26px;line-height:30px;letter-spacing:-.02em}

  #develop .develop_argument>p,#method .method_intros>.intro_text,#portfolio .portfolio_head>.intro_text,#loop .intro_text,#contact .contact_ask>.intro_text{font-size:20px;line-height:29px}

  #develop .develop_argument li,#develop .develop_capability>span,#method .method_intro>.method_desc,#portfolio .portfolio_tier>.item_text,#trust .trust_stat_detail,#results .results_detail{font-size:17px;line-height:26px}
  #results .results_detail{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:400;letter-spacing:0}

  #results blockquote{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:22px;line-height:32px;letter-spacing:0}

  #results .attribution_text span,#video .testimonials_plate>span,#contact .note_text,#contact .form_field>label,#contact label.form_check{font-size:14px;line-height:21px}

}

/* ==== Enterprise confidence ==== */
@media screen and (min-width:992px){
  html body #trust .trust_stat_detail{max-width:none}
}

/* ==== The development loop ==== */
/* The method's second part, the development loop, in a section of its own on the light ground (batch M2, 7 Oct 2026).
   Until then it stood beside the journey in the method section, and this place in the page held the Insights
   section, which is now on the Insights page. The section's size, ground and type are the page's own: the rules that
   name #loop beside the other sections. These rules set the rest: the words beside the ring from 992px and above it
   below; and the ring, drawn here (no elements for the drawing): seven steps a seventh of a turn apart on a turned
   oval, turned half a step so Self assess sits alone at the bottom. The ring is sized by its own column: the model is
   the measure (container), and --c4s-ring-col is the width the ring has in it. */
.section_loop .method_model{container-type:inline-size;display:grid;row-gap:40px;--c4s-ring-col:100cqw}
.section_loop .method_intro h2{margin:0}
@media (min-width:992px){
  .section_loop .method_model{--c4s-ring-gap:clamp(48px,5.5vw,104px);--c4s-ring-col:calc((100cqw - var(--c4s-ring-gap)) * 7 / 12);
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--c4s-ring-gap);align-items:center}
}
.section_loop .method_loop{--rx:min(calc(var(--c4s-ring-col) / 2 - 52px),330px);--ry:min(calc(.82 * var(--rx)),calc(50svh - 140px));
  list-style:none;margin:0;padding:0;position:relative;height:calc(2 * var(--ry) + 56px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022759' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66'/%3E%3Cpath d='M20 4v4h-4'/%3E%3C/svg%3E") center/26px 26px no-repeat,
    radial-gradient(circle at 50% 50%,rgba(255,180,74,.16) 0 27px,transparent 27.5px)}
.section_loop .method_loop::before{content:"";position:absolute;left:50%;top:50%;width:calc(2 * var(--rx));height:calc(2 * var(--ry));
  transform:translate(-50%,-50%);border:1px dashed rgba(2,39,89,.38);border-radius:50%}
.section_loop .method_loop::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;opacity:0;
  background:var(--amber);box-shadow:0 0 0 5px rgba(255,180,74,.24);
  transform:translate(-50%,-50%) translate(calc(sin(var(--c4s-loop-t)) * var(--rx)),calc(-1 * cos(var(--c4s-loop-t)) * var(--ry)))}
.section_loop .method_loop li{position:absolute;z-index:1;left:calc(50% + sin(var(--a)) * var(--rx));top:calc(50% - cos(var(--a)) * var(--ry));
  transform:translate(-50%,-50%);padding:7px 14px;border-radius:999px;background-color:#fff;border:1px solid rgba(2,39,89,.2);white-space:nowrap;color:var(--navy);
  box-shadow:0 1px 2px rgba(2,39,89,.06)}
.section_loop .method_loop b{display:block;font:500 clamp(13px,3.4cqw,16px)/1.2 var(--display);color:inherit}
.section_loop .method_loop li:nth-child(1){--a:-25.71deg;background-color:var(--navy);border-color:var(--amber);color:var(--amber)}
.section_loop .method_loop li:nth-child(2){--a:25.71deg}
.section_loop .method_loop li:nth-child(3){--a:77.14deg}
.section_loop .method_loop li:nth-child(4){--a:128.57deg}
.section_loop .method_loop li:nth-child(5){--a:180deg}
.section_loop .method_loop li:nth-child(6){--a:231.43deg}
.section_loop .method_loop li:nth-child(7){--a:282.86deg}
/* beside the words the ring stands alone, without the mark in its middle (as on desktop since 28 Sep) */
@media (min-width:992px){
  .section_loop .method_loop{background:none}
}
/* the loop moves: an amber dot travels the oval from step to step, resting on each while that step lights, and returns
   from Repeat to Prepare without end: 7 seconds a loop, so a visitor passing it sees one whole cycle (Dex, 28 Sep).
   It keeps going under the pointer, rests while the ring is off screen and starts again from Prepare each time it
   comes into view (is_off and the restart are in c4s-home.js); none of it with reduced motion, where the ring stands
   still with Prepare lit. The dot and the steps run on one clock: every animation below has the same length and
   starts together, each step a seventh later. */
@property --c4s-loop-t{syntax:"<angle>";inherits:true;initial-value:-25.71deg}
@media (prefers-reduced-motion:no-preference){
  .section_loop .method_loop{--step:1s}
  .section_loop .method_loop::after{opacity:1;animation:c4s-loop-dot calc(7 * var(--step)) ease-in-out infinite}
  .section_loop .method_loop li{animation:c4s-loop-step calc(7 * var(--step)) linear infinite}
  .section_loop .method_loop li:nth-child(1){background-color:#fff;border-color:rgba(2,39,89,.2);color:var(--navy)}
  .section_loop .method_loop li:nth-child(2){animation-delay:calc(1 * var(--step))}
  .section_loop .method_loop li:nth-child(3){animation-delay:calc(2 * var(--step))}
  .section_loop .method_loop li:nth-child(4){animation-delay:calc(3 * var(--step))}
  .section_loop .method_loop li:nth-child(5){animation-delay:calc(4 * var(--step))}
  .section_loop .method_loop li:nth-child(6){animation-delay:calc(5 * var(--step))}
  .section_loop .method_loop li:nth-child(7){animation-delay:calc(6 * var(--step))}
  .section_loop .method_loop.is_off::after,
  .section_loop .method_loop.is_off li{animation-play-state:paused}
}
/* rests on each step for 0.6 of its seventh, travels the other 0.4 */
@keyframes c4s-loop-dot{
  0%,8.57%{--c4s-loop-t:-25.71deg} 14.29%,22.86%{--c4s-loop-t:25.71deg} 28.57%,37.14%{--c4s-loop-t:77.14deg}
  42.86%,51.43%{--c4s-loop-t:128.57deg} 57.14%,65.71%{--c4s-loop-t:180deg} 71.43%,80%{--c4s-loop-t:231.43deg}
  85.71%,94.29%{--c4s-loop-t:282.86deg} 100%{--c4s-loop-t:334.29deg}
}
/* a step is lit (navy, the brand orange) while the dot rests on it, dims as the dot leaves, lights again a loop later */
@keyframes c4s-loop-step{
  0%,8.57%,100%{border-color:var(--amber);color:var(--amber);background-color:var(--navy);box-shadow:0 0 0 4px rgba(255,180,74,.22)}
  13%,98.5%{border-color:rgba(2,39,89,.2);color:var(--navy);background-color:#fff;box-shadow:0 1px 2px rgba(2,39,89,.06)}
}
/* desktop-story screens (992px+ wide, a mouse, 680px+ tall, motion allowed), once the script has set up the hold
   (is_scene): the section holds and the scroll walks the loop, one phase at a time. The script names the phase (is_lit
   on its step, data-phase on the model, the dot's angle on the ring); here the step lights, the dot travels to it
   along the oval (the angle is a registered property, eased on the ring, so the dot and the path behind it move as
   one) and the phase's name stands in the middle of the ring. After Repeat the script lets the loop go (is_free) and
   the clock above takes over again. The name's place is the middle of the ring's column: 17/24 of the model's width
   less the gap, plus the gap (the columns are 5 and 7 parts). */
@property --c4s-loop-arc{syntax:"<color>";inherits:false;initial-value:transparent}
@media screen and (min-width:992px) and (pointer:fine) and (height >= 680px) and (prefers-reduced-motion:no-preference){
  #loop.is_scene .method_model{position:relative}
  #loop.is_scene:not(.is_free) .method_loop{transition:--c4s-loop-t .8s cubic-bezier(.45,0,.2,1)}
  #loop.is_scene:not(.is_free) .method_loop li{animation:none;transition:background-color .35s,border-color .35s,color .35s,box-shadow .35s}
  #loop.is_scene:not(.is_free) .method_loop::after{animation:none;opacity:1}
  #loop.is_scene .method_loop li.is_lit{background-color:var(--navy);border-color:var(--amber);color:var(--amber);box-shadow:0 0 0 4px rgba(255,180,74,.22)}
  /* the path, in the brand orange here: dashed ahead of the dot and solid behind it, from Prepare round to the dot.
     The solid part is a gradient kept to a 3px rim on the oval's own line (the two masks leave only the border and the
     2px inside it). The dot's angle counts round a circle; a gradient counts round the oval as it is drawn, flatter
     than a circle, so each angle is turned into the oval's (--arc-from, --arc-to: the angle plus the small difference
     between the two, which atan2 gives without a jump, because that difference is always less than a quarter turn).
     That sum needs the oval's height as a plain share of its width (--oval; Firefox does not take lengths there), so
     here a short screen makes the ring smaller in the same shape, where elsewhere it makes it flatter. */
  #loop.is_scene .method_loop{--oval:.82;--rx:min(calc(var(--c4s-ring-col) / 2 - 52px),330px,calc((50svh - 140px) / var(--oval)));--ry:calc(var(--oval) * var(--rx))}
  #loop.is_scene .method_loop::before{padding:2px;border-color:var(--amber);
    --arc-from:calc(-25.71deg + atan2(calc((1 - var(--oval)) * sin(-25.71deg) * cos(-25.71deg)),calc(var(--oval) * cos(-25.71deg) * cos(-25.71deg) + sin(-25.71deg) * sin(-25.71deg))));
    --arc-to:calc(var(--c4s-loop-t) + atan2(calc((1 - var(--oval)) * sin(var(--c4s-loop-t)) * cos(var(--c4s-loop-t))),calc(var(--oval) * cos(var(--c4s-loop-t)) * cos(var(--c4s-loop-t)) + sin(var(--c4s-loop-t)) * sin(var(--c4s-loop-t)))));
    background:conic-gradient(from var(--arc-from),var(--c4s-loop-arc) 0 calc(var(--arc-to) - var(--arc-from)),transparent 0);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
  #loop.is_scene:not(.is_free) .method_loop::before{--c4s-loop-arc:var(--amber)}
  /* let go: the solid path closes its last seventh as the dot returns to Prepare, then fades */
  #loop.is_scene.is_free .method_loop::before{--c4s-loop-t:334.29deg;transition:--c4s-loop-t .4s ease-in-out,--c4s-loop-arc 1.2s .4s}
  #loop.is_scene .method_model::after{content:attr(data-phase);position:absolute;left:calc((100% - var(--c4s-ring-gap)) * 17 / 24 + var(--c4s-ring-gap));top:50%;transform:translate(-50%,-50%);
    font:500 clamp(28px,2.9vw,44px)/1.1 var(--display);letter-spacing:-.02em;color:var(--navy);white-space:nowrap;pointer-events:none}
  #loop.is_scene .method_model[data-turn="a"]::after{animation:c4s-loop-name-a .5s cubic-bezier(.25,.1,.25,1)}
  #loop.is_scene .method_model[data-turn="b"]::after{animation:c4s-loop-name-b .5s cubic-bezier(.25,.1,.25,1)}
}
/* the name arrives each time the phase changes: two names for one movement, so that a change of phase starts it again */
@keyframes c4s-loop-name-a{from{opacity:0;transform:translate(-50%,calc(-50% + 12px))}}
@keyframes c4s-loop-name-b{from{opacity:0;transform:translate(-50%,calc(-50% + 12px))}}
/* a browser without trigonometry in CSS (before 2023) gets the steps as a plain list instead of the ring */
@supports not (left:calc(1px * sin(1deg))){
  .section_loop .method_loop{height:auto;background:none}
  .section_loop .method_loop::before,.section_loop .method_loop::after{display:none}
  .section_loop .method_loop li{position:static;transform:none;display:inline-block;margin:0 8px 8px 0}
}

/* ==== Client results ==== */

/* ==== Client testimonials ==== */
@media screen and (min-width:992px){
  html body #video>div:first-child{padding-bottom:0;position:relative;top:5px}
}

/* ==== Footer ==== */

/* ==== Discuss your needs (the enquiry form) ==== */
html body #contact .w-input,
html body #contact .w-select{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:17px!important;line-height:26px!important;height:48px;padding:10px 14px;margin-bottom:0;border-radius:8px;border:1px solid rgb(214,214,214);background-color:#fff;color:rgb(31,29,30);transition:border-color .2s,box-shadow .2s}
html body #contact textarea.w-input{height:auto;min-height:104px;resize:vertical}
html body #contact .w-select{color:rgb(71,71,71);background-color:#fff!important}
html body #contact .w-input:focus,
html body #contact .w-select:focus{border-color:rgb(2,39,89);box-shadow:0 0 0 3px rgba(2,39,89,.12);outline:0}
html body #contact input[type="submit"]{font-family:"Inter","Helvetica Neue",Arial,sans-serif!important;font-weight:600!important;font-size:17px!important;line-height:1!important;height:60px;padding:0 32px;border-radius:8px;letter-spacing:.005em;transition:background-color .3s,transform .3s,box-shadow .3s}
html body #contact input[type="submit"]:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(2,39,89,.45)}
html body #contact .w-form{margin-bottom:0}

@media screen and (min-width:992px){
  html body #contact>div:first-child{display:grid;grid-template-columns:minmax(0,547fr) minmax(0,741fr);column-gap:88px;grid-template-rows:16px auto 1fr;position:relative;top:-38px}
  html body #contact .grid_split{display:contents}
  html body #contact .eyebrow_text{grid-column:1;grid-row:1;align-self:start}
  html body #contact .contact_ask{grid-column:1;grid-row:2;align-self:start;margin-top:22px}
  html body #contact .w-form{grid-column:2;grid-row:1 / -1}
  html body #contact .contact_ask .intro_text{margin-top:18px}
  html body #contact .contact_ask .note_text{margin-top:32px;padding-top:24px;border-top:1px solid rgba(31,29,30,.12);max-width:none;font-size:17px;line-height:26px;color:rgb(71,71,71)}
}

/* ==== Type hierarchy: quiet the small things ==== */
html body #contact .w-form label:not(.form_check){font-size:13px;line-height:18px;font-weight:500;letter-spacing:.01em;color:rgb(71,71,71);margin-bottom:6px}
html body #contact .w-select{font-size:15px!important;color:rgb(107,107,107)}
html body #contact .w-input::placeholder{font-size:15px;color:rgb(140,140,140)}
html body #contact label.form_check{font-size:13px;line-height:20px;color:rgb(107,107,107)}

html body #portfolio .item_title,
html body #method h3,
html body #develop b{font-weight:600}
html body #method .method_desc{color:rgba(242,240,238,.6)}
html body #portfolio .portfolio_tier:not(.is_flagship) .item_text{color:rgb(107,107,107)}
html body #portfolio .portfolio_tier:not(.is_flagship) .portfolio_level{color:rgb(140,140,140)}
html body #portfolio .is_flagship .item_text{color:rgba(242,240,238,.66)}
html body #develop b~span{color:rgb(107,107,107)}
html body #video .testimonials_card b~span{font-size:13px;line-height:21px;color:rgba(242,240,238,.58)}
html body #results blockquote~* span{color:rgb(125,125,125)}
html body #trust .trust_stat_detail{color:rgb(118,118,118)}

/* ==== Short screens: the hero ==== */
@media screen and (min-width:992px) and (max-height:849px){
  html body #top .hero_container{padding-top:72px}
  html body #top .hero_heading,
  html body #top .hero_heading em{font-size:52px!important;line-height:54px!important;letter-spacing:-1.04px!important}
  html body #top .hero_summary{margin-top:20px!important;font-size:18px!important;line-height:27px!important}
}
@media screen and (min-width:992px) and (max-height:699px){
  html body #top .hero_container{padding-top:64px}
  html body #top .hero_heading,
  html body #top .hero_heading em{font-size:44px!important;line-height:46px!important;letter-spacing:-.88px!important}
  html body #top .hero_summary{margin-top:16px!important;font-size:17px!important;line-height:25px!important}
}

/* ==== Size tiers by screen ==== */
:is(.text-style-beat,.is_beat){
  font-size:22px;
  line-height:1.35;
  font-weight:500;
}

html body #portfolio .portfolio_tier .item_title,
html body #method h3,
html body #develop b{
  font-weight:500;
}

#trust .trust_stat_label{
  font-weight:500;
}

#solve h2{
  font-size:44px;
  line-height:48px;
  letter-spacing:-0.88px;
}

#video h2 .text_nowrap{
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

#results .attribution_text img{
  object-fit:contain;
}

img[src=""],
img:not([src]){
  display:none;
}

@media screen and (pointer:fine) and (max-height:849px) and (min-height:700px){

  .eyebrow_text{
    font-size:13px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:0.08em;
  }

  #solve h2,#develop h2,#method h2,#portfolio h2,#loop h2,#results h2,#video h2,#contact h2{
    font-size:36px;
    line-height:1.11;
    letter-spacing:-0.02em;
  }

  #portfolio .portfolio_tier .item_title,
  #method h3,
  #develop b{
    font-size:22px;
    line-height:1.18;
    font-weight:500;
    letter-spacing:-0.02em;
  }

  #solve .solve_item b{
    font-size:28px;
    line-height:1.18;
    font-weight:500;
    letter-spacing:-0.02em;
  }

  #method .method_kicker,
  #portfolio .portfolio_level{
    font-size:11px;
    line-height:1.45;
    font-weight:600;
    letter-spacing:0.16em;
  }

  #trust .trust_stat_number{
    font-size:68px;
    line-height:1;
    font-weight:500;
    letter-spacing:-0.03em;
  }

  #results .results_figure{
    font-size:44px;
    line-height:1;
    font-weight:500;
    letter-spacing:-0.03em;
  }

  html body #develop .body_text,html body #develop .lead_text,html body #solve .intro_text,html body #method .intro_text,html body #portfolio .intro_text,html body #loop .intro_text,html body #contact .contact_ask .intro_text{
    font-size:17px;
    line-height:1.55;
    font-weight:400;
  }


  #portfolio .portfolio_tier .item_text,
  #develop li,
  #trust .trust_stat_detail{
    font-size:16px;
    line-height:1.5;
    font-weight:400;
  }

  #trust .trust_stat_label{
    font-size:17px;
    line-height:1.5;
    font-weight:500;
  }

  #results blockquote,
  #results .results_detail{
    font-size:20px;
    line-height:1.45;
    font-weight:400;
    font-family:"Inter","Helvetica Neue",Arial,sans-serif;
    letter-spacing:normal;
  }

  .button{
    font-size:16px;
    line-height:1.55;
    font-weight:600;
  }
  .button:not(.is_small){
    height:52px;
  }

  #contact .w-form label:not(.form_check){
    font-size:13px;
    line-height:1.38;
    font-weight:500;
  }
  #contact .w-input,
  #contact .w-select{
    font-size:16px;
    height:44px;
  }
  #contact input[type="submit"]{
    font-size:16px;
    height:52px;
  }
}

@media screen and (pointer:fine) and (max-height:699px){

  .eyebrow_text{
    font-size:13px;
    line-height:1.25;
    font-weight:500;
    letter-spacing:0.08em;
  }

  #solve h2,#develop h2,#method h2,#portfolio h2,#loop h2,#results h2,#video h2,#contact h2{
    font-size:36px;
    line-height:1.15;
    letter-spacing:-0.02em;
    text-wrap:balance;
  }

  #portfolio .portfolio_tier .item_title,
  #method h3,
  #develop b{
    font-size:22px;
    line-height:1.18;
    font-weight:500;
    letter-spacing:-0.02em;
  }

  #solve .solve_item b{
    font-size:28px;
    line-height:1.18;
    font-weight:500;
    letter-spacing:-0.02em;
  }

  #method .method_kicker,
  #portfolio .portfolio_level{
    font-size:11px;
    line-height:1.45;
    font-weight:600;
    letter-spacing:0.16em;
  }

  #trust .trust_stat_number{
    font-size:64px;
    line-height:1;
    font-weight:500;
    letter-spacing:-0.03em;
  }

  #results .results_figure{
    font-size:42px;
    line-height:1;
    font-weight:500;
    letter-spacing:-0.03em;
  }

  html body #develop .body_text,html body #develop .lead_text,html body #solve .intro_text,html body #method .intro_text,html body #portfolio .intro_text,html body #loop .intro_text,html body #contact .contact_ask .intro_text{
    font-size:17px;
    line-height:1.55;
    font-weight:400;
  }


  #portfolio .portfolio_tier .item_text,
  #develop li,
  #trust .trust_stat_detail{
    font-size:16px;
    line-height:1.5;
    font-weight:400;
  }

  #trust .trust_stat_label{
    font-size:17px;
    line-height:1.5;
    font-weight:500;
  }

  #results blockquote,
  #results .results_detail{
    font-size:20px;
    line-height:1.45;
    font-weight:400;
    font-family:"Inter","Helvetica Neue",Arial,sans-serif;
    letter-spacing:normal;
  }

  .button{
    font-size:16px;
    line-height:1.55;
    font-weight:600;
  }
  .button:not(.is_small){
    height:52px;
  }

  #contact .w-form label:not(.form_check){
    font-size:13px;
    line-height:1.38;
    font-weight:500;
  }
  #contact .w-input,
  #contact .w-select{
    font-size:16px;
    height:48px;
  }
  #contact input[type="submit"]{
    font-size:16px;
    height:52px;
  }
}

@media screen and (pointer:coarse) and (min-width:768px){

  .eyebrow_text{
    font-size:13px;
    line-height:1.3;
    font-weight:500;
    letter-spacing:0.09em;
  }

  #solve h2,#develop h2,#method h2,#portfolio h2,#loop h2,#results h2,#video h2,#contact h2{
    font-size:32px;
    line-height:1.15;
    letter-spacing:-0.02em;
    text-wrap:balance;
  }

  #portfolio .portfolio_tier .item_title,
  #method h3,
  #develop b{
    font-size:20px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:-0.02em;
  }

  #solve .solve_item b{
    font-size:24px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:-0.02em;
  }

  #method .method_kicker,
  #portfolio .portfolio_level{
    font-size:11px;
    line-height:1.45;
    font-weight:600;
    letter-spacing:0.16em;
  }

  #trust .trust_stat_number{
    font-size:48px;
    line-height:1;
    font-weight:500;
    letter-spacing:-0.03em;
  }

  #results .results_figure{
    font-size:36px;
    line-height:1;
    font-weight:500;
    letter-spacing:-0.03em;
  }

  html body #develop .lead_text{
    font-size:17px;
    line-height:1.6;
    font-weight:400;
  }
  html body #develop .body_text,html body #solve .intro_text,html body #method .intro_text,html body #portfolio .intro_text,html body #loop .intro_text,html body #contact .contact_ask .intro_text{
    font-size:16px;
    line-height:1.6;
    font-weight:400;
  }


  #portfolio .portfolio_tier .item_text,
  #develop li,
  #trust .trust_stat_detail{
    font-size:15px;
    line-height:1.55;
    font-weight:400;
  }

  #trust .trust_stat_label{
    font-size:16px;
    line-height:1.5;
    font-weight:500;
  }

  #results blockquote,
  #results .results_detail{
    font-size:19px;
    line-height:1.5;
    font-weight:400;
    font-family:"Inter","Helvetica Neue",Arial,sans-serif;
    letter-spacing:normal;
  }

  .button{
    font-size:16px;
    line-height:1.6;
    font-weight:600;
  }
  .button:not(.is_small){
    height:52px;
    min-height:44px;
  }

  #contact .w-form label:not(.form_check){
    font-size:13px;
    line-height:1.38;
    font-weight:500;
  }
  #contact .w-input,
  #contact .w-select{
    font-size:17px;
    height:48px;
  }
  #contact input[type="submit"]{
    font-size:16px;
    height:52px;
  }
}

@media screen and (pointer:coarse) and (max-width:767px){

  .eyebrow_text{
    font-size:13px;
    line-height:1.3;
    font-weight:500;
    letter-spacing:0.09em;
  }

  #solve h2,#develop h2,#method h2,#portfolio h2,#loop h2,#results h2,#video h2,#contact h2{
    font-size:clamp(1.75rem, 1.6rem + 0.9vw, 1.875rem);
    line-height:1.18;
    letter-spacing:-0.02em;
    text-wrap:balance;
  }

  #portfolio .portfolio_tier .item_title,
  #method h3,
  #develop b{
    font-size:20px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:-0.02em;
  }

  #solve .solve_item b{
    font-size:22px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:-0.02em;
  }

  #method .method_kicker,
  #portfolio .portfolio_level{
    font-size:11px;
    line-height:1.45;
    font-weight:600;
    letter-spacing:0.16em;
  }

  #trust .trust_stat_number{
    font-size:42px;
    line-height:1;
    font-weight:500;
    letter-spacing:-0.03em;
  }

  #results .results_figure{
    font-size:34px;
    line-height:1;
    font-weight:500;
    letter-spacing:-0.03em;
  }

  html body #develop .body_text,html body #develop .lead_text,html body #solve .intro_text,html body #method .intro_text,html body #portfolio .intro_text,html body #loop .intro_text,html body #contact .contact_ask .intro_text{
    font-size:16px;
    line-height:1.6;
    font-weight:400;
  }


  #portfolio .portfolio_tier .item_text,
  #develop li,
  #trust .trust_stat_detail{
    font-size:15px;
    line-height:1.55;
    font-weight:400;
  }

  #trust .trust_stat_label{
    font-size:15px;
    line-height:1.5;
    font-weight:500;
  }

  #results blockquote,
  #results .results_detail{
    font-size:18px;
    line-height:1.5;
    font-weight:400;
    font-family:"Inter","Helvetica Neue",Arial,sans-serif;
    letter-spacing:normal;
  }

  .button{
    font-size:16px;
    line-height:1.6;
    font-weight:600;
  }
  .button:not(.is_small){
    height:48px;
    min-height:44px;
  }

  #contact .w-form label:not(.form_check){
    font-size:13px;
    line-height:1.38;
    font-weight:500;
  }
  #contact .w-input,
  #contact .w-select{
    font-size:17px;
    height:48px;
  }
  #contact input[type="submit"]{
    font-size:16px;
    height:48px;
  }
}

#portfolio .portfolio_tier .is_small{
  font-size:14px;
  line-height:1.4;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}


@media screen and (pointer:fine) and (max-height:849px) and (min-height:700px){
  html body #solve .solve_intro .intro_text{font-size:17px;line-height:1.55;font-weight:400}
}
@media screen and (pointer:fine) and (max-height:699px){
  html body #solve .solve_intro .intro_text{font-size:17px;line-height:1.55;font-weight:400}
}
@media screen and (pointer:coarse) and (min-width:768px){
  html body #solve .solve_intro .intro_text{font-size:16px;line-height:1.6;font-weight:400}
}
@media screen and (pointer:coarse) and (max-width:767px){
  html body #solve .solve_intro .intro_text{font-size:16px;line-height:1.6;font-weight:400}
}

@media screen and (pointer:fine) and (max-height:849px) and (min-height:700px){
  html body #method .method_intro h3,
  html body #develop .develop_capability b{font-size:22px;line-height:1.18;font-weight:500;letter-spacing:-0.02em}
  html body #method .method_intros .intro_text,
  html body #portfolio .portfolio_head .intro_text{font-size:17px;line-height:1.55;font-weight:400}
}
@media screen and (pointer:fine) and (max-height:699px){
  html body #method .method_intro h3,
  html body #develop .develop_capability b{font-size:22px;line-height:1.18;font-weight:500;letter-spacing:-0.02em}
  html body #method .method_intros .intro_text,
  html body #portfolio .portfolio_head .intro_text{font-size:17px;line-height:1.55;font-weight:400}
}
@media screen and (pointer:coarse) and (min-width:768px){
  html body #method .method_intro h3,
  html body #develop .develop_capability b{font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-0.02em}
  html body #method .method_intros .intro_text,
  html body #portfolio .portfolio_head .intro_text{font-size:16px;line-height:1.6;font-weight:400}
}
@media screen and (pointer:coarse) and (max-width:767px){
  html body #method .method_intro h3,
  html body #develop .develop_capability b{font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-0.02em}
  html body #method .method_intros .intro_text,
  html body #portfolio .portfolio_head .intro_text{font-size:16px;line-height:1.6;font-weight:400}
}

@media screen and (pointer:fine) and (max-height:849px) and (min-height:700px){
  html body #portfolio .portfolio_head h2{font-size:36px;line-height:1.11;letter-spacing:-0.02em}
}
@media screen and (pointer:fine) and (max-height:699px){
  html body #portfolio .portfolio_head h2{font-size:36px;line-height:1.15;letter-spacing:-0.02em;text-wrap:balance}
}
@media screen and (pointer:coarse) and (min-width:768px){
  html body #portfolio .portfolio_head h2{font-size:32px;line-height:1.15;letter-spacing:-0.02em;text-wrap:balance}
}
@media screen and (pointer:coarse) and (max-width:767px){
  html body #portfolio .portfolio_head h2{font-size:clamp(1.75rem, 1.6rem + 0.9vw, 1.875rem);line-height:1.18;letter-spacing:-0.02em;text-wrap:balance}
}

@media screen and (min-width:992px) and (pointer:fine) and (min-height:850px) and (max-height:999px){
  html body #top .hero_heading,
  html body #top .hero_heading em{font-size:60px !important;line-height:62px !important;letter-spacing:-1.2px !important}
}


/* ==== Behaviour tiers by screen (held scenes, touch) ==== */




@media screen and (pointer:fine) and (max-height:1100px) and (height >= 680px){
  html body #contact > div:first-child{
    top:104px;
  }
}

@media screen and (pointer:coarse){
  html,
  body{
    overflow-x:hidden;
  }
}

@media screen and (pointer:fine) and (max-height:849px) and (height >= 680px){

  html body #develop,
  html body #method,
  html body #loop,
  html body #results,
  html body #video,
  html body #trust,
  html body #solve{padding-top:96px;padding-bottom:28px}
  html body #portfolio{padding-top:92px;padding-bottom:20px}
  html body #contact{padding-top:96px;padding-bottom:20px}
  html body #solve{padding-bottom:20px}
  html body #video{padding-bottom:20px}

  html body #develop > div:first-child,
  html body #portfolio > div:first-child,
  html body #method > div:first-child,
  html body #loop > div:first-child,
  html body #results > div:first-child,
  html body #trust > div:first-child,
  html body #video > div:first-child{padding-bottom:0}
  html body #solve > div:first-child{padding-top:0}

  html body #develop .develop_capability{padding:10px 0}
  html body #develop .lead_text{margin-top:20px}
  html body #develop ul{margin-top:12px;gap:6px}

  html body #portfolio .portfolio_tiers{margin-top:20px;gap:18px}
  html body #portfolio .portfolio_tier{min-height:0;padding:18px 20px}
  html body #portfolio .portfolio_tier .item_title{margin-top:14px;min-height:72px}
  html body #portfolio .portfolio_tier .item_text{margin-top:10px;margin-bottom:16px}


  html body #video .testimonials_card{width:236px;height:314px}

  html body #solve .solve_stage{min-height:250px;margin-top:18px}
  html.is_js body #solve .solve_track{min-height:250px}
  html body #solve .solve_index li a{padding-top:9px;padding-bottom:9px}

  html body #contact textarea.w-input{height:auto;min-height:72px}
  html body #contact .contact_ask .note_text{margin-top:20px;padding-top:16px}
  html body #enquiry{gap:10px 18px}

}

@media screen and (pointer:fine) and (max-height:849px) and (height >= 680px){
  html body #solve .solve_stage{min-height:225px;margin-top:14px}
  html.is_js body #solve .solve_track{min-height:225px}
  html body #solve .solve_index li a{padding-top:6px;padding-bottom:6px}

  html body #portfolio{padding-top:88px}
  html body #portfolio .portfolio_tiers{margin-top:14px;gap:16px}
  html body #portfolio .portfolio_tier{padding:16px 18px}
  html body #portfolio .portfolio_tier .item_title{min-height:0;margin-top:12px}
  html body #portfolio .portfolio_tier .item_text{margin-top:8px;margin-bottom:12px}
}

@media screen and (min-width:992px){
  html body .navbar_dropdown_list{padding-top:32px}
}
@media screen and (min-width:992px) and (pointer:fine){
  html body #top .hero_summary{word-spacing:normal !important;text-wrap:pretty}
  html body #top .hero_proof_inner{max-width:1376px}
  html body #top .hero_proof_logos{justify-content:space-between;gap:0}
}
@media screen and (min-width:992px) and (max-width:1599px) and (pointer:fine){
  html body #top .hero_proof_inner{max-width:1096px}
}
@media screen and (min-width:992px) and (pointer:fine) and (min-height:850px) and (max-height:999px){
  html body #top .hero_container{padding-top:68px}
}
@media screen and (min-width:992px) and (pointer:fine) and (min-height:700px) and (max-height:849px){
  html body #top .hero_container{padding-top:104px}
  html body #top .hero_proof_logos img{transform:scale(.82);transform-origin:center center}
  html body #top .hero_proof_label{font-size:11px}
}


/* ==== Fluid desktop scale, and the story on 15-inch screens ==== */
@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 1190px) {
  html body #contact .contact_ask .note_text {
    margin-top: clamp(18.696px, calc(20px + 12 * (100vh - 730px) / 460), 32px) !important;
    padding-top: clamp(15.13px, calc(16px + 8 * (100vh - 730px) / 460), 24px) !important;
  }
  html body #contact .contact_ask .intro_text {
    font-size: clamp(16.674px, calc(17px + 3 * (100vh - 730px) / 460), 20px) !important;
    line-height: clamp(26.062px, calc(26.35px + 2.65 * (100vh - 730px) / 460), 29px) !important;
  }
  html body #contact #enquiry {
    column-gap: clamp(16px, calc(18px - 2 * (100vh - 730px) / 460), 18px) !important;
  }
  html body #contact h2 {
    font-size: clamp(35.13px, calc(36px + 8 * (100vh - 730px) / 460), 44px) !important;
    letter-spacing: clamp(-0.88px, calc(-0.72px - 0.16 * (100vh - 730px) / 460), -0.72px) !important;
    line-height: clamp(39.086px, calc(39.96px + 8.04 * (100vh - 730px) / 460), 48px) !important;
  }
  html body #contact textarea.w-input {
    height: clamp(70px, calc(73.333px + 30.667 * (100vh - 730px) / 460), 104px) !important;
    min-height: clamp(68.522px, calc(72px + 32 * (100vh - 730px) / 460), 104px) !important;
  }
  html body #develop {
    padding-bottom: clamp(9.913px, calc(16px + 56 * (100vh - 730px) / 460), 72px) !important;
    padding-top: clamp(72px, calc(96px - 24 * (100vh - 730px) / 460), 96px) !important;
  }
  html body #develop .body_text {
    font-size: clamp(16.674px, calc(17px + 3 * (100vh - 730px) / 460), 20px) !important;
    line-height: clamp(26.062px, calc(26.35px + 2.65 * (100vh - 730px) / 460), 29px) !important;
  }
  html body #develop .develop_capability b {
    font-size: clamp(21.565px, calc(22px + 4 * (100vh - 730px) / 460), 26px) !important;
    letter-spacing: clamp(-0.52px, calc(-0.44px - 0.08 * (100vh - 730px) / 460), -0.44px) !important;
    line-height: clamp(25.521px, calc(25.96px + 4.04 * (100vh - 730px) / 460), 30px) !important;
  }
  html body #develop .lead_text {
    font-size: clamp(16.674px, calc(17px + 3 * (100vh - 730px) / 460), 20px) !important;
    line-height: clamp(26.062px, calc(26.35px + 2.65 * (100vh - 730px) / 460), 29px) !important;
    margin-top: clamp(19.565px, calc(20px + 4 * (100vh - 730px) / 460), 24px) !important;
  }
  html body #develop > div:first-child {
    padding-bottom: clamp(0px, calc(0px + 37 * (100vh - 730px) / 460), 37px) !important;
  }
  html body #develop b {
    font-size: clamp(21.565px, calc(22px + 4 * (100vh - 730px) / 460), 26px) !important;
    letter-spacing: clamp(-0.52px, calc(-0.44px - 0.08 * (100vh - 730px) / 460), -0.44px) !important;
    line-height: clamp(25.521px, calc(25.96px + 4.04 * (100vh - 730px) / 460), 30px) !important;
  }
  html body #develop h2 {
    font-size: clamp(35.13px, calc(36px + 8 * (100vh - 730px) / 460), 44px) !important;
    letter-spacing: clamp(-0.88px, calc(-0.72px - 0.16 * (100vh - 730px) / 460), -0.72px) !important;
    line-height: clamp(39.086px, calc(39.96px + 8.04 * (100vh - 730px) / 460), 48px) !important;
  }
  html body #develop ul {
    column-gap: clamp(5.783px, calc(6px + 2 * (100vh - 730px) / 460), 8px) !important;
    margin-top: clamp(10px, calc(12px - 2 * (100vh - 730px) / 460), 12px) !important;
    row-gap: clamp(5.783px, calc(6px + 2 * (100vh - 730px) / 460), 8px) !important;
  }
  html body #loop {
    padding-bottom: clamp(9.913px, calc(16px + 56 * (100vh - 730px) / 460), 72px) !important;
    padding-top: clamp(72px, calc(96px - 24 * (100vh - 730px) / 460), 96px) !important;
  }
  html body #loop .intro_text {
    font-size: clamp(16.674px, calc(17px + 3 * (100vh - 730px) / 460), 20px) !important;
    line-height: clamp(26.062px, calc(26.35px + 2.65 * (100vh - 730px) / 460), 29px) !important;
  }
  html body #loop h2 {
    font-size: clamp(35.13px, calc(36px + 8 * (100vh - 730px) / 460), 44px) !important;
    letter-spacing: clamp(-0.88px, calc(-0.72px - 0.16 * (100vh - 730px) / 460), -0.72px) !important;
    line-height: clamp(39.086px, calc(39.96px + 8.04 * (100vh - 730px) / 460), 48px) !important;
  }
  html body #portfolio {
    padding-bottom: clamp(14.348px, calc(20px + 52 * (100vh - 730px) / 460), 72px) !important;
    padding-top: clamp(72px, calc(88px - 16 * (100vh - 730px) / 460), 88px) !important;
  }
  html body #portfolio .portfolio_level {
    line-height: clamp(15.771px, calc(15.95px + 1.65 * (100vh - 730px) / 460), 17.6px) !important;
  }
  html body #portfolio .portfolio_head .intro_text {
    font-size: clamp(16.674px, calc(17px + 3 * (100vh - 730px) / 460), 20px) !important;
    line-height: clamp(26.062px, calc(26.35px + 2.65 * (100vh - 730px) / 460), 29px) !important;
  }
  html body #portfolio .portfolio_head h2 {
    font-size: clamp(35.13px, calc(36px + 8 * (100vh - 730px) / 460), 44px) !important;
    letter-spacing: clamp(-0.88px, calc(-0.72px - 0.16 * (100vh - 730px) / 460), -0.72px) !important;
    line-height: clamp(39.086px, calc(39.96px + 8.04 * (100vh - 730px) / 460), 48px) !important;
  }
  html body #portfolio .intro_text {
    font-size: clamp(16.674px, calc(17px + 3 * (100vh - 730px) / 460), 20px) !important;
    line-height: clamp(26.062px, calc(26.35px + 2.65 * (100vh - 730px) / 460), 29px) !important;
  }
  html body #portfolio .portfolio_tier .item_text {
    font-size: clamp(15.891px, calc(16px + 1 * (100vh - 730px) / 460), 17px) !important;
    line-height: clamp(23.783px, calc(24px + 2 * (100vh - 730px) / 460), 26px) !important;
    margin-bottom: clamp(10.261px, calc(12px + 16 * (100vh - 730px) / 460), 28px) !important;
    margin-top: clamp(7.13px, calc(8px + 8 * (100vh - 730px) / 460), 16px) !important;
  }
  html body #portfolio .portfolio_tier .item_title {
    font-size: clamp(21.565px, calc(22px + 4 * (100vh - 730px) / 460), 26px) !important;
    letter-spacing: clamp(-0.52px, calc(-0.44px - 0.08 * (100vh - 730px) / 460), -0.44px) !important;
    line-height: clamp(25.521px, calc(25.96px + 4.04 * (100vh - 730px) / 460), 30px) !important;
    margin-top: clamp(10.478px, calc(12px + 14 * (100vh - 730px) / 460), 26px) !important;
    min-height: clamp(0px, calc(0px + 90 * (100vh - 730px) / 460), 90px) !important;
  }
  html body #portfolio .portfolio_tier:not(.is_flagship) {
    min-height: clamp(0px, calc(0px + 380 * (100vh - 730px) / 460), 380px) !important;
    padding-bottom: clamp(14.696px, calc(16px + 12 * (100vh - 730px) / 460), 28px) !important;
    padding-left: clamp(16.913px, calc(18px + 10 * (100vh - 730px) / 460), 28px) !important;
    padding-right: clamp(16.913px, calc(18px + 10 * (100vh - 730px) / 460), 28px) !important;
    padding-top: clamp(14.478px, calc(16px + 14 * (100vh - 730px) / 460), 30px) !important;
  }
  html body #portfolio .portfolio_tiers {
    column-gap: clamp(15.13px, calc(16px + 8 * (100vh - 730px) / 460), 24px) !important;
    margin-top: clamp(8.565px, calc(14px + 50 * (100vh - 730px) / 460), 64px) !important;
    row-gap: clamp(15.13px, calc(16px + 8 * (100vh - 730px) / 460), 24px) !important;
  }
  html body #portfolio > div:first-child {
    padding-bottom: clamp(0px, calc(0px + 37 * (100vh - 730px) / 460), 37px) !important;
  }
  html body #portfolio h2 {
    font-size: clamp(35.13px, calc(36px + 8 * (100vh - 730px) / 460), 44px) !important;
    letter-spacing: clamp(-0.88px, calc(-0.72px - 0.16 * (100vh - 730px) / 460), -0.72px) !important;
    line-height: clamp(39.086px, calc(39.96px + 8.04 * (100vh - 730px) / 460), 48px) !important;
  }
  html body #results {
    padding-bottom: clamp(23.217px, calc(28px + 44 * (100vh - 730px) / 460), 72px) !important;
    padding-top: clamp(72px, calc(96px - 24 * (100vh - 730px) / 460), 96px) !important;
  }
  html body #results .results_figure {
    font-size: clamp(42.696px, calc(44px + 12 * (100vh - 730px) / 460), 56px) !important;
    letter-spacing: clamp(-1.68px, calc(-1.32px - 0.36 * (100vh - 730px) / 460), -1.32px) !important;
    line-height: clamp(42.696px, calc(44px + 12 * (100vh - 730px) / 460), 56px) !important;
  }
  html body #results .results_detail {
    font-size: clamp(15.891px, calc(16px + 1 * (100vh - 730px) / 460), 17px) !important;
    line-height: clamp(23.783px, calc(24px + 2 * (100vh - 730px) / 460), 26px) !important;
  }
  html body #results > div:first-child {
    padding-bottom: clamp(0px, calc(0px + 37 * (100vh - 730px) / 460), 37px) !important;
  }
  html body #results blockquote {
    font-size: clamp(19.783px, calc(20px + 2 * (100vh - 730px) / 460), 22px) !important;
    line-height: clamp(28.674px, calc(29px + 3 * (100vh - 730px) / 460), 32px) !important;
  }
  html body #solve {
    padding-bottom: clamp(14.348px, calc(20px + 52 * (100vh - 730px) / 460), 72px) !important;
    padding-top: clamp(72px, calc(96px - 24 * (100vh - 730px) / 460), 96px) !important;
  }
  html body #solve .solve_intro .intro_text {
    font-size: clamp(16.891px, calc(17px + 1 * (100vh - 730px) / 460), 18px) !important;
    line-height: clamp(26.171px, calc(26.35px + 1.65 * (100vh - 730px) / 460), 28px) !important;
  }
  html body #solve .solve_index li a {
    padding-bottom: clamp(4px, calc(6px - 2 * (100vh - 730px) / 460), 6px) !important;
    padding-top: clamp(4px, calc(6px - 2 * (100vh - 730px) / 460), 6px) !important;
  }
  html body #solve .solve_stage {
    margin-top: clamp(12.478px, calc(14px + 14 * (100vh - 730px) / 460), 28px) !important;
    min-height: clamp(216.848px, calc(225px + 75 * (100vh - 730px) / 460), 300px) !important;
  }
  html body #solve .intro_text {
    font-size: clamp(16.891px, calc(17px + 1 * (100vh - 730px) / 460), 18px) !important;
    line-height: clamp(26.171px, calc(26.35px + 1.65 * (100vh - 730px) / 460), 28px) !important;
  }
  html body #solve > div:first-child {
    padding-top: clamp(0px, calc(0px + 42 * (100vh - 730px) / 460), 42px) !important;
  }
  html body #solve h2 {
    font-size: clamp(35.13px, calc(36px + 8 * (100vh - 730px) / 460), 44px) !important;
    letter-spacing: clamp(-0.88px, calc(-0.72px - 0.16 * (100vh - 730px) / 460), -0.72px) !important;
    line-height: clamp(39.086px, calc(39.96px + 8.04 * (100vh - 730px) / 460), 48px) !important;
  }
  html body #trust {
    padding-bottom: clamp(23.217px, calc(28px + 44 * (100vh - 730px) / 460), 72px) !important;
    padding-top: clamp(72px, calc(96px - 24 * (100vh - 730px) / 460), 96px) !important;
  }
  html body #trust .trust_stat_detail {
    font-size: clamp(15.891px, calc(16px + 1 * (100vh - 730px) / 460), 17px) !important;
    line-height: clamp(23.783px, calc(24px + 2 * (100vh - 730px) / 460), 26px) !important;
  }
  html body #trust > div:first-child {
    padding-bottom: clamp(0px, calc(0px + 37 * (100vh - 730px) / 460), 37px) !important;
  }
  html body #video {
    padding-bottom: clamp(14.348px, calc(20px + 52 * (100vh - 730px) / 460), 72px) !important;
    padding-top: clamp(72px, calc(96px - 24 * (100vh - 730px) / 460), 96px) !important;
  }
  html body #video h2 {
    font-size: clamp(35.13px, calc(36px + 8 * (100vh - 730px) / 460), 44px) !important;
    letter-spacing: clamp(-0.88px, calc(-0.72px - 0.16 * (100vh - 730px) / 460), -0.72px) !important;
    line-height: clamp(39.086px, calc(39.96px + 8.04 * (100vh - 730px) / 460), 48px) !important;
  }
  html.is_js body #solve .solve_track {
    min-height: clamp(216.848px, calc(225px + 75 * (100vh - 730px) / 460), 300px) !important;
  }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 1190px) and (width < 1800px) {
  html body #develop .button {
    line-height: clamp(24.713px, calc(24.8px + 0.8 * (100vh - 730px) / 460), 25.6px) !important;
  }
  html body #develop .develop_capability {
    padding-bottom: clamp(9.565px, calc(10px + 4 * (100vh - 730px) / 460), 14px) !important;
    padding-top: clamp(9.565px, calc(10px + 4 * (100vh - 730px) / 460), 14px) !important;
  }
  html body #solve .button {
    line-height: clamp(24.713px, calc(24.8px + 0.8 * (100vh - 730px) / 460), 25.6px) !important;
  }
  html body #solve .button:not(.is_small) {
    height: clamp(51.783px, calc(52px + 2 * (100vh - 730px) / 460), 54px) !important;
  }
  html body #solve .solve_item:not(.is_fallback) b {
    font-size: clamp(27.783px, calc(28px + 2 * (100vh - 730px) / 460), 30px) !important;
    letter-spacing: clamp(-0.572px, calc(-0.56px + 0.11 * (100vh - 730px) / 460), -0.45px) !important;
    line-height: clamp(32.718px, calc(33.04px + 2.96 * (100vh - 730px) / 460), 36px) !important;
  }
  html body #solve .solve_item.is_fallback b {
    font-size: clamp(27.13px, calc(28px + 8 * (100vh - 730px) / 460), 36px) !important;
    letter-spacing: clamp(-0.562px, calc(-0.56px + 0.02 * (100vh - 730px) / 460), -0.54px) !important;
    line-height: clamp(32.327px, calc(33.04px + 6.56 * (100vh - 730px) / 460), 39.6px) !important;
  }
  html body #trust .trust_stat_label {
    line-height: clamp(25.315px, calc(25.5px + 1.7 * (100vh - 730px) / 460), 27.2px) !important;
  }
  html body #trust .trust_stat_number {
    font-size: clamp(67.739px, calc(68px + 2.4 * (100vh - 730px) / 460), 70.4px) !important;
    letter-spacing: clamp(-2.112px, calc(-2.04px - 0.072 * (100vh - 730px) / 460), -2.04px) !important;
    line-height: clamp(67.739px, calc(68px + 2.4 * (100vh - 730px) / 460), 70.4px) !important;
  }
  html body #video .testimonials_card {
    height: clamp(305.837px, calc(314px + 75.104 * (100vh - 730px) / 460), 389.104px) !important;
  }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 1190px) and (width >= 1800px) {
  html body #develop .button {
    line-height: clamp(26.258px, calc(26.35px + 0.85 * (100vh - 730px) / 460), 27.2px) !important;
  }
  html body #develop .develop_capability {
    padding-bottom: clamp(9.13px, calc(10px + 8 * (100vh - 730px) / 460), 18px) !important;
    padding-top: clamp(9.13px, calc(10px + 8 * (100vh - 730px) / 460), 18px) !important;
  }
  html body #solve .button {
    font-size: clamp(15.891px, calc(16px + 1 * (100vh - 730px) / 460), 17px) !important;
    line-height: clamp(24.539px, calc(24.8px + 2.4 * (100vh - 730px) / 460), 27.2px) !important;
  }
  html body #solve .button:not(.is_small) {
    height: clamp(51.13px, calc(52px + 8 * (100vh - 730px) / 460), 60px) !important;
  }
  html body #solve .solve_item:not(.is_fallback) b {
    font-size: clamp(27.348px, calc(28px + 6 * (100vh - 730px) / 460), 34px) !important;
    letter-spacing: clamp(-0.565px, calc(-0.56px + 0.05 * (100vh - 730px) / 460), -0.51px) !important;
    line-height: clamp(32.197px, calc(33.04px + 7.76 * (100vh - 730px) / 460), 40.8px) !important;
  }
  html body #solve .solve_item.is_fallback b {
    font-size: clamp(26.696px, calc(28px + 12 * (100vh - 730px) / 460), 40px) !important;
    letter-spacing: clamp(-0.6px, calc(-0.56px - 0.04 * (100vh - 730px) / 460), -0.56px) !important;
    line-height: clamp(31.849px, calc(33.04px + 10.96 * (100vh - 730px) / 460), 44px) !important;
  }
  html body #trust .trust_stat_label {
    font-size: clamp(16.783px, calc(17px + 2 * (100vh - 730px) / 460), 19px) !important;
    line-height: clamp(24.967px, calc(25.5px + 4.9 * (100vh - 730px) / 460), 30.4px) !important;
  }
  html body #trust .trust_stat_number {
    font-size: clamp(65.826px, calc(68px + 20 * (100vh - 730px) / 460), 88px) !important;
    letter-spacing: clamp(-2.64px, calc(-2.04px - 0.6 * (100vh - 730px) / 460), -2.04px) !important;
    line-height: clamp(65.826px, calc(68px + 20 * (100vh - 730px) / 460), 88px) !important;
  }
  html body #video .testimonials_card {
    height: clamp(303.203px, calc(314px + 99.333 * (100vh - 730px) / 460), 413.333px) !important;
  }
}

@media screen and (min-width: 992px) and (pointer: fine) and (730px <= height < 1190px) {

  html body #develop .button { margin-top: clamp(32px, calc(32px + 12 * (100vh - 730px) / 460), 44px) !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 730px) {
  html body #contact .contact_ask .intro_text {
    font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important;
    line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important;
  }
  html body #contact h2 {
    font-size: clamp(34px, calc(34px + 2 * (100vh - 680px) / 50), 36px) !important;
    line-height: clamp(37.74px, calc(37.74px + 2.22 * (100vh - 680px) / 50), 39.96px) !important;
  }
  html body #develop {
    padding-bottom: clamp(8px, calc(8px + 8 * (100vh - 680px) / 50), 16px) !important;
    padding-top: 96px !important;
  }
  html body #develop .body_text {
    font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important;
    line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important;
  }
  html body #develop .button {
    margin-top: clamp(24px, calc(24px + 8 * (100vh - 680px) / 50), 32px) !important;
  }
  html body #develop .develop_capability {
    padding-bottom: clamp(4px, calc(4px + 6 * (100vh - 680px) / 50), 10px) !important;
    padding-top: clamp(4px, calc(4px + 6 * (100vh - 680px) / 50), 10px) !important;
  }
  html body #develop .develop_capability b {
    font-size: clamp(21px, calc(21px + 1 * (100vh - 680px) / 50), 22px) !important;
    line-height: clamp(24.78px, calc(24.78px + 1.18 * (100vh - 680px) / 50), 25.96px) !important;
  }
  html body #develop .lead_text {
    font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important;
    line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important;
    margin-top: clamp(12px, calc(12px + 8 * (100vh - 680px) / 50), 20px) !important;
  }
  html body #develop b {
    font-size: clamp(21px, calc(21px + 1 * (100vh - 680px) / 50), 22px) !important;
    line-height: clamp(24.78px, calc(24.78px + 1.18 * (100vh - 680px) / 50), 25.96px) !important;
  }
  html body #develop h2 {
    font-size: clamp(34px, calc(34px + 2 * (100vh - 680px) / 50), 36px) !important;
    line-height: clamp(37.74px, calc(37.74px + 2.22 * (100vh - 680px) / 50), 39.96px) !important;
  }
  html body #develop ul {
    column-gap: clamp(3px, calc(3px + 3 * (100vh - 680px) / 50), 6px) !important;
    margin-top: clamp(6px, calc(6px + 6 * (100vh - 680px) / 50), 12px) !important;
    row-gap: clamp(2px, calc(2px + 4 * (100vh - 680px) / 50), 6px) !important;
  }
  html body #loop {
    padding-bottom: clamp(8px, calc(8px + 8 * (100vh - 680px) / 50), 16px) !important;
    padding-top: 96px !important;
  }
  html body #loop .intro_text {
    font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important;
    line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important;
  }
  html body #loop h2 {
    font-size: clamp(34px, calc(34px + 2 * (100vh - 680px) / 50), 36px) !important;
    line-height: clamp(37.74px, calc(37.74px + 2.22 * (100vh - 680px) / 50), 39.96px) !important;
  }
  html body #portfolio {
    padding-bottom: clamp(0px, calc(0px + 20 * (100vh - 680px) / 50), 20px) !important;
    padding-top: 88px !important;
  }
  html body #portfolio .portfolio_head h2 {
    font-size: clamp(34px, calc(34px + 2 * (100vh - 680px) / 50), 36px) !important;
    line-height: clamp(37.74px, calc(37.74px + 2.22 * (100vh - 680px) / 50), 39.96px) !important;
  }
  html body #portfolio .intro_text {
    font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important;
    line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important;
  }
  html body #portfolio .portfolio_tier .item_text {
    font-size: clamp(15px, calc(15px + 1 * (100vh - 680px) / 50), 16px) !important;
    line-height: clamp(22px, calc(22px + 2 * (100vh - 680px) / 50), 24px) !important;
    margin-bottom: clamp(8px, calc(8px + 4 * (100vh - 680px) / 50), 12px) !important;
  }
  html body #portfolio .portfolio_tier .item_title {
    font-size: clamp(21px, calc(21px + 1 * (100vh - 680px) / 50), 22px) !important;
    line-height: clamp(24.78px, calc(24.78px + 1.18 * (100vh - 680px) / 50), 25.96px) !important;
  }
  html body #portfolio .portfolio_tier.is_flagship {
    min-height: clamp(300px, calc(300px + 80 * (100vh - 680px) / 50), 380px) !important;
    padding-bottom: clamp(14px, calc(14px + 14 * (100vh - 680px) / 50), 28px) !important;
    padding-top: clamp(16px, calc(16px + 14 * (100vh - 680px) / 50), 30px) !important;
  }
  html body #portfolio .portfolio_tiers {
    margin-top: clamp(12px, calc(12px + 2 * (100vh - 680px) / 50), 14px) !important;
  }
  html body #portfolio h2 {
    font-size: clamp(34px, calc(34px + 2 * (100vh - 680px) / 50), 36px) !important;
    line-height: clamp(37.74px, calc(37.74px + 2.22 * (100vh - 680px) / 50), 39.96px) !important;
  }
  html body #results {
    padding-bottom: clamp(12px, calc(12px + 16 * (100vh - 680px) / 50), 28px) !important;
    padding-top: 96px !important;
  }
  html body #solve {
    padding-bottom: clamp(8px, calc(8px + 12 * (100vh - 680px) / 50), 20px) !important;
    padding-top: 96px !important;
  }
  html body #solve .solve_intro .intro_text {
    font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important;
    line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important;
  }
  html body #solve .solve_index li a {
    padding-bottom: clamp(3px, calc(3px + 3 * (100vh - 680px) / 50), 6px) !important;
    padding-top: clamp(3px, calc(3px + 3 * (100vh - 680px) / 50), 6px) !important;
  }
  html body #solve .solve_stage {
    margin-top: clamp(10px, calc(10px + 4 * (100vh - 680px) / 50), 14px) !important;
  }
  html body #solve .intro_text {
    font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important;
    line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important;
  }
  html body #solve h2 {
    font-size: clamp(34px, calc(34px + 2 * (100vh - 680px) / 50), 36px) !important;
    line-height: clamp(37.74px, calc(37.74px + 2.22 * (100vh - 680px) / 50), 39.96px) !important;
  }
  html body #trust {
    padding-bottom: clamp(12px, calc(12px + 16 * (100vh - 680px) / 50), 28px) !important;
    padding-top: 96px !important;
  }
  html body #video {
    padding-bottom: clamp(8px, calc(8px + 12 * (100vh - 680px) / 50), 20px) !important;
    padding-top: 96px !important;
  }
  html body #video h2 {
    font-size: clamp(34px, calc(34px + 2 * (100vh - 680px) / 50), 36px) !important;
    line-height: clamp(37.74px, calc(37.74px + 2.22 * (100vh - 680px) / 50), 39.96px) !important;
  }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 850px) {
  html body #develop, html body #portfolio, html body #trust, html body #loop, html body #results, html body #contact {
    padding-top: 24px !important; padding-bottom: 24px !important; align-items: center !important;
  }

  html body #video { padding-top: 39px !important; padding-bottom: 9px !important; align-items: center !important; }


  html body #contact > div:first-child { top: 0 !important; }

  html body #solve .solve_grid { column-gap: 56px !important; }



}



@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 730px) {
  html body #develop .develop_argument ul li, html body #develop .develop_capability span {
    font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important;
    line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important;
  }
}
@media screen and (min-width: 992px) and (pointer: fine) and (730px <= height < 850px) {
  html body #develop .develop_argument ul li, html body #develop .develop_capability span {
    font-size: calc(17px + 3 * (100vh - 730px) / 460) !important;
    line-height: calc(26.35px + 2.65 * (100vh - 730px) / 460) !important;
  }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 850px) {
  html body #portfolio .eyebrow_text { margin-bottom: clamp(24px, calc(24px + 8 * (100vh - 695px) / 495), 32px) !important; }
  html body #portfolio .portfolio_head { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 56px !important; align-items: start !important; }
  html body #portfolio .portfolio_head h2 { width: 12em !important; max-width: 12em !important; }
  html body #portfolio .portfolio_head .intro_text { max-width: none !important; color: rgb(96, 96, 96) !important; }
  html body #portfolio .portfolio_tiers { margin-top: clamp(24px, calc(24px + 8 * (100vh - 695px) / 495), 32px) !important; }
}
@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 730px) {
  html body #portfolio .portfolio_head .intro_text {
    font-size: clamp(15px, calc(15px + 1 * (100vh - 680px) / 50), 16px) !important;
    line-height: clamp(23.25px, calc(23.25px + 1.55 * (100vh - 680px) / 50), 24.8px) !important;
  }
}
@media screen and (min-width: 992px) and (pointer: fine) and (730px <= height < 850px) {
  html body #portfolio .portfolio_head .intro_text {
    font-size: calc(16px + 3 * (100vh - 730px) / 460) !important;
    line-height: calc(24.8px + 2.65 * (100vh - 730px) / 460) !important;
  }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 850px) {
  html body #portfolio.is_story .portfolio_head { grid-template-columns: minmax(0, 1fr) !important; }
  html body #portfolio.is_story .portfolio_head h2 { width: 15em !important; max-width: 15em !important; }
  html body #portfolio.is_story .portfolio_statements { display: grid; transform-origin: 0 0; will-change: transform; }
  html body #portfolio.is_story .portfolio_statement { grid-area: 1 / 1; display: block; text-wrap: balance; }
  html body #portfolio.is_story .portfolio_tiers { position: relative !important; }
  html body #portfolio.is_story .portfolio_tier { left: var(--c4s-fx, 0px); top: var(--c4s-y, 0px); filter: opacity(var(--c4s-lit, 1)); }
  html body #portfolio.is_story .eyebrow_text { position: relative; top: var(--c4s-eby, 0px); filter: opacity(var(--c4s-eb, 1)); }
  html body #portfolio.is_story::before { background-image: none !important; }

  html body #portfolio.is_story .portfolio_tier .item_text { color: rgb(71, 71, 71) !important; }
  html body #portfolio.is_story .portfolio_tier.is_flagship .item_text { color: rgba(242, 240, 238, .82) !important; }
  html body #portfolio.is_story .portfolio_tier { transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
  html body #portfolio.is_story .portfolio_tier:hover, html body #portfolio.is_story .portfolio_tier:focus-within { scale: none !important; translate: 0 -4px !important; }
  html body #portfolio.is_story .portfolio_tier::after { display: none !important; }

  html body #portfolio.is_story .portfolio_tiers { grid-template-rows: auto auto 1fr auto !important; row-gap: 0 !important; }
  html body #portfolio.is_story .portfolio_tier { display: grid !important; grid-row: span 4 !important; grid-template-rows: subgrid !important; row-gap: 0 !important; align-content: stretch !important; }
  html body #portfolio.is_story .portfolio_tier .item_title { align-self: start !important; }
  html body #portfolio.is_story .portfolio_tier .item_text { align-self: start !important; margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid rgba(2, 39, 89, .12) !important; }
  html body #portfolio.is_story .portfolio_tier.is_flagship .item_text { border-top-color: rgba(242, 240, 238, .2) !important; }
  html body #portfolio.is_story .portfolio_tier .button { align-self: end !important; }
}
@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 730px) {
  html body #portfolio.is_story .portfolio_tier .item_text { font-size: clamp(15px, calc(15px + 1 * (100vh - 680px) / 50), 16px) !important; line-height: clamp(23.25px, calc(23.25px + 1.55 * (100vh - 680px) / 50), 24.8px) !important; }
}
@media screen and (min-width: 992px) and (pointer: fine) and (730px <= height < 850px) {
  html body #portfolio.is_story .portfolio_tier .item_text { font-size: calc(16px + 3 * (100vh - 730px) / 460) !important; line-height: calc(24.8px + 2.65 * (100vh - 730px) / 460) !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 850px) {
  html:root body #portfolio { background-color: rgb(2, 39, 89) !important; background-image: none !important; color: rgb(242, 240, 238) !important; }
  html:root body #portfolio::before, html:root body #portfolio::after { background-image: none !important; }
  html:root body #portfolio .eyebrow_text { color: rgb(255, 180, 74) !important; }
  html:root body #portfolio .portfolio_head h2, html:root body #portfolio .portfolio_head h2 * { color: rgb(242, 240, 238) !important; }

  html:root body #portfolio .portfolio_tier, html:root body #portfolio .portfolio_tier.is_flagship { background-color: rgb(255, 255, 255) !important; border-color: rgb(255, 255, 255) !important; box-shadow: 0 24px 54px rgba(0, 0, 0, .32) !important; color: rgb(31, 29, 30) !important; }
  html:root body #portfolio .portfolio_tier .portfolio_level, html:root body #portfolio .portfolio_tier.is_flagship .portfolio_level { color: rgb(140, 140, 140) !important; }
  html:root body #portfolio .portfolio_tier .item_title, html:root body #portfolio .portfolio_tier.is_flagship .item_title { color: rgb(2, 39, 89) !important; }
  html:root body #portfolio .portfolio_tier .item_text, html:root body #portfolio .portfolio_tier.is_flagship .item_text { color: rgb(71, 71, 71) !important; border-top-color: rgba(2, 39, 89, .12) !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 850px) {
  html:root body #loop { background-color: rgb(250, 250, 250) !important; background-image: none !important; color: rgb(31, 29, 30) !important; }
  html:root body #loop .eyebrow_text { color: rgb(232, 154, 42) !important; }
  html:root body #loop h2 { color: rgb(31, 29, 30) !important; }
  html:root body #loop p, html:root body #loop .intro_text { color: rgb(71, 71, 71) !important; }

}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 850px) {
  html:root body #video { background-color: rgb(250, 250, 250) !important; background-image: none !important; color: rgb(31, 29, 30) !important; }
  html:root body #video .eyebrow_text { color: rgb(232, 154, 42) !important; }
  html:root body #video h2, html:root body #video h2 * { color: rgb(31, 29, 30) !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 850px) {
  html:root body :is(#trust, #results, #video) { min-height: 0 !important; height: auto !important; align-items: flex-start !important; background-color: rgb(250, 250, 250) !important; background-image: none !important; }
  html:root body :is(#trust, #results, #video) > div:first-child { margin-block: 0 !important; min-height: 0 !important; top: 0 !important; }
  html:root body #trust { padding-top: 104px !important; padding-bottom: 40px !important; }
  html:root body #results { padding-top: 40px !important; padding-bottom: 40px !important; }
  html:root body #video { padding-top: 56px !important; padding-bottom: 136px !important; }

  html:root body #trust .trust_room { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 96px 104px 104px 96px; gap: 8px 16px; align-items: center; justify-items: center; margin: 36px 0 24px; }
  html:root body #trust .trust_room .trust_heading { grid-column: 2 / 6; grid-row: 2 / 4; align-self: center; justify-self: center; text-align: center; font-size: 46px !important; line-height: 50px !important; letter-spacing: -1.1px !important; font-weight: 500 !important; color: rgb(31, 29, 30) !important; max-width: 14em !important; margin: 0 !important; text-wrap: balance; }
  html:root body #trust .trust_logo_wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; will-change: transform; }
  html:root body #trust .trust_logo_wrap img { height: 32px; width: auto; max-width: 132px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .72; }
  html:root body #trust .trust_logo_wrap img:is(.crest, .trust_crest) { height: 42px; max-width: 60px; }

  html:root body #trust .trust_stats { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr) !important; grid-template-areas: "ldr yrs" "ldr nps" "rev rev"; column-gap: 72px !important; row-gap: 32px !important; margin-top: 56px !important; padding-top: 48px !important; border-top: 1px solid rgba(31, 29, 30, .12) !important; }
  html:root body #trust .trust_stats > [data-k="ldr"] { grid-area: ldr; align-self: center; }
  html:root body #trust .trust_stats > [data-k="yrs"] { grid-area: yrs; }
  html:root body #trust .trust_stats > [data-k="nps"] { grid-area: nps; }
  html:root body #trust .trust_stats > [data-k="rev"] { grid-area: rev; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: end; padding-top: 32px; border-top: 1px solid rgba(31, 29, 30, .12); }
  html:root body #trust .trust_stats > [data-k="rev"] .trust_stat_number { grid-row: 1 / 3; }
  html:root body #trust .trust_stats > [data-k="ldr"] .trust_stat_number { font-size: 150px !important; line-height: 140px !important; letter-spacing: -5px !important; }
  html:root body #trust .trust_stats > :not([data-k="ldr"]) .trust_stat_number { font-size: 60px !important; line-height: 62px !important; letter-spacing: -1.5px !important; }
  html:root body #trust .trust_stats .trust_stat_detail { max-width: 34em; }

  html:root body #results .results_grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; margin-top: 20px !important; border-top: 0 !important; padding-top: 0 !important; }
  html:root body #results .results_row { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; align-items: center; padding: 48px 0 !important; border-top: 1px solid rgba(31, 29, 30, .1); }
  html:root body #results .results_row:nth-child(2) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  html:root body #results .results_row:nth-child(2) .results_figure { grid-column: 2; grid-row: 1; text-align: right; }
  html:root body #results .results_row:nth-child(2) .note_text { grid-column: 1; grid-row: 1; }
  html:root body #results .results_row .results_figure { font-family: "Inter Tight", "Neue Haas Grotesk Display", Arial, sans-serif !important; font-size: 132px !important; line-height: 1 !important; letter-spacing: -4.5px !important; font-weight: 500 !important; color: rgb(2, 39, 89) !important; margin: 0 !important; }
  html:root body #results .results_row .lead_text { font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -.3px; color: rgb(31, 29, 30); }
  html:root body #results .results_row .lead_text span { background-image: linear-gradient(rgb(232, 154, 42), rgb(232, 154, 42)); background-repeat: no-repeat; background-position: 0 100%; background-size: calc(var(--c4s-ul, 1) * 100%) 2px; padding-bottom: 6px; }
  html:root body #results .results_row .results_detail { margin-top: 16px !important; font-size: 16px !important; line-height: 25px !important; color: rgb(107, 107, 107) !important; max-width: 36em; }
  html:root body #results .results_row .attribution_text { margin-top: 20px !important; }

  html:root body #video .testimonials_wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
  html:root body #video .testimonials_wall .testimonials_card { position: relative; width: auto !important; height: auto !important; aspect-ratio: 20 / 17; margin: 0 !important; flex: none !important; transform: none; opacity: 1; }
  html:root body #voices { position: static !important; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 64px !important; }
  html:root body #voices > :not(.testimonials_quote) { display: none !important; }
  html:root body #voices .testimonials_quote { position: static !important; inset: auto !important; opacity: 1; visibility: visible; transform: none; width: auto !important; max-width: none !important; pointer-events: auto !important; }
  html:root body #voices .testimonials_quote blockquote { font-size: 18px !important; line-height: 28px !important; }

  html:root body #voices .is_last { grid-column: 1 / -1; position: relative !important; margin-top: 120px; padding-top: 96px; text-align: center; }
  html:root body #voices .is_last .testimonials_rule { position: absolute; top: 0; width: 50%; height: 1px; background: rgb(2, 39, 89); }
  html:root body #voices .is_last .is_left { left: 0; transform-origin: 0 50%; transform: scaleX(calc(1 - var(--c4s-fl, 1) * .88)); }
  html:root body #voices .is_last .is_right { right: 0; transform-origin: 100% 50%; transform: scaleX(calc(1 - var(--c4s-fl, 1) * .88)); }
  html:root body #voices .is_last blockquote { font-family: "Inter Tight", "Neue Haas Grotesk Display", Arial, sans-serif !important; font-size: 36px !important; line-height: 46px !important; letter-spacing: -.7px !important; font-weight: 500 !important; color: rgb(2, 39, 89) !important; max-width: 24em !important; margin: 0 auto !important; border-left: 0 !important; padding-left: 0 !important; text-wrap: balance; }
  html:root body #voices .is_last .attribution_text { justify-content: center !important; margin-top: 28px !important; }
}


@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 850px) {
  html body #contact #enquiry { row-gap: 8px !important; }
  html body #contact #enquiry .form_field label { margin-bottom: 2px !important; }
  html body #contact #enquiry .w-input, html body #contact #enquiry .w-select { height: 44px !important; }
  html body #contact #enquiry textarea.w-input { height: 60px !important; min-height: 60px !important; }
  html body #contact #enquiry [type=submit] { margin-top: 14px !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (height >= 680px) {
  html body #solve {
    --s-g: clamp(24px, calc(24px + 8 * (100vh - 695px) / 495), 32px);
    --s-p: 28px;
    padding-top: 28px !important; padding-bottom: 28px !important; align-items: center !important;
  }
  html body #solve > div:first-child { padding-top: 0 !important; padding-bottom: 0 !important; }
  html body #solve .eyebrow_text { margin-bottom: var(--s-g) !important; }
  html body #solve .solve_intro { align-self: start !important; display: flex !important; flex-direction: column !important; padding-bottom: 0 !important; }
  html body #solve .solve_intro .intro_text { margin-top: var(--s-g) !important; }
  html body #solve .solve_stage { margin-top: var(--s-g) !important; flex: 0 0 auto !important; min-height: 0 !important; }
  html.is_js body #solve .solve_track { min-height: 0 !important; height: auto !important; display: grid !important; align-items: start !important; }
  html body #solve .solve_item, html body #solve .solve_item.is_fallback { position: relative !important; grid-area: 1 / 1 !important; top: 0 !important; bottom: auto !important; }
  html body #solve .solve_item.is_fallback p { margin-top: var(--s-g) !important; }
  html body #solve .solve_item.is_fallback .button { margin-top: var(--s-g) !important; }
  html body #solve .solve_intro::before { top: calc(-1 * (16px + var(--s-g) + var(--s-p))) !important; bottom: calc(-1 * var(--s-p)) !important; }
  html body #solve .solve_index {
    top: 0 !important; align-self: stretch !important;
    margin-top: calc(-1 * (16px + var(--s-g) + var(--s-p))) !important; margin-bottom: calc(-1 * var(--s-p)) !important;
    display: grid !important; grid-template-rows: repeat(7, 1fr) !important;
  }
  html body #solve .solve_index li { display: flex !important; flex-direction: column !important; justify-content: center !important; }
  html body #solve .solve_index li a { padding-top: 4px !important; padding-bottom: 4px !important; }
  html body #solve .solve_index li b { font-size: clamp(14px, calc(14px + 1.5 * (100vh - 695px) / 495), 15.5px) !important; line-height: 1.3 !important; }
  html body #solve .solve_index li span { line-height: 17px !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (680px <= height < 730px) {
  html body #solve .solve_item.is_fallback p { font-size: clamp(16px, calc(16px + 1 * (100vh - 680px) / 50), 17px) !important; line-height: clamp(24.8px, calc(24.8px + 1.55 * (100vh - 680px) / 50), 26.35px) !important; }
}
@media screen and (min-width: 992px) and (pointer: fine) and (730px <= height < 1190px) {
  html body #solve .solve_item.is_fallback p { font-size: clamp(16.891px, calc(17px + 1 * (100vh - 730px) / 460), 18px) !important; line-height: clamp(26.171px, calc(26.35px + 1.65 * (100vh - 730px) / 460), 28px) !important; }
}
@media screen and (min-width: 992px) and (pointer: fine) and (height >= 1190px) {
  html body #solve .solve_item.is_fallback p { font-size: 18px !important; line-height: 28px !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (height >= 680px) {
  html body #develop {
    --d-g: clamp(24px, calc(24px + 8 * (100vh - 695px) / 495), 32px);
    padding-top: 28px !important; padding-bottom: 28px !important; align-items: center !important;
  }
  html body #develop > div:first-child { padding-top: 0 !important; padding-bottom: 0 !important; }
  html body #develop .eyebrow_text { margin-bottom: var(--d-g) !important; }
  html body #develop .develop_argument .body_text { margin-top: var(--d-g) !important; }
  html body #develop .develop_argument .lead_text { margin-top: var(--d-g) !important; }
  html body #develop .develop_argument ul { margin-top: calc(var(--d-g) / 2) !important; }
  html body #develop .develop_argument .button { margin-top: var(--d-g) !important; }
  html body #develop .develop_capabilities { flex-direction: column !important; justify-content: space-between !important; }
}


/* ==== The story on large screens ==== */
@media screen and (min-width: 992px) and (pointer: fine) and (height >= 850px) {
  html body #portfolio.is_story .portfolio_head { grid-template-columns: minmax(0, 1fr) !important; }
  html body #portfolio.is_story .portfolio_head h2 { width: 15em !important; max-width: 15em !important; }
  html body #portfolio.is_story .portfolio_statements { display: grid; transform-origin: 0 0; will-change: transform; }
  html body #portfolio.is_story .portfolio_statement { grid-area: 1 / 1; display: block; text-wrap: balance; }
  html body #portfolio.is_story .portfolio_tiers { position: relative !important; }
  html body #portfolio.is_story .portfolio_tier { left: var(--c4s-fx, 0px); top: var(--c4s-y, 0px); filter: opacity(var(--c4s-lit, 1)); }
  html body #portfolio.is_story .eyebrow_text { position: relative; top: var(--c4s-eby, 0px); filter: opacity(var(--c4s-eb, 1)); }
  html body #portfolio.is_story::before { background-image: none !important; }

  html body #portfolio.is_story .portfolio_tier .item_text { color: rgb(71, 71, 71) !important; }
  html body #portfolio.is_story .portfolio_tier.is_flagship .item_text { color: rgba(242, 240, 238, .82) !important; }
  html body #portfolio.is_story .portfolio_tier { transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
  html body #portfolio.is_story .portfolio_tier:hover, html body #portfolio.is_story .portfolio_tier:focus-within { scale: none !important; translate: 0 -4px !important; }
  html body #portfolio.is_story .portfolio_tier::after { display: none !important; }

  html body #portfolio.is_story .portfolio_tiers { grid-template-rows: auto auto 1fr auto !important; row-gap: 0 !important; }
  html body #portfolio.is_story .portfolio_tier { display: grid !important; grid-row: span 4 !important; grid-template-rows: subgrid !important; row-gap: 0 !important; align-content: stretch !important; }
  html body #portfolio.is_story .portfolio_tier .item_title { align-self: start !important; }
  html body #portfolio.is_story .portfolio_tier .item_text { align-self: start !important; margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid rgba(2, 39, 89, .12) !important; }
  html body #portfolio.is_story .portfolio_tier.is_flagship .item_text { border-top-color: rgba(242, 240, 238, .2) !important; }
  html body #portfolio.is_story .portfolio_tier .button { align-self: end !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (height >= 850px) {
  html:root body #portfolio { background-color: rgb(2, 39, 89) !important; background-image: none !important; color: rgb(242, 240, 238) !important; }
  html:root body #portfolio::before, html:root body #portfolio::after { background-image: none !important; }
  html:root body #portfolio .eyebrow_text { color: rgb(255, 180, 74) !important; }
  html:root body #portfolio .portfolio_head h2, html:root body #portfolio .portfolio_head h2 * { color: rgb(242, 240, 238) !important; }

  html:root body #portfolio .portfolio_tier, html:root body #portfolio .portfolio_tier.is_flagship { background-color: rgb(255, 255, 255) !important; border-color: rgb(255, 255, 255) !important; box-shadow: 0 24px 54px rgba(0, 0, 0, .32) !important; color: rgb(31, 29, 30) !important; }
  html:root body #portfolio .portfolio_tier .portfolio_level, html:root body #portfolio .portfolio_tier.is_flagship .portfolio_level { color: rgb(140, 140, 140) !important; }
  html:root body #portfolio .portfolio_tier .item_title, html:root body #portfolio .portfolio_tier.is_flagship .item_title { color: rgb(2, 39, 89) !important; }
  html:root body #portfolio .portfolio_tier .item_text, html:root body #portfolio .portfolio_tier.is_flagship .item_text { color: rgb(71, 71, 71) !important; border-top-color: rgba(2, 39, 89, .12) !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (height >= 850px) {
  html:root body #loop { background-color: rgb(250, 250, 250) !important; background-image: none !important; color: rgb(31, 29, 30) !important; }
  html:root body #loop .eyebrow_text { color: rgb(232, 154, 42) !important; }
  html:root body #loop h2 { color: rgb(31, 29, 30) !important; }
  html:root body #loop p, html:root body #loop .intro_text { color: rgb(71, 71, 71) !important; }

}

@media screen and (min-width: 992px) and (pointer: fine) and (height >= 850px) {
  html:root body #video { background-color: rgb(250, 250, 250) !important; background-image: none !important; color: rgb(31, 29, 30) !important; }
  html:root body #video .eyebrow_text { color: rgb(232, 154, 42) !important; }
  html:root body #video h2, html:root body #video h2 * { color: rgb(31, 29, 30) !important; }
}

@media screen and (min-width: 992px) and (pointer: fine) and (height >= 850px) {
  html:root body :is(#trust, #results, #video) { min-height: 0 !important; height: auto !important; align-items: flex-start !important; background-color: rgb(250, 250, 250) !important; background-image: none !important; }
  html:root body :is(#trust, #results, #video) > div:first-child { margin-block: 0 !important; min-height: 0 !important; top: 0 !important; }
  html:root body #trust { padding-top: 104px !important; padding-bottom: 40px !important; }
  html:root body #results { padding-top: 40px !important; padding-bottom: 40px !important; }
  html:root body #video { padding-top: 56px !important; padding-bottom: 136px !important; }

  html:root body #trust .trust_room { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 96px 104px 104px 96px; gap: 8px 16px; align-items: center; justify-items: center; margin: 36px 0 24px; }
  html:root body #trust .trust_room .trust_heading { grid-column: 2 / 6; grid-row: 2 / 4; align-self: center; justify-self: center; text-align: center; font-size: 46px !important; line-height: 50px !important; letter-spacing: -1.1px !important; font-weight: 500 !important; color: rgb(31, 29, 30) !important; max-width: 14em !important; margin: 0 !important; text-wrap: balance; }
  html:root body #trust .trust_logo_wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; will-change: transform; }
  html:root body #trust .trust_logo_wrap img { height: 32px; width: auto; max-width: 132px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .72; }
  html:root body #trust .trust_logo_wrap img:is(.crest, .trust_crest) { height: 42px; max-width: 60px; }

  html:root body #trust .trust_stats { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr) !important; grid-template-areas: "ldr yrs" "ldr nps" "rev rev"; column-gap: 72px !important; row-gap: 32px !important; margin-top: 56px !important; padding-top: 48px !important; border-top: 1px solid rgba(31, 29, 30, .12) !important; }
  html:root body #trust .trust_stats > [data-k="ldr"] { grid-area: ldr; align-self: center; }
  html:root body #trust .trust_stats > [data-k="yrs"] { grid-area: yrs; }
  html:root body #trust .trust_stats > [data-k="nps"] { grid-area: nps; }
  html:root body #trust .trust_stats > [data-k="rev"] { grid-area: rev; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: end; padding-top: 32px; border-top: 1px solid rgba(31, 29, 30, .12); }
  html:root body #trust .trust_stats > [data-k="rev"] .trust_stat_number { grid-row: 1 / 3; }
  html:root body #trust .trust_stats > [data-k="ldr"] .trust_stat_number { font-size: 150px !important; line-height: 140px !important; letter-spacing: -5px !important; }
  html:root body #trust .trust_stats > :not([data-k="ldr"]) .trust_stat_number { font-size: 60px !important; line-height: 62px !important; letter-spacing: -1.5px !important; }
  html:root body #trust .trust_stats .trust_stat_detail { max-width: 34em; }

  html:root body #results .results_grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; margin-top: 20px !important; border-top: 0 !important; padding-top: 0 !important; }
  html:root body #results .results_row { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; align-items: center; padding: 48px 0 !important; border-top: 1px solid rgba(31, 29, 30, .1); }
  html:root body #results .results_row:nth-child(2) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  html:root body #results .results_row:nth-child(2) .results_figure { grid-column: 2; grid-row: 1; text-align: right; }
  html:root body #results .results_row:nth-child(2) .note_text { grid-column: 1; grid-row: 1; }
  html:root body #results .results_row .results_figure { font-family: "Inter Tight", "Neue Haas Grotesk Display", Arial, sans-serif !important; font-size: 132px !important; line-height: 1 !important; letter-spacing: -4.5px !important; font-weight: 500 !important; color: rgb(2, 39, 89) !important; margin: 0 !important; }
  html:root body #results .results_row .lead_text { font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -.3px; color: rgb(31, 29, 30); }
  html:root body #results .results_row .lead_text span { background-image: linear-gradient(rgb(232, 154, 42), rgb(232, 154, 42)); background-repeat: no-repeat; background-position: 0 100%; background-size: calc(var(--c4s-ul, 1) * 100%) 2px; padding-bottom: 6px; }
  html:root body #results .results_row .results_detail { margin-top: 16px !important; font-size: 16px !important; line-height: 25px !important; color: rgb(107, 107, 107) !important; max-width: 36em; }
  html:root body #results .results_row .attribution_text { margin-top: 20px !important; }

  html:root body #video .testimonials_wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
  html:root body #video .testimonials_wall .testimonials_card { position: relative; width: auto !important; height: auto !important; aspect-ratio: 20 / 17; margin: 0 !important; flex: none !important; transform: none; opacity: 1; }
  html:root body #voices { position: static !important; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 64px !important; }
  html:root body #voices > :not(.testimonials_quote) { display: none !important; }
  html:root body #voices .testimonials_quote { position: static !important; inset: auto !important; opacity: 1; visibility: visible; transform: none; width: auto !important; max-width: none !important; pointer-events: auto !important; }
  html:root body #voices .testimonials_quote blockquote { font-size: 18px !important; line-height: 28px !important; }

  html:root body #voices .is_last { grid-column: 1 / -1; position: relative !important; margin-top: 120px; padding-top: 96px; text-align: center; }
  html:root body #voices .is_last .testimonials_rule { position: absolute; top: 0; width: 50%; height: 1px; background: rgb(2, 39, 89); }
  html:root body #voices .is_last .is_left { left: 0; transform-origin: 0 50%; transform: scaleX(calc(1 - var(--c4s-fl, 1) * .88)); }
  html:root body #voices .is_last .is_right { right: 0; transform-origin: 100% 50%; transform: scaleX(calc(1 - var(--c4s-fl, 1) * .88)); }
  html:root body #voices .is_last blockquote { font-family: "Inter Tight", "Neue Haas Grotesk Display", Arial, sans-serif !important; font-size: 36px !important; line-height: 46px !important; letter-spacing: -.7px !important; font-weight: 500 !important; color: rgb(2, 39, 89) !important; max-width: 24em !important; margin: 0 auto !important; border-left: 0 !important; padding-left: 0 !important; text-wrap: balance; }
  html:root body #voices .is_last .attribution_text { justify-content: center !important; margin-top: 28px !important; }
}


/* ==== The story on small screens, tablets and touch (finished, scrolling freely) ==== */
@media not screen and (min-width: 992px) and (pointer: fine) and (min-height: 680px) {
  html body #portfolio.is_story .portfolio_head { grid-template-columns: minmax(0, 1fr) !important; }
  html body #portfolio.is_story .portfolio_head h2 { width: 15em !important; max-width: 15em !important; }
  html body #portfolio.is_story .portfolio_statements { display: grid; transform-origin: 0 0; will-change: transform; }
  html body #portfolio.is_story .portfolio_statement { grid-area: 1 / 1; display: block; text-wrap: balance; }
  html body #portfolio.is_story .portfolio_tiers { position: relative !important; }
  html body #portfolio.is_story .portfolio_tier { left: var(--c4s-fx, 0px); top: var(--c4s-y, 0px); filter: opacity(var(--c4s-lit, 1)); }
  html body #portfolio.is_story .eyebrow_text { position: relative; top: var(--c4s-eby, 0px); filter: opacity(var(--c4s-eb, 1)); }
  html body #portfolio.is_story::before { background-image: none !important; }

  html body #portfolio.is_story .portfolio_tier .item_text { color: rgb(71, 71, 71) !important; }
  html body #portfolio.is_story .portfolio_tier.is_flagship .item_text { color: rgba(242, 240, 238, .82) !important; }
  html body #portfolio.is_story .portfolio_tier { transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
  html body #portfolio.is_story .portfolio_tier:hover, html body #portfolio.is_story .portfolio_tier:focus-within { scale: none !important; translate: 0 -4px !important; }
  html body #portfolio.is_story .portfolio_tier::after { display: none !important; }

  html body #portfolio.is_story .portfolio_tiers { grid-template-rows: auto auto 1fr auto !important; row-gap: 0 !important; }
  html body #portfolio.is_story .portfolio_tier { display: grid !important; grid-row: span 4 !important; grid-template-rows: subgrid !important; row-gap: 0 !important; align-content: stretch !important; }
  html body #portfolio.is_story .portfolio_tier .item_title { align-self: start !important; }
  html body #portfolio.is_story .portfolio_tier .item_text { align-self: start !important; margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid rgba(2, 39, 89, .12) !important; }
  html body #portfolio.is_story .portfolio_tier.is_flagship .item_text { border-top-color: rgba(242, 240, 238, .2) !important; }
  html body #portfolio.is_story .portfolio_tier .button { align-self: end !important; }
}

@media not screen and (min-width: 992px) and (pointer: fine) and (min-height: 680px) {
  html:root body #portfolio { background-color: rgb(2, 39, 89) !important; background-image: none !important; color: rgb(242, 240, 238) !important; }
  html:root body #portfolio::before, html:root body #portfolio::after { background-image: none !important; }
  html:root body #portfolio .eyebrow_text { color: rgb(255, 180, 74) !important; }
  html:root body #portfolio .portfolio_head h2, html:root body #portfolio .portfolio_head h2 * { color: rgb(242, 240, 238) !important; }

  html:root body #portfolio .portfolio_tier, html:root body #portfolio .portfolio_tier.is_flagship { background-color: rgb(255, 255, 255) !important; border-color: rgb(255, 255, 255) !important; box-shadow: 0 24px 54px rgba(0, 0, 0, .32) !important; color: rgb(31, 29, 30) !important; }
  html:root body #portfolio .portfolio_tier .portfolio_level, html:root body #portfolio .portfolio_tier.is_flagship .portfolio_level { color: rgb(140, 140, 140) !important; }
  html:root body #portfolio .portfolio_tier .item_title, html:root body #portfolio .portfolio_tier.is_flagship .item_title { color: rgb(2, 39, 89) !important; }
  html:root body #portfolio .portfolio_tier .item_text, html:root body #portfolio .portfolio_tier.is_flagship .item_text { color: rgb(71, 71, 71) !important; border-top-color: rgba(2, 39, 89, .12) !important; }
}

@media not screen and (min-width: 992px) and (pointer: fine) and (min-height: 680px) {
  html:root body #loop { background-color: rgb(250, 250, 250) !important; background-image: none !important; color: rgb(31, 29, 30) !important; }
  html:root body #loop .eyebrow_text { color: rgb(232, 154, 42) !important; }
  html:root body #loop h2 { color: rgb(31, 29, 30) !important; }
  html:root body #loop p, html:root body #loop .intro_text { color: rgb(71, 71, 71) !important; }

}

@media not screen and (min-width: 992px) and (pointer: fine) and (min-height: 680px) {
  html:root body #video { background-color: rgb(250, 250, 250) !important; background-image: none !important; color: rgb(31, 29, 30) !important; }
  html:root body #video .eyebrow_text { color: rgb(232, 154, 42) !important; }
  html:root body #video h2, html:root body #video h2 * { color: rgb(31, 29, 30) !important; }
}

@media not screen and (min-width: 992px) and (pointer: fine) and (min-height: 680px) {
  html:root body :is(#trust, #results, #video) { min-height: 0 !important; height: auto !important; align-items: flex-start !important; background-color: rgb(250, 250, 250) !important; background-image: none !important; }
  html:root body :is(#trust, #results, #video) > div:first-child { margin-block: 0 !important; min-height: 0 !important; top: 0 !important; }
  html:root body #trust { padding-top: 104px !important; padding-bottom: 40px !important; }
  html:root body #results { padding-top: 40px !important; padding-bottom: 40px !important; }
  html:root body #video { padding-top: 56px !important; padding-bottom: 136px !important; }

  html:root body #trust .trust_room { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 96px 104px 104px 96px; gap: 8px 16px; align-items: center; justify-items: center; margin: 36px 0 24px; }
  html:root body #trust .trust_room .trust_heading { grid-column: 2 / 6; grid-row: 2 / 4; align-self: center; justify-self: center; text-align: center; font-size: 46px !important; line-height: 50px !important; letter-spacing: -1.1px !important; font-weight: 500 !important; color: rgb(31, 29, 30) !important; max-width: 14em !important; margin: 0 !important; text-wrap: balance; }
  html:root body #trust .trust_logo_wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; will-change: transform; }
  html:root body #trust .trust_logo_wrap img { height: 32px; width: auto; max-width: 132px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .72; }
  html:root body #trust .trust_logo_wrap img:is(.crest, .trust_crest) { height: 42px; max-width: 60px; }

  html:root body #trust .trust_stats { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr) !important; grid-template-areas: "ldr yrs" "ldr nps" "rev rev"; column-gap: 72px !important; row-gap: 32px !important; margin-top: 56px !important; padding-top: 48px !important; border-top: 1px solid rgba(31, 29, 30, .12) !important; }
  html:root body #trust .trust_stats > [data-k="ldr"] { grid-area: ldr; align-self: center; }
  html:root body #trust .trust_stats > [data-k="yrs"] { grid-area: yrs; }
  html:root body #trust .trust_stats > [data-k="nps"] { grid-area: nps; }
  html:root body #trust .trust_stats > [data-k="rev"] { grid-area: rev; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: end; padding-top: 32px; border-top: 1px solid rgba(31, 29, 30, .12); }
  html:root body #trust .trust_stats > [data-k="rev"] .trust_stat_number { grid-row: 1 / 3; }
  html:root body #trust .trust_stats > [data-k="ldr"] .trust_stat_number { font-size: 150px !important; line-height: 140px !important; letter-spacing: -5px !important; }
  html:root body #trust .trust_stats > :not([data-k="ldr"]) .trust_stat_number { font-size: 60px !important; line-height: 62px !important; letter-spacing: -1.5px !important; }
  html:root body #trust .trust_stats .trust_stat_detail { max-width: 34em; }

  html:root body #results .results_grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; margin-top: 20px !important; border-top: 0 !important; padding-top: 0 !important; }
  html:root body #results .results_row { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; align-items: center; padding: 48px 0 !important; border-top: 1px solid rgba(31, 29, 30, .1); }
  html:root body #results .results_row:nth-child(2) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  html:root body #results .results_row:nth-child(2) .results_figure { grid-column: 2; grid-row: 1; text-align: right; }
  html:root body #results .results_row:nth-child(2) .note_text { grid-column: 1; grid-row: 1; }
  html:root body #results .results_row .results_figure { font-family: "Inter Tight", "Neue Haas Grotesk Display", Arial, sans-serif !important; font-size: 132px !important; line-height: 1 !important; letter-spacing: -4.5px !important; font-weight: 500 !important; color: rgb(2, 39, 89) !important; margin: 0 !important; }
  html:root body #results .results_row .lead_text { font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -.3px; color: rgb(31, 29, 30); }
  html:root body #results .results_row .lead_text span { background-image: linear-gradient(rgb(232, 154, 42), rgb(232, 154, 42)); background-repeat: no-repeat; background-position: 0 100%; background-size: calc(var(--c4s-ul, 1) * 100%) 2px; padding-bottom: 6px; }
  html:root body #results .results_row .results_detail { margin-top: 16px !important; font-size: 16px !important; line-height: 25px !important; color: rgb(107, 107, 107) !important; max-width: 36em; }
  html:root body #results .results_row .attribution_text { margin-top: 20px !important; }

  html:root body #video .testimonials_wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
  html:root body #video .testimonials_wall .testimonials_card { position: relative; width: auto !important; height: auto !important; aspect-ratio: 20 / 17; margin: 0 !important; flex: none !important; transform: none; opacity: 1; }
  html:root body #voices { position: static !important; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 64px !important; }
  html:root body #voices > :not(.testimonials_quote) { display: none !important; }
  html:root body #voices .testimonials_quote { position: static !important; inset: auto !important; opacity: 1; visibility: visible; transform: none; width: auto !important; max-width: none !important; pointer-events: auto !important; }
  html:root body #voices .testimonials_quote blockquote { font-size: 18px !important; line-height: 28px !important; }

  html:root body #voices .is_last { grid-column: 1 / -1; position: relative !important; margin-top: 120px; padding-top: 96px; text-align: center; }
  html:root body #voices .is_last .testimonials_rule { position: absolute; top: 0; width: 50%; height: 1px; background: rgb(2, 39, 89); }
  html:root body #voices .is_last .is_left { left: 0; transform-origin: 0 50%; transform: scaleX(calc(1 - var(--c4s-fl, 1) * .88)); }
  html:root body #voices .is_last .is_right { right: 0; transform-origin: 100% 50%; transform: scaleX(calc(1 - var(--c4s-fl, 1) * .88)); }
  html:root body #voices .is_last blockquote { font-family: "Inter Tight", "Neue Haas Grotesk Display", Arial, sans-serif !important; font-size: 36px !important; line-height: 46px !important; letter-spacing: -.7px !important; font-weight: 500 !important; color: rgb(2, 39, 89) !important; max-width: 24em !important; margin: 0 auto !important; border-left: 0 !important; padding-left: 0 !important; text-wrap: balance; }
  html:root body #voices .is_last .attribution_text { justify-content: center !important; margin-top: 28px !important; }
}


@media screen and (max-width: 991.98px) {

  html body #portfolio.is_story .portfolio_head h2 { width: auto !important; max-width: 100% !important; }
  html body #portfolio.is_story .portfolio_tiers { row-gap: clamp(12px, calc(12px + 8 * (100vw - 360px) / 631), 20px) !important; }

  html:root body #trust { padding-top: clamp(56px, calc(56px + 48 * (100vw - 360px) / 631), 104px) !important; }
  html:root body #trust .trust_room { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: clamp(4px, calc(4px + 8 * (100vw - 360px) / 631), 12px) clamp(8px, calc(8px + 8 * (100vw - 360px) / 631), 16px); margin: clamp(24px, calc(24px + 12 * (100vw - 360px) / 631), 36px) 0 clamp(16px, calc(16px + 8 * (100vw - 360px) / 631), 24px); }
  html:root body #trust .trust_room .trust_heading { grid-column: 1 / -1; grid-row: 3; margin: clamp(12px, calc(12px + 8 * (100vw - 360px) / 631), 20px) 0 !important; font-size: clamp(29.11px, calc(29.11px + 16.89 * (100vw - 360px) / 631), 46px) !important; line-height: clamp(34.35px, calc(34.35px + 15.65 * (100vw - 360px) / 631), 50px) !important; letter-spacing: -0.024em !important; }
  html:root body #trust .trust_logo_wrap { height: clamp(40px, calc(40px + 16 * (100vw - 360px) / 631), 56px); }
  html:root body #trust .trust_logo_wrap img { height: clamp(20px, calc(20px + 12 * (100vw - 360px) / 631), 32px); max-width: min(100%, 132px); }
  html:root body #trust .trust_logo_wrap img:is(.crest, .trust_crest) { height: clamp(28px, calc(28px + 14 * (100vw - 360px) / 631), 42px); max-width: min(100%, 60px); }

  html:root body #trust .trust_stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; grid-template-areas: none !important; column-gap: clamp(24px, calc(24px + 48 * (100vw - 360px) / 631), 72px) !important; row-gap: clamp(28px, calc(28px + 4 * (100vw - 360px) / 631), 32px) !important; margin-top: clamp(32px, calc(32px + 24 * (100vw - 360px) / 631), 56px) !important; padding-top: clamp(32px, calc(32px + 16 * (100vw - 360px) / 631), 48px) !important; }
  html:root body #trust .trust_stats > [data-k] { grid-area: auto !important; }
  html:root body #trust .trust_stats > [data-k="ldr"] { grid-column: 1 / -1 !important; order: 1; }
  html:root body #trust .trust_stats > [data-k="yrs"] { order: 2; }
  html:root body #trust .trust_stats > [data-k="nps"] { order: 3; }
  html:root body #trust .trust_stats > [data-k="rev"] { grid-column: 1 / -1 !important; order: 4; display: block; padding-top: clamp(28px, calc(28px + 4 * (100vw - 360px) / 631), 32px); }
  html:root body #trust .trust_stats > [data-k="ldr"] .trust_stat_number { font-size: clamp(88px, calc(88px + 62 * (100vw - 360px) / 631), 150px) !important; line-height: 0.94 !important; letter-spacing: -0.033em !important; }
  html:root body #trust .trust_stats > :not([data-k="ldr"]) .trust_stat_number { font-size: clamp(44px, calc(44px + 16 * (100vw - 360px) / 631), 60px) !important; line-height: 1.04 !important; letter-spacing: -0.025em !important; }

  html:root body #results .results_row, html:root body #results .results_row:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; row-gap: clamp(12px, calc(12px + 8 * (100vw - 360px) / 631), 20px); padding: clamp(32px, calc(32px + 16 * (100vw - 360px) / 631), 48px) 0 !important; }
  html:root body #results .results_row:nth-child(2) .results_figure, html:root body #results .results_row:nth-child(2) .note_text { grid-column: 1; grid-row: auto; text-align: left; }
  html:root body #results .results_row .results_figure { font-size: clamp(72px, calc(72px + 60 * (100vw - 360px) / 631), 132px) !important; letter-spacing: -0.034em !important; }
  html:root body #results .results_row .lead_text { font-size: clamp(20px, calc(20px + 6 * (100vw - 360px) / 631), 26px); line-height: 1.3; }

  html:root body #video { padding-bottom: clamp(72px, calc(72px + 64 * (100vw - 360px) / 631), 136px) !important; }
  html:root body #video .testimonials_wall { --c4s-vg: clamp(12px, calc(12px + 12 * (100vw - 360px) / 631), 24px); gap: var(--c4s-vg); grid-template-columns: repeat(auto-fit, minmax(max(min(190px, calc((100% - var(--c4s-vg)) / 2)), calc((100% - 2 * var(--c4s-vg)) / 3)), 1fr)); margin-top: clamp(24px, calc(24px + 8 * (100vw - 360px) / 631), 32px); }

  html:root body #video .testimonials_wall .testimonials_card { aspect-ratio: 4 / 5; }

  html:root body #voices { padding-left: clamp(0px, calc(0px + 64 * (100vw - 360px) / 631), 64px) !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; column-gap: clamp(32px, calc(32px + 32 * (100vw - 360px) / 631), 64px) !important; row-gap: clamp(32px, calc(32px + 8 * (100vw - 360px) / 631), 40px) !important; margin-top: clamp(40px, calc(40px + 24 * (100vw - 360px) / 631), 64px) !important; }
  html:root body #voices .testimonials_quote blockquote { font-size: clamp(16px, calc(16px + 2 * (100vw - 360px) / 631), 18px) !important; line-height: clamp(25.6px, calc(25.6px + 2.4 * (100vw - 360px) / 631), 28px) !important; }
  html:root body #voices .is_last { margin-top: clamp(48px, calc(48px + 72 * (100vw - 360px) / 631), 120px); padding-top: clamp(48px, calc(48px + 48 * (100vw - 360px) / 631), 96px); }
  html:root body #voices .is_last blockquote { font-size: clamp(24px, calc(24px + 12 * (100vw - 360px) / 631), 36px) !important; line-height: clamp(31px, calc(31px + 15 * (100vw - 360px) / 631), 46px) !important; letter-spacing: -0.02em !important; }
}


/* ==== The enquiry form scrolls with the footer ==== */
@media screen and (min-width: 992px) {
  html body .closing_scene { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  html body #contact { height: auto !important; min-height: 0 !important; }
  html body #contact > div:first-child { top: 0 !important; transform: none !important; }
}
@media screen and (min-width: 992px) and (height >= 850px) {
  html body #contact { padding-top: clamp(64px, 9svh, 112px) !important; padding-bottom: clamp(64px, 9svh, 112px) !important; }
}

/* ==== Finishing: contrast and small sizes ==== */
html:root body section#develop .eyebrow_text,html:root body section#loop .eyebrow_text,html:root body section#trust .eyebrow_text,html:root body section#results .eyebrow_text,html:root body section#video .eyebrow_text,html:root body section#contact .eyebrow_text{ color: var(--amber) !important; }
html:root body section#portfolio .portfolio_tier .portfolio_level,
html:root body section#portfolio .portfolio_tier.is_flagship .portfolio_level,
html:root body section#trust .trust_stat_detail { color: #6b6b6b !important; }
/* the 4,000+ figure a little higher, clear of its label (Dex, 28 Sep) */
html:root body #trust .trust_stats > [data-k="ldr"] .trust_stat_number { position: relative; top: -.08em; }

@media screen and (min-width: 992px) {
  html:root body #top .hero_proof_label { font-size: 11px !important; }
}

/* ==== The founder portraits reserve their space before they load (their true proportions) ==== */

/* ==== How we develop performance: dots and navy cards (batch D1, 5 Oct 2026) ==== */
/* Dex, 5 Oct: "let's just use what we currently have", with two changes. Everything else about the section (its
   layout, its sizes, the hold and the scene that brings the four capabilities into line) is the rules above,
   untouched. This part is put here by audit/build/d1/build.mjs: change it there, not in this file. */

/* 1. what leaders leave able to do: a dot before each, not a dash */
html body #develop .develop_argument ul li::before{left:3px;top:.59em;width:6px;height:6px;border-radius:50%;background:var(--amber)}

/* 2. the four capabilities: each a navy card (the corner and the two text colours are the programme cards') */
html body #develop .develop_capabilities{display:flex;flex-direction:column;gap:10px;border-top:0}
html body #develop .develop_capabilities>.develop_capability{padding:16px 20px;border:0;border-radius:12px;background:var(--navy)}
html body #develop .develop_capability>b{color:var(--d-ink)}
html body #develop .develop_capability>b~span{color:var(--d-ink-soft)}
/* where the screen holds: the gap and the cards' side padding follow the screen; their top and bottom padding stays
   the rows' own there (10 to 18px by the screen's height, set by the older rules above) */
@media screen and (min-width:992px) and (pointer:fine) and (height >= 680px){
  html body #develop .develop_capabilities{gap:clamp(8px,1.2vh,12px)}
  html body #develop .develop_capabilities>.develop_capability{padding-left:clamp(18px,1.7vw,26px);padding-right:clamp(18px,1.7vw,26px)}
}
/* the shortest screens that hold (680 to 730px tall): the older rule there closes the rows' top and bottom padding to
   as little as 4px, and a card needs 10px. That rule is !important, so this one has to be too. */
@media screen and (min-width:992px) and (pointer:fine) and (680px <= height < 730px){
  html body #develop .develop_capabilities>.develop_capability{padding-top:10px!important;padding-bottom:10px!important}
}

/* ==== The programme portfolio: its ground picture, the stairs (batch PG1, 10 Oct 2026) ==== */
/* Dex, 10 Oct: the section keeps its layout, its words and its story exactly as built ("keep the same animations
   and everything we've got there. We're just making it fit to the image now"); behind them stands a picture: a navy
   wall on the left, where the three statements play and the heading settles, and the building's stairs on the right,
   a landing and a sign for each level, over which the four cards are laid. Desktop first: tablets and phones keep
   the plain navy ground.
   The picture lies on the section's own ::before layer (the old glow, which the story switches off). The section is
   the piece the script holds still, so the picture holds with it. No rule here names a heading, a statement, a label
   or a card, and the script is not changed.
   Where it shows: a window 1360px or wider, with a mouse, at least 17 wide to 10 high. In a squarer window the picture
   is cut on the left to cover the section, which brings the stairs to within a few pixels of the large statements;
   in a narrower one the fourth card's right edge reaches the picture's two lower signs. There, and on every other
   screen, the section is as it was. Measured and rehearsed:
   go-live-final/images-session/c6-portfolio-stairs/README.md.
   To change the picture: upload the new file, change its address below, rebuild, deploy (audit/build/live/README.md).
   This part is put here by audit/build/pg1/build.mjs: change it there, not in this file. */
@media screen and (min-width:1360px) and (pointer:fine) and (min-aspect-ratio:17/10){
  html:root body #portfolio.is_story::before{background-image:url("https://cdn.prod.website-files.com/6a9f90434a5fb6e7d1b3198b/6aca4dfae5c3983a4023306c_home-portfolio-ground.webp")!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:right top!important}
}

/* ==== The hero: which part of its picture an upright screen shows (batch HP1, 10 Oct 2026) ==== */
/* Dex, 10 Oct: the hero's picture changed (the navy wall and the atrium; two people in conversation right of the
   middle), "nothing much ... to change other than the hero image". A wide frame shows the whole picture: the words on
   the wall, both people beside them. An upright frame (a phone, a tablet held upright, a tall narrow window) shows
   only a strip of it, and the strip the picture's own style asks for (round 60% across) would put a face behind the
   hero's words and leave the other person out. So in a frame narrower than 4 to 3 the strip is taken from the
   picture's left: the navy wall, with the atrium's edge at the right, and the words stand on the wall as they do on
   a desktop. The picture's frame, the heading, the words and the button are not touched.
   Measured and rehearsed: go-live-final/images-session/a1-homepage-hero/README.md. Another hero picture needs this
   rule looked at again: it is about where THIS picture's people stand.
   This part is put here by audit/build/hp1/build.mjs: change it there, not in this file. */
@media screen and (max-aspect-ratio:4/3){
  html:root body #top img.hero_image{object-position:12% 22%!important}
}

/* ==== Problems we solve: its ground, the building's navy wall (batch SW1, 11 Oct 2026) ==== */
/* Dex, 11 Oct: "problems we solve section, can you please try putting the navy wall panel ... apply". The section's
   flat navy becomes the building's own navy wall: its long joints, and a wash of lamp light from the top left. The
   wall is the section's own ground, so it holds with the section and no element is added or moved; a thin veil of
   navy lies over it so that the words keep their contrast (measured: go-live-final/images-session/c8-solve-wall/).
   The section's navy (the base rule for .is_dark) stays beneath, so without the picture nothing changes.
   The picture is the proper wall since batch DD1 (11 Oct); a stand-in stood here until then. To change it: upload the new
   wall and run audit/build/sw1/build.mjs with its address; then the proof (c8-solve-wall/prove-wall.mjs). */
html:root body #solve{background-image:linear-gradient(rgba(2,32,74,.3),rgba(2,32,74,.3)),url("https://cdn.prod.website-files.com/6a9f90434a5fb6e7d1b3198b/6acb8dc07dbf0bc50f068e00_home-solve-wall-4.webp");background-size:cover;background-position:center top;background-repeat:no-repeat}

/* ==== The method: a photograph under each of its five stages (batch MJ1, 11 Oct 2026) ==== */
/* Dex, 11 Oct: the five approved photographs for Discover, Develop, Embed, Measure and Continue ("publish"). The
   section was built to take them (batch M3: a stage's picture is --c4s-journey-1 to -5, in "The method" above);
   this part sets the five, and what the photographs need beside their addresses:
   - the open card's shade is eased. It lay over the whole left half and dimmed whoever stood there; it is now a
     corner of shade behind the number and the name, and a band behind the description that is as tall as the
     description needs whatever the card's height (in pixels: a low card in a short window carries the same three
     lines). A closed card keeps its deeper shade;
   - on a phone the open stage's card is upright and shows only the middle of its picture: three of the five stand
     where their people are.
   Every line of the section's words was measured against the photographs on eleven screens, each stage open
   (go-live-final/images-session/c1-method-journey/rehearse-journey.mjs). To change a photograph: upload it, run
   audit/build/mj1/build.mjs with the five addresses, and run that proof again. Without the five the cards stand on
   their navy, as before. */
html:root body #method.is_pictured{--c4s-journey-1:url("https://cdn.prod.website-files.com/6a9f90434a5fb6e7d1b3198b/6acb36feaaee5a1107d093f3_home-method-01-discover.webp");--c4s-journey-2:url("https://cdn.prod.website-files.com/6a9f90434a5fb6e7d1b3198b/6acb36ff9cf961fa46d12dd7_home-method-02-develop.webp");--c4s-journey-3:url("https://cdn.prod.website-files.com/6a9f90434a5fb6e7d1b3198b/6acb36ffcb86c9efb683ad71_home-method-03-embed.webp");--c4s-journey-4:url("https://cdn.prod.website-files.com/6a9f90434a5fb6e7d1b3198b/6acb370034761c9cacf9f1f8_home-method-04-measure.webp");--c4s-journey-5:url("https://cdn.prod.website-files.com/6a9f90434a5fb6e7d1b3198b/6acb3701b52a5ab3c8bc689f_home-method-05-continue.webp")}
@media (min-width:992px){
  html:root body #method .method_journey li.is_open::before,
  html:root body #method .method_journey:not(.is_live) li:first-child::before{
    background-image:radial-gradient(ellipse 50% 56% at 0 0,rgba(2,20,48,.86),rgba(2,20,48,.6) 50%,rgba(2,20,48,0) 100%),linear-gradient(0deg,rgba(2,20,48,.88),rgba(2,20,48,.74) 124px,rgba(2,20,48,0) 232px)}
}
@media (max-width:599px){
  html:root body #method .method_journey li:nth-child(1) b{background-position:center,46% center}
  html:root body #method .method_journey li:nth-child(2) b{background-position:center,58% center}
  html:root body #method .method_journey li:nth-child(4) b{background-position:center,62% center}
}

/* ==== The development loop: a photograph in the ring's place (batch DD1, 11 Oct 2026) ==== */
/* Dex, 11 Oct: "use this image on our development loop page instead of the diagram, make sure its fluid for both
   tablet and mobile". The photograph shows the loop itself, in raised letters on the building's navy wall, a leader
   teaching it to three colleagues. Its wall words are the section's own: the label and the seven steps, in order.
   The ring's list (.method_loop) becomes the photograph's frame. Its seven steps stay in the page for screen readers
   and are not drawn: the wall says them. The ring, its dot, its clock and the name in its middle are gone, and so is
   the section's hold (the script's part for this section is a note since this batch): the section scrolls freely on
   every screen.
   - From 520px of room the frame has the photograph's own shape and shows all of it. Under the words below 992px.
     Beside them from 992px, where the ring stood, and there it runs on to the right, to 24px from the screen's edge
     (never wider than 1120px): the wall is the section's subject and takes the room the ring left empty.
   - With less room (a phone) the frame is upright-er (1195 to 941) and shows the photograph from its left edge to
     just past the leader: the wall and its eight words whole, the listener at the left, the leader and her pointing
     hand. The letters then stand about two-fifths larger than the whole photograph would show them.
   The rules of "The development loop" above that draw the ring reach nothing now and can go when that part is next
   built. To change the photograph: upload it, run audit/build/dd1/build.mjs with its address, and look at where its
   words and people stand before keeping the phone's shape (go-live-final/d-day/dd1-loop-picture/). */
html:root body #loop .method_loop{height:auto;aspect-ratio:1672/941;border-radius:clamp(16px,2.1vw,30px);overflow:hidden;
  background:var(--navy) url("https://cdn.prod.website-files.com/6a9f90434a5fb6e7d1b3198b/6acb5c855a8f98ddabbc2190_home-loop-wall.webp") center/cover no-repeat;
  box-shadow:0 1px 2px rgba(2,22,52,.05),0 22px 48px -30px rgba(2,22,52,.3)}
@container (max-width:519px){
  html:root body #loop .method_loop{aspect-ratio:1195/941;background-size:auto 100%;background-position:left center}
}
@media (min-width:992px){
  html:root body #loop .method_loop{margin-right:calc((100cqw - 100vw) / 2 + 24px);max-width:1120px}
}
/* a browser that does not know aspect-ratio (Safari before 2021) gets the frame's height from its width another way */
@supports not (aspect-ratio:1/1){
  html:root body #loop .method_loop{padding-top:56.28%}
}
html:root body #loop .method_loop::before,html:root body #loop .method_loop::after{content:none;animation:none}
html:root body #loop .method_loop li{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;transform:none;animation:none;box-shadow:none;background:none}
html:root body #loop .method_model::after{content:none}

/* ==== D-day's fixes from the review (batch DD3, 11 Oct 2026). Three parts, each between its own markers. ==== */

/*DD3:1*/
/* ---- Problems we solve, 992 to 1,180px wide ----
   The section is one column up to 1,180px and the list was pulled 38px upward from 992px: between the two the list
   was pulled into the card (22px on touch; 72px where the story plays, whose statements then flew down across the
   rows and whose last rows lay below the screen while the section was held).
   Where the story plays (the page's runtime marks that with is_js: a mouse, 680px tall or more) the section keeps
   the two columns the story was written for, each statement flying up and right into its row. Where it does not, the
   list stands under the card and is not pulled up. */
@media screen and (min-width:992px) and (max-width:1180px){
  html.is_js:root body #solve .solve_grid{grid-template-columns:1fr 1.15fr;gap:clamp(28px,4.4vw,52px)}
  html:root:not(.is_js) body #solve .solve_index{top:0}
}
/*/DD3:1*/

/*DD3:2*/
/* ---- The hero, from 992px ----
   A soft shade across the top, where the menu lies in white over the picture (the other pages' new heroes have the
   same one): the menu's words stood on the atrium's lights. And up to 1,100px, where the frame is narrow and the
   paragraph reaches past the picture's wall, the navy is held solid further across. The picture is not touched. */
@media screen and (min-width:992px){
  html:root body #top .hero_scrim{background:linear-gradient(180deg,rgba(2,39,89,.9) 0%,rgba(2,39,89,.7) 9%,rgba(2,39,89,0) 24%),linear-gradient(90deg,rgba(2,39,89,.92) 0%,rgba(2,39,89,.78) 38%,rgba(2,39,89,.35) 70%,rgba(2,39,89,.55) 100%)}
}
@media screen and (min-width:992px) and (max-width:1100px){
  html:root body #top .hero_scrim{background:linear-gradient(180deg,rgba(2,39,89,.9) 0%,rgba(2,39,89,.7) 9%,rgba(2,39,89,0) 24%),linear-gradient(90deg,rgba(2,39,89,.92) 0%,rgba(2,39,89,.9) 50%,rgba(2,39,89,.5) 80%,rgba(2,39,89,.58) 100%)}
}
/*/DD3:2*/

/*DD3:3*/
/* ---- The light sections stand on the house beige ----
   Dex's rule: no white grounds, navy and beige. Every other page's light sections are #f4f3ef; here six stood on
   #fafafa. The stylesheet's own name for the light ground is set to the beige, and the four sections an earlier
   layer painted by number are painted again. Cards on them stay white, as on the other pages. */
html:root{--paper:#f4f3ef}
html:root body :is(#develop,#loop,#trust,#results,#video){background-color:#f4f3ef!important}
/*/DD3:3*/

/* ==== D-day's polish (batch DD5, 11 Oct 2026). Each part between its own markers. ==== */

/*DD5:1*/
/* ---- The hero on phones and tablets ----
   Dex, 11 Oct: "the executive presence and communication eyebrow heading ... sits so high up on the page ... it is
   touching the logo, which means that we need to shrink the paragraph as well as the heading."
   Measured on ten phone screens: the hero is held to exactly one screen and cut, and its words are taller than most
   phones' screens, so they ran out at the top: the label off the screen or under the logo on six of the ten, the
   heading under the logo on four. And the strip of client logos was squeezed to its label alone on every screen
   under 992px, its logos cut off below it.
   Under 992px the strip keeps its own height and the words take the room above it. On a phone (and any small screen
   too short for the words) the hero is no longer held and cut: it is as tall as its words need and never shorter
   than the screen, its words begin 112px down, clear of the logo's bar (the other pages' heroes begin there too),
   and the bar scrolls away with the page as it does on every other page. On phones the heading is a size smaller
   and the paragraph is the other pages' 17px. */
@media screen and (max-width:991px){
  html:root body #top .hero_container{min-height:0;flex:1 1 auto}
  html:root body #top .hero_proof{flex:0 0 auto}
}
@media screen and (max-width:767px), screen and (max-width:991px) and (max-height:700px){
  html:root body .section_hero{position:relative;height:auto;min-height:100svh}
  html:root body .navbar_component{position:absolute}
  html:root body #top .hero_container{padding-top:112px;padding-bottom:40px}
}
@media screen and (max-width:479px){
  html:root body #top h1{font-size:clamp(30px,8.6vw,36px);line-height:1.06}
  html:root body #top .hero_summary{font-size:17px!important;line-height:26px!important;margin-top:16px!important}
}
/* a phone on its side: the screen is short, the heading need not fill it */
@media screen and (max-width:991px) and (max-height:560px){
  html:root body #top h1{font-size:clamp(30px,4.6vw,38px);line-height:1.06}
  html:root body #top .hero_summary{font-size:17px!important;line-height:26px!important;margin-top:16px!important}
}
/*/DD5:1*/

/*DD5:2*/
/* ---- Problems we solve, where it is one column and not held (touch, a short window, reduced motion; up to 1,180px) ----
   The card's button stood 8 to 10px from the card's foot and the list began 14 to 16px under the card: both tight
   beside the 24px and more that every other block of the page keeps. On phones the button's words broke onto two
   or three lines inside a button one line tall. The card's foot now stands 24px under its button, the list 24px
   under the card, and on phones the button grows with its words. */
@media screen and (max-width:1180px){
  html:root:not(.is_js) body #solve .solve_intro::before{bottom:-24px}
  html:root:not(.is_js) body #solve .solve_grid{row-gap:48px}
}
@media screen and (max-width:479px){
  html:root body #solve .solve_item.is_fallback .button{height:auto;min-height:54px;padding-top:11px;padding-bottom:11px;line-height:1.3;text-align:left}
}
/*/DD5:2*/

/*DD5:3*/
/* ---- How we develop performance, under 992px: the button under the four points ----
   "Explore Programmes" stood directly under the last point, no room between (0px; 44px from 992px). */
@media screen and (max-width:991px){
  html:root body #develop .develop_argument .button{margin-top:28px}
}
/*/DD5:3*/

/* ==== D-day's last build (batch DD9, 11 Oct 2026). Each part between its own markers. ==== */

/*DD9:2*/
/* ---- The programme portfolio two by two: room between its rows ----
   Dex, 11 Oct, from his upright monitor (1080 by 1920): "the cards are tightly packed together, they need to be
   nicely spaced so that things look uniform."
   From 992 to 1,180px wide the four cards stand two by two. Where the section keeps its story's layout (.is_story:
   a mouse on a tall screen, where it is held; and every touch screen of that width, a tablet on its side) the cards
   share one set of inner rows, so that their titles, texts and buttons line up, and that layout sets the room
   between rows to nothing: it was written for four in a row. Two by two, the second row of cards touched the first
   while the columns stood 24px apart.
   The second row of cards takes room above it equal to the room between the columns. It is the cards' own room, not
   the grid's: the grid's would also push each card's inner rows apart. Where the script takes the story's layout
   off (a mouse on a short screen) the cards already stand apart, and this rule does not reach them. */
@media screen and (min-width:992px) and (max-width:1180px){
  html:root body #portfolio.is_story .portfolio_tiers > .portfolio_tier:nth-child(n+3){margin-top:24px!important}
}
@media screen and (min-width:992px) and (max-width:1180px) and (pointer:fine) and (680px <= height < 1190px){
  html:root body #portfolio.is_story .portfolio_tiers > .portfolio_tier:nth-child(n+3){margin-top:clamp(15.13px, calc(16px + 8 * (100vh - 730px) / 460), 24px)!important}
}
/*/DD9:2*/

/* ==== D-day's last build (batch DD10, 11 Oct 2026). Each part between its own markers. ==== */

/*DD10:1*/
/* ---- "Problems we solve", its card where the section stands in one column and is not held ----
   Dex, 11 Oct, from a phone-wide window: "look at the eyebrow, its not nicely spaced in the container, its too
   close to the top ... 'Not sure which one fits' with the call to action: the spacing of that to the paragraph
   above, there's like dead space there. Can we please look at sizing the container to the content ... it must match
   the padding to the bottom call to action." And: "that's only for mobile, so please do not change the desktop
   view."
   The card is drawn by .solve_intro::before, which reaches up over the label (the label stands above the card's
   own box). Up to 991px it reached 42px up and the label is 38px tall with its gap: 4px of room over the label,
   where the button has 24px under it. The card now reaches 62px up, and the label is set 20px lower so that the
   card's top edge stays where it was: 24px over the label, 24px under the button.
   The closing block ("Not sure which one fits") stood 42px under the paragraph: 28px now.
   And in a narrow window on a computer whose height is 680 to 849px, the story's stage kept its least height of
   225px though the story does not play under 992px: 57px of nothing under the button. The stage is as tall as
   what it holds now.
   Up to 991px only, and only where the story does not play (html without .is_js). From 992px nothing is touched:
   not the held story, not a tablet on its side, not a short window. */
@media screen and (max-width:991px){
  html:root:not(.is_js) body #solve .solve_container > .eyebrow_text{margin-top:20px}
  html:root:not(.is_js) body #solve .solve_intro::before{top:-62px}
  html:root:not(.is_js) body #solve .solve_intro .solve_stage{margin-top:14px;min-height:0}
}
/*/DD10:1*/

/*DD10:2*/
/* ---- The small labels over the headings of the light sections, on desktops ----
   Dex, 11 Oct: "on the white sections of our homepage, the orange eyebrows text, it's not very legible. So how can
   we improve that? Do we change it to a different color? ... I'm open to suggestion." And: "this is for desktop
   only, eh? Not for mobile views or tablets."
   The light orange (#ffb44a) reads 1.6 to 1 on the house beige. From 992px wide the label takes the house's own
   darker gold, the one the small labels on white cards already have (#995b00, "gold text": 4.9 to 1 on the beige).
   Its little mark keeps its orange. No shadow: under words this small a shadow blurs more than it lifts.
   The sections on navy, and every screen under 992px, are untouched.
   (The class is written twice on purpose: an earlier batch gives these five labels the light orange with
   "!important" from a selector of the same weight, and this rule must win wherever it stands in the file.) */
@media screen and (min-width:992px){
  html:root body section:is(#develop,#loop,#trust,#results,#video) .eyebrow_text.eyebrow_text{color:#995b00!important}
}
/*/DD10:2*/