/* 00-base.css */
/* Design Q: tokens, type, buttons, chips, header, questions, closer, footer.
   Shared by every page. Do not edit from a page-type task. */
:root{--ink:#15171f;--night:#14161f;--night2:#1d2030;--paper:#fff;--warm:#f6f4ee;--line:#e5e2d9;--grey:#5a5d68;--y:#f1be38;--ytint:#fdf4d6;--onnight:#b9bdca;--nline:rgba(255,255,255,.11);
--r-xl:40px;--r-lg:28px;--r-md:20px;--r-sm:12px;--w:1240px;--g:24px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,.fig{font-family:Outfit,system-ui,sans-serif;font-weight:300;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(44px,6.8vw,100px);line-height:1.03;letter-spacing:-.035em}
h2{font-size:clamp(32px,4.1vw,58px);line-height:1.08}
h3{font-size:clamp(23px,2.1vw,30px);line-height:1.18;font-weight:400;letter-spacing:-.015em}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--grey)}
.wrap{max-width:calc(var(--w) + 2*var(--g));margin:0 auto;padding:0 var(--g)}
.sec{padding:clamp(64px,9vw,120px) 0}
.hl{display:inline-block;background:var(--y);border-radius:.18em;padding:.02em .17em .1em;margin:0 -.04em;line-height:1}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.dark :focus-visible{outline-color:var(--y)}
/* a jump link lands clear of the sticky header */
main [id]{scroll-margin-top:96px}
/* skip link: out of sight until it has keyboard focus */
.skip{position:fixed;left:12px;top:12px;z-index:40;padding:13px 18px;border-radius:999px;background:var(--ink);color:#fff;font:500 15px/1.2 Figtree,sans-serif;text-decoration:none;transform:translateY(-300%)}
.skip:focus{transform:none}
#content{scroll-margin-top:96px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font:500 16px/1.2 Figtree,sans-serif;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn .ar{width:14px;height:14px;transition:transform .2s}
.btn:hover .ar{transform:translate(2px,-2px)}
.btn:focus-visible{border-radius:999px}
.btn-y{background:var(--y);color:var(--ink)}.btn-y:hover{background:#e9b224}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#2a2d3a}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:11px 18px;font-size:15px}
.dark .btn-ghost{background:transparent;color:#fff;border-color:var(--nline)}.dark .btn-ghost:hover{border-color:#fff}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.tlink .ar{width:13px;height:13px;transition:transform .2s}.tlink:hover .ar{transform:translate(2px,-2px)}

/* small parts */
.eyebrow{display:inline-flex;align-items:center;gap:9px;text-align:left;font:500 14px/1.25 Figtree,sans-serif;padding:9px 14px 9px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--y)}
.dark .eyebrow{background:var(--night2);border-color:var(--nline);color:#fff}
.pill-ink{display:inline-block;font:500 14px/1 Figtree,sans-serif;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 14px/1 Figtree,sans-serif;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);white-space:nowrap}
.dark .chip{background:transparent;border-color:var(--nline);color:#fff}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 Figtree,sans-serif;padding:7px 10px 7px 8px;border-radius:8px;background:var(--y);color:var(--ink);box-shadow:0 6px 18px rgba(21,23,31,.10)}
.tag svg{width:11px;height:11px}
.tag.t-ink{background:var(--ink);color:#fff}.tag.t-white{background:#fff;border:1px solid var(--line)}.tag.t-grey{background:#e9e6dd}
.ph{border-radius:var(--r-md);overflow:hidden;background:var(--warm)}
.ph img{width:100%}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(32px,4vw,56px)}
.head h2{max-width:17em;margin-top:20px}
.head p{max-width:34em;margin-top:16px}
.head.c{flex-direction:column;align-items:center;text-align:center;gap:0}
.head.c h2{max-width:15em}
.logo-g{filter:grayscale(1)}

/* nav */
.nav{position:sticky;top:0;z-index:20;padding:12px var(--g) 0}
.nav-in{max-width:var(--w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 22px}
/* the logo file has 40px of clear space round an 820 by 164 mark: the negative margins take most of it back, so the row keeps its height */
.nav-logo{display:block;flex:none}
.nav-logo img{height:48px;width:auto;max-width:none;margin:-6px 0 -6px -7px}
.nav-links{display:flex;gap:4px;background:var(--warm);border-radius:999px;padding:4px}
.nav-links a.l{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font:500 15px/1 Figtree,sans-serif;padding:11px 16px;border-radius:999px;transition:background .2s}
.nav-links a.l:hover,.nav-links a.l[aria-current],.dd:hover>a.l,.dd:focus-within>a.l{background:#fff}
.nav-links .cv{width:11px;height:11px;transition:transform .2s}
.dd{position:relative}
.dd:hover .cv,.dd:focus-within .cv{transform:rotate(180deg)}
.dd-panel{position:absolute;left:-40px;top:100%;padding-top:18px;width:min(640px,calc(100vw - 48px));visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd.open .dd-panel{visibility:visible;opacity:1;transform:none}
.dd-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 14px 14px;box-shadow:0 24px 48px rgba(21,23,31,.12)}
.dd-h{font:500 14px/1 Figtree,sans-serif;color:var(--grey);padding:0 12px 12px}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.dd-grid a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;text-decoration:none;transition:background .2s}
.dd-grid a:hover,.dd-grid a:focus-visible{background:var(--warm)}
.dd-grid .n,.nav-menu .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--y);font:400 14px/1 Outfit,sans-serif}
.dd-grid b{display:block;font:500 16px/1.3 Figtree,sans-serif}
.dd-grid small{display:block;font-size:14px;line-height:1.35;color:var(--grey);margin-top:3px}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:#fff}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary svg{width:18px;height:18px}
.nav-menu nav{position:absolute;right:-8px;top:56px;width:min(340px,calc(100vw - 32px));max-height:min(calc(100vh - 96px),680px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:10px;box-shadow:0 20px 40px rgba(21,23,31,.12)}
.nav-menu nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;text-decoration:none;font-weight:500;line-height:1.3}
.nav-menu nav a:hover{background:var(--warm)}
.nav-menu .mh{font:500 14px/1 Figtree,sans-serif;color:var(--grey);padding:10px 12px 8px}
.nav-menu hr{border:0;border-top:1px solid var(--line);margin:8px 12px}

/* dark panels */
.dark{background:var(--night);color:#fff}
.dark .lead,.dark p{color:var(--onnight)}
.band{margin:0 12px;border-radius:var(--r-xl)}
.panel{border-radius:var(--r-xl);padding:clamp(28px,5vw,72px)}

/* faq */
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 4px;font:400 clamp(19px,1.6vw,23px)/1.3 Outfit,sans-serif;letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%2315171f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .2s,background-color .2s}
.faq-list details[open] summary::after{transform:rotate(45deg);background-color:var(--y);border-color:var(--y)}
.faq-list summary:hover::after{border-color:var(--ink)}
.faq-list .ans{padding:0 64px 28px 4px;max-width:52em;color:var(--grey)}
.faq-more{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:var(--r-md)}

.faq-2{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-2 .fh{position:sticky;top:112px}
.faq-2 .fh h2{margin:20px 0 14px}
.faq-2 .fh p{color:var(--grey);max-width:22em;margin-bottom:28px}
.faq-2 .faq-list .ans{padding-right:56px}

/* founder closer */
.closer{background:var(--warm);border-radius:var(--r-lg);padding:16px;display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.closer .txt{padding:24px clamp(8px,3vw,48px) 24px 0}
.closer h2{margin:20px 0 16px}
.closer .lead{max-width:30em}
.closer .btn{margin-top:32px}
.contact{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.contact span{display:block;font-size:14px;color:var(--grey);margin-bottom:2px}
.contact a{font:400 clamp(20px,1.7vw,24px)/1.3 Outfit,sans-serif;text-decoration:none;border-bottom:1px solid transparent}
.contact a:hover{border-color:var(--ink)}

/* footer */
.foot{border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:clamp(64px,9vw,120px);padding:clamp(48px,6vw,88px) 0 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:40px}
.foot-logo{height:34px;width:auto;margin-bottom:24px}
.foot h4{font:500 15px/1 Figtree,sans-serif;color:#fff;margin-bottom:18px}
.foot li{margin-bottom:10px}
.foot a{color:var(--onnight);text-decoration:none;font-size:16px}
.foot a:hover{color:#fff;text-decoration:underline}
.foot address{font-style:normal;color:var(--onnight);font-size:16px;line-height:1.7}
.foot address a.big{font:300 24px/1.4 Outfit,sans-serif;color:#fff}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--nline);font-size:14px;color:var(--onnight)}
.foot-legal a{font-size:14px;margin-left:20px}.foot-legal a:first-child{margin-left:0}

@media(max-width:980px){
 .nav-links{display:none}.nav-menu{display:block}
 .head{flex-direction:column;align-items:flex-start;gap:24px}.head.c{align-items:center;gap:0}
 .faq-2{grid-template-columns:1fr;gap:28px}.faq-2 .fh{position:static}
 .foot-grid{grid-template-columns:1fr 1fr}
 .closer{grid-template-columns:1fr}.closer .txt{padding:8px 12px 20px}
 .closer .ph{max-width:420px}
}
@media(max-width:600px){
 :root{--g:16px;--r-xl:28px;--r-lg:22px;--r-md:16px}
 body{font-size:16px}
 .sec{padding:52px 0}.foot{margin-top:52px}
 .band{margin:0 6px}
 .nav{padding-top:8px}.nav-in{padding-left:16px}.nav-logo img{height:40px;margin:-4px 0 -4px -6px}
 .btn{padding:14px 20px}
 .faq-list .ans,.faq-2 .faq-list .ans{padding-right:8px}
 .foot-grid{grid-template-columns:1fr;gap:32px}
 .foot-legal a{margin:0 16px 0 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* 05-inner.css */
/* Design Q: the parts of the solution page, shared by every inner page.
   Do not edit from a page-type task. */
/* hero */
.shero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px)}
.shero .crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.shero h1{margin:28px 0 0;max-width:9em}
.shero .cols{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.shero .lead{color:var(--ink)}
.shero .sub{color:var(--grey);margin-top:14px}
.shero .btn{margin-top:28px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(40px,5vw,72px)}
.trio .ph{border-radius:var(--r-lg)}

/* problem */
.say{font:300 clamp(24px,2.7vw,38px)/1.3 Outfit,sans-serif;letter-spacing:-.02em;max-width:25em;margin:28px auto 0;text-wrap:balance;text-align:center}
.say b{font-weight:400;background:linear-gradient(transparent 62%,var(--y) 62%,var(--y) 92%,transparent 92%)}
.center{text-align:center}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(40px,5vw,64px)}
.vs{border-radius:var(--r-lg);padding:clamp(24px,3.5vw,48px);background:var(--warm)}
.vs.good{background:var(--ink);color:#fff}
.vs .k{display:inline-block;font:500 14px/1 Figtree,sans-serif;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.vs.good .k{background:var(--y);border-color:var(--y);color:var(--ink)}
.vs h3{font-size:clamp(28px,3vw,42px);font-weight:300;letter-spacing:-.025em;margin:22px 0 10px}
.vs>p{color:var(--grey);max-width:28em}.vs.good>p{color:var(--onnight)}
.vs ul{margin-top:24px;border-top:1px solid var(--line)}
.vs.good ul{border-color:var(--nline)}
.vs li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.vs.good li{border-color:var(--nline)}
.vs li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#b9b5a8;transform:translateY(-1px)}
.vs.good li::before{background:var(--y)}

/* causes */
.causes{display:grid;grid-template-columns:minmax(0,.85fr) 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.causes h2{margin:20px 0 32px}
.causes .ph{max-width:560px}
.why-list li{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}
.why-list li:first-child{border-top:1px solid var(--line)}
.why-list .n{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--warm);font:400 20px/1 Outfit,sans-serif}
.why-list h3{margin-bottom:8px}
.why-list p{color:var(--grey);max-width:34em}

/* fix */
.fix li.row{display:grid;grid-template-columns:44px minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start;background:var(--night2);border:1px solid var(--nline);border-radius:var(--r-md);padding:26px;margin-top:12px}
.fix li.row:nth-child(2){margin-left:3%}.fix li.row:nth-child(3){margin-left:6%}.fix li.row:nth-child(4){margin-left:9%}.fix li.row:nth-child(5){margin-left:12%}
.fix .n{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--y);color:var(--ink);font:400 16px/1 Outfit,sans-serif}
.fix h3{color:#fff;margin-bottom:8px}
.fix .row p{font-size:16px;max-width:36em}
.fix .with{font-size:15px;color:var(--onnight);margin-bottom:10px}
.fix .line{margin-top:40px;font:300 clamp(22px,2.2vw,30px)/1.3 Outfit,sans-serif;color:#fff;max-width:30em;letter-spacing:-.015em}

/* proof: the one published client result (tpl_chrome.result_card) */
.case{background:var(--warm);border-radius:var(--r-lg);padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(16px,3vw,48px);align-items:center}
.case .a{padding:clamp(14px,2.6vw,34px) 0 clamp(14px,2.6vw,34px) clamp(14px,2.6vw,34px)}
.case .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.case .top img{height:20px;width:auto;filter:grayscale(1) brightness(.3);margin-right:8px}
.case .stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px clamp(20px,3vw,44px);margin-bottom:32px}
.case .fig{display:block;font-size:clamp(40px,4.4vw,62px);line-height:1}
.case .stats span.l{font-size:16px;line-height:1.35;color:var(--grey);display:block;margin-top:8px;max-width:10em}
.case blockquote{font:300 clamp(20px,1.9vw,26px)/1.35 Outfit,sans-serif;letter-spacing:-.015em;max-width:24em;padding-top:28px;border-top:1px solid var(--line)}
.case cite{display:block;font:400 16px/1.4 Figtree,sans-serif;color:var(--grey);margin-top:12px}
.case .note{font-size:16px;color:var(--grey);padding:22px 12px 10px;display:flex;justify-content:space-between;gap:14px 28px;align-items:flex-start}
.case .note p{max-width:26em}.case .note .tlink{color:var(--ink);white-space:nowrap;flex:none}
/* the card's link is at least 44px high to a finger, at every width and on every page type */
.case .note .tlink{position:relative}.case .note .tlink::after{content:"";position:absolute;inset:-9px 0}
/* without its photograph (a page that already shows it): on a wide screen the note and the link fill that side */
@media(min-width:981px){
 .case.nopic .b{align-self:stretch;display:flex}
 .case.nopic .note{flex:1;flex-direction:column;justify-content:center;gap:24px;padding:clamp(24px,3vw,44px);background:#fff;border-radius:var(--r-md)}
 .case.nopic .note p{font:300 clamp(22px,2.1vw,30px)/1.3 Outfit,sans-serif;letter-spacing:-.015em;color:var(--ink);max-width:19em;text-wrap:balance}
}

@media(max-width:980px){
 .shero .cols{grid-template-columns:1fr}
 .versus{grid-template-columns:1fr}
 .causes{grid-template-columns:1fr}
 .fix li.row{grid-template-columns:44px 1fr}.fix li.row .svc{grid-column:2}
 .fix li.row:nth-child(n){margin-left:0}
 .case{display:flex;flex-direction:column;gap:0;align-items:stretch}.case .a,.case .b{display:contents}
 .case .ph{order:1}.case .top{order:2;margin:26px 14px 26px}.case .stats{order:3;margin:0 14px 28px}.case blockquote{order:4;margin:0 14px}.case .note{order:5;flex-wrap:wrap;margin-top:24px;padding:20px 14px 12px;border-top:1px solid var(--line)}
}
@media(max-width:600px){
 .trio{grid-template-columns:1fr 1fr;gap:10px}.trio .ph:first-child{grid-column:span 2}
 .why-list li{grid-template-columns:44px 1fr;gap:14px}.why-list .n{width:44px;height:44px}
 .fix li.row{padding:20px;grid-template-columns:1fr;gap:14px}.fix li.row .svc{grid-column:auto}
 .fix .panel{padding:28px 14px 14px}.fix .head{padding:0 8px}.fix .line{padding:0 8px 14px}
 .case{padding:10px}.case .top,.case .stats,.case blockquote{margin-left:10px;margin-right:10px}.case .top{margin-top:22px;margin-bottom:22px}.case .stats{grid-template-columns:1fr 1fr}.case .note{padding:18px 10px 8px}
 .fix .with{font-size:16px}
}

/* 10-chrome.css */
/* Design Q: shared parts added for the real site (not in the two mock-ups).
   Second menu, title sizes, breadcrumb, plain questions, call band, long copy,
   photo archive, and (at the end) the films and the 360 tours.
   Do not edit from a page-type task. */

/* header: a second drop-down (industries) and the phone menu's plain groups */
.dd-panel.dd-ind{width:min(560px,calc(100vw - 48px))}
.dd-ind .dd-grid a{padding:10px 12px;align-items:center}
.dd-ind .dd-grid b{font-weight:500}
.nav-menu nav a.s{font-weight:500}
.nav-menu nav a.i{padding:9px 12px;font-weight:400}
.nav-menu details.grp>summary{width:auto;height:auto;border:0;border-radius:12px;display:flex;justify-content:space-between;align-items:center;padding:12px;font-weight:500;background:none}
.nav-menu details.grp>summary:hover{background:var(--warm)}
.nav-menu details.grp>summary::after{content:"";width:9px;height:9px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.nav-menu details.grp[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.nav-menu details.grp>div{padding:0 0 6px 8px}
@media(max-width:480px){.nav-right .btn-sm{padding:11px 14px;font-size:14px}.nav-right .btn-sm .ar{display:none}}

/* title sizes: pick by length with tpl_chrome.h1_step() */
h1.h1-m{font-size:clamp(38px,4.9vw,72px);line-height:1.06;letter-spacing:-.03em}
h1.h1-s{font-size:clamp(32px,3.6vw,52px);line-height:1.1;letter-spacing:-.025em}
.shero h1.h1-m{max-width:13em}.shero h1.h1-s{max-width:17em}
.shero .solo{margin-top:clamp(40px,5vw,72px);border-radius:var(--r-lg)}
.shero .solo img{width:100%;max-height:min(72vh,680px);object-fit:cover}

/* breadcrumb */
.bc{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:15px;color:var(--grey)}
.bc a{text-decoration:none;color:var(--grey);border-bottom:1px solid transparent}.bc a:hover{color:var(--ink);border-color:var(--ink)}
.bc li{display:flex;align-items:center;gap:10px}
.bc li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--y)}
.bc [aria-current]{color:var(--ink)}

/* plain questions: every answer open, question beside answer */
.qa{border-top:1px solid var(--line)}
.qa>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px clamp(24px,5vw,80px);padding:28px 4px;border-bottom:1px solid var(--line)}
.qa dt{font:400 clamp(19px,1.6vw,23px)/1.3 Outfit,sans-serif;letter-spacing:-.01em}
.qa dd{margin:0;color:var(--grey);max-width:40em}

/* call band: slim, no portrait, for inner pages */
.cband{background:var(--y);color:var(--ink);border-radius:var(--r-lg);padding:clamp(28px,4.5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.cband h2{max-width:14em}
.cband p.lead{color:var(--ink);margin-top:16px;max-width:30em}
.cband .btn{margin-top:28px}
.cband .ways{border-top:1px solid rgba(21,23,31,.22)}
.cband .ways div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid rgba(21,23,31,.22)}
.cband .ways span{font-size:15px}
.cband .ways a{font:400 clamp(19px,1.6vw,23px)/1.3 Outfit,sans-serif;text-decoration:none;border-bottom:1px solid transparent}
.cband .ways a:hover{border-color:var(--ink)}
.cband :focus-visible{outline-color:var(--ink)}

/* the closer without a portrait */
.closer.np{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);padding:clamp(24px,4.5vw,64px);align-items:end}
.closer.np .txt{padding:0}
.closer.np .contact{display:block;margin:0;padding:0;border-top:1px solid var(--line)}
.closer.np .contact div{padding:18px 0;border-bottom:1px solid var(--line)}

/* long copy: articles, legal pages, service body text */
.prose{max-width:44em;font-size:clamp(17px,1.25vw,19px);line-height:1.65}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(28px,2.9vw,40px);line-height:1.12;margin-top:1.9em}
.prose h3{margin-top:1.6em}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose a{text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--ink)}
.prose ul,.prose ol{padding-left:0}
.prose ul li,.prose ol li{position:relative;padding-left:26px;margin-top:.5em}
.prose ul li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--y)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n;padding-left:34px}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:.2em;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--warm);font:400 14px/1 Outfit,sans-serif}
.prose blockquote{font:300 clamp(22px,2.1vw,30px)/1.3 Outfit,sans-serif;letter-spacing:-.015em;padding:4px 0 4px 24px;border-left:3px solid var(--y)}
.prose figure{border-radius:var(--r-md);overflow:hidden}
.prose strong,.prose b{font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600}
.tbl{overflow-x:auto}

/* photo archive: whole photographs in columns, folded by the script when long */
.gal+.gal{padding-top:0}
.gal-grid{columns:4 240px;column-gap:14px}
.gal-grid a{display:block;margin-bottom:14px;border-radius:var(--r-sm);overflow:hidden;background:var(--warm);break-inside:avoid}
.gal-grid img{width:100%;transition:transform .5s}
.gal-grid a:hover img{transform:scale(1.03)}
/* folded: about twelve photographs (eight when there are two columns). The script marks the rest .is-off, choosing the count
   whose columns end most evenly; those are out of the layout and the tab order until opened */
.gal-grid.is-shut>a.is-off{display:none}
.gal-more{display:flex;justify-content:center;margin-top:8px}
.gal-more[hidden]{display:none}
.gal-more button{cursor:pointer}

@media(max-width:980px){
 .qa>div{grid-template-columns:1fr;padding:22px 2px}
 .cband,.closer.np{grid-template-columns:1fr;align-items:start}
}
@media(max-width:600px){
 .gal-grid{columns:2;column-gap:8px}.gal-grid a{margin-bottom:8px}
 .cband{padding:28px 20px}
}

/* footer: five columns on the real site (solutions, industries, services, the firm) */
.foot-grid{grid-template-columns:1.25fr 1.3fr 1fr 1fr .9fr;gap:32px}
.foot a{font-size:15px}.foot li{margin-bottom:9px}
.foot address a{font-size:16px}
.foot-legal a{margin-left:20px}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr;gap:32px}.foot-legal a{margin:0 16px 0 0}}

/* phone: the call band's two rows stack the same way; footer links get a full tap height */
@media(max-width:600px){
 .cband .ways div{display:block}
 .cband .ways span{display:block;margin-bottom:4px}
 .foot li{margin-bottom:0}
 .foot li a,.foot-legal a{display:inline-block;padding:9px 0}
 .foot-legal{row-gap:0}
}

/* header: the Services drop-down. Its top item is a button (there is no page behind it) */
.nav-links button.l{display:inline-flex;align-items:center;gap:6px;font:500 15px/1 Figtree,sans-serif;padding:11px 16px;border-radius:999px;border:0;background:none;color:inherit;cursor:pointer;transition:background .2s}
.nav-links button.l:hover,.nav-links button.l[aria-current],.dd:hover>button.l,.dd:focus-within>button.l,.dd.open>.l{background:#fff}
.nav-links button.l:focus-visible{border-radius:999px}
.dd.open .cv{transform:rotate(180deg)}
.dd-panel.dd-svc{width:min(540px,calc(100vw - 48px))}
.dd-cols{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 10px}
.dd-cols .dd-top{display:inline-flex;align-items:center;gap:8px;margin:0 12px 8px;padding:8px 12px;border-radius:999px;background:var(--y);font:500 14px/1 Figtree,sans-serif;text-decoration:none}
.dd-cols .dd-top .ar{width:11px;height:11px;transition:transform .2s}
.dd-cols .dd-top:hover .ar{transform:translate(2px,-2px)}
.dd-cols li a{display:block;padding:9px 12px;border-radius:12px;text-decoration:none;font:500 16px/1.3 Figtree,sans-serif;transition:background .2s}
.dd-cols li a:hover,.dd-cols li a:focus-visible{background:var(--warm)}
.nav-menu nav a.i.g{font-weight:500;color:var(--grey);font-size:14px;padding-top:12px}

/* footer: the wordmark is as wide as the content column (it sits inside .wrap, so it never grows past it)
   and its lower half is cut off by the page end. The file is 2500 by 529 with no clear space round the mark:
   the box is half as tall as the picture. */
.foot-mark{margin-top:clamp(32px,5vw,64px);opacity:.1;aspect-ratio:2500/265;overflow:hidden}
.foot-mark img{width:100%}

/* footer column titles (labels, not headings) */
.foot .fh{font:500 15px/1 Figtree,sans-serif;color:#fff;margin-bottom:18px}

/* phone: everything tappable is at least 44px high */
@media(max-width:600px){
 .nav-right .btn-sm{min-height:44px}
 .foot li a,.foot-legal a{padding:11px 0}
 .foot .fh{margin-bottom:8px}
 .contact a,.cband .ways a{display:inline-block;padding:10px 0}
 .foot address a{display:inline-block;padding:9px 0}.foot address a.big{padding:6px 0}
}

/* tablet and small laptop (601 to 1100): the same tap heights as the phone */
@media(min-width:601px) and (max-width:1100px){
 .nav-right .btn-sm{min-height:44px}
 .foot li{margin-bottom:0}
 .foot li a,.foot-legal a{display:inline-block;padding:11px 0}
 .foot .fh{margin-bottom:8px}
 .foot-legal{row-gap:0;align-items:center}
 .contact a,.cband .ways a{display:inline-block;padding:10px 0}
 .foot address a{display:inline-block;padding:9px 0}.foot address a.big{padding:6px 0}
}

/* header button: the full words where they fit, a shorter label where they do not
   (beside the menu on a small laptop, and on a phone). The link's aria-label has the full words. */
.nav-cta .cta-m,.nav-cta .cta-s{display:none}
@media(min-width:981px) and (max-width:1099px){.nav-cta .cta-l{display:none}.nav-cta .cta-m{display:inline}}
@media(min-width:981px) and (max-width:1179px){
 .nav-links a.l,.nav-links button.l{padding-left:13px;padding-right:13px}
}
@media(min-width:981px) and (max-width:1060px){
 .nav-logo img{height:44px;margin:-4px 0 -4px -6px}
 .nav-in{gap:12px;padding-left:18px}
 .nav-links a.l,.nav-links button.l{padding-left:10px;padding-right:10px}
}
@media(max-width:560px){.nav-cta .cta-l{display:none}.nav-cta .cta-s{display:inline}}
@media(max-width:380px){.nav-logo img{height:34px;margin:-2px 0 -2px -5px}.nav-in{gap:10px}}
@media(max-width:340px){.nav-logo img{height:30px;margin:0 0 0 -4px}.nav-in{padding-left:12px;gap:8px}}

/* the short enquiry form in the closing block (tpl_chrome.enquiry): a soft card on the block's own colour.
   --mute is the colour assets/js/contact.js gives the status line. */
.enq{--mute:var(--grey);--enq-line:#8d8a80;--enq-glow:rgba(241,190,56,.7);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,2.4vw,32px)}
.enq-h{font:400 clamp(20px,1.7vw,24px)/1.3 Outfit,sans-serif;letter-spacing:-.01em;color:var(--ink);margin-bottom:20px}
.enq-form{flex:1;display:flex;flex-direction:column;gap:16px}
/* name and email share a row only where the card runs the full width of the block; beside the text the card is too narrow for a whole email address */
.enq-row{display:grid;grid-template-columns:1fr;gap:16px 12px}
@media(min-width:601px) and (max-width:980px){.enq-row{grid-template-columns:1fr 1fr}}
.enq-f{min-width:0;display:flex;flex-direction:column}
.enq-f.grow{flex:1}
.enq-f label{font:500 15px/1.3 Figtree,sans-serif;color:var(--ink);margin-bottom:7px}
.enq-f input,.enq-f textarea{display:block;width:100%;min-width:0;margin:0;font:400 16px/1.4 Figtree,system-ui,sans-serif;color:var(--ink);background:#fff;border:1px solid var(--enq-line);border-radius:14px;padding:13px 16px;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.enq-f input{min-height:50px}
.enq-f textarea{flex:1;min-height:104px;resize:vertical}
.enq-f input:hover,.enq-f textarea:hover{border-color:var(--ink)}
.enq-f input:focus,.enq-f textarea:focus{outline:2px solid transparent;border-radius:14px;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 0 0 5px var(--enq-glow)}
.closer .enq .btn,.cband .enq .btn{margin-top:0}
.enq-send .btn{cursor:pointer;font-family:Figtree,sans-serif}
.enq-send .btn:disabled{opacity:.55;cursor:default}
.enq-note{font-size:16px;line-height:1.5;color:var(--ink)}
/* the empty status line stays in the page so a screen reader hears the message when it arrives; the margin takes back the form's gap */
.enq-note:empty{margin-top:-16px}
/* with the form beside it, the text column runs from the top and the card is as tall as the column */
.closer.np{align-items:stretch}
/* the yellow band can have a heading and no paragraph: its text sits centred against the card, rows straight under the button, so no hole opens */
@media(min-width:981px){.cband{align-items:center}}
/* the phone and email rows sit at the foot of the text column, level with the foot of the card */
.closer.np .txt,.cband .txt{display:flex;flex-direction:column;align-items:flex-start}
.closer.np .txt>.btn{margin-bottom:36px}
.cband .txt>.btn{margin-bottom:32px}
.closer.np .contact{align-self:stretch;margin-top:auto}
.cband .ways{align-self:stretch}
.cband .enq{--mute:var(--ink);--enq-line:rgba(21,23,31,.55);--enq-glow:rgba(255,255,255,.8);background:rgba(255,255,255,.46);border-color:transparent}
.closer:not(.np) .enq{margin-top:28px}
@media(max-width:600px){
 .enq{padding:20px 16px}
 .enq-send .btn{width:100%;justify-content:center}
}

/* ---- real work: the films and the 360 tours (tpl_chrome.films, tpl_chrome.tours;
   listed in content/showcase.json). The same blocks on every page type.
   Neither has a margin of its own: the page places it. Each lays itself out by
   the width of the space it is given, not the width of the screen, so it also
   works inside a column. (A browser too old for that shows the narrow layout.)
   The widths below are the old screen widths less the page's side gaps:
   933 = 981 - 48, 673 = 721 - 48, 553 = 601 - 48. (On a phone the side gap is
   16px, not 24px, so the 553 step also asks for a screen wider than 600.) ---- */
.films,.tours{container-type:inline-size}

/* films, playable in the page. The first is the lead: two thirds of a full
   row with its name beside it, never wider than 822px (the files are 960
   wide, so no film is stretched far); the others sit in a row below. Every
   film is whole (16:9) and every height comes from the films and their names.
   One film alone, or two, are laid out to suit (.n1, .n2); two or four under
   the lead sit two across (.r2). */
.films-in{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 16px}
.films .film{margin:0;min-width:0;max-width:min(822px,calc(min(100vh,900px)*1.5))}
.films .film-v{position:relative}
.films .film video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-md);background:var(--night);overflow:hidden}
.films .film video:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-md)}
/* the play button (added by script) covers the poster, so a press anywhere on it starts the film */
.films .film-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:var(--r-md);background:none;cursor:pointer;display:grid;place-items:center}
.films .film-play::before{content:"";grid-area:1/1;width:clamp(52px,5vw,64px);aspect-ratio:1;border-radius:50%;background:var(--y);transition:transform .2s,background .2s}
.films .film-play::after{content:"";grid-area:1/1;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--ink);transform:translateX(2px)}
.films .film-play:hover::before{background:#e9b224;transform:scale(1.06)}
.films .film-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.films .film figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin-top:10px;padding:0 4px;font-size:16px;line-height:1.4;color:var(--grey)}
.films .film figcaption b{flex:0 0 100%;font:400 clamp(19px,1.6vw,22px)/1.25 Outfit,sans-serif;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.films .film figcaption span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--y);margin:0 10px;vertical-align:middle}
@media(min-width:601px){@container (min-width:553px){
 .films-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,2.6vw,36px) 16px}
 .films .film figcaption{margin-top:12px}
 /* one film alone, or the first of three or five, takes a row to itself */
 .films.n1 .film,.films.odd .film:first-child{grid-column:1/-1}
}}
@container (min-width:933px){
 .films-in{grid-template-columns:repeat(3,minmax(0,1fr))}
 .films.r2 .films-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .films .film:first-child video,.films .film:first-child video:focus-visible,.films .film:first-child .film-play{border-radius:var(--r-lg)}
 .films .film:first-child .film-play::before{width:76px}
 .films .film:first-child .film-play::after{border-width:11px 0 11px 18px}
 .films:not(.n2) .film:first-child{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:min(calc((100% - 32px)/3*2 + 16px),822px) minmax(0,1fr);gap:16px;align-items:end}
 .films:not(.n2) .film:first-child figcaption{margin:0;padding:0 0 6px 8px;gap:6px 0;font-size:clamp(17px,1.4vw,20px)}
 .films:not(.n2) .film:first-child figcaption b{font-size:clamp(26px,2.6vw,36px);font-weight:300;line-height:1.12;letter-spacing:-.02em;margin-bottom:4px}
 /* two films: the lead and one small one beside it, each with its name under it */
 .films.n2 .films-in{grid-template-columns:min(calc((100% - 32px)/3*2 + 16px),822px) minmax(0,1fr);align-items:start}
}

