/* ==========================================================================
   KraftVision — design system (light)
   One stylesheet, token-driven, no framework.

   Every colour pair below was computed from relative luminance, not judged by
   eye. The tightest is --dim on --deep at 4.75:1; nothing ships under 4.5.
   ========================================================================== */
:root{
  /* surface — light, in increasing depth */
  --page:#FFFFFF;
  --alt:#F8FAFC;
  --deep:#F1F5F9;
  --raise:#FFFFFF;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;

  /* dark bands (CTA, footer) keep the brand navy */
  --navy:#0B1220;
  --navy-soft:#111827;
  --on-navy:#E7ECF3;
  --on-navy-dim:#A8B4C4;

  /* text */
  --text:#0F172A;
  --muted:#475569;
  --dim:#5F6E82;          /* 4.75:1 on --deep, the tightest pair in the file */

  /* accent */
  --blue:#2563EB;
  --blue-deep:#1D4ED8;
  --blue-tint:#EFF6FF;
  --blue-line:#DBEAFE;
  /* Conversion CTAs only. #F97316 cannot carry white text; this can, at 5.18:1 */
  --cta:#C2410C;
  --cta-hover:#9A3412;
  --ok:#15803D;

  /* type */
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-hero:clamp(2.35rem,5.4vw,4rem);
  --fs-h1:clamp(2rem,4.2vw,3.1rem);
  --fs-h2:clamp(1.7rem,3.2vw,2.5rem);
  --fs-h3:clamp(1.06rem,1.5vw,1.25rem);
  --fs-lede:clamp(1rem,1.2vw,1.12rem);

  /* layout */
  --shell:1280px;
  --gutter:clamp(20px,4vw,40px);
  /* Two steps, not one value for every section: a major section breathes,
     a normal one does not have to. */
  --sec-y:clamp(56px,5.4vw,84px);
  --sec-y-lg:clamp(72px,7.5vw,112px);

  /* radius + shadow */
  --r-s:8px; --r-m:12px; --r-l:18px; --r-pill:100px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 8px 24px rgba(15,23,42,.06);
  --sh-3:0 18px 44px rgba(15,23,42,.10);
  --sh-4:0 28px 70px rgba(15,23,42,.14);

  /* motion */
  --t1:170ms; --t2:340ms; --t3:620ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);

  --z-nav:50; --z-drawer:45; --z-fab:40; --z-skip:100;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  background:var(--page);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
}
body.is-locked{overflow:hidden}
.kv-actionbar{display:none}

/* ====================================================== mobile action bar ==
   Two actions, not five nav tabs: navigation is in the header burger and the
   footer, while this strip is permanently the two things a visitor from a
   paid click is here to do. Hidden until the hero is out of the way so it
   never competes with the hero's own CTAs. */
@media (max-width:1023px){
  .kv-actionbar{position:fixed;inset:auto 0 0;z-index:var(--z-nav);
    display:grid;grid-template-columns:1fr 1.25fr;gap:10px;
    padding:9px max(14px,env(safe-area-inset-right,0px))
            calc(9px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb, var(--page) 92%, transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(15,23,42,.07);
    transform:translateY(110%);transition:transform var(--t2) var(--ease);
    pointer-events:none}
  .kv-actionbar.is-ready{transform:none;pointer-events:auto}
  .kv-actionbar a{display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:46px;border-radius:var(--r-pill);font-size:.92rem;font-weight:600}
  .kv-actionbar__wa{background:var(--page);color:var(--text);
    border:1px solid var(--line-strong)}
  .kv-actionbar__wa svg{color:#25D366}
  .kv-actionbar__quote{background:var(--accent, var(--blue));color:#fff;
    box-shadow:var(--sh-2)}
  .kv-actionbar__quote svg{transition:transform var(--t2) var(--ease)}
  .kv-actionbar a:active{transform:scale(.985)}
}
img,svg{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.018em;line-height:1.3}
p{color:var(--muted)}
::selection{background:var(--blue);color:#fff}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y);position:relative}
/* Sections that open a new idea get the larger step; the ones that
   continue the previous thought keep the normal one. */
.sec--major{padding-block:var(--sec-y-lg)}
.tone-alt{background:var(--alt)}
.tone-deep{background:var(--deep)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;
  min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-70px;z-index:var(--z-skip);background:var(--cta);
  color:#fff;font-weight:600;padding:11px 20px;border-radius:var(--r-s);transition:top var(--t1) var(--ease)}
.skip:focus{top:14px}

/* The eyebrow carries a section icon rather than a decorative dash: it says
   what the section is before a word of it is read. */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.79rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:15px}
.eyebrow__ico{flex:none;width:15px;height:15px;padding:4px;box-sizing:content-box;
  border-radius:7px;background:var(--blue-tint);color:var(--blue)}
/* On the navy CTA band the tint would be invisible. */
.cta .eyebrow__ico{background:rgba(147,180,255,.16);color:#93B4FF}
.lede{font-size:var(--fs-lede);color:var(--muted);max-width:64ch;line-height:1.68}
.sec__head{max-width:680px;margin-bottom:clamp(30px,4vw,52px)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .eyebrow{justify-content:center}
.sec__head--center .lede{margin-inline:auto}
.sec__head h2{margin-bottom:15px}
.sec__more{margin-top:clamp(26px,3.2vw,40px)}
.sec__head--center + .sec__more,.sec--faq .sec__more{text-align:center}

/* -------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:.94rem;line-height:1;min-height:46px;padding:14px 24px;
  border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap;
  transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease),
             transform var(--t1) var(--ease),box-shadow var(--t2) var(--ease)}
.btn svg{flex:none;transition:transform var(--t2) var(--out)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(194,65,12,.20)}
.btn--primary:hover{background:var(--cta-hover);box-shadow:0 12px 26px rgba(194,65,12,.26)}
.btn--ghost{background:var(--page);color:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--navy);background:var(--alt)}
.btn--lg{min-height:54px;padding:17px 30px;font-size:1rem}
.btn--sm{min-height:40px;padding:11px 18px;font-size:.88rem}
.btn--block{width:100%}
/* on the dark CTA band */
.cta .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.cta .btn--ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}
.link{display:inline-flex;align-items:center;gap:8px;min-height:24px;font-weight:600;
  font-size:.93rem;color:var(--blue)}
.link:hover{color:var(--blue-deep)}
.link svg{transition:transform var(--t2) var(--out)}
.link:hover svg{transform:translateX(5px)}

/* ------------------------------------------------------------------ nav -- */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.nav.is-stuck{border-color:var(--line);box-shadow:var(--sh-1)}
.nav__in{display:flex;align-items:center;gap:26px;height:72px;transition:height var(--t2) var(--ease)}
.nav.is-stuck .nav__in{height:64px}
.logo{display:inline-flex;align-items:center;gap:11px;min-height:44px;color:var(--navy)}
.logo__mark{color:var(--navy);flex:none}
.logo__word{font-family:var(--display);font-weight:800;font-size:1.18rem;letter-spacing:-.035em}
.nav__links{margin-left:auto}
.nav__links ul{display:flex;align-items:center;gap:2px}
.nav__link{position:relative;display:inline-flex;align-items:center;min-height:40px;
  padding:8px 14px;font-size:.93rem;font-weight:500;color:var(--muted);border-radius:var(--r-s);
  transition:color var(--t1) var(--ease)}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t2) var(--out)}
.nav__link:hover{color:var(--text)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--text)}
.nav__burger{display:none;width:46px;height:46px;margin-left:auto;align-items:center;
  justify-content:center;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--page)}
