/* Themed case-study pages v4 (see ../DESIGN-PRINCIPLES.md). Inside the live site's header, footer, guidelines block and
   project cards, framed to the live column: 1095px at 1200-1459px, 74.48vw from 1460px, 60px gutters below 1200,
   40px below 1025, 5.5% on phones.
   - No boxes: films carry no frame, card or tint; a white-ground film sits straight on the page and fades into it.
   - Every film fits one screen: its width follows from the screen height (--fit) and its own ratio (--ar).
   - Copy sits on the column edges: full-width rows, or two columns that span both edges. No indents, no side labels. */
.cx-main{--ink:#050530;--ink2:#4B4B68;--bg:#fff;--line:#E6E6EA;--accent:#CFFF05;--on-accent:#050530;--dot:#F03B42;--dark:#050530;--on-dark:#fff;
  --f-head:"Plus Jakarta Sans",system-ui,sans-serif;--f-body:"Plus Jakarta Sans",system-ui,sans-serif;--h-w:700;--h-ls:-.03em;--h-lh:1.02;--h-case:none;
  --ease:cubic-bezier(.2,.8,.2,1);--fs:clamp(16px,1.2vw,22px);
  --g:clamp(32px,5vw,96px);                                   /* the gutter between two columns */
  --band:clamp(150px,12.5vw,250px);                             /* air between sections (the brand thread crosses here) */
  --air:clamp(24px,4vh,56px);--fit:calc(100vh - var(--hdr,76px) - 2 * var(--air));   /* the tallest a film may be */
  position:relative;display:block;background:var(--bg);color:var(--ink);font:400 var(--fs)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
.cx-main *{box-sizing:border-box}
.cx-main video{aspect-ratio:auto;display:block}
.cx-main img{display:block;max-width:100%}
.cx-main a{font-size:inherit;color:inherit}
.cx-main p{font-weight:inherit;margin:0}
.cx-main h1,.cx-main h2,.cx-main h3{line-height:inherit}
/* the live site's line: the header box's edges (5vw gutters up to 1460px, 7.8125vw above), not a narrower column */
.cx-wrap{position:relative;width:auto;margin-inline:5vw}
@media (min-width:1461px){.cx-wrap{margin-inline:7.8125vw}}
.cx-main .dot{color:var(--dot);font-style:normal}
.cx-main .rich p{margin:0 0 1em}.cx-main .rich p:last-child{margin-bottom:0}.cx-main .rich strong{font-weight:700}
html{scroll-padding-top:calc(var(--hdr,76px) + 24px)}
.cx-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:100000;pointer-events:none}
.cx-progress span{display:block;height:100%;width:0;background:var(--cx-accent,#CFFF05)}
/* the live single-project body pads for its header; our hero runs its ground up behind the header instead */
body.cx-page{padding-top:0!important}
.cx-dark-hero .fp_header:not(.scrolled) .fp_header-logo path:not(#Vector_24){fill:#fff}
.cx-dark-hero .fp_header:not(.scrolled) .ul_menu>li>a{color:#fff}
.cx-dark-hero .fp_header:not(.scrolled) .ul_menu>li>a svg path{stroke:#fff}
.cx-dark-hero .fp_header:not(.scrolled) .toggle_menu{box-shadow:0 0 0 1px rgba(255,255,255,.4)}

/* the two layouts every row uses */
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--g);align-items:center;margin-top:clamp(48px,5vw,96px)}
.split--text{grid-template-columns:minmax(0,1fr)}

/* buttons */
.cx-main .btn{display:inline-flex;align-items:center;gap:12px;padding:12px 12px 12px 22px;border-radius:999px;background:var(--dark);color:var(--on-dark);font:600 15px/1 var(--f-body);text-decoration:none;transition:transform .4s var(--ease)}
.cx-main .btn__i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);transition:transform .4s var(--ease)}
.cx-main .btn:hover .btn__i{transform:rotate(45deg)}

/* films: no frame; the width follows the screen height so the whole film is always in view */
.film{position:relative;margin:0 auto;width:min(100%,calc(var(--fit) * var(--ar)))}
.film video{width:100%;height:auto;aspect-ratio:var(--ar)}
.film--reel video{border-radius:clamp(14px,1.25vw,24px)}
/* white-ground films melt into the page: multiply drops their near-white ground, a soft edge fade removes the cut */
.film--bleed video{mix-blend-mode:multiply;   /* white-ground films melt into the page; a soft fade only where cards slide off the sides (round 6: never fade the top, where a site's logo sits) */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 1.6%,#000 98.4%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 1.6%,#000 98.4%,transparent);mask-composite:intersect}
.film--wide{margin-top:clamp(56px,5.5vw,104px)}
/* a film on a coloured ground is shown whole, with rounded corners (no fade, no blend) */
.film--solid video{border-radius:clamp(14px,1.25vw,24px)}

/* hero: the title, introduction and facts on the left; the right half is open white space (a theme may let its brand
   line flow through it; never a panel or box) */
.cx-hero{position:relative;background:var(--hero-bg,var(--bg));color:var(--hero-ink,var(--ink));padding-top:calc(var(--hdr,76px) + clamp(72px,8vw,160px))}
.cx-hero__grid{align-items:stretch}
.hero__head{min-width:0}
.cx-main .crumbs{display:flex;gap:10px;align-items:center;margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hero-ink2,var(--ink2))}
.cx-main .crumbs a{text-decoration:none;font-size:13px}
.cx-main .hero__title{margin:clamp(14px,1.4vw,24px) 0 clamp(20px,2vw,36px);font:var(--h-w) clamp(56px,6.4vw,128px)/var(--h-lh) var(--f-head);letter-spacing:var(--h-ls);text-transform:var(--h-case);text-wrap:balance}
.ln{display:block;overflow:hidden;padding-bottom:.1em}
.ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease) .1s}
.is-ready .ln>span{transform:none}
.hero__intro{font-size:clamp(18px,1.4vw,26px);line-height:1.45;max-width:40em}
.hero__intro p{margin:0}
.cx-main .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:clamp(24px,2.4vw,40px) 0 0}
.cx-main .facts div{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.cx-main .facts dt{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.cx-main .facts dd{margin:0;font-weight:600;font-size:clamp(15px,1.05vw,19px)}
.cx-main .facts dd a{text-decoration:none}
.cx-hero .facts div{border-top-color:var(--hero-line,var(--line))}.cx-hero .facts dt{color:var(--hero-ink2,var(--ink2))}
.hero__art{min-height:100%}
.reel-band{position:relative;padding-top:var(--band);background:linear-gradient(var(--hero-bg,var(--bg)) 50%,var(--bg) 50%)}
.hero__art{position:relative;min-width:0}

/* overview: the opening statement and the detail side by side, edge to edge */
.overview{padding-top:var(--band)}
.cx-main .lead{font:600 clamp(24px,2vw,38px)/1.3 var(--f-head);letter-spacing:-.012em;text-wrap:pretty}
.cx-main .lead p{margin:0 0 .6em}.cx-main .lead p:last-child{margin:0}.cx-main .lead strong{font-weight:inherit}
.overview__body{color:var(--ink2)}

/* chapters: the title on the left, its summary on the right */
.chapter{position:relative;padding-top:var(--band)}
.ch-head{align-items:end;row-gap:18px}
.cx-main .ch-title{margin:0;font:var(--h-w) clamp(44px,4.4vw,88px)/1.04 var(--f-head);letter-spacing:var(--h-ls);text-transform:var(--h-case);text-wrap:balance}
.ch-short{color:var(--ink2);padding-bottom:.35em}
.ch-short p{margin:0}
.split__text{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,1.6vw,28px);min-width:0}
.story__lede{font:500 clamp(22px,1.8vw,34px)/1.3 var(--f-head);letter-spacing:-.012em;text-wrap:pretty}
.story__lede p{margin:0}
.story__body{color:var(--ink2)}
.split>.film{margin:0;justify-self:end}
.cx-main .statement{position:relative;margin-top:clamp(72px,7vw,140px);max-width:min(100%,36em);font:500 clamp(24px,2.1vw,40px)/1.3 var(--f-head);letter-spacing:-.012em;text-wrap:pretty}
.cx-main>section:last-child,.cx-main>.chapter:last-child{padding-bottom:var(--band)}

/* story sections, Website Design and Branding (round 11: "always feels a little bit busy... cleaner, more premium"):
   the title and its button on the left, all the copy on the right, then one visual alone at the column width */
.story__head{align-items:start;row-gap:28px}
.story__title{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(26px,2.6vw,44px);min-width:0}
.story__copy{display:flex;flex-direction:column;gap:clamp(16px,1.4vw,24px);min-width:0;padding-top:clamp(6px,.8vw,14px)}
.story__film,.board{margin-top:clamp(56px,5.5vw,104px)}
/* round 12: one key component of the client's site, rebuilt live (their content, fonts and colours) and annotated with
   numbered notes from our copy; a marker sits on each part a note describes and a fine line runs to it from the note */
.showcase{margin-top:clamp(64px,6vw,120px)}
/* round 13: a heading that says what the feature does for the business, then the component; no numbered badges on it
   ("the one, the two and the three are a little bit distracting"): named notes beside it, each with a fine line to the
   component's edge, and pointing at a note outlines the part of the component it describes */
.showcase__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g);align-items:end;margin-bottom:clamp(22px,2.2vw,36px)}
.cx-main .showcase__title{margin:0;font:var(--h-w) clamp(26px,2.3vw,44px)/1.1 var(--f-head);letter-spacing:calc(var(--h-ls) / 2);text-transform:var(--h-case);text-wrap:balance}
.cx-main .showcase__intro{margin:0;color:var(--ink2);max-width:36em}
.showcase__body{position:relative;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:calc(var(--g) * 1.2);align-items:center}
.showcase__stage{position:relative;min-width:0;border-radius:clamp(12px,1vw,18px);overflow:hidden;box-shadow:0 1px 4px rgba(10,14,30,.07),0 26px 48px -32px rgba(10,14,30,.3);isolation:isolate}
.showcase__stage *{box-sizing:border-box}
.showcase__notes{position:relative;z-index:6;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(24px,2.4vw,40px)}
.note{position:relative;outline:none;cursor:default}
.note:hover .note__k,.note:focus-visible .note__k,.note.is-hot .note__k{color:var(--dot)}
.cx-main .note__k{display:block;margin:0 0 4px;font:600 clamp(15px,1.05vw,18px)/1.3 var(--f-body);color:var(--ink);transition:color .3s}
.cx-main .note p{margin:0;font-size:clamp(14px,.98vw,16.5px);line-height:1.55;color:var(--ink2)}
.showcase__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:5}
.showcase__lines path{fill:none;stroke:var(--dot);stroke-width:1;opacity:.45;transition:opacity .3s,stroke-width .3s}
.showcase__lines path.is-hot{opacity:1;stroke-width:1.5}
.showcase__lines circle{fill:var(--dot)}
/* the outline that appears on the component while its note is pointed at */
.hot{position:absolute;z-index:20;pointer-events:none;border-radius:8px;box-shadow:0 0 0 2px var(--dot),0 0 0 7px color-mix(in srgb,var(--dot) 18%,transparent);opacity:0;transition:opacity .25s}
.hot.on{opacity:1}
/* wide components (the recruitment pipelines): the component spans the column and the notes sit in a row beneath it */
.showcase--wide .showcase__body{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,2.6vw,44px)}
.showcase--wide .showcase__notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g)}
/* a site shown in one screen: its own ground, rounded, with a shadow that hugs it */
.film--screen video{border-radius:clamp(10px,.9vw,16px);box-shadow:0 1px 4px rgba(10,14,30,.07),0 26px 48px -32px rgba(10,14,30,.34)}
/* the brand board: three still tiles from the client's own elements (their line on their dark colour with their device,
   the logo on a palette colour, a second line of theirs), fitted to one screen */
