/* Brand v2 (2026-10-17): the Pushbuild tokens (brand/tokens.css, style guide) applied to the existing pages.
   Loaded LAST on the homepage and every generated page, so it overrides style.css, services.css and nav.css.
   Type scale 12 14 16 20 25 31 39 49 px; spacing on a 4/8 px grid; one accent (teal); dark mode below. */
/* Self-hosted fonts (tools/brand_fonts.py web): variable Archivo (wdth 62-125, wght 100-900) and Literata (opsz, wght). */
@font-face{font-family:"Archivo";src:url(../fonts/Archivo-VF.subset.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Literata";src:url(../fonts/Literata-VF.subset.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{
  --navy:#121A2B; --navy-2:#1B2538; --teal:#17C3A2; --teal-ink:#0B7A66; --paper:#F5F7FA; --steel:#4A5568; --line:#D9DEE5;
  --orange:var(--teal);   /* the old focus/alert accent folds into the single teal accent */
  --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px; --t-25:25px; --t-31:31px; --t-39:39px; --t-49:49px;
}
body{background:#fff;font-size:var(--t-16)}
:focus-visible{outline-color:var(--teal)}
section{padding:96px 0}
h2{font-size:clamp(var(--t-31),3.6vw,var(--t-39));margin-bottom:16px}
.lede{font-size:var(--t-20);margin-bottom:48px}
.hero p{font-size:var(--t-20)}
.cta{font-size:var(--t-16);padding:16px 24px;border-radius:8px}
.cta:hover{background:#3EDCBD}

/* What we build: framed cards in three columns, each with a clear button */
#services .services{grid-template-columns:repeat(3,1fr);gap:16px}
#services .svc{margin:0;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--paper);display:flex;flex-direction:column;gap:8px}
#services .svc:hover{background:#fff;border-color:var(--teal-ink)}
#services .svc h3{font-size:var(--t-20)}
#services .svc p{font-size:var(--t-16);line-height:1.6}
#services .svc .tools{font-size:var(--t-14);margin-top:auto;padding-top:8px}
#services .svc .details{font-size:var(--t-14);margin-top:4px}
#services .svc .start{align-self:flex-start;margin-top:8px;background:var(--teal);color:var(--navy);text-decoration:none;font:700 var(--t-14)/1 var(--display);padding:12px 16px;border-radius:8px}
#services .svc .start:hover{background:#3EDCBD;color:var(--navy)}

/* Services and products: an ink panel, so the catalogue reads as one block */
.lanes{background:var(--navy);color:#fff;padding:48px;border-radius:14px}
.lanes-head h3{font-size:var(--t-31);color:#fff}
.lanes-head p{color:#C2CAD8}
.lanecols h4{color:#A3AEC2;font-size:var(--t-12)}
.lanecols a{color:#E8EDF4;font-size:var(--t-14)}
.lanecols a:hover{color:var(--teal)}
.lanes .mi{color:var(--teal)}

.project h3{font-size:var(--t-39)}
.project .kind{font-size:var(--t-16)}
.project .what{font-size:var(--t-20)}
.project .tags li{font-size:var(--t-12);padding:4px 12px}
.gallery figcaption{font-size:var(--t-14)}
.steps li::before{font-size:var(--t-39)}
.steps h3{font-size:var(--t-20)}
.fmap p{font-size:var(--t-12)}
.fmap a{font-size:var(--t-14)}
footer{font-size:var(--t-14)}

@media (max-width:1100px){#services .services{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  #services .services{grid-template-columns:1fr}
  #services .svc{margin:0}
  .lanes{padding:24px 20px}
  section{padding:64px 0}
}

/* Dark mode: same names, dark values. Sections that are already ink stay ink. */
@media (prefers-color-scheme:dark){
  :root{--paper:#152036;--line:#26324A;--steel:#A3AEC2;--teal-ink:#3EDCBD}
  body{background:#0D1422;color:#E8EDF4}
  a{color:var(--teal-ink)}
  #work{background:#101827}
  #services .svc:hover{background:#1B2538}
  .project .tags li{color:#E8EDF4}
  .steps li{border-top-color:#E8EDF4}
  .steps p{color:#C2CAD8}
  .lanes{background:#152036;border:1px solid var(--line)}
  .svcmenu .panel{background:#152036;color:#E8EDF4}
  .top nav .svcmenu .panel a{color:#E8EDF4}
  dialog#intake,#chat{background:#152036;color:#E8EDF4}
  #intake input,#intake select,#intake textarea,#chat input{background:#0D1422;color:#E8EDF4;border-color:var(--line)}
  #chat-log .them{background:#0D1422}
  #services .svc .start,#services .svc .start:hover{color:#121A2B}
  /* service and hub pages (services.css): sections and cards that were hard-coded white */
  #needs,#packages,#approach,#faq,.hubgroup.alt{background:#0D1422}
  #build .ic{background:var(--paper)}
  .rel,.hubitem,.hubgroup.alt .hubitem{background:#152036;color:#E8EDF4}
}

/* ten cards in three columns: the last one runs full width instead of sitting alone */
@media (min-width:1101px){#services .svc:last-child:nth-child(3n+1){grid-column:1/-1}}

/* demand pages (solutions/, packages/): three package tiers side by side */
.pkgs.three{grid-template-columns:repeat(3,1fr);gap:16px}
.pkgs.three .pkg{padding:24px;border:1px solid var(--line)}
.pkgs.three .pkg h3{font-size:var(--t-25)}
#services-for .rels{margin-top:32px}
@media (max-width:1100px){.pkgs.three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pkgs.three{grid-template-columns:1fr}}
#services-for .rels{grid-template-columns:repeat(4,1fr);gap:16px}
#services-for .rel{border:1px solid var(--line);background:var(--paper)}
@media (max-width:1100px){#services-for .rels{grid-template-columns:1fr 1fr}}
@media (max-width:640px){#services-for .rels{grid-template-columns:1fr}}

/* process cost calculator (automation-cost-calculator.html) */
.calc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 24px}
.calc label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:var(--t-14,14px);color:var(--ink,#121A2B)}
.calc input{font:inherit;font-weight:400;font-size:16px;padding:12px;border:1px solid var(--line,#D9DEE5);border-radius:8px;background:var(--paper,#fff);color:inherit}
.calc input:focus{outline:2px solid var(--teal,#17C3A2);outline-offset:1px}
.calcout{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.calcout p{margin:0;padding:24px;border:1px solid var(--line,#D9DEE5);border-radius:8px;display:flex;flex-direction:column;gap:8px}
.calcout span{font-size:14px;color:var(--slate,#4A5568)}
.calcout strong{font-size:var(--t-31,31px);font-variant-numeric:tabular-nums}
#calc .note{margin-top:16px;font-size:14px;color:var(--slate,#4A5568)}
#next ul{padding-left:20px;line-height:1.8}
@media (max-width:800px){.calc,.calcout{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .calc label{color:#E8EDF4}:root:not([data-theme="light"]) .calc input,:root:not([data-theme="light"]) .calcout p{background:#152036;color:#E8EDF4;border-color:#2A3650}:root:not([data-theme="light"]) .calcout span,:root:not([data-theme="light"]) #calc .note{color:#A9B4C4}}