/* 360 tours: a frame for one tour and, with more than one, a named button for
   each. The frame opens with a cover (the tour's still when one is saved, its
   name, the type of space and a button): no tour loads until asked for. The
   frame is 16:9 at least, as tall as the list beside it, and never taller
   than the screen (a drag inside a tour turns the tour, not the page). */
.tours-in{display:grid;grid-template-columns:minmax(0,1fr);gap:20px clamp(20px,3vw,44px)}
.tours .tour-main{display:flex;flex-direction:column;min-width:0}
.tours .tour-frame{flex:1 1 auto;position:relative;display:grid;border-radius:var(--r-md);overflow:hidden;background:var(--night);max-height:min(72vh,640px);scroll-margin-top:96px}
.tours .tour-frame::before{content:"";grid-area:1/1;display:block;padding-top:112%}
.tours .tour-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tours .tour-cover{--tp:clamp(24px,3.4vw,48px);position:absolute;inset:0;display:grid;align-items:end;padding:var(--tp);color:#fff;text-decoration:none}
.tours .tc{position:relative;z-index:1;display:grid;justify-items:start;gap:6px}
.tours .tc b{font:300 clamp(30px,3.6vw,52px)/1.06 Outfit,sans-serif;letter-spacing:-.025em;text-wrap:balance}
/* inside a column the cover's words and padding follow the block's width, not the screen's */
@supports (width:1cqi){
 .tours .tour-cover{--tp:clamp(24px,min(3.4vw,4cqi),48px)}
 .tours .tc b{font-size:clamp(30px,min(3.6vw,4.2cqi),52px)}
}
.tours .tc>span:not(.btn){font-size:clamp(16px,1.3vw,19px);color:var(--onnight)}
.tours .tour-cover.has-pic .tc>span:not(.btn){color:#fff}
.tours .tc .btn{margin-top:clamp(14px,1.6vw,22px)}
.tours .tour-cover:hover .btn{background:#e9b224}
.tours .tour-cover:hover .ar{transform:translate(2px,-2px)}
.tours .tour-cover:focus-visible{outline:3px solid var(--y);outline-offset:-6px;border-radius:var(--r-md)}
/* the still: whole, from the top of the frame, never larger than the file,
   its foot fading into the dark panel. The words sit on a soft dark veil that
   starts a little above them, so they read on any picture. */
.tours .tour-cover img{position:absolute;top:0;left:0;right:0;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:100%;-webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
.tours .tour-cover.has-pic .tc::before{content:"";position:absolute;z-index:-1;top:-110px;bottom:calc(-1*var(--tp));left:calc(-1*var(--tp));right:calc(-1*var(--tp));background:linear-gradient(rgba(20,22,31,0),rgba(20,22,31,.72) 110px,rgba(20,22,31,.86))}
.tours .tour-out{margin-top:6px}
.tours .tour-out a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-size:16px;color:var(--grey);text-decoration:none}
.tours .tour-out a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:4px}
.tours .tour-out .ar{width:12px;height:12px}
.tours .tour-pick p{font-size:16px;color:var(--grey);padding:2px 0 12px}
.tours .tour-pick ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.tours .tour-pick a{display:grid;grid-template-columns:8px minmax(0,1fr);align-items:center;align-content:center;gap:1px 10px;height:100%;min-height:58px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;transition:background .2s}
.tours .tour-pick a::before{content:"";grid-row:1/span 2;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px #c9c5b8}
.tours .tour-pick b{grid-column:2;font:400 17px/1.25 Outfit,sans-serif;letter-spacing:-.01em}
.tours .tour-pick b:only-child{grid-row:1/span 2}
.tours .tour-pick span{grid-column:2;font-size:16px;line-height:1.35;color:var(--grey)}
.tours .tour-pick a:hover{background:var(--warm)}
.tours .tour-pick a[aria-current="true"]{background:var(--warm);border-color:var(--ink)}
.tours .tour-pick a[aria-current="true"]::before{background:var(--y);box-shadow:none}
.tours .tour-pick a:focus-visible{border-radius:var(--r-sm)}
@media(min-width:601px){@container (min-width:553px){
 .tours .tour-frame,.tours .tour-cover:focus-visible{border-radius:var(--r-lg)}
 .tours .tour-frame::before{padding-top:56.25%}
 .tours .tour-pick a{gap:1px 14px;padding:10px 12px}
}}
@container (min-width:673px){.tours .tour-pick ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:933px){
 /* the list beside the frame, as hairline rows */
 .tours-in{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}
 .tours .tour-pick p{font-size:15px}
 .tours .tour-pick ul{display:block;border-top:1px solid var(--line)}
 .tours .tour-pick a{height:auto;align-content:normal;padding:9px 12px 9px 6px;border:0;border-bottom:1px solid var(--line);border-radius:0}
 .tours .tour-pick a[aria-current="true"]{border-color:var(--line)}
 .tours .tour-pick a:focus-visible{border-radius:8px}
 .tours .tour-pick b{font-size:clamp(18px,1.5vw,20px)}
 .tours .tour-pick span{font-size:15px}
 /* one tour, no list: the frame alone, no wider than its still is sharp */
 .tours.one .tours-in{grid-template-columns:minmax(0,1fr);max-width:1040px}
}

/* ---- a website we built (tpl_chrome.site_window): the top of the capture
   of its home page in a browser-style window. The bar carries the client's
   name and what it is. The window never scrolls on its own (a box that
   scrolls inside the page catches the mouse wheel and the thumb): it shows
   the top of the page at a set shape, fading to white at the foot, and the
   one button over the fade opens the whole capture in a new tab. The same on
   every page type; no margin of its own. ---- */
.site{display:flex;flex-direction:column;margin:0;min-width:0;min-height:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--warm)}
.site-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:13px 22px;border-bottom:1px solid var(--line)}
.site-bar .dots{display:flex;gap:6px;flex:none}
.site-bar i{width:9px;height:9px;border-radius:50%;background:#d9d5c8}
.site-bar p{font-size:15px;line-height:1.3;color:var(--grey)}
.site-bar b{font:400 17px/1.3 Outfit,sans-serif;letter-spacing:-.01em;color:var(--ink);margin-right:8px}
.site-view{position:relative;flex:none;aspect-ratio:16/10;max-height:640px;overflow:hidden;background:#fff}
.site-view img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* the last 96px are plain white: the button (22px up, about 51px tall) never sits on half-faded text */
.site-view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:max(36%,200px);background:linear-gradient(rgba(255,255,255,0),#fff calc(100% - 96px));pointer-events:none}
.site-all{position:absolute;left:0;right:0;bottom:22px;z-index:1;width:max-content;max-width:calc(100% - 32px);margin:0 auto}
@media(max-width:980px){
 .site-view{aspect-ratio:16/11;max-height:none}
}
@media(max-width:600px){
 .site-bar{padding:12px 16px}
 .site-bar p{font-size:16px}
 .site-view{aspect-ratio:1/1.08}
}

/* 20-home.css */
/* Design Q: the home page. Ported from the approved mock-up; every rule is scoped to .pg-home. */
/* hero */
 .pg-home .hero{text-align:center;padding:clamp(56px,8vw,112px) 0 clamp(40px,5vw,64px)}
 .pg-home .hero-in{max-width:calc(1360px + 2*var(--g));margin:0 auto;padding:0 var(--g);display:grid;grid-template-columns:minmax(0,1fr)}
 .pg-home .hero h1{max-width:10.6em;margin:28px auto 28px}
 .pg-home .hero .lead{max-width:36em;margin:0 auto}
 .pg-home .hero .btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
 .pg-home .hero .proof{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-top:40px;font-size:16px;color:var(--grey)}
 .pg-home .hero .proof li{display:flex;align-items:center;gap:8px}
 .pg-home .hero .proof li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--y)}
 .pg-home .hero .side{display:none}
@media(min-width:1100px){
 .pg-home .hero-in{grid-template-columns:140px minmax(0,1fr) 140px}
 .pg-home .hero .side{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
 .pg-home .hero .side.l{padding:128px 0 150px}
 .pg-home .hero .side.r{padding:64px 0 214px}
 .pg-home .hero .side.l .tag:last-child,.pg-home .hero .side.r .tag:first-child{align-self:flex-end}
}
/* reel */
 .pg-home .reel{display:flex;gap:16px;max-width:1408px;margin:0 auto;padding:0 var(--g)}
 .pg-home .reel .row{display:contents}
 .pg-home .reel figure{flex:var(--r) 1 0;aspect-ratio:var(--r);min-width:0;border-radius:var(--r-lg);overflow:hidden;background:var(--warm)}
 .pg-home .reel img{width:100%;height:100%}
/* who + clients */
 .pg-home .who{text-align:center}
 .pg-home .who p.say{font:300 clamp(24px,2.7vw,38px)/1.3 Outfit,sans-serif;letter-spacing:-.02em;max-width:26em;margin:28px auto 0;text-wrap:balance}
 .pg-home .who p.say b{font-weight:400;background:linear-gradient(transparent 62%,var(--y) 62%,var(--y) 92%,transparent 92%)}
 .pg-home .cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:clamp(40px,5vw,64px)}
 .pg-home .cells li{background:#fff;display:flex;align-items:center;justify-content:center;min-width:0;padding:16px}
 /* cell height: 1.6 wide to 1 tall at least, and every cell in a row stretches with the tallest logo */
 .pg-home .cells li::before{content:"";flex:none;width:0;padding-top:calc(62.5% - 12px)}
 .pg-home .cells img{height:auto;width:auto;max-height:var(--h);max-width:78%;min-width:0;object-fit:contain;mix-blend-mode:multiply}
 .pg-home .lg-terrazzo{filter:grayscale(1) brightness(.3)}
 .pg-home .lg-pandp{filter:grayscale(1) invert(1) contrast(1.5) brightness(1.85)}
 .pg-home .lg-ocl{filter:grayscale(1) contrast(1.15)}
 .pg-home .lg-btc{filter:grayscale(1) contrast(1.4)}
/* solutions */
 .pg-home .well{background:var(--warm);border-radius:var(--r-xl);padding:clamp(20px,4.5vw,64px)}
 .pg-home .sol{background:#fff;border-radius:var(--r-lg);padding:14px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;margin-top:16px}
 .pg-home .sol.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
 .pg-home .sol.tall{grid-template-columns:minmax(0,.44fr) minmax(0,1fr)}
 .pg-home .sol.tall.flip{grid-template-columns:minmax(0,1fr) minmax(0,.44fr)}
 .pg-home .sol.flip .m{order:2}
 .pg-home .sol .t{padding:clamp(18px,3.2vw,48px)}
 .pg-home .sol .for{font-size:16px;color:var(--grey);margin-bottom:14px;display:flex;align-items:center;gap:10px}
 .pg-home .sol .n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--y);color:var(--ink);font:400 15px/1 Outfit,sans-serif}
 .pg-home .sol h3{font-size:clamp(26px,2.6vw,38px);font-weight:300;letter-spacing:-.025em;line-height:1.1}
 .pg-home .sol .means{padding:18px 8px 6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
 .pg-home .sol.tall .means{padding:0;margin-top:22px}
 .pg-home .sol .means .lab{font-size:15px;color:var(--grey);white-space:nowrap}
 .pg-home .sol .bd p{color:var(--grey);max-width:32em;margin-top:20px}
 .pg-home .sol .ft{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
 .pg-home .sol .by{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--grey);white-space:nowrap}
 .pg-home .sol .by img{height:20px;width:auto}
/* work */
 .pg-home .work{padding:clamp(56px,7vw,104px) 0;border-radius:clamp(28px,4.4vw,64px)}
 .pg-home .wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
 .pg-home .wk{background:var(--night2);border:1px solid var(--nline);border-radius:var(--r-lg);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:14px;text-decoration:none}
 .pg-home .wk .top{font:500 15px/1.3 Figtree,sans-serif;color:var(--y)}
 .pg-home .wk .res{font:300 clamp(20px,1.7vw,24px)/1.3 Outfit,sans-serif;color:#fff}
 .pg-home .wk.feat{grid-column:1/-1;background:#fff;border-color:#fff;color:var(--ink);display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(20px,3vw,48px);align-items:center;padding:14px;transition:transform .25s}
 .pg-home .wk.feat:hover{transform:translateY(-3px)}
 .pg-home .wk.feat .l{padding:clamp(10px,2vw,28px) 0 clamp(10px,2vw,28px) clamp(10px,2.4vw,34px)}
 .pg-home .wk.feat .logo{height:22px;width:auto;filter:grayscale(1) brightness(.3);margin-bottom:clamp(24px,3vw,44px)}
 .pg-home .wk.feat .fig{display:block;font-size:clamp(64px,8vw,116px);line-height:.95;letter-spacing:-.045em;margin-bottom:16px}
 .pg-home .wk.feat .res{color:var(--ink);max-width:17em}
 .pg-home .wk.feat .sub{color:var(--grey);font-size:16px;margin:10px 0 24px}
 .pg-home .wk.ask{background:var(--y);border-color:var(--y);color:var(--ink);justify-content:space-between;min-height:132px}
 .pg-home .wk.ask h3{font-weight:300;font-size:clamp(21px,1.75vw,25px);line-height:1.2}
 .pg-home .wk.ask .tlink{align-self:flex-start;font-size:16px}
/* why */
 .pg-home .nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 .pg-home .nums li{padding:36px 28px 40px;border-left:1px solid var(--line)}
 .pg-home .nums li:first-child{border-left:0;padding-left:0}
 .pg-home .nums .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:var(--warm);margin-bottom:28px}
 .pg-home .nums .ico svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
 .pg-home .nums .fig{font-size:clamp(40px,4.4vw,64px);line-height:1;display:block;margin-bottom:6px}
 .pg-home .nums .lab{font-weight:600;display:block;margin-bottom:8px}
 .pg-home .nums p{color:var(--grey);font-size:16px}
 .pg-home .why-more{text-align:center;margin-top:36px}
/* process */
 .pg-home .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
 .pg-home .step{background:var(--night2);border:1px solid var(--nline);border-radius:var(--r-md);padding:24px}
 .pg-home .step:nth-child(1){margin-top:96px}
 .pg-home .step:nth-child(2){margin:64px 0 32px}
 .pg-home .step:nth-child(3){margin:32px 0 64px}
 .pg-home .step:nth-child(4){margin-bottom:96px}
 .pg-home .step .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--y);color:var(--ink);font:400 15px/1 Outfit,sans-serif;margin-bottom:22px}
 .pg-home .step h3{color:#fff;font-size:clamp(21px,1.7vw,25px);margin-bottom:10px}
 .pg-home .step p{font-size:16px}
 .pg-home .step ul{padding-top:12px}
 .pg-home .step li{position:relative;padding:10px 0 0 26px;font-size:16px;color:#fff;line-height:1.4}
 .pg-home .step li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:14px;border-radius:4px;background:var(--y)}
/* reviews */
 .pg-home .quote{background:var(--warm);border-radius:var(--r-lg);padding:clamp(24px,5vw,72px)}
 .pg-home .quote blockquote{font:300 clamp(25px,3.3vw,46px)/1.22 Outfit,sans-serif;letter-spacing:-.025em;max-width:22em;margin:28px 0 clamp(28px,4vw,56px);text-wrap:balance}
 .pg-home .quote .who2{display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
 .pg-home .quote .who2 b{display:block;font-weight:600}
 .pg-home .quote .who2 span{color:var(--grey);font-size:16px}
 .pg-home .quote .who2 img{height:20px;width:auto;filter:grayscale(1) brightness(.3)}
 .pg-home .quote .who2 .tlink{margin-left:auto}
@media(max-width:980px){
 .pg-home .cells{grid-template-columns:repeat(3,minmax(0,1fr))}
 .pg-home .sol:not(.tall){display:flex;flex-direction:column;align-items:stretch}
 .pg-home .sol:not(.tall) .m,.pg-home .sol:not(.tall) .t{display:contents}
 .pg-home .sol:not(.tall) .ph{order:1}
 .pg-home .sol:not(.tall) .hd{order:2;padding:24px 14px 0}
 .pg-home .sol:not(.tall) .means{order:3;padding:18px 14px 0}
 .pg-home .sol:not(.tall) .bd{order:4;padding:0 14px 16px}
 .pg-home .sol.tall,.pg-home .sol.tall.flip{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}
 .pg-home .sol.tall.flip{grid-template-columns:minmax(0,1fr) minmax(0,.42fr)}
 .pg-home .wgrid{grid-template-columns:1fr 1fr}
 .pg-home .nums{grid-template-columns:1fr 1fr}
 .pg-home .nums li:nth-child(3){border-left:0;padding-left:0}
 .pg-home .nums li:nth-child(n+3){border-top:1px solid var(--line)}
 .pg-home .steps{grid-template-columns:1fr 1fr}
 .pg-home .step:nth-child(n){margin:0}
}
@media(max-width:600px){
 .pg-home .reel{flex-direction:column;gap:10px}
 .pg-home .reel .row{display:flex;gap:10px}
 .pg-home .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pg-home .cells li{padding:10px}
 .pg-home .cells li::before{padding-top:calc(50% - 10px)}
 .pg-home .well{margin:0 -10px;padding:28px 10px 10px}
 .pg-home .well .head{padding:0 10px}
 .pg-home .sol{padding:10px;margin-top:10px}
 .pg-home .sol:not(.tall) .hd{padding:20px 8px 0}
 .pg-home .sol:not(.tall) .means{padding:16px 8px 0}
 .pg-home .sol:not(.tall) .bd{padding:0 8px 12px}
 .pg-home .sol.tall,.pg-home .sol.tall.flip{grid-template-columns:min(37%,150px) minmax(0,1fr);grid-template-areas:"ph hd" "mn mn" "bd bd";column-gap:16px;align-items:center}
 .pg-home .sol.tall.flip{grid-template-columns:minmax(0,1fr) min(37%,150px);grid-template-areas:"hd ph" "mn mn" "bd bd"}
 .pg-home .sol.tall .m,.pg-home .sol.tall .t{display:contents}
 .pg-home .sol.tall .ph{grid-area:ph}
 .pg-home .sol.tall .hd{grid-area:hd}
 .pg-home .sol.tall.flip .hd{padding-left:8px}
 .pg-home .sol.tall:not(.flip) .hd{padding-right:4px}
 .pg-home .sol.tall .means{grid-area:mn;margin:0;padding:18px 8px 0}
 .pg-home .sol.tall .bd{grid-area:bd;padding:0 8px 12px}
 .pg-home .sol .for{align-items:flex-start;line-height:1.35}
 .pg-home .sol.tall .for{flex-direction:column}
 .pg-home .sol h3{font-size:25px}
 .pg-home .sol .bd p{margin-top:16px}
 .pg-home .sol .ft{margin-top:20px;gap:12px 20px}
 .pg-home .sol .by{font-size:16px;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.3}
 .pg-home .sol .means .lab{font-size:16px;width:100%}
 .pg-home .wgrid{gap:10px}
 .pg-home .wk.feat{grid-template-columns:1fr;padding:10px;gap:8px}
 .pg-home .wk.feat .l{padding:16px 10px 8px}
 .pg-home .wk.ask{min-height:150px}
 .pg-home .nums li{padding:24px 14px 26px}
 .pg-home .nums li:nth-child(odd){padding-left:0}
 .pg-home .nums li:nth-child(even){padding-right:0}
 .pg-home .nums .ico{margin-bottom:16px;width:38px;height:38px}
 .pg-home .nums .fig{font-size:34px}
 .pg-home .steps{grid-template-columns:1fr;gap:10px}
 .pg-home .process .panel{padding:28px 14px 14px}
 .pg-home .process .head{padding:0 8px}
 .pg-home .step{padding:20px}
 .pg-home .step .n{margin-bottom:16px}
 .pg-home .quote .who2 .tlink{margin-left:0}
 .pg-home .hero .proof{flex-direction:column;align-items:center}
 .pg-home .hero{padding-top:40px}
 .pg-home .hero h1{margin:22px auto}
}

/* ---- adapted for the real site ---- */
 .pg-home .hero h1 .nb{white-space:nowrap}
 .pg-home .hero .tag{white-space:nowrap}
 .pg-home .sol h3 a{text-decoration:none}
 .pg-home .sol h3 a:hover{text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:3px;text-underline-offset:5px}
 .pg-home .sol .by img{filter:grayscale(1) brightness(.3)}
 .pg-home .sol .ph img{height:100%;object-fit:cover}

/* work: the one published result, two more of its figures, and the call tile */
 .pg-home .work{margin-top:clamp(52px,9vw,120px)}
 .pg-home .wk.feat .ph{border-radius:var(--r-md)}
 .pg-home .wk.more{justify-content:space-between;min-height:132px;gap:20px}
 .pg-home .wk.more .fig{font-size:clamp(40px,4.4vw,64px);line-height:1;color:#fff}
 .pg-home .wk.more .res{color:var(--onnight);font:400 16px/1.4 Figtree,sans-serif}
 .pg-home .wk.ask{grid-column:span 2}
 .pg-home .wk.ask h3{max-width:12em;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em}
 .pg-home .wk.ask .tlink:focus-visible{outline-color:var(--ink)}

/* industries: one photograph beside a cloud of large pill links */
 .pg-home .inds{padding-bottom:clamp(64px,9vw,120px)}
 .pg-home .inds-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
 .pg-home .inds .ph{border-radius:var(--r-lg)}
 .pg-home .inds h2{margin:20px 0 16px}
 .pg-home .inds .lead{max-width:30em}
 .pg-home .cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3vw,40px)}
 .pg-home .cloud a{display:inline-flex;align-items:center;gap:12px;padding:13px 20px 14px 22px;border-radius:999px;border:1px solid var(--line);background:var(--warm);text-decoration:none;font:300 clamp(19px,1.75vw,25px)/1.15 Outfit,sans-serif;letter-spacing:-.015em;transition:background .2s,border-color .2s}
 .pg-home .cloud a:hover{background:var(--y);border-color:var(--y)}
 .pg-home .cloud a:focus-visible{border-radius:999px}
 .pg-home .cloud .ar{flex:none;width:13px;height:13px;transition:transform .2s}
 .pg-home .cloud a:hover .ar{transform:translate(2px,-2px)}
 .pg-home .cloud li:nth-child(4n+1) a{background:#fff}
 .pg-home .cloud li:nth-child(4n+1) a:hover{background:var(--y)}

/* one gap, not two, between the last sections */
 .pg-home [data-section="faq"]{padding-top:0}
 .pg-home [data-section="cta"]{padding-top:0}

@media(max-width:980px){
 .pg-home .inds-in{grid-template-columns:1fr}
 .pg-home .inds .t{order:-1}
}
@media(max-width:600px){
 .pg-home .wgrid{grid-template-columns:1fr 1fr}
 .pg-home .wk.more{min-height:0;padding:18px}
 .pg-home .wk.more .fig{font-size:38px}
 .pg-home .cloud{gap:8px}
 .pg-home .cloud a{padding:11px 16px 12px 18px;font-size:18px;gap:10px}
}

/* ---- fixes after review: none of these changes the page at 1181px wide and above ---- */
/* the two small text links: a 44px tall tap area, nothing moves */
 .pg-home .why-more .tlink,.pg-home .quote .tlink{position:relative}
 .pg-home .why-more .tlink::after,.pg-home .quote .tlink::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* how it works: two by two until the four step cards have room */
@media(max-width:1180px){
 .pg-home .steps{grid-template-columns:1fr 1fr}
 .pg-home .step:nth-child(n){margin:0}
}
@media(max-width:600px){
 .pg-home .steps{grid-template-columns:1fr}
 .pg-home .sol .chip,.pg-home .sol .btn-sm{font-size:16px}
 .pg-home .well h2 span{display:block}
}
/* only used if the data changes: a problem with no photograph yet, and a logo count that leaves a part row */
 .pg-home .sol.plain{grid-template-columns:minmax(0,1fr)}
 .pg-home .cells .fill{grid-column:span var(--f6);padding:0}
 .pg-home .cells .fill::before{content:none}
@media(min-width:981px){.pg-home .cells .fill.z6{display:none}}
@media(min-width:601px) and (max-width:980px){.pg-home .cells .fill{grid-column:span var(--f3)}.pg-home .cells .fill.z3{display:none}}
@media(max-width:600px){.pg-home .cells .fill{grid-column:span var(--f2)}.pg-home .cells .fill.z2{display:none}}

/* 25-solution.css */
/* Design Q: solution pages. The page's main parts are in 05-inner.css. */

/* "Go deeper": the articles and industry pages behind a solution */
.rel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.rel h2{margin:20px 0 0}
.rel-ind{margin-top:32px}
.rel-ind p{font-size:15px;color:var(--grey);margin-bottom:12px}
.rel-ind .chip{text-decoration:none;white-space:normal;line-height:1.25;transition:border-color .2s}
.rel-ind .chip:hover{border-color:var(--ink)}
.rel-list{border-top:1px solid var(--line)}
.rel-list a{display:grid;grid-template-columns:minmax(0,9em) 1fr auto;gap:8px 24px;align-items:baseline;padding:24px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s,padding .2s}
.rel-list a:hover{background:var(--warm);padding-left:16px;padding-right:16px}
.rel-list .c{font-size:15px;color:var(--grey)}
.rel-list b{font:400 clamp(19px,1.7vw,24px)/1.3 Outfit,sans-serif;letter-spacing:-.01em;text-wrap:balance}
.rel-list .ar{width:14px;height:14px;transition:transform .2s}
.rel-list a:hover .ar{transform:translate(2px,-2px)}

/* service chips inside the fix are links to the service pages */
.fix a.chip{text-decoration:none;transition:border-color .2s,background .2s}
.fix a.chip:hover{border-color:var(--y);background:rgba(241,190,56,.12)}
.fix .chips li{display:flex}

/* a row of three photographs standing in for a case study */
[data-section="proof"] .trio{margin-top:0}
/* the same row laid out two other ways, so the six pages do not share one skeleton:
   "lead" = one large photograph with two stacked beside it (sized so 3:2 photographs line up, nothing cropped);
   "pair" = two photographs side by side */
.trio.lead{grid-template-columns:minmax(0,1fr) calc((100% - 40px)/3)}
.trio.lead .ph:first-child{grid-row:span 2}
.trio.pair{grid-template-columns:1fr 1fr}

/* a tour and a film as the proof (tpl_solution._proof, kinds "tours+films" and
   "films+tours"). The one named first is large; the other sits beside it. Only
   the columns are set here: each block lays itself out by the width it is given.
   Film first: two thirds and one third (1.99 to 1: a 16:9 film beside the
   tour's upright frame), so the two come out the same height. Tour first: the
   film is smaller; the tops line up, as they do film first (the words under
   each differ in height, so the feet cannot be made to meet). Under 981px
   wide: one under the other. */
.pwork{display:grid;grid-template-columns:minmax(0,1.99fr) minmax(0,1fr);gap:clamp(32px,4vw,56px) clamp(16px,2vw,24px);align-items:start}
.pwork.tours-first{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.pwork.stack{grid-template-columns:minmax(0,1fr)}
.pwork>div{min-width:0}

/* one gap, not two, between the last question and the yellow band */
.pg-solution [data-section="cta"]{padding-top:0}

/* "What is going wrong" is the section's heading; it keeps the look of the label */
[data-section="problem"] h2.pill-ink{letter-spacing:0}

/* no articles to list: the industry links alone */
.rel.solo{grid-template-columns:1fr}

/* a sixth step and beyond stay on the last stair instead of jumping back to the left edge */
@media(min-width:981px){
 .pg-solution .fix li.row:nth-child(n+6){margin-left:12%}
}

@media(max-width:980px){
 .rel{grid-template-columns:1fr;gap:28px}
 /* the tour and the film: one under the other */
 .pwork,.pwork.tours-first{grid-template-columns:minmax(0,1fr)}
 /* a line of the title never ends inside a short sentence */
 .pg-solution .shero h1 .s{display:inline-block}
 /* industry links keep the gap between rows */
 .rel-ind .chips li{display:flex}
}
@media(max-width:600px){
 /* phone: "lead" falls back to the shared row (first photograph full width, two below); "pair" stacks */
 .trio.lead{grid-template-columns:1fr 1fr}
 .trio.lead .ph:first-child{grid-row:auto}
 .trio.pair{grid-template-columns:1fr}
 .trio.pair .ph:first-child{grid-column:auto}
 /* everything tappable is at least 44px high */
 .pg-solution .fix .chips,.pg-solution .rel-ind .chips{gap:10px}
 .pg-solution .fix a.chip,.pg-solution .rel-ind .chip{padding:14px 16px}
 .pg-solution .case .note .tlink{position:relative}
 .pg-solution .case .note .tlink::after{content:"";position:absolute;inset:-9px 0}
 .pg-solution .cband .ways a{padding:10px 0}
 .rel-list a{grid-template-columns:1fr auto;padding:18px 2px}
 .rel-list .c{grid-column:1/-1}
}

/* 30-service.css */
/* Design Q: the 12 service pages. Every rule is scoped to .pg-service.
   Hero, dark panel and questions come from the shared partials. */
.pg-service main [id]{scroll-margin-top:96px}

/* hero: breadcrumb, title, lead, the two facts, button; photographs under */
.pg-service .shero h1{max-width:10em;font-size:clamp(44px,5.8vw,84px);text-wrap:balance}
.pg-service .facts{display:flex;flex-wrap:wrap;gap:0 40px;margin-top:24px;border-top:1px solid var(--line)}
.pg-service .facts div{padding:14px 0 0}
.pg-service .facts dt{font-size:15px;color:var(--grey)}
.pg-service .facts dd{margin:2px 0 0;font:400 clamp(19px,1.6vw,22px)/1.3 Outfit,sans-serif;letter-spacing:-.01em}

/* a row of whole photographs, equal in height whatever their shapes */
.pg-service .jrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;--h:170px}
.pg-service .jrow .ph{flex:calc(var(--ar)*10) 1 calc(var(--ar)*var(--h));aspect-ratio:var(--ar);min-width:0;border-radius:var(--r-lg)}
.pg-service .jrow img{width:100%;height:100%;object-fit:cover}
.pg-service .jrow .scr img{object-position:top}
.pg-service .hero-ph{margin-top:clamp(40px,5vw,72px)}

/* in-page links */
.pg-service .jump{margin-top:clamp(28px,3.5vw,44px);padding-top:20px;border-top:1px solid var(--line)}
.pg-service .jump .chip{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;font-size:15px;text-decoration:none;transition:border-color .2s,background .2s}
.pg-service .jump .chip:hover{border-color:var(--ink)}
.pg-service .jump .chip.go{background:var(--y);border-color:var(--y)}
.pg-service .jump .chip.go:hover{background:#e9b224;border-color:#e9b224}
.pg-service .jump .ar{width:12px;height:12px}
.pg-service .jump .chip:focus-visible{border-radius:999px}

/* overview: the copy, with what is included in a warm card beside it */
.pg-service .over{padding-top:clamp(24px,4vw,56px)}
.pg-service .over-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:start}
.pg-service .open{font:300 clamp(24px,2.5vw,36px)/1.25 Outfit,sans-serif;letter-spacing:-.02em;margin:24px 0 28px;max-width:21em;text-wrap:pretty}
.pg-service .over .prose{color:var(--grey)}
.pg-service .over aside{position:sticky;top:104px}
.pg-service .over-in>*{min-width:0}
.pg-service .inc{background:var(--warm);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px)}
.pg-service .inc h2{font-size:clamp(23px,2.1vw,30px);line-height:1.18;font-weight:400;letter-spacing:-.015em}
.pg-service .inc ul{margin:20px 0 28px;border-top:1px solid var(--line)}
.pg-service .inc li{display:flex;gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.pg-service .inc li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--y);transform:translateY(-1px)}
.pg-service .part{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-md);padding:20px clamp(20px,3vw,40px)}
.pg-service .part p{font-size:15px;color:var(--grey)}
.pg-service .part a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0 2px;text-decoration:none;text-wrap:balance;font:400 clamp(19px,1.6vw,22px)/1.3 Outfit,sans-serif;letter-spacing:-.01em}
.pg-service .part li+li a{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.pg-service .part .ar{flex:none;width:14px;height:14px;transition:transform .2s}
.pg-service .part a:hover .ar{transform:translate(2px,-2px)}
.pg-service .part a:hover{text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:4px}

/* who it is for: a warm band with one long row per kind of firm */
.pg-service .who-in{background:var(--warm);margin:0 12px;border-radius:var(--r-xl);padding:clamp(48px,7vw,104px) 0 clamp(32px,5vw,72px)}
.pg-service .who-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.pg-service .who-head h2{margin-top:20px;max-width:12em}
.pg-service .who-head .lead{max-width:32em}
.pg-service .plist{border-top:1px solid #d9d5c8}
.pg-service .plist li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px clamp(20px,4vw,64px);align-items:baseline;padding:clamp(22px,2.6vw,34px) 4px;border-bottom:1px solid #d9d5c8}
.pg-service .plist h3{font-size:clamp(23px,2.3vw,32px);font-weight:300;letter-spacing:-.02em}
.pg-service .plist p{color:var(--grey);max-width:36em}

/* why it matters: one photograph and one statement */
.pg-service .why-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.pg-service .why .ph{border-radius:var(--r-lg)}
.pg-service .why .ph.tall{max-width:440px;justify-self:end;width:100%}
.pg-service .why h2{margin:20px 0 20px}
.pg-service .say-l{font:300 clamp(20px,1.9vw,27px)/1.4 Outfit,sans-serif;letter-spacing:-.015em;max-width:26em;text-wrap:pretty}
.pg-service .why.solo .why-in{grid-template-columns:1fr;text-align:center;justify-items:center}
.pg-service .why.solo .say-l{font-size:clamp(22px,2.4vw,34px);line-height:1.32;max-width:27em}

/* approach: the dark numbered panel, with the working pictures under the steps */
.pg-service .fix li.row{grid-template-columns:44px minmax(0,1fr)}
.pg-service .fix .n{font-size:15px}
.pg-service .fix .head h2{text-wrap:balance}
.pg-service .fix .row p{max-width:44em}
.pg-service .work-ph{margin-top:clamp(28px,4vw,48px);--h:150px}
.pg-service .work-ph .ph{border-radius:var(--r-md);background:var(--night2);max-width:calc(var(--ar)*420px)}

/* benefits: every tile is as tall as its own words, with the words at the top.
   The first runs the full width, tinted, its heading large on the left and its
   line on the right; the rest sit in pairs; an even last one runs the full
   width, dark. In both full-width tiles the right-hand words start on the
   same line down the page as the words of the right-hand tile of a pair. Works for any number of tiles. */
.pg-service .ben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.pg-service .ben li{background:var(--warm);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px)}
.pg-service .ben h3{margin-bottom:10px;text-wrap:balance}
.pg-service .ben p{color:var(--grey);max-width:34em}
.pg-service .ben li:first-child,.pg-service .ben li:nth-child(2):last-child{grid-column:1/-1}
.pg-service .ben li:first-child{background:var(--ytint);padding-top:clamp(28px,3.4vw,48px);padding-bottom:clamp(28px,3.4vw,48px)}
.pg-service .ben li:first-child div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px calc(16px + 2*clamp(24px,3vw,40px));align-items:center}
.pg-service .ben li:first-child h3{font-size:clamp(28px,3.2vw,46px);font-weight:300;letter-spacing:-.025em;line-height:1.08;margin:0;max-width:12em}
.pg-service .ben li:first-child p{color:var(--ink);font-size:clamp(17px,1.4vw,20px)}
.pg-service .ben li:last-child:nth-child(even):nth-child(n+4){grid-column:1/-1;background:var(--ink);color:#fff}
.pg-service .ben li:last-child:nth-child(even):nth-child(n+4) p{color:var(--onnight)}
.pg-service .ben li:last-child:nth-child(even):nth-child(n+4) div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px calc(16px + 2*clamp(24px,3vw,40px));align-items:start}
.pg-service .ben li:last-child:nth-child(even):nth-child(n+4) h3{margin:0}