.board{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,.8vw,14px);height:min(var(--fit),50vw)}
.board__tile{position:relative;overflow:hidden;border-radius:var(--b-r);isolation:isolate;min-width:0;min-height:0}
.board__poster{grid-row:1/3;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(28px,3.2vw,60px)}
.cx-main .board__line{position:relative;margin:0;font-size:clamp(38px,4.3vw,86px);line-height:1.04;letter-spacing:var(--h-ls);font-weight:var(--h-w);max-width:10.5em;text-wrap:balance}
.board__line em{font-style:normal;color:var(--board-em,inherit)}
.board__mark{position:relative}.board__mark svg{display:block;width:clamp(120px,11vw,200px);height:auto}
.board__device{position:absolute;inset:0;z-index:-1;pointer-events:none}
.board__logo{display:grid;place-items:center;padding:10%}
.board__logo svg{display:block;width:min(64%,340px);height:auto;max-height:100%}
.board__say{display:flex;align-items:flex-end;padding:clamp(24px,2.6vw,48px)}
.cx-main .board__say p{margin:0;font-size:clamp(22px,1.9vw,36px);line-height:1.2;max-width:15em;text-wrap:balance}
.board__rule{display:block;width:44px;height:3px;margin-bottom:clamp(14px,1.2vw,20px)}

/* questions: full-width numbered rows */
.faq{margin-top:clamp(64px,6vw,120px);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:clamp(48px,5vw,96px) minmax(0,1fr) auto;align-items:center;padding:clamp(20px,1.9vw,32px) 0;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq__n{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--ink2)}
.faq__q{font:500 clamp(19px,1.55vw,29px)/1.25 var(--f-head);letter-spacing:-.01em;padding-right:24px}
.faq__icon{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;transition:transform .45s var(--ease),background .3s,border-color .3s,color .3s}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__icon{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.faq__a>div{padding:0 calc(34px + 24px) clamp(22px,2.1vw,34px) clamp(48px,5vw,96px);color:var(--ink2);animation:cxFaq .5s var(--ease)}
@keyframes cxFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* the step-through (round 14: the earlier look, one step at a time beside its film, with round 12's held timing). The
   panel pins under the header; the track beneath gives each step --hold of scrolling (60% of a screen, as on SM Legal)
   with nothing moving, then the next step slides in where the last one was and its media wipes in. A row of marks shows
   where the reader is; each mark can be clicked. */
.cine{--vh:100vh;--hold:60vh;--air:clamp(32px,6vh,80px);--slide:calc(var(--vh) - var(--hdr,76px));--fit:calc(var(--slide) - 2 * var(--air));--scale:1;margin-top:clamp(28px,3vw,56px)}
@supports (height:100svh){.cine{--vh:100svh;--hold:60svh}}
.cine--identity{--scale:.9}   /* round 11: the brand media 10% smaller */
.cine__track{position:relative;height:calc(var(--slide) + var(--n) * var(--hold))}
.cine__pin{position:sticky;top:var(--hdr,76px);height:var(--slide);display:flex;align-items:center}
.cine__grid{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--g);align-items:center}
.cine__copy{position:relative;display:grid;min-width:0}
.cine__step{grid-area:1/1;align-self:center;opacity:0;transform:translateY(28px);pointer-events:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.cine__step.is-past{transform:translateY(-28px)}
.cine__step.is-on{opacity:1;transform:none;pointer-events:auto}
.cine__n{display:flex;align-items:baseline;gap:6px;margin:0 0 14px;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--ink2)}
.cine__n b{font:var(--h-w) clamp(30px,2.6vw,48px)/1 var(--f-head);letter-spacing:var(--h-ls);color:var(--ink)}
.cx-main .cine__step h3{margin:0 0 12px;font:var(--h-w) clamp(26px,2.3vw,44px)/1.1 var(--f-head);letter-spacing:calc(var(--h-ls) / 2);text-transform:var(--h-case)}
.cine__step .rich{color:var(--ink2);max-width:34em}
.cine__dots{grid-area:2/1;display:flex;gap:6px;margin-top:clamp(28px,3vw,48px)}
.cine__dot{position:relative;width:34px;height:20px;border:0;background:none;padding:0;cursor:pointer}
.cine__dot i{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line);transition:background .4s}
.cine__dot.is-on i,.cine__dot.is-past i{background:var(--dot)}
.cine__stage{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.cine__frame{position:relative;width:100%;height:calc(var(--fit) * var(--scale))}
.cine__film{position:absolute;inset:0;margin:0;container-type:size;background:var(--bg);clip-path:var(--cine-hide,inset(100% 0 0 0));transition:clip-path .45s cubic-bezier(.6,0,.2,1)}
.cine__film:first-child,.cine__film.is-shown{clip-path:var(--cine-show,inset(0 0 0 0))}
.cine__film--solid video,.cine__film--solid img{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;border-radius:clamp(14px,1.25vw,24px)}
.cine__film video,.cine__film img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 1.6%,#000 98.4%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 1.6%,#000 98.4%,transparent);mask-composite:intersect}

/* identity tabs (the other clients; GSD has none) */
.pan{display:flex;gap:clamp(8px,.8vw,14px);height:clamp(420px,38vw,720px);margin-top:clamp(40px,4vw,72px)}
.pan__item{position:relative;flex:0 0 clamp(64px,6.2vw,118px);min-width:0;border-radius:var(--r,20px);overflow:hidden;cursor:pointer;background:var(--tab1,var(--dark));color:var(--tab-ink,var(--on-dark));transition:flex-basis .8s var(--ease),background .4s;outline:none}
.pan__item:nth-child(2){background:var(--tab2,var(--accent));color:var(--tab2-ink,var(--on-accent))}
.pan__item:nth-child(3){background:var(--tab3,var(--ink2));color:var(--tab3-ink,var(--on-dark))}
.pan__item.is-active{flex:1 1 0;cursor:default;background:var(--bg);color:var(--ink);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:100%}
.pan__media{display:none;margin:0;height:100%;width:auto;aspect-ratio:var(--pan-ar,1056/1080);overflow:hidden}
.pan__item.is-active .pan__media{display:block}
.pan__media video,.pan__media img{width:100%;height:100%;object-fit:cover}
.pan__tab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0}
.pan__tab h3{margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font:var(--h-w) clamp(18px,1.4vw,26px)/1.3 var(--f-head);white-space:nowrap;max-height:calc(100% - 70px);overflow:hidden;text-overflow:ellipsis}
.pan__item.is-active .pan__tab{display:none}
.pan__n{font-size:13px;font-weight:600;letter-spacing:.1em}
.pan__text{display:none;padding:clamp(22px,2.4vw,44px);align-self:end;min-width:0;max-height:100%;overflow:auto}
.pan__item.is-active .pan__text{display:block;animation:cxFaq .6s var(--ease)}
.cx-main .pan__text h3{margin:8px 0 12px;font:var(--h-w) clamp(24px,2vw,38px)/1.1 var(--f-head)}
.pan__text .rich{color:var(--ink2);font-size:clamp(15px,1.05vw,19px)}

/* testimonial (approved as it is) */
.quote{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);padding-block:clamp(88px,9vw,168px);margin-top:var(--band)}
.quote__mark{width:48px;color:var(--accent);margin-bottom:28px}
.cx-main .quote blockquote{margin:0;font:500 clamp(24px,2.3vw,42px)/1.3 var(--f-head);letter-spacing:-.015em;max-width:min(100%,32em)}
.quote blockquote p{margin:0}
.quote__who{display:flex;align-items:center;gap:16px;margin-top:40px;font-weight:600}
.quote__who img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#fff}
.quote__who p{margin:0;line-height:1.35}

