/* Staff-level version — matches the updated Figma frame "Staff — Desktop 1440".
   Self-contained (does not need styles.css / compact.css / flourish.css). */

:root{
  --brand:#182ede; --bg:#ffffef; --ink:#40403e; --muted:#706f6d; --tint:rgba(24,46,222,.05);
  --serif:'Kalice','Cormorant Garamond',Georgia,serif;
  --sans:'Untitled Sans','Inter',system-ui,sans-serif;
  --gutter:clamp(20px,4.5vw,64px); --max:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:300;color:var(--brand);line-height:1.4;overflow-x:hidden;position:relative}
img{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}
::selection{background:rgba(24,46,222,.18)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--bg);padding:8px 14px;border-radius:9999px;z-index:50}
.skip:focus{left:var(--gutter)}

/* ---------- background washes, very slow breathing ---------- */
@property --a1{syntax:'<angle>';inherits:false;initial-value:191.65deg}
@property --s1{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --a2{syntax:'<angle>';inherits:false;initial-value:185.22deg}
@property --s2{syntax:'<percentage>';inherits:false;initial-value:0%}
body::before,body::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
body::before{top:0;height:1500px;
  background:linear-gradient(var(--a1),rgba(216,231,243,.25) 0%,rgba(177,207,246,.25) calc(30% + var(--s1)),rgba(99,159,253,.25) calc(57% + var(--s1)),rgba(255,255,239,.25) 87.55%);
  animation:breathe1 36s ease-in-out infinite alternate}
body::after{bottom:0;height:1400px;transform:scaleY(-1);
  background:linear-gradient(var(--a2),rgba(241,243,216,.25) 0%,rgba(238,246,177,.25) calc(30% + var(--s2)),rgba(253,220,99,.25) calc(57% + var(--s2)),rgba(255,255,239,.25) 87.55%);
  animation:breathe2 42s ease-in-out infinite alternate}
@keyframes breathe1{from{--a1:187deg;--s1:-4%}to{--a1:197deg;--s1:5%}}
@keyframes breathe2{from{--a2:181deg;--s2:-4%}to{--a2:191deg;--s2:5%}}

/* ---------- header: centred nav ---------- */
.bar{position:sticky;top:0;z-index:20;transition:transform .45s var(--ease),opacity .3s}
.bar.is-hidden{transform:translateY(-130%);opacity:0}
/* once the page has scrolled, the pills float over the content on their own */
.bar.scrolled .nav a{box-shadow:0 6px 18px -6px rgba(24,46,222,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(255,255,239,.9)}
.bar.scrolled .nav a[aria-current="page"]{background:linear-gradient(rgba(24,46,222,.09),rgba(24,46,222,.09)),#ffffef}
.bar .wrap{display:flex;align-items:center;justify-content:center;height:72px}
.nav{display:flex;gap:6px}
.nav-item{position:relative;display:block}
.nav a{display:block;min-width:64px;text-align:center;font:500 14px/22px 'Inter',sans-serif;color:#686868;background:var(--bg);padding:4px 12px;border-radius:9999px;text-decoration:none;transition:background .25s,color .25s}
.nav a:hover{background:rgba(24,46,222,.07)}
.nav a[aria-current="page"]{color:#4c4c4c;background:rgba(24,46,222,.09)}

/* ---------- dotted rules (CSS: same dash pattern at any width) ---------- */
.rule{height:1px;width:100%;opacity:.55;background:repeating-linear-gradient(90deg,var(--brand) 0 4px,transparent 4px 7px)}
.rule.full{width:100%}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,8.33vw,120px) 0 clamp(96px,19.2vw,277px)}
.hero .wrap{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,36px);align-items:flex-start}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* rotating label: one line that swaps; JS adds .is-live and sizes the width. Without JS / with reduced motion it just reads "Staff Product Designer". */
.rot{position:relative;display:inline-block;overflow:hidden;height:18px;vertical-align:top;transition:width .5s var(--ease)}
.rot-item{display:block;line-height:18px;white-space:nowrap}
.rot.is-live .rot-item{position:absolute;left:0;top:0;transition:transform .55s var(--ease),opacity .45s}
.rot.is-live .rot-item.enter{transform:translateY(100%);opacity:0}
.rot.is-live .rot-item.leave{transform:translateY(-100%);opacity:0}
.hero h1{font:400 clamp(48px,8.05vw,128px)/1.04 var(--serif);letter-spacing:-.01em}
.hero h1 .line{display:block}
.lede{font-size:clamp(18px,1.95vw,28px);line-height:1.3}
.lede strong{font-weight:400}

/* ---------- section label ---------- */
.label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:18px}

@property --dock-top{syntax:'<length>';inherits:true;initial-value:64px}
/* mini sticky header for the Experience section: pins under/beside the main nav, leaves with the section */
.dock{--dock-top:64px;position:sticky;top:var(--dock-top);z-index:15;padding-top:28px;transition:--dock-top .4s var(--ease)}   /* sits below the nav while the nav is showing, rises to the top when it hides */
html.nav-hidden .dock{--dock-top:0px}
.dock::before{content:"";position:absolute;inset:calc(var(--dock-top) * -1) calc(50% - 50vw) 0;z-index:-1;pointer-events:none;
  background:rgba(255,255,239,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .25s}
.dock.is-stuck::before{opacity:1}
/* on narrow screens the nav pills could overlap the label, so the dock sits below them (and rises when the nav hides) */

.label .muted{color:var(--muted)}
.cv-link-wrap{position:relative}
.cv-link-wrap>a{text-decoration:none;color:var(--brand);border-bottom:1px solid transparent;transition:border-color .2s}
.cv-link-wrap:hover>a,.cv-link-wrap:focus-within>a{border-color:currentColor}
.cv-peek{position:absolute;right:0;top:calc(100% + 14px);width:90px;z-index:6;pointer-events:none;opacity:0;
  transform:rotate(-4deg) translateY(8px);transition:opacity .3s var(--ease),transform .4s var(--ease);box-shadow:0 14px 30px -14px rgba(24,46,222,.5)}
.cv-link-wrap:hover .cv-peek,.cv-link-wrap:focus-within .cv-peek{opacity:1;transform:rotate(-4deg) translateY(0)}

/* ---------- experience entries ---------- */
.entry{display:grid;grid-template-columns:minmax(220px,4fr) 8fr;gap:var(--gutter);padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,100px)}
.meta{position:sticky;top:104px;align-self:start}
.years{font-size:14px;display:block}
.meta h3{font:400 clamp(28px,2.8vw,40px)/1.1 var(--serif);margin:8px 0}
.role{font-size:18px;line-height:1.4}
.pills{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.pill{height:22px;padding:0 10px;display:inline-flex;align-items:center;border-radius:9999px;background:var(--tint);font:400 14px/16px var(--sans);letter-spacing:.84px;text-transform:uppercase}
.headline{font:400 clamp(26px,2.8vw,40px)/1.2 var(--serif)}
.body{margin-top:24px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--muted);max-width:620px}
.body .ink{color:var(--ink)}
.body .dot{text-decoration:underline dotted;text-underline-offset:.22em}
.scope{display:flex;flex-wrap:wrap;gap:clamp(24px,4.4vw,64px);padding-top:12px;margin-top:24px}
.stat b{display:block;font:400 clamp(40px,4.3vw,62px)/1 var(--serif)}
.stat span{display:block;margin-top:8px;font:400 14px/1.4 var(--sans);color:var(--muted);max-width:220px}
.scope.three{display:grid;grid-template-columns:150fr 196fr 222fr;flex-wrap:nowrap}
.scope.three .stat{min-width:0}
.scope.three .stat b{white-space:nowrap}
.scope.three .stat span{max-width:none}
/* TODO: add outcome stats here (adoption, revenue, time saved…) — they land best on a staff page. */

/* visual panels: the panel clips its image; overlays sit on top and can overhang the corner */
.panel-wrap{position:relative;margin-top:48px}
.panel{aspect-ratio:699/437;border-radius:20px;overflow:hidden;position:relative}
.panel img{position:absolute;max-width:none;object-fit:cover;border-radius:14px;box-shadow:0 24px 50px -24px rgba(24,46,222,.4)}
.p1 .panel{background:#dfeafb;border:1px solid #ddddda}
.p1 .success{position:absolute;left:-.15%;top:-.25%;width:100.15%;height:109%;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(24,46,222,.4)}

/* ---------- Remote success page: the hand pops out of the box and the confetti bursts, once, on first view ---------- */
.success img{border-radius:0;box-shadow:none}
.success .s-bg{inset:0;width:100%;height:100%;object-fit:cover}
.s-art{position:absolute;left:53.89%;top:14.92%;width:51.18%;height:84.83%}          /* the Figma "Image" box (737x833 at 776,146.5 on the 1440x982 screen) */
.s-art img{position:absolute}
.s-box,.s-front{left:0;top:0;width:100%;height:100%;transform-origin:50% 100%}
.s-hand-clip{position:absolute;inset:0;clip-path:inset(-60% -60% 0 -60%)}                  /* the hand slides behind the box's front flaps, never out of the bottom; free above, so the overshoot isn't cut off */
.s-hand{left:0;top:0;width:100%;height:100%;transform-origin:65% 70%}
.s-c{left:calc(var(--x) * 100% / 620);top:calc(var(--y) * 100% / 705);width:calc(var(--w) * 100% / 620);height:calc(var(--h) * 100% / 705)}
/* waiting: hand tucked in the box, confetti gathered at its mouth */
.js .success:not(.is-popped) .s-hand{transform:translateY(76%)}
.js .success:not(.is-popped) .s-c{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.2)}
/* pop */
.success.is-popped .s-box,.success.is-popped .s-front{animation:s-squash .55s cubic-bezier(.3,1.5,.5,1) both}
.success.is-popped .s-hand{animation:s-hand .95s cubic-bezier(.2,.9,.25,1) .12s both}
.success.is-popped .s-c{animation:s-burst 1.1s cubic-bezier(.15,.85,.3,1.15) var(--cd,.35s) both,s-drift 5s ease-in-out calc(var(--cd,.35s) + 1.1s) infinite alternate}
@keyframes s-squash{0%{transform:scale(1.04,.94)}45%{transform:scale(.98,1.03)}100%{transform:none}}
@keyframes s-hand{0%{transform:translateY(76%)}55%{transform:translateY(-5%) rotate(-3deg)}72%{transform:translateY(1.5%) rotate(2deg)}86%{transform:translateY(-.6%) rotate(-1deg)}100%{transform:none}}
@keyframes s-burst{0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.2)}20%{opacity:1}100%{opacity:1;transform:none}}
@keyframes s-drift{from{transform:none}to{transform:translateY(-6%) rotate(calc(var(--r) * -.12))}}
.p2 .panel{background:var(--tint)}
.p2 .panel img{left:0;top:0;width:100%;height:106%}
.ov{position:absolute;z-index:2}
.p1 .card{left:76.5%;top:76%;width:38.1%;filter:drop-shadow(0 14px 18px rgba(24,46,222,.22))}   /* drop-shadow follows the card's shape; box-shadow drew a rectangle */
.p2 .phone{left:85.8%;top:54.5%;width:24.56%;aspect-ratio:171.67/261}      /* position + size copied from the Figma "iphone gif" frame */
.phone .scr{position:absolute;left:15.45%;top:13.9%;width:66.72%;height:78.56%;object-fit:cover}
.phone .frame{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.phone .frame img{position:absolute;left:.39%;top:1.27%;width:100%;height:102.67%;max-width:none}

/* ---------- statement ---------- */
.statement{padding:clamp(96px,13.9vw,200px) var(--gutter);display:flex;flex-direction:column;gap:clamp(36px,5vw,72px)}
.statement p{font:400 clamp(28px,4.45vw,64px)/1.14 var(--serif);max-width:1050px}

/* ---------- working together ---------- */
.wt{padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(56px,7vw,100px)}
.wt-head{text-align:center;display:flex;flex-direction:column;gap:18px}
.wt-head h2,.hib .head h2{font:400 clamp(40px,4.45vw,64px)/1.14 var(--serif)}
.wt-head .sub{font-size:clamp(18px,1.95vw,28px);line-height:1.3}
.wt-body{position:relative;margin-top:clamp(40px,4.4vw,64px);width:min(699px,100%);min-height:729px}
.strengths{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4.4vw,64px)}
.strength{position:relative;padding:0 0 56px}
.strength .rule{margin-bottom:22px}
.strength .icon,.strength>img{margin-top:6px}
.strength p{margin-top:22px;font:400 clamp(18px,1.55vw,22px)/1.3 var(--sans);max-width:300px}
.strength>img{width:50px;height:50px}
.wt-photo{position:absolute;left:calc(699px + 89px);top:174px;width:558px;height:359px;object-fit:cover;border-radius:16px;max-width:none}