/* other services: a hairline list of links */
.pg-service .more-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.pg-service .more h2{margin-top:20px}
.pg-service .more-list{border-top:1px solid var(--line)}
.pg-service .more-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s,padding .2s}
.pg-service .more-list a:hover{background:var(--warm);padding-left:16px;padding-right:16px}
.pg-service .more-list b{font:400 clamp(21px,2vw,28px)/1.2 Outfit,sans-serif;letter-spacing:-.015em}
.pg-service .more-list .go{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--grey);white-space:nowrap}
.pg-service .more-list .ar{width:13px;height:13px;transition:transform .2s}
.pg-service .more-list a:hover .ar{transform:translate(2px,-2px)}
.pg-service .gal .head{margin-bottom:clamp(20px,2.5vw,32px)}

@media(max-width:980px){
 .pg-service .over-in,.pg-service .who-head,.pg-service .why-in,.pg-service .more-in{grid-template-columns:1fr}
 .pg-service .over aside{position:static}
 .pg-service .who-head{align-items:start}
 .pg-service .plist li{grid-template-columns:1fr}
 .pg-service .why .ph{max-width:640px}
 .pg-service .why .ph.tall{justify-self:start;max-width:380px}
 .pg-service .more-in{gap:28px}
}
@media(max-width:600px){
 .pg-service .jrow{gap:10px;--h:96px}
 .pg-service .work-ph{--h:96px}
 .pg-service .hero-ph .ph{flex-basis:0}
 .pg-service .hero-ph .ph:first-child{flex-basis:100%}
 .pg-service .facts{gap:0 28px}
 .pg-service .who-in{margin:0 6px}
 .pg-service .plist li{padding:22px 2px}
 .pg-service .ben{grid-template-columns:1fr}
 .pg-service .ben li:first-child div,.pg-service .ben li:last-child:nth-child(even):nth-child(n+4) div{grid-template-columns:1fr}
 .pg-service .more-list a{grid-template-columns:1fr;padding:16px 2px}
 .pg-service .why.solo .why-in{text-align:left;justify-items:start}
 .pg-service .fix .head h2{text-wrap:pretty}
 .pg-service .jump .chip{font-size:16px}
 .pg-service .part p,.pg-service .facts dt{font-size:16px}
 /* number above the step text, as the shared phone rule intends */
 .pg-service .fix li.row{grid-template-columns:1fr}
}
/* tablets: the hero photographs stay on one line, sharing the width by shape */
@media(min-width:601px) and (max-width:1099px){
 .pg-service .hero-ph{flex-wrap:nowrap}
 .pg-service .hero-ph .ph{flex-basis:0}
}
/* phones and tablets: tap targets of at least 44px */
@media(max-width:1099px){
 .pg-service .jump .chip{padding:14px 16px}
 .pg-service .part a{min-height:44px;padding:12px 0 4px}
 .pg-service .bc a{position:relative}
 .pg-service .bc a::after{content:"";position:absolute;inset:-10px -2px}
}
.pg-service .shero .cols .lead{margin-top:20px;max-width:26em}
.pg-service .shero .facts{margin-top:0}
/* long service names: keep the questions heading inside its narrow column */
.pg-service .faq-2 .fh h2{text-wrap:balance}
@media(min-width:981px){.pg-service .faq-2 .fh h2{font-size:clamp(30px,3vw,44px)}}

