/* Perspective Studios — shared site styles (every page). Tokens come from ../02-charte/ps-tokens.css */
*{box-sizing:border-box;margin:0}
body{background:var(--perla);color:var(--g1);font-family:var(--font-text);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin)}
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--g3);font-weight:500}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--g1);color:var(--g7);padding:10px 16px;border-radius:var(--r-m);transition:top var(--d-2)}
.skip:focus{top:16px}

/* ——— buttons (guida-charte, approved 13/11) ——— */
.btn{--bg:var(--plum-deploy);--fg:var(--g7);--bgh:var(--plum-design);display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 24px;border:0;border-radius:var(--r-pill);background:var(--bg);color:var(--fg);font:600 15px/1 var(--font-text);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--d-2) var(--ease-out),border-radius var(--d-3) var(--ease-out),transform var(--d-1) var(--ease-out),box-shadow var(--d-2)}
.btn .ar{display:inline-block;transition:transform var(--d-3) var(--ease-out)}
.btn:hover{background:var(--bgh);border-radius:var(--r-m)}
.btn:hover .ar{transform:translateX(4px)}
.btn:focus-visible{outline:2px solid var(--plum-deploy);outline-offset:3px}
.btn:active{transform:scale(.97);background:var(--bgh);border-radius:var(--r-m)}
.btn.sec{--bg:transparent;--fg:var(--g1);--bgh:rgba(53,53,54,.06);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.sec:hover{box-shadow:inset 0 0 0 1px var(--g1)}
.btn.lg{height:60px;padding:0 28px 0 32px;font-size:17px}
.btn.sm{height:38px;padding:0 16px 0 18px;font-size:14px}
.dark .btn{--bg:var(--plum-veil);--fg:var(--plum-design);--bgh:var(--g7)}
.dark .btn:focus-visible{outline-color:var(--plum-veil)}
.dark .btn.sec{--bg:transparent;--fg:var(--g7);--bgh:rgba(251,252,252,.08);box-shadow:inset 0 0 0 1px rgba(251,252,252,.3)}
.lnk{text-decoration:none;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;padding-bottom:2px;transition:color var(--d-2)}
.lnk:hover{color:var(--plum-deploy);animation:redraw var(--d-3) var(--ease-out)}
.dark .lnk:hover{color:var(--plum-veil)}
@keyframes redraw{0%{background-size:0 1px}100%{background-size:100% 1px}}
.lnk:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.ibtn{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-strong);font:500 16px/1 var(--font-text);transition:border-radius var(--d-3) var(--ease-out),background var(--d-2),color var(--d-2)}

/* ——— nav ——— */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;transition:background var(--d-3),box-shadow var(--d-3)}
.nav.solid{background:rgba(243,244,245,.84);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--s-5)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:.01em;white-space:nowrap}
.nav ul{display:flex;gap:var(--s-7);list-style:none;padding:0;font-size:15px}
.nav ul a{text-decoration:none;color:var(--g2);transition:color var(--d-1);padding:6px 0}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--g1)}
.nav ul a[aria-current="page"]{background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat}
.nav .right{display:flex;align-items:center;gap:var(--s-4)}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-strong);transition:border-radius var(--d-3) var(--ease-out)}
.burger:hover{border-radius:var(--r-m)}
.burger:focus-visible{outline:2px solid var(--plum-deploy);outline-offset:3px}
.burger i{display:block;width:16px;height:1.5px;background:var(--g1);margin:4px auto}

/* ——— mobile menu ——— */
.menu{position:fixed;inset:0;z-index:60;background:var(--perla);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity var(--d-3) var(--ease-out),visibility 0s linear var(--d-3)}
.menu.open{opacity:1;visibility:visible;transition:opacity var(--d-3) var(--ease-out)}
.menu > .wrap{width:100%}
.menu .top{display:flex;align-items:center;justify-content:space-between;height:72px}
.menu .close{width:44px;height:44px;border:0;background:transparent;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);font:400 22px/1 var(--font-text);color:var(--g1);cursor:pointer}
.menu .close:focus-visible{outline:2px solid var(--plum-deploy);outline-offset:3px}
.menu ul{list-style:none;padding:0;margin-top:var(--s-8);display:grid;gap:var(--s-2)}
.menu ul a{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(48px,14vw,72px);line-height:1;text-decoration:none}
.menu .foot-cta{margin-top:auto;padding-bottom:var(--s-7)}

