/* ============================================================
   CabTek concept site , K&G
   Editorial colour system per claude/design-system-method.md
   Brand colours sampled live from cabtek.com.au, 21 Aug 2026:
     blue   #0D72B4   (logo, links)
     orange #FF7205   (CTA)
     slate  #415460   (structural dark, their own section colour)
   Body face Figtree is the client's own. Fraunces is reserved for
   story moments only (numerals, pull quotes) so the system reads as
   technical structure with editorial accents.
   ============================================================ */

:root{
  /* brand */
  --blue:#0D72B4;
  --blue-deep:#0A5C90;
  --orange:#FF7205;
  --orange-deep:#D95E00;

  /* the six editorial backgrounds + two darks */
  --bg-paper:#F8F7F4;
  --bg-white:#FFFFFF;
  --bg-mist:#EAF0F5;
  --bg-sand:#F3EDE3;
  --bg-slate:#415460;
  --bg-ink:#16222A;
  --bg-blue:#0D72B4;

  /* default companion tokens (light grounds) */
  --ink:#1D262C;
  --ink-soft:#53626C;
  --line:rgba(29,38,44,.14);
  --card:#FFFFFF;
  --accent:var(--orange);
  --link:var(--blue);

  --disp:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --story:"Fraunces",Georgia,"Times New Roman",serif;

  --wrap:1180px;
  --r:14px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--body);
  font-size:17px;line-height:1.62;
  color:var(--ink);background:var(--bg-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- ground tokens flip together ---------- */
.g-paper{background:var(--bg-paper)}
.g-white{background:var(--bg-white)}
.g-mist{background:var(--bg-mist)}
.g-sand{background:var(--bg-sand)}
.g-slate{background:var(--bg-slate);--ink:#F2F5F7;--ink-soft:#BCCAD3;--line:rgba(255,255,255,.20);--card:#4B5F6C;--link:#8FD0F5;color:var(--ink)}
.g-ink{background:var(--bg-ink);--ink:#EFF3F5;--ink-soft:#A9BAC4;--line:rgba(255,255,255,.16);--card:#20303A;--link:#8FD0F5;color:var(--ink)}
.g-blue{background:var(--bg-blue);--ink:#FFFFFF;--ink-soft:#D3E9F8;--line:rgba(255,255,255,.28);--card:#1583C9;--link:#FFFFFF;color:var(--ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:84px 0}
section.tight{padding:56px 0}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.g-slate .eyebrow,.g-ink .eyebrow{color:#FFA657}
.g-blue .eyebrow{color:#FFD9B8}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.08;letter-spacing:-.025em}
h2{font-size:clamp(29px,3.5vw,44px)}
h3{font-size:clamp(20px,2vw,25px);letter-spacing:-.018em}
.lede{font-size:clamp(17.5px,1.5vw,20px);color:var(--ink-soft);max-width:62ch;margin-top:16px}
.head{max-width:760px;margin-bottom:44px}

/* ---------- concept banner (workflow demo-hosting §3.3) ---------- */
.concept-bar{
  position:sticky;top:0;z-index:120;
  background:#16222A;color:#F1F5F7;
  font-size:13px;line-height:1.45;letter-spacing:.01em;
  padding:9px 20px;text-align:center;
}
.concept-bar b{color:#FFA657;font-weight:700}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:34px;z-index:110;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:22px;max-width:var(--wrap);margin:0 auto;padding:12px 24px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:4px;flex:1 1 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  white-space:nowrap;font-size:14.5px;font-weight:600;color:#38454E;
  text-decoration:none;padding:9px 12px;border-radius:8px;
}
.nav a:hover{background:var(--bg-mist);color:var(--blue-deep)}
.nav a.on{color:var(--blue-deep);background:var(--bg-mist)}
.btn{
  display:inline-block;background:var(--orange);color:#fff;font-weight:700;
  font-size:15px;letter-spacing:.01em;padding:13px 22px;border-radius:999px;
  text-decoration:none;border:0;cursor:pointer;transition:background .18s ease;
}
.btn:hover{background:var(--orange-deep)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{background:rgba(0,0,0,.04)}
.btn.blue{background:var(--blue)}
.btn.blue:hover{background:var(--blue-deep)}
.head-in .btn{flex:0 0 auto;padding:11px 18px;font-size:14.5px}
@media(max-width:860px){.head-in .btn{display:none}}

/* ---------- hero over photography ----------
   design-system-method "Text over photography":
   content-zone scrim that never thins where copy lands, plus a
   two-layer text-shadow halo set on the shared ancestor so every
   child inherits it. Accent (orange) copy carries the strongest halo. */
.hero{position:relative;min-height:min(78vh,660px);display:flex;align-items:flex-end;overflow:hidden;background:#16222A}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,
      rgba(10,18,24,.90) 0%,
      rgba(10,18,24,.86) 26%,
      rgba(10,18,24,.72) 46%,
      rgba(10,18,24,.46) 68%,
      rgba(10,18,24,.34) 100%),
    linear-gradient(to right, rgba(10,18,24,.62) 0%, rgba(10,18,24,.18) 62%, rgba(10,18,24,0) 100%);
}
.hero-copy{
  position:relative;z-index:2;padding:64px 0 60px;max-width:var(--wrap);margin:0 auto;width:100%;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 2px 18px rgba(0,0,0,.6);
}
.hero-copy .in{max-width:730px;padding:0 24px}
.hero-copy h1{font-size:clamp(34px,5.4vw,62px);color:#fff}
.hero-copy h1 em{
  font-style:normal;color:#FFA657;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.85), 0 4px 26px rgba(0,0,0,.7);
}
.hero-copy p{font-size:clamp(17px,1.7vw,21px);color:#E9EFF3;margin-top:18px;max-width:56ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;text-shadow:none}
.hero-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FFC08F;margin-bottom:16px}

/* ---------- trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding:22px 24px;background:var(--bg-ink);color:#E7EEF2;font-size:15px}
.trust .star{color:#FFB45C;letter-spacing:2px}
.trust b{color:#fff}
.trust small{display:block;font-size:11.5px;color:#93A6B1;letter-spacing:.04em;margin-top:2px}
.trust .item{display:flex;align-items:center;gap:10px}

/* ---------- route cards (audience segmented) ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.routes{grid-template-columns:1fr}}
.route{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.route:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,34,42,.14)}
.route img{height:186px;width:100%;object-fit:cover}
.route .rc{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.route h3{margin-bottom:8px}
.route p{font-size:15.5px;color:var(--ink-soft);flex:1}
.route .go{margin-top:16px;font-weight:700;font-size:14.5px;color:var(--blue);letter-spacing:.01em}
.g-slate .route .go,.g-ink .route .go{color:#8FD0F5}
.route .tag{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
@media(max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:32px}}
.split img{border-radius:var(--r);width:100%;height:100%;max-height:520px;object-fit:cover}

/* ---------- feature list ---------- */
.ticks{list-style:none;margin-top:22px}
.ticks li{position:relative;padding:9px 0 9px 32px;font-size:16.5px}
.ticks li::before{
  content:"";position:absolute;left:2px;top:17px;width:14px;height:8px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}
.ticks li b{font-weight:700}

/* ---------- stat / capability grid ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px}
.stat .n{font-family:var(--story);font-size:38px;font-weight:600;line-height:1;letter-spacing:-.02em}
.stat .l{font-size:14.5px;color:var(--ink-soft);margin-top:10px}

/* ---------- review quote ---------- */
.quote{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:26px 0}
.quote p{font-size:18.5px;line-height:1.55;font-weight:500}
.quote cite{display:block;font-style:normal;font-size:14px;color:var(--ink-soft);margin-top:12px;letter-spacing:.02em}
.quote.big p{font-family:var(--story);font-size:clamp(21px,2.3vw,29px);font-weight:500;line-height:1.35;letter-spacing:-.015em}

/* ---------- case study ---------- */
.case{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
@media(max-width:900px){.case{grid-template-columns:1fr}}
.case-body{padding:44px 42px;background:var(--card)}
.case-media{position:relative;min-height:340px;background:#20303A}
.case-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ask{
  display:inline-block;background:rgba(255,114,5,.13);border:1px dashed var(--orange);
  color:var(--orange-deep);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:6px;
}
.g-slate .ask,.g-ink .ask{color:#FFC08F;background:rgba(255,114,5,.16)}
.ask-frame{
  border:2px dashed rgba(255,255,255,.4);border-radius:10px;
  min-height:300px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:30px;color:#C6D4DC;font-size:14.5px;line-height:1.5;margin:0;
}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-weight:700;font-size:17.5px;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:27px;width:11px;height:11px;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq .a{padding:0 10px 20px 0;color:var(--ink-soft);font-size:16.5px;max-width:70ch}

/* ---------- form ---------- */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.form .row{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;letter-spacing:.03em;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;
}
.field textarea{min-height:110px;resize:vertical}
.form-note{
  background:rgba(255,114,5,.08);border:1px solid rgba(255,114,5,.35);
  border-radius:9px;padding:14px 16px;font-size:14px;line-height:1.5;margin:6px 0 18px;
}
.form-note b{font-weight:700}

/* ---------- footer ---------- */
.foot{background:var(--bg-ink);color:#D7E2E9;padding:64px 0 30px;font-size:15px}
.foot a{color:#9FD3F2}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot h4{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#8DA3B0;font-weight:800;margin-bottom:14px}
.foot ul{list-style:none}
.foot li{margin-bottom:9px}
.foot img{height:40px;margin-bottom:16px}
.foot .disc{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:22px;font-size:13px;color:#93A6B1;line-height:1.6}

/* ---------- misc ---------- */
.pill{display:inline-block;background:var(--bg-mist);color:var(--blue-deep);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:16px}
.rangestrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.rangestrip{grid-template-columns:repeat(2,1fr)}}
.rangestrip a{position:relative;border-radius:var(--r);overflow:hidden;display:block;text-decoration:none}
.rangestrip img{height:210px;width:100%;object-fit:cover;transition:transform .3s ease}
.rangestrip a:hover img{transform:scale(1.04)}
.rangestrip span{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;
  font-weight:700;font-size:16px;
  background:linear-gradient(to top,rgba(8,16,21,.88),rgba(8,16,21,0));
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}
.person{text-align:left}
.person .ph{
  aspect-ratio:1/1;border-radius:var(--r);border:2px dashed var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ink-soft);font-size:13px;padding:16px;line-height:1.45;margin-bottom:14px;
}
.person h4{font-size:18px;font-weight:800;letter-spacing:-.01em}
.person p{font-size:14.5px;color:var(--ink-soft);margin-top:4px}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- pricing component theming hooks ---------- */
.kgp{
  --kgp-disp:var(--disp);--kgp-body:var(--body);
  --kgp-ink:#1D262C;--kgp-muted:#53626C;
  --kgp-bg:var(--bg-mist);--kgp-card:#fff;
  --kgp-accent:#0D72B4;--kgp-accent-2:#FF7205;
  --kgp-line:rgba(29,38,44,.14);
  font-family:var(--kgp-body);color:var(--kgp-ink);background:var(--kgp-bg);padding:88px 24px;
}
.kgp-wrap{max-width:var(--wrap);margin:0 auto}
.kgp-head{max-width:680px;margin-bottom:48px}
.kgp-eyebrow{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--kgp-accent-2)}
.kgp-head h2{font-family:var(--kgp-disp);font-weight:800;line-height:1.08;font-size:clamp(29px,3.5vw,44px);margin:12px 0 14px;letter-spacing:-.025em}
.kgp-head p{color:var(--kgp-muted);font-size:17.5px}
.kgp-grid{display:grid;gap:26px}
.kgp-grid.two{grid-template-columns:1fr 1fr;align-items:stretch}
@media(max-width:900px){.kgp-grid.two{grid-template-columns:1fr}}
.kgp-card{background:var(--kgp-card);border:1px solid var(--kgp-line);border-radius:18px;padding:40px 34px 32px;display:flex;flex-direction:column;position:relative}
.kgp-card.lead{border:2px solid var(--kgp-accent);box-shadow:0 22px 46px rgba(13,114,180,.14)}
.kgp-flag{position:absolute;top:-15px;left:30px;background:var(--kgp-accent);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:6px 16px;border-radius:999px}
.kgp-card h3{font-family:var(--kgp-disp);font-weight:800;font-size:30px;line-height:1.1;letter-spacing:-.022em}
.kgp-for{font-size:14.5px;color:var(--kgp-muted);margin:8px 0 22px;max-width:44ch}
.kgp-stack{list-style:none;border-top:1px solid var(--kgp-line);padding-top:20px;margin-bottom:26px}
.kgp-stack li{position:relative;padding:8px 0 8px 30px;font-size:15.5px}
.kgp-stack li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:8px;border-left:2.5px solid var(--kgp-accent-2);border-bottom:2.5px solid var(--kgp-accent-2);transform:rotate(-45deg)}
.kgp-stack li b{font-weight:700}
.kgp-table{border:1px solid var(--kgp-line);border-radius:13px;overflow:hidden;margin-top:auto}
.kgp-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 20px;background:var(--kgp-card)}
.kgp-row + .kgp-row{border-top:1px solid var(--kgp-line)}
.kgp-row .k{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kgp-muted)}
.kgp-row .k small{display:block;font-weight:500;letter-spacing:.02em;text-transform:none;font-size:12.5px;margin-top:3px;color:var(--kgp-muted)}
.kgp-row .v{text-align:right;font-variant-numeric:tabular-nums}
.kgp-row .amt{font-family:var(--story);font-size:29px;font-weight:600;line-height:1}
.kgp-row .per{font-size:13.5px;color:var(--kgp-muted);margin-left:2px}
.kgp-row.setup{background:rgba(13,114,180,.05)}
.kgp-was{position:relative;display:inline-block;font-family:var(--story);font-size:29px;font-weight:600;color:var(--kgp-muted)}
.kgp-was::after{content:"";position:absolute;left:-4%;top:52%;height:3px;width:0;background:var(--kgp-accent-2);border-radius:2px;transform:rotate(-6deg)}
.kgp.in-view .kgp-was::after{width:108%;transition:width .5s ease .5s}
.kgp-stamp{display:inline-block;margin-left:12px;font-weight:800;font-size:13.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--kgp-accent);border:2.5px solid var(--kgp-accent);border-radius:8px;padding:5px 11px;transform:rotate(-4deg) scale(2.4);opacity:0;vertical-align:6px}
.kgp.in-view .kgp-stamp{opacity:1;transform:rotate(-4deg) scale(1);transition:transform .35s cubic-bezier(.2,1.6,.4,1) 1.05s,opacity .2s ease 1.05s}
@media(prefers-reduced-motion:reduce){.kgp-was::after{width:108%}.kgp-stamp{opacity:1;transform:rotate(-4deg) scale(1)}}
.kgp-badge{display:inline-block;background:var(--kgp-accent-2);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:4px 11px;margin-right:10px;vertical-align:7px}
.kgp-or{display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--kgp-card);border-top:1px solid var(--kgp-line)}
.kgp-or span{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--kgp-muted);padding:8px 0}
.kgp-or::before,.kgp-or::after{content:"";height:1px;background:var(--kgp-line);flex:1}
.kgp-fine{font-size:13px;color:var(--kgp-muted);margin-top:15px;line-height:1.55}
.kgp-fine b{color:var(--kgp-ink);font-weight:700}