/* DoLess/GetMore — homepage (light). Warm paper ground, ink type, cobalt only as an accent.
   Pruned 2026-09-28 from the approved preview (_preview/light/css/site.css): only rules whose
   classes appear on index.html or are toggled by js/home.js. */
:root{--bg:#F8F6F1; --paper:#FFFFFF; --tint:#F1EEE7;
  --ink:#14161A; --ink-2:#3F444C; --ink-3:#6B7079;
  --line:#E2DDD3; --line-2:#CFC9BD;
  --accent:#2C5FFF; --accent-2:#1F47D4; --accent-soft:#EDF1FF;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:Inter, -apple-system, system-ui, "Segoe UI", sans-serif;
  --wrap:1200px;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.overline{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.display,.h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.display{font-size:clamp(42px,5.4vw,78px);line-height:1.03;text-wrap:balance}
.h2,.lead,.where{text-wrap:pretty}
.h2{font-size:clamp(32px,3.9vw,54px);line-height:1.08}
.display em,.h2 em{font-style:italic;color:var(--accent)}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--ink-2)}
body.sans .display,body.sans .h2{font-family:var(--sans);font-weight:500;letter-spacing:-.035em}
body.sans .display em,body.sans .h2 em{font-style:normal}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:500;font-size:16px;border-radius:6px;padding:15px 26px;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-sm{padding:10px 18px;font-size:15px}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:border-color .15s,color .15s}
.tlink:hover{border-color:var(--ink)}
.tlink.accent{color:var(--accent);border-color:rgba(44,95,255,.35)}
.tlink.accent:hover{border-color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:32px}
footer{border-top:1px solid var(--line);padding:40px 0 48px;font-size:14px;color:var(--ink-3)}
footer .wrap{display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.block{padding:120px 0}
.block.tint{background:var(--tint)}
.head{max-width:760px;margin-bottom:60px}
.head .overline{margin-bottom:18px}
.head .lead{margin-top:18px}
.hero-b{display:grid;grid-template-columns:minmax(0,1fr) min(48vw,800px);height:clamp(620px,calc(100svh - 74px),960px)}
.hero-b .copy{display:flex;flex-direction:column;justify-content:center;padding:40px 56px 40px max(28px,calc((100vw - var(--wrap))/2 + 28px))}
.hero-b .overline{margin-bottom:clamp(16px,2.6svh,28px)}
.hero-b .display{font-size:clamp(38px,min(4.1vw,6.6svh),64px);max-width:16ch}
.hero-b .lead{margin-top:clamp(16px,2.8svh,28px);max-width:31em}
.hero-b .where{margin-top:clamp(18px,3.4svh,36px);font-size:15px;color:var(--ink-3)}
.timeline{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:var(--line-2)}
.timeline li{position:relative}
.timeline .dot{position:relative;display:block;width:25px;height:25px;border-radius:50%;background:var(--bg);border:1px solid var(--accent)}
.timeline .dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--accent)}
.timeline .n{display:block;margin-top:26px;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--accent)}
.timeline h3{margin-top:8px;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.timeline p{margin-top:10px;color:var(--ink-2);font-size:16px}
.ba-list{display:grid;gap:88px}
.ba{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:center}
.ba.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.ba.flip .ba-media{order:2}
.ba-media{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--tint);aspect-ratio:16/10;user-select:none;-webkit-user-select:none;touch-action:pan-y;box-shadow:0 24px 60px -30px rgba(20,22,26,.35)}
.ba-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(20,22,26,.18);transform:translateX(-1px);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos,50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(20,22,26,.25);transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;font-size:15px;color:var(--ink);font-weight:700}
.ba-lbl{position:absolute;top:12px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:4px;pointer-events:none}
.ba-lbl.b{left:12px;background:rgba(20,22,26,.82);color:#fff}
.ba-lbl.a{right:12px;background:var(--accent);color:#fff}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.meta{font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.ba-copy h3,.card h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,36px);letter-spacing:-.015em;line-height:1.12}
body.sans .ba-copy h3,body.sans .card h3{font-family:var(--sans);font-weight:500;letter-spacing:-.025em}
.ba-copy p,.card p{margin-top:14px;color:var(--ink-2)}
.ba-copy .tlink,.card .tlink{margin-top:22px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:104px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.card .body{padding:30px 30px 32px}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.mini{display:flex;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:14px;text-decoration:none;transition:border-color .15s}
.mini:hover{border-color:var(--line-2)}
.mini img{width:96px;height:64px;object-fit:cover;object-position:top;border-radius:4px;flex:none}
.mini b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.mini span{display:block;font-size:14px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.all{margin-top:48px}
.guar{background:var(--ink);color:#fff;border-radius:10px;padding:84px 56px;text-align:center}
.guar .overline{color:#9DB4FF}
.guar .h2{color:#fff;margin-top:16px}
.guar .h2 span{color:#9DB4FF}
.guar p{max-width:760px;margin:22px auto 0;color:#C9CFD8;font-size:18px}
.guar ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin-top:34px;font-size:15px;color:#E5E9EF}
.guar li::before{content:"✓";color:#9DB4FF;margin-right:9px;font-weight:700}
.diag{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:60px}
.diag ul{list-style:none;margin-top:24px;display:grid;gap:10px;color:var(--ink-2);font-size:16px}
.diag li::before{content:"✓";color:var(--accent);margin-right:10px;font-weight:700}
.diag-box{background:var(--tint);border-radius:8px;padding:34px}
.diag-box h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.diag-box p{color:var(--ink-2);font-size:15px;margin-top:10px}
.close{text-align:center;padding:128px 0 136px}
.close .lead{max-width:620px;margin:20px auto 0}
.close .actions{justify-content:center}
@media (max-width:1040px){
.hero-b{grid-template-columns:1fr;min-height:0}
.hero-b .copy{padding:72px 28px 56px}
.timeline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
.timeline::before{display:none}
.ba,.ba.flip{grid-template-columns:1fr;gap:32px}
.ba.flip .ba-media{order:0}
.diag{grid-template-columns:1fr;padding:44px}
.more{grid-template-columns:1fr}
}
@media (max-width:820px){
.block{padding:88px 0}
.cards{grid-template-columns:1fr;margin-top:72px}
.guar{padding:56px 24px}
.diag{padding:30px 22px;gap:32px}
.close{padding:96px 0 104px}
.timeline{grid-template-columns:1fr;row-gap:36px;padding-left:40px}
.timeline::before{display:block;left:12px;right:auto;top:0;bottom:0;width:1px;height:auto}
.timeline .dot{position:absolute;left:-40px;top:0}
.timeline .n{margin-top:0}
}
@media (max-width:520px){
.wrap{padding:0 20px}
.actions .btn{width:100%;white-space:normal;text-align:center}
}
.reel{position:relative;overflow:hidden;background:#1B1D21;min-height:100%;isolation:isolate}
.reel-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 0s linear 1.4s}
.reel-slide.is-on{opacity:1;visibility:visible;transition:opacity 1.4s ease,visibility 0s}
.reel-slide .reel-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 7s cubic-bezier(.25,.1,.25,1)}
.reel-slide video.reel-media{transform:scale(1.02)}
.reel-slide.is-on .reel-media{transform:scale(1)}
.reel-cap{position:absolute;left:0;right:0;bottom:0;padding:140px 40px 40px;color:#fff;background:linear-gradient(180deg,transparent,rgba(12,14,18,.30) 35%,rgba(12,14,18,.78));display:flex;flex-direction:column;gap:6px}
.reel-cap .idx{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.reel-cap strong{font-size:clamp(26px,2.4vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin-top:4px}
.reel-cap .built{font-size:16px;opacity:.9}
.reel-cap a{align-self:flex-start;margin-top:12px;font-size:14px;font-weight:500;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.reel-cap a:hover{border-color:#fff}
.reel-slide .reel-cap > *{transform:translateY(10px);opacity:0;transition:transform .9s ease .35s,opacity .9s ease .35s}
.reel-slide.is-on .reel-cap > *{transform:none;opacity:1}
.reel-bars{position:absolute;top:24px;left:40px;right:40px;display:flex;gap:6px;z-index:3}
.reel-bars button{flex:1;height:18px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.reel-bars button::before,.reel-bars button i{content:"";position:absolute;left:0;right:0;top:8px;height:2px;border-radius:2px}
.reel-bars button::before{background:rgba(255,255,255,.38)}
.reel-bars button i{background:#fff;transform-origin:left center;transform:scaleX(0)}
.reel-bars button.done i{transform:scaleX(1)}
.reel-bars button.is-on i{animation:reelFill var(--dwell,5500ms) linear forwards}
.reel.paused .reel-bars button.is-on i{animation-play-state:paused}
.reel-bars button:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px}
@keyframes reelFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
.reel-slide,.reel-slide .reel-media,.reel-cap > *{transition:none !important;transform:none !important}
.reel-bars button.is-on i{animation:none;transform:scaleX(1)}
}
@media (max-width:1040px){
.hero-b{height:auto}
.reel{min-height:0;height:620px}
}
@media (max-width:820px){
.reel{height:560px}
.reel-cap{padding:120px 24px 28px}
.reel-bars{left:24px;right:24px;top:18px}
}
.ft{border-top:1px solid var(--line);padding:56px 28px 44px;text-align:center;font-size:14px;color:var(--ink-3)}
.ft-cols{display:flex;justify-content:center;gap:clamp(56px,10vw,140px);flex-wrap:wrap}
.ft-cols nav{display:flex;flex-direction:column;gap:10px;align-items:center}
.ft-cols h4{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;margin-bottom:4px}
.ft-cols a{text-decoration:none;color:var(--ink-2)}
.ft-cols a:hover{color:var(--ink);text-decoration:underline}
.ft-copy{margin-top:40px}
.reel-slide .pic{position:absolute;top:52px;right:40px;z-index:2;font-size:12px;font-weight:500;letter-spacing:.04em;color:#fff;background:rgba(12,14,18,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 11px;border-radius:999px;opacity:0;transition:opacity .9s ease .6s}
.reel-slide.is-on .pic{opacity:1}
@media (max-width:820px){
.reel-slide .pic{top:40px;right:24px}
}

/* 2026-09-28 round 2: secondary button next to the main ask */
.btn-line{border:1px solid var(--line-2);background:transparent;color:var(--ink);padding:14px 25px}  /* 1px border: keep the same outer size as .btn-primary */
.btn-line:hover{border-color:var(--ink)}

/* 2026-09-28: even spacing on desktop. Left margin = middle gap = right margin (equal thirds of the
   empty space); two equal columns, max 600px. The header and every homepage section use the same side
   margin, so the logo, text, photo panel, button and everything below line up on the same edges. */
@media (min-width:1041px){
  :root{--c:min(600px, calc((100vw - 192px) / 2));--m:calc((100vw - 2 * var(--c)) / 3)}
  .wrap{max-width:none;padding-left:var(--m);padding-right:var(--m)}
  .hero-b{max-width:none;margin:0;padding:48px var(--m);grid-template-columns:var(--c) var(--c);column-gap:var(--m);height:clamp(600px,calc(100svh - 74px),900px)}
  .hero-b .copy{padding:0}
  .hero-b .reel{border-radius:16px;min-height:0;height:100%}
}
@media (max-width:1040px){ .hero-b .reel{margin:0 28px;border-radius:14px} }
.hero-b .lead{max-width:22.5em}   /* short paragraph, no wider than the headline */

/* 2026-09-28 round 3: "How we work" = the Identify / Build / Deploy / Train stepper from /services
   (same sizes, colours and card), rebuilt for the homepage. Tabs align with the section heading. */
.hw-tabs{display:flex;flex-wrap:wrap;gap:clamp(22px,4.5vw,64px);margin:0 0 clamp(30px,4vw,56px)}
.hw-tab{position:relative;display:flex;align-items:flex-start;gap:8px;background:none;border:0;cursor:pointer;padding:4px 2px 20px;font-family:var(--sans);font-weight:500;font-size:clamp(20px,2.8vw,34px);line-height:1;letter-spacing:-.015em;color:#767B83;transition:color .25s}
.hw-tab-num{font-size:.52em;font-style:italic;margin-top:.12em}
.hw-tab:hover{color:#4A4F57}
.hw-tab.is-on{color:var(--accent)}
.hw-tab.is-on::after{content:"";position:absolute;left:2px;right:2px;bottom:8px;height:2px;border-radius:1px;background:var(--accent)}
.hw-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.hw-panel[hidden]{display:none}
.hw-card{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(32px,5vw,70px);box-shadow:0 34px 80px -48px rgba(20,22,26,.30)}
.hw-seq{display:block;width:260px;height:260px;border-radius:14px;object-fit:cover;background:#0B0E17;box-shadow:0 22px 48px -22px rgba(20,22,26,.55),0 0 0 1px rgba(20,22,26,.06)}
.hw-title{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;font-family:var(--sans);font-weight:500;font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.02em;color:var(--accent)}
.hw-num{font-size:.45em;font-style:italic;margin-top:.28em}
.hw-kicker{margin:0 0 14px;font-size:clamp(15px,1.2vw,17px);font-weight:600;line-height:1.6;color:var(--ink)}
.hw-lead{margin:0 0 22px;max-width:40em;font-size:clamp(15px,1.2vw,17px);line-height:1.62;color:#4A4F57}
.hw-arrows{display:flex;gap:14px;margin-top:clamp(24px,2.6vw,36px)}
.hw-arrows button{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:18px;cursor:pointer;transition:border-color .15s,opacity .15s}
.hw-arrows button:hover:not(:disabled){border-color:var(--ink)}
.hw-arrows button:disabled{opacity:.35;cursor:default}
@media (max-width:820px){
  .hw-card{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 24px}
  .hw-seq{width:100%;max-width:300px;height:auto;aspect-ratio:1/1}
}
@media (max-width:520px){
  .hw-tabs{flex-wrap:nowrap;justify-content:space-between;gap:8px}
  .hw-tab{font-size:clamp(16px,5vw,20px);padding-bottom:16px}
  .hw-tab.is-on::after{bottom:6px}
}

/* 2026-10-01: the "after" side of a before/after can be the site's own hero clip (a <video class="ba-after">).
   Nature Stay moved up into the sliders, so the small cards below are a pair on desktop. */
.ba-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;background:var(--tint)}
@media (min-width:1041px){ .more.pair{grid-template-columns:repeat(2,minmax(0,1fr))} }