.nav__burger span{position:relative;display:block;width:18px;height:1.8px;background:var(--text);
  transition:background var(--t1) linear}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;
  width:18px;height:1.8px;background:var(--text);transition:transform var(--t2) var(--ease)}
.nav__burger span::before{top:-6px}
.nav__burger span::after{top:6px}
.nav__burger[aria-expanded="true"] span{background:transparent}
.nav__burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--page);
  padding-top:86px;overflow-y:auto;animation:drawerIn var(--t2) var(--out)}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.drawer__in{display:flex;flex-direction:column;min-height:calc(100dvh - 86px);padding-bottom:32px}
.drawer__nav{display:grid}
.drawer__link{display:flex;align-items:center;gap:16px;min-height:60px;padding:12px 0;
  font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.028em;
  border-bottom:1px solid var(--line);color:var(--text)}
.drawer__link span{font-size:.72rem;font-family:var(--body);font-weight:600;color:var(--dim);
  letter-spacing:.08em}
.drawer__link.is-active{color:var(--blue)}
.drawer__foot{margin-top:auto;display:grid;gap:12px;padding-top:30px}
.drawer__meta{font-size:.88rem;color:var(--dim);line-height:1.7}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--blue-tint),var(--page) 62%);
  padding-block:clamp(34px,5vw,64px) clamp(52px,6.5vw,92px);
  margin-top:-72px;padding-top:calc(72px + clamp(34px,5vw,64px))}
.hero__field{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 460px at 82% 6%,rgba(37,99,235,.10),transparent 62%),
             radial-gradient(620px 420px at 4% 88%,rgba(194,65,12,.05),transparent 60%)}
.hero__in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(34px,4.5vw,60px);align-items:center}
.hero__badge{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:7px 15px;
  border:1px solid var(--blue-line);border-radius:var(--r-pill);background:var(--page);
  font-size:.82rem;color:var(--muted);margin-bottom:22px;box-shadow:var(--sh-1)}
.hero__badge svg{color:var(--blue)}
.hero__badge b{color:var(--text);font-weight:600}
.hero__h1{font-size:var(--fs-hero);letter-spacing:-.036em;line-height:1.06;max-width:15ch;
  margin-bottom:20px}
.hero .lede{max-width:52ch;margin-bottom:28px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.hero__stage{position:relative}

/* --------------------------------------------------------- device frames -- */
/* A desktop browser and a phone for the same project, alternating, so the work
   is shown the way clients actually see it. */
.devices{position:relative;width:100%;overflow:hidden;border-radius:var(--r-m)}
.dev-slide{transition:transform .7s var(--ease),opacity .42s ease;will-change:transform,opacity}
.dev-slide--desktop{position:relative}
.dev-slide--mobile{position:absolute;inset:0;display:grid;place-items:center}
.devices[data-view="desktop"] .dev-slide--desktop{transform:none;opacity:1}
.devices[data-view="desktop"] .dev-slide--mobile{transform:translateX(26%);opacity:0}
.devices[data-view="mobile"] .dev-slide--desktop{transform:translateX(-22%);opacity:0}
.devices[data-view="mobile"] .dev-slide--mobile{transform:none;opacity:1}

.dev-browser{position:relative;background:var(--page);border:1px solid var(--line-strong);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-3)}
.dev-bar{display:flex;align-items:center;gap:5px;padding:8px 11px;background:var(--alt);
  border-bottom:1px solid var(--line)}
.dev-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.dev-url{margin-left:8px;flex:1;min-width:0;font-size:.66rem;color:var(--dim);
  background:var(--page);border:1px solid var(--line);border-radius:5px;padding:3px 9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-browser img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.dev-phone{width:29%;background:var(--page);border:1px solid var(--line-strong);
  border-radius:16px;padding:4px;box-shadow:var(--sh-4)}
.dev-phone img{width:100%;height:auto;aspect-ratio:420/910;object-fit:cover;
  object-position:top center;border-radius:12px}
.dev-views{display:flex;gap:6px;justify-content:center;margin-top:12px}
.dev-views span{width:6px;height:6px;border-radius:50%;background:var(--line-strong);
  transition:background var(--t2) var(--ease)}
.devices[data-view="desktop"] + .dev-views span:first-child,
.devices[data-view="mobile"] + .dev-views span:last-child{background:var(--blue)}

/* legacy single frame, still used for the hero fallback and case shots */
.frame{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--page);
  border:1px solid var(--line-strong);box-shadow:var(--sh-4)}
.frame__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--alt);
  border-bottom:1px solid var(--line)}
.frame__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.frame__bar span{margin-left:9px;flex:1;min-width:0;font-size:.68rem;color:var(--dim);
  background:var(--page);border:1px solid var(--line);border-radius:5px;padding:4px 10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.frame--case{box-shadow:var(--sh-3)}

.strip{border-block:1px solid var(--line);background:var(--alt)}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-block:20px}
.strip__i{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted)}
.strip__i svg{color:var(--ok);flex:none}