/* ---- real work in place of the opening photographs (content/showcase.json) ----
   The films (video production) and the tours (360 tours) are the shared blocks
   from tpl_chrome.py, styled in 10-chrome.css. Here only: where they sit. */
.pg-service .shero .films,.pg-service .shero .tours{margin-top:clamp(40px,5vw,72px)}

/* the narrowest phones: the long button in the overview card may wrap */
@media(max-width:360px){.pg-service .inc .btn{white-space:normal;padding-left:18px;padding-right:18px}}

/* logo and brand design: logo work, one mark to a hairline cell. Only shown
   once content/showcase.json lists some. */
.pg-service .logos{margin-top:clamp(40px,5vw,72px)}
.pg-service .logos p{font-size:15px;color:var(--grey);padding-bottom:12px}
.pg-service .logos ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,50%),1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pg-service .logos li{position:relative;aspect-ratio:3/2;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.pg-service .logos li.on-dark{background:var(--night)}
.pg-service .logos img{position:absolute;left:16%;top:22%;width:68%;height:56%;object-fit:contain}
@media(max-width:600px){.pg-service .logos p{font-size:16px}}

/* ---- web design: websites open the page, in place of buildings ----
   A site we built, in the shared window (.site, 10-chrome.css), here as tall
   as the design shots beside it. The window does not scroll; its own button
   opens the whole capture. Stacked (tablet and phone) the window takes its
   own height and the shots sit in a row under it. */
.pg-service .sites{display:grid;grid-template-columns:minmax(0,1.78fr) minmax(0,1fr);gap:16px;margin-top:clamp(40px,5vw,72px)}
.pg-service .site-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.pg-service .site-side .ph{aspect-ratio:var(--ar);border-radius:var(--r-lg)}
.pg-service .site-side img{width:100%;height:100%;object-fit:cover;object-position:top}
/* no design shots beside it: the window takes its own height */
.pg-service .sites.solo{grid-template-columns:1fr}
@media(min-width:981px){
 .pg-service .sites:not(.solo) .site-view{flex:1 1 0;min-height:0;aspect-ratio:auto;max-height:760px}
}
@media(max-width:980px){
 .pg-service .sites{grid-template-columns:1fr}
 .pg-service .site-side{flex-direction:row}
 .pg-service .site-side .ph{flex:calc(var(--ar)*10) 1 0;min-width:0}
}
@media(max-width:600px){
 .pg-service .sites,.pg-service .site-side{gap:10px}
}

/* 40-landing.css */
/* Design Q: landing pages (nine industry pages, creative agency, digital agency).
   Every rule is scoped to .pg-landing. Built on 00-base, 05-inner and 10-chrome. */

/* rhythm: this page's own sections carry half the gap each */
.pg-landing .l-sec{padding:clamp(32px,4.6vw,60px) 0}
.pg-landing .l-two{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,6vw,96px);align-items:start}
.pg-landing .prose{max-width:40em}
.pg-landing .prose p{color:var(--grey)}
.pg-landing .nb{white-space:nowrap}