/* icons: same placement as Figma's icon frames so each keeps its proportions */
.icon{position:relative;display:block;flex:none;width:50px;height:50px;overflow:clip}
.icon .box,.icon .ov2{position:absolute;display:block}
.icon img{display:block;width:100%;height:100%;max-width:none}
.i-arrow .box{inset:40% 35.3% 10% 12.5%}      .i-arrow .ov2{inset:-2% -1.92%}
.i-mentor .box{inset:25% 29.17%}              .i-mentor .ov2{inset:-2% -2.4%}
.i-magnifier .box{left:12%;right:26%;top:13px;aspect-ratio:31/27} .i-magnifier .ov2{inset:-1.85% -1.61%}
.i-sound .box{inset:20.83% 21.43% 29.17% 12.5%} .i-sound .ov2{inset:-2% -1.51%}
.i-scale .box{inset:12.5% 32.84% 37.5% 8.33%}  .i-scale .ov2{inset:-2% -1.7%}

/* ---------- how I build ---------- */
.hib{position:relative}
.split{display:grid;grid-template-columns:minmax(220px,4fr) 8fr;gap:var(--gutter);padding:clamp(40px,5vw,72px) 0 clamp(80px,11vw,160px)}
.hib .head{display:flex;flex-direction:column;gap:18px;position:sticky;top:104px;align-self:start}
.hib .head h2{line-height:1.05}
.hib .sub{font-size:clamp(18px,1.95vw,28px);line-height:1.4}
.principles{list-style:none;padding:0}
.principle{position:relative;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:44px 0}
.principle .rule{position:absolute;top:0;left:0}
.principle .n{font:400 14px/1.4 var(--sans)}
.principle p{font:400 clamp(17px,1.53vw,22px)/1.3 var(--serif);max-width:100%}

