/* ==== about.css · layer 1 of 2 ==== */
/* ==========================================================================
   ABOUT US — THREE DIRECTIONS · SHARED SHELL
   ==========================================================================
   Preview only. Nothing here is linked from a live page.

   Every token, the header and the footer are copied from the live site
   (index.html for the reference values, google-ads.html for the
   internal-page header/footer, assets/shared/design/system.css for the scale) so all three
   directions sit inside the same brand. What differs between the three is
   composition, hierarchy and interaction — never the paint.

   Light theme only: the sole legal grounds are the ladder in section 1.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS — index.html :root, verbatim
   ========================================================================== */
:root{
  color-scheme: light;

  --paper:  #FFFFFF;
  --ink:    #0B0D12;
  --ink-2:  #3A414C;
  --ink-3:  #767E8B;
  --ink-4:  #A7AEB9;
  --line:   #E3E6EB;
  --line-2: #EFF1F4;
  --line-b: #DEE5F1;
  --gridline: rgba(11,13,18,.028);

  /* the light ground ladder — the only backgrounds a section may take */
  --pale:     #FCFDFF;
  --mist:     #F6F8FC;
  --ground:   #F4F7FC;
  --ground-2: #EDF2F9;
  --tint:     #EEF4FE;
  --tint-2:   #F5F9FF;
  --edge:     #CFE0FD;

  --g-blue:   #1A73E8;
  --g-green:  #188038;
  --g-yellow: #E37400;

  --accent:      #1A73E8;
  --accent-ink:  #1663CE;
  --accent-soft: #EAF1FE;

  --brand: #0B57F5;
  --navy:  #0F1B3D;

  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-xl: 26px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-xs: 9px;
  --shadow-s: 0 1px 2px rgba(11,13,18,.035), 0 6px 18px rgba(15,27,61,.045);
  --shadow-m: 0 2px 6px rgba(11,13,18,.045), 0 16px 36px rgba(15,27,61,.085);
  --ease: cubic-bezier(.4,0,.2,1);

  --pad:  clamp(18px, 4vw, 72px);
  --gut:  18px;
  --barh: 66px;

  /* the one content lane these three pages share — wider than the service
     pages because the brief asks for full-page compositions */
  --ab3-lane: min(1440px, 100% - (2 * var(--pad)));

  /* the type scale, prefixed so nothing here can collide with a page token */
  --ab3-h1:  clamp(33px, min(5vw, 7.4vh), 74px);
  --ab3-h2:  clamp(30px, 4.3vw, 62px);
  --ab3-h3:  clamp(21px, 2.4vw, 33px);
  --ab3-sub: clamp(15.5px, 1.2vw, 18px);
  --ab3-eye: 11px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  padding-top: var(--barh);
}
a{ color: inherit; text-decoration: none; }
img, svg{ display: block; max-width: 100%; }
p{ margin: 0; }
h1, h2, h3, h4{ margin: 0; font-weight: 800; letter-spacing: -.04em; text-wrap: balance; }
h1 i, h2 i, h3 i, h4 i{ font-style: normal; color: var(--accent); }
button{ font: inherit; color: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden]{ display: none !important; }
.vh{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
section{ scroll-margin-top: calc(var(--barh) + 8px); }

.ab3-lane{ width: var(--ab3-lane); margin-inline: auto; }

/* ==========================================================================
   2 · HEADER — verbatim structure from index.html / google-ads.html
   ========================================================================== */
.bar{
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px);
  padding: 15px var(--pad); border-bottom: 1px solid var(--line-2);
  background: var(--paper);
}
.wm{
  display: flex; align-items: center; font-size: 16px; font-weight: 800;
  letter-spacing: -.035em; white-space: nowrap; color: var(--navy);
  flex: 0 1 auto; min-width: 0; overflow: hidden;
}
.mark{ flex: none; display: block; width: 36px; height: 36px; margin-right: 11px; }
.mark svg{ display: block; width: 100%; height: 100%; }
.nav{ margin-left: auto; display: flex; gap: clamp(14px, 2vw, 30px); font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.nav a{ position: relative; padding: 3px 0; transition: color .18s var(--ease); }
.nav a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--accent); transition: right .24s var(--ease);
}
.nav a:hover{ color: var(--ink); }
.nav a:hover::after{ right: 0; }
.nav a.on{ color: var(--accent); font-weight: 650; }
.nav a.on::after{ right: 0; }
.baract{ display: flex; align-items: center; gap: 10px; flex: none; }
.barbtn{
  flex: none; padding: 9px 16px; border-radius: 7px; background: var(--g-blue);
  color: #fff; font-size: 13px; font-weight: 650; white-space: nowrap;
  transition: background .18s var(--ease);
}
.barbtn:hover{ background: var(--accent-ink); }
@media (max-width: 900px){ .nav{ display: none; } }
@media (max-width: 400px){
  .bar{ padding: 12px 12px; gap: 8px; }
  .wm{ font-size: 13.5px; }
  .mark{ width: 28px; height: 28px; margin-right: 8px; }
  .baract{ gap: 6px; margin-left: 6px; }
  .barbtn{ display: inline-flex; align-items: center; height: 33px; padding: 0 11px; font-size: 12px; }
}