/* ---------------------------------------------------------------- grids -- */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,54px)}
/* six half-columns so a trailing row of two centres under three */
.grid--3{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid--3>*{grid-column:span 2}
.grid--3>*:nth-child(4):nth-last-child(2){grid-column:2/span 2}
.card{background:var(--page);border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform var(--t2) var(--ease),border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--blue-line);box-shadow:var(--sh-3)}
.card h3{margin-bottom:10px}
.card p{font-size:.93rem;margin-bottom:16px}
.card__link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:24px;
  font-weight:600;font-size:.9rem;color:var(--blue);padding-top:16px}
.card__link svg{transition:transform var(--t2) var(--out)}
.card:hover .card__link svg{transform:translateX(5px)}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.tags li{font-size:.78rem;color:var(--muted);background:var(--alt);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px}
.ticks{display:grid;gap:9px}
.ticks li{display:flex;gap:11px;font-size:.93rem;color:var(--muted);line-height:1.55}
.ticks svg{color:var(--ok);flex:none;margin-top:5px}
.ticks span{color:var(--muted)}

/* ----------------------------------------------------------------- work -- */
.work{display:grid;gap:20px}
.proj{display:grid;grid-template-columns:1.05fr 1fr;background:var(--page);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1);
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.proj:hover{border-color:var(--blue-line);box-shadow:var(--sh-3)}
.proj:nth-child(even) .proj__media{order:2}
.proj__media{position:relative;padding:clamp(18px,2.4vw,28px);background:var(--alt);
  border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.proj:nth-child(even) .proj__media{border-right:0;border-left:1px solid var(--line)}
.proj__cat{display:inline-flex;align-self:flex-start;margin-bottom:12px;font-size:.74rem;
  font-weight:600;color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-line);
  border-radius:var(--r-pill);padding:5px 12px}
.proj__body{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:center}
.proj__body h3{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:10px}
.proj__body h3 a:hover{color:var(--blue)}
.proj__body>p{font-size:.94rem;margin-bottom:16px;max-width:46ch}
.proj__foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.tone-alt .proj,.tone-alt .card{background:var(--page)}
.tone-alt .proj__media{background:var(--deep)}

/* ---------------------------------------------------- industry concepts -- */
/* Demos have their own gallery; real project cards keep their existing style. */
.concepts .sec__head h1{margin-bottom:15px}
.concepts__note{margin-top:18px;font-size:.87rem;color:var(--muted);
  padding-left:12px;border-left:2px solid var(--blue)}
.concepts__grid{gap:24px}
.concepts__grid>div{min-width:0}
.concept{height:100%;display:flex;flex-direction:column;background:var(--page);
  border:1px solid var(--line-strong);border-radius:var(--r-l);box-shadow:var(--sh-1);
  transition:transform var(--t2) var(--out),border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.concept__preview{overflow:hidden;border-radius:calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0;
  border-bottom:1px solid var(--line)}
.concept__image{overflow:hidden;background:var(--alt)}
.concept__image img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;
  transition:transform var(--t3) var(--out)}
.concept__body{padding:24px;display:flex;flex-direction:column;flex:1;align-items:flex-start}
.concept__badge{font-size:.68rem;font-weight:600;letter-spacing:.065em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-line);
  border-radius:var(--r-pill);padding:5px 10px;margin-bottom:14px}
.concept :is(h2,h3){font-size:var(--fs-h3);font-weight:700;letter-spacing:-.018em;
  line-height:1.3;margin-bottom:10px}
.concept__body>p{font-size:.9rem;margin-bottom:18px}
.concept .tags{margin-top:auto;margin-bottom:14px;gap:6px}
.concept .tags li{font-size:.72rem;padding:4px 9px}
.concept__link{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:46px;width:100%;border-top:1px solid var(--line);padding-top:8px;
  font-size:.9rem;font-weight:600;color:var(--blue)}
.concept__link svg{flex:none;transition:transform var(--t2) var(--out)}
.concept:focus-within{border-color:var(--blue);box-shadow:var(--sh-3)}
.concepts__cta{margin-top:clamp(32px,4vw,52px);padding:clamp(24px,4vw,44px);
  border-radius:var(--r-l);display:flex;align-items:center;gap:32px;text-align:left}
.concepts__cta-copy{flex:1;min-width:0}
.concepts .concepts__cta :is(h2,h3){font-size:var(--fs-h2);font-weight:700;letter-spacing:-.018em;
  color:var(--on-navy);margin-bottom:14px;line-height:1.1}
.concepts__cta p{color:var(--on-navy-dim);max-width:58ch;font-size:.95rem}
.concepts__actions{display:flex;flex-direction:column;gap:12px;flex:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .concept:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:var(--sh-3)}
  .concept:hover .concept__image img{transform:scale(1.03)}
  .concept:hover .concept__link svg{transform:translateX(3px)}
}

/* ---------------------------------------------------------------- steps -- */
.steps{position:relative;display:grid;gap:4px}
.steps__rail{position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.steps__rail i{display:block;width:100%;height:0;background:var(--blue);transition:height var(--t3) var(--out)}
.step{display:grid;grid-template-columns:48px 1fr;gap:22px;padding:20px 0}
.step__n{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;
  place-items:center;font-family:var(--display);font-weight:800;font-size:.9rem;
  background:var(--page);border:1px solid var(--line-strong);color:var(--blue);box-shadow:var(--sh-1)}
.step__body h3{margin-bottom:8px}
.step__body p{font-size:.94rem;margin-bottom:12px;max-width:62ch}

/* ------------------------------------------------------------ why / tech -- */
.why__i{padding:24px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--page);
  box-shadow:var(--sh-1)}
.why__n{font-size:.74rem;font-weight:700;letter-spacing:.08em;color:var(--blue)}
.why__i h3{margin:11px 0 9px}
.why__i p{font-size:.91rem}