/* ——— section rhythm ——— */
section.blk{padding:var(--section) 0}
.dark{background:var(--g1);color:var(--g7)}
.dark .eyebrow{color:var(--g6)}
h2.big{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:var(--t-h1);line-height:.9;margin-top:var(--s-4)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--g3);max-width:44ch}
.dark .lead{color:var(--g6)}
/* titles that compose: letters rise and stretch into place */
.compose .w{display:inline-block;white-space:nowrap}
.compose .ch{display:inline-block;transform:translateY(.35em) scaleY(.2);opacity:0;transform-origin:50% 100%;transition:transform var(--d-4) var(--ease-out),opacity var(--d-3) var(--ease-out)}
.compose.in .ch{transform:none;opacity:1}

/* ——— The Giver lens: grey world, colour = a new point of view ——— */
.shot{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/10;background:var(--g6);transform-style:preserve-3d;transition:transform var(--d-3) var(--ease-out),box-shadow var(--d-3) var(--ease-out);box-shadow:0 1px 0 var(--line)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shot .grey{filter:grayscale(1) contrast(1.02)}
.shot .colour{clip-path:circle(0px at var(--lx,50%) var(--ly,50%));transition:clip-path var(--d-3) var(--ease-out)}
[data-tilt]:hover .shot .colour{clip-path:circle(var(--lr,130px) at var(--lx,50%) var(--ly,50%))}
.shot .ring{position:absolute;left:var(--lx,50%);top:var(--ly,50%);width:calc(var(--lr,130px)*2);height:calc(var(--lr,130px)*2);margin:calc(var(--lr,130px)*-1) 0 0 calc(var(--lr,130px)*-1);border-radius:50%;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity var(--d-3),transform var(--d-3) var(--ease-out);
  background:conic-gradient(from 0deg,#ff7ab6,#ffb36b,#e9f07a,#6fe3b4,#6aa8ff,#b07cff,#ff7ab6);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px),#000 calc(100% - .5px),transparent 100%);mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px),#000 calc(100% - .5px),transparent 100%)}
[data-tilt]:hover .shot .ring{opacity:.9;transform:none}
.shot .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.18),transparent 45%);opacity:0;transition:opacity var(--d-3)}
[data-tilt]:hover .shot{box-shadow:0 40px 70px -40px rgba(53,53,54,.45)}
[data-tilt]:hover .glare{opacity:1}
[data-tilt].lit .shot .colour{clip-path:circle(150% at 50% 50%)}

/* ——— CTA ——— */
.cta{position:relative;overflow:hidden}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:var(--t-display-l);line-height:.86;margin-top:var(--s-5)}
.cta .lead{margin-top:var(--s-6)}
.cta .row{display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap;margin-top:var(--s-8)}
.cta .lines{position:absolute;inset:0;pointer-events:none}
.cta .lines svg{position:absolute;left:max(58%,calc(var(--margin) + 640px));top:50%;width:min(62vw,860px);height:auto;transform:translateY(-50%)}

/* ——— footer ——— */
footer{padding:var(--s-10) 0 var(--s-6);font-size:14px}
.foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.foot > div:first-child{grid-column:span 4}
.foot > nav{grid-column:span 2}
.foot h4{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--g3);font-weight:500;margin-bottom:var(--s-5)}
.foot ul{list-style:none;padding:0;display:grid;gap:var(--s-3)}
.foot a{text-decoration:none;color:var(--g2)}
.foot a:hover{color:var(--plum-deploy)}
.base{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-9);padding-top:var(--s-5);border-top:1px solid var(--line);color:var(--g3);font-size:13px}
.wordmark{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:100px;line-height:.8;margin-top:var(--s-10);color:var(--g1);white-space:nowrap}
.wordmark span{display:inline-block}

