@charset "UTF-8";
/* Speak To Tech — site-wide type scale and shared UI tweaks.
   Loaded after stt-ds.css. Every section on this site carries its own inline <style>
   block, which sits later in the document than any stylesheet, so these rules are
   prefixed with `body` to win on specificity rather than on order. */

/* ============================================================ titles */

/* ---- page heroes (about / services / portfolio / contact) ---- */
body .pp-hero h1{
  font-size:clamp(3.1rem,7.6vw,6.2rem);
  line-height:1.03;
  letter-spacing:-.045em;
}

/* ---- section titles ---- */
body .stt-prem h2{
  font-size:clamp(2.4rem,5.2vw,4.05rem);
  line-height:1.04;
  letter-spacing:-.04em;
}

/* ---- closing call-to-action panels ---- */
body .pt-cta h2{ font-size:clamp(2.45rem,5.6vw,4.3rem); line-height:1.04; }
body .pp-cta h2{ font-size:clamp(2.4rem,5.4vw,4rem);   line-height:1.04; }

/* ---- card, step and case titles ---- */
body .pt-card h3{         font-size:clamp(1.3rem,1.9vw,1.5rem);   line-height:1.22; }
body .pp-eng .pt-card h3{ font-size:clamp(1.34rem,2vw,1.56rem);   line-height:1.22; }
body .pt-step h3{         font-size:clamp(1.6rem,2.4vw,1.95rem);  line-height:1.16; }
body .pt-case h3{         font-size:clamp(1.6rem,2.4vw,1.9rem);   line-height:1.14; }
body .pp-svc__b h3{       font-size:clamp(1.5rem,2.2vw,1.78rem);  line-height:1.18; }
body .pp-legal h2{        font-size:1.9rem; }

/* ---- footer column labels ---- */
body .stt-footer__col h2{ font-size:1rem; letter-spacing:.01em; }

/* ============================================================ supporting text
   The eyebrow above each section title reads as the section's label, so it is
   sized to be legible on its own (16px) rather than as fine print. Everything
   under a title moves up with it. */

body .stt-prem .eyb,
body .pp-hero .eyb{ font-size:1rem; letter-spacing:.15em; }
body .stt-prem .eyb::before{ width:30px; }

body .stt-prem .lead{ font-size:clamp(1.12rem,1.55vw,1.32rem); line-height:1.6; }
body .pp-hero .lead{  font-size:clamp(1.15rem,1.8vw,1.42rem);  line-height:1.55; }

body .pt-card p{        font-size:1rem;    line-height:1.6; }
body .pt-card__more{    font-size:.8rem; }
body .pt-case p{        font-size:1.02rem; line-height:1.6; }
body .pt-case__sec{     font-size:.8rem; }
body .pt-case__tags span{ font-size:.78rem; padding:.34rem .8rem; }
body .pt-step__k{       font-size:.8rem; }
body .pt-step p{        font-size:1.05rem; line-height:1.6; }
body .pt-show__caps b{  font-size:1.1rem; }
body .pt-show__caps span{ font-size:.96rem; line-height:1.55; }
body .pt-why__list li{  font-size:1.08rem; }
body .pt-stats .l{      font-size:.96rem; }
body .pt-stats .n{      font-size:clamp(2.4rem,5vw,3.4rem); }
body .pt-cta p{         font-size:1.18rem; line-height:1.6; }
body .pt-cta__btns a{   font-size:1.02rem; padding:1.05rem 2rem; }

/* inner pages */
body .pp-cta p{        font-size:1.18rem; }
body .pp-cta__btns a{  font-size:1.02rem; padding:1.05rem 2rem; }
body .pp-tag{          font-size:.95rem; }
body .pp-facts .n{     font-size:2rem; }
body .pp-facts .l{     font-size:.92rem; }
body .pp-svc__n{       font-size:.9rem; }
body .pp-split__r p{   font-size:1.16rem; line-height:1.6; }
body .pp-clist a, body .pp-clist .v{ font-size:1.06rem; }
body .pp-clist .lb{    font-size:.76rem; }
body .pp-field label{  font-size:.78rem; }
body .pp-field input, body .pp-field select, body .pp-field textarea{ font-size:1.02rem; }
body .pp-submit{       font-size:1.02rem; }
body .pp-msg{          font-size:.98rem; }
body .pp-pf__name{     font-size:.82rem; }