/* -------------------------------------------------------------- pricing -- */
.plans{display:grid;gap:24px 16px;align-items:stretch}
.plan{position:relative;background:var(--page);border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px 22px;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.plan:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.plan--featured{border-color:var(--blue);box-shadow:0 16px 40px rgba(37,99,235,.16)}
.plan__badge{position:absolute;top:-11px;left:22px;background:var(--blue);color:#fff;
  font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:var(--r-pill)}
.plan h3{margin-bottom:6px}
.plan__for{font-size:.85rem;color:var(--dim);min-height:40px;margin-bottom:14px}
.plan__from{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.plan__price{font-family:var(--display);font-weight:800;font-size:1.95rem;letter-spacing:-.03em;
  line-height:1.1;margin-top:5px;color:var(--text)}
.plan__note{font-size:.82rem;color:var(--dim);margin:5px 0 16px;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.plan__feat{margin-bottom:16px}
.plan__feat + .btn{margin-top:auto}
.plan__feat li{font-size:.89rem}
.plan__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:grid;gap:6px;margin-bottom:18px}
.plan__meta li{font-size:.79rem;color:var(--dim)}
.care{display:grid;grid-template-columns:1.5fr auto;gap:26px;align-items:center;
  padding:clamp(24px,3.4vw,38px);border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--page);box-shadow:var(--sh-2)}
.care h2{font-size:clamp(1.6rem,2.8vw,2.15rem);margin:12px 0}
.care h2 span{font-size:1rem;font-weight:500;color:var(--dim);font-family:var(--body)}

/* ------------------------------------------------------------------ faq -- */
.acc{max-width:840px;margin-inline:auto;border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:64px;padding:19px 0;text-align:left;font-family:var(--display);font-weight:700;
  font-size:1rem;letter-spacing:-.012em;color:var(--text);transition:color var(--t1) var(--ease)}
.acc__btn:hover{color:var(--blue)}
.acc__ico{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);
  flex:none;transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease)}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;top:50%;left:50%;background:var(--text);
  transform:translate(-50%,-50%);transition:transform var(--t2) var(--ease),background var(--t1) linear}
.acc__ico::before{width:11px;height:1.7px}
.acc__ico::after{width:1.7px;height:11px}
.acc__item.is-open .acc__ico{background:var(--blue);border-color:var(--blue)}
.acc__item.is-open .acc__ico::before,.acc__item.is-open .acc__ico::after{background:#fff}
.acc__item.is-open .acc__ico::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__panel{height:0;overflow:hidden;transition:height var(--t2) var(--out)}
.acc__panel p{padding:0 44px 20px 0;font-size:.94rem;max-width:70ch}

/* ------------------------------------------------------------------ cta -- */
.cta{overflow:hidden;text-align:center;background:var(--navy)}
.cta__in{position:relative;z-index:1;max-width:720px;margin-inline:auto}
.cta .eyebrow{justify-content:center;color:#93B4FF}
.cta .eyebrow::before{background:#93B4FF}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:16px;color:#fff}
.cta .lede{margin-inline:auto;margin-bottom:28px;color:var(--on-navy)}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta__note{margin-top:18px;font-size:.84rem;color:var(--on-navy-dim)}
.cta__mark{position:absolute;right:-4%;bottom:-34%;width:min(46%,440px);opacity:.06;
  color:#fff;pointer-events:none}

/* --------------------------------------------------------------- footer -- */
.foot{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);
  padding-block:clamp(46px,5.6vw,72px) 24px}
.foot__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;
  gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot .logo,.foot .logo__mark{color:#fff}
.foot__slogan{margin-top:15px;font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;color:#fff}
.foot__about{margin-top:8px;font-size:.89rem;max-width:34ch;color:var(--on-navy-dim)}
.foot__h{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;font-family:var(--body)}
.foot li{margin-bottom:2px}
.foot li a,.foot__loc{display:inline-flex;align-items:center;gap:9px;min-height:32px;
  font-size:.89rem;color:var(--on-navy-dim);transition:color var(--t1) var(--ease)}
.foot li a:hover{color:#fff}
.foot li svg{color:#8FA3BC;flex:none}
.foot__base{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;padding-top:20px;font-size:.82rem;color:var(--on-navy-dim)}
.foot__legal a{display:inline-flex;align-items:center;min-height:24px;
  transition:color var(--t1) var(--ease)}
.foot__legal a:hover{color:#fff}
.foot__watermark{position:absolute;left:-3%;bottom:-40%;width:min(38%,380px);opacity:.05;
  color:#fff;pointer-events:none}

.wa-fab{position:fixed;right:20px;bottom:20px;z-index:var(--z-fab);display:inline-flex;
  align-items:center;gap:10px;min-height:48px;padding:13px 19px;border-radius:var(--r-pill);
  background:#0F7466;color:#fff;font-weight:600;font-size:.9rem;box-shadow:var(--sh-3);
  transition:transform var(--t2) var(--ease),background var(--t1) var(--ease)}
.wa-fab:hover{transform:translateY(-3px);background:#12897a}
body.is-locked .wa-fab{display:none}

/* ------------------------------------------------------- inner pages ----- */
.crumbs{margin-bottom:24px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:.84rem;color:var(--dim)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}
.crumbs a,.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:24px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.crumbs [aria-current]{color:var(--text);font-weight:500}
.sec--lead{padding-block:clamp(26px,3.6vw,50px) clamp(28px,3.6vw,46px)}
.sec--lead .sec__head:last-child{margin-bottom:0}
.sec--lead + .sec:not(.tone-alt):not(.tone-deep){padding-top:clamp(16px,2.4vw,32px)}
.lead{max-width:820px}
.lead h1{margin-bottom:16px}
.lead__lede{margin-bottom:24px}
.lead__actions{display:flex;flex-wrap:wrap;gap:12px}
.lead__price{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:.9rem;color:var(--muted)}
.lead__price svg{color:var(--ok)}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(28px,3.6vw,44px);
  padding-top:24px;border-top:1px solid var(--line)}
.meta dt{font-size:.73rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.meta dd{margin-top:5px;font-size:.93rem;color:var(--text)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,54px);align-items:start}
.split h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.dl__i{padding:24px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--page);
  box-shadow:var(--sh-1)}
.dl__i h3{margin-bottom:9px}
.dl__i p{font-size:.92rem}
.who{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:840px;margin-inline:auto}
.who div{display:flex;gap:11px;align-items:flex-start;padding:15px 18px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--page);font-size:.92rem;color:var(--muted)}
.who svg{color:var(--ok);flex:none;margin-top:4px}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.rel__c{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--page);box-shadow:var(--sh-1);
  transition:border-color var(--t2) var(--ease),transform var(--t2) var(--ease)}
.rel__c:hover{border-color:var(--blue);transform:translateY(-3px)}
.rel__c svg{margin-top:8px;color:var(--blue)}
.rel__k{font-size:.73rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.rel__t{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--text)}
.case__stack{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}

.sec--shots .caseshots{position:relative}
/* the phone deliberately overhangs the frame here, so nothing may clip it */
.caseshots{position:relative;overflow:visible}
.phone{position:absolute;right:2%;bottom:-8%;width:19%;background:var(--page);
  border:1px solid var(--line-strong);border-radius:16px;padding:4px;box-shadow:var(--sh-4)}
.phone img{width:100%;aspect-ratio:420/910;object-fit:cover;object-position:top center;border-radius:12px}

.about{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.5vw,58px);align-items:center}
.about h1{margin-bottom:18px}
.about .lede{margin-bottom:16px}
.about .tags{margin:24px 0}
.about__pic{position:relative}
.about__pic img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--alt);box-shadow:var(--sh-3)}
.about__pic figcaption{position:absolute;left:16px;bottom:16px;padding:12px 16px;border-radius:var(--r-m);
  background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:var(--sh-2);
  backdrop-filter:blur(8px)}
.about__pic b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:var(--text)}
.about__pic span{font-size:.82rem;color:var(--dim)}

.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.5vw,58px);align-items:start}
.contact h1{margin-bottom:16px}
.contact__direct{display:grid;gap:10px;margin-top:26px}
.contact__direct a{display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 18px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--page);
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.contact__direct a:hover{border-color:var(--blue);box-shadow:var(--sh-2)}
.contact__direct svg{color:var(--blue);flex:none}
.contact__direct b{display:block;font-size:.94rem;color:var(--text)}
.contact__direct span span{font-size:.82rem;color:var(--dim)}
.contact__loc{margin-top:20px;font-size:.86rem;color:var(--dim)}
.form{padding:clamp(22px,2.8vw,32px);border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--page);box-shadow:var(--sh-2);display:grid;gap:15px}
.form__two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form__row{display:grid;gap:7px}
.form label{font-size:.86rem;font-weight:600;color:var(--text)}
.form label span{color:var(--cta)}
/* 16px minimum: anything smaller makes iOS Safari zoom on focus */
.form input,.form select,.form textarea{width:100%;min-height:48px;padding:12px 15px;
  font:inherit;font-size:16px;color:var(--text);background:var(--page);
  border:1px solid var(--line-strong);border-radius:var(--r-s);
  transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.form textarea{min-height:130px;resize:vertical;line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-line)}