/* chapter bar */
.cx-chapters{position:fixed;left:50%;bottom:22px;z-index:9000;display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--cx-dark,#050530);color:var(--cx-on-dark,#fff);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.5);transform:translate(-50%,140%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none}
.cx-chapters::-webkit-scrollbar{display:none}
.cx-chapters.is-on{transform:translate(-50%,0);opacity:1}
.cx-chapters a{flex:none;padding:9px 16px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;color:inherit;transition:background .3s,color .3s}
.cx-chapters a.is-active{background:var(--cx-accent,#CFFF05);color:var(--cx-on-accent,#050530)}

/* reveal */
/* reveals fade only (round 9: a slide-up made entering content move faster than the scroll, which read as the page speeding up) */
[data-reveal]{opacity:0;transition:opacity .7s ease;transition-delay:calc(var(--i,0)*60ms)}
[data-reveal].is-in{opacity:1}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.ln>span{transform:none;transition:none}}
html[data-shot] .cx-chapters,html[data-shot] .cx-progress{display:none}

@media (max-width:900px){
  .row2,.split,.cine__grid{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .hero__art{display:none}
  .split>.film{justify-self:stretch;width:100%}
  .showcase__head,.showcase__body{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .showcase__body{row-gap:28px}
  .showcase--wide .showcase__notes{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .showcase__lines{display:none}
  .board{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto}
  .board__poster{grid-row:auto;aspect-ratio:4/5}
  .board__logo{aspect-ratio:16/10}
  .board__say{min-height:200px}
  .cx-main{--band:clamp(72px,16vw,120px)}
  .faq summary{grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px}
  .faq__a>div{padding-left:0;padding-right:0}
  .cine__grid{row-gap:0}
  /* phones: the media on top of the pinned panel, the step beneath it */
  .cine{--stageH:min(40vh,400px);--hold:55vh}
  .cine__pin{align-items:flex-start;padding-top:12px}
  .cine__grid{row-gap:18px;align-items:start}
  .cine__stage{order:-1;justify-content:center}
  .cine__frame{height:calc(var(--stageH) * var(--scale))}
  .cx-main .cine__step h3{font-size:21px}
  .cine__n b{font-size:26px}
  .cine__step .rich{font-size:15px}
  .pan{flex-direction:column;height:auto}
  .pan__item{flex:none;height:64px}
  .pan__item.is-active{flex:none;height:auto;display:block}
  .pan__item.is-active .pan__media{width:100%;height:auto}
  .pan__text{max-height:none}
  .pan__tab{flex-direction:row;padding:0 20px}
  .pan__tab h3{writing-mode:horizontal-tb;transform:none}
  .cx-chapters{bottom:12px}.cx-chapters a{padding:8px 13px;font-size:13px}
}

/* 27: only real controls look clickable (the live guidelines block's video overlay shows a pointer) */
#guidelines .video-overlay,#guidelines .bg-video{cursor:default}
/* 25: text never clipped: a title too wide for its box is scaled down to fit (fitTitles in base4.js) */
/* 28: type specimens are shown as a still, never faded to blank */
.cine__film img.still{width:100%;height:100%;object-fit:contain}

/* round 14: a step's media keeps its ratio and is centred in the stage (films, the type still, guideline slides, the board) */
.cine__film .m{position:absolute;inset:0;margin:auto;width:min(100cqw,calc(100cqh * var(--mar)));height:auto;aspect-ratio:var(--mar);container-type:inline-size}
.cine__film .m>video,.cine__film .m>img{width:100%;height:100%}
.slides{position:relative;width:100%;height:100%}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:clamp(8px,.8vw,14px);opacity:0;transition:opacity .9s ease;mix-blend-mode:normal!important;-webkit-mask-image:none!important;mask-image:none!important}
.slides img.is-on{opacity:1}
.cine__film .board{height:100%;margin:0;gap:1.4cqw}
.cine__film .board__poster{padding:4.4cqw}.cine__film .board__say{padding:3.6cqw}
.cx-main .cine__film .board__line{font-size:5.6cqw}.cx-main .cine__film .board__say p{font-size:2.5cqw}
.cine__film .board__mark svg{width:15cqw}.cine__film .board__rule{width:5cqw;height:.4cqw;margin-bottom:1.6cqw}
.cine__film .board__tile video,.cine__film .board__tile svg{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.cine__film .board video{width:100%;height:100%;object-fit:cover}

/* round 14: chapters. Each opens with its number and name, a title, a lede of about three lines and a short line of
   context, then tells its story; no title-left, copy-right split ("feels a little bit discombobulated") */
.chap{padding-top:var(--band)}
.chap__head{max-width:min(100%,58em)}
.cx-main .chap__label{display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,1.8vw,28px);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.chap__label b{font:var(--h-w) 13px/1 var(--f-body);color:var(--dot);letter-spacing:.06em}
.chap__label::after{content:"";flex:0 0 clamp(60px,8vw,140px);height:1px;background:var(--line)}
.chap__lede{margin-top:clamp(20px,2vw,32px);font:500 clamp(22px,1.8vw,34px)/1.32 var(--f-head);letter-spacing:-.012em;max-width:30em;text-wrap:pretty}
.chap__lede p{margin:0}
.chap__body{margin-top:clamp(16px,1.4vw,24px);color:var(--ink2);max-width:40em}
.cx-main .chap__link{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,1.6vw,26px);font-size:15px;font-weight:600;text-decoration:none}
.chap__link .btn__i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);transition:transform .4s var(--ease)}
.chap__link:hover .btn__i{transform:rotate(45deg)}
.chap__sub{margin-top:clamp(72px,7vw,140px);max-width:44em}
.cx-main .chap__sub h3{margin:0 0 10px;font:var(--h-w) clamp(24px,2vw,38px)/1.12 var(--f-head);letter-spacing:calc(var(--h-ls) / 2);text-transform:var(--h-case)}
.cx-main .chap__sub p{margin:0;color:var(--ink2)}
.chap__sub--biz+.showcase{margin-top:clamp(36px,3.6vw,64px)}
.chap--q{padding-top:var(--band)}
.chap--q .faq{margin-top:clamp(40px,4vw,72px)}
@media (max-width:900px){
  .cine__copy{order:2}
  .cine__dots{margin-top:16px}
  .chap__lede{font-size:21px}
}

/* ===== round 15 (14 Oct 20:37): website first, the brand as separate moments, short copy, no decorative lines ===== */
.cx-main .chap__title{font-size:clamp(56px,6.6vw,128px);line-height:.98}
.chap__head{max-width:none}
.chap__lede{max-width:24em;margin-top:clamp(22px,2.2vw,36px)}
.chap--web .showcase:first-of-type{margin-top:clamp(64px,6vw,112px)}
.chap--web .chap__sub{margin-top:clamp(96px,9vw,170px)}
/* a brand moment: one element at a time, each with its own composition and a short caption */
.moment{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--g);align-items:center;margin-top:clamp(96px,9vw,180px)}
.moment--type{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.moment--colour{display:block}
.moment__text{min-width:0;max-width:30em}
.cx-main .moment__text h3{margin:0 0 14px;font:var(--h-w) clamp(30px,2.8vw,54px)/1.05 var(--f-head);letter-spacing:calc(var(--h-ls) / 2);text-transform:var(--h-case)}
.moment__text .rich{color:var(--ink2)}
.moment__text--wide{max-width:36em;margin-bottom:clamp(36px,3.4vw,60px)}
.moment--logo .moment__media{justify-self:end;margin:0}
/* the typefaces, set live in the brand's own fonts: click the name and type */
.ts{display:flex;flex-direction:column;gap:clamp(28px,3vw,52px);min-width:0}
.cx-main .ts__k{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.cx-main .ts__big{margin:0;font-family:var(--tf);font-size:clamp(48px,6vw,112px);line-height:1;letter-spacing:-.01em;color:var(--ink);outline:none;caret-color:var(--dot);overflow-wrap:anywhere;cursor:text}
.cx-main .ts__w{margin:10px 0 0;font-family:var(--tf);font-size:clamp(15px,1.1vw,19px);color:var(--ink2)}
.cx-main .ts__hint{margin:0;font-size:13px;color:var(--ink2);opacity:.75}
/* the colours, edge to edge: point at one (or tap it) and it opens */
.pal{display:flex;height:clamp(300px,56vh,560px);margin:clamp(36px,3.4vw,60px) calc(50% - 50vw) 0}
.pal__band{all:unset;box-sizing:border-box;position:relative;flex:1 1 0;min-width:0;background:var(--c);color:var(--ink);cursor:pointer;transition:flex-grow .7s cubic-bezier(.2,.8,.2,1)}
.pal__band:hover,.pal__band:focus-visible,.pal__band.is-open{flex-grow:2.6}
.pal__name{position:absolute;left:clamp(14px,1.6vw,28px);bottom:clamp(44px,4vw,70px);font:var(--h-w) clamp(18px,1.6vw,30px)/1.1 var(--f-head);white-space:nowrap;transition:font-size .5s}
.pal__band:hover .pal__name,.pal__band.is-open .pal__name{font-size:clamp(24px,2.4vw,44px)}
.pal__hex{position:absolute;left:clamp(14px,1.6vw,28px);bottom:clamp(18px,1.8vw,32px);font:500 13px/1 var(--f-body);letter-spacing:.06em;opacity:.8}
.chap--use{padding-top:var(--band)}
@media (max-width:900px){
  .moment,.moment--type{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .moment--type .moment__text{order:-1}
  .moment--logo .moment__media{justify-self:stretch}
  .pal{flex-direction:column;height:auto}
  .pal__band{flex:none;height:76px}.pal__band:hover,.pal__band.is-open{flex-grow:0;height:120px}
  .pal__name{bottom:auto;top:16px}.pal__hex{bottom:16px}
}
.ts__row+.ts__row .ts__big{font-size:clamp(30px,3.2vw,60px)}
.pal__band{text-shadow:none}

/* ===== round 17 (14 Oct 23:05): full-size scenes, fixed scrolling between them ===== */
/* a chapter opens with its title on one line and the text stretched out beneath it, with a real button */
.ccard{position:relative;margin-top:var(--band);background:var(--bg)}
.cx-main .ccard__title{font-size:clamp(64px,8.4vw,164px);line-height:.95;white-space:nowrap}
.ccard__row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--g);align-items:end;margin-top:clamp(24px,2.4vw,40px)}
.ccard__lede{font:500 clamp(20px,1.6vw,30px)/1.4 var(--f-head);letter-spacing:-.01em;max-width:46em;text-wrap:pretty}
.ccard__lede a{text-decoration-thickness:1px;text-underline-offset:3px}
.cx-main .ccard__btn{padding:16px 16px 16px 26px;font-size:16px;white-space:nowrap}
.cx-main-chapter{background:var(--bg)}
/* a scene: pinned under the header; the title on the left and the annotation on the right sit above the thing itself,
   which spans the column at near full size; a fine line runs from the annotation down to the outlined part */
.scene{--vh:100vh;--hold:60vh;--air:clamp(20px,3vh,40px);--slide:calc(var(--vh) - var(--hdr,76px));margin-top:clamp(40px,4vw,72px)}
@supports (height:100svh){.scene{--vh:100svh;--hold:60svh}}
.scene__track{position:relative;height:calc(var(--slide) + var(--n) * var(--hold))}
.scene__pin{position:sticky;top:var(--hdr,76px);height:var(--slide);display:flex;align-items:center;isolation:isolate}
.scene__grid{position:relative;width:100%;height:calc(var(--slide) - 2 * var(--air));display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:clamp(18px,2.4vh,34px)}
.scene__copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--g);align-items:end;min-width:0}
.cx-main .scene__count{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink2)}
.scene__count b{color:var(--dot);font-weight:600}
.cx-main .scene__title{margin:0;font:var(--h-w) clamp(30px,2.8vw,54px)/1.04 var(--f-head);letter-spacing:calc(var(--h-ls) / 1.5);text-transform:var(--h-case);text-wrap:balance}
.scene__steps{display:grid;align-self:end;min-width:0}
.scene__step{grid-area:1/1;align-self:end;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.scene__step.is-past{transform:translateY(-16px)}
.scene__step.is-on{opacity:1;transform:none;pointer-events:auto}
.scene__lede,.scene__p{color:var(--ink2);font-size:clamp(15px,1.1vw,19px);line-height:1.55;max-width:40em}
.scene__lede p,.scene__p p{margin:0 0 .6em}.scene__lede p:last-child,.scene__p p:last-child{margin:0}
.cx-main .scene__k{margin:0 0 8px;font:var(--h-w) clamp(22px,1.8vw,34px)/1.12 var(--f-head);letter-spacing:calc(var(--h-ls) / 2);text-transform:var(--h-case);color:var(--ink)}
.scene__stage{position:relative;min-height:0;min-width:0}
.scene__fit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:50% 50%}
.scene__fit>.cmp{position:relative;border-radius:clamp(12px,1vw,18px);overflow:hidden;box-shadow:0 1px 4px rgba(10,14,30,.07),0 30px 60px -36px rgba(10,14,30,.34);isolation:isolate}
.scene__fit>.cmp *{box-sizing:border-box}
.scene .hot{position:absolute;z-index:30;pointer-events:none;border-radius:10px;box-shadow:0 0 0 2px var(--dot),0 0 0 8px color-mix(in srgb,var(--dot) 18%,transparent);opacity:0;transition:opacity .3s,left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.scene .hot.on{opacity:1}
.scene__link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:31}
.scene__link path{fill:none;stroke:var(--dot);stroke-width:1.2;opacity:0;transition:opacity .3s}
.scene__link circle{fill:var(--dot);opacity:0;transition:opacity .3s}
.scene.has-link .scene__link path{opacity:.75}.scene.has-link .scene__link circle{opacity:1}
/* brand stages sit straight on the page */
.scene--bare .scene__fit .film{width:100%;margin:0}
.ts{display:flex;flex-direction:column;gap:clamp(24px,3vh,44px)}
.cx-main .scene--bare .ts__big{font-size:clamp(64px,8vw,150px)}
.cx-main .scene--bare .ts__row+.ts__row .ts__big{font-size:clamp(36px,4.2vw,80px)}
/* the colour: the whole screen takes on the brand's colours as you step through; the chips are its paint cards */
.scene--colour .scene__pin::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:var(--flood,var(--bg));transition:background-color .7s ease}
.scene--colour .scene__pin{color:var(--fink,var(--ink))}
.scene--colour .scene__title,.scene--colour .scene__k{color:var(--fink,var(--ink))}
.scene--colour .scene__lede,.scene--colour .scene__p,.scene--colour .scene__count{color:var(--fink,var(--ink2));opacity:.85}
.scene--colour .scene__count b{color:inherit}
.chips{display:flex;align-items:flex-end;gap:clamp(12px,1.4vw,24px);height:100%}
.chip{all:unset;box-sizing:border-box;position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;background:#fff;border-radius:6px;padding:8px 8px 14px;cursor:copy;
  box-shadow:0 2px 6px rgba(0,0,0,.08),0 24px 40px -26px rgba(0,0,0,.45);transform:translateY(0);transition:transform .5s var(--ease)}