/* ==========================================================================
   3 · BUTTONS — the site has exactly three
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 28px; border-radius: 11px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 15.2px; font-weight: 700;
  letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 10px 24px -14px var(--g-blue);
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.btn:hover{ background: var(--accent-ink); }
.btn:active{ transform: translateY(1px); }
.btn svg{ width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

.btn.ghost{
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-b); box-shadow: none;
}
.btn.ghost:hover{ background: var(--mist); border-color: var(--edge); }

.btn.link{
  height: auto; padding: 0; background: none; box-shadow: none;
  color: var(--accent); font-weight: 700;
}
.btn.link:hover{ background: none; }

/* ==========================================================================
   4 · FOOTER — verbatim from index.html
   ========================================================================== */
#sfoot{
  background: var(--ground); border-top: 1px solid var(--line-b);
  padding: clamp(48px,5vw,72px) var(--pad) 26px;
}
#sfoot .f-wrap{ width: min(1200px, 100%); margin-inline: auto; }
#sfoot .f-cols{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(24px,3vw,48px); }
#sfoot .f-id{ display: flex; align-items: center; gap: 10px; }
#sfoot .f-mk{ width: 30px; height: 30px; flex: none; }
#sfoot .f-id b{ font-size: 15.5px; font-weight: 800; color: var(--navy); }
#sfoot .f-lede{ margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 32ch; }
#sfoot .f-badge{ margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
#sfoot .f-badge svg{ width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
#sfoot h3{ margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
#sfoot ul{ display: flex; flex-direction: column; gap: 10px; }
#sfoot ul a{ font-size: 13.5px; color: var(--ink-2); }
#sfoot ul a:hover{ color: var(--accent); }
#sfoot .f-ct{ display: flex; flex-direction: column; gap: 12px; }
#sfoot .f-ci{ display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-2); }
#sfoot .f-ci svg{ flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; }
#sfoot .f-ci a:hover{ color: var(--accent); }
#sfoot .f-base{ margin-top: clamp(36px,4vw,52px); padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
#sfoot .f-lg{ display: flex; gap: 18px; }
#sfoot .f-lg a:hover{ color: var(--accent); }
#sfoot .f-soc{ margin-left: auto; display: flex; gap: 12px; }
#sfoot .f-soc svg{ width: 17px; height: 17px; fill: var(--ink-3); }
#sfoot .f-soc a:hover svg{ fill: var(--accent); }
@media (max-width: 900px){ #sfoot .f-cols{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ #sfoot .f-cols{ grid-template-columns: 1fr; gap: 30px; } #sfoot .f-soc{ margin-left: 0; } }

/* ==========================================================================
   5 · SHARED SMALL PARTS
   ========================================================================== */
/* the eyebrow: mono · 11px · .24em · accent */
.ab3-eye{
  margin: 0; font-family: var(--mono); font-size: var(--ab3-eye);
  letter-spacing: .24em; text-transform: uppercase; font-weight: 500;
  /* neutral: an 11px tracked mono label is quiet by size, not by hue.
     .ab3-eye.brand below keeps the one deliberate blue on the page. */
  color: var(--ink-2);
}
.ab3-eye.brand{ color: var(--brand); }
.ab3-mono{ font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }

/* the grid texture the two live heroes carry */
.ab3-tex{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--gridline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridline) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 74% at 50% 22%, #000 22%, transparent 80%);
          mask-image: radial-gradient(120% 74% at 50% 22%, #000 22%, transparent 80%);
}

/* the preview ribbon — this file is never linked from a live page.
   It sits under the header on the right, where no version puts content, so it
   cannot cover a hero's foot. */
.labtag{
  position: fixed; right: 12px; top: calc(var(--barh) + 12px); z-index: 80;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 13px; border-radius: 999px;
  background: #101828; color: #fff; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.labtag b{ color: #7FB0FF; font-weight: 600; }
.labtag a{ color: #fff; opacity: .62; }
.labtag a:hover{ opacity: 1; }

/* ==========================================================================
   6 · THE PHONE JOURNEY LAYER — shared by all three
   --------------------------------------------------------------------------
   Below 760px every section carries a slim sticky strip that names it and
   numbers it, and closes by naming the next one. The strip changing IS the
   section boundary, so no heavy rule is needed, and a reader always knows in
   one second which section they are in.
   ========================================================================== */
.ab3-mj{ display: none; }
.ab3-onward{ display: none; }

@media (max-width: 760px){
  :root{ --pad: var(--gut); }
  section{ scroll-margin-top: calc(var(--barh) + 40px); }

  .ab3-mj{
    display: flex; align-items: center; gap: 9px;
    position: sticky; top: var(--barh); z-index: 40;
    margin: 0 calc(-1 * var(--gut)) 18px; padding: 10px var(--gut);
    /* opaque white, no backdrop blur: what scrolls under this sticky bar is
       hidden by it cleanly instead of being smeared through it (2026-09-09) */
    background: #FFFFFF;
    border-bottom: 1px solid var(--line-b);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
    /* this bar IS the small blue contextual heading on a phone: the section's
       .ab3-eye is hidden at this width and the bar carries its words, so it
       takes the eyebrow's ink rather than body grey. */
    text-transform: uppercase; color: var(--accent);
  }
  .ab3-mj b{ color: var(--accent); font-weight: 600; }
  .ab3-mj s{ text-decoration: none; color: var(--ink-4); }

  .ab3-onward{
    display: flex; align-items: center; gap: 8px;
    margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line-b);
    font-size: 12.5px; color: var(--ink-3);
  }
  .ab3-onward b{ color: var(--ink); font-weight: 700; }
  .ab3-onward svg{ width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ink-4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .btn{ height: 50px; width: 100%; }
  /* on a phone the ribbon shrinks to a chip: at full length it lay straight
     across the section strip and the first headline */
  .labtag{ font-size: 9px; padding: 5px 10px; gap: 7px; right: 8px; top: calc(var(--barh) + 7px); }
  .labtag-v{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==== about.css · layer 2 of 2 ==== */
/* ==========================================================================
   ABOUT US — the site-theme bridge.   Originally generated; edit this file directly.

   an earlier layer of this file carries the page's tokens, reset and atoms. This file
   brings the rest of the LIVE system: the home page's content width and grid
   edge, its whole header (the site Menu, the Pages panel and the folded phone
   nav that the lab shell never had), and its multi-column footer.

   Every block below was lifted out of index.html, so when the home page's
   header changes, make the same change here. Nothing here is new design; the page's
   own look still lives in [archived], loaded after this file.
   ========================================================================== */

/* ---------- the one content width the whole site shares ---------- */
:root{
  --maxw: clamp(1280px, 80vw, 1920px);
  --grid-edge: max(var(--pad), calc((100% - var(--maxw)) / 2));
  --rec: #EDF0F5;

  /* the About page's own lane is re-pointed at that same width, so the
     content edge, the header wordmark and the footer share one axis at
     every width. Without this the lab's fixed 1440px lane sits 48px inside
     the header on a 1920 screen. */
  --ab3-lane: min(var(--maxw), 100% - (2 * var(--pad)));
}
.w{ width: min(var(--maxw), 100% - (2 * var(--pad))); margin-inline: auto; }

/* ==========================================================================
   HEADER — lifted from index.html
   ========================================================================== */
.bar{ padding: 13px var(--grid-edge); }
.baract{ display:flex; align-items:center; gap:10px; margin-left: clamp(14px,2.2vw,34px); }
.barbtn{ display:inline-flex; align-items:center; height:36px; padding:0 15px; border-radius:8px;
  background:var(--g-blue); color:#fff; font-size:13px; font-weight:650; white-space:nowrap;
  transition: background .18s ease; }
.barbtn:hover{ background:#1663CE; }
.barmenu{ display:none; width:36px; height:36px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:9px; background:var(--paper);
  color:var(--ink-2); cursor:pointer; transition: border-color .16s ease, color .16s ease; }
.barmenu svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; }
.barmenu:hover{ border-color:var(--ink-4); color:var(--ink); }

/* ==========================================================================
   THE SITE MENU — a Menu button in the fixed bar, beside the primary action,
   opening the site's page list. Two pages are built; the rest are named but
   not made yet, and those are inert spans rather than href="#" links, so
   nothing in the menu navigates nowhere.
   ========================================================================== */
.sitemenu{
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  font: inherit; font-size: 13px; font-weight: 650; color: var(--ink-2); cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.sitemenu svg{ width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; transition: transform .2s ease; }
.sitemenu:hover{ border-color: var(--ink-4); color: var(--ink); }
.sitemenu[aria-expanded="true"]{ border-color: var(--ink); color: var(--ink);
  background: var(--ground); }

/* the panel lives inside .nav so a phone can fold it inline, but on a desktop
   it hangs off the fixed .bar itself — .nd carries no position, so .bar is the
   containing block and the panel can never leave the viewport */
.nd-p{ display: none; }
.nd[data-open="true"] .nd-p{
  display: grid; position: absolute; top: 100%; right: var(--grid-edge); z-index: 61;
  margin-top: 12px; padding: 24px 26px; width: min(620px, calc(100vw - 2 * var(--pad)));
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px clamp(20px,3vw,44px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 8px rgba(11,13,18,.05), 0 26px 60px -18px rgba(15,27,61,.22);
}
.nd-h{
  margin: 0 0 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500;
}
.nd-p ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.nd-p li{ display: flex; }
.nd-p a, .nd-na{
  display: inline-flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 8px 10px; margin-left: -10px; border-radius: 8px;
  font-size: 14px; font-weight: 550; color: var(--ink-2); line-height: 1.35;
}
.nd-p a::after{ display: none; }            /* the nav's underline, not wanted here */
.nd-p a:hover{ background: var(--ground); color: var(--ink); }
.nd-na{ color: var(--ink-4); cursor: default; }
.nd-live{
  width: 6px; height: 6px; flex: none; margin-top: 6px; border-radius: 50%;
  background: var(--g-green); box-shadow: 0 0 0 3px rgba(52,168,83,.16);
}
.nd-soon{
  flex: none; margin-top: 1px; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--line); font-family: var(--mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500;
}
.nd-p a:has(.nd-live){ font-weight: 650; color: var(--ink); }

/* on a phone the links fold into the button instead of vanishing */
@media (max-width: 900px){
  .barmenu{ display:flex; }
  .nav{ display:none; position:absolute; top:100%; left:0; right:0; z-index:59;
    flex-direction:column; gap:0; margin:0; padding:4px var(--pad) 14px;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow: 0 18px 30px -24px rgba(11,13,18,.5); }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:12px 0; font-size:15.5px; color:var(--ink);
    border-bottom:1px solid var(--line-2); }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }
  .nav a.active{ color: var(--accent); }
}


/* On a phone the hamburger already IS the site menu, so the labelled button
   steps aside and its page list folds into the top of that menu. Two menu
   buttons side by side would be two answers to the same question. */
@media (max-width: 900px){
  .sitemenu{ display: none; }
  .nd{ order: -1; width: 100%; }
  .nd[data-open="true"] .nd-p, .nd .nd-p{
    display: grid; position: static; width: auto; margin: 0; padding: 0;
    grid-template-columns: minmax(0,1fr); gap: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .nd-h{ margin: 14px 0 2px; }
  .nd-g:first-child .nd-h{ margin-top: 4px; }
  .nd-p a, .nd-na{ margin-left: 0; padding: 12px 0; border-radius: 0; font-size: 15.5px; }
  /* the separator moves to the <li>: `.nav a:last-child{border-bottom:0}` is
     more specific than any `.nd-p a` rule and was stripping the line from the
     two built pages, because each is the last child of its own <li> */
  .nav .nd-p a, .nav .nd-p .nd-na{ border-bottom: 0; }
  .nd-p li{ border-bottom: 1px solid var(--line-2); }
  .nd-p a{ color: var(--ink); }
  .nd-p a:hover{ background: none; }
  .nd-live{ margin-top: 8px; }
  .nd-soon{ margin-top: 3px; }
}

/* the same two blocks that hold the home page's bar together on a phone.
   They sit elsewhere in index.html, so they are lifted separately — without
   them the wordmark, the action and the burger do not fit 320px. */
/* the wordmark, the action and the menu button have to share 390px */
@media (max-width: 430px){
  .bar{ padding: 12px 14px; gap:10px; }
  .wm{ font-size:14.5px; }
  .mark{ width:31px; height:31px; margin-right:9px; }
  .baract{ gap:8px; margin-left:8px; }
  .barbtn{ height:34px; padding:0 12px; font-size:12.5px; }
  .barmenu{ width:34px; height:34px; }
}

/* ---------- 0b · the header holds together on the smallest phone ----------
   The wordmark, the action and the menu button share one row. Below ~375px
   they did not fit and the menu button was cut off the screen edge. */
.wm{ flex: 0 1 auto; min-width: 0; overflow: hidden; }
.baract{ flex: none; }
@media (max-width: 400px){
  .bar{ padding: 12px 12px; gap: 8px; }
  .wm{ font-size: 13.5px; }
  .mark{ width: 28px; height: 28px; margin-right: 8px; }
  .baract{ gap: 6px; margin-left: 6px; }
  .barbtn{ height: 33px; padding: 0 11px; font-size: 12px; }
  .barmenu{ width: 33px; height: 33px; }
}

/* ==========================================================================
   FOOTER — lifted from index.html
   ========================================================================== */
/* ==========================================================================
   SITE FOOTER (#sfoot) — premium multi-column.
   Brand and one sentence on the left, then three short columns: what we do,
   the company, how to reach us. Sits on the same --ground the About section
   ends on, so the page closes on one continuous surface.

   --ground, --line-b, --r-* and the shadows are not on :root — they live
   inside #about5 — so they are mirrored here rather than promoted to a
   global scope, the same way #svc3 mirrors its own.
   ========================================================================== */
#sfoot{
  --ground:#F4F7FC; --line-b:#DEE5F1;
  font-family: var(--sans);
  background: var(--ground); border-top: 1px solid var(--line-b);
  padding: clamp(46px,4.6vw,72px) 0 clamp(24px,2.4vw,32px);
}
#sfoot *{ box-sizing: border-box; }
#sfoot a{ color: inherit; text-decoration: none; }
#sfoot p, #sfoot h3{ margin: 0; }
#sfoot :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

#sfoot .f-wrap{ width: min(var(--maxw), 100% - (2 * var(--pad))); margin-inline: auto; }

#sfoot .f-cols{
  display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap: clamp(28px,3.4vw,58px);
}

/* ---- brand column ---- */
#sfoot .f-id{ display: flex; align-items: center; gap: 12px; }
#sfoot .f-id .f-mk{ flex: none; display: block; width: 38px; height: 38px; }
#sfoot .f-id .f-mk svg{ display: block; width: 100%; height: 100%; }
#sfoot .f-id b{ font-size: 16.5px; font-weight: 800; letter-spacing: -.038em; color: var(--navy); }
#sfoot .f-lede{ margin-top: 16px; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
#sfoot .f-badge{
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid #CFE0FD; border-radius: 999px; background: var(--paper);
  color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
#sfoot .f-badge svg{ width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- link columns ---- */
#sfoot h3{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500;
}
#sfoot ul{ margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
#sfoot ul a{ font-size: 14px; font-weight: 550; color: var(--ink-2); transition: color .18s ease; }
#sfoot ul a:hover{ color: var(--accent); }

/* ---- the site menu: two pages are built, the rest are named but not yet ----
   A page that exists is a link with a live dot. A page that does not exist yet
   is NOT a link — an inert name with a Soon chip — because a footer full of
   href="#" sends people to the top of the page and reads as broken. */
#sfoot ul li{ display: flex; }
#sfoot ul a, #sfoot ul .f-na{
  /* flex-start, not center: a two-line name (Website Design & Development)
     would otherwise float its chip beside the gap between the lines */
  display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0;
}
#sfoot ul .f-live, #sfoot ul .f-soon{ margin-top: 3px; }
#sfoot ul .f-na{ font-size: 14px; font-weight: 550; color: var(--ink-4); cursor: default; }
#sfoot .f-live{
  width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--g-green);
  box-shadow: 0 0 0 3px rgba(52,168,83,.16);
}
#sfoot .f-soon{
  flex: none; padding: 2px 7px; border-radius: 5px; background: var(--paper);
  border: 1px solid var(--line-b); font-family: var(--mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500;
}
#sfoot ul a:has(.f-live){ font-weight: 650; color: var(--ink); }
#sfoot .f-lg .f-na{ display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-4); cursor: default; }