/* hero */
.pg-landing .l-hero{padding:clamp(28px,4vw,56px) 0 clamp(32px,4.6vw,60px)}
.pg-landing .l-hero h1{margin-top:clamp(22px,2.6vw,36px)}
.pg-landing .l-hero .lead{color:var(--ink);max-width:30em}
.pg-landing .l-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pg-landing .l-btns .btn{margin-top:0}
.pg-landing .l-hero-ph{border-radius:var(--r-lg)}
.pg-landing .l-hero-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.pg-landing .l-hero-2 h1{max-width:none}
.pg-landing .l-hero-2 h1.h1-m{font-size:clamp(36px,4.3vw,64px)}
.pg-landing .l-hero-2 .lead{margin-top:24px}
.pg-landing .l-hero.tall .l-hero-2{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.pg-landing .l-hero.tall .l-hero-ph{max-width:430px;width:100%;justify-self:end}
/* a stand-in photograph fills the frame of the one it replaces */
.pg-landing .ph.l-fit img{height:100%;object-fit:cover}
.pg-landing .l-hero.wide .lead{max-width:none}
.pg-landing .l-hero.wide .l-hero-ph{margin-top:clamp(36px,4.6vw,64px)}

/* opening paragraphs */
.pg-landing .l-intro .big{font:300 clamp(22px,2.3vw,32px)/1.32 Outfit,system-ui,sans-serif;letter-spacing:-.018em;max-width:27em;text-wrap:pretty}
.pg-landing .l-intro .prose{margin-top:clamp(20px,2.2vw,30px)}

/* warm card: photograph one side, copy the other */
.pg-landing .l-card{background:var(--warm);border-radius:var(--r-lg);padding:clamp(24px,4.4vw,64px);display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,5vw,80px);align-items:start}
.pg-landing .l-card .t{display:contents}
.pg-landing .l-card.has-ph{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;padding:clamp(12px,1.4vw,18px)}
.pg-landing .l-card.has-ph .t{display:block;padding:clamp(14px,2.6vw,40px) clamp(10px,2.6vw,40px) clamp(14px,2.6vw,40px) 0}
.pg-landing .l-card.has-ph .ph{border-radius:calc(var(--r-lg) - 8px)}
.pg-landing .l-card.has-ph h2{margin-bottom:clamp(18px,2vw,28px)}
.pg-landing .l-card h2,.pg-landing .l-plain h2{font-size:clamp(30px,3.5vw,50px)}
.pg-landing .l-plain .hd h2{font-size:clamp(28px,2.9vw,40px)}