.form input::placeholder,.form textarea::placeholder{color:#94A3B8}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F6E82' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px;padding-right:38px}
.form .form__note{font-size:.87rem;color:var(--muted)}
.form .form__note:empty{display:none}
.form .form__note.is-ok{color:var(--ok)}
.form .form__note.is-err{color:var(--cta)}

.prose{max-width:74ch}
.prose h1{margin-bottom:24px}
.prose h2{font-size:1.24rem;margin:32px 0 12px}
.prose p{margin-bottom:13px;font-size:.96rem}
.prose em{color:var(--dim)}

/* A grid item's automatic minimum is its min-content, so a nowrap button
   could stretch the shell past the viewport. */
.sec--nf{min-height:72vh;display:grid;place-items:center;text-align:center}
.sec--nf>.shell{min-width:0;max-width:100%}
.nf{position:relative;max-width:62ch;margin-inline:auto}
.nf .eyebrow{justify-content:center}
.nf__code{width:110px;margin:0 auto 20px;color:var(--blue);opacity:.28}
.nf h1{margin-bottom:14px}
.nf .lede{margin-inline:auto;margin-bottom:26px}
.nf .lead__actions{justify-content:center}
.nf__links{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:34px;
  padding-top:24px;border-top:1px solid var(--line)}
.nf__links a{display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:.9rem;color:var(--muted)}
.nf__links a:hover{border-color:var(--blue);color:var(--blue)}

/* -------------------------------------------------------------- motion -- */
/* Hidden state applies only under .js, set by an inline <head> script, so a
   script failure can never leave content invisible. */
.js [data-anim]{opacity:0;transform:translateY(16px);
  transition:opacity var(--t3) var(--out),transform var(--t3) var(--out)}
.js [data-anim].in{opacity:1;transform:none}
[data-anim-i="1"]{transition-delay:80ms}
[data-anim-i="2"]{transition-delay:160ms}
.js [data-split] .ln{display:block;overflow:hidden}
.js [data-split] .ln>span{display:block;transform:translateY(105%);
  transition:transform var(--t3) var(--out)}
.js [data-split].in .ln>span{transform:none}
.js [data-split].in .ln:nth-child(2)>span{transition-delay:70ms}
.js [data-split].in .ln:nth-child(3)>span{transition-delay:140ms}
.js [data-split].in .ln:nth-child(4)>span{transition-delay:210ms}

/* ---------------------------------------------------------- responsive -- */
@media (max-width:1023px){
  .nav__in{gap:12px}
  .nav__link{padding-inline:9px;font-size:.88rem}
  .nav__link::after{left:9px;right:9px}
  .nav__cta{padding-inline:14px}
  .hero__in{grid-template-columns:1fr;gap:40px}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--3>*,.grid--3>*:nth-child(4):nth-last-child(2){grid-column:auto}
  /* Three cards in a two-column grid leave the second row half empty. The
     odd one out takes the full width instead of sitting next to a gap. */
  .grid--3>*:nth-child(3):last-child{grid-column:1/-1}
  .plans{grid-template-columns:repeat(2,1fr)}
  .split,.about,.contact,.care{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
  .care{gap:20px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
  .foot__grid>div:first-child{grid-column:1/-1}
}
@media (max-width:1023px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .grid--2{grid-template-columns:1fr}
  .proj{grid-template-columns:1fr}
  .proj:nth-child(even) .proj__media{order:0;border-left:0}
  .proj__media{border-right:0;border-bottom:1px solid var(--line)}
  .strip__in{grid-template-columns:repeat(2,1fr)}
  .meta{grid-template-columns:repeat(2,1fr)}
  .caseshots .phone{position:static;width:44%;margin:14px 0 0 auto}
  .sec--shots .caseshots{display:block}
}
@media (max-width:767px){
  html{scroll-padding-top:80px}
  /* Every section used a flat 60px top+bottom regardless of how much it
     actually holds; on a phone that adds up across a dozen sections faster
     than it does on desktop, where 7.5vw already tapers it down. */
  :root{--sec-y:40px;--sec-y-lg:56px}
  .hero{margin-top:-64px;padding-top:calc(64px + 30px)}
  .nav__in{height:64px}
  .grid--3,.plans,.who,.form__two{grid-template-columns:1fr}
  .grid--3>*{grid-column:auto}
  .concept__body{padding:22px}
  .concepts__cta{flex-direction:column;align-items:stretch;gap:24px}
  .concepts__actions .btn{width:100%}
  .hero__actions .btn,.cta__actions .btn,.lead__actions .btn{width:100%}
  .strip__in{grid-template-columns:1fr;gap:10px}
  .foot__grid{grid-template-columns:1fr}
  .step{grid-template-columns:38px 1fr;gap:16px}
  .step__n{width:38px;height:38px;font-size:.8rem}
  .steps__rail{left:18px}
  .acc__panel p{padding-right:0}
  .wa-fab{right:14px;bottom:14px;padding:12px 16px}
  .wa-fab span{display:none}
  .about__pic figcaption{left:12px;bottom:12px;padding:10px 14px}
  /* a long button label must be allowed to wrap on a narrow phone */
  .btn{white-space:normal;text-align:center}
  /* editorial line breaks produce orphans at this width */
  h1 br,h2 br{display:none}
}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-anim]{opacity:1;transform:none}
  .js [data-split] .ln>span{transform:none}
  /* No auto-rotation at all, so both device views are shown at once. They sit
     side by side rather than stacked: a 420x910 phone placed under a 16:10
     browser is a tall sliver with a column of dead space beside it, which
     doubled the height of every project card and read as a layout bug. */
  .devices{overflow:visible;display:grid;grid-template-columns:1fr 27%;
    gap:clamp(10px,2vw,18px);align-items:center}
  .dev-slide--mobile{position:static;opacity:1!important;transform:none!important;
    display:block}
  .dev-phone{width:100%;margin-inline:0}
  /* The desktop/mobile view dots exist to hint that the frame alternates;
     under reduced motion it no longer does, so the dots would just be noise. */
  .dev-views{display:none}
}

/* Global motion control, injected by site.js on any page that rotates
   device frames, so it only appears when there is motion to pause. */
.motion-toggle{position:fixed;left:14px;bottom:14px;z-index:var(--z-fab);
  display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:7px 13px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);box-shadow:var(--sh-2);
  font-size:.76rem;font-weight:600;color:var(--muted);
  transition:border-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.motion-toggle:hover{border-color:var(--blue);color:var(--blue)}
.motion-toggle-dot{width:8px;height:8px;border-radius:2px;background:var(--blue);flex:none}
.motion-toggle[aria-pressed="true"] .motion-toggle-dot{border-radius:50%;background:var(--dim)}
@media (max-width:767px){
  .motion-toggle{left:12px;bottom:12px;min-height:32px;padding:6px 11px;font-size:.72rem}
  .motion-toggle-label{display:none}
  .motion-toggle{padding:8px}
}

/* ---------------------------------------------------------- thank you ---- */
.thanks__tick{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;
  border-radius:50%;background:var(--blue-tint);color:var(--ok)}
.thanks .eyebrow{justify-content:center}
.thanks__meta{margin-top:26px;font-size:.88rem;color:var(--dim)}

/* Persistent mobile shortcuts, including room for device safe areas. */
@media (max-width:1023px){
  :root{--actionbar-h:calc(60px + env(safe-area-inset-bottom, 0px))}
  html{scroll-padding-bottom:calc(var(--actionbar-h) + 16px)}
  body{padding-bottom:var(--actionbar-h)}
  .drawer{bottom:0;padding-top:76px}
  .drawer__in{min-height:calc(100dvh - 76px)}
  .drawer__link{min-height:48px;font-size:1.2rem;padding-block:8px}
  .drawer__foot{padding-top:20px;gap:10px}
  /* The bar already offers WhatsApp; a floating button on top of it is the
     same action twice, covering content. */
  .wa-fab{display:none}
  .motion-toggle{bottom:calc(var(--actionbar-h) + 12px)}
}
/* BUG FIXED HERE: this block used to also carry .home-desktop/.home-mobile/
   .mobile-* rules for a JS-rendered mobile-only homepage that no longer
   exists, plus ".hero-desktop-work,.has-hero main>.strip{display:none}" —
   which, now that the homepage is one responsive composition, was hiding the
   real capability strip on every visit under 900px. Both are gone; only the
   two rules that still do something are kept. */
@media (max-width:1023px){
  .has-hero .hero__h1{font-size:2.35rem}
  .has-hero .hero__copy .lede{font-size:1rem;line-height:1.6}
}
@media (max-width:767px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .foot__brand,.foot__grid>div:last-child{grid-column:1/-1}
  .foot__grid>div:last-child ul{display:flex;flex-wrap:wrap;gap:0 18px}
}

/* ==========================================================================
   Concept showcase — the homepage's main visual argument
   The concepts are the artwork. Frames stay quiet so the work inside carries
   the page: hairline borders, soft shadow, no gradients or glass.
   ========================================================================== */
.showpiece{position:relative;padding-bottom:6%}
.showpiece__browser{position:relative;border-radius:var(--r-m);overflow:hidden;
  background:var(--page);border:1px solid var(--line-strong);box-shadow:var(--sh-4)}
.showpiece__browser img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  object-position:top center;display:block}
.showpiece__phone{position:absolute;right:-4%;bottom:-3%;width:21%;min-width:86px;
  background:var(--page);border:1px solid var(--line-strong);border-radius:14px;
  padding:4px;box-shadow:var(--sh-4)}
