/* ==========================================================
   Austek Engineering CC — stylesheet
   White ground, navy ink, arc-blue accent.
   Navy panels bookend the page: hero, contact, footer.
   ========================================================== */

/* Fonts, served from this site (18 October 2026). These are Google Fonts' own
   files and @font-face rules for the old fonts.googleapis.com link (Space
   Grotesk v22, Inter v20, JetBrains Mono v24; Latin and Latin Extended
   subsets), so the text looks exactly as before. The page no longer waits for
   a stylesheet from two other servers before it can paint. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* light ground */
  --paper:#f5f8fc;
  --paper-2:#e9f0f8;
  --paper-3:#ffffff;
  --rule:rgba(13,27,42,.13);
  --rule-2:rgba(13,27,42,.26);

  /* ink */
  --ink:#0d1b2a;
  --ink-2:#33465c;
  --ink-3:#57697f;
  --ink-4:#8496aa;

  /* dark panels */
  --void:#0d1b2a;
  --void-2:#12253a;
  --void-3:#1a3350;
  --void-4:#24415f;
  --hair:rgba(238,244,251,.13);
  --hair-2:rgba(238,244,251,.24);
  --fg:#eef4fb;
  --fg-2:#b9c9db;
  --fg-3:#8fa3ba;
  --fg-4:#677c93;

  /* accent */
  --arc:#1a66e0;
  --arc-2:#3a82f0;
  --arc-ink:#1550b8;   /* blue that passes contrast for small text on white */

  --d:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --b:'Inter',system-ui,-apple-system,sans-serif;
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1280px;
  --pad:clamp(20px,4.4vw,56px);
  --sec:clamp(72px,9vw,132px);
  --hdr:64px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--b);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--d);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0}
p{margin:0}
::selection{background:var(--arc);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--arc);color:#fff;padding:12px 18px;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--arc);outline-offset:3px}

.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--arc);flex:none}
.dot--live{background:#3aa85a;box-shadow:0 0 0 0 rgba(58,168,90,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(58,168,90,0)}100%{box-shadow:0 0 0 0 rgba(58,168,90,0)}}

/* ───────── buttons ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border:1px solid transparent;border-radius:3px;
  font-family:var(--b);font-size:14px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease);
}
.btn--lg{padding:15px 26px;font-size:15px}
.btn--full{width:100%}
.btn--arc{background:var(--arc);color:#fff}
.btn--arc:hover{background:var(--arc-2)}
.btn--ghost{border-color:var(--rule-2);color:var(--ink)}
.btn--ghost:hover{background:rgba(13,27,42,.06);border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
/* ghost buttons sitting on a dark panel */
.hero .btn--ghost{border-color:var(--hair-2);color:var(--fg)}
.hero .btn--ghost:hover{background:rgba(238,244,251,.08);border-color:var(--fg-4)}

/* ───────── header ───────── */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hdr);
  background:rgba(245,248,252,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.hdr.is-stuck{border-bottom-color:var(--rule);background:rgba(245,248,252,.96)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:var(--hdr)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{width:26px;height:26px}
.brand__name{font-family:var(--d);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.brand__dot{color:var(--arc)}

.nav{display:flex;align-items:center;gap:26px}
.nav>a{font-size:13.5px;font-weight:500;color:var(--ink-3);transition:color .18s}
.nav>a:hover{color:var(--ink)}
/* The header quote button is a .nav>a too, which turned its label grey on blue; keep it white. */
.nav>a.btn--arc,.nav>a.btn--arc:hover{color:#fff}
.nav__call{display:inline-flex;align-items:center;gap:7px;font-family:var(--m);font-size:13px!important;color:var(--ink)!important}
.nav__call svg{color:var(--arc-ink)}

/* Menu button (phone audit, 28 October 2026). It was two 1.5px bars that the
   grid rows pushed 21.5px apart, and at 1.5px they landed on half pixels and
   drew at two different weights, so it did not read as a menu. Now three
   2px bars 5px apart, stacked in the middle of a 44px button: 44 minus the
   border leaves 42, the stack is 16, so every bar sits on a whole pixel.
   Open, the middle bar fades and the outer two meet 7px in to make the X. */
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--rule-2);border-radius:3px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;flex:none;width:20px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ───────── hero (dark panel) ───────── */
.hero{
  position:relative;background:var(--void);color:var(--fg);overflow:hidden;
  padding-top:calc(var(--hdr) + clamp(48px,7vw,92px));
  padding-bottom:clamp(48px,7vw,88px);
}
.weld{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.hero::after{ /* keep text legible over the animation */
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,27,42,.92) 0%,rgba(13,27,42,.88) 52%,rgba(13,27,42,.42) 84%,rgba(13,27,42,.12) 100%),
    linear-gradient(90deg,rgba(13,27,42,.62) 0%,rgba(13,27,42,.18) 58%,rgba(13,27,42,0) 100%);
}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr);gap:clamp(32px,5vw,72px);align-items:center}

.tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:22px}
.hero__h1{font-size:clamp(3.2rem,10vw,7.2rem);letter-spacing:-.05em;line-height:.9;color:var(--fg)}
.arc{color:var(--arc)}
.hero__sub{margin-top:26px;max-width:46ch;font-size:clamp(1rem,1.5vw,1.12rem);color:var(--fg-2);line-height:1.65}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.creds{list-style:none;padding:0;margin:42px 0 0;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--hair);padding-top:22px}
.creds li{display:flex;align-items:center;gap:14px;font-family:var(--m);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.creds__n{color:var(--arc);font-size:11px}

.hero__fig{margin:0;position:relative;border:1px solid var(--hair)}
.hero__fig img{width:100%;aspect-ratio:933/1180;object-fit:cover;filter:contrast(1.06) saturate(.9)}
.hero__fig figcaption{
  position:absolute;left:0;bottom:0;right:0;display:flex;align-items:center;gap:9px;
  padding:12px 14px;background:linear-gradient(transparent,rgba(13,27,42,.92));
  font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);
}

/* ───────── trust bar ───────── */
.trust{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr)}
.trust__i{padding:clamp(24px,3.4vw,40px) 0;text-align:center;border-left:1px solid var(--rule)}
.trust__i:first-child{border-left:none}
.trust__i b{display:block;font-family:var(--d);font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em;color:var(--ink);line-height:1}
.trust__i b i{font-style:normal;color:var(--arc-ink);font-size:.6em}
.trust__word{color:var(--arc-ink)!important}
.trust__i span{display:block;margin-top:9px;font-family:var(--m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ───────── marquee ───────── */
.mq{overflow:hidden;border-bottom:1px solid var(--rule);padding:16px 0;background:var(--paper)}
.mq__t{display:flex;align-items:center;gap:22px;width:max-content;animation:slide 42s linear infinite}
.mq__t span{font-family:var(--d);font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:600;letter-spacing:-.02em;color:var(--ink-4);white-space:nowrap}
.mq__t i{color:var(--arc);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ───────── sections ───────── */
.sec{padding-block:var(--sec)}
.sec--rule{border-top:1px solid var(--rule)}
.shead{max-width:640px;margin-bottom:clamp(40px,5vw,64px)}
.shead__k{display:flex;align-items:center;gap:12px;font-family:var(--m);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.shead__k span{color:var(--arc-ink)}
.shead__h{font-size:clamp(2rem,4.6vw,3.4rem);color:var(--ink)}
.shead__p{margin-top:20px;color:var(--ink-3);line-height:1.7;max-width:56ch}

/* ───────── capability cards ───────── */
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--paper-3);padding:clamp(24px,3vw,34px);transition:background .22s}
.card:hover{background:#fff}
.card__n{display:block;font-family:var(--m);font-size:11.5px;color:var(--arc-ink);letter-spacing:.1em;margin-bottom:16px}
.card h3{font-size:1.28rem;margin-bottom:12px;color:var(--ink)}
.card p{color:var(--ink-3);font-size:14.5px;line-height:1.68}

/* ───────── process ───────── */
.proc{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.step{background:var(--paper-3);padding:clamp(22px,2.6vw,30px);position:relative}
.step__n{display:block;font-family:var(--m);font-size:11.5px;color:var(--arc-ink);letter-spacing:.1em;margin-bottom:14px}
.step h3{font-size:1.08rem;margin-bottom:10px;color:var(--ink)}
.step p{color:var(--ink-3);font-size:13.6px;line-height:1.6}

.spec{margin-top:1px;border:1px solid var(--rule);background:var(--rule);display:grid;grid-template-columns:repeat(6,1fr);gap:1px}
.spec__row{padding:16px 20px;background:var(--paper-2);display:flex;flex-direction:column;gap:5px}
.spec__row span{font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.spec__row b{font-size:13.5px;font-weight:500;color:var(--ink-2)}

/* ───────── gallery ───────── */
.gal{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px}
.gal__i{position:relative;overflow:hidden;border:1px solid var(--rule);grid-column:span 2;grid-row:span 1;background:var(--paper-2)}
.gal__i--tall{grid-column:span 2;grid-row:span 2}
.gal__i img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(.92);transition:transform .6s var(--ease),filter .4s}
.gal__i:hover img{transform:scale(1.045);filter:contrast(1.07) saturate(1)}
.gal__c{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:14px 16px;background:linear-gradient(transparent,rgba(13,27,42,.9));
  font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);
}
.gal__c i{color:var(--arc);font-style:normal}

/* ───────── sites ───────── */
.sites{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.site{background:var(--paper-3);padding:clamp(24px,3vw,34px)}
.site__st{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.site__st--on{color:#2b8347}
.site h3{font-size:1.35rem;margin-bottom:6px;color:var(--ink)}
.site__loc{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--arc-ink);margin-bottom:14px}
.site p:last-of-type{color:var(--ink-3);font-size:14.5px;line-height:1.68}
.site--next{background:var(--paper-2)}
.site__link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;font-size:14.5px;color:var(--arc-ink)}
.site__link:hover{gap:12px;transition:gap .2s}

/* ───────── about ───────── */
.about__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.72fr);gap:clamp(32px,5vw,68px);align-items:start}
.quote{margin:0 0 32px;padding:24px 0 24px 26px;border-left:2px solid var(--arc)}
.quote p{font-family:var(--d);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.35;color:var(--ink)}
.quote footer{margin-top:16px;display:flex;flex-direction:column;gap:3px}
.quote footer b{font-family:var(--m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
/* "Managing Director" was --ink-4, 2.85:1 on the page; --ink-3 is 5.3:1. */
.quote footer span{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.prose{display:flex;flex-direction:column;gap:17px}
.prose p{color:var(--ink-3);line-height:1.75;font-size:15px}
.about__fig{margin:0;border:1px solid var(--rule)}
.about__fig img{width:100%;aspect-ratio:1/1.06;object-fit:cover;filter:contrast(1.04) saturate(.92)}

.vals{list-style:none;padding:0;margin:clamp(48px,6vw,80px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.val{background:var(--paper-3);padding:clamp(22px,2.6vw,30px)}
.val__n{display:block;font-family:var(--m);font-size:11px;color:var(--arc-ink);letter-spacing:.1em;margin-bottom:14px}
.val h3{font-size:1.05rem;margin-bottom:10px;color:var(--ink)}
.val p{color:var(--ink-3);font-size:13.6px;line-height:1.62}

/* ───────── contact (dark panel) ───────── */
.contact{background:var(--void-2);color:var(--fg);border-top:1px solid var(--rule)}
.contact .shead__h{color:var(--fg)}
.contact .shead__k{color:var(--fg-3)}
.contact .shead__k span{color:var(--arc)}
.contact .shead__p{color:var(--fg-2)}
.contact__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(36px,5vw,72px);align-items:start}
.det{list-style:none;padding:0;margin:clamp(32px,4vw,48px) 0 0;display:flex;flex-direction:column;gap:26px}
.det li{display:flex;flex-direction:column;gap:6px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.det li:last-child{border-bottom:none}
.det__k{font-family:var(--m);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.det__v{font-size:16px;color:var(--fg-2);transition:color .18s;line-height:1.5}
a.det__v:hover{color:var(--arc)}
.det__v--big{font-family:var(--d);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.03em;color:var(--fg)}
.det__v--mono{font-family:var(--m);font-size:14px}

.fwrap{border:1px solid var(--hair);background:var(--void)}
.form{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:18px}
/* The form title and note were --fg-4, 4.0:1 on the form panel; --fg-3 is
   6.7:1. The note's phone link moves to the lighter blue for the same
   reason (3.3:1 to 4.7:1). 28 October 2026. */
.form__t{font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:8px}
.f__l{font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.f__l i{color:var(--arc);font-style:normal}
.f__i{
  width:100%;padding:12px 14px;background:var(--void-3);
  border:1px solid var(--hair);border-radius:3px;color:var(--fg);font-size:15px;
  transition:border-color .18s,background .18s;
}
.f__i:focus{outline:none;border-color:var(--arc);background:var(--void-4)}
.f__i--ta{resize:vertical;min-height:112px;font-family:var(--b);line-height:1.6}
.f__i::placeholder{color:var(--fg-4)}
select.f__i{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);background-position:calc(100% - 19px) 20px,calc(100% - 14px) 20px;background-size:5px 5px;background-repeat:no-repeat}
.f__e{font-size:12px;color:#ff8f8f;min-height:0}
.f.is-bad .f__i{border-color:#ff8f8f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__note{font-size:12.5px;color:var(--fg-3);line-height:1.6}
.form__note a{color:var(--arc-2)}
.form.is-sent .form__note{color:#6fdc8c}

/* ───────── footer (dark) ───────── */
.ftr{background:var(--void);color:var(--fg);padding-top:clamp(48px,6vw,72px)}
.ftr__in{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between;padding-bottom:44px}
.ftr__brand{display:flex;gap:14px;align-items:flex-start;max-width:340px}
.ftr__brand img{width:38px;height:38px}
.ftr__brand p{font-size:13.5px;color:var(--fg-4);line-height:1.65}
.ftr__brand b{color:var(--fg-2);font-weight:600}
.ftr__nav{display:flex;flex-wrap:wrap;gap:52px}
.ftr__nav div{display:flex;flex-direction:column;gap:10px}
.ftr__nav h2,.ftr__nav h4{font-family:var(--m);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);font-weight:500;margin-bottom:4px}
.ftr__nav a{font-size:13.5px;color:var(--fg-2);transition:color .18s}
.ftr__nav a:hover{color:var(--arc)}
.ftr__base{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding-block:20px;border-top:1px solid var(--hair)}
.ftr__base p{font-size:12px;color:var(--fg-4)}

/* ───────── mobile call button ───────── */
.callfab{
  position:fixed;right:18px;bottom:18px;z-index:90;display:none;
  width:54px;height:54px;border-radius:50%;background:var(--arc);color:#fff;
  place-items:center;box-shadow:0 10px 26px -6px rgba(26,102,224,.5);
}

/* ───────── reveal (progressive enhancement only) ───────── */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ───────── responsive ───────── */
@media (max-width:1120px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps .step:nth-child(5){grid-column:span 2}
  .spec{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .sites{grid-template-columns:1fr}
  .vals{grid-template-columns:repeat(2,1fr)}
  .hero__in{grid-template-columns:1fr;gap:36px}
  .hero__fig{max-width:480px}
  .about__in{grid-template-columns:1fr}
  .about__fig{max-width:480px}
  .contact__in{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal__i,.gal__i--tall{grid-column:span 1;grid-row:span 1}
  .gal__i--tall{grid-column:span 2;grid-row:span 1}
  .hero::after{background:linear-gradient(180deg,rgba(13,27,42,.9) 0%,rgba(13,27,42,.86) 60%,rgba(13,27,42,.3) 92%,rgba(13,27,42,.1) 100%)}
}
@media (max-width:820px){
  .nav{
    position:fixed;inset:var(--hdr) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-2);border-bottom:1px solid var(--rule);padding:8px var(--pad) 20px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav>a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
  .nav .btn{margin-top:14px}
  .burger{display:flex}
  /* The logo is a dark square with the name set small inside it; at 26px it
     read as a black tile. 40px lets the mark show, and the "Austek." beside
     it carries the name (phone audit, 28 October 2026). */
  .brand img{width:40px;height:40px}
  .trust__in{grid-template-columns:repeat(2,1fr)}
  .trust__i:nth-child(3){border-left:none}
  .trust__i:nth-child(n+3){border-top:1px solid var(--rule)}
  .callfab{display:grid}
  /* The call button covers the bottom 72px of the screen (54px + 18px).
     96px under the footer lets the last line scroll fully clear of it, and
     the scroll padding keeps a field the browser scrolls to on focus (or
     after a failed send) above it rather than under it. */
  .ftr{padding-bottom:96px}
  html{scroll-padding-bottom:88px}
  /* While someone is typing in the quote form the button sat over the right
     end of the field; it steps aside until the field loses focus. */
  .callfab{transition:opacity .2s,visibility .2s}
  body:has(.f__i:focus) .callfab{opacity:0;visibility:hidden}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr;grid-auto-rows:220px}
  .gal__i--tall{grid-column:span 1}
  .hero__cta{flex-direction:column;align-items:stretch}
  .spec{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .steps .step:nth-child(5){grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .mq__t{animation:none}
}

/* ───────── weld motif: side seam ───────── */
.weld-side{
  position:fixed;left:0;top:0;z-index:40;
  width:46px;height:100vh;
  pointer-events:none;
}

/* ───────── weld motif: boxed outlines ───────── */
.weldbox-host{position:relative}
.weldbox{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:3;
}
.wb-bead,.wb-tip{fill:none}
.wb-bead{
  stroke:rgba(52,92,150,.55);stroke-width:2;
  stroke-dashoffset:var(--wb-p,9999);
}
.wb-tip{
  stroke:#4a95ff;stroke-width:3;stroke-linecap:round;opacity:0;
  stroke-dashoffset:var(--wb-p,9999);
  filter:drop-shadow(0 0 5px rgba(74,149,255,.85));
}
.is-welded .wb-bead{animation:wbDraw 2.3s cubic-bezier(.45,0,.25,1) forwards}
.is-welded .wb-tip{animation:wbDraw 2.3s cubic-bezier(.45,0,.25,1) forwards, wbTip 2.3s linear forwards}
@keyframes wbDraw{from{stroke-dashoffset:var(--wb-p)}to{stroke-dashoffset:0}}
@keyframes wbTip{0%{opacity:0}5%{opacity:1}90%{opacity:1}100%{opacity:0}}

/* the form sits on a dark panel — warm the bead so it reads there */
.fwrap .wb-bead{stroke:rgba(120,180,255,.4)}

@media (prefers-reduced-motion:reduce){
  .weld-side{display:none}
  .is-welded .wb-bead,.is-welded .wb-tip{animation:none}
  .wb-bead{stroke-dashoffset:0}
  .wb-tip{display:none}
}

/* ───────── phones: tighten the rhythm ─────────
   The desktop scale left the page 14 screens tall on a 375px phone,
   with the hero alone taking 1.5 screens before any proof of work. */
@media (max-width:640px){
  :root{--sec:clamp(52px,11vw,132px)}

  /* hero: smaller floor on the display type, tighter internal gaps */
  .hero{padding-top:calc(var(--hdr) + 32px);padding-bottom:40px}
  .hero__h1{font-size:clamp(2.55rem,12.5vw,7.2rem)}
  .hero__sub{margin-top:16px;font-size:1rem;line-height:1.6}
  .hero__cta{margin-top:24px;gap:10px}
  .creds{margin-top:26px;padding-top:18px;gap:9px}
  .creds li{font-size:11.5px;gap:11px}
  .hero__fig{max-width:none}
  .hero__fig img{aspect-ratio:4/3}

  /* section headers carried desktop air */
  .shead{margin-bottom:30px}
  .shead__k{margin-bottom:13px}
  .shead__p{margin-top:14px;font-size:15px}

  /* gallery: a grid reads as work, a single column reads as a scroll */
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:8px}
  .gal__i{grid-column:span 1;grid-row:span 1}
  .gal__i--tall{grid-column:span 1;grid-row:span 2}
  .gal__c{padding:10px 11px;font-size:9.5px;letter-spacing:.08em}

  /* about was the worst offender at 2.4 screens */
  .about__in{gap:26px}
  .about__fig{max-width:none}
  .about__fig img{aspect-ratio:4/3}
  .quote{margin-bottom:24px;padding:16px 0 16px 18px}
  .prose{gap:14px}
  .prose p{font-size:14.5px}
  .vals{margin-top:36px}

  /* contact */
  .det{margin-top:26px;gap:18px}
  .det li{padding-bottom:16px}
  .form{padding:20px;gap:15px}

  .cards .card,.site,.val,.step{padding:20px}
  .ftr{padding-top:44px}
  .ftr__in{gap:32px;padding-bottom:32px}

  /* Mobile review, 15 October 2026 */
  /* The hero photo is a tall portrait cut to 4:3 on a phone; centred, the
     crop kept the pipe and lost the welder's mask above it. Framing from
     near the top keeps the welder, the pipe and the sparks in the picture. */
  .hero__fig img{object-position:50% 15%}
  /* Work captions sat at 9.5px on light, metallic photos and could not be
     read; a larger size and a deeper shade under them. */
  .gal__c{font-size:11px;padding:28px 11px 10px;background:linear-gradient(rgba(13,27,42,0),rgba(13,27,42,.82) 45%,rgba(13,27,42,.95))}
  /* 15px fields make iOS Safari zoom the page on focus; 16px does not. */
  .f__i{font-size:16px}
  /* The four values were two columns of eleven-word lines at 13.6px; one
     column reads as sentences. */
  .vals{grid-template-columns:1fr}
  .val p{font-size:15px}

  /* Phone audit, 17 October 2026 */
  /* The small labels (stat strip, section, spec, site status, form,
     contact and footer) were 10-11.5px and mostly faint, as low as 2.6:1.
     They are now 12px at 4.5:1 or better at every width: the values moved
     into the base rules above on 18 October so desktop reads the same. */
  /* Process step text was 13.6px; 15px matches the values below it. */
  .step p{font-size:15px}
  /* The two phone numbers sat 6px apart, easy to tap the wrong one. Each
     is now at least 44px tall with clear space between them. */
  .det__v--big[href^="tel:"]{padding-bottom:8px}
  .det__v--big + a.det__v[href^="tel:"]{padding-block:10px}
  /* Footer links were 22px tall with 10px between them; padding makes
     each one a 44px tap and replaces the gap. */
  .ftr__nav div{gap:0}
  .ftr__nav a{padding-block:11px}
  /* The footer's 96px bottom padding, which lets the page scroll clear of
     the floating call button, now sits in the 820px block with the button
     itself, so tablets get it too (28 October 2026). */

  /* Phone audit, 28 October 2026: no reading text under 13px on a phone.
     These labels were 10.5-12.5px. Same fonts, case and colours; the
     letter-spacing on the work captions comes in a little so the larger
     words still fit two lines on a 140px tile. */
  .tag,.creds li,.hero__fig figcaption,.trust__i span,.site__loc,
  .quote footer b,.quote footer span,.form__t,.form__note{font-size:13px}
  /* At 13px the stat labels ran into the column rule on a 360px phone. */
  .trust__i{padding-inline:6px}
  .trust__i span{letter-spacing:.06em}
  .gal__c{display:block;font-size:13px;letter-spacing:.04em;line-height:1.45;padding:24px 10px 9px}
  .gal__c i{margin-right:2px}
}

/* ───────── footer credit ─────────
   "Website by Position Xero" at the end of the copyright line (owner's
   instruction, 15 October 2026), coloured like the footer links. It never
   breaks inside itself; on phones it takes its own line and the dot before
   it goes, so no separator is left hanging. */
.ftr__credit{white-space:nowrap}
.ftr__credit a{color:var(--fg-2);transition:color .18s}
.ftr__credit a:hover{color:var(--arc)}
@media (max-width:640px){
  .ftr__sep{display:none}
  .ftr__credit{display:block;margin-top:6px}
  .ftr__credit a{display:inline-block;padding:4px 0}
}