/* ---- contact column ---- */
#sfoot .f-ct{ margin: 16px 0 0; display: flex; flex-direction: column; gap: 14px; }
#sfoot .f-ci{ display: flex; gap: 10px; }
#sfoot .f-ci svg{ width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#sfoot .f-ci span{ font-size: 14px; line-height: 1.5; color: var(--ink-2); }
#sfoot .f-ci a{ font-weight: 650; color: var(--ink); transition: color .18s ease; }
#sfoot .f-ci a:hover{ color: var(--accent); }

/* ---- base line ---- */
#sfoot .f-base{
  margin-top: clamp(34px,3.4vw,52px); padding-top: clamp(16px,1.6vw,21px);
  border-top: 1px solid var(--line-b);
  display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap;
}
#sfoot .f-base p{ font-size: 12.5px; color: var(--ink-3); }
#sfoot .f-lg{ display: flex; gap: 20px; }
#sfoot .f-lg a{ font-size: 12.5px; color: var(--ink-3); transition: color .18s ease; }
#sfoot .f-lg a:hover{ color: var(--ink); }
#sfoot .f-soc{ margin-left: auto; display: flex; gap: 7px; }
#sfoot .f-soc a{
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: var(--paper); border: 1px solid var(--line-b); color: var(--ink-3);
  transition: color .18s ease, border-color .18s ease;
}
#sfoot .f-soc a svg{ width: 16px; height: 16px; fill: currentColor; }
#sfoot .f-soc a:hover{ color: var(--accent); border-color: #CFE0FD; }