.showpiece__phone img{width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;
  object-position:top center;border-radius:10px;display:block}
.showpiece__tag{position:absolute;left:0;bottom:1%;display:inline-flex;align-items:center;
  gap:7px;padding:7px 13px;border-radius:var(--r-pill);background:rgba(255,255,255,.94);
  border:1px solid var(--line);box-shadow:var(--sh-2);font-size:.74rem;font-weight:600;
  letter-spacing:.04em;color:var(--muted);backdrop-filter:blur(8px)}

.hero__price{margin-top:22px;font-size:.9rem;color:var(--muted);line-height:1.6}
.hero__price svg{display:inline-block;vertical-align:-2px;margin-right:7px;color:var(--ok)}
.hero__price b{color:var(--text);font-weight:600}

.sec--conceptintro{padding-bottom:clamp(18px,2.4vw,30px)}

/* ------------------------------------------------------------- flagships -- */
.flagship{padding-block:clamp(40px,5.5vw,84px)}
.flagship__in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,4vw,64px);align-items:center}
.flagship--mirrored .flagship__media{order:-1}
.flagship__kicker{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.flagship__num{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:.9;letter-spacing:-.04em;
  /* --line-strong reads as 1.48:1 here. These numerals carry the sequence, so
     they are text, not decoration: 3.37:1 clears AA for large text while
     staying recessive against the title. */
  color:#7E8DA3}
.flagship__label{font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue)}
.flagship__title{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:14px}
.flagship__copy .lede{margin-bottom:18px}
.flagship__copy .tags{margin-bottom:20px}
.flagship__nolive{font-size:.88rem;color:var(--dim)}

/* Explore-all link: replaces what used to be a full "more concepts" grid
   section with one line, so the concept area ends the moment the featured
   three are shown. */
.sec--exploreall{padding-block:22px}
.sec__more--center{text-align:center}

/* Rail position dots, injected by site.js. The rail is only a carousel below
   900px, so above that the dots would point at a stack that does not move.
   The hit area is 24x24 (WCAG 2.5.8) while the dot itself stays small. */
.rail-nav{display:none}
@media (max-width:1023px){
  .rail-nav{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:14px}
  .rail-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
    display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .rail-dot::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);
    background:var(--line-strong);
    transition:width var(--t2) var(--ease),background var(--t2) var(--ease)}
  .rail-dot[aria-current="true"]::before{width:18px;background:var(--blue)}
}