/* ============================================================ header
   Solid from the first pixel of scroll (stt.js drops the transparent class at 8px). */
body .stt-header--ondark:not(.stt-header--transparent){
  background:#04121a;
  border-bottom-color:rgba(255,255,255,.10);
}
/* (no light-header fallback: every page is dark, and a white default showed as a flash on load) */

/* ============================================================ home page
   Section descriptions run 2px larger than the shared scale. The calc keeps the
   fluid middle term and shifts the whole range, so the gain holds at every width. */
body.home .stt-prem .lead{ font-size:clamp(1.245rem,calc(1.55vw + 2px),1.445rem); }
body.home .pt-trust__head p:not(.eyb){ font-size:16px; }
body.home .pt-cta__copy p:not(.pt-cta__alt){ font-size:1.305rem; }

/* the "prefer to talk first" line is a footnote, not a description — the shared
   `.pt-cta p` rule had been sizing it like one */
body .pt-cta__alt, body.home .pt-cta__alt{ font-size:.95rem; }

/* ============================================================ readability
   Site-wide floor for small and supporting text. Three causes were making text hard
   to read on the dark ground, and each is fixed at the source:
   1. contrast — the shared grey tokens sat at 60%, and the label grey measured
      3.3:1 against the background (below WCAG AA). Both are lifted here.
   2. weight  — descriptions were set in 300, which thins out on dark backgrounds.
   3. size    — mono labels, kickers and tags ran 12–13px. The floor is now 14px. */

body .stt-prem{
  --mut:rgba(226,236,240,.80);   /* descriptions: ~10:1 */
  --fnt:rgba(176,194,201,.84);   /* labels and meta: ~7.7:1 */
}

/* descriptions: regular weight everywhere (:is() lifts specificity above
   `.stt-prem .lead`, which the plain `p` form would lose to) */
body .stt-prem :is(p,li,.l,.lead){ font-weight:400; }

/* mono labels and kickers */
body .pt-step__k,
body .pt-case__sec,
body .pt-field>span,
body .pp-field label,
body .pp-clist .lb,
body .pp-pf__name,
body .pt-showcase .pt-term__bar span{ font-size:.875rem; letter-spacing:.1em; }
body .pp-svc__n{ font-size:.9rem; }

/* tags */
body .pt-case__tags span{ font-size:.875rem; padding:.38rem .85rem; }
body .pt-stack span{ font-size:.875rem; padding:.45rem .9rem; }

/* small supporting lines */
body .pt-services .pt-card__more{ font-size:.875rem; }
body .pt-stats .l,
body .pp-facts .l,
body .pp-tag,
body .pt-msg,
body .pp-msg{ font-size:1rem; }
body .pp-svc__b p{ font-size:1.06rem; line-height:1.6; }
body.home .pt-cta__alt, body .pt-cta__alt{ font-size:1rem; }

/* terminal stays legible on phones */
@media(max-width:540px){ body .pt-showcase .pt-term{ font-size:.84rem; } }

/* ============================================================ page width
   One edge for the whole site: content sits 150px from the left and right on wide
   screens (about 1310px and up). Below that the inset tapers linearly to the original
   gutter, so tablets and phones keep their existing padding.
     1920 → 150px · 1440 → 150px · 1280 → 138px · 1024 → 40px · 375 → 20px
   The old 1200px caps are lifted so the width comes from this edge alone. */
:root{
  --stt-edge:max(clamp(1.25rem,4vw,2.75rem), min(150px, calc((100vw - 1024px) * .3846 + 40px)));
}
body .stt-prem .wrap,
body .pt-cta .pt-cta__in,
body .stt-container,
body .stt-shero .stt-shero__inner,
body .stt-header .stt-header__inner,
body .stt-footer .stt-footer__top,
body .stt-footer .stt-footer__bar-in{
  max-width:none;
  padding-left:var(--stt-edge);
  padding-right:var(--stt-edge);
}

