/* ============================================================
   Tech Hub Australia — "Vermillion" site theme
   ------------------------------------------------------------
   LOAD ORDER MATTERS. This file must come AFTER css/pro.css:

     <link rel="stylesheet" href="css/pro.css?v=20260709">
     <link rel="stylesheet" href="css/v.css?v=20260818">

   It is an OVERRIDE LAYER, not a replacement. pro.css keeps
   providing layout and any component this file doesn't touch,
   so an unconverted section degrades to the old look rather
   than breaking.

   Strategy:
     1. Re-declare pro.css's :root tokens (incl. its inner-page
        compatibility aliases) to the light Vermillion palette.
        Inline styles like style="color:var(--cyan-deep)" then
        land correctly with no page edits.
     2. Switch off the generated-site tells: film grain, cursor
        glow, Three.js canvas, scanline, glassmorphism, gradient
        text, pill radii.
     3. Restate the components that carry the look: type scale,
        header, buttons, cards, sections, footer.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* ground + ink — light-first, replacing the dark space-navy */
  --bg:#FFFFFF;
  --bg-2:#E1E6E6;
  --surface:#FFFFFF;
  --surface-2:#E1E6E6;
  --stroke:#D3D9D9;
  --stroke-2:#C2CACA;
  --ink:#0C0D0D;
  /* #5F6B6B measured 4.38:1 against the grey stage (#E1E6E6) — just under
     the 4.5:1 AA minimum. #566262 gives 5.02:1 on grey and 6.33:1 on white. */
  --muted:#566262;
  --muted-2:#858E8E;

  /* accent — the brand orange, now used as the single hot accent
     instead of being diluted inside a cyan→violet gradient */
  --cyan:#F5821F;
  --cyan-2:#B4560A;
  --violet:#F5821F;
  --blue:#0C0D0D;
  --amber:#F5821F;
  /* darkened for AA against their own tinted badge grounds:
     #1E9E63 on #DFF1E9 was 2.92:1 → #0F6B42 is 5.60:1
     #B4560A on #FDE9D7 was 4.16:1 → #8F4308 is 5.99:1 */
  --good:#0F6B42;
  --warn:#8F4308;

  /* the "plasma" gradient is retired — flat colour everywhere */
  --plasma:#F5821F;
  --plasma-soft:rgba(245,130,31,.12);

  --maxw:1560px;
  --radius:0px;
  --radius-sm:0px;

  --font-display:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono",Consolas,monospace;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;

  /* inner-page compatibility aliases, remapped to the light theme.
     pro.css pointed these at dark values; inline styles on the
     inner pages reference them directly. */
  --cyan-deep:#B4560A;
  --navy-900:#FFFFFF;
  --navy-800:#0C0D0D;
  --navy-700:#1A1E1E;
  --paper:#FFFFFF;
  --paper-2:#E1E6E6;
  --slate:#5F6B6B;
  --slate-light:#858E8E;
  --line:#D3D9D9;

  --v-ease:cubic-bezier(.22,.68,.24,1);
  --v-spring:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. SWITCH OFF THE TELLS ---------- */
.grain,
.cursor-glow,
.scanline,
#bg-canvas,
.hero-mesh,
.stats-glow,
.cta-mesh{display:none !important}

body::before{display:none !important}

body{
  background:var(--bg);
  color:var(--ink);
  font-size:19px;
  line-height:1.5;
  letter-spacing:-.014em;
}

/* glassmorphism → flat bordered surface */
.glass{
  background:var(--surface) !important;
  border:1px solid var(--stroke) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* gradient-filled text → flat accent */
.grad{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:var(--cyan) !important;
}
.outline{
  color:var(--ink) !important;
  -webkit-text-stroke:0 !important;
}

/* the scrolling keyword marquee becomes a static strip */
.hero-marquee{
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  background:var(--surface-2);
  overflow:hidden;
}
.marquee-track{
  animation:none !important;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 28px;padding:16px 22px;transform:none !important;
}
.marquee-track span{
  font-family:var(--font-mono);font-size:.86rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}

/* ---------- 3. TYPE ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:.88;
  /* inherit, never hard-set — a fixed ink colour here rendered
     black-on-black inside every dark section */
  color:inherit;
  /* NOT balance: on headings of 4+ lines Chrome equalises every line to
     the shortest, squeezing them into a narrow ragged column. */
  text-wrap:pretty;
}
/* Inner pages only — the homepage gets its giant scale from v-home.css.
   These containers are narrower than the homepage's full-bleed stages,
   so display-scale type wrapped to one or two words per line. */