/* ============================================================ real work ==
   Written mobile-first: everything above the min-width query is the phone
   layout, and desktop is purely additive. A change to the phone rules cannot
   reach desktop, and a change inside the query cannot reach the phone. */
.kv-work{display:grid;gap:14px}
.kv-work__feature{display:block;background:var(--page);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1);
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.kv-work__feature:hover{border-color:var(--blue-line);box-shadow:var(--sh-3)}
.kv-work__shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--alt)}
.kv-work__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform var(--t3) var(--ease)}
.kv-work__feature:hover .kv-work__shot img{transform:scale(1.02)}
.kv-work__body{display:flex;flex-direction:column;gap:5px;padding:18px}
.kv-work__cat{font-size:.7rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim)}
.kv-work__name{font-family:var(--display);font-weight:700;font-size:1.15rem;
  letter-spacing:-.02em;color:var(--text)}
.kv-work__sum{font-size:.88rem;line-height:1.55;color:var(--muted)}
.kv-work__cue{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:.86rem;font-weight:600;color:var(--blue)}
.kv-work__feature:hover .kv-work__cue svg{transform:translateX(3px)}
.kv-work__cue svg{transition:transform var(--t2) var(--ease)}
.kv-work__rows{display:grid;gap:8px}
.kv-work__row{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 12px;
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-m);
  transition:border-color var(--t1) var(--ease)}
.kv-work__row:hover{border-color:var(--blue-line)}
.kv-work__rowshot{flex:none;width:64px;aspect-ratio:16/10;border-radius:var(--r-s);
  overflow:hidden;background:var(--alt)}
.kv-work__rowshot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.kv-work__rowtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.kv-work__row .kv-work__name{font-size:.92rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kv-work__row>svg{flex:none;color:var(--blue)}
@media (min-width:1024px){
  /* One dominant project, the others stacked beside it as real cards. */
  /* Both columns run to the same height. With align-items:start the feature
     stopped at its natural height while the two cards beside it carried on,
     leaving a block of empty page under it. The screenshots absorb the slack
     instead, which also makes the featured shot the largest on the row. */
  .kv-work{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;
    align-items:stretch}
  .kv-work__feature{display:flex;flex-direction:column}
  .kv-work__shot{flex:1 1 auto;aspect-ratio:auto;min-height:260px}
  .kv-work__body{padding:22px 24px;gap:6px;flex:0 0 auto}
  .kv-work__name{font-size:1.3rem}
  /* Two equal rows, so the pair beside the feature divides the same height
     rather than stacking to whatever their images happen to add up to. */
  .kv-work__rows{gap:14px;align-content:stretch;grid-auto-rows:1fr}
  .kv-work__row{flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;
    overflow:hidden;border-radius:var(--r-l)}
  .kv-work__rowshot{width:100%;aspect-ratio:auto;flex:1 1 auto;min-height:0;border-radius:0}
  .kv-work__rowtext{padding:14px 18px;gap:3px}
  .kv-work__row .kv-work__name{font-size:1.02rem}
  .kv-work__row>svg{display:none}
}

/* ================================================== why + process ======= */
.kv-wp{display:grid;gap:34px}
.kv-wp__h{font-size:1.05rem;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--line-strong)}
.kv-wp__whys{display:grid;gap:13px;margin-bottom:18px}
.kv-wp__why{display:flex;gap:10px;align-items:flex-start}
.kv-wp__why svg{flex:none;margin-top:3px;color:var(--ok, #16a34a)}
.kv-wp__why b{display:block;font-weight:600;font-size:.94rem;color:var(--text)}
.kv-wp__why span span,.kv-wp__why>span>:not(b){font-size:.85rem}
.kv-wp__why>span{font-size:.85rem;line-height:1.55;color:var(--muted)}
.kv-wp__steps{display:grid;gap:0;margin-bottom:18px}
.kv-wp__step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.kv-wp__step:last-child{border-bottom:0}
.kv-wp__n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.76rem;
  background:var(--blue-tint);color:var(--blue)}
.kv-wp__stext{display:flex;flex-direction:column;gap:3px;min-width:0}
.kv-wp__stext b{font-weight:600;font-size:.94rem;color:var(--text)}
.kv-wp__stext span{font-size:.85rem;line-height:1.55;color:var(--muted)}
@media (min-width:1024px){
  .kv-wp{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px)}
  .kv-wp__whys{gap:16px}
}

/* -------------------------------------------------------- compact offer -- */
/* One plan, not a five-card table: the full table stays on /pricing/. */
.offer{max-width:520px;margin-inline:auto;position:relative;background:var(--page);
  border:1px solid var(--line);border-radius:var(--r-l);padding:30px 26px;
  box-shadow:var(--sh-2)}
.offer__badge{position:absolute;top:-11px;left:26px;background:var(--blue);color:#fff;
  font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:var(--r-pill)}
