/* Workform brand: navy #1F2A5C, off-white #F8F9FC, light blue #E8EFFB / #8FB3E8.
   Type stays Montserrat/Lato. */
:root{
  --ink:#1e1e1e; --ink-2:#333333; --muted:#5f6368;
  --paper:#f8f9fc; --card:#ffffff; --line:#d7dae0; --table-line:#b9bfc9;
  --accent:#1f2a5c; --accent-ink:#ffffff; --accent-soft:#e8effb; --accent-dark:#172046;
  --accent-light:#8fb3e8;
  --navy-deep:#121a3a; /* footer and quote section: darker than --accent so the two never merge */
  --tint:#eef0f4; --warn:#8a5a12; --warn-bg:#fdf3e1;
  --err:#b3261e; --err-bg:#fceae9;
  --radius:14px;
  /* The content column grows with the screen instead of sitting at a fixed
     1160px, which left a third of an ultrawide monitor empty on each side.
     Unchanged below a ~1610px viewport, so laptops look exactly as before.
     Text blocks keep their own narrower max-widths, so what widens here is
     the card grids and the photography, not the line length. */
  --max:clamp(1160px, 74vw, 1720px);
  --field:#767b85;
}
*{box-sizing:border-box}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Lato,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary:focus-visible{outline-color:var(--ink)}
h1,h2,h3{font-family:Montserrat,system-ui,sans-serif;font-weight:600;line-height:1.16;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.35rem}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:8px;font-family:Montserrat,system-ui,sans-serif;font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-size:.95rem;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-light{background:#fff;color:var(--ink)}

/* preview bar */
.preview{background:var(--warn-bg);color:var(--warn);font-size:.84rem;text-align:center;padding:.55rem 20px;border-bottom:1px solid #f0dcb4}
.preview strong{font-weight:700}

/* nav */
header.nav{position:sticky;top:0;z-index:20;background:rgba(248,249,252,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
/* The header lockup is one image now, so the flex row and the type styles
   that set the wordmark as text have gone with it. Height is what matters:
   the artwork is 6.5:1, so 30px tall is 195px wide, and at 375 that shares
   the bar with the menu button and the quote button. */
.logo{display:block;text-decoration:none;flex:none}
.logo img{display:block;height:30px;width:auto}
@media(max-width:480px){.logo img{height:24px}}
/* The D-pod mark carries its own colour (purple on light, white on dark), so
   it no longer sits in a filled tile. Keep the box square — the exported SVGs
   are preserveAspectRatio="none" and would distort in a non-square one. */
#navmenu{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-weight:600;font-size:.94rem}
#navmenu>li>a{text-decoration:none;color:var(--ink-2)}
#navmenu>li>a:hover{color:var(--ink)}
.nav .btn{padding:.6rem 1.1rem;font-size:.92rem}

/* mobile menu */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-toggle{display:none;width:42px;height:42px;padding:0;border:1.5px solid var(--field);background:#fff;border-radius:8px;cursor:pointer;align-items:center;justify-content:center;flex:none}
.nav-toggle>span:first-child{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);position:relative}
.nav-toggle>span:first-child::before,.nav-toggle>span:first-child::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .18s ease,top .18s ease}
.nav-toggle>span:first-child::before{top:-6px}
.nav-toggle>span:first-child::after{top:6px}
.nav-toggle[aria-expanded="true"]>span:first-child{background:transparent}
.nav-toggle[aria-expanded="true"]>span:first-child::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"]>span:first-child::after{top:0;transform:rotate(-45deg)}
@media(max-width:860px){
  .nav .wrap{height:auto;min-height:68px;flex-wrap:wrap;gap:8px}
  /* logo, toggle and CTA must share one 320px row at 360px wide */
  .nav .logo{flex:0 1 auto;margin-right:auto}
  .nav-toggle{display:inline-flex;order:1}
  .nav .wrap>.btn-primary{order:2;padding:.5rem .7rem;font-size:.82rem}
  #navmenu{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;font-size:1rem;margin-top:4px;padding-bottom:10px;border-top:1px solid var(--line)}
  #navmenu[data-open]{display:flex}
  #navmenu>li+li{border-top:1px solid var(--line)}
  #navmenu>li>a{display:block;padding:13px 2px}
}

/* hero — full-bleed media with the headline laid over it, the composition the
   category leaders use (framery.com, room.com). The media is a layer stack, not
   a column beside the text: poster image, loop over it, scrim over that, words
   on top. Each layer is explicitly z-indexed so the order cannot drift. */
.hero{position:relative;overflow:hidden;padding:0;display:flex;align-items:center;
  min-height:min(78vh,720px);color:#fff;background:var(--ink)}
.hero-bg,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg{z-index:0}
/* The loop sits over the poster rather than replacing it, so the image stays
   the LCP element and the video is pure enhancement — if it never arrives, the
   hero is a photograph and nothing looks broken. */
.hero-video{z-index:1;opacity:0;transition:opacity .4s ease}
.hero-video[data-on]{opacity:1}
/* Legibility floor for white text on photography. Strongest on the left where
   the words are, clearing toward the right so the picture still reads. Without
   this the headline depends on whatever frame happens to be showing. */
/* Measured, not guessed: the brightest pixel the text crosses is luminance
   0.996 — the office windows are blown out — and white text over that needs
   alpha 0.63 to clear 5.5:1. Centred text spans the frame, so the veil has to
   hold everywhere rather than fading to one side; the vertical shading is for
   depth, and its lightest point is still 0.66. Lighten it and the headline
   stops passing. */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,20,.80) 0%,rgba(14,13,20,.66) 45%,rgba(14,13,20,.82) 100%)}
.hero-inner{position:relative;z-index:3;padding-top:76px;padding-bottom:76px}
.hero-copy{max-width:1040px;margin:0 auto;text-align:center}
.hero .eyebrow{color:var(--accent-light)}
.hero h1{font-size:clamp(2.3rem,5vw,4rem)}
.hero p.lede{font-size:1.15rem;color:rgba(255,255,255,.9);margin:20px auto 30px;max-width:620px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* the ghost button's dark border and ink text vanish on a dark hero */
.hero .btn-ghost{border-color:rgba(255,255,255,.85);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14)}
.hero-points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:32px;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.92)}
.hero-points span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent-light);margin-right:8px;vertical-align:middle}
@media(max-width:860px){
  .hero{min-height:0}
  .hero-inner{padding-top:52px;padding-bottom:56px}
}


