@font-face{font-family:'Geist';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/Geist-Regular.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/Geist-Medium.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/Geist-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/Geist-Bold.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/GeistMono-Regular.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/GeistMono-Medium.woff2) format('woff2')}
/* Octopus website design system, from the 2026 Brand Book and approved direction C (28-Sep-26).
   Shared by every page. Colours p.24-25, type p.29-30, layout p.31, fields p.32. */
:root{
  --marine:#175D7D;
  --violet:#7B5CC7;
  --violet-dark:#9B7FE0;
  --ink:#102A43;
  --paper:#F7F5F0;
  --marine-tint:#D9E6EE;
  --violet-tint:#EAE3F8;
  --pale:#EDEBE6;
  --mid:#5E7185;
  --line:#E3DDD0;
  --sans:'Geist',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:12px;
  --r:14px;
  --gutter:clamp(22px,4vw,64px);
  --maxw:1320px;
  --head-h:76px;
  --sec:clamp(88px,11vw,160px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
::selection{background:var(--marine);color:var(--paper)}
html{scrollbar-color:var(--marine) var(--pale);caret-color:var(--marine);font-variant-numeric:tabular-nums}
a{text-underline-offset:.2em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec) 0}

/* type */
.h-display{font-weight:700;font-size:clamp(44px,6.2vw,104px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.h-sec{font-weight:600;font-size:clamp(28px,3.1vw,46px);line-height:1.12;letter-spacing:-.022em;max-width:24em;text-wrap:balance}
.h-sec span{color:var(--mid)}
.on-dark .h-sec span{color:#A9BFCC}
.h-item{font-weight:600;font-size:clamp(20px,1.8vw,24px);line-height:1.25;letter-spacing:-.012em}
.body-l{font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--mid);max-width:36em}
.meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--mid)}
.on-dark .meta{color:#A9BFCC}

/* surfaces */
.on-dark{background:var(--ink);color:var(--paper)}
.on-marine{background:var(--marine);color:var(--paper)}
.rule{border:0;height:1px;background:var(--line)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;font-size:15.5px;transition:background .2s}
.btn:hover{background:var(--marine)}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn.light{background:var(--paper);color:var(--ink)}
.btn.light:hover{background:var(--marine-tint)}
.link{font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:color .2s}
.link:hover{color:var(--marine)}

/* header */
.site-head{position:sticky;top:0;z-index:30;background:var(--paper);display:flex;align-items:center;gap:36px;height:var(--head-h);padding:0 calc(var(--pad) + 22px)}
.site-head .logo img{height:44px;width:auto}
.site-head .logo-rev{display:none}
/* dark header, for designs that open on Ink or Marine */
.head-dark .site-head{background:var(--ink);color:var(--paper)}
.head-dark .site-head .logo-std{display:none}
.head-dark .site-head .logo-rev{display:block}
.head-dark .site-head nav a:hover,.head-dark .site-head nav a[aria-current]{border-bottom-color:var(--marine-tint)}
.head-dark .site-head .btn{background:var(--paper);color:var(--ink)}
.head-dark .site-head .btn:hover{background:var(--marine-tint)}
.head-dark .menu-btn{background:var(--paper);color:var(--ink)}
.head-marine .site-head{background:var(--marine)}
/* the About menu keeps its Paper panel and Ink words on a dark header; the colour change eases */
.head-dark .site-head nav .sub{color:var(--ink)}
.site-head{transition:background-color .3s,color .3s}
.site-head nav{margin-left:auto}
.site-head nav ul{list-style:none;display:flex;gap:30px}
.site-head nav a{font-size:15px;font-weight:500;padding:6px 0;border-bottom:1.5px solid transparent;transition:border-color .2s}
.site-head nav a:hover,.site-head nav a[aria-current]{border-bottom-color:var(--marine)}
/* About opens a small panel holding Academy, on hover and on keyboard focus */
.site-head nav li{position:relative}
.has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.has-sub:hover>a::after,.has-sub:focus-within>a::after{transform:translateY(0) rotate(225deg)}
.site-head nav .sub{display:block;position:absolute;top:calc(100% + 12px);left:-14px;min-width:180px;padding:8px;border-radius:12px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -12px rgba(16,42,67,.28);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s;z-index:40}
.site-head nav .sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.site-head nav .sub a{display:block;padding:10px 12px;border-radius:8px;border-bottom:0;white-space:nowrap}
.site-head nav .sub a:hover,.site-head nav .sub a:focus-visible{background:var(--pale)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease),visibility 0s}
.blk.t3 small{color:#D1E1EA}
/* the drawer Close button, never the shared .close band colours */
.drawer .close{color:var(--ink);overflow:visible}
.site-head .btn{height:44px;padding:0 20px;font-size:15px}
.menu-btn{display:none}

/* phone drawer: the brand tint ladder, resolving into one action */
.drawer{display:none;position:fixed;inset:var(--pad);z-index:35;flex-direction:column;border-radius:var(--r);overflow:hidden;box-shadow:0 20px 60px rgba(16,42,67,.35)}
.drawer.open{display:flex}
.drawer .close{position:absolute;top:14px;right:14px;height:40px;padding:0 16px;border-radius:999px;background:var(--paper);font-weight:600;font-size:14px;z-index:2}
.blk{display:flex;flex-direction:column;justify-content:center;flex:1;padding:0 22px;border-top:1px solid rgba(16,42,67,.08);font-size:16px;font-weight:500}
.blk:first-child{border-top:0}
.blk small{font-size:14px;font-weight:400;color:var(--mid)}
.blk.sub{flex:.8;padding-left:34px}
.t1{background:var(--pale)}.t2{background:var(--marine-tint)}
.t3{background:var(--marine);color:var(--paper);border-top-color:rgba(247,245,240,.14)}
.t4{background:var(--ink);color:var(--paper);flex:1.5;font-size:18px;font-weight:600;flex-direction:row;align-items:center;justify-content:space-between}
.t4 svg{width:20px;height:20px;fill:currentColor}

.film-ctrl{position:absolute;left:30px;bottom:30px;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:rgba(247,245,240,.14);border:1px solid rgba(247,245,240,.28);color:var(--paper);font-size:14px;font-weight:500;backdrop-filter:blur(6px)}
.film-ctrl svg{width:14px;height:14px;fill:currentColor}
.clocks{position:absolute;right:30px;bottom:38px;display:flex;gap:26px;font-family:var(--mono);font-size:13px;color:rgba(247,245,240,.78)}
.clocks b{font-weight:500;color:var(--paper);margin-left:8px;font-variant-numeric:tabular-nums}


/* footer */
.site-foot{background:var(--ink);color:var(--paper);padding:72px 0 36px}
.site-foot .top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.site-foot img{height:44px;width:auto}
.site-foot h2{font-family:var(--mono);font-size:12.5px;font-weight:500;color:#A9BFCC;margin-bottom:14px;letter-spacing:.02em}
.site-foot ul{list-style:none}
.site-foot li{margin:8px 0;font-size:15px}
.site-foot li a:hover{color:var(--marine-tint);text-decoration:underline}
.site-foot address{font-style:normal;font-size:15px;color:#CFDCE4;margin-top:18px;line-height:1.6}
/* every office (client 25-Oct-26): a small label over each place */
.site-foot .locs span{display:block;margin-top:12px;max-width:22em}
.site-foot .locs small{display:block;font-family:var(--mono);font-size:12px;color:#A9BFCC;letter-spacing:.02em}
.site-foot .bottom{display:flex;justify-content:space-between;gap:20px;margin-top:64px;padding-top:24px;border-top:1px solid rgba(247,245,240,.14);font-size:13.5px;color:#A9BFCC}

/* placeholders for content Octopus has not sent yet: visible to reviewers, never mistaken for final */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px dashed #B6C2CC;border-radius:var(--r);color:var(--mid);font-family:var(--mono);font-size:13px;padding:24px;background:var(--pale)}

@media (max-width:980px){
  .site-foot .top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--head-h:64px}
  .site-head{padding:0 22px}
  .site-head nav,.site-head .btn{display:none}
  .menu-btn{display:inline-flex;align-items:center;margin-left:auto;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;font-size:14px}
  .film-ctrl{left:22px;bottom:24px}
  .clocks{left:22px;right:auto;bottom:auto;top:22px;gap:18px;font-size:12px}
  .clocks span:last-child{display:none}
}
@media (max-width:560px){
  .site-foot .top{grid-template-columns:1fr}
  .site-foot .bottom{flex-direction:column}
}
@media (min-width:901px){.drawer .close{display:none}}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) *{animation:none!important;transition:none!important}}

/* Shared pieces for designs 1, 2 and 3. Each design arranges them in its own structure. */

/* framed film: Octopus's own footage, 14px corners, pause control on every loop over 5s */
.film{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.film video,.film img{width:100%;height:100%;object-fit:cover}
.film .film-ctrl{left:16px;bottom:16px}
/* clocks ride top-right on their own plate so they never meet the pause control or a bright wall */
.film .clocks{top:16px;right:16px;bottom:auto;left:auto;gap:18px;height:36px;align-items:center;padding:0 14px;border-radius:999px;background:rgba(16,42,67,.62);backdrop-filter:blur(6px);font-size:12.5px;color:rgba(247,245,240,.82)}
.film .clocks b{margin-left:6px}
@media (max-width:900px){.film .film-ctrl{left:14px;bottom:14px}.film .clocks{left:14px;right:auto;top:14px;gap:14px;font-size:12px}}
@media (max-width:1100px) and (min-width:901px){.film .clocks span:last-child{display:none}}

/* Three Hearts: the Brand Book p.7 master artwork, whole, labelled as on p.7 */
.hearts-stage{position:relative;aspect-ratio:1.55}
.hearts-art{position:absolute;left:24%;top:22%;width:52%;height:auto;overflow:visible}
.hl{position:absolute;white-space:nowrap}
.hl b{font-weight:600;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.01em}
.hl .t{font-family:var(--mono);font-size:12.5px;color:var(--mid);margin-left:8px}
.hl small{display:block;white-space:normal;max-width:17em;color:var(--mid);font-size:14px;margin-top:2px}
.hl.l1{left:0;top:58%}
.hl.l2{left:36%;top:2%}
.hl.l3{right:0;top:80%;text-align:right}

/* figures: one lead figure, the rest as a ruled table */
.lead-fig{font-weight:700;font-size:clamp(56px,7.4vw,124px);line-height:.95;letter-spacing:-.04em}
.lead-fig small{display:block;font-size:17px;font-weight:500;letter-spacing:0;color:var(--mid);margin-top:14px}
.figs{border-top:1px solid var(--line)}
.figs>div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.figs b{font-weight:600;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em}
.figs>div>span{color:var(--mid);font-size:15px;text-align:right}
.figs .txt b{font-size:16px;font-weight:500;letter-spacing:0;line-height:1.55}
.roll{display:inline-block}

/* partners: the five the client named, logos from each partner's own site */
.logos{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;align-items:center}
.logos li{height:56px;display:flex;align-items:center;justify-content:center}
.logos img{width:auto;max-height:38px;max-width:140px;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.logos img[alt="Salesforce"]{max-height:56px}
.logos li:hover img{filter:none;opacity:1}
.on-dark .logos img,.on-marine .logos img{filter:grayscale(1) brightness(0) invert(1);opacity:.85}

/* hours: each city's 09:00 to 17:00 drawn in Alexandria time, Violet marks now */
.axis{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;margin-top:12px}
.axis .lbl{font-size:14.5px;font-weight:500;line-height:1.3}
.axis .lbl small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--mid);font-weight:400}
.track{position:relative;height:28px;border-radius:6px;background:var(--pale)}
.track .bar{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--marine)}
.track .bar.home{background:var(--ink)}
.scale{display:grid;grid-template-columns:110px 1fr;gap:14px;margin-top:8px}
.scale div{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--mid)}
.now{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--violet)}
.hours-note{margin-top:16px;color:var(--mid);font-size:15px;max-width:34em}
.on-dark .track{background:rgba(247,245,240,.1)}
.on-dark .track .bar{background:var(--marine-tint)}
.on-dark .track .bar.home{background:var(--paper)}
.on-dark .now{background:var(--violet-dark)}
.on-dark .axis .lbl small,.on-dark .scale div,.on-dark .hours-note{color:#A9BFCC}

/* close: solid Marine, one Organism field cropped past the edge (BB p.32) */
.close{position:relative;overflow:hidden;background:var(--marine);color:var(--paper)}
.close .field-mark{position:absolute;right:-9%;bottom:-16%;width:min(34vw,500px);height:auto;transform:rotate(-18deg);pointer-events:none}
.close .field-body{fill:var(--ink)}
.close .field-pulse{fill:var(--violet)}
.close .wrap{position:relative;z-index:1}
.close h2{font-weight:700;font-size:clamp(44px,6vw,96px);line-height:1;letter-spacing:-.035em}
.close p{font-size:clamp(18px,1.4vw,21px);color:#D1E1EA;max-width:30em;margin:22px 0 36px}

/* content Octopus still owes: visible to reviewers, never mistaken for final copy */
.tbc{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.02em;color:var(--mid);border:1px dashed #B6C2CC;border-radius:6px;padding:1px 7px;vertical-align:.15em;white-space:nowrap}
.on-dark .tbc,.on-marine .tbc{color:#D1E1EA;border-color:rgba(247,245,240,.4)}

/* preview note under the footer */
.note{padding:48px 0 72px;color:var(--mid);font-size:14.5px}
.note h2{font-size:17px;color:var(--ink);margin-bottom:8px}
.note ul{padding-left:18px}.note li{margin:5px 0;max-width:80ch}

/* shared rise, used once per element and always from a visible default */
[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal]:not(.in){opacity:0;transform:translateY(24px)}

@media (max-width:900px){
  .close .field-mark{width:64vw;right:-22%;bottom:-18%}
  .hearts-stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px}
  .hearts-art{position:relative;left:auto;top:auto;width:86%;margin:0 auto 12px}
  .hl,.hl.l1,.hl.l2,.hl.l3{position:static;white-space:normal;text-align:left;padding-top:12px;border-top:1px solid var(--line)}
  .logos{grid-template-columns:repeat(3,1fr)}
  .axis,.scale{grid-template-columns:84px 1fr}
}
@media (max-width:560px){.logos{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .js [data-reveal]:not(.in){opacity:1;transform:none}}

/* ===== one screen per section: every section fits the window it is read in ===== */
:root{--h1:clamp(36px,min(4.3vw,8svh),72px);--h2:clamp(26px,min(2.6vw,5svh),42px);--lead:clamp(16.5px,min(1.25vw,2.3svh),19px)}
.scr{min-height:calc(100svh - var(--head-h));display:flex;align-items:center;padding:clamp(28px,5svh,64px) 0}
.scr>.wrap{width:100%}
.hx1{font-weight:700;font-size:var(--h1);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.hx2{font-weight:600;font-size:var(--h2);line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.hx2 span{color:var(--mid)}
.on-dark .hx2 span,.on-marine .hx2 span{color:#A9BFCC}
.lead{font-size:var(--lead);line-height:1.55;color:var(--mid);max-width:34em}
.on-dark .lead{color:#C9D6DF}
@media (max-width:900px){.scr{min-height:0;padding:56px 0}}

/* round 3 review fixes: one-colour headlines, the qualifier becomes the line under them */
.hx2 span,.on-dark .hx2 span,.on-marine .hx2 span{display:block;margin-top:clamp(10px,1.8svh,16px);font-size:var(--lead);font-weight:400;letter-spacing:0;line-height:1.55;color:var(--mid);max-width:36em}
.dark .hx2 span,.dark .lead,.on-dark .hx2 span,.on-dark .lead{color:#C9D6DF}
.mar .hx2 span,.on-marine .hx2 span,.p3s .hx2 span,.run2 .hx2 span{color:#D1E1EA}
/* partner marks keep their own colour on dark grounds, Salesforce loses its wordmark if inverted */
/* partner logos: quiet by default, their own colours on hover; on dark grounds a paper plate carries the colour logo */
.logos li{justify-self:center;border-radius:10px;padding:6px 14px;transition:background .3s}
.logos img{transition:filter .3s,opacity .3s}
img[alt="Salesforce"]{filter:grayscale(1) brightness(1.15)!important;opacity:.85!important}
.logos li:hover img,.logos li:hover img[alt="Salesforce"]{filter:none!important;opacity:1!important}
.dark .logos li:hover,.on-dark .logos li:hover,.on-marine .logos li:hover,.p3s .logos li:hover,.pt1 .logos li:hover{background:var(--paper)}
/* the close: one line, headline scale, never the largest type on the page */
.cl1 h2,.cl2 h2,.cl3 h2{font-size:clamp(36px,min(4.4vw,8svh),64px)!important;white-space:nowrap}
@media (max-width:700px){.cl1 h2,.cl2 h2,.cl3 h2{white-space:normal}}
/* a framed people film, with its pause control */
.pfilm{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.pfilm video{width:100%;height:100%;object-fit:cover;object-position:50% 70%;display:block}
.pfilm .film-ctrl{left:16px;bottom:16px}
.pfilm figcaption{position:absolute;right:16px;bottom:22px;font-family:var(--mono);font-size:12px;color:#D1E1EA}
.band .film-ctrl,.pfilm .film-ctrl,.pic3 .film-ctrl{background:rgba(16,42,67,.66);border-color:rgba(247,245,240,.2)}

/* the faded treatment: a flat Ink wash over the people film softens the phone footage (no gradient) */
.pfilm::after,.band::after,.pic3.vid::after{content:"";position:absolute;inset:0;background:rgba(16,42,67,.24);pointer-events:none;z-index:1}
.pfilm .film-ctrl,.pfilm figcaption,.band .film-ctrl,.band .figbar,.pic3.vid .film-ctrl,.pic3.vid figcaption{z-index:2}
.band video{object-position:50% 62%!important}

/* a faded film behind a section: Octopus's own montage under a flat colour wash, the content reads on top */
.has-bg{position:relative;isolation:isolate}
.bgfilm{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bgfilm video{width:100%;height:100%;object-fit:cover}
.bgfilm::after{content:"";position:absolute;inset:0;background:rgba(16,42,67,.86)}
.bgfilm.marine::after{background:rgba(23,93,125,.9)}
.bgctrl{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 10px;border-radius:999px;background:rgba(247,245,240,.12);border:1px solid rgba(247,245,240,.24);color:var(--paper);font-size:13px;font-weight:500}
.bgctrl svg{width:12px;height:12px;fill:currentColor}

/* a little more life: headings rise in once, arrows lean toward their action */
.js .rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv:not(.in){opacity:0;transform:translateY(22px)}
.btn svg,.link svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .js .rv:not(.in){opacity:1;transform:none}}

/* round 8 review fixes */
/* the people film reads as behind the page, not as raw footage */
.pfilm::after,.band::after,.pic3.vid::after{background:rgba(16,42,67,.42)}
/* type steps down about 15 percent: headlines, figures and closes */
:root{--h1:clamp(32px,min(3.7vw,6.8svh),62px);--h2:clamp(24px,min(2.3vw,4.4svh),38px)}
.cl1 h2,.cl2 h2,.cl3 h2,.cl4 h2{font-size:clamp(32px,min(3.6vw,6.6svh),54px)!important}
/* contrast: secondary text on pale grounds and small labels on dark grounds */
.pale,.id4,.i2,.h3s,.k3s .art,.pr2{--mid:#4A5C6E}
.dark .meta,.dark .axis .lbl small,.dark .scale div,.dark .hours-note{color:#A9BFCC}
.dark .tbc{color:#D1E1EA;border-color:rgba(247,245,240,.4)}
.cl1 p,.cl1 .mail{color:var(--paper)}
/* no mono label below 12.5px */
.tbc,.scale div,.axis .lbl small{font-size:12.5px}

/* the working day in three cities, live: a derived fact, never a claim */
.tzp{list-style:none;border-top:2px solid currentColor}
.tzp li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:clamp(14px,2.6svh,24px) 0;border-bottom:1px solid var(--line)}
.tzp .c{font-weight:600;font-size:clamp(18px,min(1.6vw,3.2svh),24px)}
.tzp .t{font-weight:700;font-size:clamp(34px,min(4vw,8svh),64px);letter-spacing:-.04em;line-height:1;grid-row:span 2;align-self:center}
.tzp .s{font-size:14.5px;color:var(--mid);display:flex;align-items:center;gap:8px}
.tzp .s i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.tzp .s.on i{background:var(--marine)}
.tzp li.here .s.on i{background:var(--violet);box-shadow:0 0 0 4px var(--violet-tint)}
.on-dark .tzp li,.tzp.dk li{border-bottom-color:rgba(247,245,240,.18)}
.on-dark .tzp .s,.tzp.dk .s{color:#C9D6DF}
.logos img{height:32px;max-height:none;width:auto;max-width:none}.logos img[alt="Salesforce"]{height:46px}.logos img[alt="Palm City"]{height:30px}.lg4 img{height:24px}.lg4 img[alt="Salesforce"]{height:34px}.pr2-logos img{height:40px}.pr2-logos img[alt="Salesforce"]{height:56px}
.logos{min-width:0}.p3s .bot .logos,.pt1 .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}.p3s .bot .logos img{height:26px}.p3s .bot .logos img[alt="Salesforce"]{height:38px}.p3s .bot .logos img[alt="Palm City"]{height:26px}
@media (max-width:900px){.logos,.pr2-logos{display:flex!important;flex-wrap:wrap;justify-content:flex-start;gap:12px 20px}.logos img,.pr2-logos img{height:26px!important}.logos img[alt="Salesforce"],.pr2-logos img[alt="Salesforce"]{height:38px!important}}
@media (min-width:901px){.p3s .bot{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.p3s .bot .logos{flex-wrap:nowrap;gap:8px}.p3s .bot .logos li{padding:6px 8px}}
.mar .tbc,.dark .tbc,.cl1 .tbc,.cl2 .tbc,.cl3 .tbc,.cl4 .tbc,.p3s .tbc{color:#D1E1EA;border-color:rgba(247,245,240,.45)}
@media (max-width:900px){.tbc{white-space:normal}}

/* round 11 review fixes */
[id]{scroll-margin-top:calc(var(--head-h) + 16px)}
.bgfilm video{object-position:50% 82%}
#pf2{object-position:50% 85%}
.routes1 .tbc{color:var(--mid);border-color:#B6C2CC}
.pl1 b,.pl2 b,.pl3 b,.pl4 b{font-size:clamp(24px,min(2.5vw,4.8svh),40px)!important}
@media (max-width:900px){.band video{object-position:26% 70%!important}}
.motionctl{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 10px;border-radius:999px;background:rgba(247,245,240,.12);border:1px solid rgba(247,245,240,.24);color:var(--paper);font-size:13px;font-weight:500}
.motionctl svg{width:12px;height:12px;fill:currentColor}

/* careers: one Apply per language, a ruled grid; each design sets the columns and the ground */
.langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);border-top:2px solid currentColor}
.lang{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:clamp(52px,8svh,72px);padding:8px 4px;border-bottom:1px solid var(--line);transition:background .3s,padding .4s var(--ease)}
.lang b{display:block;font-weight:600;font-size:clamp(17px,min(1.4vw,2.8svh),21px);letter-spacing:-.012em}
.lang small{display:block;margin-top:2px;font-family:var(--mono);font-size:12.5px;color:var(--mid)}
.lang i{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:600;font-size:14.5px;white-space:nowrap}
.lang svg{width:15px;height:15px;fill:currentColor;transition:transform .35s var(--ease)}
.lang:hover{padding-left:12px;background:rgba(23,93,125,.08)}
.lang:hover svg{transform:translateX(4px)}
.langs.dk .lang{border-bottom-color:rgba(247,245,240,.2)}
.langs.dk .lang small{color:#A9BFCC}
.langs.dk .lang:hover{background:rgba(247,245,240,.08)}
.langs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.langs,.langs.two{grid-template-columns:1fr}}

/* round 13 review fixes */
.why3{--mid:#4A5C6E}
.langs.two .lang:last-child:nth-child(odd){grid-column:1 / -1}
.lead,.hx2 span,.lang b{text-wrap:pretty}

/* pause controls: a small round icon, quiet until hovered; the words stay for screen readers (WCAG 2.2.2) */
.film-ctrl,.bgctrl,.motionctl{width:36px;height:36px;padding:0!important;gap:0!important;justify-content:center;opacity:.72;transition:opacity .3s}
.film-ctrl:hover,.bgctrl:hover,.motionctl:hover,.film-ctrl:focus-visible,.bgctrl:focus-visible,.motionctl:focus-visible{opacity:1}
.film-ctrl span,.bgctrl span,.motionctl span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.film-ctrl svg,.bgctrl svg,.motionctl svg{width:12px;height:12px}

/* films from the old website (01-Oct-26): normally framed stock, so one neutral framing everywhere */
video{object-position:50% 40%!important}
.band video{object-position:50% 22%!important}

/* photo reels (01-Oct-26): Octopus's own photographs, cross-dissolving with a slow push-in, drawn by the browser so they never stutter */
.reel{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ink)}
.band .reel,.film4 .reel,.h4film .reel,.tr2 .reel,.fc3 .reel,.st3 .pic3 .reel,.split3 .pic3 .reel{position:absolute;inset:0}
.film4 .reel,.tr2 .reel{z-index:-2}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1.8s ease,transform 0s linear 1.8s}
.reel img.on{opacity:1;transform:scale(1.08);transition:opacity 1.8s ease,transform 9s linear}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .reel img.on{transform:none}}
.reel img{object-position:50% 30%}
/* client photos whose subject sits off centre: frame on the person (23-Oct-26) */
.pic3 .reel img[src*="f-1387"]{object-position:100% 35%;transform-origin:100% 35%}

/* ===== Design 3, The People: split screens, real people doing the work, the words beside them ===== */
:root{--maxw:1480px}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:clamp(22px,4svh,36px)}

/* split screen: a photo edge to edge on one half, the words on the other */
.split3{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--head-h))}
.split3 .pic3{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.split3{overflow:hidden}
.split3 .pic3 img,.split3 .pic3 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split3 .pic3 video{object-position:40% 60%}
.split3 .pic3 .film-ctrl{left:16px;bottom:16px;z-index:2}
.split3 .pic3 video~figcaption{left:auto;right:16px}
.a3 .pic3 img{object-position:20% 60%}
.split3 .pic3 figcaption{position:absolute;left:16px;bottom:16px;height:32px;display:flex;align-items:center;padding:0 12px;border-radius:999px;background:rgba(16,42,67,.62);backdrop-filter:blur(6px);font-family:var(--mono);font-size:12px;color:#D1E1EA}
.split3 .tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5svh,64px) clamp(28px,5vw,96px)}
.split3.rev .pic3{order:2}

/* opening */
.o3 .hx1{max-width:9em}
.o3 .hx1 span{display:block;animation:r3 1s var(--ease) backwards}
.o3 .hx1 span+span{animation-delay:.12s}
.o3 .lead{margin-top:clamp(16px,2.6svh,24px);animation:r3 1s var(--ease) .25s backwards}
.o3 .lead b{font-weight:500;color:var(--ink)}
.o3 .act{animation:r3 1s var(--ease) .35s backwards}
.o3 .pic3 img{animation:r3z 1.6s var(--ease) backwards;object-position:30% 50%}
.o3 .clk{display:flex;gap:20px;margin-top:clamp(26px,5svh,48px);padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--mid)}
.o3 .clk b{font-weight:500;color:var(--ink);margin-left:6px}
@keyframes r3{from{opacity:0;transform:translateY(22px)}}
@keyframes r3z{from{transform:scale(1.08)}}

/* what we run: an accordion, one service open at a time */
.run3 .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:center}
.acc{list-style:none;border-top:2px solid var(--ink)}
.acc li{border-bottom:1px solid var(--line)}
.acc button{width:100%;display:grid;grid-template-columns:1fr 24px;gap:12px;align-items:center;padding:clamp(12px,2.2svh,20px) 0;text-align:left}
.acc .n{font-family:var(--mono);font-size:12.5px;color:var(--mid)}
.acc .t{font-weight:600;font-size:clamp(19px,min(1.8vw,3.4svh),27px);letter-spacing:-.018em}
.acc .pm{position:relative;width:18px;height:18px}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.acc .pm::after{transform:rotate(90deg)}
.acc button[aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc button[aria-expanded="true"] .t{color:var(--marine)}
.acc .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc .panel>div{overflow:hidden}
.acc li.open .panel{grid-template-rows:1fr}
.acc .in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding:0 0 clamp(14px,2.6svh,24px) 0}
.acc .in p{color:var(--mid);font-size:var(--lead)}
.acc .in ul{list-style:none}
.acc .in ul li{display:flex;align-items:center;gap:8px;padding:3px 0;border:0;font-weight:500;font-size:15px}
.acc .in ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--marine)}
.acc .in a{grid-column:1;justify-self:start;font-size:14.5px}

/* kemi beside a real team review */
.k3s .art{order:-1;display:flex;align-items:center;justify-content:center;background:var(--pale);padding:clamp(24px,4vw,64px)}
.k3s .art .hearts-stage{width:100%;max-width:calc(60svh * 1.55)}
.k4{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:clamp(20px,3.6svh,34px);border-top:2px solid var(--ink)}
.k4 li{padding:clamp(11px,2svh,16px) 0;border-bottom:1px solid var(--line);font-weight:600;font-size:clamp(17px,min(1.4vw,2.8svh),21px)}
.k3s ol{list-style:none;margin-top:clamp(20px,3.6svh,34px);border-top:1px solid var(--line)}
.k3s ol li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:clamp(10px,1.8svh,14px) 0;border-bottom:1px solid var(--line);font-weight:500;font-size:clamp(16px,min(1.3vw,2.6svh),19px)}
.k3s ol li i{width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--marine)}
.k3s ol li.sig i{background:var(--violet);box-shadow:0 0 0 4px var(--violet-tint)}
.k3s .link{display:inline-block;margin-top:clamp(18px,3svh,28px);align-self:flex-start}
.k3s .pic3 img{object-position:30% 60%}

/* three hearts */
.h3s{background:var(--pale)}
.h3s .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:center}
.h3s .hearts-stage{aspect-ratio:1.55;width:min(100%,calc(60svh * 1.55))}

/* proof on Marine */
.p3s{background:var(--marine);color:var(--paper)}
.p3s .hx2 span{color:#D1E1EA}
.p3s .f4{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.35fr;gap:clamp(16px,2.4vw,40px);margin-top:clamp(28px,5svh,56px)}
.p3s .f4 div{padding-top:16px;border-top:1px solid rgba(247,245,240,.3)}
.p3s .f4 b{display:block;font-weight:700;font-size:clamp(30px,min(3.7vw,8.4svh),72px);letter-spacing:-.04em;line-height:1}
.p3s .f4 span{display:block;margin-top:10px;color:#D1E1EA;font-size:15px}
.p3s .bot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(28px,5svh,56px);padding-top:clamp(20px,3.4svh,32px);border-top:1px solid rgba(247,245,240,.3)}
.p3s .cz{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.p3s .cz li{height:36px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;background:rgba(247,245,240,.12);font-size:14.5px;font-weight:500}
.p3s .cz svg{width:14px;height:14px;fill:var(--paper)}
.p3s .logos img{filter:grayscale(1) brightness(0) invert(1);opacity:.9}

/* industries: two columns, numbered */
.i3 .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,96px);align-items:center}
.i3 ol{list-style:none;columns:2;column-gap:clamp(24px,3vw,56px)}
.i3 ol{list-style:none}
.i3 ol li{break-inside:avoid;display:grid;grid-template-columns:1fr;gap:8px;padding:clamp(10px,1.9svh,16px) 0;border-top:1px solid var(--line)}
.i3 ol .n{font-family:var(--mono);font-size:12px;color:var(--mid);padding-top:5px}
.i3 ol b{display:block;font-weight:600;font-size:clamp(16px,min(1.35vw,2.7svh),20px)}
.i3 ol span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--mid)}

/* alexandria */
.tzhalf{display:flex;align-items:center;padding:clamp(28px,5vw,96px);background:var(--ink);color:var(--paper)}
.tzhalf .tzp{width:100%}
.a3 .hrs{margin-top:clamp(18px,3svh,28px)}
.a3 .kv{list-style:none;margin-top:clamp(16px,2.6svh,24px);border-top:1px solid var(--line)}
.a3 .kv li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}