.offer__name{margin-bottom:4px}
.offer__for{font-size:.86rem;color:var(--dim);margin-bottom:16px}
.offer__price{font-family:var(--display);font-weight:800;font-size:2.15rem;
  letter-spacing:-.03em;color:var(--text);line-height:1.1;margin-bottom:2px}
.offer__from{display:block;font-size:.72rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);font-family:var(--body)}
.offer__note{font-size:.82rem;color:var(--dim);margin-bottom:18px;padding-bottom:18px;
  border-bottom:1px solid var(--line)}
.offer .ticks{margin-bottom:22px}
.offer__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
@media (min-width:1024px){
  /* An editorial split rather than a single card marooned in a wide band:
     the offer on one side, what it means on the other. */
  /* column-gap only: a plain `gap` also spaces the six stacked rows of the
     left column, which pulled the offer apart into a column of islands. */
  .offer{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
    column-gap:clamp(32px,4vw,64px);row-gap:0;align-content:center;
    grid-auto-rows:min-content;padding:40px clamp(32px,3.4vw,48px)}
  .offer__badge{left:clamp(32px,3.4vw,48px)}
  .offer__name{grid-column:1;font-size:1.35rem}
  .offer__for,.offer__price,.offer__note,.offer .ticks{grid-column:1}
  .offer__for{margin-bottom:18px}
  .offer__price{margin-bottom:4px}
  .offer__note{margin-bottom:18px}
  .offer__price{font-size:2.6rem}
  .offer__note{margin-bottom:0;padding-bottom:0;border-bottom:0}
  .offer .ticks{margin-bottom:0}
  .offer__actions{grid-column:2;grid-row:1/-1;flex-direction:column;
    align-items:flex-start;gap:14px;padding-left:clamp(32px,4vw,64px);
    border-left:1px solid var(--line);align-self:stretch;justify-content:center}
  .offer__actions .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------ compact process -- */
/* Numbered labels only; what each stage actually involves is on /process/. */
.pcompact{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pcompact__step{display:flex;align-items:flex-start;gap:10px;padding:16px;
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-m)}
.pcompact__n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;
  place-items:center;font-family:var(--display);font-weight:800;font-size:.78rem;
  background:var(--blue-tint);color:var(--blue)}
.pcompact__b{display:flex;flex-direction:column;gap:3px;min-width:0}
.pcompact__t{font-weight:600;font-size:.86rem;color:var(--text);line-height:1.3}
.pcompact__d{font-size:.8rem;line-height:1.5;color:var(--muted)}
@media (max-width:1023px){.pcompact{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.pcompact{grid-template-columns:1fr}}

/* --------------------------------------------------- compact "why" list -- */
/* Label plus one line each: compact enough to stay a list, complete enough
   that the point is made here rather than only on /about/. */
.ticks--grid{grid-template-columns:repeat(2,1fr);gap:14px 26px;align-items:start}
.ticks--grid li{align-items:flex-start}
.ticks--grid b{display:block;font-weight:600;color:var(--text);margin-bottom:2px}
.ticks--grid span{font-size:.84rem;line-height:1.55;color:var(--muted)}
@media (max-width:767px){.ticks--grid{grid-template-columns:1fr}}

/* One sentence naming the services that do not get a card, so they keep a
   link from the body and not only from the footer. */
.sec__also{margin-top:18px;font-size:.9rem;color:var(--muted);max-width:62ch}
/* Inline links in a sentence are only as tall as the text (17px), which is
   under the 24x24 minimum. The padding buys the hit area, the negative
   margin keeps the line box - and so the sentence - exactly as it was. */
.sec__also a{color:var(--blue);font-weight:600;display:inline-block;
  padding-block:5px;margin-block:-5px}
.sec__also a:hover{text-decoration:underline}


@media (max-width:1023px){
  .flagship__in{grid-template-columns:1fr;gap:22px}
  .flagship--mirrored .flagship__media{order:0}
  .flagship__media{order:0}
  /* On a phone the image is the argument, so it leads. */
  .flagship__copy{order:1}
  .showpiece{padding-bottom:9%}
  .showpiece__phone{width:25%;right:-2%;bottom:-4%}

  /* Same 3 <section> elements, same content, no duplication: on a phone the
     stack becomes a horizontal swipe rail instead. A bare, unstyled div has
     no effect on desktop layout, so nothing above this block needs to change
     to support it. */
    /* gap == gutter, so the next card starts exactly at the viewport edge and
     no sliver of it shows beside the current one. */
.flagship-rail{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;
    /* Without this the snap point is the container's border edge, not its
       padding edge, so every card parked itself underneath the left gutter
       and had its numeral, title and link sliced off. */
    scroll-padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
    /* No negative margin: the rail is already a full-width child of <main>,
       so pulling it wider than the viewport only pushed the card text flush
       against both screen edges. The padding is the page gutter. */
    padding-inline:var(--gutter);padding-block:4px}
  .flagship-rail::-webkit-scrollbar{display:none}
  /* One whole card per screen. 100% resolves against the rail's content box,
     which the gutter padding has already narrowed to the readable column, so
     a card is never wider than the space it is allowed to occupy. */
  .flagship-rail .flagship{flex:0 0 100%;scroll-snap-align:start;padding-block:0}
  .flagship-rail .flagship__in{display:flex;flex-direction:column;gap:12px;
    max-width:none;padding-inline:0;margin-inline:0}
  .flagship-rail .flagship__media{order:0}
  .flagship-rail .flagship__copy{order:1}
  .flagship-rail .flagship__kicker{margin-bottom:6px}
  .flagship-rail .flagship__num{font-size:1.8rem}
  .flagship-rail .flagship__title{font-size:1.15rem;margin-bottom:6px}
  /* Two lines is enough to identify the concept; the full description reads
     naturally once a visitor taps through to the live demo. */
  .flagship-rail .flagship__copy .lede{font-size:.85rem;margin-bottom:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .flagship-rail .flagship__copy .tags{display:none}
  .flagship-rail .link{margin-top:10px}
  .flagship-rail .showpiece{padding-bottom:0}
  .flagship-rail .showpiece__phone{display:none}
}
@media (max-width:767px){
  .flagship{padding-block:30px}
  .flagship__kicker{gap:10px;margin-bottom:10px}
  .flagship__num{font-size:2.2rem}
  .showpiece__tag{font-size:.68rem;padding:6px 11px}
}