.chip__c{display:block;height:clamp(180px,30vh,320px);border-radius:3px;background:var(--c)}
.chip__l{display:flex;flex-direction:column;gap:2px;padding:12px 6px 0;color:#14171A}
.chip__l b{font:var(--h-w) clamp(15px,1.15vw,20px)/1.15 var(--f-head)}
.chip__l i{font:500 11.5px/1.4 var(--f-body);font-style:normal;letter-spacing:.04em;color:#5b6168}
.chip__copy{position:absolute;right:14px;top:14px;font:600 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.chip:hover .chip__copy,.chip.is-copied .chip__copy{opacity:1}
.chip:hover,.chip.is-on{transform:translateY(-18px)}
/* the brand in use: the delivered templates and posts */
.apps{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3.6fr);gap:clamp(16px,1.6vw,28px);align-items:center}
.apps img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08),0 30px 60px -36px rgba(0,0,0,.45)}
.apps__deck{margin:0}
.apps__posts{display:flex;flex-direction:column;gap:clamp(16px,1.6vw,28px)}
/* the design step-through's opening step */
.cine__step--intro .scene__title{margin-bottom:14px}
@media (max-width:900px){
  .cx-main .ccard__title{white-space:normal;font-size:clamp(52px,14vw,80px)}
  .ccard__row{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .scene__track{height:auto}.scene__pin{position:static;height:auto;display:block}
  .scene__grid{height:auto;grid-template-rows:none;row-gap:22px}
  .scene__copy,.scene__steps{display:contents}
  .scene__head{order:0}.scene__step{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
  .scene__step[data-i="0"]{order:1}.scene__stage{order:2}.scene__step:not([data-i="0"]){order:3}
  .scene__count{display:none}
  .scene__stage{height:auto}
  .scene__fit{position:static;width:auto!important;transform:none}
  .scene__link,.scene .hot{display:none}
  .scene--colour .scene__pin::before{display:none}.scene--colour .scene__pin{color:inherit}
  .scene--colour .scene__title,.scene--colour .scene__k,.scene--colour .scene__lede,.scene--colour .scene__p{color:inherit}
  .chips{flex-wrap:wrap;height:auto}.chip{flex:1 1 40%}.chip__c{height:110px}
  .apps{grid-template-columns:minmax(0,1fr)}.apps__posts{flex-direction:row}.apps__posts img{width:calc(50% - 8px)}
  .cx-main .scene__k{font-size:24px}
}

/* ===== round 18 (15 Oct 08:27): each chapter is one pinned story ===== */
.cx-wrap{--gut:5vw}@media (min-width:1461px){.cx-wrap{--gut:7.8125vw}}
.story{--vh:100vh;--hold:60vh;--slide:calc(var(--vh) - var(--hdr,76px));position:relative;margin-top:var(--band)}
@supports (height:100svh){.story{--vh:100svh;--hold:60svh}}
.story__track{position:relative;height:calc(var(--slide) + var(--n) * var(--hold))}
.story__pin{position:sticky;top:var(--hdr,76px);height:var(--slide);background:var(--bg)}
/* the chapter's title card: framed in the brand's dark colour, edge to edge; it lifts away on the first scroll */
.story__open{position:absolute;top:calc(-1 * var(--hdr,76px));bottom:0;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));z-index:20;background:var(--dark);color:var(--on-dark);
  display:flex;align-items:center;padding:calc(var(--hdr,76px) + 4vh) var(--gut) 8vh;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.story.is-open-gone .story__open{transform:translateY(-102%)}
.story__open-in{max-width:min(100%,60em)}
.cx-main .story__open-title{margin:0;color:var(--on-dark);font-size:clamp(72px,9vw,176px);line-height:.95}
.story__open-title .dot{color:var(--accent)}
.story__open-lede{margin-top:clamp(22px,2.4vw,40px);font:500 clamp(20px,1.7vw,32px)/1.4 var(--f-head);letter-spacing:-.01em;max-width:34em;opacity:.92;text-wrap:pretty}
.story__open-lede a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
.cx-main .story__open .btn{margin-top:clamp(28px,3vw,48px);padding:16px 16px 16px 26px;font-size:16px;background:var(--on-dark);color:var(--dark)}
.story__open .btn__i{background:var(--accent);color:var(--on-accent)}
/* scenes sit in layers; one is shown at a time */
.story__scenes{position:absolute;inset:0}
.sc{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto minmax(0,1fr);column-gap:var(--g);row-gap:clamp(18px,2.6vh,32px);
  padding:clamp(32px,6vh,64px) 0 clamp(92px,13vh,118px);opacity:0;visibility:hidden;transform:translateY(32px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s .55s}
.sc.is-past{transform:translateY(-32px)}
.sc.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease) .1s,transform .55s var(--ease) .1s,visibility 0s}
.sc__head{min-width:0;align-self:start}
.cx-main .sc__count{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink2)}
.sc__count b{color:var(--dot);font-weight:600}
.cx-main .sc__title{margin:0;font:var(--h-w) clamp(32px,3vw,58px)/1.04 var(--f-head);letter-spacing:calc(var(--h-ls) / 1.5);text-transform:var(--h-case);text-wrap:balance}
.cx-main .sc__sub{margin:12px 0 0;color:var(--ink2);font-size:clamp(14px,1vw,17px);line-height:1.5;max-width:30em}
.sc__notes{display:grid;min-width:0;align-self:start}
.sc__note{grid-area:1/1;opacity:0;transition:opacity .2s ease}
.sc__note.is-on{opacity:1;transition:opacity .35s ease .22s}
.cx-main .sc__k{margin:0 0 8px;font:var(--h-w) clamp(22px,1.8vw,34px)/1.15 var(--f-head);letter-spacing:calc(var(--h-ls) / 2);text-transform:var(--h-case);color:var(--ink)}
/* the label is marked in the highlight colour: it pairs the note with the part outlined on the component */
.sc__k span{background:linear-gradient(transparent 58%,var(--mk,color-mix(in srgb,var(--dot) 42%,transparent)) 58%);padding:0 .08em}
.t-rl .story{--mk:#ABF9FF}.t-vb .story{--mk:rgba(125,55,75,.24)}
.sc__p{color:var(--ink2);font-size:clamp(15px,1.12vw,19px);line-height:1.55;max-width:38em}
.sc__p p{margin:0 0 .6em}.sc__p p:last-child{margin:0}
.sc__stage{grid-column:1/-1;position:relative;min-height:0;min-width:0}
.sc__fit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:50% 50%}
.sc__fit>.cmp{position:relative;border-radius:clamp(12px,1vw,18px);overflow:hidden;box-shadow:0 1px 4px rgba(10,14,30,.07),0 30px 60px -36px rgba(10,14,30,.34);isolation:isolate}
.sc__fit>.cmp *{box-sizing:border-box}
.story .hot{position:absolute;z-index:30;pointer-events:none;border-radius:10px;box-shadow:0 0 0 2px var(--dot),0 0 0 8px color-mix(in srgb,var(--dot) 22%,transparent);opacity:0;
  transition:opacity .3s,left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.story .hot.on{opacity:1}
/* a quiet cue that the component is live: a soft pulse on its main control while the scene opens */
.story .try{position:absolute;z-index:31;pointer-events:none;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .4s}
.story .try.on{opacity:1}
.try__ring{width:14px;height:14px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 0 color-mix(in srgb,var(--dot) 60%,transparent);animation:tryPulse 1.8s ease-out infinite}
.try__t{font:600 12px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--bg);padding:6px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
@keyframes tryPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dot) 55%,transparent)}100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--dot) 0%,transparent)}}
/* frames (How it was built, the brand pages): one at a time, cross-fading in place, whole and centred */
.sc__frame{position:absolute;inset:0;margin:0;container-type:size;opacity:0;transition:opacity .5s ease}
.sc__frame.is-on{opacity:1}
.sc__frame .m{position:absolute;inset:0;margin:auto;width:min(100cqw,calc(100cqh * var(--mar)));height:auto;aspect-ratio:var(--mar)}
.sc__frame .m>video,.sc__frame .m>img{display:block;width:100%;height:100%;object-fit:contain}
.f--bleed .m>video,.f--bleed .m>img{mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 1.6%,#000 98.4%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 1.6%,#000 98.4%,transparent);mask-composite:intersect}
.f--solid .m>video,.f--solid .m>img{border-radius:clamp(14px,1.25vw,24px)}
.f--slide .m>img{filter:drop-shadow(0 18px 30px rgba(10,14,30,.16))}
.f--page .m>img{border-radius:clamp(12px,1.1vw,22px);box-shadow:0 1px 4px rgba(10,14,30,.07),0 30px 60px -36px rgba(10,14,30,.34)}
@media (max-width:900px){
  .story__track{height:auto}.story__pin{position:static;height:auto;background:none}
  .story__open{position:relative;top:auto;left:calc(-1 * var(--gut));right:auto;width:100vw;padding:56px var(--gut);transform:none!important}
  .cx-main .story__open-title{font-size:clamp(52px,14vw,80px)}
  .story__scenes{position:static}
  .sc{position:static;display:flex;flex-direction:column;gap:20px;padding:56px 0 0;opacity:1;visibility:visible;transform:none}
  .sc__head,.sc__note,.sc__stage,.sc__frame{order:var(--o)}
  .sc__notes,.sc__stage--frames{display:contents}
  .sc__note{opacity:1;grid-area:auto}
  .sc__stage--cmp{position:static}.sc__fit{position:static;transform:none;width:auto!important}
  .sc__frame{position:static;opacity:1;container-type:normal}.sc__frame .m{position:static;width:100%;height:auto}
  .story .hot,.story .try{display:none}
  .cx-main .sc__k{font-size:24px}
}
.story .try.try--left{flex-direction:row-reverse}

/* ===== round 19 (15 Oct 09:48): immersive scenes. "It doesn't feel immersive... a bigger drop out of the background...
   the text so disjointed... use the full page": every scene fills the screen on its own ground, edge to edge; the copy
   sits in one place (left, centred on the screen) beside the thing itself (right, as large as the screen allows); the
   part a note describes stays lit while the rest dims (no highlighter); the title card carries the client's device. ===== */
.sc{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:minmax(0,1fr);column-gap:clamp(32px,4.2vw,88px);row-gap:0;align-items:center;isolation:isolate;
  padding:clamp(26px,4.6vh,52px) 0 clamp(92px,12.5vh,116px);transform:none!important;color:var(--sc-ink);--sc-ink:var(--ink);--sc-ink2:var(--ink2);
  transition:opacity .6s var(--ease),visibility 0s .6s}
.sc.is-on{transition:opacity .6s var(--ease) .05s,visibility 0s}
.sc--dark{--sc-ink:#FBFAF8;--sc-ink2:rgba(251,250,248,.74)}
.sc__frame{background:var(--sc-c,var(--bg))}
.sc__ground{position:absolute;z-index:-1;top:calc(-1 * var(--hdr,76px));bottom:0;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));background:var(--sc-bg,var(--bg));overflow:hidden;transition:background-color .6s var(--ease)}
.sc__copy{grid-row:1;grid-column:1;align-self:center;display:flex;flex-direction:column;gap:clamp(18px,2.6vh,30px);min-width:0;max-width:30em}
.sc__head,.sc__notes{align-self:auto}
.cx-main .sc__count{color:var(--sc-ink2)}
.sc--dark .sc__count b{color:var(--sc-ink)}
.cx-main .sc__title{color:var(--sc-ink);font-size:clamp(30px,2.75vw,54px)}
.cx-main .sc__sub{color:var(--sc-ink2)}
.cx-main .sc__k{color:var(--sc-ink);font-size:clamp(20px,1.55vw,30px)}
.sc__k span{background:none;padding:0}
.sc__p{color:var(--sc-ink2)}
.sc__p a{color:inherit}
.sc__stage{grid-row:1;grid-column:2;align-self:stretch;height:100%}
.sc--bleed .sc__stage{margin-right:calc(-1 * var(--gut))}
/* the component sits straight on its ground: no card, no shadow; scaled down only if it is too tall */
.sc__fit>.cmp{background:transparent!important;box-shadow:none;border-radius:0;overflow:visible}
.sc--bleed .sc__fit{left:0;transform:translateY(-50%) scale(var(--s,1));transform-origin:0 50%}
/* the client's device, faint, off-centre behind a component (Gibraltar's contours, Green Acres' leaves) */
.st-device{pointer-events:none}
.st-device svg{display:block;overflow:visible}
.st-device--bg{position:absolute;top:-6%;bottom:-6%;right:-4%;width:62%;opacity:.07}
.sc--dark .st-device--bg{opacity:.1}
/* the spotlight: everything outside the part a note describes dims to the ground's colour */
.sc__spot{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:30}
.story .sc__spot .hot{position:absolute;border-radius:14px;box-shadow:0 0 0 200vmax color-mix(in srgb,var(--sc-c,var(--bg)) 66%,transparent);opacity:0;
  transition:opacity .45s var(--ease),left .45s var(--ease),top .45s var(--ease),width .45s var(--ease),height .45s var(--ease)}
.story .sc__spot .hot.on{opacity:1}
/* the hover prompt ("they should be prompted to hover over this... maybe a little hover animation"): a pointer glides to
   the control, presses, and the component answers; it stops once the visitor has a go */
.ghost{position:absolute;left:0;top:0;z-index:33;pointer-events:none;opacity:0;display:flex;align-items:flex-start;gap:6px;
  transition:opacity .35s ease,transform 1.05s cubic-bezier(.45,0,.2,1)}