@media (max-width:900px){
  .nav ul,.nav .right .btn{display:none}
  .burger{display:block}
  .cta .lines{display:none}
  .foot{row-gap:var(--s-7)}
  .foot > div:first-child{grid-column:1 / -1}.foot > nav{grid-column:span 6}
}
@media (prefers-reduced-motion:reduce){
  .compose .ch{transform:none;opacity:1;transition:none}
}

/* =====================================================================
   v2 · one system for every page (13/11, direction A "plum stage")
   ===================================================================== */

/* nav on a dark opening: light text until the bar turns solid */
.nav.light:not(.solid) .brand,.nav.light:not(.solid) ul a{color:var(--g7)}
.nav.light:not(.solid) ul a{opacity:.85}
.nav.light:not(.solid) ul a:hover,.nav.light:not(.solid) ul a[aria-current="page"]{opacity:1}
.nav.light:not(.solid) .btn{--bg:var(--plum-veil);--fg:var(--plum-design);--bgh:var(--g7)}
.nav.light:not(.solid) .burger{box-shadow:inset 0 0 0 1px rgba(251,252,252,.4)}
.nav.light:not(.solid) .burger i{background:var(--g7)}
.brand svg{color:currentColor}

/* stage: every inner page opens on a full plum field with the three-ring object */
.stage{--stage:var(--plum-design);background:var(--stage);color:var(--g7);padding:calc(72px + var(--s-10)) 0 var(--s-10);position:relative;overflow:hidden}
.stage .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:center}
.stage .t{grid-column:span 7;position:relative;z-index:1}
.stage .eyebrow{color:rgba(233,225,234,.78);display:inline-flex;align-items:center;gap:10px}
.stage h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:var(--t-display-xl);line-height:.82;margin-top:var(--s-5);color:var(--g7)}
.stage .lead{color:var(--plum-veil);margin-top:var(--s-6);max-width:32ch}
.stage .row{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center;margin-top:var(--s-7)}
.stage .btn{--bg:var(--plum-veil);--fg:var(--plum-design);--bgh:var(--g7)}
.stage .btn:focus-visible{outline-color:var(--plum-veil)}
.stage .art{grid-column:8 / span 5;aspect-ratio:1;position:relative}
.stage .art canvas{position:absolute;inset:-8%;width:116%;height:116%}
.stage.s-deploy{--stage:var(--plum-deploy)}
.stage.s-market{--stage:#6E4E74}   /* darker step of Marketing plum: keeps white text at 6.8:1 */
.stage.s-ink{--stage:var(--g1)}

/* bands: each part of a page has its own ground, so you see where it starts and ends */
.band{padding:var(--section) 0}
.band.veil{background:var(--plum-veil);color:var(--plum-design)}
.band.veil .eyebrow,.band.veil .lead{color:rgba(58,35,64,.75)}
.band.white{background:var(--g7)}
.band.ink{background:var(--g1);color:var(--g7)}
.band.ink .eyebrow,.band.ink .lead{color:var(--g6)}
.band-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end}
.band-head > div:first-child{grid-column:span 7}
.band-head > p,.band-head > div + div{grid-column:9 / span 4}