/* dark panel: heading and call-out on the left, numbered rows on the right */
.pg-landing .l-help-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,72px);align-items:start}
.pg-landing .l-help .hd{position:sticky;top:112px}
.pg-landing .l-help h2{margin-top:20px;font-size:clamp(30px,3.5vw,50px)}
.pg-landing .l-help .prose{margin-top:20px}
.pg-landing .l-help .prose p{color:var(--onnight)}
.pg-landing .l-help .line{margin-top:clamp(22px,2.4vw,32px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--nline);font:300 clamp(20px,1.85vw,26px)/1.35 Outfit,system-ui,sans-serif;letter-spacing:-.012em;color:#fff;max-width:22em}
.pg-landing .l-help .btn{margin-top:28px}
.pg-landing .l-help .rows li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:18px;align-items:start;background:var(--night2);border:1px solid var(--nline);border-radius:var(--r-md);padding:clamp(18px,1.8vw,24px)}
.pg-landing .l-help .rows li+li{margin-top:10px}
.pg-landing .l-help .rows .n{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--y);color:var(--ink);font:400 16px/1 Outfit,system-ui,sans-serif}
.pg-landing .l-help .rows h3{color:#fff;font-size:clamp(20px,1.7vw,24px);margin:6px 0 6px}
.pg-landing .l-help .rows p{font-size:16px;line-height:1.55}
.pg-landing .l-help .after{margin-top:40px}

/* real work (round 3): one section a page, straight after the dark panel.
   The films, tours, result card and website window are the shared blocks (10-chrome, 05-inner)
   and are not restyled here: these rules only place them. The blocks lay
   themselves out by the width they are given. */
.pg-landing .l-show-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px) clamp(24px,3vw,44px)}
.pg-landing .l-show .hd h2{margin-top:20px;max-width:17em}
.pg-landing .l-show .it{min-width:0}
/* a single tour: centred under a centred heading, no wider than the tour frame goes */
.pg-landing .l-show.mid .hd{text-align:center}
.pg-landing .l-show.mid .hd h2{margin-left:auto;margin-right:auto}
.pg-landing .l-show.mid .it{width:100%;max-width:1040px;justify-self:center}

@media(min-width:981px){
 /* a tour and the result card: the tour beside the heading, the card under
    both. The tour's column never drops under 553px, the width at which the
    shared frame is 16:9. */
 .pg-landing .l-show.split .l-show-in{grid-template-columns:minmax(0,1fr) minmax(553px,1.5fr);column-gap:clamp(24px,5vw,72px)}
 .pg-landing .l-show.split .hd{grid-column:1;grid-row:1}
 .pg-landing .l-show.split .hd h2{font-size:clamp(30px,3.5vw,50px)}
 .pg-landing .l-show.split .is-tours{grid-column:2;grid-row:1}
 .pg-landing .l-show.split .is-result{grid-column:1/-1}
}
/* one film and one tour: side by side in equal columns. Both are 16:9, so
   they come out the same height. The tour's column never drops under 553px,
   the width at which the shared frame is 16:9; from 1190px wide both columns
   are at least that, so below it the two stack instead of sitting unequal. */
@media(min-width:1190px){
 .pg-landing .l-show.duo .l-show-in{grid-template-columns:minmax(0,1fr) minmax(553px,1fr);align-items:start}
 .pg-landing .l-show.duo .hd{grid-column:1/-1}
}

/* plain copy beside its heading, hairlines between paragraphs */
.pg-landing .l-plain .hd{position:sticky;top:112px}
.pg-landing .prose.ruled>*{margin-top:0;padding:clamp(18px,1.8vw,24px) 0;border-top:1px solid var(--line)}
.pg-landing .prose.ruled>:last-child{border-bottom:1px solid var(--line)}
.pg-landing .prose.ruled>p:first-child{color:var(--ink)}

/* block types the landing copy can use besides paragraphs */
.pg-landing .l-note{background:var(--ytint);border-radius:var(--r-md);padding:20px 24px}
.pg-landing .l-note p{color:var(--ink)}
.pg-landing .l-dl dt{font:400 clamp(20px,1.7vw,24px)/1.25 Outfit,system-ui,sans-serif;letter-spacing:-.01em}
.pg-landing .l-dl dd{margin:4px 0 0;color:var(--grey)}
.pg-landing .l-dl>div+div{margin-top:1em}

/* what do you need: links to the solution pages on a warm band */
.pg-landing #need{scroll-margin-top:96px}
.pg-landing .l-need{background:var(--warm);margin-top:clamp(32px,4.6vw,60px);margin-bottom:clamp(32px,4.6vw,60px);padding:clamp(40px,6vw,88px) 0}
.pg-landing .l-need-in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,6vw,96px);align-items:center}
.pg-landing .l-need h2{margin-top:20px}
.pg-landing .l-need-list{display:grid;gap:10px}
.pg-landing .l-need-list a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(16px,1.7vw,22px);text-decoration:none;transition:border-color .2s}
.pg-landing .l-need-list a:hover{border-color:var(--ink)}
.pg-landing .l-need-list a:focus-visible{border-radius:var(--r-md)}
.pg-landing .l-need-list .n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--y);font:400 18px/1 Outfit,system-ui,sans-serif}
.pg-landing .l-need-list b{display:block;text-wrap:balance;font:400 clamp(20px,1.8vw,25px)/1.22 Outfit,system-ui,sans-serif;letter-spacing:-.012em}
.pg-landing .l-need-list small{display:block;font-size:16px;line-height:1.4;color:var(--grey);margin-top:4px}
.pg-landing .l-need-list .ar{width:16px;height:16px;margin-right:6px;transition:transform .2s}
.pg-landing .l-need-list a:hover .ar{transform:translate(2px,-2px)}
.pg-landing .l-need.many .l-need-in{grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
.pg-landing .l-need.many .l-need-list{grid-template-columns:repeat(2,minmax(0,1fr))}

/* services: a centred run of pill links */
.pg-landing .l-svc .head{margin-bottom:clamp(24px,3vw,40px)}
.pg-landing .l-svc-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1040px;margin:0 auto}
.pg-landing .l-svc-list a{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 22px;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;transition:border-color .2s}
.pg-landing .l-svc-list a:hover{border-color:var(--ink)}
.pg-landing .l-svc-list a:focus-visible{border-radius:999px}
.pg-landing .l-svc-list .nm{font:500 17px/1.25 Figtree,system-ui,sans-serif}
.pg-landing .l-svc-list .go{display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:9px 13px;border-radius:999px;background:var(--warm);font:500 14px/1 Figtree,system-ui,sans-serif;color:var(--ink);white-space:nowrap;transition:background .2s}
.pg-landing .l-svc-list a:hover .go{background:var(--y)}
.pg-landing .l-svc-list .ar{width:12px;height:12px}

/* the shared sections that follow already bring their own space above */
.pg-landing .l-svc{padding-bottom:0}

@media(max-width:980px){
 .pg-landing .l-two,.pg-landing .l-help-in,.pg-landing .l-need-in,.pg-landing .l-card,.pg-landing .l-card.has-ph{grid-template-columns:1fr}
 .pg-landing .l-hero-2,.pg-landing .l-hero.tall .l-hero-2{grid-template-columns:1fr}
 .pg-landing .l-hero.tall .l-hero-ph{justify-self:start}
 .pg-landing .l-help .hd,.pg-landing .l-plain .hd{position:static}
 .pg-landing .l-card.has-ph .t{padding:8px clamp(10px,2.6vw,24px) clamp(14px,2.6vw,24px)}
 .pg-landing .l-help .line{max-width:none}
}
/* a tall hero photograph keeps its place beside the words down to 601 wide */
@media(min-width:601px) and (max-width:980px){
 .pg-landing .l-hero.tall .l-hero-2{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
 .pg-landing .l-hero.tall .l-hero-ph{justify-self:end}
}
@media(max-width:600px){
 .pg-landing .l-help .panel{padding:28px 14px 14px}
 .pg-landing .l-help .hd{padding:0 8px 6px}
 .pg-landing .l-need.many .l-need-list{grid-template-columns:1fr}
 .pg-landing .l-need-list a{grid-template-columns:40px minmax(0,1fr) auto;gap:14px}
 .pg-landing .l-need-list .n{width:40px;height:40px}
 .pg-landing .l-svc-list{display:grid;justify-content:stretch}
 .pg-landing .l-svc-list a{justify-content:flex-start}
 .pg-landing .l-svc-list .go{margin-left:auto}
 .pg-landing .l-btns .btn{flex:1 1 auto;justify-content:center}
}
/* an odd number of solution links: the last one runs the full width */
@media(min-width:601px){.pg-landing .l-need.many .l-need-list li:last-child:nth-child(odd){grid-column:1/-1}}

/* 50-article.css */
/* Design Q: the insights index and the articles. Every rule is under .pg-article. */

/* ---- top of the page: breadcrumb, title, standfirst, facts, lead photograph ---- */
.pg-article .ahero{padding:clamp(28px,4vw,56px) 0 0}
.pg-article .ahero .top{margin-top:clamp(28px,3.4vw,48px)}
.pg-article .ahero .txt{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.pg-article .ahero h1{max-width:15em}
.pg-article .ahero .lead{color:var(--ink);max-width:32em}
.pg-article .ahero .top>.ph{margin-top:clamp(32px,4.5vw,64px);border-radius:var(--r-lg)}
/* a square or upright photograph sits beside the title instead of under it */
.pg-article .ahero.side .top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:center}
.pg-article .ahero.side .txt{display:block}
.pg-article .ahero.side .lead{margin-top:24px}
.pg-article .ahero.side .top>.ph{margin-top:0;width:100%;justify-self:end}

.pg-article .facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.pg-article .facts div{display:flex;align-items:center;gap:8px}
.pg-article .facts dt{font-size:15px;color:var(--grey)}
.pg-article .facts dd{margin:0;font-size:16px;font-weight:500}

/* ---- article body: contents beside the reading column ---- */
.pg-article .abody{padding:clamp(48px,6vw,88px) 0 0}
.pg-article .abody .grid{display:grid;grid-template-columns:minmax(0,280px) minmax(0,700px);gap:clamp(32px,7vw,112px);align-items:start}
.pg-article .abody .grid.no-toc{grid-template-columns:minmax(0,700px);justify-content:center}
.pg-article .art__toc{position:sticky;top:108px}
.pg-article .art__toc>p{font:500 15px/1.25 Figtree,sans-serif;color:var(--grey);margin-bottom:14px}
.pg-article .art__toc ol{counter-reset:t;border-top:1px solid var(--line)}
.pg-article .art__toc li{counter-increment:t;border-bottom:1px solid var(--line)}
.pg-article .art__toc a{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:13px 2px;text-decoration:none;font-size:16px;line-height:1.35;color:var(--grey);transition:color .2s}
.pg-article .art__toc a::before{content:counter(t);display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--warm);color:var(--ink);font:400 14px/1 Outfit,sans-serif;transition:background .2s}
.pg-article .art__toc a>*{align-self:center}
.pg-article .art__toc a:hover,.pg-article .art__toc a[aria-current]{color:var(--ink)}
.pg-article .art__toc a:hover::before,.pg-article .art__toc a[aria-current]::before{background:var(--y)}

.pg-article .prose{max-width:none}
.pg-article .prose>p:first-child{font:300 clamp(21px,2vw,27px)/1.4 Outfit,sans-serif;letter-spacing:-.015em}
.pg-article .prose h2{scroll-margin-top:112px}

