/* ============================================================================
   Concept 02 — "Deep Tech". Dark-first, immersive, centred.
   Same brand tokens as concept 01; this sheet only changes the treatment.
   Ships light too — the toggle is real, and every rule is theme-safe.
   ========================================================================== */

:root{
  --mark-cut:var(--paper);
  --island-bg:rgba(255,255,255,.72);
  --island-line:var(--line);
  --panel-bg:var(--surface);
  --panel-line:var(--line);
  --beam-1:rgba(37,99,235,.34);
  --beam-2:rgba(14,165,233,.26);
  --hero-fade:var(--paper);
  --ticker-ink:var(--faint);
}
:root[data-theme="dark"]{
  --island-bg:rgba(12,20,66,.72);
  --island-line:rgba(120,160,250,.22);
  --panel-bg:rgba(12,20,66,.70);
  --panel-line:rgba(120,160,250,.20);
  --beam-1:rgba(37,99,235,.62);
  --beam-2:rgba(14,165,233,.40);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --island-bg:rgba(12,20,66,.72);
    --island-line:rgba(120,160,250,.22);
    --panel-bg:rgba(12,20,66,.70);
    --panel-line:rgba(120,160,250,.20);
    --beam-1:rgba(37,99,235,.62);
    --beam-2:rgba(14,165,233,.40);
  }
}

body{background:var(--paper);}

/* ── Island header ──────────────────────────────────────────────────────── */
.header{
  position:sticky;top:0;z-index:var(--z-sticky);
  padding-top:calc(var(--s3) + var(--safe-t));
  padding-bottom:var(--s3);
  transition:padding var(--t-base) var(--ease);
}
.island{
  display:flex;align-items:center;gap:var(--s4);
  min-height:64px;padding:8px 8px 8px 16px;
  border-radius:var(--radius-pill);
  background:var(--island-bg);
  border:1px solid var(--island-line);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:box-shadow var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
/* Without backdrop-filter the translucent bar is unreadable — go solid. */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .island{background:var(--surface);}
}
.header.scrolled .island{box-shadow:var(--shadow-lg);}
.island .logo{--mark-cut:var(--surface);margin-inline-end:auto;}
:root[data-theme="dark"] .island .logo{--mark-cut:var(--surface);}