/* big coloured cards with an object (no walls of text) */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);margin-top:var(--s-9)}
.pcards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcard{border-radius:28px;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:var(--s-6);min-height:540px;text-decoration:none;color:inherit;position:relative;transition:transform var(--d-3) var(--ease-out),box-shadow var(--d-3) var(--ease-out)}
a.pcard:hover{transform:translateY(-6px);box-shadow:0 40px 80px -40px rgba(58,35,64,.55)}
a.pcard:focus-visible{outline:2px solid var(--plum-deploy);outline-offset:4px}
.pcard .vis{flex:1;display:grid;place-items:center;padding:var(--s-3) 0}
.pcard .vis > *{width:min(100%,380px)}
.pcard .num{font-family:var(--font-display);font-weight:800;font-size:20px;opacity:.7}
.pcard h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,3.2vw,48px);line-height:.9}
.pcard p{font-size:16px;line-height:1.5;margin-top:var(--s-3);max-width:34ch}
.pcard .go{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;margin-top:var(--s-5)}
.pcard .go .ibtn{box-shadow:inset 0 0 0 1px currentColor}
a.pcard:hover .go .ibtn{border-radius:var(--r-m);background:currentColor}
a.pcard:hover .go .ibtn span{color:var(--perla)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5)}
.chips span{font-size:13px;padding:7px 13px;border-radius:999px;background:rgba(53,53,54,.07)}
.k-veil{background:var(--plum-veil);color:var(--plum-design)}.k-veil .chips span{background:rgba(58,35,64,.08)}
.k-design{background:var(--plum-design);color:var(--g7)}.k-design p{color:var(--plum-veil)}.k-design .chips span{background:rgba(251,252,252,.12)}
.k-deploy{background:var(--plum-deploy);color:var(--g7)}.k-deploy p{color:var(--plum-veil)}.k-deploy .chips span{background:rgba(251,252,252,.14)}
.k-market{background:#6E4E74;color:var(--g7)}.k-market p{color:var(--plum-veil)}.k-market .chips span{background:rgba(251,252,252,.14)}
.k-ink{background:var(--g1);color:var(--g7)}.k-ink p{color:var(--g6)}.k-ink .chips span{background:rgba(251,252,252,.1)}
.k-white{background:var(--g7);color:var(--g1);box-shadow:inset 0 0 0 1px var(--line)}.k-white p{color:var(--g3)}.k-white .chips span{background:var(--perla)}

/* objects drawn in code (replaceable with real photos/renders later) */
.mock{position:relative;border-radius:18px;overflow:hidden}
.m-brand{background:var(--g7);aspect-ratio:4/3;display:grid;grid-template-columns:1.2fr 1fr;gap:12px;padding:18px;box-shadow:0 30px 60px -30px rgba(20,10,25,.45)}
.m-brand .mark{border-radius:12px;background:var(--plum-design);display:grid;place-items:center;color:var(--plum-veil)}
.m-brand .mark svg{width:58%;height:auto}
.m-brand .side{display:grid;grid-template-rows:1fr auto;gap:12px}
.m-brand .aa{border-radius:12px;background:var(--perla);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:clamp(40px,4.4vw,68px);color:var(--g1);line-height:1}
.m-brand .sw{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.m-brand .sw i{aspect-ratio:1;border-radius:8px}
.m-web{background:var(--g7);aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(20,10,25,.45);display:flex;flex-direction:column}
.m-web .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line)}
.m-web .bar i{width:9px;height:9px;border-radius:50%;background:var(--g6)}
.m-web .bar span{margin-left:10px;height:12px;flex:1;max-width:46%;border-radius:6px;background:var(--perla)}
.m-web .body{flex:1;padding:16px;display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.m-web .h{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.8vw,42px);line-height:.85;color:var(--g1)}
.m-web .img{border-radius:10px;background:conic-gradient(from 210deg at 70% 60%,var(--plum-veil),var(--plum-market),var(--plum-design),var(--plum-veil))}
.m-web .row{display:flex;gap:8px;margin:0}.m-web .row i{height:10px;border-radius:5px;background:var(--g6);flex:1}.m-web .row b{height:22px;width:70px;border-radius:11px;background:var(--plum-deploy)}
.m-ui{width:auto!important;height:clamp(280px,24vw,360px);margin:0 auto;aspect-ratio:9/18;background:var(--g1);border-radius:30px;padding:8px;box-shadow:0 30px 60px -30px rgba(20,10,25,.6)}
.m-ui .scr{height:100%;border-radius:23px;background:var(--g7);padding:16px 12px;display:flex;flex-direction:column;gap:9px;color:var(--g1)}
.m-ui .scr b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:22px;line-height:.9}
.m-ui .it{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:var(--perla)}
.m-ui .it i{width:20px;height:20px;border-radius:6px;background:var(--plum-veil);flex-shrink:0}.m-ui .it span{height:8px;border-radius:4px;background:var(--g6);flex:1}
.m-ui .cta{margin-top:auto;height:30px;border-radius:15px;background:var(--plum-deploy)}
.m-ui .post{border-radius:12px;aspect-ratio:1;background:conic-gradient(from 160deg at 40% 60%,var(--plum-veil),var(--plum-market),var(--plum-design),var(--plum-veil))}
.m-ui .likes{display:flex;gap:8px;align-items:center}.m-ui .likes i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--g1)}.m-ui .likes i:first-child{background:var(--plum-deploy);box-shadow:none}.m-ui .likes span{height:8px;border-radius:4px;background:var(--g6);flex:1}
.m-cards{aspect-ratio:4/3;position:relative}
.m-cards .c{position:absolute;width:62%;aspect-ratio:85/55;border-radius:12px;box-shadow:0 24px 50px -24px rgba(20,10,25,.5);padding:14px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.m-cards .c1{left:4%;top:12%;background:var(--plum-design);transform:rotate(-8deg);color:var(--plum-veil)}
.m-cards .c2{right:4%;bottom:10%;background:var(--g7);transform:rotate(6deg);color:var(--g1)}
.m-cards .c b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(16px,1.5vw,22px);line-height:.9}
.m-cards .c span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-code{background:#2A1B30;aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(10,5,12,.7);display:flex;flex-direction:column}
.m-code .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid rgba(251,252,252,.08)}
.m-code .bar i{width:9px;height:9px;border-radius:50%;background:rgba(251,252,252,.2)}
.m-code .lines{flex:1;padding:18px;display:grid;align-content:start;gap:10px}
.m-code .lines i{display:block;height:9px;border-radius:5px;background:rgba(233,225,234,.22)}
.m-code .lines i.p{background:var(--plum-market)}.m-code .lines i.v{background:var(--plum-veil);opacity:.7}
.m-code .ok{margin:0 18px 18px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(251,252,252,.08);color:var(--plum-veil);font-size:12px;font-weight:600;letter-spacing:.04em}
.m-code .ok b{width:18px;height:18px;border-radius:50%;background:conic-gradient(#ff7ab6,#ffb36b,#e9f07a,#6fe3b4,#6aa8ff,#b07cff,#ff7ab6);display:grid;place-items:center;color:#2A1B30;font-size:11px}
.m-search{background:var(--g7);aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(20,10,25,.45);padding:18px;display:grid;align-content:start;gap:14px}
.m-search .q{height:38px;border-radius:19px;background:var(--perla);display:flex;align-items:center;padding:0 14px;gap:10px}
.m-search .q i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--g3)}.m-search .q span{height:8px;width:50%;border-radius:4px;background:var(--g6)}
.m-search .res{display:grid;gap:6px;padding:10px 12px;border-radius:12px}
.m-search .res.top{background:var(--plum-veil)}
.m-search .res b{height:10px;width:60%;border-radius:5px;background:var(--plum-deploy)}.m-search .res span{height:7px;border-radius:4px;background:var(--g6)}.m-search .res span + span{width:80%}