/* ============================================================ footer
   Services | logo | Contact. The logo sits in a centre column at the exact middle of
   the page; Services sits on the left padding edge and Contact on the right one, both
   the same width, so the space either side of the logo is identical and grows with
   the screen. Side padding is 150px on
   wide screens (less on narrower ones, following the site edge).
   Both text columns are stretched to the logo's height: the heading starts level with
   the top of the logo and the last line ends level with its bottom.
   The tagline, the "Company" links (already in the header) and the decorative slant
   are hidden rather than deleted, so they can come back without editing every page. */
body .stt-footer .stt-footer__slant,
body .stt-footer .stt-footer__brand p,
body .stt-footer .stt-footer__col:has(a[href="/about/"]){ display:none; }
body .stt-footer .stt-footer__top{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"svc brand contact";
  align-items:stretch;
  gap:28px 24px;
  padding-left:min(150px, var(--stt-edge));
  padding-right:min(150px, var(--stt-edge));
  padding-top:clamp(40px,4vw,56px);
  padding-bottom:clamp(36px,3.6vw,48px);
}
body .stt-footer .stt-footer__brand{ grid-area:brand; align-self:center; max-width:none; gap:0; padding:0; }
body .stt-footer .stt-footer__brand img{ height:128px; }
/* services pinned to the left padding edge, contact to the right one; both 390px wide so
   the space between each of them and the centred logo is identical */
body .stt-footer .stt-footer__col:has(a[href="/web-design/"]){ grid-area:svc; justify-self:start; min-width:390px; }
body .stt-footer .stt-footer__col:has(.stt-footer__contact){ grid-area:contact; justify-self:end; min-width:390px; }
body .stt-footer .stt-footer__bar-in{ padding-left:min(150px, var(--stt-edge)); padding-right:min(150px, var(--stt-edge)); }
body .stt-footer .stt-footer__col{ display:flex; flex-direction:column; gap:10px; padding-top:0; }
body .stt-footer .stt-footer__col > h2{ font-size:12px; line-height:1; letter-spacing:.14em; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.1); }
/* lists fill the rest of the logo's height, first line at the top, last at the bottom */
body .stt-footer .stt-footer__col ul{ flex:1; gap:0; justify-content:space-between; }
body .stt-footer .stt-footer__col:has(a[href="/web-design/"]) ul{
  display:grid; grid-template-columns:repeat(2,max-content); align-content:space-between; gap:0 32px;
}
body .stt-footer .stt-footer__col a{ font-size:13px; line-height:1.35; }
body .stt-footer .stt-footer__contact{ gap:10px; align-items:center; }
body .stt-footer .stt-footer__contact .stt-ico{ margin-top:0; }
body .stt-footer .stt-footer__bar-in{ padding-top:16px; padding-bottom:16px; }
body .stt-footer .stt-footer__bar p, body .stt-footer .stt-footer__legal a{ font-size:12px; }
@media(max-width:1279px){
  body .stt-footer .stt-footer__top{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); grid-template-areas:"brand brand" "svc contact"; justify-content:normal; align-items:start; gap:32px; }
  body .stt-footer .stt-footer__brand{ justify-self:center; }
  body .stt-footer .stt-footer__col:has(a[href="/web-design/"]), body .stt-footer .stt-footer__col:has(.stt-footer__contact){ justify-self:stretch; min-width:0; }
  body .stt-footer .stt-footer__brand img{ height:110px; }
  body .stt-footer .stt-footer__col ul{ flex:none; gap:10px; justify-content:flex-start; }
  body .stt-footer .stt-footer__col:has(a[href="/web-design/"]) ul{ align-content:start; gap:10px 28px; }
}
@media(max-width:640px){
  body .stt-footer .stt-footer__top{ grid-template-columns:1fr; grid-template-areas:"brand" "svc" "contact"; gap:30px; }
  body .stt-footer .stt-footer__brand img{ height:96px; }
  body .stt-footer .stt-footer__col:has(a[href="/web-design/"]) ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================ WhatsApp button
   Fixed bottom-right on every page (markup printed by functions.php in wp_footer).
   Sits under dialogs such as the portfolio viewer (z-index 1000). */
.stt-wa{
  position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:900;
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.55),0 4px 12px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;
}
.stt-wa svg{ width:31px; height:31px; fill:currentColor; }
.stt-wa::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:sttWaPulse 2.6s ease-out infinite; pointer-events:none; }
@keyframes sttWaPulse{ 0%{ transform:scale(1); opacity:.7; } 80%,100%{ transform:scale(1.55); opacity:0; } }
.stt-wa:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 16px 36px -8px rgba(37,211,102,.7),0 6px 16px rgba(0,0,0,.4); }
.stt-wa:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.stt-wa__tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translate(6px,-50%);
  white-space:nowrap; padding:.5rem .85rem; border-radius:999px; background:#04121a; color:#F4FEFF;
  font:500 14px/1 'Sora',system-ui,sans-serif; border:1px solid rgba(255,255,255,.14);
  opacity:0; pointer-events:none; transition:opacity .2s,transform .2s;
}
.stt-wa:hover .stt-wa__tip,.stt-wa:focus-visible .stt-wa__tip{ opacity:1; transform:translate(0,-50%); }
@media(max-width:640px){ .stt-wa{ width:52px; height:52px; } .stt-wa svg{ width:28px; height:28px; } .stt-wa__tip{ display:none; } }
@media(prefers-reduced-motion:reduce){ .stt-wa::before{ animation:none; display:none; } }
@media print{ .stt-wa{ display:none; } }