/* strip */
.strip{background:var(--accent);color:#fff;padding:30px 0}
.strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.strip li{display:grid;gap:6px}
.strip li+li{padding-left:24px;border-left:1px solid rgba(255,255,255,.16)}
.strip b{color:var(--accent-light);font-size:1.5rem;font-family:Montserrat,system-ui,sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.strip span{font-size:.9rem;color:rgba(255,255,255,.82);line-height:1.45}
@media(max-width:760px){
  .strip ul{grid-template-columns:1fr 1fr}
  .strip li+li{padding-left:0;border-left:0}
  .strip li:nth-child(even){padding-left:24px;border-left:1px solid rgba(255,255,255,.16)}
}
@media(max-width:420px){
  .strip ul{grid-template-columns:1fr;gap:18px}
  .strip li:nth-child(even){padding-left:0;border-left:0}
}

section{padding:88px 0}
.sec-head{max-width:660px;margin-bottom:44px}
.sec-head p{color:var(--ink-2);margin-top:14px;font-size:1.05rem}

/* use cases */
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.use{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.use-img{aspect-ratio:4/3;background:var(--tint);overflow:hidden}
.use-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.use:hover .use-img img{transform:scale(1.04)}
.use-body{padding:22px 22px 24px}
.use h3{font-size:1.1rem;margin-bottom:8px}
.use p{color:var(--ink-2);font-size:.94rem}
@media(max-width:960px){.uses{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.uses{grid-template-columns:1fr}}

/* range */
#range{background:var(--tint)}
.pods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pod{background:var(--card);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line)}
.pod-img{aspect-ratio:1/1;background:var(--paper);overflow:hidden}
.pod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pod:hover .pod-img img{transform:scale(1.03)}
.pod-body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.pod-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cap{font-size:.78rem;font-weight:700;background:var(--accent-soft);color:var(--accent);padding:4px 10px;border-radius:999px;white-space:nowrap}
.pod p.desc{color:var(--ink-2);font-size:.95rem}
.pod ul{list-style:none;padding:0;margin:0;font-size:.9rem;display:grid;gap:6px}
.pod li{display:flex;gap:8px}
.pod li::before{content:"✓";color:var(--accent);font-weight:800}
.price{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line)}
.price .from{font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.price .amt{font-family:Montserrat,system-ui,sans-serif;font-size:1.7rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price .multi{font-size:.84rem;color:var(--ink-2)}
/* The five-year warranty was already on the site -- the proof strip, the spec
   table, its own page -- but never beside the price, which is the one moment a
   buyer is weighing us against a cheaper pod. FlexiSpot PH gives two years on the
   pod structure, so this is the only figure where we are plainly ahead. Linked
   rather than asserted, because a claim a buyer can check is worth more. */
.price .warranty{margin-top:9px;font-size:.82rem;line-height:1.45;color:var(--ink-2)}
.price .warranty a{color:var(--accent);font-weight:700}
.price .flag{display:inline-block;margin-top:6px;font-size:.74rem;font-weight:700;color:var(--warn);background:var(--warn-bg);padding:3px 8px;border-radius:6px}
.pod .btn{justify-content:center;margin-top:14px}
.range-note{margin-top:22px;font-size:.84rem;color:var(--muted);max-width:820px}
@media(max-width:960px){.pods{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* features */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat-img{border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:var(--tint)}
.feat-img img{width:100%;height:100%;object-fit:cover}
.feats{display:grid;gap:22px}
.feat{display:grid;grid-template-columns:44px 1fr;gap:16px}
.feat .num{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:800;font-size:.9rem}
.feat h3{font-size:1.1rem;margin-bottom:4px;font-weight:600}
.feat p{color:var(--ink-2);font-size:.95rem}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr}.feat-img{aspect-ratio:4/3}}

/* specs */
#specs{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tab{padding:.6rem 1.1rem;border-radius:8px;border:1.5px solid var(--field);background:#fff;font:inherit;font-family:Montserrat,system-ui,sans-serif;font-weight:600;cursor:pointer;color:var(--ink-2)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.spec-panel{display:none}
.spec-panel.active{display:block}
/* every table on the site: a full ruled grid, so rows and columns read
   without relying on whitespace. --table-line is a step darker than --line,
   which was too faint to read as a border on white. */
table.spec,.price-table{width:100%;border-collapse:collapse;border:1px solid var(--table-line);background:var(--card)}
table.spec th,table.spec td,.price-table th,.price-table td{text-align:left;padding:11px 14px;border:1px solid var(--table-line);vertical-align:top}
.price-table thead th{background:var(--tint);color:var(--ink);font-weight:700}
.price-table tbody th{background:var(--paper)}
table.spec{font-size:.95rem}
table.spec th{width:38%;color:var(--ink-2);font-weight:600;background:var(--paper)}
@media(max-width:480px){
  table.spec th,table.spec td,.price-table th,.price-table td{padding:9px 10px}
}
.tbc{color:var(--warn);font-weight:600}

/* colours */
.colours{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.cgroup{background:var(--paper);border-radius:16px;padding:20px}
.cgroup h3{margin:0 0 12px;font-size:.92rem}
.sw{display:flex;flex-wrap:wrap;gap:8px}
.sw span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;background:#fff;border:1px solid var(--line);padding:4px 10px 4px 4px;border-radius:999px}
.sw i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
@media(max-width:760px){.colours{grid-template-columns:1fr}}

/* vs */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vs-col{border-radius:var(--radius);padding:28px}
.vs-col.pod-side{background:var(--accent);color:#fff}
.vs-col.room-side{background:var(--card);border:1px solid var(--line)}
.vs-col h3{margin-bottom:18px}
.vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vs-col li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:.96rem}
.pod-side li::before{content:"✓";color:var(--accent-light);font-weight:800}
.room-side li::before{content:"–";color:var(--muted);font-weight:800}
@media(max-width:760px){.vs{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step::before{counter-increment:s;content:"0" counter(s);font-family:Montserrat,system-ui,sans-serif;font-size:1.5rem;font-weight:700;color:var(--accent);display:block;margin-bottom:8px}
.step h3{font-size:1.08rem;font-weight:600;margin-bottom:6px}
.step p{font-size:.93rem;color:var(--ink-2)}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:700;font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--accent)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--ink-2)}

/* quote */
#quote{background:var(--navy-deep);color:#fff}
.q-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
#quote .eyebrow{color:var(--accent-light)}
#quote .sec-head p{color:#c9ced5}
.q-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;color:#dfe3e8}
.q-list li::before{content:"→ ";color:var(--accent-light);font-weight:800}
#qform{background:#fff;color:var(--ink);border-radius:16px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
#qform .full{grid-column:1/-1}
label{font-size:.82rem;font-weight:700;display:block;margin-bottom:6px;color:var(--ink-2)}
input,select,textarea{width:100%;padding:.8rem .9rem;border:1.5px solid var(--field);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
textarea{min-height:96px;resize:vertical}
.form-note{font-size:.8rem;color:var(--muted)}
/* consent line at the point of collection -- the form takes a name, email
   and number, which is what engages RA 10173. inherit + underline so the
   link is not carried by colour alone. */
.form-consent{margin:0;font-size:.8rem;color:var(--muted);line-height:1.5}
.form-consent a{color:inherit;text-decoration:underline}
.req{color:var(--err);font-weight:700}
.form-ok,.form-err{display:none;grid-column:1/-1;padding:14px;border-radius:10px;font-weight:600;font-size:.94rem}
.form-ok{background:var(--accent-soft);color:var(--accent)}
.form-err{background:var(--err-bg);color:var(--err)}
.form-err a{color:inherit}
#qform[data-sending] button[type=submit]{opacity:.6;pointer-events:none}
@media(max-width:860px){.q-grid{grid-template-columns:1fr}#qform{grid-template-columns:1fr}}

/* sound scale */
.quiet{margin-top:56px;border-top:1px solid var(--line);padding-top:40px}
.quiet h3{font-size:1.5rem;margin-bottom:10px}
.quiet>p.lead{color:var(--ink-2);max-width:700px;margin-bottom:28px}
.db-chart{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.db-row{display:grid;grid-template-columns:200px 1fr 76px;gap:16px;align-items:center;padding:7px 0}
.db-name{font-size:.92rem;color:var(--ink-2)}
.db-track{position:relative;height:20px;background:var(--card);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.db-bar{position:absolute;left:0;top:0;bottom:0;background:var(--field);border-radius:4px 0 0 4px}
.db-val{font-size:.92rem;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.db-row.is-pod{margin-top:12px;padding-top:16px;border-top:1px solid var(--line)}
.db-row.is-pod .db-name{color:var(--ink);font-weight:700}
.db-row.is-pod .db-bar{background:var(--accent)}
.db-row.is-pod .db-val{color:var(--accent)}
.db-cut{position:absolute;top:0;bottom:0;border:1.5px dashed var(--accent);border-left:0;border-radius:0 4px 4px 0;background:var(--accent-soft)}
.db-axis{display:grid;grid-template-columns:200px 1fr 76px;gap:16px;margin-top:10px}
.db-ticks{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.db-after{margin-top:20px;font-size:.95rem;color:var(--ink-2);line-height:1.6;max-width:700px}
.db-after b{color:var(--accent)}
.quiet-facts{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:700px}
.quiet-facts li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:.93rem;color:var(--ink-2)}
.quiet-facts li::before{content:"✓";color:var(--accent);font-weight:800}
.db-note{margin-top:18px;font-size:.82rem;color:var(--muted);line-height:1.55;max-width:760px}
@media(max-width:700px){
  .db-row,.db-axis{grid-template-columns:1fr 60px;gap:10px}
  .db-name{grid-column:1/-1;margin-bottom:-2px}
  .db-axis>.db-ticks{grid-column:1/2}
  .db-axis>span{display:none}
}

/* floor planner */
.planner{margin-top:56px;border-top:1px solid var(--line);padding-top:40px}
.planner h3{font-size:1.5rem;margin-bottom:10px}
.planner>p.lead{color:var(--ink-2);max-width:680px;margin-bottom:26px}
.plan-controls{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin-bottom:26px}
.plan-field{display:flex;flex-direction:column;gap:6px}
.plan-field label{font-size:.82rem;font-weight:700;color:var(--ink-2)}
.plan-field input,.plan-field select{width:130px;padding:.6rem .7rem;border:1.5px solid var(--field);border-radius:8px;font:inherit;font-size:.95rem;background:var(--card);color:var(--ink)}
.plan-field select{width:160px}
.plan-pods{display:flex;gap:8px;flex-wrap:wrap;border:0;padding:0;margin:0}
.plan-pods input{position:absolute;opacity:0;width:1px;height:1px}
.plan-pods label{padding:.6rem 1rem;border-radius:8px;border:1.5px solid var(--field);background:var(--card);font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.9rem;color:var(--ink-2);cursor:pointer}
.plan-pods input:checked+label{background:var(--accent);border-color:var(--accent);color:#fff}
.plan-pods input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.plan-stage{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.plan-svg{width:100%;height:auto;max-height:460px;display:block}
.plan-svg .room{fill:var(--card);stroke:var(--ink-2);stroke-width:3}
.plan-svg .unit{fill:var(--accent);stroke:var(--accent-dark)}
.plan-svg .roomtext{fill:var(--ink-2);font-family:Lato,system-ui,sans-serif;font-weight:700}
.plan-headline{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:baseline;margin:22px 0 10px}
.plan-count{font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:2.4rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.plan-count small{display:block;font-family:Lato,system-ui,sans-serif;font-size:.82rem;font-weight:700;color:var(--muted);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.plan-meta{display:grid;gap:4px;font-size:.92rem;color:var(--ink-2)}
.plan-others{margin-top:14px;font-size:.9rem;color:var(--ink-2)}
.plan-others b{font-variant-numeric:tabular-nums}
.plan-warn{margin-top:16px;font-size:.84rem;color:var(--warn);background:var(--warn-bg);border-radius:8px;padding:12px 14px;line-height:1.5}
.plan-caveat{margin-top:14px;font-size:.82rem;color:var(--muted);line-height:1.55}
@media(max-width:620px){.plan-field input,.plan-field select{width:100%}.plan-field{flex:1 1 140px}}

/* size comparator */
#size{background:var(--card);border-top:1px solid var(--line)}
.size-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.scale-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.scale-svg{width:100%;height:auto;display:block}
.scale-svg .ext{fill:var(--card);stroke:var(--accent);stroke-width:14}
.scale-svg .int{fill:var(--accent-soft);stroke:var(--accent);stroke-width:5;stroke-dasharray:38 26}
.scale-svg .ghost{fill:none;stroke:var(--field);stroke-width:9;stroke-dasharray:6 14;stroke-linecap:round}
/* head reads separately from shoulders, so the figure scans as a person not a blob */
.scale-svg .person ellipse{fill:var(--accent);opacity:.45}
.scale-svg .person circle{fill:var(--accent)}
.scale-svg .dim{stroke:var(--ink-2);stroke-width:5}
.scale-svg .dimtext{fill:var(--ink-2);font-family:Lato,system-ui,sans-serif;font-size:86px;font-weight:700}
.scale-cap{margin-top:14px;font-size:.8rem;color:var(--muted);line-height:1.5}
.pod-picker{border:0;padding:0;margin:0 0 24px;display:flex;gap:8px;flex-wrap:wrap}
.pod-picker input{position:absolute;opacity:0;width:1px;height:1px}
.pod-picker label{padding:.6rem 1.05rem;border-radius:8px;border:1.5px solid var(--field);background:var(--card);font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.92rem;color:var(--ink-2);cursor:pointer}
.pod-picker input:checked+label{background:var(--accent);border-color:var(--accent);color:#fff}
.pod-picker input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.size-facts{margin:0;display:grid;gap:0}
.size-facts>div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.size-facts dt{color:var(--muted);font-size:.92rem}
.size-facts dd{margin:0;font-weight:700;font-size:.96rem;text-align:right;font-variant-numeric:tabular-nums}
.size-note{margin-top:16px;font-size:.86rem;color:var(--ink-2);line-height:1.55}
@media(max-width:860px){
  .size-grid{grid-template-columns:1fr;gap:32px}
  /* SVG text scales with the viewBox, so bump it when the diagram gets narrow */
  .scale-svg .dimtext{font-size:125px}
}

/* footer */
footer{background:var(--navy-deep);color:rgba(255,255,255,.75);font-size:.9rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:34px;padding:56px 20px 40px}
/* The lockup is a transparent white SVG now, so it sits straight on the dark
   footer. The mix-blend-mode:screen trick and the light panel that used to be
   here were both workarounds for a PNG with a black ground baked in. */
.foot-lockup{display:block;width:fit-content;max-width:100%;margin-bottom:18px}
.foot-lockup img{display:block;height:40px;width:auto;max-width:100%}
.foot-brand p{font-size:.88rem;line-height:1.6;max-width:320px;color:rgba(255,255,255,.7)}
.foot-col h2{font-family:Montserrat,system-ui,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-col a{color:rgba(255,255,255,.85);text-decoration:none}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:rgba(255,255,255,.6)}
@media(max-width:1040px){.foot-grid{grid-template-columns:1fr 1fr 1fr;gap:30px}.foot-brand{grid-column:1/-1}}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr 1fr;padding:40px 20px 30px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

.mobile-cta{display:none}
@media(max-width:760px){
  .mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  footer{padding-bottom:100px}
}

/* ---------- sticky quote bar, pod pages ----------
   The same idea as .mobile-cta above, for the product pages: the hero now
   leads with the photo, which pushes "Request a quote" below the fold.
   It carries the price as well as the button because the sticky header
   already offers a bare "Get a quote" -- the figure is what makes this
   worth the space rather than a third copy of the same button.
   app.js reveals it only in the stretch between the hero CTAs and the
   closing CTA band; while either of those is on screen the bar would just
   repeat a button you can already see. With no JS it never appears, and
   both real CTAs are untouched. visibility, not opacity, so the hidden bar
   is out of the tab order and the screen reader's reach. */
.pod-bar{display:none}
@media(max-width:860px){
  .pod-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -8px 28px rgba(0,0,0,.13);
    padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));
    transform:translateY(110%);visibility:hidden;
    transition:transform .22s ease,visibility .22s ease}
  .pod-bar[data-on]{transform:none;visibility:visible}
  .pod-bar-in{display:flex;align-items:center;gap:14px}
  .pod-bar-price{margin:0;display:grid;line-height:1.25;min-width:0}
  .pod-bar-price span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted)}
  .pod-bar-price b{font-family:Montserrat,system-ui,sans-serif;font-size:1.06rem;
    letter-spacing:-.01em}
  .pod-bar .btn{margin-left:auto;flex:0 0 auto;white-space:nowrap}
  /* the bar sits over the end of the page, so the footer needs room to
     finish above it. Scoped to the pages that actually carry a bar, which
     is why the bar is emitted as the footer's preceding sibling. */
  .pod-bar ~ footer{padding-bottom:96px}
}

/* respect motion preferences */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn:hover{transform:none}
  .pod:hover .pod-img img{transform:none}
  .use:hover .use-img img{transform:none}
}

/* keep focused controls clear of the fixed mobile CTA */
@media(max-width:760px){
  #quote{padding-bottom:150px}
  input,select,textarea,button,.btn{scroll-margin-bottom:100px}
}


/* ---------- sub-page chrome ---------- */
.page-head{padding:60px 0 10px;background:var(--paper)}
.page-head h1{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:14px}
.page-head .lede{font-size:1.1rem;color:var(--ink-2);max-width:660px;margin-top:4px}
.page-head .eyebrow a{color:inherit}
.wrap.narrow{max-width:760px}
.pod-sec{padding:56px 0}
.pod-sec.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* pod page hero */
.pod-hero{padding:48px 0 16px;background:var(--paper)}
.pod-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pod-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);margin:8px 0 16px}
.pod-hero .lede{font-size:1.08rem;color:var(--ink-2);margin-bottom:26px}
.pod-hero-img{border-radius:20px;overflow:hidden;aspect-ratio:1/1;background:var(--tint)}
.pod-hero-img img{width:100%;height:100%;object-fit:cover}

/* ---------- pod gallery / testimonial carousels ----------
   Same scroll-snap mechanism as the mobile card rails, but on at every width
   here: the markup stays a plain scrollable list, so screen readers reach
   every slide and Tab moves through them. The arrows are an addition for
   pointer users, not the mechanism — scrolling still works without JS. */
/* thumbnail rail beside the main photo, as the reference does. Two columns:
   thumbs, then the photo; the arrows and counter sit under the photo only. */
.gallery{min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);
  grid-template-rows:auto auto;gap:10px 12px;align-items:start}
.thumbs{grid-column:1;grid-row:1;display:grid;gap:8px}
.gallery .shots{grid-column:2;grid-row:1;min-width:0}
.gallery .rail-foot{grid-column:2;grid-row:2}
.thumb{padding:0;border:1.5px solid var(--line);background:var(--card);cursor:pointer;
  border-radius:10px;overflow:hidden;aspect-ratio:1/1;display:block;width:100%}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* a drawing cropped to a 72px square loses its measurements */
.thumb img[src*="-dims"]{object-fit:contain;background:#fff}
.thumb[aria-current="true"]{border-color:var(--accent);border-width:2px}
.thumb:hover{border-color:var(--field)}
.thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Hide the thumbnails wherever they would cost the photo too much: on a phone
   (72px out of 335px), and in the 861-1100px window where the hero is still
   two columns so the media column is only ~400px wide. Between 621 and 860 the
   hero has already stacked, so the column is full width and they fit fine. */
@media(max-width:620px),(min-width:861px) and (max-width:1100px){
  .gallery{grid-template-columns:minmax(0,1fr)}
  .thumbs{display:none}
  .gallery .shots,.gallery .rail-foot{grid-column:1}
}
.shots{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  border-radius:20px}
.shots::-webkit-scrollbar{display:none}
.shots:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shot{flex:0 0 100%;scroll-snap-align:start;margin:0;border-radius:20px;overflow:hidden;
  aspect-ratio:1/1;background:var(--tint)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
/* the dimension drawings are diagrams on white — cropping them loses the
   measurements, so they are contained rather than covered */
.shot img[src*="-dims"]{object-fit:contain;background:#fff}

.rail-foot{display:flex;align-items:center;gap:14px;margin-top:14px}
.rail-foot .rail-count{margin:0}
.rail-nav{width:38px;height:38px;flex:none;border:1.5px solid var(--field);background:var(--card);
  border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--ink-2);
  display:grid;place-items:center;padding:0}
.rail-nav:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.rail-nav:disabled{opacity:.4;cursor:default}
.rail-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Reviews on a pod page: one wide card at a time with dots underneath, not a
   3-up grid. No negative margins — the rail is exactly the container width, so
   nothing clips at the edges. */
/* Four grid children in two rows:
       row 1   copy          photos
       row 2   review card   trust card
   Putting the two cards in the same grid row is what keeps their tops level —
   the row starts below whichever of copy/photos is taller, so neither card
   has to know how tall the other column ended up. Source order is copy,
   photos, review, trust, so the stacked layout reads in that order too. */
.pod-hero-grid{row-gap:26px}
.pod-hero-copy{grid-column:1;grid-row:1;min-width:0}
.media-col{min-width:0;grid-column:2;grid-row:1}
/* Three rows, not two:
       row 2   review card   trust card
       row 3   dots          —
   The dots used to sit inside the stretched review cell, so the purple card
   matched card+dots and finished lower than the white one. Giving the dots
   their own row means the two CARDS are what share row 2, and stretching
   makes them identical. .reviews is display:contents so its children take
   part in this grid directly. */
.reviews{display:contents}
.review-rail{grid-column:1;grid-row:2;min-width:0;align-self:stretch}
.rail-dots{grid-column:1;grid-row:3}
.trust{grid-column:2;grid-row:2;min-width:0;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center}
@media(max-width:860px){
  .pod-hero-copy,.media-col,.trust,.review-rail,.rail-dots{grid-column:auto;grid-row:auto}
  /* Photos first on a phone. The copy block runs about a screen and a half,
     so in source order the first picture lands below the fold and the page
     opens on nothing but text. order:-1 lifts the gallery visually without
     touching the source, so a screen reader still hears the product name
     before the photos; the only readers who see a different order are
     sighted phone visitors, which is the whole point. */
  .media-col{order:-1}
  /* and the gallery wants to start near the top, not 48px down */
  .pod-hero{padding-top:22px}
  /* The shot is 1:1, so in one column it is as tall as the page is wide —
     fine at 375, but at 860 that is a 728px photo and the product name is
     pushed off screen, which is the problem we just fixed. Cap it: svh
     rather than vh because svh does not change as the phone's toolbars
     hide, so the photo cannot resize under a scrolling finger. */
  .shot{max-height:min(78svh,480px)}
}
.review-rail{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius)}
.review-rail::-webkit-scrollbar{display:none}
.review-rail:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)}
.review{flex:0 0 100%;scroll-snap-align:start;margin:0;display:grid;
  grid-template-columns:44px 1fr;gap:14px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.review .avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;
  font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:.95rem}
.review-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.review-top b{font-family:Montserrat,system-ui,sans-serif;font-size:.96rem}
.review-body>small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.review-body>small a{color:inherit}
.review blockquote{margin:10px 0 0;font-size:.94rem;line-height:1.6;color:var(--ink-2)}

/* The button IS the 24x24 target (WCAG 2.5.8) and the dot is drawn inside it,
   rather than a 9px button with a padded-out pseudo-element — that way the
   hit area is the element's own box and cannot be measured wrong. */
.rail-dots{display:flex;justify-content:center;gap:4px;margin-top:10px}
.rail-dots button{width:24px;height:24px;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;border-radius:50%}
.rail-dots button::after{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--line);transition:background .15s ease,transform .15s ease}
.rail-dots button[aria-current="true"]::after{background:var(--accent);transform:scale(1.3)}
.rail-dots button:hover::after{background:var(--field)}
.rail-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pod-keys{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.pod-keys b{display:block;font-family:Montserrat,system-ui,sans-serif;font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.pod-keys span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.pod-price{margin:0 0 22px;padding-top:18px;border-top:1px dashed var(--line)}
.pod-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:860px){.pod-hero-grid{grid-template-columns:1fr;gap:30px}.pod-hero-img{aspect-ratio:4/3}}

/* lists and related cards */
.use-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.use-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.use-shot{aspect-ratio:4/3;background:var(--tint);overflow:hidden}
.use-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.use-list li:hover .use-shot img{transform:scale(1.04)}
.use-text{padding:20px 22px 22px}
.use-list li b{display:block;font-family:Montserrat,system-ui,sans-serif;font-size:1.02rem;margin-bottom:8px}
.use-list li b::before{content:"✓";color:var(--accent);font-weight:800;margin-right:9px}
.use-list li span{display:block;font-size:.93rem;color:var(--ink-2);line-height:1.6}
@media(max-width:760px){.use-list{grid-template-columns:1fr}}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rel-card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit}
.rel-card img{width:120px;height:120px;object-fit:cover}
.rel-card b{display:block;font-family:Montserrat,system-ui,sans-serif;font-size:1.05rem}
.rel-card small{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}
.rel-card:hover{border-color:var(--accent)}
@media(max-width:620px){.rel-grid{grid-template-columns:1fr}}

/* closing band */
.cta-band{background:var(--accent);color:#fff;padding:56px 0;text-align:center}
.cta-band h2{margin-bottom:12px}
.cta-band p{max-width:560px;margin:0 auto 24px;color:rgba(255,255,255,.85)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.contact-aside h2{font-size:1.1rem;margin-bottom:14px}
.contact-aside .aside-h{margin-top:30px}
.contact-list{margin:0;display:grid;gap:0}
.contact-list>div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.contact-list dt{color:var(--muted);font-size:.9rem}
.contact-list dd{margin:0;font-weight:700;font-size:.92rem;text-align:right}
/* The details in this block are invented, and so is every footer's copy of
   them. A two-word chip cannot say the useful part -- that nothing sent to
   them arrives -- so the contact page gets a sentence and the footer, which
   has no room for one, gets the chip. #f0dcb4 is the same border .preview
   uses for this colour pair. */
.contact-warn{margin:0 0 16px;background:var(--warn-bg);border:1px solid #f0dcb4;
  color:var(--warn);border-radius:10px;padding:11px 13px;font-size:.84rem;line-height:1.5}
.aside-note{margin-top:14px;font-size:.82rem;color:var(--muted);line-height:1.55}
.aside-links{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.93rem}
.aside-links a{color:var(--accent);text-decoration:none;font-weight:600}
.aside-links a:hover{text-decoration:underline}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:36px}}

/* long-form prose */
.prose{max-width:760px}
.prose h2{font-size:1.3rem;margin:34px 0 12px}
.prose h2:first-of-type{margin-top:0}
.prose p{margin-bottom:14px;color:var(--ink-2);line-height:1.72}
.prose ul{margin:0 0 18px;padding-left:22px;color:var(--ink-2);line-height:1.72}
.prose li{margin-bottom:7px}
.prose a{color:var(--accent);font-weight:600}
.prose em{color:var(--muted);font-style:normal;font-size:.92em}
.legal-warn{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:14px 16px;font-size:.88rem;line-height:1.6;margin-bottom:30px}
.legal-warn .tbc{color:inherit;text-decoration:underline}
.legal-date{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}

/* blog */
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.post-card{overflow:hidden}
.post-card a{display:block;text-decoration:none;color:inherit;border-radius:var(--radius)}
.post-shot{aspect-ratio:16/9;background:var(--tint);overflow:hidden;margin:-1px -1px 0}
.post-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.post-card:hover .post-shot img{transform:scale(1.04)}
.post-card a>:not(.post-shot){margin-left:26px;margin-right:26px}
.post-card .post-meta{margin-top:22px}
.post-card a>:last-child{margin-bottom:26px}
.post-card:hover{border-color:var(--accent)}
.post-card h2{font-size:1.25rem;margin:8px 0 10px}
.post-card p{font-size:.94rem;color:var(--ink-2);line-height:1.6}
.post-meta{font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.04em}
.post-more{display:inline-block;margin-top:14px;font-weight:700;font-size:.9rem;color:var(--accent)}
@media(max-width:760px){.post-grid{grid-template-columns:1fr}}

/* per-pod pricing block */
.price-block{margin-top:40px;padding-top:30px;border-top:1px solid var(--line);max-width:620px}
.price-block h3{font-size:1.15rem;margin-bottom:14px}
.price-table th{width:55%}
/* the pricing page puts the capacity under the pod name in each row; without
   this it inherits the link colour and runs on as "Solo Pod1-person office pod" */
.price-table td span{display:block;font-size:.84rem;font-weight:400;color:var(--muted);margin-top:2px}
.price-table td{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.05rem;color:var(--accent)}
/* the BPO page reuses this table with a sentence per row instead of a figure.
   Bold accent-purple is right for a price and shouting for prose, so that
   table opts the value cells back to body text. */
.price-table.prose-cells th{width:34%}
.price-table.prose-cells td+td{font-weight:400;font-size:1rem;color:var(--ink-2)}
/* side-by-side comparison of the three pods (size page, guides): every cell
   is a figure of equal weight, so none gets the price styling */
.price-table.cmp-table th{width:auto;text-align:left}
.price-table.cmp-table td{font-weight:400;font-size:.95rem;color:var(--ink-2)}

/* nav submenu */
.has-sub{position:relative}
.sub-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-weight:600;font-size:.94rem;color:var(--ink-2);cursor:pointer}
.sub-toggle:hover{color:var(--ink)}
.sub-toggle .caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
.sub-toggle[aria-expanded="true"] .caret{transform:rotate(-135deg) translate(-3px,-3px)}
.subnav{display:none;list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 14px);left:-14px;min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(30,30,30,.14);z-index:30}
.subnav[data-open]{display:block}
.subnav a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.93rem}
.subnav a small{display:block;font-weight:400;font-size:.8rem;color:var(--muted);margin-top:1px}
.subnav a:hover{background:var(--accent-soft);color:var(--accent)}
.subnav a:hover small{color:var(--accent)}
@media(max-width:860px){
  .sub-toggle{width:100%;justify-content:space-between;padding:13px 2px;font-size:1rem}
  .subnav{position:static;display:none;min-width:0;border:0;border-radius:0;box-shadow:none;padding:0 0 8px 14px;background:transparent}
  .subnav[data-open]{display:block}
  .subnav a{padding:10px 2px}
}