.nav-desk{display:none;align-items:center;gap:2px;}
.nav-desk a{
  padding:9px 16px;border-radius:var(--radius-pill);
  font-weight:600;font-size:15px;color:var(--dim);text-decoration:none;
  transition:color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.nav-desk a:hover{color:var(--ink);background:var(--hover);text-decoration:none;}
.nav-desk a.current{color:var(--accent);background:var(--accent-w);}

.header-actions{display:flex;align-items:center;gap:var(--s2);}
.header-cta{display:none;}
.island .icon-btn{background:transparent;border-color:var(--island-line);}
.island .icon-btn:hover{background:var(--hover);}
.icon-btn .i-moon{display:none;}
:root[data-theme="dark"] .icon-btn .i-sun{display:none;}
:root[data-theme="dark"] .icon-btn .i-moon{display:block;}

@media (min-width:1024px){
  .nav-desk{display:flex;}
  .header-cta{display:inline-flex;}
  .menu-btn{display:none;}
}
@media (min-width:640px) and (max-width:1023.98px){
  .header-cta{display:inline-flex;}
}

/* ── Drawer ─────────────────────────────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);
  background:var(--scrim);opacity:0;pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.scrim.on{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;inset:0 0 0 auto;z-index:var(--z-drawer);
  width:min(360px,88vw);
  display:flex;flex-direction:column;gap:2px;
  padding:calc(var(--s4) + var(--safe-t)) var(--s4) calc(var(--s5) + var(--safe-b));
  background:var(--surface);
  border-inline-start:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease-out);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.open{transform:none;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4);}
.drawer-title{font:700 12px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.drawer>a{
  display:flex;align-items:center;gap:var(--s4);min-height:52px;
  padding:12px var(--s3);border-radius:var(--radius);
  font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-soft);
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.drawer>a:hover,.drawer>a.current{background:var(--accent-w);color:var(--accent);text-decoration:none;}
.drawer .dn{font:700 11px/1 var(--fm);color:var(--faint);letter-spacing:.1em;}
.drawer-cta{margin-top:var(--s5);justify-content:center;border-bottom:0;}
.drawer-cta:hover{background:var(--btn-bg);color:var(--btn-fg);}
.drawer-foot{
  margin-top:auto;padding-top:var(--s5);
  display:flex;flex-direction:column;gap:6px;font-size:14px;
}
.drawer-foot a{color:var(--dim);}
@media (min-width:1024px){.drawer,.scrim{display:none;}}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  margin-top:calc(-1 * (64px + var(--s3) * 2 + var(--safe-t)));
  padding-top:calc(64px + var(--s3) * 2 + var(--safe-t) + clamp(48px,7vw,104px));
  padding-bottom:clamp(56px,7vw,96px);
  overflow:hidden;
  text-align:center;
}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--grid-ink) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-ink) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 25%,var(--mask-ink) 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 25%,var(--mask-ink) 0%,transparent 78%);
}
.beam{position:absolute;border-radius:50%;filter:blur(90px);}
.beam-1{
  width:min(760px,120vw);height:min(560px,80vw);
  top:-24%;left:50%;transform:translateX(-50%);
  background:var(--beam-1);
  animation:drift 16s var(--ease) infinite alternate;
}
.beam-2{
  width:min(620px,100vw);height:min(460px,70vw);
  bottom:-22%;right:-10%;
  background:var(--beam-2);
  animation:drift 20s var(--ease) infinite alternate-reverse;
}
@keyframes drift{
  from{transform:translate(-50%,0) scale(1);}
  to{transform:translate(-50%,26px) scale(1.09);}
}
.beam-2{animation-name:drift2;}
@keyframes drift2{from{transform:translate(0,0) scale(1);}to{transform:translate(-32px,-22px) scale(1.12);}}

.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--accent-w);border:1px solid var(--accent-b);
  font:600 13px/1 var(--f);color:var(--accent);letter-spacing:.04em;
  max-width:100%;
}
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 var(--accent-b);
  animation:pulse 2.2s var(--ease-out) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--accent-b);}
  70%{box-shadow:0 0 0 10px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}

.hero h1{
  font-size:var(--fs-display);
  margin-block:var(--s5) var(--s4);
  letter-spacing:-.04em;
  max-width:16ch;
}
.hero .hl{
  background:var(--ribbon);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero .hl{background:none;color:var(--accent);}
}
.hero .lede{margin-inline:auto;text-align:center;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s6);}

.hero-stats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s4) 0;
  margin-top:clamp(40px,5vw,64px);
}
.hero-stats li{
  display:flex;flex-direction:column;gap:4px;
  padding-inline:clamp(18px,4vw,40px);
  min-width:130px;
}
.hero-stats li+li{border-inline-start:1px solid var(--line);}
.hero-stats b{font:800 clamp(1.7rem,1.3rem + 1.4vw,2.3rem)/1 var(--fd);color:var(--ink);letter-spacing:-.03em;}
.hero-stats span{font-size:13px;color:var(--faint);letter-spacing:.05em;}

/* ── Ticker ─────────────────────────────────────────────────────────────── */
.ticker{
  position:relative;margin-top:clamp(40px,5vw,72px);
  padding-block:var(--s4);
  border-block:1px solid var(--line);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,var(--mask-ink) 12%,var(--mask-ink) 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--mask-ink) 12%,var(--mask-ink) 88%,transparent);
}
.ticker-track{
  display:flex;align-items:center;gap:var(--s5);
  width:max-content;
  animation:slide 34s linear infinite;
}
.ticker-track span{
  font:700 clamp(15px,2vw,20px)/1 var(--fd);
  letter-spacing:-.01em;color:var(--ticker-ink);white-space:nowrap;
}
.ticker-track i{color:var(--accent);font-size:10px;font-style:normal;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;}
}

/* ── Section heads ──────────────────────────────────────────────────────── */
.sec-head{max-width:64ch;margin-bottom:clamp(32px,4vw,56px);}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-head.center .eyebrow::before{display:none;}
.sec-head h2{font-size:var(--fs-h1);margin-block:var(--s3) var(--s4);letter-spacing:-.035em;}