/* ============================================================ header phone
   Shown after the "Get a Free Visit" button. Below 900px, where the button hides, it
   becomes a round tap-to-call icon beside the menu toggle. The icon is the design
   system's .i-phone mask (the class sets --i). */
body .stt-header .stt-header__phone{
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 2px;
  font:600 14px/1 'Sora',system-ui,sans-serif; letter-spacing:.01em; white-space:nowrap;
  color:#fff; text-decoration:none; transition:color .2s;
}
body .stt-header .stt-header__phone::before{
  content:""; flex:none; width:16px; height:16px; background:var(--stt-cyan);
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;
}
body .stt-header .stt-header__phone:hover{ color:var(--stt-cyan); }
@media(max-width:900px){
  body .stt-header .stt-header__phone{
    width:44px; height:44px; padding:0; justify-content:center; font-size:0; gap:0;
    border-radius:999px; border:1px solid rgba(255,255,255,.3);
  }
  body .stt-header .stt-header__phone::before{ width:18px; height:18px; }
}
body .stt-mobile .stt-mobile__phone{ justify-content:flex-start; gap:10px; color:var(--stt-cyan); border-bottom:0; }
body .stt-mobile .stt-mobile__phone::before{
  content:""; width:18px; height:18px; background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;
}

/* ============================================================ free-visit pop-up
   Markup printed by functions.php, behaviour in stt.js. Above the header, the WhatsApp
   button and the portfolio viewer. */