/* home pod cards link through to their own page */
.pod-top h3 a{text-decoration:none;color:inherit}
.pod-top h3 a:hover{color:var(--accent);text-decoration:underline}
.pod-img-link{display:block;height:100%}
.pod-actions{display:flex;gap:10px;margin-top:16px}
.pod-actions .btn{flex:1 1 auto;justify-content:center;margin-top:0;padding:.8rem .7rem;font-size:.88rem;white-space:nowrap}
@media(max-width:1040px) and (min-width:961px){.pod-actions{flex-direction:column}}
.aside-link{color:var(--accent);font-weight:700;text-decoration:none}
.aside-link:hover{text-decoration:underline}

/* ---------- social proof ---------- */
.sample-tag{display:inline-block;vertical-align:middle;margin-left:10px;font-family:Lato,system-ui,sans-serif;font-size:.6em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border-radius:5px;padding:4px 9px}
.sample-note{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:12px 15px;font-size:.84rem;line-height:1.55;margin:0 0 26px}

.proof-band{padding:44px 0;background:var(--card);border-bottom:1px solid var(--line)}
/* minmax(0,…) so the rail's max-content width cannot widen the page */
.proof-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:center}
.logo-rail-wrap{min-width:0}
.rating-card{text-align:center;border-right:1px solid var(--line);padding-right:36px}
.rating-num{font-family:Montserrat,system-ui,sans-serif;font-size:2.6rem;font-weight:700;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
/* gold darkened from #f0a500 (2.08:1) so the glyphs clear 4.5:1 on white */
.stars{color:#9c6600;font-size:1.05rem;letter-spacing:2px;margin-bottom:6px}
.rating-card p{font-size:.82rem;color:var(--ink-2);line-height:1.5;margin-top:8px}
.rating-card a{color:var(--accent);font-weight:700}
.logo-rail-wrap h2{font-size:1rem;margin-bottom:16px;color:var(--ink-2)}
.logo-rail{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* Duration is set against the track's width: one set of eight logo tiles is
   about 1,000px, and 38s keeps it near the old text rail's speed. */
.logo-track{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0;width:max-content;animation:logorail 120s linear infinite}
/* Hover is all that stops the rail now. The Pause button that set
   data-paused was removed on 12 Nov 2026, so there is no keyboard or
   touch equivalent: see the note in app.js. */
.logo-rail:hover .logo-track{animation-play-state:paused}
@keyframes logorail{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Each client logo on a white tile, in its own colours. The tile is what lets
   eight differently shaped files -- some on their own white or dark ground,
   one grey on transparent -- read as one row on white and on purple alike.
   The image's height is set inline per logo from BRANDS; width follows. */
.logo-chip{display:flex;align-items:center;justify-content:center;height:54px;padding:0 14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.logo-chip img{display:block;width:auto;max-width:none}
/* The trust rail as a card, same shape as the review card beside it but in
   brand purple so the pair reads as two halves of one band. */
.trust{background:var(--accent);color:#fff;border-radius:var(--radius);padding:18px 20px}
.trust .logo-rail-wrap h2{font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 14px}
.trust .logo-track{gap:12px;animation-duration:105s}
/* no border on purple: the white tile is edge enough */
.trust .logo-chip{border-color:transparent;height:50px;padding:0 12px}
/* the fade at each end has to blend into the purple, not the page */
.trust .logo-rail{mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
@media(max-width:760px){
  .proof-grid{grid-template-columns:1fr;gap:26px}
  .rating-card{border-right:0;border-bottom:1px solid var(--line);padding:0 0 22px}
}

.testimonials{padding:72px 0;background:var(--tint)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote-card{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:18px}
.quote-card blockquote{margin:0;font-size:.98rem;line-height:1.65;color:var(--ink-2)}
.quote-card blockquote::before{content:"“";display:block;font-family:Montserrat,system-ui,sans-serif;font-size:2.4rem;line-height:.6;color:var(--accent);margin-bottom:10px}
.quote-card figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote-card .avatar{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--accent);flex:none;display:grid;place-items:center;font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.02em}
.quote-card b{display:block;font-size:.92rem}
.quote-card small{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.rev-more{margin:22px 0 0;text-align:center;color:var(--muted);font-size:.9rem}
.rev-more a{color:var(--accent);font-weight:700}
@media(max-width:860px){.quote-grid{grid-template-columns:1fr}}

/* the global reduced-motion block uses !important, so override it here rather
   than letting the rail jump to its end frame and look broken */
@media (prefers-reduced-motion: reduce){
  .logo-track{animation:none!important;width:auto;flex-wrap:wrap;justify-content:center}
  .logo-rail{mask-image:none}
  .logo-track .dup{display:none}
}

/* footer contact block */
.foot-contact{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:.86rem}
.foot-contact a{color:#fff;text-decoration:none;font-weight:600}
.foot-contact a:hover{text-decoration:underline}
/* was li:last-child, which dimmed the address line -- the Sample details chip
   is the last child now, so the address is addressed by name instead. */
.foot-contact .foot-area{color:rgba(255,255,255,.65)}
/* same 9.6px as the chips on the rail and the reviews; .6em of this list's
   .86rem would be 8.3px. The chip reads on the deep navy as it does on --accent. */
.foot-contact .sample-tag{font-size:.6rem;margin-left:0;margin-top:2px}

/* newsletter strip - a light band between the navy CTA and the deep navy
   footer, so the two dark slabs do not merge */
.signup{background:var(--tint);color:var(--ink);padding:42px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.signup-inner{display:grid;grid-template-columns:1fr minmax(0,440px);gap:36px;align-items:center}
.signup h2{font-size:1.4rem;margin-bottom:8px}
.signup p{color:var(--ink-2);font-size:.92rem;line-height:1.55;max-width:440px}
.signup-form{display:grid;grid-template-columns:1fr auto;gap:10px}
.signup-form input{padding:.85rem .9rem;border:1.5px solid var(--field);border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}
.signup-form input::placeholder{color:var(--muted)}
.signup-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.signup-form .btn{background:var(--accent);color:var(--accent-ink)}
.signup-form .btn:hover{background:var(--accent-dark)}
.signup-form .btn:disabled{opacity:.6;cursor:wait}
.signup .signup-note{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--ink-2)}
.signup-note a{color:var(--accent);text-decoration:underline}
.signup-msg{grid-column:1/-1;margin:0;font-size:.86rem;font-weight:700;color:var(--accent);min-height:0}
@media(max-width:860px){.signup-inner{grid-template-columns:1fr;gap:22px}.signup-form{grid-template-columns:1fr}}

/* about page facts */
.fact-list{margin:0;display:grid;gap:0}
.fact-list>div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.fact-list dt{color:var(--muted);font-size:.92rem}
.fact-list dd{margin:0;font-weight:700;font-size:.94rem;text-align:right}

/* numbered process list */
.step-list{counter-reset:sl;list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px}
.step-list li{counter-increment:sl;position:relative;padding-left:44px;color:var(--ink-2);line-height:1.65}
.step-list li::before{content:counter(sl);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:.82rem}
.prose ol{color:var(--ink-2);line-height:1.72}

/* grouped FAQ page */
.faq-group{margin-bottom:38px}
.faq-group h2{font-size:1.2rem;margin-bottom:6px}
.lost-links{font-size:1rem;gap:12px}

/* home teaser for the size tools, which now live on their own page */
#size{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.size-teaser{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.size-teaser h2{margin-bottom:14px}
.size-teaser p{color:var(--ink-2);font-size:1.02rem;line-height:1.65;margin-bottom:24px;max-width:540px}
.size-teaser-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.size-teaser-facts li{border-left:3px solid var(--accent-soft);padding-left:14px}
.size-teaser-facts b{display:block;font-family:Montserrat,system-ui,sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.size-teaser-facts span{display:block;font-size:.84rem;color:var(--muted);margin-top:3px}
@media(max-width:860px){.size-teaser{grid-template-columns:1fr;gap:30px}}
.tool-head{font-size:1.4rem;margin-bottom:18px}
.planner h2.tool-head{margin-bottom:10px}

/* ---------- mobile card rails ----------
   Horizontal scroll-snap rather than a JS carousel: the markup stays a plain
   scrollable list, so screen readers still reach every card and Tab still
   moves through them. Desktop keeps its grid. */
@media(max-width:760px){
  .uses[data-rail],
  .pods[data-rail],
  .quote-grid[data-rail]{
    display:flex;
    grid-template-columns:none;
    max-width:none;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* bleed past .wrap's 20px so a card can peek at the screen edge */
    margin-inline:-20px;
    padding:2px 20px 8px;
    scroll-padding-left:20px;
    scrollbar-width:none;
  }
  .uses[data-rail]::-webkit-scrollbar,
  .pods[data-rail]::-webkit-scrollbar,
  .quote-grid[data-rail]::-webkit-scrollbar{display:none}

  .uses[data-rail] > *,
  .pods[data-rail] > *,
  .quote-grid[data-rail] > *{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
  .uses[data-rail]:focus-visible,
  .pods[data-rail]:focus-visible,
  .quote-grid[data-rail]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

  /* the pod card CTAs get tight at 82% width */
  .pod-actions{flex-direction:column}
}
.rail-count{margin:14px 0 0;font-size:.82rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.rail-count[hidden]{display:none}