/* ── Bento ──────────────────────────────────────────────────────────────── */
.bento{display:grid;gap:var(--s4);grid-template-columns:1fr;}
.bx{
  position:relative;overflow:hidden;min-width:0;
  padding:clamp(22px,2.5vw,30px);
  border-radius:var(--radius-lg);
  background:var(--panel-bg);
  border:1px solid var(--panel-line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--card-shadow);
  transition:transform var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .bx{background:var(--surface);}
}
.bx::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(420px 220px at 80% -10%,var(--accent-w),transparent 70%);
  opacity:0;transition:opacity var(--t-base) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .bx:hover{transform:translateY(-4px);border-color:var(--accent-b);box-shadow:var(--shadow-lg);}
  .bx:hover::after{opacity:1;}
}
.bx-ico{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:52px;height:52px;margin-bottom:var(--s4);
  border-radius:15px;
  background:var(--accent-w);border:1px solid var(--accent-b);
}
.bx-ico svg{width:25px;height:25px;fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.bx h3{position:relative;z-index:1;font-size:var(--fs-h3);margin-bottom:var(--s2);}
.bx p{position:relative;z-index:1;color:var(--dim);font-size:15px;}
.tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4);}
.tags li{
  padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--chip);color:var(--dim);font:600 12px/1.4 var(--f);
}
.bx-accent{
  background:var(--brand-band);border-color:transparent;
}
.bx-accent h3{color:var(--on-brand);}
.bx-accent p{color:var(--on-brand-soft);}
.bx-accent .bx-ico{background:var(--on-brand-wash);border-color:var(--on-brand-line);}
.bx-accent .bx-ico svg{stroke:var(--on-brand);}
.bx-accent .tags li{background:var(--on-brand-wash);color:var(--on-brand);}
.bx-accent::after{display:none;}

.bx-wide-in{position:relative;z-index:1;display:grid;gap:var(--s4);align-items:center;}
.bx-wide-in .btn{justify-self:start;}
@media (max-width:479.98px){.bx-wide-in .btn{justify-self:stretch;}}

@media (min-width:640px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .bx-lg{grid-column:span 2;}
  /* The accent tile spans too, or the last row of the bento leaves a hole:
     2-col → lg(2) · mobile+cloud · cyber(2) · wide(2). No gaps at any width. */
  .bx-accent{grid-column:span 2;}
  .bx-wide{grid-column:span 2;}
  .bx-wide-in{grid-template-columns:1fr auto;}
}
@media (min-width:1024px){
  /* 3-col → lg(2)+mobile · cloud+cyber(2) · wide(3). Every row is full. */
  .bento{grid-template-columns:repeat(3,1fr);}
  .bx-lg{grid-column:span 2;grid-row:span 1;}
  .bx-wide{grid-column:span 3;}
}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.why{
  background:
    radial-gradient(900px 500px at 50% 0%,var(--accent-w),transparent 65%),
    var(--surface-2);
  border-block:1px solid var(--line-soft);
}
.tline{position:relative;max-width:820px;margin-inline:auto;display:grid;gap:var(--s5);}
.tline::before{
  content:"";position:absolute;top:14px;bottom:14px;left:26px;width:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-b),transparent);
  border-radius:2px;
}
.tline li{position:relative;display:flex;gap:var(--s4);align-items:flex-start;min-width:0;}
.tl-ico{
  position:relative;z-index:1;flex:none;
  display:grid;place-items:center;width:54px;height:54px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--accent-b);
  box-shadow:0 0 0 6px var(--paper);
}
.tl-ico svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.tl-body{min-width:0;padding-top:4px;}
.tl-body h3{font-size:var(--fs-h3);margin-bottom:6px;}
.tl-body p{color:var(--dim);font-size:15px;}
@media (min-width:640px){
  .tline{gap:var(--s6);}
  .tl-body{padding-top:8px;}
}