/* close */
.cl3{background:var(--ink);color:var(--paper)}
.cl3 .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px;align-items:end}
.cl3 h2{font-weight:700;font-size:clamp(44px,min(6vw,11svh),104px);line-height:.98;letter-spacing:-.04em}
.cl3 p{margin-top:18px;color:#D1E1EA;font-size:var(--lead);max-width:28em}
.cl3 .mail{font-family:var(--mono);font-size:13px;color:#A9BFCC;margin-top:14px}

@media (max-width:900px){
  .split3{grid-template-columns:1fr;min-height:0}
  .split3 .pic3{height:44svh}
  .split3 .pic3.tzhalf{height:auto}
  .o3 .pic3{height:36svh}
  .o3 .pic3 img{object-position:78% 50%}
  .k3s .pic3 img{object-position:40% 60%}
  .split3.rev .pic3{order:0}
  .run3 .wrap,.h3s .wrap,.i3 .wrap,.cl3 .wrap,.p3s .bot{grid-template-columns:1fr}
  .acc .in{grid-template-columns:1fr;padding-left:0}
  .p3s .f4{grid-template-columns:1fr 1fr}
  .i3 ol{columns:1}
  .h3s .hearts-stage{width:100%;aspect-ratio:auto}
}

/* ===== The site: Home 3's system (d3.css) is the base for all pages. These are the grounds and pieces the
   Solutions and Careers pages add, so the three read as one website with one header, footer, button and type scale ===== */
.pale{background:var(--pale);--mid:#4A5C6E}
.mar{background:var(--marine);color:var(--paper)}
.dark{background:var(--ink);color:var(--paper)}

/* proof band, lower half: two labelled rows so a buyer tells credentials from partners at a glance.
   Certifications sit on light credential plates (official white mark + its name), partners stay a plain logo strip */
.p3s .bot{grid-template-columns:1fr;gap:0}
.p3s .grp{display:grid;grid-template-columns:clamp(150px,13vw,220px) minmax(0,1fr);gap:24px;align-items:center;padding:clamp(14px,2.6svh,24px) 0}
.p3s .grp+.grp{border-top:1px solid rgba(247,245,240,.3)}
.p3s .grp .meta{font-family:var(--mono);font-size:12.5px;font-weight:400;color:#D1E1EA;letter-spacing:.02em;line-height:1.4}
.certs{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
.certs li{display:flex;align-items:center;gap:12px;min-height:clamp(64px,10svh,84px);padding:10px 14px 10px 10px;border-radius:12px;background:rgba(247,245,240,.08);border:1px solid rgba(247,245,240,.22);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.certs li:hover{background:rgba(247,245,240,.14);border-color:rgba(247,245,240,.4);transform:translateY(-2px)}
.certs img{flex:none;width:clamp(44px,7svh,58px);height:clamp(44px,7svh,58px);object-fit:contain;filter:brightness(0) invert(1)}
.certs span{font-weight:600;font-size:clamp(14px,min(.95vw,2svh),16px);line-height:1.3;letter-spacing:-.005em}
@media (max-width:1100px){.certs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.p3s .grp{grid-template-columns:1fr;gap:12px}.certs{grid-template-columns:1fr 1fr;gap:10px}.certs img{width:40px;height:40px}}

/* focus stays visible on every ground (WCAG 2.2 AA 3:1): Violet on Paper, Violet on Dark over Ink, Paper over Marine */
.dark :focus-visible,.cl3 :focus-visible,.tzhalf :focus-visible,.site-foot :focus-visible,.tc :focus-visible{outline-color:var(--violet-dark)}
.mar :focus-visible,.p3s :focus-visible{outline-color:var(--paper)}

/* the hero clocks wrap between cities, never inside one */
.o3 .clk{flex-wrap:wrap;row-gap:6px}
.o3 .clk span{white-space:nowrap}

/* Salesforce on the Marine band: the reverse mark (white cloud, lettering knocked out in Marine) at rest, and like every
   other partner its own colours on a Paper plate on hover */
.p3s .logos li.sf .rev{filter:none!important;opacity:.9!important}
.p3s .logos li.sf .col{display:none;filter:none!important;opacity:1!important}
.p3s .logos li.sf:hover .rev{display:none}
.p3s .logos li.sf:hover .col{display:block}

/* Careers, Where we work: Octopus's own team photo held still under a Marine wash, so the band carries the people, not an empty field */
.pl2 .bgfilm img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* the buildings show clearly (owner 25-Oct-26): Marine only where the words sit, the photo open in between */
.pl2 .bgfilm.marine::after{background:linear-gradient(180deg,rgba(23,93,125,.82) 0%,rgba(23,93,125,.42) 30%,rgba(23,93,125,.42) 45%,rgba(16,42,67,.9) 72%)}
/* the Where band reel (client photos 22-Oct-26): the sites and the courtyard behind the Marine wash */
.pl2 .bgfilm .reel{position:absolute;inset:0}
.pl2 .bgfilm.marine::after{z-index:1}

/* Careers, Apply: an odd last language stays in its column, close to its Apply */
.ap3 .langs.two .lang:last-child:nth-child(odd){grid-column:auto}

/* Home, What we run: the open service's scope reads at lead size, not as small print */
.acc .in ul li{font-size:var(--lead);padding:5px 0}

/* Careers, a language waiting for its form: the row stays, its action reads as a calm waiting state, never as a broken button */
.lang.soon{cursor:default}
.lang.soon:hover{padding-left:4px;background:none}
.ap3 .lang.soon i,.lang.soon i{gap:8px;padding:5px 11px;border:1px solid rgba(247,245,240,.3);border-radius:999px;font-family:var(--mono);font-size:12.5px;font-weight:400;color:#D1E1EA}
.lang.soon i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--marine-tint)}

/* Careers, Where we work: the head row carries the placeholder tag, as Why Octopus does */
.pl2 .head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px}

/* Home, Three Hearts: the new book p.7 artwork. The svg keeps p.7's own frame (36 78 620 234),
   so each label sits by percent where p.7 puts it: tag above, name, line. Caption under the stage. */
#hearts .hl .t{display:block;margin:0 0 .45em;font-size:clamp(11px,1.4cqw,12.5px);text-transform:uppercase;letter-spacing:.14em}
@media (min-width:901px){
  .k3s .art .hearts-stage{aspect-ratio:620/234;max-width:none;container-type:inline-size}
  #hearts .hearts-art{left:0;top:0;width:100%}
  #hearts .hl{white-space:normal}
  #hearts .hl b{display:block;white-space:nowrap;font-size:clamp(16px,2.4cqw,21px)}
  #hearts .hl small{max-width:none}
  #hearts .hl.l1{left:0;right:73.9%;top:64.1%;text-align:right}
  #hearts .hl.l2{left:14.6%;right:0;top:auto;bottom:83%;text-align:center}
  #hearts .hl.l3{left:78.4%;right:auto;top:53%;text-align:left}
}
.hcap{position:absolute;right:0;top:calc(100% + 28px);margin:0;font-family:var(--mono);font-size:12.5px;color:var(--mid);text-align:right}
@media (max-width:900px){
  .hcap{position:static;padding-top:12px;text-align:left}
  #hearts{height:auto}
  #hearts .hearts-art{width:180%;margin:-8% -40% 0}
  #hearts .lead{display:none}
}
.certs span small{display:block;margin-top:2px;font-family:var(--mono);font-size:12.5px;font-weight:400;color:#D1E1EA}

/* Fix round 15-Oct-26 (planner review).
   1. Only a page's first screen fills the window. Every later section sizes to its content with one vertical padding,
      so no band runs empty. The CSR opening has no photo, so it is a compact band too. */
:root{--sec-y:clamp(36px,6.5svh,88px)}
@media (min-width:901px){
  section.scr:not(#top),section.split3:not(#top),#top.cs-o{min-height:0}
  section.scr:not(#top),section.ks,section.cs-n{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
  .split3:not(#top) .tx{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
  #top.cs-o{padding:clamp(56px,11svh,128px) 0}
}
/* 3. Phones: the first screen's photo shows at once, full width at 4:3, with no reveal. */
@media (max-width:900px){
  #top.split3 .pic3,.o3 .pic3{height:auto;aspect-ratio:4/3}
  #top .pic3 img,#top .pic3 video{animation:none!important;transform:none!important}
  .cv2 .tall2{height:auto;aspect-ratio:4/3;clip-path:none!important}
}
/* Home What we run: rows a touch tighter, so the open service still fits 1880x790 with the shared padding */
@media (min-width:901px){.acc button{padding:clamp(10px,1.8svh,20px) 0}}

/* Filter chips (Case Studies): the same pill as Contact's topic choice, 40px, Mid Grey line, Ink when chosen */
.chip{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--mid);background:var(--paper);font:inherit;font-weight:500;font-size:14.5px;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{background:var(--pale)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (max-width:900px){.chip{height:44px}}
/* Placeholder bars for a template that waits for real content: track radius, never text that could pass for a story */
.pb{display:block;height:12px;border-radius:6px;background:rgba(16,42,67,.09)}
.pb+.pb{margin-top:10px}
.mar .pb,.dark .pb,.cl3 .pb{background:rgba(247,245,240,.2)}
/* text for screen readers only */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Insights cards (list and related): the article's image on top at 4:3, framed media radius, then date, reading time, title, excerpt */
.posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4svh,40px) clamp(24px,3vw,56px)}
.post{display:flex;flex-direction:column}
.post .pimg{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--ink)}
.post .meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:clamp(12px,2svh,16px);font-family:var(--mono);font-size:12.5px;color:var(--mid)}
.post h3{margin-top:8px;font-weight:600;font-size:clamp(16.5px,min(1.2vw,2.5svh),19px);line-height:1.3;letter-spacing:-.01em}
.post h3 a:hover{color:var(--marine)}
.post p{margin-top:6px;color:var(--mid);font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (max-width:900px){.posts{grid-template-columns:1fr}.post p{-webkit-line-clamp:3}}

/* focus at 3:1 on the grounds that carry no .dark or .mar class (final review 17-Oct-26) */
.ih .tx :focus-visible{outline-color:var(--violet-dark)}
.ab-x .w2 :focus-visible{outline-color:var(--paper)}
.film-ctrl:focus-visible,.bgctrl:focus-visible{outline-color:var(--paper)}

/* footer links on phone: tap targets at least 24px tall, WCAG 2.5.8 (planner review 17-Oct-26) */
@media (max-width:900px){
  .site-foot li a,.site-foot .bottom a{display:inline-flex;align-items:center;min-height:24px}
}


/* WordPress: keep the sticky header under the admin bar */
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}
/* at 600px and below the admin bar scrolls away, so the header sticks to the top */
@media (max-width:600px){.admin-bar .site-head{top:0}}
/* cookie choice: an Ink card bottom right, until the visitor accepts or declines (23-Oct-26) */
.oct-ck{position:fixed;z-index:60;right:16px;bottom:16px;left:16px;max-width:520px;margin-left:auto;display:grid;gap:14px;padding:20px 22px;border-radius:var(--r);background:var(--ink);color:var(--paper);box-shadow:0 14px 32px rgba(16,42,67,.24);font-size:15.5px;line-height:1.5}
.oct-ck[hidden]{display:none}
.oct-ck a{color:var(--paper);border-bottom:1px solid currentColor}
.oct-ck .oct-ck-b{display:flex;flex-wrap:wrap;gap:10px}
.oct-ck button{height:44px;padding:0 20px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;border:1px solid rgba(247,245,240,.5);background:none;color:var(--paper)}
.oct-ck button.yes{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.oct-ck button:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
/* Insights: the page links once there are more than 12 articles */
.pager{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:clamp(24px,4svh,40px);font-weight:600}
.pager .current{color:var(--mid)}