@media (max-width: 980px){
  #sfoot .f-cols{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; }
  #sfoot .f-cols > :first-child{ grid-column: 1 / -1; }
}
@media (max-width: 760px){
  #sfoot{ padding: 40px 0 24px; }
  #sfoot .f-wrap{ width: calc(100% - 36px); }
  #sfoot .f-cols{ grid-template-columns: 1fr; gap: 30px; }
  #sfoot .f-lede{ max-width: none; }
  #sfoot .f-base{ flex-direction: column; align-items: flex-start; gap: 16px; }
  #sfoot .f-soc{ margin-left: 0; }
}
@media (prefers-reduced-motion: reduce){
  #sfoot *{ transition: none !important; }
}

/* the fixed header would otherwise cover whatever a menu link jumps to */
section[id]{ scroll-margin-top: calc(var(--barh) + 14px); }

/* ==========================================================================
   DESKTOP SCALE-UP — the header half of it, lifted from index.html
   ========================================================================== */
@media (min-width: 1281px){
  :root{ --wpad: clamp(28px, 3.6vw, 58px); }

  .bar{ padding: 16px var(--wpad); }
  .wm{ font-size: 17.5px; }
  .mark{ width: 40px; height: 40px; margin-right: 12px; }
  .nav{ font-size: 14.5px; gap: clamp(16px, 2vw, 32px); }
  .barbtn{ height: 42px; padding: 0 21px; font-size: 14px; }
}