/* ── Process rail ───────────────────────────────────────────────────────── */
.rail{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
}
.rail li{
  min-width:0;padding:var(--s5);
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
}
.rail-n{display:block;font:800 12px/1 var(--fm);letter-spacing:.16em;color:var(--accent);margin-bottom:var(--s3);}
.rail h3{font-size:var(--fs-h3);margin-bottom:var(--s2);}
.rail p{color:var(--dim);font-size:15px;}
.rail:focus-visible{outline:2px solid var(--accent);outline-offset:6px;}

/* ── About ──────────────────────────────────────────────────────────────── */
.about{border-block:1px solid var(--line-soft);background:var(--surface-2);}
.about-in{display:grid;gap:clamp(32px,4vw,56px);align-items:center;}
.about-copy{min-width:0;}
.about-copy h2{font-size:var(--fs-h1);margin-block:var(--s3) var(--s4);}
.quote{
  margin-top:var(--s5);padding:var(--s4) var(--s5);
  border-left:3px solid var(--accent);
  background:var(--accent-w);
  border-radius:0 var(--radius) var(--radius) 0;
}
.quote p{font-size:var(--fs-lead);color:var(--ink);font-style:italic;}

.dir-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));}
.dir{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;
  padding:var(--s5);border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--card-shadow);
}
.dir b{font-size:16px;line-height:1.3;overflow-wrap:anywhere;}
.dir .role{font:600 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.dir a{margin-top:var(--s2);font-weight:600;font-size:15px;}
.avatar{
  display:grid;place-items:center;
  width:52px;height:52px;margin-bottom:var(--s3);
  border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);
  font:800 20px/1 var(--fd);
}
@media (min-width:1024px){
  .about-in{grid-template-columns:1.15fr .85fr;}
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact{position:relative;overflow:hidden;}
.contact-hero{text-align:center;margin-bottom:clamp(32px,4vw,56px);}
.contact-hero .eyebrow::before{display:none;}
.contact-hero h2{font-size:var(--fs-h1);margin-block:var(--s3) var(--s5);}
.big-mail{
  display:inline-block;
  font:800 clamp(1.05rem,.8rem + 1.6vw,2rem)/1.2 var(--fd);
  letter-spacing:-.03em;color:var(--accent);
  padding-bottom:6px;
  border-bottom:2px solid var(--accent-b);
  text-decoration:none;
  transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
  max-width:100%;
}
.big-mail:hover{color:var(--accent-2);border-bottom-color:var(--accent);text-decoration:none;}

.contact-in{display:grid;gap:var(--s4);align-items:start;}
.panel{
  min-width:0;padding:clamp(22px,2.6vw,32px);
  border-radius:var(--radius-lg);
  background:var(--panel-bg);
  border:1px solid var(--panel-line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--card-shadow);
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .panel{background:var(--surface);}
}
.panel h3{font-size:var(--fs-h3);margin-bottom:var(--s5);}

.contact-form{display:grid;gap:var(--s4);}
.field{display:grid;gap:6px;min-width:0;}
.field label{font:600 13px/1 var(--f);color:var(--dim);}
.field input,.field select,.field textarea{
  width:100%;min-width:0;padding:13px 14px;
  background:var(--field);border:1px solid var(--line-2);
  border-radius:var(--radius);color:var(--ink);
  font-size:16px;              /* never below 16 — iOS zooms the page on focus */
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.field textarea{resize:vertical;min-height:110px;}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-w);
  background:var(--field-focus);
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,var(--dim) 50%,var(--dim) 62%,transparent 63%),
                   linear-gradient(-45deg,transparent 49%,var(--dim) 50%,var(--dim) 62%,transparent 63%);
  background-size:9px 9px,9px 9px;
  background-position:right 20px center,right 13px center;
  background-repeat:no-repeat;padding-right:42px;
}
.field-row{display:grid;gap:var(--s4);}
@media (min-width:480px){.field-row{grid-template-columns:1fr 1fr;}}