/* ---------- contact ---------- */
.contact{padding-bottom:clamp(48px,6.25vw,90px)}
.contact .inner{padding-top:clamp(40px,6.7vw,96px);display:flex;flex-direction:column;gap:0;align-items:flex-start}
.closing{position:relative;font:400 clamp(60px,11vw,158px)/1 var(--serif);letter-spacing:-.01em}
.mail{font:400 clamp(20px,2.2vw,32px)/1.25 var(--serif);text-decoration:underline;text-underline-position:from-font;transition:opacity .2s}
.mail:hover{opacity:.7}
.chat{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px);margin-top:clamp(8px,1.1vw,18px)}     /* sensible gap between the two lines */
.chat-main{font:400 clamp(20px,2.2vw,32px)/1.25 var(--serif);max-width:24em}
.chat-sub{font:italic 400 clamp(15px,1.4vw,20px)/1.3 var(--serif)}
.cols{display:flex;gap:clamp(40px,8.3vw,120px);margin-top:clamp(76px,9.6vw,128px);font-size:14px}
.cols h3{font:400 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cols ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.cols li{display:flex;align-items:center;gap:8px;color:var(--ink)}
.cols a{text-decoration:none}.cols a:hover{text-decoration:underline}
.soon{padding:2px 8px;border-radius:9999px;background:rgba(253,220,99,.35);color:#8a6a00;font-size:9px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}

/* ---------- Figma-style comment pins ---------- */
.pin-wrap{position:absolute;z-index:8;font-size:14px}
.nav-item .pin-wrap{right:0;top:-11px}
.closing .pin-wrap{font-size:inherit;left:2.94em;top:.09em}   /* em = the headline's size, so the pin tracks the glyphs */
.closing .pin,.closing .pop{font-size:14px;line-height:1.4;letter-spacing:0;font-style:normal;font-weight:400}
.pin{display:grid;place-items:center;width:28px;height:28px;padding:4px;border:0;cursor:pointer;background:var(--brand);
  border-radius:14px 14px 14px 0;filter:drop-shadow(0 4px 2px rgba(0,0,0,.25));transition:transform .25s var(--ease)}
.pin:hover{transform:scale(1.1)}
.pin[aria-expanded="true"]{transform:scale(1.05)}
.js .pin-wrap{opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .5s var(--ease) var(--d,0s),transform .6s cubic-bezier(.3,1.6,.5,1) var(--d,0s)}
.js .pin-wrap.in{opacity:1;transform:none}
/* avatar: assets/avatar.png (the soft gradient only shows if the file is missing) */
.av{position:relative;display:block;width:20px;height:20px;border-radius:50%;overflow:hidden;background:linear-gradient(#dbe6ff,#b6cbfa)}
.av-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.av.sm{width:26px;height:26px;flex:none}
.pop{position:absolute;top:calc(100% + 4px);width:max-content;max-width:240px;display:flex;gap:10px;align-items:flex-start;
  background:#fff;color:var(--ink);padding:12px 14px 12px 12px;border-radius:14px;box-shadow:0 10px 30px -8px rgba(24,46,222,.35),0 2px 6px rgba(0,0,0,.08);
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:0 0;transition:opacity .2s,transform .25s var(--ease),visibility .2s}
.nav-item .pop{left:0;border-top-left-radius:0}   /* flush with the pin's left edge, so pin + card read as one connected bubble */
.closing .pop{left:0;font-family:var(--sans);border-top-left-radius:0}   /* pin sits above its left edge */
.pop.open{opacity:1;visibility:visible;transform:none}
.pop b{display:block;font:500 13px/1.3 'Inter',sans-serif}
.pop p{font:400 14px/1.4 var(--sans);margin-top:2px;color:var(--ink)}

/* ---------- motion (progressive: no JS = everything visible) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}
.js .rule{clip-path:inset(-6px 100% -6px -6px);transition:clip-path 1.2s cubic-bezier(.65,0,.35,1) var(--d,0s)}
.js .rule.in{clip-path:inset(-6px -6px -6px -6px)}

.strength.play>img{animation:ic-ring .9s cubic-bezier(.3,1.4,.5,1)}
.strength.play .i-arrow .box{animation:ic-arrow .9s cubic-bezier(.3,1.5,.5,1)}
.strength.play .i-mentor .box{transform-origin:50% 100%;animation:ic-grow 1s cubic-bezier(.3,1.4,.5,1)}
.strength.play .i-scale .box{transform-origin:50% 25%;animation:ic-tilt 1.1s ease-in-out}
.strength.play .i-sound .box{transform-origin:10% 50%;animation:ic-pulse .9s ease-out}
.strength.play .i-magnifier .box{transform-origin:85% 85%;animation:ic-swing 1s ease-in-out}
@keyframes ic-ring{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes ic-arrow{0%{transform:translate(0,0)}35%{transform:translate(4px,-4px)}100%{transform:translate(0,0)}}
@keyframes ic-grow{0%{transform:scaleY(.55)}60%{transform:scaleY(1.08)}100%{transform:scaleY(1)}}
@keyframes ic-tilt{0%{transform:rotate(0)}25%{transform:rotate(-9deg)}55%{transform:rotate(6deg)}80%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes ic-pulse{0%{transform:scale(1)}30%{transform:scale(1.14,1.06)}100%{transform:scale(1)}}
@keyframes ic-swing{0%{transform:rotate(0)}30%{transform:rotate(-14deg)}65%{transform:rotate(8deg)}100%{transform:rotate(0)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before,body::after{animation:none}
  .js [data-reveal],.js .pin-wrap{opacity:1!important;transform:none!important;transition:none!important}
  .js .rule{clip-path:none!important;transition:none!important}
  .strength.play>img,.strength.play .box{animation:none!important}
  .pop,.cv-peek,.pin,.bar,.dock,.dock::before,.rot{transition:none}
  .success .s-box,.success .s-front,.success .s-hand,.success .s-c{animation:none!important;transform:none!important;opacity:1!important}
}

/* ---------- narrower screens ---------- */
@media (max-width:1199px){ .wt-photo{display:none} }
@media (max-width:900px){
  .scope.three{display:flex;flex-wrap:wrap}
  .entry,.split{grid-template-columns:1fr}
  .meta,.hib .head{position:static}
  .strengths{grid-template-columns:1fr}
  .p1 .card{left:auto;right:4%;top:auto;bottom:-6%}
  .p2 .phone{left:auto;right:4%;top:auto;bottom:-8%}
  .cols{flex-wrap:wrap}
  .nav a{min-width:0}
  .closing .pop{max-width:200px}
}

/* ---------- Working together — alternative: split layout that mirrors How I build ---------- */
.wt-split{padding-top:0;padding-bottom:0}
.wt-split .split{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,100px)}
.wt-split .head{display:flex;flex-direction:column;gap:18px;position:sticky;top:104px;align-self:start}
.wt-split .head h2{font:400 clamp(40px,4.45vw,64px)/1.05 var(--serif)}
.wt-split .head .sub{font-size:clamp(18px,1.95vw,28px);line-height:1.3}
.wt-photo-alt{width:100%;max-width:340px;aspect-ratio:340/164;object-fit:cover;border-radius:16px;margin-top:22px}
@media (max-width:900px){.wt-split .head{position:static}}

/* ---------- Working together: dashed grid — 3 columns x 2 rows of strengths, then a full-width photo row ---------- */
.wt-grid{
  --cell-px:clamp(28px,4.4vw,64px); --cell-pt:clamp(32px,3.3vw,44px); --cell-pb:clamp(36px,3.6vw,52px);
  --dash:repeating-linear-gradient(180deg,var(--brand) 0 4px,transparent 4px 7px);
  position:relative;margin-top:clamp(56px,6.5vw,96px);
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(clamp(215px,17vw,245px),auto);
}
.wt-grid .strengths{display:contents}                       /* the six strengths become cells of the grid */
.wt-cell{position:relative;padding:var(--cell-pt) var(--cell-px) var(--cell-pb)}
.wt-cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;opacity:.55;background:var(--dash)}   /* left dashed line */
.wt-cell>.rule{position:absolute;top:0;left:0;right:0;width:auto;margin:0}                                           /* top dashed line (draws in) */
.wt-grid::before,.wt-grid::after{content:"";position:absolute;opacity:.55;pointer-events:none}
.wt-grid::before{right:0;top:0;bottom:0;width:1px;background:var(--dash)}                                            /* right edge */
.wt-grid::after{left:0;right:0;bottom:0;height:1px;background:repeating-linear-gradient(90deg,var(--brand) 0 4px,transparent 4px 7px)}  /* bottom edge */
.wt-grid .strength .icon,.wt-grid .strength>img{margin-top:0}
.wt-grid .strength p{margin-top:26px;max-width:none;font:300 clamp(16px,1.39vw,20px)/1.35 var(--sans)}   /* light weight, 20px at 1440 */
.wt-figure{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(44px,5vw,72px) var(--cell-px)}                                                                        /* same side padding as the cells above */
.wt-figure img{width:min(100%,560px);aspect-ratio:2/1;object-fit:cover;border-radius:16px}
.wt-figure figcaption{margin-top:16px;font:400 13px/1.4 var(--sans);color:var(--muted)}
@media (max-width:980px){ .wt-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .wt-grid{grid-template-columns:1fr}
}