.ghost.on{opacity:1}
.ghost__p{width:24px;height:24px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));transition:transform .18s ease}
.ghost__p path{fill:#fff;stroke:#0B0C0B;stroke-width:1.3;stroke-linejoin:round}
.ghost.press .ghost__p{transform:scale(.84)}
.ghost__r{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;opacity:0;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.ghost.press .ghost__r{animation:ghostRing .7s ease-out}
@keyframes ghostRing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
.ghost__t{margin-top:20px;font:600 11.5px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#fff;background:rgba(11,12,11,.82);padding:7px 10px;border-radius:999px}
.sc--dark .ghost__t{color:#0B0C0B;background:#FBFAF8}
/* the title card: the brand's dark ground, edge to edge, with the client's own device drawn large across its right side */
.story__open{overflow:hidden}
.story__open-in{position:relative;z-index:1}
.story__open .st-device{position:absolute;z-index:0;top:0;bottom:0;right:0;width:33%}
.story__open .st-device svg{left:0;right:auto}
.story__open .st-device[data-dev="line"] svg{left:4%}
.story__open .st-device[data-dev="satin"]{left:0;width:auto}
.st-device[data-dev="satin"] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.5;mix-blend-mode:soft-light}
.st-device[data-dev="satin"]::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 18%,color-mix(in srgb,var(--dark) 40%,transparent) 70%,transparent)}
.st-device[data-dev="rings"] svg{position:absolute;top:50%;right:-16%;height:128%;width:auto;aspect-ratio:244/245;transform:translateY(-50%)}
.st-device[data-dev="rings"] path{fill:var(--dev,#9BBFBA);transform-box:view-box;transform-origin:50% 50%;opacity:calc(var(--o,.5) * var(--in,1));transform:scale(calc(.72 + .28 * var(--in,1)));
  transition:opacity 1.2s var(--ease) calc(var(--i,0) * 70ms),transform 1.6s var(--ease) calc(var(--i,0) * 70ms)}
.st-device[data-dev="rings"]:not(.is-in){--in:0}
.st-device[data-dev="pattern"] svg{position:absolute;inset:0;width:100%;height:100%}
.st-device[data-dev="pattern"] g{fill:var(--dev,#ABF9FF);opacity:.08;transition:opacity .9s ease}
.story__open .st-device[data-dev="pattern"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.story__open .st-device[data-dev="pattern"] g{animation:rlRipple 5.5s ease-in-out infinite;animation-delay:var(--d)}
.st-device[data-dev="circles"] svg,.st-device[data-dev="line"] svg,.st-device[data-dev="chevron"] svg{position:absolute;top:50%;right:-10%;height:118%;width:auto;transform:translateY(-50%)}
.st-device[data-dev="circles"] circle{fill:none;stroke:var(--dev,#62A36B);stroke-width:.45;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--in,1));transition:stroke-dashoffset 2s var(--ease) calc(var(--i,0) * 160ms)}
.st-device[data-dev="circles"]:not(.is-in){--in:0}
.st-device[data-dev="line"] path{fill:none;stroke:var(--dev,#E5C066);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--in,1));transition:stroke-dashoffset 2.6s var(--ease) .2s}
.st-device[data-dev="line"]:not(.is-in){--in:0}
.st-device[data-dev="chevron"] polygon{fill:var(--dev,#61A4E8);opacity:calc(var(--o,.5) * var(--in,1));transform:translateX(calc((1 - var(--in,1)) * -14%));transition:opacity 1.2s var(--ease) calc(var(--i,0) * 200ms),transform 1.4s var(--ease) calc(var(--i,0) * 200ms)}
.st-device[data-dev="chevron"]:not(.is-in){--in:0}
.st-device--bg[data-dev="line"] path{stroke-width:7}
/* ---- the brand, live (brandparts.py) ---- */
.sc__stage--live{position:relative}
.bp{position:absolute;inset:0;color:var(--sc-ink)}
.bp [data-s]{opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.bp [data-s].is-s{opacity:1;visibility:visible;transition:opacity .5s var(--ease) .1s,visibility 0s}
.bp [data-when]{opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.bp [data-when].is-v{opacity:1;visibility:visible;transition:opacity .45s var(--ease) .12s,visibility 0s}
.bp-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px}
.bp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cx-main .bp-chips button{display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sc-ink) 28%,transparent);
  background:transparent;color:var(--sc-ink);font:500 13px/1.1 var(--f-body);letter-spacing:.01em;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.cx-main .bp-chips button:hover{border-color:var(--sc-ink)}
.cx-main .bp-chips button.on{background:var(--sc-ink);color:var(--sc-c,var(--bg));border-color:var(--sc-ink)}
.bp-chips i{display:block;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc-ink) 22%,transparent)}
.cx-main .bp-chips--sw button{padding:5px;border-color:transparent}
.cx-main .bp-chips--sw button.on{background:transparent;border-color:var(--sc-ink)}
.bp-chips--sw span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the mark */
.bp-film{position:absolute;inset:0 0 70px;margin:0;container-type:size;background:var(--sc-c,var(--bg))}
.bp-film .m{position:absolute;inset:0;margin:auto;width:min(100cqw,calc(100cqh * var(--mar)));aspect-ratio:var(--mar)}
.bp-film video{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent);mask-image:radial-gradient(closest-side,#000 82%,transparent)}
.bp-logo{position:absolute;inset:0 0 70px}
.bp-v{position:absolute;inset:0;display:grid;place-items:center}
.bp-v svg{width:min(80%,620px);height:auto;max-height:70%}
.bp-v[data-when^="ver:iso"] svg{width:min(66%,520px)}
.bp-v[data-when^="ver:mq"] svg{width:auto;height:min(56%,300px)}
.t-aq .bp-v[data-when^="ver:main"] svg{width:min(58%,440px)}
.t-vb .bp-v svg{width:min(52%,420px)}
/* the type */
.ty-spec{position:absolute;inset:0 0 70px}
.ty-fam,.ty-hier{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;min-width:0}
.cx-main .ty-role{margin:0;font:600 12.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sc-ink2)}
.cx-main .ty-name{margin:.16em 0 .3em;font-family:var(--ff);font-weight:var(--w);font-size:clamp(52px,6vw,118px);line-height:1;letter-spacing:-.01em;color:var(--sc-ink);transition:font-weight .3s}
.ty-row{display:flex;align-items:center;gap:clamp(22px,3vw,56px);min-width:0}
.ty-aa{font-family:var(--ff);font-weight:var(--w);font-size:clamp(96px,11vw,220px);line-height:.9;transition:font-weight .3s}
.cx-main .ty-gl{margin:0;min-width:0;font-family:var(--ff);font-weight:var(--w);font-size:clamp(14px,1.25vw,22px);line-height:1.55;color:var(--sc-ink2);overflow-wrap:anywhere;transition:font-weight .3s}
.ty-ws{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,3vh,34px)}
.cx-main .ty-ws button{margin:0;padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sc-ink) 28%,transparent);background:transparent;color:var(--sc-ink);font:500 13px/1 var(--f-body);cursor:pointer}
.cx-main .ty-ws button.on{background:var(--sc-ink);color:var(--sc-c,var(--bg))}
.ty-ln{display:grid;grid-template-columns:minmax(7em,auto) minmax(0,1fr);gap:clamp(16px,2vw,36px);align-items:baseline;padding:clamp(14px,2.2vh,24px) 0;border-top:1px solid color-mix(in srgb,var(--sc-ink) 18%,transparent)}
.ty-ln:first-child{border-top:0}
.ty-lb{font:600 12px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sc-ink2)}
.cx-main .ty-h{margin:0;font-size:clamp(34px,3.6vw,68px);line-height:1.04;color:var(--sc-ink);text-wrap:balance}
.cx-main .ty-b{margin:0;font-size:clamp(17px,1.4vw,24px);line-height:1.45;color:var(--sc-ink)}
.cx-main .ty-c{margin:0;font-size:clamp(14px,1.05vw,17px);color:var(--sc-ink)}
/* the colour: tall named swatches; point at one to widen it (no values to copy) */
.co-row{position:absolute;inset:0;display:flex;gap:clamp(8px,.8vw,14px)}
.co-g{display:flex;gap:inherit;min-width:0}
.co{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;padding:clamp(14px,1.3vw,22px);border-radius:clamp(10px,1vw,18px);background:var(--c);color:var(--ci);
  box-shadow:inset 0 0 0 1px rgba(11,12,11,.08);outline:none;transition:flex-grow .55s var(--ease)}
.co:hover,.co:focus-visible{flex-grow:2.4}
.co-n{font:500 clamp(13px,1vw,16px)/1.25 var(--f-body);letter-spacing:.01em}
/* round 28 ("there's so many of them... if you do keep it vertical, you can actually just write the text vertical"):
   with more than seven swatches each name runs up its band, read bottom to top */
.co-row--many .co{padding:clamp(12px,1vw,18px) clamp(8px,.6vw,12px);align-items:flex-end;justify-content:center}
.co-row--many .co-n{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:clamp(13px,.95vw,16px)}
/* the device */
.bp-dev .st-device--part{position:absolute;inset:0 0 70px}
.bp-pat .st-device--part{inset:calc(-1 * clamp(26px,4.6vh,52px)) calc(-1 * var(--gut)) calc(-1 * clamp(92px,12.5vh,116px)) -6%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.bp-rings .st-device--part svg{right:4%;height:112%}
.bp-rings .st-device[data-dev="rings"] path{opacity:calc(.35 + .65 * var(--o,.5) * var(--in,1))}
.bp-dev .st-device[data-dev="pattern"] g{opacity:.1;transition:opacity .6s ease}
.cw-line{position:absolute;inset:0 0 30px;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.06em;
  font:400 clamp(52px,6vw,116px)/1.06 "Instrument Serif",Georgia,serif;color:#FAF5ED}
.cw{position:relative;display:inline-block;padding:0 .08em;cursor:default;outline:none}
.cw svg{position:absolute;pointer-events:none;overflow:visible}
.cw ellipse{fill:none;stroke:#62A36B;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--L);stroke-dashoffset:var(--L);transition:stroke-dashoffset .9s var(--ease) calc(var(--i,0) * 120ms)}
.cw.is-c ellipse{stroke-dashoffset:0}
.bp-circ .st-device--part{opacity:.35}
@media (max-width:900px){
  .sc{position:relative;display:flex;flex-direction:column;padding:56px 0;gap:20px}
  .sc__ground{top:0}
  .sc__copy{display:contents}
  .sc__stage--live{position:relative;height:auto;order:2}
  .sc--bleed .sc__stage{margin-right:0}
  .story .ghost,.sc__spot{display:none}
  .story__open .st-device{opacity:.6}
  .bp{position:relative;inset:auto;display:flex;flex-direction:column;gap:18px}
  .bp [data-s]{position:relative;inset:auto;opacity:1;visibility:visible}
  .bp [data-when]:not(.is-v){display:none}
  .bp-film{height:70vw}.bp-logo{height:60vw}
  .bp-ctl{position:static}
  .ty-spec{position:relative;inset:auto}.ty-fam,.ty-hier{position:relative;inset:auto}
  .ty-row{flex-direction:column;align-items:flex-start;gap:8px}
  .co-row{position:relative;height:72vw;inset:auto}
  .co{padding:10px}.co-n{font-size:12px;writing-mode:vertical-rl;transform:rotate(180deg)}
  .bp-dev{min-height:80vw}.bp-dev .st-device--part{inset:0}
  .cw-line{position:relative;inset:auto;font-size:clamp(40px,12vw,64px)}
}

/* ===== round 20 (15 Oct 13:09, GSD and Aquinas first): "shift this content up and stretch it out, and this goes
   underneath, and then you can expand it out so it's immersive". When a scene shows off a key element (a component, the
   mark, the type, the device), its copy runs across the top in one band (title left, note right) and the thing itself
   takes the full width beneath. How it was built and the colour keep copy left, work right ("that does work well"). ===== */
@media (min-width:901px){
  .sc--band{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:clamp(14px,2.6vh,30px);align-items:stretch;
    padding:clamp(18px,3.2vh,36px) 0 clamp(84px,11vh,104px)}
  .sc--band .sc__copy{grid-row:1;grid-column:1;align-self:start;max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--g);row-gap:0;align-items:start}
  .sc--band .sc__head{grid-column:1}
  .sc--band .sc__notes{grid-column:2;max-width:56em}
  .cx-main .sc--band .sc__count{margin:0 0 10px}
  .cx-main .sc--band .sc__title{font-size:clamp(28px,2.5vw,48px)}
  .cx-main .sc--band .sc__k{margin:0 0 6px}
  .sc--band .sc__stage{grid-row:2;grid-column:1;height:100%;min-height:0}
  /* How it was built: the films a tenth larger ("maybe make it 10% larger, for both of them") */
  .sc--frames .sc__frame .m{transform:scale(1.1)}
}
/* the mark: the logo large across the stage, not a bolt-on */
.sc--band .bp-v svg{width:min(58%,780px);max-height:82%}
.sc--band .bp-v[data-when^="ver:iso"] svg{width:min(50%,660px)}
.sc--band .bp-v[data-when^="ver:mq"] svg{width:auto;height:min(78%,420px)}
.t-aq .sc--band .bp-v[data-when^="ver:main"] svg{width:min(42%,560px)}
.t-vb .sc--band .bp-v svg{width:min(42%,540px)}
/* the type: every face side by side across the width; the note being read lights its face */
.ty-spec{position:absolute;inset:0 0 70px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,96px);align-items:center}
.ty-spec--one{grid-template-columns:minmax(0,1fr)}
.ty-spec .ty-fam{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(12px,1.6vh,20px) 0}
.ty-hier{position:absolute;inset:0 0 70px}
.cx-main .ty-spec .ty-name{font-size:clamp(44px,4.6vw,96px)}
.ty-spec .ty-aa{font-size:clamp(88px,8.6vw,176px)}
.ty-spec--one .ty-row{gap:clamp(32px,5vw,96px)}
.ty-spec--one .ty-aa{font-size:clamp(120px,13vw,250px)}
.cx-main .ty-spec--one .ty-gl{font-size:clamp(18px,1.9vw,32px)}
.cx-main .ty-spec--one .ty-name{font-size:clamp(56px,6vw,120px)}
.sc--band .ty-hier .ty-ln{grid-template-columns:minmax(9em,3fr) minmax(0,9fr)}
.cx-main .sc--band .ty-h{font-size:clamp(40px,4.4vw,84px)}
/* the device across the width: Aquinas's words in a row, ringed on hover; ACRE's rings centred; the pattern under the band */
.sc--band .cw-line{inset:0 0 40px;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:.1em .6em;font-size:clamp(54px,6.2vw,120px)}
.sc--band .bp-dev .st-device[data-dev="circles"] svg{left:50%;right:auto;transform:translate(-50%,-50%);height:100%}
.sc--band .bp-rings .st-device--part svg{left:50%;right:auto;transform:translate(-50%,-50%);height:118%}
.sc--band .bp-pat .st-device--part{inset:0 calc(-1 * var(--gut)) calc(-1 * clamp(84px,11vh,104px));-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
/* ---- the typographic title card (round 20, GSD and Aquinas): the chapter's title set large on the page's own ground,
   the lede and the button beneath it, the client's device in the open space above; it lifts away like the card did ---- */
.story--type .story__open{background:var(--bg);color:var(--ink);align-items:flex-end;padding:calc(var(--hdr,76px) + 3vh) var(--gut) clamp(104px,14vh,132px)}
.story--type .story__open-in{max-width:none;width:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--g);align-items:end}
.cx-main .story--type .story__open-title{grid-column:1/-1;margin:0 0 clamp(22px,3.4vh,40px);color:var(--ink);font-size:clamp(84px,13vw,250px);line-height:.9;letter-spacing:-.025em}
.story--type .story__open-title .dot{color:var(--accent)}
.story--type .story__open-lede{grid-column:1;margin:0;color:var(--ink2);opacity:1}
.cx-main .story--type .story__open .btn{grid-column:2;justify-self:end;margin:0;background:var(--dark);color:var(--on-dark)}
.story--type .story__open .st-device{top:calc(var(--hdr,76px) + 2vh);bottom:auto;height:34%;width:44%}
.story--type .st-device[data-dev="line"] svg{position:absolute;top:0;right:0;left:auto;height:100%;width:auto;transform:none;overflow:hidden}
.story--type .st-device[data-dev="line"] path{stroke-width:4}
.t-gsd .story--type .story__open .st-device{--dev:#531A53}
.cw--title{padding:0 .04em}
.cw--title ellipse{stroke:var(--dev-c,#62A36B);stroke-width:2.4}
@media (max-width:900px){
  .story--type .story__open{padding:56px var(--gut)}
  .story--type .story__open-in{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .cx-main .story--type .story__open .btn{grid-column:1;justify-self:start}
  .cx-main .story--type .story__open-title{font-size:clamp(56px,16vw,96px)}
  .story--type .story__open .st-device{display:none}
}

/* ===== round 21 (15 Oct 14:57, at his 1280x720): no title cards ("kill this screen completely... just have a little tag
   that says web design"); a component scene's title on one line with its note beneath it and the component beneath that,
   at the live site's proportions; scenes change like a scroll ("almost instant... it should show it like scrolling down");
   the brand scenes go back to copy left, the work centred and filling the right ("this works nicely... go back to that
   structure but work it so it looks a lot cleaner"). ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cx-main .sc__meta{display:flex;align-items:center;gap:14px;margin:0 0 clamp(10px,1.6vh,16px)}
.sc__tag{display:inline-flex;align-items:center;padding:6px 12px 5px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sc-ink) 28%,transparent);
  font:600 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--sc-ink);white-space:nowrap}
.cx-main .sc__meta .sc__count{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--sc-ink2)}
.cx-main .sc__btn{margin-top:clamp(18px,2.8vh,30px);align-self:flex-start}
.sc--dark .sc__btn{background:var(--on-dark);color:var(--dark)}
@media (min-width:901px){
  /* a component: the title on one line, the note beneath it, the component beneath that, the full width */
  .sc--band .sc__copy{display:flex;flex-direction:column;max-width:none}
  .cx-main .sc--band .sc__title{white-space:nowrap;font-size:clamp(26px,2.5vw,46px)}
  .sc--band .sc__notes{margin-top:clamp(8px,1.4vh,14px);max-width:64em}
  .cx-main .sc--band .sc__k{margin:0 0 4px;font-size:clamp(17px,1.3vw,22px)}
  .sc--band .sc__p{font-size:clamp(14px,1.05vw,17px)}
  .sc--band{row-gap:clamp(16px,2.8vh,30px)}
  /* scenes change like a scroll: the next slides up from below as the last slides away above */
  .story .sc{opacity:1!important;transform:translateY(100%)!important;transition:transform .85s cubic-bezier(.65,0,.35,1),visibility 0s .85s!important}
  .story .sc.is-past{transform:translateY(-100%)!important}
  .story .sc.is-on{transform:none!important;transition:transform .85s cubic-bezier(.65,0,.35,1),visibility 0s!important}
  /* the brand's own scenes: copy left, the work centred in the right */
  .sc--mark .bp-v svg{width:min(84%,720px);max-height:74%}
  .sc--mark .bp-v[data-when^="ver:iso"] svg{width:min(72%,600px)}
  .sc--mark .bp-v[data-when^="ver:mq"] svg{width:auto;height:min(74%,400px)}
  .t-aq .sc--mark .bp-v[data-when^="ver:main"] svg{width:min(62%,500px)}
  .t-vb .sc--mark .bp-v svg{width:min(60%,500px)}
  .sc--type .ty-spec{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);row-gap:clamp(8px,1.6vh,18px);align-items:center}
  .sc--type .ty-spec .ty-fam{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"aa role" "aa name" "aa gl" "aa ws";
    column-gap:clamp(24px,3vw,56px);align-content:center;padding:0}
  .sc--type .ty-row{display:contents}
  .sc--type .ty-aa{grid-area:aa;align-self:center;font-size:clamp(96px,9vw,172px)}
  .sc--type .ty-role{grid-area:role}.sc--type .ty-name{grid-area:name}.sc--type .ty-gl{grid-area:gl}.sc--type .ty-ws{grid-area:ws;margin-top:14px}
  .cx-main .sc--type .ty-spec .ty-name{margin:.1em 0 .2em;font-size:clamp(38px,3.6vw,70px)}
  .sc--type .ty-spec--one .ty-aa{font-size:clamp(140px,13vw,240px)}
  .sc--dev .cw-line{align-items:center;text-align:center;font-size:clamp(52px,5.4vw,104px)}
  .sc--dev .bp-circ .st-device svg,.sc--dev .bp-rings .st-device--part svg{left:50%;right:auto;transform:translate(-50%,-50%);height:100%}
}
/* the films melt into the page again: the enlarged film's own box carries the ground (its transform isolates the blend) */
.sc__frame .m{background:var(--sc-c,var(--bg))}

/* ===== round 22 (15 Oct 16:15, "we've made massive improvements"): the copy you read while scrolling is larger, and the
   note that changes comes in so it catches the eye ("I'm not really reading it... draw attention to the content that's
   changing"); the type one face at a time, sliding in from the side; the hierarchy with the brand's own colour; a longer
   wind-up into each story; less air above Questions. ===== */
.cx-main .sc__title{font-size:clamp(32px,3vw,58px)}
.cx-main .sc__k{margin:0 0 10px;font-size:clamp(21px,1.75vw,32px)}
.sc__p{font-size:clamp(16px,1.25vw,20px);line-height:1.55}
.sc__copy{max-width:32em}
.sc__count b{color:var(--accent)}
.sc--dark .sc__count b{color:var(--cx-accent,var(--sc-ink))}
.t-vb .sc--dark .sc__count b{color:var(--sc-ink)}
.sc__note.is-on{animation:noteIn .6s var(--ease) both}
@keyframes noteIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (min-width:901px){
  .sc--band{padding-top:clamp(16px,2.8vh,32px);padding-bottom:clamp(78px,10.5vh,98px)}
  .cx-main .sc--band .sc__title{font-size:clamp(30px,2.8vw,54px)}
  .cx-main .sc--band .sc__k{font-size:clamp(19px,1.5vw,26px)}
  .sc--band .sc__p{font-size:clamp(15px,1.15vw,19px)}
  .sc--bleed .a-foot{padding-right:var(--gut)}
  /* the type: one face at a time, large and centred; the next slides in from the side */
  .sc--type .ty-spec--slides{display:block}
  .sc--type .ty-spec--slides .ty-fam,.sc--type .ty-spec--slides .ty-hier{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
    transform:translateX(calc(var(--x,1) * 16%));transition:opacity .5s var(--ease),transform .75s var(--ease),visibility 0s .75s}
  .sc--type .ty-spec--slides .is-v{transform:none;transition:opacity .5s var(--ease) .12s,transform .75s var(--ease),visibility 0s}
  .sc--type .ty-spec--slides .ty-fam{align-items:center;text-align:center;padding:0}
  .sc--type .ty-spec--slides .ty-row{display:flex;align-items:center;gap:clamp(24px,3vw,56px);text-align:left}
  .cx-main .sc--type .ty-spec--slides .ty-name{margin:.12em 0 .3em;font-size:clamp(60px,6.4vw,124px)}
  .sc--type .ty-spec--slides .ty-aa{font-size:clamp(120px,11vw,214px)}
  .cx-main .sc--type .ty-spec--slides .ty-gl{font-size:clamp(16px,1.4vw,24px)}
  .sc--type .ty-spec--slides .ty-ws{justify-content:center;margin-top:clamp(18px,3vh,32px)}
}
.cx-main .ty-role,.ty-lb{color:var(--cx-accent,var(--accent))}
.t-vb .ty-role,.t-vb .ty-lb{color:var(--accent)}
.ty-btn{display:inline-block;padding:14px 22px;font-size:clamp(14px,1.05vw,16px);line-height:1.2}
/* a longer wind-up into each story: its first step holds for 1.6 steps, so a swipe that carries into it stops there */
.story__track{height:calc(var(--slide) + (var(--n) + .6) * var(--hold))}
/* less air above Questions ("a massive gap above the questions") */
.chap--q{padding-top:clamp(64px,6vw,112px)}

/* ===== round 23 (15 Oct 18:11, "pretty happy where it's up to, just a few small tweaks") ===== */
/* scenes move like a scroll: fast off the mark, easing to rest (the in-out curve stalled, jumped, then crept: "it clicks up") */
@media (min-width:901px){
  .story .sc{transition:transform .7s cubic-bezier(.2,.75,.25,1),visibility 0s .7s!important}
  .story .sc.is-on{transition:transform .7s cubic-bezier(.2,.75,.25,1),visibility 0s!important}
  /* the tutors: three and a half across to the screen edge, as tall as the stage allows */
  .sc--bleed .a-list .a-card{flex:0 0 var(--cw,25%);height:var(--ch,auto);aspect-ratio:auto}
  /* the copy beside the work (the brand, How it was built) is larger ("still feels a little bit too small over here on the left") */
  .sc:not(.sc--band){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .sc:not(.sc--band) .sc__copy{max-width:34em}
  .cx-main .sc:not(.sc--band) .sc__title{font-size:clamp(40px,3.7vw,70px)}
  .cx-main .sc:not(.sc--band) .sc__k{font-size:clamp(24px,2.1vw,38px)}
  .sc:not(.sc--band) .sc__p{font-size:clamp(17px,1.42vw,23px)}
  .sc:not(.sc--band) .sc__tag{font-size:12px;padding:7px 13px 6px}
  .cx-main .sc:not(.sc--band) .sc__meta .sc__count{font-size:13.5px}
}
.ghost__t{position:absolute;left:24px;top:20px;margin:0}
.ghost.ghost--left .ghost__t{left:auto;right:2px}

/* ===== the roll-out (15 Oct, after round 23: "amazing, roll the structure out"): every component drawn at full size on a
   1280x720 screen, at the proportions of the client's live site, by shaping it wide and short instead of shrinking it ===== */
@media (min-width:901px){
  .story .sc--bleed .r-list .r-card{flex:0 0 var(--cw,30%);height:var(--ch,auto);aspect-ratio:auto}
  .story .sc--bleed [data-bleed]>*{flex:0 0 var(--cw,30%);height:var(--ch,auto);min-height:0;aspect-ratio:auto}   /* 16 Oct: the added clients' sliders */
  /* ACRE: What we do, at the live site's size (heading ~40px, cards two and a half across) */
  .story .r-wwd{padding:0}
  .story .r-head{padding-right:var(--gut);margin-bottom:clamp(14px,2.2vh,24px)}
  .cx-main .story .r-title{font-size:clamp(30px,3vw,52px)}
  .cx-main .story .r-head p{font-size:15px;max-width:36em}
  .story .r-nav button{width:46px;height:46px;font-size:18px}
  .cx-main .story .r-body h4{font-size:clamp(18px,1.6vw,24px)}
  .cx-main .story .r-body p{font-size:14px}
  .story .r-body{padding:20px}
  .story .r-cta{font-size:14px;padding:10px 18px}
  /* ACRE: the menu, without the backdrop's fixed height */
  .story .m-site{min-height:0}
  .story .m-hero{padding-bottom:clamp(18px,2.4vw,32px)}
  .cx-main .story .m-panel b{font-size:16px}.story .m-panel span{font-size:13.5px}
  .story .m-nav,.story .m-nav button{font-size:15px}.story .m-cta{font-size:14px;padding:10px 18px}
  /* Roberts Law: the calculator, wide (the values in three columns) */
  .story .l-calc{padding:0}
  .cx-main .story .l-h{margin-bottom:clamp(10px,1.6vh,16px)}
  .story .l-card{padding:8px 8px 14px}
  .story .l-tabs{margin-bottom:12px}
  .story .l-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
  .story .l-vals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .story .l-you{margin-top:10px}
  /* Roberts Law: the services grid */
  .story .s-wrap{padding:0}
  .cx-main .story .s-card b{font-size:18px}.cx-main .story .s-card p{font-size:13px}
  /* the pipelines (Veblen, Kinetica): the back office in two columns, the code and the feed never set the height */
  .story .p-tabs{padding:0 0 clamp(10px,1.6vh,14px)}
  .story .p-grid{padding:0;gap:16px}
  .story .p-wp .p-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:10px 12px}
  .story .p-wp .p-body>h5,.story .p-wp .p-body>.p-row{grid-column:1/-1}
  .story .p-code .p-json{position:absolute;top:34px;left:0;right:0;bottom:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);scroll-behavior:smooth}
  .story .p-feed .k-feed{position:absolute;top:34px;left:0;right:0;bottom:0;overflow:hidden}
  .cx-main .story .p-site h5{font-size:17px}.cx-main .story .p-job b{font-size:17px}.cx-main .story .p-job p{font-size:13px}
  .cx-main .story .k-t{font-size:17px}.story .k-hl{font-size:14px}.cx-main .story .k-ex{font-size:13.5px}
  /* Veblen: the job board at the live site's scale, the roles side by side */
  .story .v-board{padding:0}
  .cx-main .story .v-h{margin-bottom:clamp(12px,2vh,20px);font-size:clamp(30px,2.9vw,50px)}
  .story .v-search input{font-size:16px;padding:12px 14px}.story .v-search button{font-size:15px;padding:12px 24px}
  .story .v-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,2.6vw,44px)}
  .story .v-job{border-bottom:0;border-top:1px solid #E7E2DA;padding:clamp(14px,2.2vh,22px) 0}
  .cx-main .story .v-job h4{font-size:clamp(20px,1.7vw,28px)}.cx-main .story .v-ex{font-size:15px}.story .v-hl{font-size:13px}
  /* Kinetica: the Quick CV Dropoff, wide, in two columns */
  .story .q-wrap{padding:0}
  .story .q-card{max-width:none;padding:clamp(20px,2.4vw,36px)}
  .cx-main .story .q-h{font-size:clamp(24px,2.1vw,34px);margin-bottom:clamp(12px,2vh,20px)}
  .story .q-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px clamp(24px,3vw,48px)}
  .story .q-col{display:flex;flex-direction:column;gap:12px;min-width:0}
  .story .q-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .story .q-form label,.story .q-pick legend{font-size:14px}.story .q-form input{font-size:15px;padding:11px 12px}
  .story .q-go{font-size:15px;padding:11px 26px}
  /* the brand in use: delivered pages at their own size, not enlarged */
  .sc--frames .sc__frame.f--page .m{transform:none}
}
/* the step number in a colour the ground can carry (Roberts Law's accent is light aqua) */
.sc__count b{color:var(--dot,var(--accent))}
.sc--dark .sc__count b{color:var(--cx-accent,var(--sc-ink))}
.t-vb .sc--dark .sc__count b{color:var(--sc-ink)}
/* ACRE's tree rings at full strength in their own scene */
.bp-rings .st-device[data-dev="rings"] path{opacity:calc(.55 + .45 * var(--in,1))}

/* ===== round 32 (20 Oct 12:39, "when I scroll... it does like a square outline of that section, then it changes... it's
   not one fluid change... we have that issue across all the case studies"): a step's ground faded over .6s, but the boxes
   that carry the same colour (the mark's film, each frame's box) and the copy's ink jumped to the new colour at once, so
   the new step showed as a square before the ground caught up, and the old copy flashed dark on a dark ground. The scene
   colours are now registered and animated on the scene itself: the ground, every box and the ink change as one. ===== */
@property --sc-c{syntax:'<color>';inherits:true;initial-value:#fff}
@property --sc-ink{syntax:'<color>';inherits:true;initial-value:#111}
@property --sc-ink2{syntax:'<color>';inherits:true;initial-value:#444}
.sc{--sc-bg:var(--bg);--sc-c:var(--sc-bg);--cf:.7s cubic-bezier(.45,0,.25,1);
  transition:opacity .6s var(--ease),visibility 0s .6s,--sc-c var(--cf),--sc-ink var(--cf),--sc-ink2 var(--cf)}
.sc.is-on{transition:opacity .6s var(--ease) .05s,visibility 0s,--sc-c var(--cf),--sc-ink var(--cf),--sc-ink2 var(--cf)}
/* --sc-bg stays unregistered (a ground may be a photo: Roberts Law's skyline); the ground's own colour fades on the
   same curve and time as the registered --sc-c, so box and ground still change as one */
.sc__ground{transition:background-color var(--cf)}
@media (min-width:901px){
  .story .sc{transition:transform .7s cubic-bezier(.2,.75,.25,1),visibility 0s .7s,--sc-c var(--cf),--sc-ink var(--cf),--sc-ink2 var(--cf)!important}
  .story .sc.is-on{transition:transform .7s cubic-bezier(.2,.75,.25,1),visibility 0s,--sc-c var(--cf),--sc-ink var(--cf),--sc-ink2 var(--cf)!important}
}
/* the parts of a live brand part (a logo version, its film) cross-fade on the same gentle in-out curve: the old fast-start
   curve made 80% of the change land in the first frame, which read as a flash */
.bp [data-when]{transition:opacity .5s cubic-bezier(.45,0,.25,1),visibility 0s .5s}
.bp [data-when].is-v{transition:opacity .55s cubic-bezier(.45,0,.25,1) .08s,visibility 0s}

/* round 32: hero devices that run on behind the reel (base4.js moves each [data-hdev] into this layer): the hero no longer
   clips them; the layer sits over the hero's and the reel band's grounds, under their content, and fades out between the
   hero's foot (--hdev-fade) and the middle of the reel, where the hero's colour ends */
.cx-hero.has-hdev{overflow:visible!important;z-index:auto!important}
.cx-main.has-hdev .cx-hero>.cx-wrap,.cx-main.has-hdev .reel-band>.cx-wrap{position:relative;z-index:2}
.hdev-clip{position:absolute;z-index:1;left:0;right:0;top:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--hdev-fade,80%),transparent);mask-image:linear-gradient(180deg,#000 var(--hdev-fade,80%),transparent)}
.hdev-box{position:absolute}
@media (max-width:900px){.hdev-clip{display:none}}

/* ===== round 36 (Samuel 20 Oct: "go through the case studies on mobile and ensure it's mobile optimised... we want them
   to be impressed visually"): on a phone the stories don't pin, so their tracks take their content's height. The round 22
   wind-up (a later, unscoped rule) had kept every story at its desktop scroll length: up to three blank screens. ===== */
@media (max-width:900px){
  .story__track{height:auto!important}
}
/* the desktop-only rules that leaked onto phones: a bleeding component's fit lifted by half its height (onto the scene
   title), and the type scene's absolute specimens (over the notes). On a phone each sits in the flow beneath its copy. */
@media (max-width:900px){
  .sc__fit,.sc--bleed .sc__fit{position:static!important;transform:none!important;left:auto;top:auto}
  .ty-spec,.ty-hier,.sc--type .ty-spec--slides .ty-fam,.sc--type .ty-spec--slides .ty-hier{position:relative!important;inset:auto!important;transform:none!important}
  .ty-spec{display:flex;flex-direction:column;gap:28px}
  .ty-spec--slides [data-when]:not(.is-v){display:none}
  .sc--type .ty-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
  .sc--type .ty-aa{font-size:clamp(96px,30vw,140px);line-height:1}
  .cx-main .sc--type .ty-name{font-size:clamp(34px,10vw,48px);margin:.1em 0 .25em}
  .ty-ws{flex-wrap:wrap}
}
/* the phone, made to impress: the reel runs edge to edge; the chapter bar tucks away while reading down and returns on the
   way up; tap targets in the bar stay at least 40px */
@media (max-width:900px){
  .reel-band>.cx-wrap{margin-inline:0}
  .film--reel video{border-radius:0}
  .cx-chapters{transition:transform .45s var(--ease),opacity .3s}
  .cx-chapters.is-on.is-tucked{transform:translate(-50%,calc(100% + 30px));opacity:0}
  .cx-chapters a{min-height:40px;display:flex;align-items:center}
}
/* sliders on a phone: about one and a third cards across, so each card is large and the next one peeks in */
@media (max-width:900px){
  .cmp-aq .a-list .a-card{flex:0 0 74%!important;height:auto!important;aspect-ratio:6/7!important}
  .cmp-aq .a-ov h4{font-size:26px}
  .cmp-acre .r-list .r-card{flex:0 0 74%!important;height:auto!important;aspect-ratio:1.02!important}
}
/* a scrolling row of tabs starts at its first tab (centred, an overflowing row hid its start off-screen: Uncle Funk) */
@media (max-width:900px){.cmp [style*="overflow"],.up-tabs{justify-content:flex-start!important}}

/* ===== round 37 (Samuel 20 Oct 16:51, FS Talent at 400px, "apply that general principle across all of the case studies"):
   the phone. "labelling the one of four obviously doesn't make sense": every step is on show, so no step count.
   "a bit more space underneath these... double the space": each film, component and brand part has twice the air below.
   "make this slightly larger... hit the buttons": every control we drew is a 44px target.
   "these don't even work on mobile": a device's artwork lay over its colour chips and took the taps (FS Talent, Precise
   Life, La Vie de Luxe, Geeks on Wheels); artwork never takes a tap, and the controls sit above it. ===== */
@media (max-width:900px){
  .sc__count{display:none}
  .sc__frame,.sc__stage--cmp,.sc__stage--live{margin-bottom:20px}
  .bp .fpat,.bp .st-device:not([data-live]),.bp .st-device:not([data-live]) *,.bp svg:not(button svg){pointer-events:none}
  .bp-ctl,.bp-chips,.ty-ws{position:relative;z-index:6}
  .cx-main .bp-chips{gap:10px}
  .cx-main .bp-chips button{min-height:44px;padding:11px 18px;font-size:15px}
  .cx-main .bp-chips--sw button{min-height:0;width:44px;height:44px;padding:5px}
  .bp-chips--sw i{width:32px;height:32px}
  .cx-main .ty-ws button{min-height:44px;padding:11px 18px;font-size:15px}
  .cx-main .gm-tab,.cx-main .us-tab{min-height:44px}
}
/* the device scenes on a phone keep the desktop order: the device on its ground first, its chips beneath it, not on it */
@media (max-width:900px){
  .bp-dev{justify-content:flex-end;min-height:calc(80vw + 64px)}
  .bp-dev .st-device--part{inset:0 0 64px}
}
/* "you can see it's been cut up on mobile": the type scene had three left edges (the copy, a centred specimen, a centred
   chip row) under a centred title. On a phone the title, the specimen and its chips all sit on the copy's left edge. */
@media (max-width:900px){
  .sc__head{align-self:stretch;text-align:left;margin-inline:0}
  .sc__meta{justify-content:flex-start}
  .ty-spec{align-items:stretch!important}
  .sc--type .ty-fam,.sc--type .ty-hier{align-items:flex-start!important;text-align:left!important}
  .sc--type .bp-ctl,.sc--type .ty-ws{justify-content:flex-start!important}
}
@media (max-width:900px){
  .cx-main .tap-x{position:relative!important}
  .tap-x::after{content:"";position:absolute;top:calc(-1 * var(--ty,0px));bottom:calc(-1 * var(--ty,0px));left:calc(-1 * var(--tx,0px));right:calc(-1 * var(--tx,0px))}
  /* a device scene with no chips (Roberts Law's pattern) keeps no room for them */
  .bp-dev:not(:has(.bp-ctl)){min-height:80vw}
  .bp-dev:not(:has(.bp-ctl)) .st-device--part{inset:0}
}

/* FS Talent v4 (16 Oct): the site's own dark ground and lemon accent, Inter headings and DM Sans body as on fstalent.com;
   the brand chapter in Everett, the brand typeface. The marque is the only device: in the hero it sits in Violet on the
   dark ground, bleeding off the page edge, and (round 31) runs on behind the reel. */
@font-face{font-family:Everett;font-weight:300;src:url(/wp-content/uploads/frm-cs/v1/brand/fst/fonts/free/Geist-300.woff2) format("woff2");size-adjust:97.9%;ascent-override:93.97%;descent-override:29.62%;line-gap-override:0.0%}
@font-face{font-family:Everett;font-weight:400;src:url(/wp-content/uploads/frm-cs/v1/brand/fst/fonts/free/Geist-400.woff2) format("woff2");size-adjust:97.4%;ascent-override:94.46%;descent-override:29.77%;line-gap-override:0.0%}
@font-face{font-family:Everett;font-weight:500;src:url(/wp-content/uploads/frm-cs/v1/brand/fst/fonts/free/Geist-500.woff2) format("woff2");size-adjust:95.5%;ascent-override:96.34%;descent-override:30.37%;line-gap-override:0.0%}
@font-face{font-family:"FDM Sans";src:url(/wp-content/uploads/frm-cs/v1/brand/fst/fonts/DMSans.woff2) format("woff2");font-weight:100 900}
.t-fst{--cx-accent:#E9EB9E;--cx-on-accent:#12141A;--cx-dark:#12141A;--cx-on-dark:#fff}
.cx-main.t-fst{--bg:#fff;--ink:#12141A;--ink2:rgba(18,20,26,.72);--line:#EBEEF7;--accent:#E9EB9E;--on-accent:#12141A;--dot:#12141A;--dark:#12141A;--on-dark:#fff;
  --hero-bg:#12141A;--hero-ink:#fff;--hero-ink2:rgba(255,255,255,.6);--hero-line:rgba(255,255,255,.16);
  --f-head:Inter,system-ui,sans-serif;--f-body:"FDM Sans","DM Sans",system-ui,sans-serif;--h-w:600;--h-ls:-.025em;--h-lh:1.04}
.t-fst .cx-hero .dot{color:var(--accent)}
.t-fst .cx-hero .crumbs{color:var(--accent)}
.t-fst .hero__art{overflow:visible}
/* round 31: the whole marque runs on behind the reel; the hero copy and the reel sit above it */
.cx-main.t-fst{position:relative}
.t-fst .cx-hero .cx-wrap,.t-fst .reel-band .cx-wrap{position:relative;z-index:2}
.fst-f{position:absolute;z-index:1;right:0;aspect-ratio:500.16/813.95;color:#2E2E42;pointer-events:none;opacity:0;transform:translateX(6%);transition:opacity 1.4s var(--ease) .2s,transform 1.6s var(--ease) .2s}
.is-ready .fst-f{opacity:1;transform:none}
.fst-f svg{display:block;width:100%;height:100%}
.t-fst .btn{background:var(--dark);color:#fff}
.t-fst .cine{--cine-hide:inset(0 0 100% 0);--cine-show:inset(0 0 0 0)}
/* the marque faint behind the components; in the device scene, at each ground's own opacity */
.st-device[data-dev="marque"] svg{position:absolute;top:50%;right:-6%;height:120%;width:auto;transform:translateY(-50%);color:var(--dev,#2E2E42)}
.t-fst .st-device--bg[data-dev="marque"]{opacity:.06}
.bp-fmq .fmq{position:absolute;right:calc(-1 * var(--gut,5vw));top:-8%;bottom:30%;aspect-ratio:500/483;color:var(--dev,rgba(46,46,66,.3));transition:color .5s var(--ease),opacity .5s var(--ease)}
.bp-fmq .fmq svg{display:block;width:100%;height:100%}
.bp-fmq .fpat{position:absolute;inset:-40vh calc(-1 * var(--gut,5vw)) -40vh -110%;background:url(/wp-content/uploads/frm-cs/v1/brand/fst/pattern-white.webp) 0 0/1200px auto repeat;opacity:0;transition:opacity .6s var(--ease);-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.bp-fmq[data-pat="1"] .fpat{opacity:.05}
.bp-fmq[data-pat="1"] .fmq{opacity:0}
.t-fst .ty-role,.t-fst .ty-lb{color:var(--sc-ink)}
@media (max-width:900px){.fst-f{display:none}}


@font-face{font-family:"FDM Sans";src:url(/wp-content/uploads/frm-cs/v1/brand/fst/fonts/DMSans.woff2) format("woff2");font-weight:100 900}
.cmp-fst{background:#F9FAFC;color:#12141A;font-family:"FDM Sans","DM Sans",system-ui,sans-serif}
.fj-board{padding:0}
.fj-top{display:flex;align-items:flex-end;gap:clamp(16px,2vw,32px);padding-right:var(--gut,5vw);margin-bottom:clamp(16px,2vh,24px)}
.fj-search{flex:1 1 34%;display:flex;flex-direction:column;gap:8px;font-size:14px;max-width:440px}
.fj-search input{width:100%;box-sizing:border-box;border:1px solid #EBEEF7;border-radius:100px;background:#fff;padding:14px 20px;font:15px "FDM Sans",sans-serif;color:#12141A;outline:none}
.fj-search input:focus{border-color:#12141A}
.fj-loc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:14px}
.fj-lt{font:600 15px Inter,sans-serif;margin-right:4px}
.fj-loc label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.fj-loc input{appearance:none;width:16px;height:16px;margin:0;border:1px solid #9C9BA0;border-radius:3px;background:#fff;cursor:pointer;display:grid;place-items:center}
.fj-loc input:checked{background:#12141A;border-color:#12141A}.fj-loc input:checked::after{content:"";width:5px;height:9px;border:solid #E9EB9E;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.fj-nav{display:flex;gap:10px;margin-left:auto;flex:none}
.fj-nav button{width:52px;height:52px;border-radius:50%;border:1px solid #D2D2D4;background:#fff;color:#12141A;font-size:20px;cursor:pointer;transition:background .3s,color .3s}
.fj-nav .fj-next{background:#12141A;color:#fff;border-color:#12141A}.fj-nav button:disabled{opacity:.35;cursor:default}
.fj-track{overflow:hidden}
.fj-list{list-style:none;margin:0;padding:0;display:flex;gap:24px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fj-card{flex:0 0 calc((100% - 2 * 24px) / 2.5);display:flex;flex-direction:column;min-height:clamp(300px,24vw,380px);padding:28px 22px;border:1px solid #EBEEF7;border-radius:24px;
  background:#F9FAFC url(/wp-content/uploads/frm-cs/v1/media/cmp/fst/bg-job.svg) 100% 100%/auto 78% no-repeat;transition:background-color .3s,color .3s}
.fj-card:hover{background-color:#12141A;color:#fff}.fj-card:hover h4{color:#E9EB9E}.fj-card:hover .fj-tag{background:#282C41;color:#fff}.fj-card:hover .fj-meta,.fj-card:hover .fj-sum{color:#D2D2D4}
.cx-main .fj-tag{align-self:flex-start;margin:0 0 14px;padding:5px 12px;border-radius:100px;background:#EBEEF7;font-size:13px;color:#58657A}
.cx-main .fj-card h4{margin:0 0 14px;font:600 clamp(22px,1.75vw,30px)/1.2 Inter,sans-serif;color:#12141A;transition:color .3s}
.fj-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:18px;font-size:14px;color:#58657A}
.cx-main .fj-meta p{display:flex;align-items:center;gap:7px;margin:0}.fj-meta svg{width:15px;height:15px;flex:none}
.cx-main .fj-h6{margin:0 0 6px;font:600 16px Inter,sans-serif}
.cx-main .fj-sum{margin:0 0 20px;font-size:15px;line-height:1.5;color:rgba(18,20,26,.8)}
.fj-view{margin-top:auto;display:block;text-align:center;padding:14px 20px;border-radius:30px;background:#E9EB9E;color:#12141A;font-size:16px}
.fj-list.is-search .fj-card{display:none}.fj-list.is-search .fj-card.is-hit{display:flex}
.cx-main .fj-none{margin:16px 0 0;font-size:15px;color:#58657A}
@media (max-width:900px){.fj-top{flex-wrap:wrap}.fj-card{flex-basis:82%}}

.cmp-fst2{background:#EBEEF7;color:#12141A;font-family:"FDM Sans","DM Sans",system-ui,sans-serif}
.ft-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-right:var(--gut,5vw);margin-bottom:clamp(16px,2.2vh,26px)}
.cx-main .ft-eye{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#58657A}
.ft-eye::before{content:"";width:9px;height:9px;border-radius:2px;background:#E9EB9E}
.cx-main .ft-h{margin:0;font:600 clamp(28px,2.5vw,48px)/1.1 Inter,sans-serif;color:#12141A}
.ft-nav{display:flex;gap:10px}.ft-nav button{width:52px;height:52px;border-radius:50%;border:1px solid #9C9BA0;background:transparent;color:#12141A;font-size:20px;cursor:pointer}
.ft-nav .ft-next{background:#E9EB9E;border-color:#E9EB9E}.ft-nav button:disabled{opacity:.35;cursor:default}
.ft-track{overflow:hidden}
.ft-list{list-style:none;margin:0;padding:0;display:flex;gap:24px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ft-card{position:relative;flex:0 0 calc((100% - 3 * 24px) / 3.5);aspect-ratio:560/626;border-radius:24px;overflow:hidden;background:#D2D2D4}
.ft-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ft-card:hover img{transform:scale(1.06)}
.ft-info{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:70px 20px 20px;background:linear-gradient(transparent,rgba(18,20,26,.78))}
.cx-main .ft-info h4,.cx-main .ft-sum h4{margin:0;font:600 clamp(20px,1.6vw,28px)/1.15 Inter,sans-serif;color:#fff}
.cx-main .ft-info p{margin:6px 0 0;font-size:14px;color:#E9EB9E}
.ft-bio{flex:none;border:1px solid rgba(255,255,255,.7);border-radius:30px;background:transparent;color:#fff;font:14px "FDM Sans",sans-serif;padding:8px 14px;cursor:pointer;transition:background .3s,color .3s}
.ft-bio:hover,.ft-card.is-open .ft-bio{background:#E9EB9E;color:#12141A;border-color:#E9EB9E}
.ft-sum{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:22px 22px 86px;background:rgba(18,20,26,.92);opacity:0;transition:opacity .35s;pointer-events:none}
.cx-main .ft-sum p{margin:0;font-size:15px;line-height:1.55;color:#EBEEF7}
.ft-card.is-open .ft-sum{opacity:1}.ft-card.is-open .ft-info{background:none;z-index:1}
@media (max-width:900px){.ft-card{flex-basis:70%}}