.form-submit{justify-self:start;}
@media (max-width:479.98px){.form-submit{justify-self:stretch;}}
.form-submit .spinner{
  width:16px;height:16px;flex:none;display:none;
  border:2px solid var(--spinner-track);border-top-color:currentColor;
  border-radius:50%;animation:spin .7s linear infinite;
}
.form-submit.is-loading .spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}
.form-note{
  padding:12px 14px;border-radius:var(--radius);
  background:var(--ok-w);color:var(--ok);font-size:14px;font-weight:600;
}
.form-note:focus{outline:2px solid var(--accent);outline-offset:2px;}

.cl{display:grid;gap:var(--s5);}
.cl li{display:grid;gap:3px;min-width:0;}
.cl-k{font:700 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.cl-v{font-size:15px;line-height:1.6;color:var(--ink);}
a.cl-v{color:var(--accent);font-weight:600;}

@media (min-width:900px){
  .contact-in{grid-template-columns:1.15fr .85fr;gap:var(--s5);}
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer{
  background:var(--navy-900);color:var(--on-brand-ink);
  padding-block:clamp(40px,5vw,72px) 0;
}
.footer .logo{--mark-cut:var(--navy-900);}
.footer .logo .word b{color:var(--on-brand);}
.footer .logo .word span{color:var(--blue-200);}
.footer-top{
  display:grid;gap:var(--s6) var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  padding-bottom:var(--s7);
}
.footer-brand{grid-column:1/-1;max-width:34ch;}
.footer-brand p{margin-top:var(--s4);font-size:14px;color:var(--blue-200);}
.footer-col{display:flex;flex-direction:column;gap:10px;min-width:0;}
.footer-col h4{font:700 12px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--on-brand);margin-bottom:var(--s2);}
.footer-col a{color:var(--blue-200);font-size:14px;transition:color var(--t-base) var(--ease);}
.footer-col a:hover{color:var(--on-brand);}
.footer-addr{font-size:14px;color:var(--blue-200);line-height:1.7;}
.footer-bot{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  justify-content:space-between;align-items:center;
  padding-block:var(--s5);padding-bottom:calc(var(--s5) + var(--safe-b));
  border-top:1px solid var(--brand-hairline);
  font-size:13px;color:var(--blue-200);
}
.footer-preview{
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--brand-chip);color:var(--on-brand);font-weight:600;
}
@media (min-width:900px){
  .footer-brand{grid-column:auto;}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr 1.2fr;}
}

/* ── Touch targets ───────────────────────────────────────────────────────
   Standalone links need a real 44px target on coarse pointers. Gated on
   pointer type, never width — iPad Pro landscape is 1366px with no hover.  */
.nav-desk a,
.drawer-foot a,
.footer-col a,
.cl a,
.dir a,
.about-facts dd a,
.big-mail{
  display:inline-flex;align-items:center;
  min-height:24px;              /* WCAG 2.5.8 floor, mouse included */
}
.big-mail{align-items:flex-end;}
@media (pointer:coarse){
  .nav-desk a,
  .drawer-foot a,
  .footer-col a,
  .cl a,
  .dir a,
  .about-facts dd a,
  .big-mail{min-height:var(--tap);}
}
.nav-desk a{min-height:44px;}

/* ── Short viewports ────────────────────────────────────────────────────── */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:calc(64px + var(--s5));padding-bottom:var(--s6);}
  .hero-stats{margin-top:var(--s5);}
}

/* ============================================================================
   Inner pages — added when the concept became a multi-page PHP site.
   ========================================================================== */

/* ── Page head — the compact hero every inner page opens with ───────────── */
.page-head{
  position:relative;overflow:hidden;text-align:center;
  /* Slide under the transparent island header, same trick as .hero. */
  margin-top:calc(-1 * (64px + var(--s3) * 2 + var(--safe-t)));
  padding-top:calc(64px + var(--s3) * 2 + var(--safe-t) + clamp(36px,5vw,72px));
  padding-bottom:clamp(36px,5vw,64px);
  border-bottom:1px solid var(--line-soft);
}
.page-head-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.page-head-in{position:relative;}
.page-head h1{
  font-size:var(--fs-h1);letter-spacing:-.04em;
  margin-block:var(--s4) var(--s4);
  margin-inline:auto;max-width:18ch;
}
.page-head .lede{margin-inline:auto;text-align:center;}
.page-head .big-mail{margin-top:var(--s3);}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2);
  font:600 12px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}