.stt-vm{ position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:clamp(12px,3vw,32px); }
.stt-vm[hidden]{ display:none; }
.stt-vm__bd{ position:absolute; inset:0; background:rgba(2,6,10,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .2s; }
.stt-vm__panel{
  position:relative; width:min(560px,100%); max-height:100%; overflow:auto;
  padding:clamp(24px,4vw,40px); border-radius:22px; border:1px solid rgba(30,221,237,.28);
  background:linear-gradient(160deg,#0b1820,#060b11); color:#F4FEFF;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(30,221,237,.3);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  opacity:0; transform:translateY(18px) scale(.98); transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}
.stt-vm.is-open .stt-vm__bd{ opacity:1; }
.stt-vm.is-open .stt-vm__panel{ opacity:1; transform:none; }
html.stt-vm-open{ overflow:hidden; }
.stt-vm__x{ position:absolute; top:14px; right:14px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; cursor:pointer; color:#F4FEFF; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.stt-vm__x:hover{ background:rgba(30,221,237,.15); border-color:rgba(30,221,237,.5); }
.stt-vm svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stt-vm__eyb{ margin:0; font:500 13px/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:#1EDDED; }
.stt-vm h2{ margin:.7rem 0 0; font:600 clamp(1.7rem,3.2vw,2.2rem)/1.1 'Sora',sans-serif; letter-spacing:-.03em; color:#F4FEFF; padding-right:2.5rem; }
.stt-vm__lead{ margin:.7rem 0 0; font-size:1rem; line-height:1.6; color:rgba(226,236,240,.82); }
.stt-vm__form{ display:grid; gap:14px; margin-top:1.5rem; }
.stt-vm__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:520px){ .stt-vm__row{ grid-template-columns:1fr; } }
.stt-vm__f{ display:grid; gap:7px; }
.stt-vm__f>span{ font:500 13px/1.2 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:rgba(226,236,240,.92); }
.stt-vm__f em{ font-style:normal; color:#1EDDED; }
.stt-vm__f input,.stt-vm__f select{
  width:100%; height:48px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,.2);
  background:rgba(3,7,12,.75); color:#F4FEFF; font:400 1rem/1 'IBM Plex Sans',sans-serif; outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.stt-vm__f select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,#1EDDED 50%),linear-gradient(135deg,#1EDDED 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.stt-vm__f select option{ background:#070c12; color:#F4FEFF; }
.stt-vm__f input::placeholder{ color:rgba(176,194,201,.6); }
.stt-vm__f input:focus,.stt-vm__f select:focus{ border-color:rgba(30,221,237,.7); box-shadow:0 0 0 3px rgba(30,221,237,.18); }
.stt-vm__f .is-bad{ border-color:#ff7a7a; box-shadow:0 0 0 3px rgba(255,122,122,.15); }
.stt-vm__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.stt-vm__submit{
  margin-top:4px; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; height:52px; border:0; border-radius:999px; cursor:pointer;
  background:#1EDDED; color:#04202A; font:600 1rem/1 'Sora',sans-serif; box-shadow:0 14px 40px -14px rgba(30,221,237,.65); transition:filter .2s;
}
.stt-vm__submit:hover{ filter:brightness(1.08); }
.stt-vm__submit:disabled{ opacity:.6; cursor:default; }
.stt-vm__msg{ margin:0; min-height:1.2em; font-size:.95rem; line-height:1.5; color:rgba(226,236,240,.82); }
.stt-vm__msg.is-ok{ color:#37e0a0; }
.stt-vm__msg.is-err{ color:#ff8a8a; }
.stt-vm__alt{ margin:0; font-size:.95rem; color:rgba(176,194,201,.9); }
.stt-vm__alt a{ color:#1EDDED; text-decoration:none; border-bottom:1px solid rgba(30,221,237,.4); }
@media(prefers-reduced-motion:reduce){ .stt-vm__panel,.stt-vm__bd{ transition:none; } }

/* ============================================================ contact page
   Contact details, tagline and form text 4px larger than the shared scale. */
body.page-id-42 .pp-clist .lb{ font-size:calc(.875rem + 4px); }
body.page-id-42 .pp-clist a,
body.page-id-42 .pp-clist .v{ font-size:calc(1.06rem + 4px); }
body.page-id-42 .pp-tag{ font-size:calc(1rem + 4px); }
body.page-id-42 .pp-field label{ font-size:calc(.875rem + 4px); }
body.page-id-42 .pp-field input,
body.page-id-42 .pp-field select,
body.page-id-42 .pp-field textarea{ font-size:calc(1.02rem + 4px); }
body.page-id-42 .pp-submit{ font-size:calc(1.02rem + 4px); }

/* ============================================================ services sub-menu
   Built by stt.js: "Services" + a chevron toggle + a panel with the three main services.
   Opens on hover (pointer devices) or with the chevron (keyboard / touch). */
body .stt-dd{ position:relative; display:flex; align-items:center; }
body .stt-nav .stt-dd > a{ padding-right:4px; }
body .stt-dd__tg{ display:grid; place-items:center; width:26px; height:26px; margin:0 4px 0 0; padding:0; border:0; border-radius:7px; background:transparent; color:#fff; cursor:pointer; }
body .stt-dd__tg:hover{ color:#1EDDED; }
body .stt-dd__tg:focus-visible{ outline:2px solid #1EDDED; outline-offset:1px; }
body .stt-dd__tg svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s; }
body .stt-dd.is-open .stt-dd__tg svg{ transform:rotate(180deg); }
body .stt-dd__menu{
  position:absolute; top:100%; left:50%; z-index:60; padding-top:14px;
  opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,8px);
  transition:opacity .2s, transform .25s cubic-bezier(.16,1,.3,1), visibility 0s linear .25s;
}
body .stt-dd.is-open .stt-dd__menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; }
@media(hover:hover){
  body .stt-dd:hover .stt-dd__menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; }
  body .stt-dd:hover .stt-dd__tg svg{ transform:rotate(180deg); }
}
body .stt-dd__panel{
  width:352px; padding:8px; border-radius:16px; border:1px solid rgba(30,221,237,.22);
  background:rgba(6,14,20,.97); box-shadow:0 30px 60px -24px rgba(0,0,0,.85), 0 0 50px -28px rgba(30,221,237,.5);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
body .stt-nav .stt-dd__panel a{
  display:flex; align-items:center; gap:14px; padding:12px; border-radius:11px;
  font:500 15px/1.2 var(--font-sans); letter-spacing:-.01em; color:#fff; text-decoration:none; transition:background .2s;
}
body .stt-nav .stt-dd__panel a::after{ display:none; }
body .stt-nav .stt-dd__panel a:hover,
body .stt-nav .stt-dd__panel a:focus-visible,
body .stt-nav .stt-dd__panel a.is-current{ background:rgba(30,221,237,.08); }
body .stt-nav .stt-dd__panel a:focus-visible{ outline:2px solid #1EDDED; outline-offset:-2px; }
body .stt-dd__ic{ flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:11px; border:1px solid rgba(30,221,237,.28); background:rgba(30,221,237,.08); color:#1EDDED; }
body .stt-dd__ic svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
body .stt-dd__t{ display:flex; flex-direction:column; gap:4px; min-width:0; }
body .stt-dd__t b{ font:600 15px/1.2 'Sora',sans-serif; color:inherit; }
body .stt-dd__t small{ font:400 13px/1.35 'IBM Plex Sans',sans-serif; color:rgba(226,236,240,.72); }
body .stt-nav .stt-dd__panel a.stt-dd__all{
  margin-top:6px; padding:12px; border-top:1px solid rgba(255,255,255,.08); border-radius:0 0 11px 11px; justify-content:space-between;
  font:500 12px/1 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:#1EDDED;
}
body .stt-dd__all svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media(prefers-reduced-motion:reduce){ body .stt-dd__menu, body .stt-dd__tg svg{ transition:none; } }

/* mobile menu: the three main services under "Services" */
body .stt-mobile .stt-mobile__sub{ display:flex; flex-direction:column; padding:4px 0 8px 18px; border-bottom:1px solid var(--border-subtle); }
body .stt-mobile .stt-mobile__sub a{ min-height:44px; border-bottom:0; font-size:15px; color:var(--text-muted, #4a5a63); }
body .stt-mobile .stt-mobile__sub a::before{ content:""; width:10px; height:1px; margin-right:10px; background:#1EDDED; }
body .stt-mobile .stt-mobile__sub a{ justify-content:flex-start; }
body .stt-mobile .stt-mobile__sub a[aria-current]{ color:var(--text-strong); font-weight:600; }

/* ==================================================== readability, round 3 (2026-09-23)
   The user reported small text across the site. Nothing readable is left below 15px:
   labels, tags, captions, breadcrumbs, mono micro-copy and footer text all sit at 15px
   (uppercase mono keeps its letter-spacing, so it is set slightly tighter). */

/* The footer keeps the sizes the user set earlier (12px headings, 13px links,
   12px bottom bar) - it was deliberately left out of this readability pass. */

/* --- eyebrows above every section title --- */
body .stt-prem .eyb{ font-size:15px; }

/* --- home: step numbers, tags, terminal, site strip --- */
body .stt-prem .pt-step__k,
body .stt-prem .pt-case__sec,
body .stt-prem .pt-case__tags span,
body .stt-prem .pt-stack span,
body .stt-prem .pt-stack span b,
body .stt-prem .pt-card__more,
body .stt-prem .pt-services .pt-card__more,
body .stt-prem .pt-pillar__n,
body .stt-prem .pt-term__bar span,
body .stt-prem .pt-showcase .pt-term__bar span{ font-size:15px; }
body .stt-prem .pt-showcase .pt-term{ font-size:15px; }
body .stt-prem .pt-web__bar span{ font-size:14.5px; }

/* --- services + service pages --- */
body .stt-prem .pp-pillar__n,
body .stt-prem .pp-svc__n,
body .stt-prem .pp-facts .l,
body .stt-prem .sv-hubcard__n,
body .stt-prem .sv-hubcard__go,
body .stt-prem .sv-words li,
body .stt-prem .sv-sites__bar span,
body .stt-prem .sv-more__go + span{ font-size:15px; }
body .stt-prem .sv-crumb{ font-size:15.2px; }

/* --- portfolio --- */
body .stt-prem .pf-card__bar span,
body .stt-prem .pf-card__hint,
body .stt-prem .pf-card__tags span,
body .stt-prem .pf-chip span{ font-size:15px; }

/* --- forms and the free-visit pop-up --- */
body .stt-prem .pt-field > span,
body .stt-vm__f > span{ font-size:15px; }
/* contact page keeps its own +4px labels (above), other pages use the base size */
body:not(.page-id-42) .stt-prem .pp-field label{ font-size:15px; }
body .stt-vm__eyb{ font-size:14.5px; }

/* --- header, hero badge, WhatsApp tooltip --- */
body .stt-dd__t small{ font-size:14.5px; }
body .stt-nav .stt-dd__panel a.stt-dd__all{ font-size:13px; }
body .stt-shero__badge{ font-size:14px; }
body .stt-wa__tip{ font-size:15px; }

@media(max-width:540px){ body .stt-showcase .pt-term, body .pt-showcase .pt-term{ font-size:14px; } }

/* Home-page sections scope their type with the #sttPrem id, which outranks the
   body-prefixed rules above, so the same floors are repeated here. */
body #sttPrem .eyb{ font-size:15px; }
body #sttPrem .pt-pillar__n{ font-size:15px; }
body #sttPrem .pt-web__bar span{ font-size:14.5px; }
body #sttPrem .pt-stack span, body #sttPrem .pt-stack span b{ font-size:15px; }
body #sttPrem .pt-step__k, body #sttPrem .pt-case__sec, body #sttPrem .pt-case__tags span{ font-size:15px; }
body #sttPrem .pt-field > span{ font-size:15px; }
/* header call-to-action was 12px */
body .stt-header .stt-btn--sm{ font-size:13.5px; }

/* ==================================================== footer background (2026-09-23)
   Canvas injected by stt.js as the footer's first child; the footer is position:relative
   and overflow:hidden already, and the content blocks after it paint on top. */
body .stt-footer .stt-footer__cv{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0; opacity:.9; }
body .stt-footer .stt-footer__top,
body .stt-footer .stt-footer__bar{ position:relative; z-index:1; }

/* ============================================================ header: no white flash on load
   stt.js only adds .stt-header--ondark / --transparent after the page has loaded, so until then
   the design system's defaults (white bar, dark logo, dark links) showed for a moment on every
   open, refresh and page change. Every page on this site is dark, so start in the dark,
   transparent state here; once scrolled, stt.js still switches to the solid dark bar. */
body .stt-header{ background:transparent; border-bottom-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
body .stt-header .stt-logo-dark{ display:none!important; }
body .stt-header .stt-logo-light{ display:block!important; }
body .stt-header .stt-nav a{ color:#fff; }
body .stt-header .stt-nav a:hover{ color:var(--stt-cyan); }
body .stt-header .stt-burger{ border-color:rgba(255,255,255,.3); color:#fff; background:transparent; }