/* steps in a row, with air */
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:var(--s-9)}
.flow li{border-top:2px solid currentColor;padding-top:var(--s-6)}
.flow span{font-size:14px;opacity:.7}
.flow b{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(36px,3.4vw,52px);line-height:.9;margin-top:var(--s-4)}
.flow p{margin-top:var(--s-5);font-size:16px;line-height:1.6;max-width:28ch;opacity:.85}

/* questions */
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.faq-grid > div:first-child{grid-column:span 4}
.faq-list{grid-column:6 / span 7;border-top:2px solid var(--g1)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);padding:var(--s-6) 0;cursor:pointer;font-size:var(--t-h3);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:2px solid var(--plum-deploy);outline-offset:4px;border-radius:4px}
.qa summary i{flex-shrink:0;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);position:relative;transition:border-radius var(--d-3) var(--ease-out),background var(--d-2)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--g1);transform:translate(-50%,-50%);transition:transform var(--d-3) var(--ease-out),background var(--d-2)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa summary:hover i,.qa[open] summary i{border-radius:var(--r-m);background:var(--plum-deploy)}
.qa summary:hover i::before,.qa summary:hover i::after,.qa[open] summary i::before,.qa[open] summary i::after{background:var(--g7)}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa p{padding:0 0 var(--s-6);font-size:var(--t-lead);line-height:1.55;color:var(--g3);max-width:52ch}