.crumbs a{color:var(--accent);text-decoration:none;min-height:24px;display:inline-flex;align-items:center;}
@media (pointer:coarse){
  .crumbs a{min-height:var(--tap);}
}
.crumbs a:hover{text-decoration:underline;}
.crumbs span[aria-hidden]{opacity:.5;}

/* ── "See more" row under a section ─────────────────────────────────────── */
.sec-more{margin-top:clamp(28px,3vw,44px);}
.sec-head.center + .tline + .sec-more,
.sec-more{display:flex;justify-content:center;}
.about-copy .sec-more,
.svc-detail-copy .sec-more{justify-content:flex-start;}
@media (max-width:479.98px){
  .sec-more{display:block;}
}

/* Service card headings become links on the home page. The ::after stretches
   the hit area over the whole card — a 21px line of text is a poor target,
   and the card already reads as one clickable unit. */
.bx-link{
  display:inline-flex;align-items:center;min-height:24px;
  color:inherit;text-decoration:none;
}
.bx-link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;}
.bx-link:hover{color:var(--accent);text-decoration:none;}
.bx-accent .bx-link:hover{color:var(--on-brand);text-decoration:underline;}
@media (pointer:coarse){
  .bx-link{min-height:var(--tap);}
}

/* ── Services index ─────────────────────────────────────────────────────── */
.svc-index-sec{padding-block:clamp(32px,4vw,56px);}
/* 200px floor so all five fit on one row inside --container-max, instead of
   wrapping four-plus-one. */
.svc-index{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
}
.svc-index a{
  display:flex;align-items:center;gap:var(--s3);
  min-height:var(--tap);padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);text-decoration:none;
  transition:border-color var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease),
             transform var(--t-base) var(--ease-out);
}
.svc-index-n{font:700 11px/1 var(--fm);letter-spacing:.12em;color:var(--accent);flex:none;}
.svc-index-t{font-weight:700;font-size:15px;min-width:0;}
.svc-index svg{
  width:18px;height:18px;flex:none;margin-inline-start:auto;
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
@media (hover:hover) and (pointer:fine){
  .svc-index a:hover{border-color:var(--accent-b);background:var(--accent-w);transform:translateY(-2px);}
}

/* ── Service / step detail ──────────────────────────────────────────────── */
.svc-detail,.step-detail{scroll-margin-top:calc(64px + var(--s5));}
.svc-detail.is-alt,.step-detail.is-alt{
  background:var(--surface-2);
  border-block:1px solid var(--line-soft);
}
.svc-detail-in,.step-detail-in{
  display:grid;gap:clamp(28px,4vw,56px);align-items:start;
}
.svc-detail-copy,.step-detail-copy{min-width:0;position:relative;}
.svc-detail-copy h2,.step-detail-copy h2{font-size:var(--fs-h1);margin-block:var(--s3) var(--s4);}
.svc-detail-body,.step-body{color:var(--dim);margin-top:var(--s4);max-width:62ch;}
.svc-detail-copy .tags{margin-top:var(--s5);}
.svc-detail-copy .bx-ico{margin-bottom:var(--s4);}

/* The oversized stage numeral behind each process step. */
.step-big{
  position:absolute;top:-.35em;right:0;
  font:800 clamp(5rem,14vw,9rem)/1 var(--fd);
  letter-spacing:-.06em;color:var(--accent);
  opacity:.09;pointer-events:none;user-select:none;
}

.svc-detail-list h3,.step-detail-list h3{
  font:700 11px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s4);
}
.ticks{display:grid;gap:var(--s3);}
.ticks li{display:flex;gap:var(--s3);align-items:flex-start;min-width:0;font-size:15px;color:var(--dim);}
.ticks svg{
  width:18px;height:18px;flex:none;margin-top:3px;padding:2px;
  border-radius:var(--radius-pill);background:var(--accent-w);
  fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
@media (min-width:1024px){
  .svc-detail-in,.step-detail-in{grid-template-columns:1.15fr .85fr;}
}

/* Ground-rules block reuses .rail but with <article> children. */
.rail>li,.rail>article{
  min-width:0;padding:var(--s5);
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
}
.rail>article h3{font-size:var(--fs-h3);margin-bottom:var(--s2);}
.rail>article p{color:var(--dim);font-size:15px;}

.tl-short{color:var(--ink);font-weight:600;margin-bottom:var(--s2);}

/* ── Offices ────────────────────────────────────────────────────────────── */
.offices-sec{border-top:1px solid var(--line-soft);}
.offices{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.office{
  min-width:0;padding:clamp(22px,2.6vw,32px);
  border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--card-shadow);
  transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out);
}
.office-ico{
  display:grid;place-items:center;
  width:48px;height:48px;margin-bottom:var(--s4);
  border-radius:14px;background:var(--accent-w);border:1px solid var(--accent-b);
}
.office-ico svg{
  width:23px;height:23px;fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.office-kind{
  font:700 11px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;
}
.office h3{font-size:var(--fs-h3);margin-bottom:var(--s3);}
.office address{font-style:normal;color:var(--dim);font-size:15px;line-height:1.7;}
.office-map,.cl-map{
  display:inline-flex;align-items:center;gap:7px;
  min-height:var(--tap);margin-top:var(--s3);
  font:700 14px/1 var(--f);color:var(--accent);text-decoration:none;
}
.office-map svg,.cl-map svg{
  width:15px;height:15px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-base) var(--ease-out);
}
.office-map:hover,.cl-map:hover{text-decoration:underline;}
.office-map:hover svg,.cl-map:hover svg{transform:translate(2px,-2px);}
.cl-map{min-height:24px;margin-top:6px;font-size:13px;}
.cl address.cl-v{font-style:normal;}
@media (hover:hover) and (pointer:fine){
  .office:hover{border-color:var(--accent-b);transform:translateY(-3px);}
}

