/* ==========================================================================
   CONTACT US — the site-theme bridge.   GENERATED — do not hand-edit.
   Rebuild with:  python3 contact/_extract.py && python3 contact/_port.py

   contact/_shell.css carries the lab's tokens, reset and atoms. This file
   brings the page 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 premium
   multi-column footer.

   Every block below is lifted out of index.html by marker text, so when the
   home page's header changes, re-running the extractor moves the change here
   too and the two pages cannot drift. Nothing here is new design; the page's
   own look still lives in its <style> block, 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;
}
.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; }
}