/* a pulled line */
.pg-article .prose .art__quote{margin-top:1.6em;margin-bottom:1.6em}

/* the one thing to remember: the dark panel */
.pg-article .prose .art__callout{margin-top:2em;margin-bottom:2em;background:var(--night);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3.6vw,44px)}
.pg-article .prose .art__callout::before{content:"";display:block;width:40px;height:6px;border-radius:999px;background:var(--y);margin-bottom:22px}
.pg-article .prose .art__callout p{font:300 clamp(21px,2.05vw,28px)/1.32 Outfit,sans-serif;letter-spacing:-.015em;color:#fff;text-wrap:balance}

/* lists of points: the first is a numbered hairline list, the next a set of warm tiles, and so on */
.pg-article .prose .art__points{margin-top:1.7em;margin-bottom:1.7em;counter-reset:pt}
.pg-article .prose .art__point{counter-increment:pt}
.pg-article .prose .art__point h3{margin:0;font-size:clamp(20px,1.7vw,24px);line-height:1.22}
.pg-article .prose .art__point p{margin-top:6px;font-size:17px;line-height:1.6;color:var(--grey)}
.pg-article .prose .art__points:nth-of-type(odd){border-top:1px solid var(--line)}
.pg-article .prose .art__points:nth-of-type(odd) .art__point{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.pg-article .prose .art__points:nth-of-type(odd) .art__point::before{content:counter(pt);grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--warm);font:400 18px/1 Outfit,sans-serif}
.pg-article .prose .art__points:nth-of-type(odd) .art__point>*{grid-column:2}
.pg-article .prose .art__points:nth-of-type(even){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pg-article .prose .art__points:nth-of-type(even) .art__point{background:var(--warm);border-radius:var(--r-md);padding:clamp(20px,2.2vw,28px)}
.pg-article .prose .art__points:nth-of-type(even) .art__point::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--y);margin-bottom:18px}
.pg-article .prose .art__points:nth-of-type(even) .art__point:last-child:nth-child(odd){grid-column:1/-1}

/* photographs in the copy: whole, in a rounded frame, never taller than the screen */
.pg-article .prose .art__fig{margin-top:2em;margin-bottom:2em;width:fit-content;max-width:100%;border-radius:var(--r-md);overflow:hidden;background:var(--warm)}
.pg-article .prose .art__fig img{width:100%;height:auto}
/* a heading sits as clear of a paragraph as it does of a list */
.pg-article .prose h2+p{margin-top:.9em}

/* ---- hairline rows of articles (index, and "Keep reading") ---- */
.pg-article .irows{border-top:1px solid var(--line)}
.pg-article .irow{display:grid;grid-template-columns:minmax(0,1fr) 40px;column-gap:20px;padding:24px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .2s,background .2s}
.pg-article .irow>*{grid-column:1}
.pg-article .irow .chip{justify-self:start}
.pg-article .irow h3{margin-top:14px;font-size:clamp(20px,1.8vw,25px);line-height:1.22}
.pg-article .irow p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--grey);max-width:38em}
.pg-article .irow .go{grid-column:2;grid-row:1/4;align-self:center;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;transition:background .2s,border-color .2s}
.pg-article .irow .go .ar{width:14px;height:14px;transition:transform .2s}
.pg-article .irow:hover .go{background:var(--y);border-color:var(--y)}
.pg-article .irow:hover .go .ar{transform:translate(1px,-1px)}
.pg-article .irow:focus-visible{border-radius:12px}

/* ---- "Keep reading" under an article ---- */
.pg-article .arel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.pg-article .arel h2{margin:20px 0 28px}

/* ---- index: two lead articles ---- */
.pg-article .feats{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:clamp(40px,5vw,72px)}
.pg-article .feats.one{grid-template-columns:1fr}
.pg-article .feat{display:flex;flex-direction:column;padding:14px;border-radius:var(--r-lg);background:var(--warm);text-decoration:none}
.pg-article .feat.dark{background:var(--night)}
.pg-article .feat .ph{border-radius:var(--r-md);background:rgba(21,23,31,.06)}
.pg-article .feat .ph img{transition:transform .5s}
.pg-article .feat:hover .ph img{transform:scale(1.02)}
.pg-article .feat .b{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(20px,2.4vw,32px) clamp(10px,1.6vw,22px) clamp(12px,1.6vw,20px)}
.pg-article .feat h2{font-size:clamp(27px,3vw,42px);margin:18px 0 12px;max-width:17em}
.pg-article .feat.f2 h2{font-size:clamp(25px,2.3vw,32px)}
.pg-article .feat p{color:var(--grey);max-width:34em}
.pg-article .feat.dark p{color:var(--onnight)}
.pg-article .feat .tlink{margin-top:auto}
.pg-article .feat .b p{margin-bottom:24px}
.pg-article .feat:focus-visible{border-radius:var(--r-lg)}