h1{font-size:clamp(2.1rem,4.4vw,3.6rem);letter-spacing:-.04em;line-height:.98}
h2{font-size:clamp(1.65rem,2.9vw,2.5rem);letter-spacing:-.034em;line-height:1.06}
h3{font-size:1.28rem;font-weight:600;letter-spacing:-.024em;line-height:1.26}
p{color:var(--muted)}
.lead{font-size:clamp(1.16rem,1.55vw,1.44rem);line-height:1.5;color:var(--muted);max-width:52ch}
.prose p{font-size:1.06rem;line-height:1.6;color:var(--muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-mono);font-size:.85rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:none !important;border:none !important;padding:0 !important;
  border-radius:0 !important;margin-bottom:22px;
}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--cyan);flex:none}
.crumb{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
.crumb a:hover{color:var(--cyan)}

.wrap{max-width:var(--maxw);padding:0 clamp(18px,3.2vw,54px)}
.sec{padding:clamp(78px,10vw,168px) 0}
/* was 24ch/26ch, which throttled headings into a narrow column */
.sec-head{max-width:52rem;margin-bottom:clamp(36px,4.4vw,64px)}
.sec-head.center{margin-left:auto;margin-right:auto;max-width:46rem;text-align:center}
.sec-head h1,.sec-head h2,.page-hero h1,
.sec-head .lead,.sec-head p{
  max-width:none !important;
  width:auto;
  text-wrap:pretty;
}

/* ---------- 4. HEADER ---------- */
/* Solid, always — a transparent header sitting over changing content
   never reads cleanly. Same dark bar on every page, homepage included. */
.site-header,
.site-header.scrolled{
  background:var(--ink) !important;
  color:#FFFFFF;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:none !important;
}
.nav{height:76px}
/* Real brand lockup instead of the placeholder "TH" square.
   Driven from CSS so every page picks it up with no HTML edit,
   and url() resolves from this file — so pages in services/,
   blog/, locations/ and roamhub360/ work at any depth.
   The anchor's text stays in the DOM for screen readers. */
.logo-mark{display:none !important}
.logo{
  display:inline-flex;align-items:center;
  font-size:0;line-height:0;gap:0;flex:none;
}
.logo::before{
  content:"";display:block;flex:none;
  width:clamp(158px,17vw,212px);
  aspect-ratio:851 / 171;
  /* header and footer are both dark, so the reversed lockup is default */
  background:url("../assets/logo-white.png") left center / contain no-repeat;
}
.nav-links>li>a{
  font-family:var(--font-mono);font-size:.79rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  background:transparent !important;
  border-radius:0;
}
.nav-links>li>a:hover,
.nav-links>li>a.active{color:#FFFFFF;background:transparent !important}
.dropdown{
  background:var(--ink);border:none;border-radius:0;
  box-shadow:0 20px 44px -24px rgba(0,0,0,.4);backdrop-filter:none;
}
.dropdown a{color:#99AAAA;border-radius:0;font-size:.86rem}
.dropdown a:hover{color:#fff;background:none;padding-left:20px}
.nav-phone{
  border-radius:0;border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.8);background:transparent !important;
}
.nav-phone:hover{border-color:#FFFFFF;color:#FFFFFF}
.burger span{background:#FFFFFF}
/* the header's own Free IT Assessment button — compact so it fits the
   76px bar, since the site-wide .btn padding is built for page CTAs */
.site-header .btn{
  padding:13px 20px !important;
  font-size:.74rem !important;
  min-height:0;
}
.site-header .btn-primary{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.site-header .btn-primary:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--ink)}
@media(max-width:1100px){
  /* keep the phone + burger; the CTA reappears in the mobile menu */
  .site-header .nav-cta .btn{display:none}
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  font-family:var(--font-mono);font-size:.84rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:0 !important;padding:19px 32px;
  box-shadow:none !important;position:relative;overflow:hidden;
  transition:color .35s var(--v-ease),background .35s var(--v-ease),border-color .35s;
}
.btn-lg{padding:22px 38px;font-size:.88rem}
.btn:hover{transform:none !important;box-shadow:none !important}
.btn-primary,.btn-amber{background:var(--cyan);color:var(--ink);border:1px solid var(--cyan)}
.btn-primary:hover,.btn-amber:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-glass,.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--stroke-2);backdrop-filter:none !important;
}
.btn-glass:hover,.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* Outline buttons sitting on a dark ground. Without this they inherit
   the light-theme ink and render black-on-black — the CTA band, the
   page hero, dark sections and the footer are all dark. */
.cta-band .btn-glass,.cta-band .btn-ghost,
.dark .btn-glass,.dark .btn-ghost,
section.dark .btn-glass,section.dark .btn-ghost,
.page-hero .btn-glass,.page-hero .btn-ghost,
.site-footer .btn-glass,.site-footer .btn-ghost{
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.42) !important;
  background:transparent !important;
}
.cta-band .btn-glass:hover,.cta-band .btn-ghost:hover,
.dark .btn-glass:hover,.dark .btn-ghost:hover,
section.dark .btn-glass:hover,section.dark .btn-ghost:hover,
.page-hero .btn-glass:hover,.page-hero .btn-ghost:hover,
.site-footer .btn-glass:hover,.site-footer .btn-ghost:hover{
  color:var(--ink) !important;
  background:#FFFFFF !important;
  border-color:#FFFFFF !important;
}
.arr{transition:transform .3s var(--v-spring)}
.btn:hover .arr{transform:translateX(5px)}

/* ---------- 6. SECTIONS + CARDS ---------- */
.page-hero{
  background:var(--ink);
  color:#fff;
  padding:clamp(140px,15vw,210px) 0 clamp(56px,7vw,100px);
  border-bottom:none;
}
.page-hero h1,.page-hero h2{color:#fff}
.page-hero p{color:var(--muted-2);font-size:clamp(1.12rem,1.5vw,1.36rem);max-width:52ch}
.page-hero .eyebrow{color:var(--muted-2)}
.page-hero .crumb{color:var(--muted-2)}
.page-hero .crumb a:hover{color:var(--cyan)}

section.dark,.dark{background:var(--ink);color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p,.dark .lead{color:var(--muted-2)}
.dark .card{background:#1A1E1E !important;border-color:rgba(255,255,255,.14) !important}
.dark .card h3{color:#fff}
.dark .eyebrow{color:var(--muted-2)}

.card,.svc-card,.mini-card,.t-card,.stat,.hero-card,.ops-card,.product-band{
  border-radius:0 !important;
  background:var(--surface);
  border:1px solid var(--stroke);
  box-shadow:none !important;
  backdrop-filter:none !important;
  transition:background .3s var(--v-ease),border-color .3s;
}
.card:hover,.svc-card:hover,.mini-card:hover{
  background:var(--surface-2);
  transform:none !important;
  border-color:var(--stroke-2);
}
.svc-card h3,.card h3,.mini-card h3{font-size:1.24rem}
.svc-ic{
  border-radius:0 !important;background:none !important;
  border:1px solid var(--stroke-2);color:var(--cyan-2);
}
.dark .svc-ic{border-color:rgba(255,255,255,.2);color:var(--cyan)}
.more{
  font-family:var(--font-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-2);
}

/* statistics */
.stat .num,.ops-metric .big,.num{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:-.05em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.dark .stat .num,.dark .num{color:#fff}
.stat .lbl,.ops-metric .lbl{
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}

/* pills / tags */
.pill,.product-badge-tag,.tag{
  border-radius:0 !important;font-family:var(--font-mono);
  font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.pill.ok{color:var(--good);background:rgba(30,158,99,.13)}
.pill.warn{color:var(--warn);background:rgba(245,130,31,.16)}
.product-badge-tag,.tag{color:var(--cyan-2);background:rgba(245,130,31,.14)}

/* lists */
.feat-list li,.check-list li{font-size:1.04rem;color:var(--muted);line-height:1.5}
.tick{color:var(--cyan);font-weight:700}

/* testimonials */
.t-card blockquote{
  font-size:1.16rem;line-height:1.35;font-weight:600;
  letter-spacing:-.028em;color:var(--ink);
}
.stars{color:var(--cyan);letter-spacing:.22em}
.av{border-radius:0 !important;background:var(--surface-2);color:var(--muted);font-family:var(--font-mono);font-weight:500}
.who{font-size:1.06rem;font-weight:600}
.role{font-size:.95rem;color:var(--muted-2)}

/* areas */
.areas-grid a{
  border-radius:0 !important;border:1px solid var(--stroke-2);
  color:var(--muted);font-size:.98rem;padding:11px 20px;
}
.areas-grid a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.areas-grid .areas-all{color:var(--cyan-2);border-color:var(--cyan)}
.areas-grid .areas-all:hover{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}

/* client logos */
.logos-label{
  font-family:var(--font-mono);font-size:.8rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}
.client-logo{filter:grayscale(1);opacity:.42}
.client-logo:hover{filter:grayscale(0);opacity:1}
.client-marquee .client-track{animation-duration:52s}

/* CTA band */
.cta-band{
  background:var(--ink) !important;color:#fff;
  border-radius:0 !important;border:none;
  padding:clamp(56px,7vw,110px) clamp(24px,4vw,60px);
}
.cta-band h2{color:#fff}
.cta-band p{color:var(--muted-2)}

/* FAQ + forms keep pro.js behaviour, restyled */
.faq-item{border-radius:0 !important;border:1px solid var(--stroke);background:var(--surface)}
.faq-q{font-size:1.1rem;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
input,select,textarea{
  border-radius:0 !important;background:var(--surface) !important;
  border:1px solid var(--stroke-2) !important;color:var(--ink) !important;
  font-family:var(--font-body);font-size:1rem;
}
input:focus,select:focus,textarea:focus{border-color:var(--cyan) !important;outline:none}
label{font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form-msg{border-radius:0 !important}

/* ---------- 6b. CONTRAST ----------
   --muted-2 (#858E8E) measures 3.36:1 against white — below the WCAG AA
   minimum of 4.5:1 for normal text. It is fine on dark grounds (5.74:1
   against --ink), so rather than darkening the token and breaking the
   dark sections, the light-ground uses are switched to --muted (#5F6B6B,
   5.55:1 against white). */
.logos-label,
.role,
.t-card .role,
.stat .lbl,
.ops-metric .lbl,
.p-sub,
.q .rl,
.crumb{color:var(--muted)}

/* dark contexts keep the lighter tone, which is correct there */
.dark .logos-label,
.dark .role,
.dark .stat .lbl,
.dark .ops-metric .lbl,
.page-hero .crumb,
.site-footer .role,
.stats-sec .stat .lbl{color:var(--muted-2)}

/* ---------- 6c. SPECIFICITY SWEEP ----------
   pro.css sets these from var(--muted-2) at specificity (0,2,0), which
   outranks single-class overrides here. --muted-2 (#858E8E) is correct on
   dark grounds (5.74:1) but fails on light ones (3.36:1, and 2.66:1 on the
   grey product band). No single value clears AA on both white and
   near-black, so light contexts are named explicitly.

   These live on inner pages, which the homepage Lighthouse run never
   measured — found by auditing pro.css directly rather than waiting for
   them to surface. */
.hero-card .sub,
.metric .lbl,
.price-card .price small,
.price-badge .per,
.product-band .hero-card .sub{color:var(--muted)}

/* dark contexts keep the lighter tone, which is correct there */
.dark .hero-card .sub,
.dark .metric .lbl,
.site-footer .hero-card .sub{color:var(--muted-2)}

/* pro.css `.site-footer .foot-h` (0,2,0) was beating `.foot-h` (0,1,0),
   so footer headings rendered grey instead of the accent colour */
.site-footer .foot-h{color:var(--cyan)}

/* ---------- 7. FOOTER ---------- */
.site-footer{background:var(--ink);color:#fff;border-top:1px solid var(--stroke)}
.site-footer p,.foot-blurb,.foot-contact{color:var(--muted-2);font-size:1rem}
.foot-h{
  font-family:var(--font-mono);font-size:.8rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);
}
.foot-grid a{color:var(--muted-2);font-size:1rem}
.foot-grid a:hover{color:#fff}
/* pro.css:296 sets `.site-footer .foot-grid>div>a{color:var(--muted)}` at
   specificity (0,3,1), outranking the (0,1,1) rule above. Since v.css
   redefines --muted to #566262 for light grounds, that rule rendered
   footer links at 3.07:1 on the dark footer. Matching its specificity
   here, and v.css loads later, so this wins. */
.site-footer .foot-grid>div>a,
.site-footer .foot-grid ul a,
.site-footer .foot-contact a{color:var(--muted-2)}
.site-footer .foot-grid>div>a:hover,
.site-footer .foot-grid ul a:hover,
.site-footer .foot-contact a:hover{color:#fff}
/* the footer logo is also an <a> inside .foot-grid, so the rule above
   was reinstating its text alongside the logo image */
.site-footer .logo,
.foot-grid .logo,
.foot-grid a.logo{font-size:0 !important;line-height:0 !important}
.site-footer .logo .logo-mark{display:none !important}
.socials a{border-radius:0 !important;border:1px solid rgba(255,255,255,.16);color:var(--muted-2)}
.socials a:hover{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.foot-bar,.foot-bar a{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.foot-bar a:hover{color:var(--cyan)}

/* sticky mobile CTA bar (added in commit a876776) */
.sticky-cta,.mobile-cta{border-radius:0 !important}

/* ---------- 8. MOTION ---------- */
.reveal{transition:opacity .8s var(--v-spring),transform .8s var(--v-spring)}
[data-tilt]{transform:none !important}

@media(max-width:1100px){
  .nav-links{background:var(--ink)}
  .nav-links>li>a{color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
  .dropdown{background:none;box-shadow:none}
}
@media(max-width:560px){
  body{font-size:17px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}