/* Editorial direction from the Claude design handoff (11 October 2026), now the site standard.
   Every V2 page sets body.ed; loads after pf-brand.css.
   Fullscreen menu, video lightbox, oversized DM Sans headlines with upright copper accents.
   No parallax, no animated reveals, no hover scaling. */

/* ---- headline system ---- */
body.ed h1,body.ed h2{font-family:var(--sans);font-weight:450;letter-spacing:-.05em;line-height:1.04}
body.ed h2{font-size:clamp(44px,5.2vw,78px)}
body.ed .section{padding:120px 0}
body.ed .head{max-width:1040px;margin-bottom:64px}
body.ed .label{font-size:11px;letter-spacing:.15em}
body.ed .cols h3,body.ed .ind-card h3,body.ed .plan h3,body.ed .faq summary{font-family:var(--sans);letter-spacing:-.03em}
body.ed .cols h3,body.ed .ind-card h3{font-weight:450;font-size:28px;line-height:1.15}
body.ed .plan h3{font-weight:450;font-size:32px;line-height:1.12}

/* ---- header: graphite bar, ivory logo, booking action, Explore ---- */
.ed-head{background:var(--graphite);color:var(--ivory);border-bottom:1px solid #f4f1e82e}
.ed-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px}
.ed-head .logo img{width:220px;height:auto}
.ed-actions{display:flex;align-items:center;gap:30px}
.ed-head .button{background:transparent;color:var(--ivory);border-color:#f4f1e85c;padding:12px 18px;font-size:14px}
.ed-head .button:hover{background:var(--copper);color:var(--graphite);border-color:var(--copper)}
.menu-toggle{display:flex;align-items:center;gap:16px;min-height:44px;padding:0 0 0 12px;border:0;background:transparent;color:var(--ivory);font:500 14px/1 var(--sans);cursor:pointer}
.menu-toggle .menu-glyph{font-size:26px;font-weight:300;line-height:1}
.menu-toggle:hover{color:var(--copper)}
.nojs-navigation{display:flex;flex-wrap:wrap;gap:16px;padding:14px 0;font-size:14px}

/* ---- dialogs: fullscreen menu and film lightbox ---- */
body:has(dialog[open]),body.modal-open{overflow:hidden}
dialog.fullscreen-menu,dialog.film-lightbox{background:var(--graphite);color:var(--ivory);border:0}
dialog.fullscreen-menu::backdrop,dialog.film-lightbox::backdrop{background:#101615d9;backdrop-filter:blur(12px)}
dialog.fullscreen-menu{position:fixed;inset:0;margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;padding:26px clamp(22px,4.2vw,80px);overflow-y:auto;overscroll-behavior:contain}
.overlay-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:24px;border-bottom:1px solid #f4f1e82e}
.overlay-top img{width:220px;height:auto}
.overlay-close{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 0 10px 16px;border:0;background:transparent;color:var(--ivory);font:500 14px/1 var(--sans);cursor:pointer}
.overlay-close>span{font-size:26px;line-height:1}
.overlay-close:hover{color:var(--copper)}
.fullscreen-menu .menu-eyebrow{color:var(--copper);font:500 11px/1.4 var(--sans);letter-spacing:.14em;margin:32px 0 14px}
.fullscreen-menu nav a{display:flex;align-items:center;font:400 clamp(36px,4.6vw,72px)/1.16 var(--sans);letter-spacing:-.04em;border-bottom:1px solid #f4f1e82e;padding:12px 0;color:var(--ivory);text-decoration:none}
.fullscreen-menu nav a:hover,.fullscreen-menu nav a:focus-visible{color:var(--copper)}
.fullscreen-menu nav a>span{width:70px;flex-shrink:0;color:var(--copper);font:500 12px/1 var(--sans);letter-spacing:0}
.fullscreen-menu nav a>em{margin-left:auto;font:400 32px/1 var(--sans);font-style:normal}
.menu-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin:32px 0 20px}
.menu-footer p{margin:0;font:400 24px/1.3 var(--sans);color:#b8bcb6}
.menu-footer .links{display:flex;flex-wrap:wrap;align-items:center;gap:26px;font-size:15px}
.menu-footer .links a:not(.button){color:var(--ivory)}
.menu-footer .links a:not(.button):hover{color:var(--copper)}

dialog.film-lightbox{width:min(1180px,96vw);max-width:96vw;padding:20px;max-height:94dvh}
.film-lightbox .overlay-top{font:500 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding-bottom:16px}
.lb-frame{position:relative;aspect-ratio:16/9;max-height:70dvh;margin-top:20px;background:#111}
.lb-frame iframe,.lb-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#111}
.lightbox-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:14px;color:#b8bcb6;font-size:13px}
.lightbox-caption p{margin:0}
.lightbox-caption a{color:var(--ivory);white-space:nowrap}

/* ---- hero: oversized short headline, copper accent ---- */
body.ed .hero{min-height:700px}
body.ed .hero-panel{padding-top:88px;padding-bottom:80px}
body.ed .hero h1{font-size:clamp(76px,7.9vw,124px);line-height:.96;letter-spacing:-.065em;margin-bottom:34px;max-width:none}
body.ed .hero-sub{font-size:22px;line-height:1.45;max-width:460px}

/* ---- cinematic film showcase with the circular lightbox trigger ---- */
.showcase{position:relative;height:720px;overflow:hidden;background:var(--graphite);color:var(--ivory)}
.showcase>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showcase:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#101b18ed,transparent 80%),linear-gradient(90deg,#101b1877,transparent);pointer-events:none}
.showcase .work-heading{position:absolute;z-index:2;left:max(40px,calc((100vw - 1180px)/2));bottom:110px;max-width:760px;pointer-events:none}
.showcase .work-heading .label{color:var(--ivory)}
.showcase .work-heading h2{font-size:clamp(60px,6.8vw,104px);line-height:1.02}
.showcase .film-caption{position:absolute;z-index:2;left:max(40px,calc((100vw - 1180px)/2));right:max(40px,calc((100vw - 1180px)/2));bottom:30px;border-top:1px solid #f4f1e847;padding-top:20px;font:500 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.film-play{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding-right:15%;border:0;background:none;color:var(--ivory);cursor:pointer}
.play-circle{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:130px;height:130px;border:1px solid #f4f1e877;border-radius:50%;background:#242a2930;backdrop-filter:blur(7px);color:var(--ivory)}
.play-circle:after{content:'';position:absolute;inset:-13px;border:1px solid #ffffff24;border-radius:50%;pointer-events:none}
.play-circle>span:first-child{font-size:22px;line-height:1;padding-left:3px}
.play-circle>span:last-child{font:500 11px/1.4 var(--sans)}
.film-play:hover .play-circle,.film-play:focus-visible .play-circle{background:var(--copper);color:var(--graphite);border-color:var(--copper)}
.more-films{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--graphite)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .film-play{justify-content:center;padding:0;background:linear-gradient(0deg,#101b1866,transparent)}
.thumb .play-circle{width:96px;height:96px}

/* ---- process as three-column rows ---- */
body.ed #how .cols{display:block;border-top:0}
body.ed #how .cols article{display:grid;grid-template-columns:60px .95fr 1.1fr;gap:30px;align-items:baseline;padding:30px 0;border-left:0;border-top:1px solid var(--line-dark)}
body.ed #how .cols article:last-child{border-bottom:1px solid var(--line-dark)}
body.ed #how .num{margin:0;font-size:20px;letter-spacing:0}
body.ed #how .cols h3{margin:0;font-size:30px}
body.ed #how .cols p{margin:0;font-size:17px}

/* ---- closing: copper ground, graphite type, dark action ---- */
.ed-closing{background:var(--copper);color:var(--graphite);padding:116px 0}
.ed-closing .closing h2{color:var(--graphite);font-size:clamp(55px,6.8vw,104px);line-height:1.02;margin-bottom:30px}
.ed-closing .label{color:var(--graphite)}
.ed-closing .label:after{background:var(--graphite)}
.ed-closing p{color:var(--graphite);font-size:19px;max-width:560px}
.ed-closing .button{background:var(--graphite);color:var(--ivory);border-color:var(--graphite)}
.ed-closing .button:hover{background:#36403e;color:var(--ivory)}
.ed-closing .amp{opacity:.25}

@media(max-width:1100px){
 body.ed .hero{min-height:0}
 body.ed .hero h1{font-size:clamp(64px,8.4vw,100px)}
 .showcase{height:640px}
 body.ed #how .cols article{grid-template-columns:44px .85fr 1.1fr;gap:20px}
}
@media(max-width:760px){
 body.ed .section{padding:76px 0}
 body.ed .head{margin-bottom:40px}
 body.ed h2{font-size:clamp(39px,8.8vw,58px)}
 body.ed .hero h1{font-size:clamp(62px,15vw,96px)}
 body.ed .hero-sub{font-size:19px}
 .ed-head .wrap{min-height:80px}
 .ed-head .logo img{width:min(200px,52vw)}
 .ed-actions{gap:10px}
 .ed-actions .button{display:none}
 .overlay-top img{width:170px}
 .fullscreen-menu nav a{font-size:clamp(30px,8vw,46px);padding:18px 0}
 .fullscreen-menu nav a>span{width:38px;font-size:10px}
 .fullscreen-menu nav a>em{font-size:24px}
 .menu-footer{flex-direction:column;align-items:flex-start;gap:20px}
 .menu-footer p{font-size:21px}
 .showcase{height:620px}
 .showcase .work-heading{left:20px;right:20px;bottom:110px}
 .showcase .work-heading h2{font-size:clamp(50px,12vw,78px)}
 .showcase .film-caption{left:20px;right:20px;bottom:24px;font-size:10px}
 .film-play{justify-content:flex-end;align-items:flex-start;padding:110px 30px 0 0}
 .thumb .film-play{align-items:center;padding:0}
 .play-circle{width:90px;height:90px;gap:8px}
 .play-circle>span:first-child{font-size:19px}
 .play-circle>span:last-child{font-size:10px}
 .play-circle:after{inset:-9px}
 .more-films{grid-template-columns:1fr}
 dialog.film-lightbox{padding:14px}
 .lb-frame{margin-top:14px}
 .lightbox-caption{font-size:12px;align-items:flex-start;flex-direction:column;gap:8px}
 body.ed #how .cols article{grid-template-columns:30px 1fr;gap:12px;padding:24px 0}
 body.ed #how .cols p{grid-column:2}
 body.ed #how .cols h3{font-size:25px}
 .ed-closing{padding:76px 0}
 .ed-closing .closing h2{font-size:clamp(44px,10vw,64px)}
}
@media(prefers-reduced-motion:reduce){.button,.menu-toggle,.overlay-close{transition:none}}
body.ed .faq h2,body.ed .split h2,body.ed .more-films h2{font-size:clamp(40px,4.4vw,64px)}
body.ed .ind-card h3{font-size:24px}
@media(max-width:760px){body.ed .faq h2,body.ed .split h2,body.ed .more-films h2{font-size:clamp(36px,8.8vw,52px)}}

/* ---- three closing sections, each with its own character ---- */
/* More work: graphite, the Memorial film, and a contact sheet of real shoot photos */
.ed-more .more-films{grid-template-columns:.9fr 1.1fr;gap:56px}
.ed-more .more-films p:not(.label){color:var(--on-graphite);font-size:18px;margin-top:20px}
.ed-more .thumb{border:1px solid var(--line-dark)}
.contact-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px;padding-top:40px;border-top:1px solid var(--line-dark)}
.contact-sheet figure{margin:0}
.contact-sheet img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.contact-sheet figcaption{margin-top:12px;font:500 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--on-graphite)}
.ed-more .more{margin-top:32px}

/* Real human origin: a centered statement */
.ed-origin{text-align:center;padding:150px 0}
.ed-origin .label:after{margin-inline:auto}
body.ed .ed-origin h2{font-size:clamp(56px,7.2vw,112px);line-height:1;letter-spacing:-.055em;max-width:1100px;margin:0 auto}
.ed-origin h2 em{color:var(--deep-copper)}
.ed-origin .lede{max-width:620px;margin:36px auto 0;font-size:20px;color:var(--muted)}
.nots{list-style:none;padding:0;margin:64px auto 0;max-width:960px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:left}
.nots li{border-top:2px solid var(--copper);padding-top:20px;font-size:16px;color:var(--muted)}
.nots strong{display:block;font:450 26px/1.2 var(--sans);letter-spacing:-.03em;color:var(--graphite);margin-bottom:6px}
.ed-origin .more{margin-top:48px}

/* FAQ: stone ground, numbered question cards */
.ed-faq .faq>div:last-child{counter-reset:q}
.ed-faq details{background:var(--ivory);border:1px solid var(--line);padding:0 26px;margin-bottom:12px}
.ed-faq details:last-child{border-bottom:1px solid var(--line)}
.ed-faq details[open]{border-color:var(--graphite)}
.ed-faq summary{justify-content:flex-start;gap:20px}
.ed-faq summary:before{counter-increment:q;content:counter(q,decimal-leading-zero);font:500 13px/1.6 var(--sans);color:var(--deep-copper);flex:0 0 26px}
.ed-faq summary:after{margin-left:auto}
.ed-faq details p{margin-left:46px}
.faq-aside{margin-top:28px;font-size:17px;color:var(--muted);max-width:300px}

@media(max-width:1020px){
 .ed-more .more-films{grid-template-columns:1fr;gap:32px}
 .contact-sheet{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .ed-origin{padding:96px 0}
 body.ed .ed-origin h2{font-size:clamp(44px,11vw,72px)}
 .ed-origin .lede{font-size:18px}
 .nots{grid-template-columns:1fr;gap:22px;margin-top:44px}
 .contact-sheet{grid-template-columns:1fr;margin-top:44px}
 .ed-faq details{padding:0 18px}
 .ed-faq details p{margin-left:0}
}


/* Typography: DM Sans throughout, upright accents in copper (supersedes earlier serif and slab rules above) */
body.ed h1,body.ed h1 em{font-family:var(--sans);font-weight:600;font-style:normal;letter-spacing:-.045em}
body.ed h2,body.ed h3{font-family:var(--sans);font-weight:500;font-style:normal;letter-spacing:-.04em}
body.ed h1 em,body.ed h2 em,body.ed h3 em{font-family:inherit;font-weight:inherit;font-style:normal;letter-spacing:inherit}
body.ed h2 em{color:var(--deep-copper)}
body.ed .dark h2 em,body.ed .showcase h2 em,body.ed .hero h1 em{color:var(--copper)}
body.ed .ed-closing h2 em{color:var(--graphite)}
body.ed .hero h1{font-size:clamp(64px,6.6vw,104px);line-height:1;letter-spacing:-.05em}
body.ed .cols h3,body.ed .ind-card h3,body.ed .plan h3{font-weight:500}
.menu-footer p{font-style:normal}

/* Callout face in the preview: DM Serif Display for highlighted phrases and the menu tagline */
body.ed h1 em,body.ed h2 em,body.ed h3 em{font-family:var(--accent);font-weight:400;font-style:normal;letter-spacing:-.015em}
.menu-footer p{font-family:var(--accent)}

/* ---- site-wide application ---- */
/* Hero: the oversized headline is for the short home headline (.hero.xl); longer headlines use a calmer size */
body.ed .hero:not(.xl) h1{font-size:clamp(40px,4.4vw,62px);line-height:1.06;letter-spacing:-.035em}
@media(max-width:760px){body.ed .hero:not(.xl) h1{font-size:clamp(34px,9.6vw,44px)}}
body.ed .hero:not(.xl){min-height:620px}
/* Inline films: centered play circle that opens the lightbox */
.film .film-play,.thumb .film-play{justify-content:center;align-items:center;padding:0;background:linear-gradient(0deg,#101b1866,transparent)}
.film .play-circle{width:110px;height:110px}
@media(max-width:760px){.film .play-circle{width:84px;height:84px}}
/* FAQ cards read on any ground */
.ed-faq:not(.stone) details{background:var(--stone);border-color:var(--stone)}
.ed-faq:not(.stone) details[open]{border-color:var(--graphite)}
/* Headings in note boxes and proof boxes follow the DM Sans scale */
body.ed .note-box h3,body.ed .proof-box h4,body.ed .offer-main h3,body.ed .also h3,body.ed .anatomy-head h3,body.ed .dg-head h3,body.ed .work-item h3{font-family:var(--sans);font-weight:500;letter-spacing:-.03em}

.ed-closing a:not(.button){color:var(--graphite);text-decoration:underline}
/* Refined logo: three bars inside the copper frame corner, with the wordmark */
.ed-head .logo img{width:250px;height:auto}
.overlay-top img{width:240px;height:auto}
.site-foot .foot img{width:260px;height:auto}
@media(max-width:760px){.ed-head .logo img{width:min(220px,56vw)}.overlay-top img{width:200px}}

/* One Day Trust Library: value stack, bonuses, price side, the promise */
.offer.tl .offer-main h3{margin-bottom:8px}
.offer .stack li{align-items:baseline;font-size:16.5px}
.offer .stack li:before{align-self:flex-start;margin-top:12px}
.offer .stack li span{flex:1;min-width:0}
.offer .stack li b{font-weight:500;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.offer .stack .tag{display:inline-block;margin-right:10px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--deep-copper);vertical-align:2px}
.offer .stack.bonus strong{display:block;font-weight:500}
.offer .stack.bonus span{color:var(--muted);font-size:15.5px}
.offer .stack.bonus strong{color:var(--graphite);font-size:16.5px}
.stack-h{margin:34px 0 4px;font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--deep-copper)}
.stack-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:18px 0 0;border-top:2px solid var(--graphite);font-size:18px;font-weight:600}
.offer .stack.bonus li:last-child{border-bottom:0}
.offer-side .price .your{display:block;margin-bottom:12px;font:500 13px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-graphite)}
.promise-mini .label{margin-bottom:10px;color:var(--copper)}
.promise-mini ul{list-style:none;padding:0;margin:0}
.promise-mini li{position:relative;padding:8px 0 8px 24px;border-top:1px solid var(--line-dark);font-size:15.5px;color:var(--ivory)}
.promise-mini li:before{content:'';position:absolute;left:0;top:19px;width:12px;height:2px;background:var(--copper)}
.offer-side .capacity{margin:0;font-size:15px;color:var(--copper)}
.promise{margin-top:24px;background:var(--graphite);color:var(--ivory);padding:46px 48px;display:grid;grid-template-columns:.85fr 2.15fr;gap:44px}
.promise h3{color:var(--ivory);font-size:clamp(32px,3.2vw,44px);line-height:1.05;margin:0 0 14px}
body.ed .promise h3 em{color:var(--copper)}
.promise>div>p:not(.label){color:var(--on-graphite);font-size:16.5px;margin:0}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.promise-grid article{border-top:2px solid var(--copper);padding-top:18px}
.promise-grid .num{display:block;font:500 13px/1 var(--sans);letter-spacing:.14em;color:var(--copper)}
.promise-grid h4{font:500 21px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ivory);margin:12px 0 10px}
.promise-grid p{color:var(--on-graphite);font-size:15.5px;margin:0}
.ed-closing .closing-extra{margin-top:18px;font-size:16px}
@media(max-width:1020px){.promise{grid-template-columns:1fr;gap:28px}.promise-grid{grid-template-columns:1fr;gap:22px}}
@media(max-width:760px){.promise{padding:32px 24px}.offer .stack li{font-size:15.5px}.offer .stack .tag{display:block;margin:0 0 6px}}

/* Free Trust Gap Audit */
.audit-check{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.audit-check .label{margin-bottom:12px;color:var(--deep-copper)}
.audit-cta{margin-top:46px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.audit-cta p{margin:0;color:var(--on-graphite);font-size:16.5px}
.audit-cta p a{color:var(--ivory)}
@media(max-width:1020px){.audit-check{grid-template-columns:1fr}}

/* Healthcare work: three client films under the campaign film */
.hc-films{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.hc-films .film-label{display:none}
.hc-film-note{margin:12px 0 0;font-size:15.5px;color:var(--muted)}
.hc-film-note strong{display:block;color:var(--graphite);font-weight:500}
@media(max-width:1020px){.hc-films{grid-template-columns:1fr}}

/* Film card: the home showcase look at card size (client films on healthcare and /work) */
.film-card{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--graphite);color:var(--ivory);border:1px solid var(--graphite)}
.film-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-card:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#101b18ed,transparent 78%),linear-gradient(90deg,#101b1877,transparent);pointer-events:none}
.film-card .film-play{z-index:2;justify-content:flex-end;align-items:flex-start;padding:20px 20px 0 0;background:none}
.film-card .play-circle{width:82px;height:82px;gap:6px}
.film-card .play-circle>span:first-child{font-size:17px}
.film-card .play-circle>span:last-child{font-size:10px}
.film-card .fc-text{position:absolute;z-index:3;left:22px;right:22px;bottom:56px;pointer-events:none}
.film-card .fc-text .label{color:var(--ivory);margin:0 0 10px;font-size:11px}
.film-card .fc-text .label:after{display:none}
.film-card h3{color:var(--ivory);font-size:clamp(24px,2.3vw,32px);line-height:1.04;letter-spacing:-.03em;margin:0}
.film-card .fc-caption{position:absolute;z-index:3;left:22px;right:22px;bottom:16px;margin:0;border-top:1px solid #f4f1e847;padding-top:11px;font:500 10.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-card.big .film-play{align-items:center;padding:0 12% 0 0}
.film-card.big .play-circle{width:130px;height:130px;gap:12px}
.film-card.big .play-circle>span:first-child{font-size:22px}
.film-card.big .play-circle>span:last-child{font-size:11px}
.film-card.big .fc-text{left:40px;right:40px;bottom:84px;max-width:760px}
.film-card.big .fc-text .label{font-size:13px;margin-bottom:18px}
.film-card.big h3{font-size:clamp(40px,4.6vw,68px);line-height:1.02}
.film-card.big .fc-caption{left:40px;right:40px;bottom:26px;font-size:11px;padding-top:18px}
.hc-films .film-card{border-color:var(--graphite)}
.work-list .film-card,.ind>div>.film-card{margin-bottom:18px}
@media(max-width:760px){
 .film-card .fc-text{left:16px;right:16px;bottom:48px}
 .film-card .fc-caption{left:16px;right:16px;bottom:12px}
 .film-card h3{font-size:22px}
 .film-card .play-circle{width:66px;height:66px}
 .film-card .play-circle>span:last-child{display:none}
 .film-card.big{aspect-ratio:4/5}
 .film-card.big .fc-text{left:20px;right:20px;bottom:70px}
 .film-card.big h3{font-size:clamp(34px,9vw,46px)}
 .film-card.big .fc-caption{left:20px;right:20px;bottom:20px;white-space:normal}
 .film-card.big .film-play{align-items:flex-start;justify-content:flex-end;padding:20px 20px 0 0}
 .film-card.big .play-circle{width:90px;height:90px}
}

/* Offer card: per-piece anchor */
.offer-side p.per{margin:14px 0 0;font-size:14.5px;color:var(--copper)}
.dg-work .hc-films{margin-bottom:22px}
#proof .quotes+.cards-note{margin-top:40px}
.film-card img[src*="stacey-portrait"]{object-position:50% 20%}

/* Home hero sub at the oversized headline */
body.ed .hero.xl .hero-sub{font-size:19px;line-height:1.5}
@media(max-width:760px){body.ed .hero.xl .hero-sub{font-size:17px}}

/* Tab panels with no right column (healthcare): one column */
.panel.solo{grid-template-columns:1fr;max-width:820px}

/* Menu open = header unchanged: the menu's top bar is the header, and the page keeps its scrollbar space */
html{scrollbar-gutter:stable;background:var(--graphite)}
dialog.fullscreen-menu{padding:0}
.menu-head{position:sticky;top:0;z-index:1}
.menu-body{padding-block:0 40px}
.menu-toggle{min-width:104px;justify-content:flex-end}

/* Proof band under the hero on outreach landing pages */
.proofbar{background:var(--copper);color:var(--graphite);padding:34px 0}
.proofbar .label{color:var(--graphite);opacity:.8}
.proofbar .label:after{background:var(--graphite)}
.proofbar .big{font:500 clamp(26px,3.2vw,40px)/1.15 var(--sans);letter-spacing:-.03em;margin:10px 0 0;max-width:30ch}
.proofbar .note{margin:12px 0 0;font-size:16px;max-width:62ch}

/* Landing pages: the three pains read as one short list */
.lp-pains li{font-size:19px}
.lp-made{max-width:720px}
.lp-more{margin-top:18px}
.logo-bar{background:var(--ivory);border-bottom:1px solid rgba(35,40,41,.12);padding:26px 0}
.logo-bar .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.logo-bar .label{margin:0;flex:0 0 auto}.logo-bar .label::after{display:none}
.logo-bar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;flex:1}
.logo-bar li{margin:0;padding:0}
.logo-bar li::before{content:none}
.logo-bar .wordmark{font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--graphite);opacity:.62;white-space:nowrap}
.logo-bar img{height:40px;width:auto;filter:grayscale(1);opacity:.7}
@media (max-width:700px){.logo-bar .wrap{gap:12px}.logo-bar ul{gap:10px 22px;justify-content:flex-start}.logo-bar .wordmark{font-size:15px}}
.audit-form{display:grid;gap:16px;background:var(--ivory);padding:30px;border:1px solid rgba(35,40,41,.12)}
.af-field{display:grid;gap:6px;font-size:15px;font-weight:600;color:var(--graphite)}
.af-field em{font-style:normal;font-weight:400;opacity:.7}
.af-field input,.af-field textarea{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border:1px solid rgba(35,40,41,.3);background:#fff;color:var(--graphite);border-radius:0;width:100%;box-sizing:border-box}
.af-field input:focus,.af-field textarea:focus{outline:2px solid var(--copper);outline-offset:1px;border-color:var(--graphite)}
.af-field [aria-invalid="true"]{border-color:#9b3d1f;outline:2px solid #9b3d1f}
.af-field small{font-weight:400;font-size:13px;opacity:.75}
.af-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.audit-form .button{justify-self:start;cursor:pointer;border:0}
.audit-form .button[disabled]{opacity:.6;cursor:wait}
.af-status{margin:0;font-weight:600;min-height:1.4em}
.audit-form.sent .af-status{color:#2f5d3a}
.af-note,.af-alt{font-size:14px;opacity:.8;margin:0}
.af-alt{margin-top:18px}
@media (max-width:700px){.audit-form{padding:20px}}
.offer .stack li b small{display:block;font-size:12px;font-weight:400;letter-spacing:.02em;opacity:.8;text-align:right}

/* Logo bar: one row. Desktop shows the list once; phones loop it sideways. */
.logo-bar .logo-track{flex:1;min-width:0;overflow:hidden}
.logo-bar .logo-track ul{flex-wrap:nowrap}
.logo-bar .logo-track .dup{display:none}
@media (max-width:1100px){.logo-bar .wrap{flex-direction:column;align-items:flex-start;gap:14px}.logo-bar .logo-track{width:100%}}
@media (max-width:1100px) and (prefers-reduced-motion:no-preference){
 .logo-bar .logo-track{display:flex;width:max-content;max-width:none;-webkit-mask-image:none}
 .logo-bar .logo-track ul,.logo-bar .logo-track .dup{display:flex;flex:0 0 auto;justify-content:flex-start;gap:0;padding-right:0;animation:pf-logos 28s linear infinite}
 .logo-bar .logo-track li{padding-right:30px}
 .logo-bar{overflow:hidden}
}
@media (max-width:1100px) and (prefers-reduced-motion:reduce){.logo-bar .logo-track{overflow-x:auto;scroll-snap-type:x mandatory}.logo-bar .logo-track ul{justify-content:flex-start;gap:0 26px}.logo-bar .logo-track li{scroll-snap-align:start}}
@keyframes pf-logos{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Home: typical agency vs Pillar & Frame */
.vs{margin-top:48px;border-top:2px solid var(--graphite)}
.vs-row{display:grid;grid-template-columns:1fr 1.3fr 1.6fr;gap:24px;padding:18px 0;border-bottom:1px solid rgba(35,40,41,.15);align-items:baseline}
.vs-row span:first-child{font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vs-row span:nth-child(2){color:var(--muted)}
.vs-row span:nth-child(3){font-weight:600;color:var(--graphite)}
.vs-head span{font:500 13px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important}
.vs-head span:nth-child(3){color:var(--deep-copper)!important}
@media (max-width:760px){.vs-row{grid-template-columns:1fr 1fr;gap:6px 18px}.vs-row span:first-child{grid-column:1/-1}.vs-head span:first-child{display:none}}

/* Home: the six deliverables and why each exists */
.deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.deliv article{border-top:2px solid var(--copper);padding-top:20px}
.deliv h3{font:450 26px/1.2 var(--sans);letter-spacing:-.03em;margin:6px 0 10px}
.deliv .what{font-size:17px;color:var(--graphite);margin:0 0 14px}
.deliv .why,.deliv .where{font-size:15px;color:var(--muted);margin:0 0 10px}
.deliv strong{color:var(--graphite);font-weight:600}
@media (max-width:980px){.deliv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.deliv{grid-template-columns:1fr}}
.deliv .label{margin:0}.deliv .label::after{display:none}

/* The ladder: audit → Proof Library → Proof Engine */
.ladder{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:none}
.ladder li{border:1px solid rgba(35,40,41,.15);border-right:0;padding:30px 28px;display:flex;flex-direction:column;gap:6px;background:var(--ivory)}
.ladder li:last-child{border-right:1px solid rgba(35,40,41,.15);background:var(--graphite);color:var(--ivory)}
.ladder li:nth-child(2){background:#fff;box-shadow:inset 0 3px 0 var(--copper)}
.ladder li::before{content:none}
.ladder .label{margin:0}.ladder .label::after{display:none}
.ladder h3{font:450 26px/1.2 var(--sans);letter-spacing:-.03em;margin:8px 0 0}
.ladder .lp{font:500 22px/1.2 var(--sans);color:var(--deep-copper);margin:0 0 6px}
.ladder li:last-child .lp{color:var(--copper)}
.ladder li:last-child .label,.ladder li:last-child p{color:var(--on-graphite,#e9e4d8)}
.ladder li:last-child .text-link{color:var(--ivory)}
.ladder p{font-size:15.5px;margin:0 0 12px}
.ladder .text-link{margin-top:auto}
@media (max-width:860px){.ladder{grid-template-columns:1fr}.ladder li{border-right:1px solid rgba(35,40,41,.15);border-bottom:0}.ladder li:last-child{border-bottom:1px solid rgba(35,40,41,.15)}}

/* IT page: deliverables in a tighter grid */
.deliv.it{margin-top:56px}
.deliv.it .what{font-size:16px;color:var(--muted)}

/* Frontier gallery */
.fti-gallery{display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px;margin-top:40px;align-items:stretch}
.fti-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;max-height:520px;display:block}
@media (max-width:760px){.fti-gallery{grid-template-columns:1fr 1fr}.fti-gallery img:nth-child(2){grid-column:1/-1;order:-1;max-height:300px}.fti-gallery img{max-height:340px}}
.h3big{font:450 34px/1.15 var(--sans);letter-spacing:-.03em;margin:0}

/* LinkedIn-style post cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;align-items:start}
.post{background:#fff;border:1px solid rgba(35,40,41,.14);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.post header{display:flex;gap:10px;align-items:center}
.post .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.post header strong{display:block;font-size:15px}
.post header span{font-size:12.5px;color:var(--muted)}
.post-text{font-size:17px;line-height:1.45;margin:0;color:var(--graphite)}
.post-media img{width:100%;height:auto;border-radius:6px;display:block}
.post-media.vid{position:relative;aspect-ratio:4/5;border-radius:6px;background-color:#16202d;background-image:linear-gradient(160deg,#1d2a3a,#0f1620);color:#fff;display:flex;align-items:flex-end;padding:20px;overflow:hidden}
.post-media.vid p{font:500 21px/1.25 var(--sans);margin:0 0 54px;letter-spacing:-.01em}
.post-media.vid .film-play{position:absolute;left:20px;bottom:18px}
.post-desc{font-size:14px;color:var(--muted);margin:0}
.post footer{border-top:1px solid rgba(35,40,41,.12);padding-top:10px;font-size:14px;color:var(--muted)}
.post footer strong{color:var(--graphite);font-size:16px}
@media (max-width:980px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.posts{grid-template-columns:1fr}}

/* IBM Bob series */
.bob{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.bob article{position:relative;aspect-ratio:9/12;background-color:#16202d;background-image:linear-gradient(170deg,#21304a,#101722);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.bob .label{color:var(--copper);margin:0}.bob .label::after{display:none}
.bob .hook{font:500 23px/1.25 var(--sans);letter-spacing:-.015em;margin:0 0 60px}
.bob .film-play{position:absolute;left:24px;bottom:22px}
.cards-note.on-dark{color:var(--on-graphite,#d8d2c4)}
@media (max-width:860px){.bob{grid-template-columns:1fr}.bob article{aspect-ratio:auto;min-height:260px}}

/* Real estate page: case studies */
.re-work{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;margin-top:44px;align-items:start}
.re-case{background:var(--ivory);padding:28px;border-top:2px solid var(--copper)}
.re-case .label{margin:0}.re-case .label::after{display:none}
.re-case h3{font:450 28px/1.2 var(--sans);letter-spacing:-.03em;margin:8px 0 12px}
.re-films{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.re-case .quote{margin:8px 0 0}
.re-side{display:grid;gap:28px}
@media (max-width:900px){.re-work{grid-template-columns:1fr}.re-films{grid-template-columns:1fr}}
.fti-gallery.four{grid-template-columns:1fr 1fr}
.fti-gallery.four img{aspect-ratio:4/3;height:auto;max-height:none}
@media (max-width:760px){.fti-gallery.four{grid-template-columns:1fr}.fti-gallery.four img:nth-child(2){grid-column:auto;order:0;max-height:none}}
.bob.two{grid-template-columns:1fr 1fr}
.bob.two article{aspect-ratio:16/10}
.bob article.has-poster{padding:0;overflow:hidden}
.bob article.has-poster .bob-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bob article.has-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,22,34,.15) 30%,rgba(16,22,34,.88) 100%)}
.bob article.has-poster>*:not(.bob-poster){position:relative;z-index:1}
.bob article.has-poster .label{position:absolute;top:22px;left:24px}
.bob article.has-poster .hook{position:absolute;left:24px;right:24px;bottom:78px;margin:0}
.bob article.has-poster .film-play{position:absolute;z-index:2}
@media (max-width:860px){.bob.two{grid-template-columns:1fr}.bob.two article{aspect-ratio:16/11;min-height:0}}
.bob.two article .film-play,.bob.two article.has-poster .film-play{position:absolute;inset:0;transform:none;margin:0;justify-content:flex-end;align-items:flex-start;padding:16px;background:none}
.bob.two article .hook{position:absolute;left:24px;right:24px;bottom:24px;margin:0}
.bob.two article .label{position:absolute;top:22px;left:24px}
@media (max-width:860px){
 .bob.two article{aspect-ratio:auto;min-height:330px}
 .bob.two article .hook{font-size:19px;bottom:20px;left:20px;right:20px}
 .bob.two article .label{top:18px;left:20px;right:96px}
 .bob.two article .film-play{padding:10px}.bob.two .play-circle{transform:scale(.78);transform-origin:top right}
}
#textable h2+p{margin-top:26px}

/* Under the offer: free first step and optional monthly step (replaces the separate ladder section) */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;border:1px solid rgba(35,40,41,.15)}
.paths>div{padding:28px 30px;background:var(--ivory);display:flex;flex-direction:column;gap:6px}
.paths>div.dark{background:var(--graphite);color:var(--ivory)}
.paths .label{margin:0}.paths .label::after{display:none}
.paths h3{font:450 24px/1.2 var(--sans);letter-spacing:-.02em;margin:6px 0 4px}
.paths p{font-size:15.5px;margin:0 0 12px}
.paths .dark p,.paths .dark .label{color:var(--on-graphite)}
.paths .dark .text-link{color:var(--ivory)}
.paths .text-link{margin-top:auto}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
/* "Prepared for {org}" on outreach links */
.prepared{background:var(--ivory);border-bottom:1px solid rgba(35,40,41,.12)}
.prepared .wrap{padding-block:10px;font-size:14px;color:var(--muted);letter-spacing:.01em}
.prepared strong{color:var(--graphite);font-weight:600}

/* Health centers: purpose map and packages */
.vs.map .vs-row span:first-child{font:600 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--graphite)}
.vs.map .vs-row span:nth-child(2){font-weight:600;color:var(--deep-copper)}
.vs.map .vs-row span:nth-child(3){font-weight:400;color:var(--graphite)}
.vs.map .vs-head span{font:500 13px/1.4 var(--sans)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--muted)!important}
@media (max-width:760px){.vs.map .vs-head span:first-child{display:block}}
.hc-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
.hc-tiers article{background:var(--ivory);border:1px solid rgba(35,40,41,.15);padding:30px 28px;display:flex;flex-direction:column;gap:6px}
.hc-tiers article.featured{background:var(--graphite);color:var(--ivory);border-color:var(--graphite)}
.hc-tiers .label{margin:0}.hc-tiers .label::after{display:none}
.hc-tiers .flag{margin:0 0 6px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.hc-tiers h3{font:450 26px/1.2 var(--sans);letter-spacing:-.02em;margin:8px 0 0}
.hc-tiers .price{font:500 34px/1.1 var(--sans);letter-spacing:-.02em;margin:6px 0 10px;color:var(--deep-copper)}
.hc-tiers .featured .price{color:var(--copper)}
.hc-tiers p{font-size:15.5px;margin:0 0 10px}
.hc-tiers .featured p,.hc-tiers .featured .label{color:var(--on-graphite)}
.hc-tiers .path{font-size:14px;font-weight:600;margin-top:auto;padding-top:10px;border-top:1px solid rgba(35,40,41,.15)}
.hc-tiers .featured .path{border-color:rgba(255,255,255,.18);color:var(--ivory)}
.hc-tiers ul.ticks{margin:4px 0 14px;font-size:15px}.hc-tiers ul.ticks li{margin-bottom:8px}
.hc-tiers .featured ul.ticks li{color:var(--on-graphite)}
.hc-tiers+.cards-note{margin-top:20px}
.hc-tiers .button{align-self:flex-start;margin-top:12px}
.hc-tiers+.promise{margin-top:40px}
@media (max-width:900px){.hc-tiers{grid-template-columns:1fr}}

/* Health centers: bonus stack */
.hc-bonus{list-style:none;padding:0;margin:44px 0 0;border-top:2px solid var(--graphite)}
.hc-bonus li{display:grid;grid-template-columns:110px 1fr auto;gap:8px 32px;align-items:baseline;padding:24px 0;border-bottom:1px solid rgba(35,40,41,.15)}
.hc-bonus .label{margin:0;color:var(--deep-copper)}.hc-bonus .label::after{display:none}
.hc-bonus h3{font:450 24px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 6px}
.hc-bonus p:not(.label){margin:0;font-size:16px;color:var(--muted);max-width:62ch}
.hc-bonus b{font:500 17px/1.3 var(--sans);color:var(--deep-copper);white-space:nowrap;font-variant-numeric:tabular-nums}
.hc-bonus-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:20px 0 0;font-size:20px;font-weight:600}
.hc-bonus-total b{font-size:28px;color:var(--deep-copper);font-variant-numeric:tabular-nums}
.hc-bonus-free{margin:6px 0 0;text-align:right;font-weight:600;color:var(--graphite)}
.hc-tiers ul.ticks li.bonus strong{font-weight:600}
@media (max-width:760px){.hc-bonus li{grid-template-columns:1fr;gap:6px}.hc-bonus-free{text-align:left}.hc-bonus-total{flex-wrap:wrap;gap:4px 16px}}

/* Health centers: example films */
.hc-examples{margin-top:56px;padding-top:34px;border-top:1px solid rgba(35,40,41,.15)}
.hc-examples>p:not(.label):not(.lp-more){margin:8px 0 0;max-width:62ch;color:var(--muted)}
.hc-films.two{grid-template-columns:repeat(2,1fr)}
.hc-examples .lp-more{margin-top:18px}
#community .split>div:first-child .film-card{margin-top:30px}
@media(max-width:1020px){.hc-films.two{grid-template-columns:1fr}}

/* Film lightbox: no blur behind a playing video (it makes phones drop frames), and pause page motion while it's open */
dialog.film-lightbox::backdrop{background:#0d1312f2;backdrop-filter:none;-webkit-backdrop-filter:none}
body.modal-open .logo-track,body.modal-open .marquee{animation-play-state:paused}
@media (max-width:760px) and (orientation:landscape){dialog.film-lightbox{max-height:100dvh;padding:8px}.film-lightbox .overlay-top{padding-bottom:6px}.lb-frame{margin-top:6px;max-height:84dvh}.film-lightbox .lightbox-caption{display:none}}

/* Home hero fits above the fold on computers (29 October 2026). Home only (the .hero.xl page); phones and every other page unchanged.
   A wider home layout (less left margin), a calmer headline, and a hero sized to the screen. */
@media(min-width:1021px){
 body:has(.hero.xl) .wrap{width:min(1320px,calc(100% - 96px))}
 body.ed .hero.xl{grid-template-columns:1.18fr .82fr;min-height:calc(100svh - 97px)}
 body.ed .hero.xl .hero-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,6svh,72px) 56px clamp(36px,6svh,72px) max(48px,calc((100vw - 1320px)/2))}
 body.ed .hero.xl h1{font-size:clamp(48px,4.4vw,74px);line-height:1.03;letter-spacing:-.045em;margin-bottom:22px;max-width:none}
 body.ed .hero.xl .label{margin-bottom:18px}
 body.ed .hero.xl .hero-sub{font-size:18px;line-height:1.5;max-width:540px;margin-bottom:26px}
 body.ed .hero.xl .hero-note{margin-top:18px}
}

/* /foundations: four steps and the six needs */
.fd-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.fd-steps article{background:var(--ivory);border:1px solid rgba(35,40,41,.15);padding:28px 24px;display:flex;flex-direction:column;gap:6px}
.fd-steps article.featured{background:var(--graphite);color:var(--ivory);border-color:var(--graphite)}
.fd-steps .label{margin:0}.fd-steps .label::after{display:none}
.fd-steps h3{font:500 24px/1.15 var(--sans);letter-spacing:-.03em;margin:6px 0 0}
.fd-steps .price{font:500 28px/1.1 var(--sans);letter-spacing:-.02em;color:var(--deep-copper);margin:4px 0 8px}
.fd-steps .featured .price{color:var(--copper)}
.fd-steps p{font-size:16px;margin:0}
.fd-steps .terms{margin-top:auto;padding-top:14px;font-size:14px;color:var(--muted)}
.fd-steps .featured .terms,.fd-steps .featured .label{color:var(--on-graphite)}
.fd-six{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.fd-six li{display:flex;gap:18px;align-items:baseline;padding:20px 0;border-top:1px solid rgba(35,40,41,.15);font:500 21px/1.3 var(--sans);letter-spacing:-.02em}
.fd-six span{font-size:13px;letter-spacing:.14em;color:var(--deep-copper)}
.fd-not{margin:36px 0 0;max-width:760px;color:var(--muted);font-size:16px}
@media(max-width:1100px){.fd-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.fd-steps,.fd-six{grid-template-columns:1fr}.fd-six li{font-size:19px;padding:16px 0}}

/* /foundations visuals: the year map, the filming day, what comes out */
.fd-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.fd-tag{display:inline-block;padding:4px 10px;font:500 12px/1.3 var(--sans);letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
.fd-tag.past{background:var(--graphite);color:var(--ivory)}
.fd-tag.partner{background:var(--copper);color:var(--graphite)}
.fd-tag.ask{background:var(--deep-copper);color:var(--ivory)}
.fd-tag.review{background:var(--stone);color:var(--graphite);border-color:rgba(35,40,41,.25)}
.fd-tag.story{background:transparent;color:var(--graphite);border-color:var(--graphite)}
.fd-year{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fd-year li{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;background:#fff;border:1px solid rgba(35,40,41,.12)}
.fd-year .m{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--deep-copper)}
.fd-year .t{font:500 17px/1.3 var(--sans);letter-spacing:-.01em;flex:1}
.fd-year .fd-tag{align-self:flex-start}
.fd-note{margin:18px 0 0;font-size:15px;color:var(--muted)}
.fd-note.on-dark{color:var(--on-graphite)}
.fd-day{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fd-day li{border-top:2px solid var(--copper);padding-top:16px}
.fd-day .when{display:block;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.fd-day h3{font:500 24px/1.15 var(--sans);letter-spacing:-.03em;color:var(--ivory);margin:12px 0 8px}
.fd-day p{margin:0;font-size:16px;color:var(--on-graphite)}
.fd-out{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line-dark);padding-top:32px}
.fd-out strong{display:block;font:400 56px/1 var(--accent);color:var(--copper)}
.fd-out span{display:block;margin-top:8px;font-size:16px;color:var(--ivory)}
@media(max-width:1100px){.fd-year{grid-template-columns:repeat(3,1fr)}.fd-day,.fd-out{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.fd-year{grid-template-columns:repeat(2,1fr);gap:8px}.fd-year li{padding:12px}.fd-year .t{font-size:15px}.fd-day{grid-template-columns:1fr}.fd-out strong{font-size:44px}}

/* ---- Studio elements (31 October 2026): pill banner, scrolling client strip, photo grid, photo feature,
   timeline steps, testimonial, photo call-to-action and photo footer. Graphite, ivory, stone, copper;
   DM Sans with DM Serif Display accents, as everywhere else. ---- */
@keyframes pf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* scrolling pill banner (replaces the plain strip under each hero) */
.pill-rail{background:var(--graphite);padding:18px 0 22px;overflow:hidden;border-top:1px solid var(--line-dark)}
.pill-track{display:flex;width:max-content;animation:pf-marquee 60s linear infinite}
.pill-rail:hover .pill-track{animation-play-state:paused}
.pill-track ul{list-style:none;margin:0;padding:0 6px;display:flex;gap:12px}
.pill-track li{display:flex;align-items:center;gap:12px;margin:0;padding:6px 18px 6px 6px;background:var(--ivory);color:var(--graphite);border-radius:12px;font:500 15px/1.3 var(--sans);white-space:nowrap}
.pill-track li::before{content:none}
.pill-track img{width:56px;height:40px;object-fit:cover;border-radius:8px;flex:0 0 auto}

/* "Real projects for": centred label over a scrolling row of client names */
.logo-bar{padding:56px 0 50px;border-bottom:0;overflow:hidden}
.logo-bar .wrap{display:block;text-align:center}
.logo-bar .label{margin:0 0 30px;display:block}
.logo-bar .logo-track{display:flex;width:max-content;animation:pf-marquee 45s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-bar .logo-track ul{flex:0 0 auto;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;padding:0}
.logo-bar .logo-track ul.dup{display:flex}
.logo-bar li{padding:0 44px}
.logo-bar .wordmark{font-size:19px;opacity:.85}
.logo-scroller{width:min(1180px,calc(100% - 80px));margin-inline:auto;overflow:hidden}

/* photo grid: titles over the photo, the rest underneath */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.photo-grid .pg{position:relative;display:flex;flex-direction:column}
.photo-grid .pg-img{position:relative;border-radius:14px;overflow:hidden;min-height:300px;flex:1;background:var(--graphite)}
.photo-grid .pg-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-grid .pg-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,42,41,.78) 0%,rgba(36,42,41,.25) 45%,rgba(36,42,41,0) 70%)}
.photo-grid .pg-text{position:absolute;z-index:1;left:22px;right:22px;top:20px;color:var(--ivory)}
.photo-grid .pg-text h3{color:var(--ivory);font-size:24px;line-height:1.15;margin:0 0 8px}
.photo-grid .pg-text p{color:var(--ivory);opacity:.88;font-size:15.5px;line-height:1.45;margin:0}
.photo-grid .pg-more{padding:14px 2px 0;font-size:15px;color:var(--muted)}
.photo-grid .pg-more p{margin:0 0 6px}
.photo-grid .pg:nth-child(1){grid-column:span 2;grid-row:span 2}
.photo-grid .pg:nth-child(1) .pg-img{min-height:560px}
.photo-grid .pg:nth-child(4){grid-column:span 2}
.photo-grid .pg:nth-child(5),.photo-grid .pg:nth-child(6){grid-column:span 2}

/* photo feature: rounded photo with the copy laid over it */
.photo-feature{position:relative;border-radius:16px;overflow:hidden;min-height:540px;display:flex;flex-direction:column;justify-content:space-between;padding:48px;color:var(--ivory);margin-bottom:56px}
.photo-feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-feature::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,42,41,.82) 0%,rgba(36,42,41,.35) 55%,rgba(36,42,41,.6) 100%)}
.photo-feature>*{position:relative}
.photo-feature .label{color:var(--on-graphite)}
.photo-feature h2{color:var(--ivory);max-width:640px;font-size:clamp(36px,4.2vw,58px)}
.photo-feature h2 em{color:var(--copper)}
.photo-feature p{color:var(--ivory);max-width:560px;font-size:18px}
.photo-feature .button{align-self:flex-start}

/* three steps as a numbered timeline */
.method{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:start}
.method .head{margin-bottom:0;position:sticky;top:120px}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:1px;background:var(--line-dark)}
.timeline li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:26px;margin:0;padding:0 0 46px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:none}
.timeline .step{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-dark);background:var(--graphite);display:grid;place-items:center;font:400 18px/1 var(--accent);color:var(--ivory)}
.timeline h3{color:var(--ivory);font-size:24px;margin:10px 0 10px}
.timeline p{color:var(--on-graphite);font-size:16.5px;margin:0}
.timeline p strong{color:var(--ivory);font-weight:500}

/* testimonial: round portrait, the quote, the numbers and a link to the work */
.testimonial{display:grid;grid-template-columns:260px 1fr;gap:64px;align-items:center}
.testimonial .portrait{width:240px;height:240px;border-radius:50%;object-fit:cover}
.testimonial .t-client{font:600 15px/1.3 var(--sans);letter-spacing:-.01em;margin:0 0 22px;color:var(--ivory)}
.testimonial blockquote{margin:0 0 22px;font:400 clamp(22px,2.2vw,28px)/1.4 var(--sans);color:var(--ivory);letter-spacing:-.01em}
.testimonial figcaption{color:var(--on-graphite);font-size:16px;margin-bottom:34px}
.testimonial .t-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px}
.testimonial .t-num strong{display:block;font:400 34px/1 var(--accent);color:var(--ivory)}
.testimonial .t-num span{font-size:13.5px;color:var(--on-graphite)}
.testimonial .t-num+.t-num{padding-left:40px;border-left:1px solid var(--line-dark)}
.t-card{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border:1px solid var(--line-dark);border-radius:12px;color:var(--ivory);text-decoration:none;max-width:340px}
.t-card:hover{border-color:var(--copper)}
.t-card img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.t-card small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-graphite);margin-bottom:4px}
.quote-more{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px;padding-top:40px;border-top:1px solid var(--line-dark)}
.quote-more figure{margin:0}
.quote-more blockquote{margin:0 0 12px;color:var(--ivory);font-size:18px;line-height:1.5}
.quote-more figcaption{color:var(--on-graphite);font-size:15px}

/* call to action: rounded block with a photo in it */
.ed-closing{background:var(--ivory);color:var(--graphite);padding:96px 0}
.cta-card{position:relative;border-radius:16px;overflow:hidden;min-height:440px;display:flex;align-items:center;padding:64px}
.cta-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(36,42,41,.92) 0%,rgba(36,42,41,.7) 45%,rgba(36,42,41,.15) 100%)}
.cta-card .closing-copy{position:relative;max-width:560px}
.ed-closing .cta-card .label{color:var(--on-graphite)}
.ed-closing .cta-card .label:after{background:var(--on-graphite)}
.ed-closing .cta-card h2{color:var(--ivory);font-size:clamp(40px,4.6vw,64px);line-height:1.04;margin-bottom:22px}
.ed-closing .cta-card h2 em{color:var(--copper)}
.ed-closing .cta-card p{color:var(--ivory);font-size:18px}
.ed-closing .cta-card .button{background:var(--copper);color:var(--graphite);border-color:var(--copper);margin:10px 0 22px}
.ed-closing .cta-card .button:hover{background:var(--ivory);border-color:var(--ivory)}
.ed-closing .cta-card a:not(.button){color:var(--copper)}
.ed-closing .cta-card .closing-extra{color:var(--on-graphite);font-size:15px}

/* footer: a big line and the call to action over a photo, then the links */
.foot-hero{position:relative;overflow:hidden;text-align:center;padding:150px 0 120px}
.foot-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foot-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,42,41,.55) 0%,rgba(36,42,41,.62) 60%,var(--graphite) 100%)}
.foot-hero .wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.foot-hero .foot-big{font:400 clamp(44px,5.6vw,84px)/1.02 var(--sans);letter-spacing:-.045em;color:var(--ivory);max-width:900px;margin:0 0 34px}
.foot-hero .foot-big em{font-family:var(--accent);color:var(--copper);letter-spacing:-.01em}
.site-foot.has-hero{padding-top:0}
.site-foot.has-hero .wrap.foot{padding-top:56px;border-top:1px solid var(--line-dark)}

@media(max-width:1020px){
 .photo-grid{grid-template-columns:1fr 1fr}
 .photo-grid .pg:nth-child(n){grid-column:span 1;grid-row:auto}
 .photo-grid .pg:nth-child(1){grid-column:span 2}
 .photo-grid .pg:nth-child(1) .pg-img{min-height:380px}
 .method{grid-template-columns:1fr;gap:44px}.method .head{position:static}
 .testimonial{grid-template-columns:1fr;gap:32px}.testimonial .portrait{width:180px;height:180px}
 .cta-card{padding:44px 32px;min-height:400px}
 .quote-more{grid-template-columns:1fr}
}
@media(max-width:640px){
 .photo-grid{grid-template-columns:1fr}
 .photo-grid .pg:nth-child(1){grid-column:auto}
 .photo-feature{padding:30px 22px;min-height:480px}
 .cta-card{padding:34px 22px}
 .cta-card::before{background:linear-gradient(180deg,rgba(36,42,41,.9) 0%,rgba(36,42,41,.75) 70%,rgba(36,42,41,.55) 100%)}
 .foot-hero{padding:110px 0 90px}
 .testimonial .t-num+.t-num{padding-left:0;border-left:0}
}
/* layering: photo at the back, the darkening layer over it, the words on top */
.photo-feature>img,.cta-card>img,.foot-hero>img{z-index:0}
.photo-feature::before,.cta-card::before,.foot-hero::before{z-index:1}
.photo-feature>div,.cta-card .closing-copy,.foot-hero .wrap{z-index:2;position:relative}
body.ed .photo-feature h2,body.ed .ed-closing .cta-card h2,body.ed .foot-hero .foot-big{color:var(--ivory)}
body.ed .photo-feature h2 em,body.ed .ed-closing .cta-card h2 em,body.ed .foot-hero .foot-big em{color:var(--copper)}
body.ed .photo-feature .label,body.ed .ed-closing .cta-card .label{color:var(--on-graphite)}

/* ---- Banners always move on their own, like the studio site: no scroll bar, no swiping. They pause while
   hovered or focused, and run slower (never stop) when the device asks for reduced motion. The older phone
   rules that animated each list separately, or turned the client row into a swipe strip, are switched off. ---- */
.pill-rail,.logo-bar,.logo-scroller{overflow:hidden!important}
.logo-bar .logo-track{overflow:visible!important;scroll-snap-type:none!important;flex:none;max-width:none}
.logo-bar .logo-track ul,.logo-bar .logo-track .dup{animation:none!important;display:flex!important;flex:0 0 auto}
.pill-rail:focus-within .pill-track,.logo-bar:hover .logo-track,.logo-bar:focus-within .logo-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.pill-track{animation-duration:150s!important}.logo-bar .logo-track{animation-duration:120s!important}}

/* ---- Each page uses the elements in its own way (31 October 2026) ---- */
/* banner tones: stone (healthcare), ivory (mortgage brokers) */
.pill-rail.stone{background:var(--stone);border-top:0}
.pill-rail.stone .pill-track li{background:var(--ivory);box-shadow:0 0 0 1px rgba(35,40,41,.1)}
.pill-rail.ivory{background:var(--ivory);border-top:1px solid rgba(35,40,41,.1);border-bottom:1px solid rgba(35,40,41,.1)}
.pill-rail.ivory .pill-track li{background:var(--stone)}
/* ticker (construction, the audit): a site-board line of words, no pills */
.pill-rail.ticker{padding:26px 0}
.pill-rail.ticker .pill-track ul{gap:0;padding:0}
.pill-rail.ticker .pill-track li{background:none;border-radius:0;padding:0 30px;gap:30px;color:var(--ivory);font:500 clamp(22px,2.4vw,32px)/1.1 var(--sans);letter-spacing:-.025em}
.pill-rail.ticker .pill-track li::after{content:"";width:10px;height:10px;background:var(--copper);transform:rotate(45deg);flex:0 0 auto;margin-left:30px}
.pill-rail.ticker.stone .pill-track li{color:var(--graphite);box-shadow:none}
.pill-rail.ticker.stone .pill-track li::after{background:var(--deep-copper)}
/* stats (IT and cybersecurity): the number leads each pill */
.pill-rail.stats .pill-track li{background:transparent;color:var(--ivory);border:1px solid var(--line-dark);padding:10px 22px 10px 10px;gap:14px}
.pill-rail.stats .pill-track b{display:inline-grid;place-items:center;min-width:56px;height:40px;padding:0 12px;border-radius:8px;background:var(--copper);color:var(--graphite);font:400 20px/1 var(--accent)}

/* steps across (healthcare, construction): numbers on one line, read left to right */
.method.across{grid-template-columns:1fr;gap:56px}
.method.across .head{position:static;max-width:760px}
.timeline.across{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:36px}
.timeline.across::before{left:24px;right:24px;top:23px;bottom:auto;width:auto;height:1px}
.timeline.across li{grid-template-columns:1fr;gap:22px;padding:0;align-content:start}
.timeline.across h3{margin-top:0}
/* steps on a light background (healthcare, mortgage brokers, IT) */
.timeline.on-light::before{background:rgba(35,40,41,.2)}
.timeline.on-light .step{background:var(--ivory);border-color:rgba(35,40,41,.3);color:var(--graphite)}
.stone .timeline.on-light .step{background:var(--stone)}
.timeline.on-light h3{color:var(--graphite)}
.timeline.on-light p{color:var(--muted)}
.timeline.on-light p strong{color:var(--graphite)}
.method>div>.head{position:static}
.method .head-photo{margin-top:36px;border-radius:14px;overflow:hidden}
.method .head-photo img{display:block;width:100%;height:auto}

/* photo grid, even (IT and cybersecurity): six equal portrait tiles, the words at the foot of each photo */
.photo-grid.even{grid-template-columns:repeat(3,1fr)}
.photo-grid.even .pg:nth-child(n){grid-column:auto;grid-row:auto}
.photo-grid.even .pg-img,.photo-grid.even .pg:nth-child(1) .pg-img{min-height:420px}
.photo-grid.even .pg-img::after{background:linear-gradient(0deg,rgba(36,42,41,.88) 0%,rgba(36,42,41,.4) 45%,rgba(36,42,41,0) 70%)}
.photo-grid.even .pg-text{top:auto;bottom:22px}

/* testimonial on a light background, portrait on the right (mortgage brokers) */
.testimonial.light{grid-template-columns:1fr 260px}
.testimonial.light .portrait{order:2}
.testimonial.light .t-client,.testimonial.light blockquote,.testimonial.light .t-num strong{color:var(--graphite)}
.testimonial.light figcaption,.testimonial.light .t-num span{color:var(--muted)}
.testimonial.light .t-card{color:var(--graphite);border-color:rgba(35,40,41,.2);background:var(--ivory)}
.testimonial.light .t-card small{color:var(--muted)}

/* call-to-action block, split: the photo on one side, the words on graphite on the other (healthcare, IT) */
.cta-card.split{display:grid;grid-template-columns:1fr 1fr;padding:0;background:var(--graphite);min-height:480px}
.cta-card.split>img{position:relative;inset:auto;height:100%;min-height:480px}
.cta-card.split::before{display:none}
.cta-card.split .closing-copy{padding:64px 56px;align-self:center}
.cta-card.split.flip>img{order:2}
/* call-to-action block, centred (mortgage brokers, the audit) */
.cta-card.center{justify-content:center;text-align:center;min-height:520px}
.cta-card.center::before{background:linear-gradient(180deg,rgba(36,42,41,.62) 0%,rgba(36,42,41,.86) 100%)}
.cta-card.center .closing-copy{max-width:720px;margin-inline:auto}
.cta-card.center .closing-copy p{margin-inline:auto}
.cta-card.center .closing-copy .label:after{margin-inline:auto}

@media(max-width:1020px){
 .timeline.across{grid-template-columns:1fr;gap:0}
 .timeline.across::before{left:23px;right:auto;top:24px;bottom:24px;width:1px;height:auto}
 .timeline.across li{grid-template-columns:48px 1fr;gap:26px;padding:0 0 40px}
 .timeline.across li:last-child{padding-bottom:0}
 .timeline.across h3{margin-top:10px}
 .photo-grid.even{grid-template-columns:1fr 1fr}
 .testimonial.light{grid-template-columns:1fr}.testimonial.light .portrait{order:0}
 .cta-card.split{grid-template-columns:1fr}
 .cta-card.split>img,.cta-card.split.flip>img{order:0;min-height:280px;height:280px}
 .cta-card.split .closing-copy{padding:40px 32px}
}
@media(max-width:640px){
 .photo-grid.even{grid-template-columns:1fr}
 .photo-grid.even .pg-img,.photo-grid.even .pg:nth-child(1) .pg-img{min-height:340px}
 .pill-rail.ticker .pill-track li{padding:0 20px;gap:20px}
 .pill-rail.ticker .pill-track li::after{margin-left:20px}
 .cta-card.split .closing-copy{padding:32px 22px}
 .cta-card.center{padding:40px 22px}
}

/* ---- /foundations walkthrough: the whole process in one panel that stays in place (31 October 2026).
   Timeline on top, the panel in the middle, back and next underneath. Without JavaScript every step shows in order. ---- */
.wt{margin-top:8px}
.wt-rail,.wt-ctrl{display:none}
.wt.ready .wt-rail{display:flex;gap:18px;margin-bottom:22px}
.wt-group{display:flex;flex-direction:column;gap:10px;min-width:0}
.wt-group.g0{flex:3.2}.wt-group.g1{flex:2.6}.wt-group.g2{flex:2.4}.wt-group.g3{flex:10}
.wt-gl{margin:0;font:600 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-gl .short{display:none}
.wt-stops{display:flex;gap:4px}
.wt-stop{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--muted);font:500 13px/1.2 var(--sans)}
.wt-stop .bar{display:block;height:6px;border-radius:3px;background:rgba(35,40,41,.14);transition:background .25s}
.wt-stop .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-stop:hover .bar{background:rgba(35,40,41,.32)}
.wt-stop.done .bar{background:var(--graphite)}
.wt-stop[aria-current] .bar{background:var(--copper)}
.wt-stop[aria-current]{color:var(--graphite);font-weight:600}
.wt-stop:focus-visible{outline:2px solid var(--copper);outline-offset:4px;border-radius:4px}
.wt-stage{display:grid;gap:18px}
.wt.ready .wt-stage{gap:0}
.wt-panel{background:var(--graphite);color:var(--ivory);border-radius:16px;padding:48px;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.wt.ready .wt-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .35s,visibility 0s .35s}
.wt.ready .wt-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s}
.wt-text .label{color:var(--copper)}
.wt-text .label::after{background:var(--copper)}
.wt-text h3{font:400 clamp(30px,3.2vw,44px)/1.08 var(--sans);letter-spacing:-.035em;color:var(--ivory);margin:0 0 18px}
.wt-text p{color:var(--on-graphite);font-size:17px;line-height:1.6;margin:0 0 22px;max-width:480px}
.wt-text .fd-tag{margin-right:6px;vertical-align:1px}
.wt-text .button{margin-top:4px}
/* visuals */
.wt-card{background:var(--ivory);color:var(--graphite);border-radius:14px;padding:28px 30px;max-width:420px;justify-self:center;width:100%}
.wt-cap{margin:0 0 16px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--deep-copper)}
.wt-card ul{list-style:none;margin:0;padding:0}
.wt-card li{display:flex;align-items:center;gap:14px;padding:15px 0;border-top:1px solid rgba(35,40,41,.12);font:500 18px/1.3 var(--sans);letter-spacing:-.01em}
.wt-card li::before{content:"";width:20px;height:20px;border-radius:50%;border:1.5px solid var(--deep-copper);flex:0 0 auto}
.wt-form li::before{border-radius:5px}
.wt-plan ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wt-plan li{background:rgba(244,241,232,.06);border:1px solid var(--line-dark);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.wt-plan b{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.wt-plan span{font-size:13.5px;line-height:1.3;color:var(--ivory)}
.wt-plan i{font-style:normal;align-self:flex-start;font-size:11px;padding:2px 7px}
.wt-day{list-style:none;margin:0;padding:0}
.wt-day li{display:grid;grid-template-columns:110px 1fr;gap:4px 18px;padding:16px 0;border-top:1px solid var(--line-dark)}
.wt-day li:first-child{border-top:0}
.wt-day span{grid-row:span 2;font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--copper);padding-top:4px}
.wt-day strong{font:500 21px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ivory)}
.wt-day em{font-style:normal;color:var(--on-graphite);font-size:15px}
.wt-out{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wt-out li{background:var(--ivory);color:var(--graphite);border-radius:14px;padding:24px 22px}
.wt-out strong{display:block;font:400 56px/1 var(--accent);color:var(--deep-copper)}
.wt-out span{display:block;margin-top:8px;font-size:15px}
.wt-year{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.wt-year li{height:30px;border-radius:6px;background:rgba(244,241,232,.08);display:grid;place-items:center;font:500 10.5px/1 var(--sans);color:var(--on-graphite)}
.wt-year li.gone{background:rgba(244,241,232,.2);color:var(--ivory)}
.wt-year li.now{background:var(--copper);color:var(--graphite);font-weight:600}
.wt-month{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:stretch}
.wt-clip{position:relative;background:var(--ivory);color:var(--graphite);border-radius:14px;padding:26px 24px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.wt-clip small{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--deep-copper)}
.wt-clip strong{font:400 26px/1.15 var(--sans);letter-spacing:-.03em}
.wt-play{position:absolute;top:22px;left:24px;width:44px;height:44px;border-radius:50%;background:var(--graphite);color:var(--ivory);display:grid;place-items:center;font-size:14px;padding-left:3px}
.wt-chips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wt-chips li{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--line-dark);border-radius:12px;padding:10px 16px;color:var(--on-graphite);font-size:14px;white-space:nowrap}
.wt-chips b{font:400 28px/1 var(--accent);color:var(--copper)}
.wt-loop{position:relative;width:280px;height:280px;margin:0 auto;border-radius:50%;border:1.5px dashed var(--copper)}
.wt-loop span{position:absolute;padding:8px 16px;border-radius:999px;background:var(--ivory);color:var(--graphite);font:500 15px/1 var(--sans)}
.wt-loop span:nth-child(1){top:-16px;left:50%;transform:translateX(-50%)}
.wt-loop span:nth-child(2){bottom:40px;right:-30px}
.wt-loop span:nth-child(3){bottom:40px;left:-30px}
.wt-loop strong{position:absolute;inset:0;display:grid;place-items:center;font:400 30px/1.1 var(--accent);color:var(--copper);text-align:center;padding:60px}
.wt.ready .wt-ctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.wt-count{margin:0;color:var(--muted);font-size:15px}
.wt-count b{color:var(--graphite);font-weight:600}
.wt-ctrl>div{display:flex;gap:10px}
.wt-btn{height:52px;min-width:52px;border-radius:999px;border:1px solid rgba(35,40,41,.25);background:transparent;color:var(--graphite);font:500 16px/1 var(--sans);cursor:pointer;padding:0 18px}
.wt-btn.next{background:var(--graphite);color:var(--ivory);border-color:var(--graphite);padding:0 26px}
.wt-btn.next:hover:not(:disabled){background:var(--copper);border-color:var(--copper);color:var(--graphite)}
.wt-btn:disabled{opacity:.35;cursor:default}
.wt-btn:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
@media(max-width:1020px){
 .wt-panel{grid-template-columns:1fr;gap:32px;padding:36px 30px;align-items:start}
 .wt-gl .long{display:none}.wt-gl .short{display:inline}
 .wt-stop .lab{display:none}
 .wt.ready .wt-rail{gap:10px}
 .wt-group.g0{flex:3}.wt-group.g1{flex:2}.wt-group.g2{flex:2}.wt-group.g3{flex:7}
 .wt-gl{font-size:10px;letter-spacing:.08em}
 .wt-stop{padding:10px 0}
}
@media(max-width:640px){
 .wt-panel{padding:28px 20px;gap:26px}
 .wt-text p{font-size:16px}
 .wt-plan ol{grid-template-columns:repeat(2,1fr)}
 .wt-plan li:nth-child(n+7){display:none}
 .wt-month{grid-template-columns:1fr}
 .wt-chips{flex-direction:row;flex-wrap:wrap}.wt-chips li{flex:0 0 auto;padding:8px 12px}
 .wt-clip{min-height:180px}.wt-clip strong{font-size:22px}
 .wt-year li{font-size:0;height:14px}
 .wt-out strong{font-size:44px}
 .wt-day li{grid-template-columns:1fr}.wt-day span{grid-row:auto;padding:0}
 .wt-loop{width:220px;height:220px}.wt-loop strong{font-size:24px;padding:40px}
 .wt-btn.next{padding:0 20px}
 .wt-count{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.wt.ready .wt-panel{transition:none;transform:none}}
.wt-panel .fd-tag.past{background:var(--ivory);color:var(--graphite)}
.wt-panel .fd-tag.story{color:var(--ivory);border-color:rgba(244,241,232,.6)}

/* ---- Foundations everywhere (31 October 2026): the four steps, one promise, then the call to action ---- */
.fd-steps+.fd-note{margin-top:18px}
.promise-grid.n1{grid-template-columns:1fr;align-self:center}
.promise-grid.n1 h4{font-size:clamp(26px,2.6vw,34px);margin-top:0}
.promise-grid.n1 p{color:var(--on-graphite);font-size:17px;margin:0}
.ladder-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
.ladder-cta p{flex:1 1 100%;margin:0;color:var(--muted);font-size:15px}
@media(max-width:760px){.promise{grid-template-columns:1fr;gap:22px;padding:34px 24px}}
/* walkthrough, Activation panels (31 October 2026) */
.wt-buckets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.wt-buckets div{background:rgba(244,241,232,.07);border:1px solid var(--line-dark);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.wt-buckets p{margin:0 0 4px;font:600 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}
.wt-buckets i{display:block;height:8px;border-radius:4px;background:rgba(244,241,232,.18)}
.wt-buckets i:nth-child(3){width:80%}.wt-buckets i:nth-child(4){width:60%}
.wt-card.wt-compact{padding:18px 24px;max-width:none}
.wt-compact li{padding:10px 0;font-size:16px}
.wt-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:420px;justify-self:center;width:100%}
.wt-flow li{display:flex;align-items:center;gap:16px;background:var(--ivory);color:var(--graphite);border-radius:12px;padding:16px 20px;font:500 18px/1.3 var(--sans);position:relative}
.wt-flow li+li::before{content:"";position:absolute;left:37px;top:-11px;width:1px;height:10px;background:var(--copper)}
.wt-flow span{width:34px;height:34px;border-radius:50%;background:var(--graphite);color:var(--ivory);display:grid;place-items:center;font:400 16px/1 var(--accent);flex:0 0 auto}
.wt-flow li:last-child{background:var(--copper)}
.wt-flow li:last-child span{background:var(--ivory);color:var(--graphite)}
.wt-browser{background:var(--ivory);border-radius:14px;overflow:hidden;max-width:420px;width:100%;justify-self:center}
.wt-browser .bar{display:flex;gap:6px;padding:10px 14px;background:var(--stone)}
.wt-browser .bar i{width:9px;height:9px;border-radius:50%;background:rgba(35,40,41,.25)}
.wt-browser .pg{padding:18px;display:flex;flex-direction:column;gap:12px}
.wt-browser .vid{position:relative;height:150px;border-radius:10px;background:var(--graphite);display:grid;place-items:center}
.wt-browser .vid .wt-play{position:static;background:var(--copper);color:var(--graphite)}
.wt-browser .stars{color:var(--deep-copper);letter-spacing:4px;font-size:18px}
.wt-browser .ln{display:block;height:9px;border-radius:5px;background:rgba(35,40,41,.15)}
.wt-browser .ln.short{width:65%}
.wt-browser b{align-self:flex-start;background:var(--graphite);color:var(--ivory);padding:10px 18px;border-radius:999px;font:500 14px/1 var(--sans)}
.wt-rows{max-width:460px}
.wt-th,.wt-tr{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;padding:12px 0;border-top:1px solid rgba(35,40,41,.12);font-size:15px}
.wt-th{border-top:0;padding-top:0;font:600 11px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wt-tr span:nth-child(2){font-weight:600;color:var(--deep-copper)}
.wt-card.wt-report li::before{border-radius:3px;background:rgba(217,147,98,.25)}
.wt-call{margin:12px 0 0;text-align:center;color:var(--copper);font:500 16px/1.3 var(--sans);justify-self:center}
.wt-visual{display:grid}
@media(max-width:640px){.wt-buckets{grid-template-columns:1fr 1fr 1fr;gap:6px}.wt-buckets div{padding:10px}.wt-buckets p{font-size:9.5px;letter-spacing:.06em}.wt-flow li{font-size:16px;padding:12px 14px}.wt-browser .vid{height:110px}.wt-th,.wt-tr{font-size:13.5px}}

/* ---- Phone spacing (1 November 2026): less empty space between and inside sections on phones ---- */
@media(max-width:760px){
 body.ed .section{padding:56px 0}
 body.ed .head{margin-bottom:30px}
 body.ed .hero-panel{padding-top:48px;padding-bottom:48px}
 body.ed .split{gap:22px}
 .ed-closing,body.ed .ed-closing{padding:44px 0}
 .logo-bar{padding:34px 0 30px}
 .logo-bar .label{margin-bottom:20px}
 .photo-feature{min-height:0;gap:26px;margin-bottom:36px}
 .cta-card,.cta-card.center{min-height:0}
 .foot-hero{padding:68px 0 52px}
 .foot-hero .foot-big{margin-bottom:24px}
 .site-foot.has-hero .wrap.foot{padding-top:36px}
 /* footer links in two columns: industries beside the site links; logo, contact and the small print full width */
 .site-foot .wrap.foot{grid-template-columns:1fr 1fr;gap:26px 18px}
 .site-foot .wrap.foot>div:first-child,.site-foot .wrap.foot>nav:nth-of-type(3),.site-foot .wrap.foot>small{grid-column:1/-1}
 .method.across{gap:34px}
 .timeline li{padding-bottom:30px}
 .ladder-cta{margin-top:24px}
 /* walkthrough: only the current step takes space, and the back and next buttons sit above it so they never move */
 .wt{display:flex;flex-direction:column}
 .wt.ready .wt-rail{order:1;margin-bottom:14px}
 .wt.ready .wt-ctrl{order:2;margin:0 0 14px}
 .wt-stage{order:3}
 .wt.ready .wt-stage{display:block}
 .wt.ready .wt-panel{display:none;transform:none}
 .wt.ready .wt-panel.on{display:grid}
 .wt-panel{align-items:start;align-content:start;gap:22px;padding:26px 20px}
 .wt-text h3{margin-bottom:12px}
 .wt-text p{margin-bottom:14px}
}