/* next page: a big coloured link */
.nextp{display:block;text-decoration:none;color:var(--g7);background:var(--stage,var(--plum-deploy));padding:var(--s-9) 0;transition:background var(--d-3)}
.nextp .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap}
.nextp .eyebrow{color:rgba(233,225,234,.78)}
.nextp b{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:var(--t-display-l);line-height:.85;margin-top:var(--s-4)}
.nextp .ibtn{width:72px;height:72px;font-size:26px;box-shadow:inset 0 0 0 1.5px rgba(251,252,252,.6)}
.nextp:hover .ibtn{border-radius:var(--r-m);background:var(--g7);color:var(--plum-design)}
.nextp:focus-visible{outline:3px solid var(--plum-veil);outline-offset:-6px}

/* form (contact) */
.form{display:grid;gap:var(--s-6)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.field label,.field legend{display:block;font-size:13px;font-weight:600;margin-bottom:var(--s-2);padding:0}
.field input,.field textarea{width:100%;border-radius:var(--r-m);border:1px solid var(--line-strong);background:var(--g7);padding:14px 16px;font:400 16px/1.5 var(--font-text);color:var(--g1);transition:border-color var(--d-2),box-shadow var(--d-2)}
.field input{height:56px}
.field textarea{min-height:160px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--g4)}
.field input:hover,.field textarea:hover{border-color:var(--g3)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--plum-deploy);box-shadow:0 0 0 4px rgba(91,53,99,.14)}
.field[aria-invalid="true"] input,.field[aria-invalid="true"] textarea{border-color:var(--g1);border-width:2px}
.field .msg{font-size:13px;margin-top:var(--s-2);color:var(--g1);font-weight:500;display:none}
.field[aria-invalid="true"] .msg{display:block}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.pick{display:flex;flex-wrap:wrap;gap:10px}
.pick label{margin:0;font-weight:500;font-size:15px;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--g7);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;transition:border-radius var(--d-3) var(--ease-out),background var(--d-2),color var(--d-2)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label:hover{box-shadow:inset 0 0 0 1px var(--g1)}
.pick input:checked + span{color:inherit}
.pick label:has(input:checked){background:var(--plum-deploy);color:var(--g7);border-radius:var(--r-m);box-shadow:none}
.pick label:has(input:focus-visible){outline:2px solid var(--plum-deploy);outline-offset:3px}

@media (max-width:900px){
  .stage{padding:calc(72px + var(--s-8)) 0 var(--s-9)}
  .stage .grid{grid-template-columns:1fr}
  .stage .t,.stage .art{grid-column:1 / -1}
  .stage .art{max-width:240px;order:-1}
  .band-head{row-gap:var(--s-5)}
  .band-head > *{grid-column:1 / -1!important}
  .pcards,.pcards.three{grid-template-columns:1fr}
  .pcard{min-height:0}
  .flow{grid-template-columns:1fr;gap:var(--s-7)}
  .faq-grid{row-gap:var(--s-6)}
  .faq-grid > *{grid-column:1 / -1!important}
  .form .two{grid-template-columns:1fr}
}

