/* Home page "Show the work" sections (25 Oct 2026): proof strip, Aero AI product band, Engagement room, stories.
   Uses the page's own tokens (--plaster, --mist, --carbon, --fuchsine, --f-*). Reversible: see docs/DECISIONS.md. */
.sw{position:relative;padding-block:clamp(72px,9vw,140px)}
.sw-eye{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fuchsine);margin:0 0 14px}
.sw-h{font-family:var(--f-display);font-size:clamp(32px,3.6vw,60px);line-height:1;letter-spacing:-.04em;margin:0}
.sw-p{color:var(--mist);font-size:clamp(16px,1.25vw,19px);line-height:1.6;max-width:56ch;margin:18px 0 0}
.sw .tlink{color:var(--plaster);font:500 15px var(--f-text);text-underline-offset:4px}

/* Start here: the visitor picks what they need; each card leads to the right practice and first step */
.sw-start{padding-block:clamp(64px,8vw,120px);background:linear-gradient(180deg,rgba(7,10,18,.2),rgba(7,10,18,.78) 30%,rgba(7,10,18,.78))}
.sw-start-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.sw-start-head .sw-p{margin:0;justify-self:end}
.sw-needs{list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sw-need{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;padding:22px 20px 20px;border-radius:14px;border:1px solid rgba(236,239,244,.12);background:rgba(14,18,32,.72);color:var(--plaster);text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
.sw-need:hover,.sw-need:focus-visible{border-color:var(--fuchsine);background:rgba(91,140,255,.1);transform:translateY(-3px)}
.sw-need:focus-visible{outline:2px solid var(--fuchsine);outline-offset:3px}
.sw-need-top{display:flex;justify-content:space-between;align-items:center;font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.sw-need-top .n{color:var(--fuchsine)}
.sw-need b{font:600 clamp(20px,1.6vw,25px)/1.15 var(--f-display);letter-spacing:-.02em;margin-top:8px}
.sw-need .d{color:var(--mist);font-size:15px;line-height:1.5}
.sw-need .s{margin-top:auto;padding-top:14px;border-top:1px solid rgba(236,239,244,.1);font-size:14px;line-height:1.45;color:var(--plaster-2,#DDE2EA);padding-right:28px}
.sw-need .s em{display:block;font:500 10.5px var(--f-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:4px}
.sw-need .go{position:absolute;right:18px;bottom:18px;font-size:18px;color:var(--fuchsine);transition:transform .25s}
.sw-need:hover .go{transform:translateX(4px)}
.sw-start-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin:22px 0 0;color:var(--mist);font-size:15px}

/* Aero AI product band */
.sw-prod{background:linear-gradient(180deg,rgba(7,10,18,.9),rgba(10,14,28,.96))}
.sw-prod-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr);gap:clamp(28px,4vw,72px);align-items:start}
.sw-tabs{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:8px}
.sw-tab{width:100%;text-align:left;display:grid;gap:4px;padding:14px 16px;border-radius:12px;border:1px solid rgba(236,239,244,.12);background:rgba(255,255,255,.03);color:var(--plaster);cursor:pointer;font:inherit;transition:border-color .2s,background .2s}
.sw-tab b{font:600 16px/1.25 var(--f-text)}
.sw-tab span{color:var(--mist);font-size:14px;line-height:1.45}
.sw-tab:hover{border-color:rgba(91,140,255,.5)}
.sw-tab[aria-selected=true]{border-color:var(--fuchsine);background:rgba(91,140,255,.12)}
.sw-tab:focus-visible{outline:2px solid var(--fuchsine);outline-offset:2px}
.sw-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sw-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font:500 15px var(--f-text);text-decoration:none;border:1px solid rgba(236,239,244,.22);color:var(--plaster)}
.sw-btn.solid{background:var(--plaster);color:var(--carbon);border-color:var(--plaster)}
.sw-btn:hover{border-color:var(--fuchsine)}
.sw-frame{border-radius:14px;overflow:hidden;border:1px solid rgba(236,239,244,.14);background:#0B0F1C;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(91,140,255,.08)}
.sw-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(236,239,244,.08);background:#0E1322}
.sw-bar i{width:10px;height:10px;border-radius:50%;background:rgba(236,239,244,.18)}
.sw-bar span{margin-left:10px;font:500 12px var(--f-mono);color:var(--mist);letter-spacing:.04em}
.sw-shots{position:relative;aspect-ratio:16/10}
.sw-shots figure{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease-soft,ease)}
.sw-shots figure.on{opacity:1}
.sw-shots img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.sw-note{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;color:var(--mist);font:500 12px var(--f-mono);letter-spacing:.04em}
/* Without JavaScript every screen shows, one after another */
.sw-nojs .sw-shots{aspect-ratio:auto}
.sw-nojs .sw-shots figure{position:static;opacity:1}

/* Engagement room: what the client receives, on paper */
.sw-room{padding-top:0}
.sw-room .sw-p{color:#4C5468}
.sw-docs{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0 0 12px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sw-doc{scroll-snap-align:start;background:#fff;border:1px solid rgba(14,18,32,.1);border-radius:12px;padding:20px 20px 18px;box-shadow:0 18px 40px -26px rgba(14,18,32,.45);display:flex;flex-direction:column;gap:10px;min-height:340px;color:#1B2133}
.sw-doc header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid rgba(14,18,32,.08);padding-bottom:10px}
.sw-doc header b{font:600 16px/1.2 var(--f-display);letter-spacing:-.01em}
.sw-doc header span{font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#2F53D9;white-space:nowrap}
.sw-doc dl{margin:0;display:grid;gap:8px;font-size:13.5px;line-height:1.45}
.sw-doc dt{font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#6A7286}
.sw-doc dd{margin:0}
.sw-doc table{width:100%;border-collapse:collapse;font-size:12.5px}
.sw-doc td:nth-child(n+2){white-space:nowrap}
.sw-doc th,.sw-doc td{padding:6px 4px;border-bottom:1px solid rgba(14,18,32,.07);text-align:left}
.sw-doc th{font:500 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#6A7286}
.sw-doc td.ok{color:#0F7A4D;font-weight:600}.sw-doc td.no{color:#B42318;font-weight:600}
.sw-doc .verdict{margin-top:auto;padding:8px 10px;border-radius:8px;background:#FDECEC;color:#8A1C12;font-size:13px;font-weight:600}
.sw-doc ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:13.5px;line-height:1.4}
.sw-doc ul li{padding-left:22px;position:relative}
.sw-doc ul li::before{content:"";position:absolute;left:0;top:.2em;width:14px;height:14px;border-radius:4px;border:1.5px solid #2F53D9}
.sw-doc ul li.done::before{background:#2F53D9;box-shadow:inset 0 0 0 3px #fff}
.sw-doc svg{width:100%;height:auto}
.sw-doc .ex{margin-top:auto;font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#5F6678}
.sw-docs:focus-visible{outline:2px solid #2F53D9;outline-offset:4px;border-radius:12px}
.sw-room-foot{margin-top:18px;color:#4C5468;font-size:14px}

/* Stories */
.sw-stories ul{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sw-story a{display:flex;flex-direction:column;gap:12px;height:100%;padding:24px 22px;border-radius:14px;border:1px solid rgba(236,239,244,.12);background:rgba(12,16,28,.72);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.sw-story a:hover,.sw-story a:focus-visible{border-color:var(--fuchsine);transform:translateY(-2px)}
.sw-story .tag{align-self:flex-start;font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--plaster);border:1px solid rgba(236,239,244,.22);border-radius:999px;padding:4px 10px}
.sw-story h3{font-family:var(--f-display);font-size:clamp(20px,1.6vw,26px);line-height:1.15;letter-spacing:-.02em;margin:0}
.sw-story p{color:var(--mist);font-size:15px;line-height:1.55;margin:0}
.sw-story .go{margin-top:auto;font:500 14px var(--f-text);color:var(--plaster)}
.sw-stories .sw-room-foot{color:var(--mist)}

@media (max-width:1100px){.sw-needs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.sw-start-head{grid-template-columns:minmax(0,1fr)}.sw-start-head .sw-p{justify-self:start}.sw-prod-g{grid-template-columns:minmax(0,1fr)}.sw-stories ul{grid-template-columns:minmax(0,1fr)}
  .sw-tabs{grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto;scroll-snap-type:x mandatory}.sw-tab{scroll-snap-align:start}}
@media (max-width:640px){.sw-needs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sw-docs{grid-auto-columns:86%}.sw-tab span{display:none}.sw-tabs{grid-auto-columns:minmax(150px,1fr)}}
@media (prefers-reduced-motion:reduce){.sw-shots figure,.sw-story a,.sw-need,.sw-need .go{transition:none}.sw-need:hover{transform:none}}

/* Home practices: the four services not shown in the list above */
.sw-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:36px 0 0;padding:0 max(var(--margin),16px)}
.sw-more .mono{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-right:6px}
.sw-more a{font:500 14px var(--f-text);color:var(--plaster);text-decoration:none;padding:8px 14px;border:1px solid rgba(236,239,244,.16);border-radius:999px;background:rgba(12,16,28,.6)}
.sw-more a:hover,.sw-more a:focus-visible{border-color:var(--fuchsine)}
.sw-more a.all{border-color:transparent;background:none;text-decoration:underline;text-underline-offset:4px}

/* Home careers: no decorative picture. Heading and intro on the left, what you get on the right. */
#careers .car-top .txt{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(24px,5vw,96px);row-gap:20px;align-items:end}
#careers .car-top .txt > h2{grid-column:1;grid-row:1}
#careers .car-top .txt > p{grid-column:1;grid-row:2;margin:0}
#careers .car-top .perks{grid-column:2;grid-row:1 / span 2;align-self:end}
@media (max-width:900px){#careers .car-top .txt{grid-template-columns:minmax(0,1fr)}#careers .car-top .txt > *{grid-column:1 !important;grid-row:auto !important}}