.dir-grid-wide{max-width:760px;margin-inline:auto;}

.about-facts dl{display:grid;gap:var(--s4);}
.about-facts h3{
  font:700 11px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s4);
}
.about-facts dt{
  font:700 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px;
}
.about-facts dd{font-size:15px;line-height:1.6;color:var(--dim);}

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band{
  background:var(--brand-band);
  color:var(--on-brand);
  padding-block:clamp(40px,5vw,72px);
}
.cta-in{display:grid;gap:var(--s5);align-items:center;}
.cta-band h2{color:var(--on-brand);font-size:var(--fs-h2);}
.cta-band p{color:var(--on-brand-soft);margin-top:var(--s2);max-width:56ch;}
.cta-in .btn-row{margin-top:0;justify-content:flex-start;}
.cta-primary{background:var(--on-brand);color:var(--navy-700);box-shadow:none;}
.cta-primary:hover{background:var(--blue-100);}
@media (min-width:900px){
  .cta-in{grid-template-columns:1fr auto;}
  .cta-in .btn-row{justify-content:flex-end;}
}

/* ── Footer offices ─────────────────────────────────────────────────────── */
.footer-offices{
  display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  padding-block:var(--s5);
  border-top:1px solid var(--brand-hairline);
}
.foffice h4{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  font:700 11px/1.4 var(--f);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-brand);margin-bottom:var(--s2);
}
.foffice h4 span{
  font-size:11px;letter-spacing:.1em;color:var(--blue-400);
}
.foffice p{font-size:14px;line-height:1.7;color:var(--blue-200);}

/* ── Form states ────────────────────────────────────────────────────────── */
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-note{
  padding:12px 14px;border-radius:var(--radius);
  font-size:14px;font-weight:600;line-height:1.6;
}
.form-note.is-ok{background:var(--ok-w);color:var(--ok);}
.form-note.is-warn{background:var(--warn-w);color:var(--warn);}
.form-note.is-error{background:var(--danger-w);color:var(--danger);}
.form-note a{color:inherit;text-decoration:underline;font-weight:700;}

.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:var(--danger);}
.field.has-error input:focus,
.field.has-error textarea:focus{box-shadow:0 0 0 4px var(--danger-w);}
.field-error{font-size:13px;font-weight:600;color:var(--danger);}

/* ── Reduced motion for the added pieces ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .step-big{opacity:.06;}
}