/* =====================================================================
   v3 · PANELS (13/11) — the language of the accent page Claudia loved:
   rounded panels side by side (light + dark), iridescent line on the bottom
   edge, colour tiles, buttons that darken.
   ===================================================================== */
.panels{padding:var(--s-3) 0}
.panels + .panels{padding-top:0}
.prow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.pnl{border-radius:28px;padding:clamp(28px,3.6vw,60px);position:relative;overflow:hidden}
.pnl.light{background:var(--g7);box-shadow:0 1px 0 var(--line)}
.pnl.dark{background:var(--g1);color:var(--g7)}
.pnl.dark .eyebrow{color:var(--g5)}
.pnl.dark p{color:var(--g6)}
.pnl.veil{background:var(--plum-veil);color:var(--plum-design)}
.pnl .iri,.tile .iri{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent 0%,#ff7ab6 18%,#ffb36b 32%,#e9f07a 44%,#6fe3b4 56%,#6aa8ff 70%,#b07cff 84%,transparent 100%);opacity:.9;pointer-events:none}
.pnl h2.ttl{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(56px,7.4vw,124px);line-height:.86;margin-top:var(--s-4)}
.pnl h2.ttl.m{font-size:clamp(48px,5.4vw,88px)}
.pnl .lead{margin-top:var(--s-5)}
.pnl .btns{display:flex;gap:var(--s-5);flex-wrap:wrap;align-items:center;margin-top:var(--s-7)}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s-6)}
.pill{border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;background:var(--plum-veil);color:var(--plum-design)}
.pill i{width:8px;height:8px;border-radius:50%;display:inline-block}
.pnl.dark .btn{--bg:var(--plum-veil);--fg:var(--plum-design);--bgh:var(--g7)}
.pnl.dark .btn:focus-visible{outline-color:var(--plum-veil)}
.pnl.dark .lnk{color:var(--g7)}.pnl.dark .lnk:hover{color:var(--plum-veil)}

/* colour tiles: the services as swatches. Hover darkens, like the buttons. */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{--bg:var(--plum-deploy);--bgh:var(--plum-design);background:var(--bg);color:var(--g7);border-radius:24px;padding:clamp(22px,2.2vw,32px);min-height:clamp(320px,30vw,440px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6);text-decoration:none;position:relative;overflow:hidden;transition:background var(--d-2) var(--ease-out),transform var(--d-3) var(--ease-out),border-radius var(--d-3) var(--ease-out)}
.tile:hover{background:var(--bgh);transform:translateY(-4px)}
.tile:focus-visible{outline:2px solid var(--plum-deploy);outline-offset:4px}
.tile .top{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.85}
.tile b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(36px,3.1vw,50px);line-height:.88;display:block}
.tile p{font-size:15px;line-height:1.5;margin-top:var(--s-4);max-width:26ch;opacity:.9}
.tile .bot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3)}
.tile code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;opacity:.8}
.tile .ibtn{box-shadow:inset 0 0 0 1px currentColor;flex-shrink:0}
.tile:hover .ibtn{border-radius:var(--r-m);background:currentColor}
.tile:hover .ibtn span{color:var(--bgh)}
.tile .iri{opacity:0;transition:opacity var(--d-3)}
.tile:hover .iri{opacity:.95}
.tile.t-design{--bg:var(--plum-design);--bgh:#2A1830}
.tile.t-deploy{--bg:var(--plum-deploy);--bgh:var(--plum-design)}
.tile.t-market{--bg:var(--plum-market);--bgh:var(--plum-deploy)}
.tile.t-veil{--bg:var(--plum-veil);--bgh:#DDD0DF;color:var(--plum-design)}

@media (max-width:900px){
  .prow{grid-template-columns:1fr}
  .prow > *{grid-column:1 / -1!important}
  .tiles{grid-template-columns:1fr 1fr}
  .tile{min-height:260px}
}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}