/* ---- index: the rest, in groups of one photograph and a short list ---- */
.pg-article .igroup{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,6vw,96px);align-items:start}
.pg-article .igroup+.igroup{margin-top:clamp(56px,7vw,104px)}
.pg-article .igroup.well{background:var(--warm);border-radius:var(--r-xl);padding:clamp(20px,4vw,56px)}
.pg-article .igroup.well .irows,.pg-article .igroup.well .irow{border-color:#dcd8cb}
.pg-article .pcard{display:block;text-decoration:none}
.pg-article .pcard .ph{border-radius:var(--r-lg);margin-bottom:22px}
.pg-article .pcard .ph img{transition:transform .5s}
.pg-article .pcard:hover .ph img{transform:scale(1.02)}
.pg-article .pcard h2{font-size:clamp(25px,2.4vw,34px);margin:16px 0 10px}
.pg-article .pcard p{color:var(--grey);max-width:30em}
.pg-article .pcard:focus-visible{border-radius:var(--r-lg)}

@media(min-width:981px){
 .pg-article .igroup.flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
 .pg-article .igroup.flip .pcard{order:2}
 /* about 80 characters to a line */
 .pg-article .abody .prose{font-size:19px}
}
/* the photo card follows the rows only where the screen is tall enough to show all of it */
@media(min-width:981px) and (min-height:880px){
 .pg-article .pcard{position:sticky;top:108px}
}
@media(max-width:980px){
 .pg-article .ahero .txt{grid-template-columns:1fr;align-items:start}
 .pg-article .ahero.side .top{grid-template-columns:1fr}
 .pg-article .ahero.side .top>.ph{justify-self:start}
 .pg-article .abody .grid{grid-template-columns:minmax(0,1fr);gap:36px}
 .pg-article .abody .prose{max-width:44em}
 .pg-article .art__toc{position:static;background:var(--warm);border-radius:var(--r-md);padding:22px 20px 10px;max-width:44em}
 .pg-article .art__toc ol,.pg-article .art__toc li{border-color:#dcd8cb}
 .pg-article .art__toc li:last-child{border-bottom:0}
 .pg-article .art__toc a::before{background:#fff}
 .pg-article .arel{grid-template-columns:1fr;gap:28px}
 .pg-article .feats{grid-template-columns:1fr}
 .pg-article .igroup{grid-template-columns:1fr;gap:28px}
}
/* tablet: an upright photograph keeps its text beside it instead of leaving half the row empty */
@media(min-width:601px) and (max-width:980px){
 .pg-article .pcard.tall{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(24px,4.5vw,40px)}
 .pg-article .pcard.tall .ph{grid-column:1;grid-row:1/-1;margin-bottom:0;max-width:none!important}
 .pg-article .pcard.tall .chip{grid-column:2;grid-row:2;justify-self:start}
 .pg-article .pcard.tall h2{grid-column:2;grid-row:3}
 .pg-article .pcard.tall p{grid-column:2;grid-row:4}
}
@media(min-width:601px) and (max-width:980px){
 .pg-article .ahero.side .top{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
 .pg-article .ahero.side .top>.ph{justify-self:end}
}
@media(max-width:600px){
 .pg-article .pcard .ph{max-width:none!important}
 .pg-article .facts{gap:10px 20px;margin-top:22px;padding-top:16px}
 .pg-article .facts dd{font-size:16px}.pg-article .facts dt{font-size:16px}
 .pg-article .prose .art__points:nth-of-type(even){grid-template-columns:1fr}
 .pg-article .prose .art__points:nth-of-type(odd) .art__point{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px 0}
 .pg-article .prose .art__points:nth-of-type(odd) .art__point::before{width:40px;height:40px}
 .pg-article .prose .art__point p{font-size:16px}
 .pg-article .feat{padding:10px}
 .pg-article .irow{padding:20px 2px;column-gap:14px}
 .pg-article .igroup.well{padding:14px 14px 6px;margin-left:-8px;margin-right:-8px}
 .pg-article .igroup.well .irows li:last-child .irow{border-bottom:0}
}

/* 60-about.css */
/* Design Q: the about pages (our story, founder, consultancy, case study).
   Every rule is scoped to .pg-about. Shared parts come from 05-inner.css. */

/* shared by the four pages */
.pg-about .shero h1{margin-top:22px}
.pg-about .shero .cols h1{margin-top:22px}
.pg-about .ab-facts{margin:0}
.pg-about .ab-facts div{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 20px;padding:18px 0;border-bottom:1px solid var(--line)}
.pg-about .ab-facts div:first-child{border-top:1px solid var(--line)}
.pg-about .ab-facts dt{font-size:16px;color:var(--grey)}
.pg-about .ab-facts dd{margin:0;font:400 clamp(20px,1.7vw,25px)/1.25 Outfit,sans-serif;letter-spacing:-.01em}
.pg-about .dark .ab-facts div{border-color:var(--nline)}
.pg-about .dark .ab-facts dt{color:var(--onnight)}
.pg-about .ab-big{font:300 clamp(24px,2.7vw,38px)/1.3 Outfit,sans-serif;letter-spacing:-.02em;max-width:27em;text-wrap:pretty}
.pg-about .ab-big b,.pg-about .ab-say b{font-weight:400;background:linear-gradient(transparent 62%,var(--y) 62%,var(--y) 92%,transparent 92%)}
.pg-about .btn .ar.dn,.pg-about .btn:hover .ar.dn{transform:none}
/* underlined text links: a taller tap area, same look */
.pg-about main .tlink{position:relative}
.pg-about main .tlink::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}

/* a photograph beside a card of facts: the opening of story and consultancy */
.pg-about .ab-open{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-top:clamp(40px,5vw,72px);text-align:left;align-items:stretch}
.pg-about .ab-open.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.pg-about .ab-open .ph{border-radius:var(--r-lg);align-self:start}
.pg-about .ab-card{border-radius:var(--r-lg);background:var(--warm);padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.pg-about .ab-card.dark{background:var(--night);align-items:flex-start}
.pg-about .ab-card.dark .ab-facts{align-self:stretch}
/* the card is as tall as the photo beside it: the rows share that height, so no empty band */
.pg-about .ab-card .ab-facts{flex:1 1 auto;display:flex;flex-direction:column}
.pg-about .ab-card .ab-facts div{flex:1 0 auto;align-items:center}
.pg-about .nw{white-space:nowrap}
.pg-about .ab-card.dark dd{color:#fff}
.pg-about .ab-who{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px}
.pg-about .ab-who img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.pg-about .ab-who p{font-weight:500;margin-right:auto}

/* our story */
.pg-about .ab-story .shero{text-align:center}
.pg-about .ab-story .shero .bc{justify-content:center}
.pg-about .ab-story .shero h1{margin-left:auto;margin-right:auto;max-width:12em}
.pg-about .ab-story .shero .lead{max-width:33em;margin:24px auto 0}
.pg-about .ab-two{display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(24px,4vw,64px);margin:clamp(32px,4vw,56px) 0 0 25%;padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line);color:var(--grey)}
.pg-about .ab-two p{max-width:30em}
.pg-about .ab-belief{background:var(--warm);border-radius:var(--r-lg);padding:14px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:center}
.pg-about .ab-belief .t{padding:clamp(14px,2.6vw,34px) clamp(14px,2.6vw,34px) clamp(14px,2.6vw,34px) 0}
.pg-about .ab-belief .q{font:300 clamp(28px,3.1vw,46px)/1.14 Outfit,sans-serif;letter-spacing:-.025em;margin-top:22px;text-wrap:balance}
.pg-about .ab-belief .lead{margin-top:20px;max-width:26em}
.pg-about .ab-years li{display:grid;grid-template-columns:clamp(130px,19vw,280px) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:center;background:var(--warm);border-radius:var(--r-lg);padding:clamp(22px,3vw,40px);margin-top:12px;margin-left:calc(var(--i,0)*4%)}
.pg-about .ab-years .y{font:300 clamp(52px,7.4vw,112px)/.9 Outfit,sans-serif;letter-spacing:-.045em}
.pg-about .ab-years h3{margin-bottom:8px}
.pg-about .ab-years p{color:var(--grey);max-width:36em}
.pg-about .ab-years li:last-child{background:var(--night);color:#fff}
.pg-about .ab-years li:last-child .y{color:var(--y)}
.pg-about .ab-years li:last-child p{color:var(--onnight)}

/* the founder */
.pg-about .ab-fhero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,80px);align-items:stretch}
.pg-about .ab-fhero .t{display:flex;flex-direction:column}
.pg-about .ab-fhero h1{margin-top:auto;padding-top:22px}
.pg-about .ab-fhero .lead{margin-top:24px;max-width:27em;color:var(--ink)}
.pg-about .ab-fhero .ab-facts{margin-top:clamp(28px,3.5vw,48px)}
.pg-about .ab-fhero .ph{border-radius:var(--r-lg);width:100%;max-width:440px;justify-self:end}
/* the founder's headshot, round; the file's own amber ring is cropped off by the scale */
.pg-about .ab-fhero .ph.ab-face{border-radius:50%;aspect-ratio:1;max-width:400px;align-self:center;background:none}
.pg-about .ab-fhero .ph.ab-face img{height:100%;object-fit:cover;transform:scale(1.075)}
.pg-about .ab-bio{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(32px,6vw,96px);align-items:start}
.pg-about .ab-bio .ph{border-radius:var(--r-lg);max-width:380px;position:sticky;top:112px}
.pg-about .ab-bio .ab-big{font-size:clamp(22px,2.1vw,30px);line-height:1.35}
.pg-about .ab-bio .prose>p:not(.ab-big){color:var(--grey)}
.pg-about .ab-say{background:var(--warm);border-radius:var(--r-xl);padding:clamp(36px,7vw,104px) clamp(20px,5vw,72px);text-align:center}
.pg-about .ab-say blockquote{font:300 clamp(28px,3.9vw,56px)/1.14 Outfit,sans-serif;letter-spacing:-.03em;max-width:16em;margin:0 auto;text-wrap:balance}
.pg-about .ab-say .btn,.pg-about .ab-say .tlink{margin-top:clamp(28px,3vw,40px)}
.pg-about .ab-say .tlink{font-size:18px}

/* consultancy */
.pg-about .ab-cons [data-section="fit"]{padding-top:clamp(24px,4vw,56px)}
.pg-about .ab-cons .versus{margin-top:0;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.pg-about .ab-cons .vs{display:flex;flex-direction:column;align-items:flex-start}
/* these two are h2 for heading order; they keep the look of the shared .vs h3 */
.pg-about .ab-cons .vs h2{font-size:clamp(28px,3vw,42px);line-height:1.18;font-weight:300;letter-spacing:-.025em;margin:clamp(40px,6vw,88px) 0 10px}
.pg-about .ab-cons .vs.good h2{font-size:clamp(23px,2.5vw,36px);line-height:1.2;max-width:19em}
.pg-about .ab-cons .say{margin-top:clamp(40px,5vw,72px)}
.pg-about .ab-duo{display:flex;gap:12px;align-items:flex-start}
.pg-about .ab-duo .ph{min-width:0}
.pg-about .ab-cons .why-list li{grid-template-columns:auto minmax(0,1fr)}
.pg-about .ab-cons .why-list .n{width:auto;min-width:88px;height:44px;padding:0 14px;border-radius:999px;font-size:16px;white-space:nowrap}

/* the case study */
.pg-about .ab-case .shero .cols{align-items:end}
.pg-about .ab-wide{margin-top:clamp(32px,4.5vw,64px);border-radius:var(--r-lg)}
.pg-about .ab-case .shero .ab-facts{margin-top:8px}
.pg-about .ab-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:16px}
.pg-about .ab-result .a{background:var(--y);border-radius:var(--r-lg);padding:clamp(24px,3.5vw,48px);display:flex;flex-direction:column;align-items:flex-start}
.pg-about .ab-result .logo,.pg-about .ab-quote .logo{height:22px;width:auto;filter:grayscale(1) brightness(.3)}
.pg-about .ab-result .fig{display:block;font-size:clamp(96px,13vw,188px);line-height:.86;letter-spacing:-.055em;margin:auto 0 0 -.04em;padding-top:clamp(40px,6vw,88px)}
.pg-about .ab-result .lead{color:var(--ink);max-width:21em;margin-top:22px}
.pg-about .ab-result .btn{margin-top:28px}
.pg-about .ab-result .a :focus-visible{outline-color:var(--ink)}
.pg-about .ab-result .b{background:var(--warm);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column}
.pg-about .ab-result blockquote{font:300 clamp(24px,2.6vw,38px)/1.25 Outfit,sans-serif;letter-spacing:-.02em;padding:clamp(18px,2.6vw,34px) clamp(10px,2vw,24px);margin:auto 0;text-wrap:pretty}
.pg-about .ab-result cite,.pg-about .ab-quote figcaption span{display:block;font:400 16px/1.4 Figtree,sans-serif;color:var(--grey);font-style:normal}
.pg-about .ab-result cite{margin-top:22px}
.pg-about .ab-chal{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.pg-about .ab-chal h2{margin-top:20px;max-width:10em}
.pg-about .ab-chal .lead{color:var(--ink)}
.pg-about .ab-chal .em{font:300 clamp(22px,2.2vw,30px)/1.3 Outfit,sans-serif;letter-spacing:-.015em;margin-top:28px;padding-top:28px;border-top:1px solid var(--line);max-width:22em}
.pg-about .fix li.row{grid-template-columns:auto minmax(0,1fr)}
.pg-about .fix .n{width:auto;min-width:84px;height:36px;padding:0 14px;border-radius:999px;font-size:15px;white-space:nowrap;justify-self:start}
.pg-about .ab-stats{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.pg-about .ab-stats .s{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.8vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4vw,64px)}
.pg-about .ab-stats .fig{font-size:clamp(46px,5.6vw,84px);line-height:.95;letter-spacing:-.04em}
.pg-about .ab-stats .l{font-size:17px;line-height:1.35;color:var(--grey);max-width:12em}
.pg-about .ab-stats .big{grid-row:span 2;background:var(--warm);border-color:transparent}
.pg-about .ab-stats .big .fig{font-size:clamp(84px,11vw,164px);line-height:.86;letter-spacing:-.055em}
.pg-about .ab-stats .big .l{font:400 clamp(19px,1.6vw,23px)/1.3 Outfit,sans-serif;color:var(--ink);max-width:none}
.pg-about .ab-stats .also{grid-column:2/-1;align-self:center;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--grey);padding:8px clamp(4px,2vw,24px);max-width:34em}
.pg-about .ab-quote{background:var(--warm);border-radius:var(--r-xl);padding:clamp(28px,6vw,88px)}
.pg-about .ab-quote blockquote{font:300 clamp(25px,3.3vw,48px)/1.2 Outfit,sans-serif;letter-spacing:-.025em;max-width:21em;margin-top:24px;text-wrap:pretty}
.pg-about .ab-quote figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}

@media(min-width:701px){
 .pg-about .ab-facts.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,3vw,40px)}
 .pg-about .ab-facts.row div{display:block;border-top:0;border-bottom:1px solid var(--line);padding:18px 0}
 .pg-about .ab-facts.row dd{margin-top:4px}
 .pg-about .ab-fhero .ab-facts.row div{border-bottom:0;border-top:1px solid var(--line)}
}
@media(max-width:980px){
 .pg-about .ab-open,.pg-about .ab-open.rev{grid-template-columns:1fr}
 .pg-about .ab-open.rev .ph{order:-1}
 .pg-about .ab-two{margin-left:0}
 .pg-about .ab-belief{grid-template-columns:1fr;gap:0}
 .pg-about .ab-belief .t{padding:26px 14px 20px}
 .pg-about .ab-fhero{grid-template-columns:1fr;align-items:start}
 .pg-about .ab-fhero .ph{justify-self:start}
 .pg-about .ab-bio{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
 .pg-about .ab-bio .ph{position:static}
 .pg-about .ab-cons .versus{grid-template-columns:1fr}
 .pg-about .ab-cons .vs h2{margin-top:28px}
 .pg-about .ab-result{grid-template-columns:1fr}
 .pg-about .ab-chal{grid-template-columns:1fr}
 .pg-about .ab-chal h2,.pg-about .ab-chal .em{max-width:none}
 .pg-about .ab-stats{grid-template-columns:1fr 1fr}
 .pg-about .ab-stats .big{grid-column:1/-1;grid-row:auto}
 .pg-about .ab-stats .also{grid-column:1/-1;padding:8px 4px}
}
@media(max-width:700px){
 .pg-about .ab-two{grid-template-columns:1fr}
 .pg-about .ab-years li{grid-template-columns:1fr;gap:14px;margin-left:0;align-items:start}
 .pg-about .ab-years .y{font-size:clamp(56px,17vw,84px)}
}
@media(max-width:600px){
 .pg-about .ab-story .shero{text-align:left}
 .pg-about .ab-story .shero .bc{justify-content:flex-start}
 .pg-about .ab-story .shero h1,.pg-about .ab-story .shero .lead{margin-left:0;margin-right:0}
 .pg-about .ab-bio{grid-template-columns:1fr}
 .pg-about .ab-bio .ph{max-width:260px;order:1}
 .pg-about .ab-belief{padding:10px}
 .pg-about .ab-belief .t{padding:22px 10px 16px}
 .pg-about .ab-cons .why-list li{grid-template-columns:1fr;gap:12px}
 .pg-about .ab-cons .why-list .n{justify-self:start}
 .pg-about .ab-result .b{padding:10px}
 .pg-about .fix li.row{grid-template-columns:1fr}
 .pg-about .ab-stats{gap:10px}
 .pg-about .ab-stats .l{font-size:16px}
 .pg-about .ab-quote{padding:28px 20px}
}

/* 70-utility.css */
/* Design Q: utility pages (contact, privacy, terms, 404). tpl_utility.py.
   Every rule is scoped to .pg-utility. */
.pg-utility{--mute:var(--grey);--field:#8d8a80}

/* ---- contact: title, the three quick facts, one photograph ---- */
.pg-utility .u-chero{padding-bottom:0}
.pg-utility .u-chero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,96px);align-items:end}
.pg-utility .u-ctxt h1{max-width:none;margin:24px 0 0}
.pg-utility .u-ctxt .lead{margin-top:24px;max-width:30em}
.pg-utility .u-facts{margin:clamp(32px,4vw,48px) 0 0;border-top:1px solid var(--line)}
.pg-utility .u-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:6px 24px;flex-wrap:wrap;padding:18px 4px;border-bottom:1px solid var(--line)}
.pg-utility .u-facts dt{font-size:16px;color:var(--grey)}
.pg-utility .u-facts dd{margin:0;font:400 clamp(19px,1.7vw,24px)/1.3 Outfit,sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.pg-utility .u-facts a{text-decoration:none;border-bottom:1px solid transparent}
.pg-utility .u-facts a:hover{border-color:var(--ink)}
.pg-utility .u-cph{border-radius:var(--r-lg);max-width:380px;width:100%;justify-self:end}

/* ---- contact: the form in a warm card, the studio in a dark one ---- */
.pg-utility .u-csec{padding-top:clamp(40px,5vw,72px)}
.pg-utility .u-cgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.pg-utility .u-card{background:var(--warm);border-radius:var(--r-lg);padding:clamp(22px,4vw,56px)}
.pg-utility .u-card h2{font-size:clamp(28px,2.9vw,40px);margin-bottom:clamp(24px,3vw,36px)}
.pg-utility .u-form{display:grid;gap:20px}
.pg-utility .u-row{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.pg-utility .u-field{min-width:0}
.pg-utility .u-field label{display:block;font:500 16px/1.3 Figtree,sans-serif;margin-bottom:8px}
.pg-utility .u-field input,.pg-utility .u-field select,.pg-utility .u-field textarea{display:block;width:100%;min-width:0;margin:0;font:400 17px/1.4 Figtree,system-ui,sans-serif;color:var(--ink);background:#fff;border:1px solid var(--field);border-radius:14px;padding:15px 18px;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.pg-utility .u-field input,.pg-utility .u-field select{min-height:54px}
.pg-utility .u-field textarea{min-height:170px;resize:vertical}
.pg-utility .u-field select{padding-right:48px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2315171f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center/13px no-repeat}
.pg-utility .u-field input:hover,.pg-utility .u-field select:hover,.pg-utility .u-field textarea:hover{border-color:var(--ink)}
.pg-utility .u-field input:focus,.pg-utility .u-field select:focus,.pg-utility .u-field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 0 0 5px rgba(241,190,56,.7)}
.pg-utility .u-send{margin-top:4px}
.pg-utility .u-send .btn{cursor:pointer;font-family:Figtree,sans-serif}
.pg-utility .u-send .btn:disabled{opacity:.55;cursor:default}
.pg-utility .u-note{font-size:16px;line-height:1.5;color:var(--ink)}
.pg-utility .u-note:empty{display:none}

.pg-utility .u-studio{border-radius:var(--r-lg);padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.pg-utility .u-studio address{font:300 clamp(26px,2.6vw,36px)/1.2 Outfit,sans-serif;font-style:normal;letter-spacing:-.02em;color:#fff;margin-top:24px}
.pg-utility .u-studio address a{display:inline-block;color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.pg-utility .u-studio address a:hover{border-color:var(--y)}
.pg-utility .u-ways{border-top:1px solid var(--nline);margin-top:clamp(28px,3vw,40px)}
.pg-utility .u-ways li{padding:18px 0;border-bottom:1px solid var(--nline)}
.pg-utility .u-ways a{font:400 clamp(19px,1.6vw,22px)/1.3 Outfit,sans-serif;color:#fff;text-decoration:none;border-bottom:1px solid transparent;overflow-wrap:anywhere}
.pg-utility .u-ways a:hover{border-color:var(--y)}
.pg-utility .u-social{display:flex;flex-wrap:wrap;gap:8px}

/* ---- privacy and terms: a quiet title beside the long copy ---- */
.pg-utility .u-legal{padding:clamp(48px,7vw,96px) 0 0}
.pg-utility .u-lgrid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);gap:clamp(32px,6vw,96px);align-items:start}
.pg-utility .u-lhead{position:sticky;top:112px;background:var(--warm);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px)}
.pg-utility .u-lhead h1{margin:22px 0 18px}
.pg-utility .u-lhead p{font-size:16px;line-height:1.5;color:var(--grey)}
.pg-utility .u-lbody{overflow-wrap:break-word}
.pg-utility .u-lbody>:first-child{margin-top:0}
.pg-utility .u-lbody h2{font-size:clamp(24px,2.2vw,30px);line-height:1.2;font-weight:400;letter-spacing:-.015em;margin-top:1.7em;padding-top:1.4em;border-top:1px solid var(--line)}

/* ---- 404 ---- */
.pg-utility .u-404{padding:clamp(48px,7vw,104px) 0 0}
.pg-utility .u-4grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.pg-utility .u-4txt h1{margin:24px 0 0}
.pg-utility .u-4txt .lead{margin-top:24px;max-width:27em}
.pg-utility .u-4btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pg-utility .u-4card{background:var(--warm);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,32px) clamp(10px,1.4vw,18px) clamp(10px,1.4vw,18px)}
.pg-utility .u-4h{font:500 16px/1.3 Figtree,sans-serif;color:var(--grey);padding:0 14px 14px}
.pg-utility .u-4list li+li{margin-top:4px}
.pg-utility .u-4list a{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;gap:16px;align-items:center;padding:14px;border-radius:16px;background:#fff;text-decoration:none;transition:background .2s}
.pg-utility .u-4list a:hover{background:var(--ytint)}
.pg-utility .u-4list .n{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--y);font:400 16px/1 Outfit,sans-serif}
.pg-utility .u-4list b{display:block;font:400 clamp(18px,1.5vw,21px)/1.25 Outfit,sans-serif;letter-spacing:-.01em}
.pg-utility .u-4list small{display:block;font-size:15px;line-height:1.35;color:var(--grey);margin-top:3px}
.pg-utility .u-4list .ar{width:14px;height:14px;transition:transform .2s}
.pg-utility .u-4list a:hover .ar{transform:translate(2px,-2px)}

@media(max-width:980px){
 .pg-utility .u-chero-in{grid-template-columns:1fr;align-items:start}
 .pg-utility .u-cph{justify-self:start;max-width:360px}
 .pg-utility .u-cgrid{grid-template-columns:1fr}
 .pg-utility .u-studio{gap:32px}
 .pg-utility .u-lgrid{grid-template-columns:1fr;gap:32px}
 .pg-utility .u-lhead{position:static}
 .pg-utility .u-4grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:600px){
 .pg-utility .u-row{grid-template-columns:1fr}
 .pg-utility .u-field input,.pg-utility .u-field select,.pg-utility .u-field textarea{font-size:16px;padding:14px 16px}
 .pg-utility .u-send .btn{width:100%;justify-content:center}
 .pg-utility .u-cph{max-width:220px}
 .pg-utility .u-4btns .btn{flex:1 1 auto;justify-content:center}
 .pg-utility .u-4list a{gap:12px;padding:12px}
 .pg-utility .u-4list small{font-size:16px}
}