/* ============================================================
   AGENTIC DIGITAL MARKETING: design system
   AutoHive Brand Guide V6 compliant.
   Primary colours carry 80% of every layout: Navy #0A1F44,
   Teal #009688, Gold #F5A623, White. The division secondary,
   Burnt Orange #D16621, appears ONLY in defined zones: icon
   hexagon borders, line-element nodes, accent chips, dividers.
   Text is never set in a secondary colour (guide rule 5).
   The bee appears at most twice per page, always with intent:
   it flies toward the action we want the reader to take.
   ============================================================ */

@font-face { font-family:'Lato'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/lato-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-weight:700; font-style:normal; font-display:swap;
  src:url('fonts/lato-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-weight:900; font-style:normal; font-display:swap;
  src:url('fonts/lato-latin-900-normal.woff2') format('woff2'); }

:root {
  --ah-motif-line:url("/ah-shared/brand/circuit-line-05.svg");
  --ah-motif-accent:#D16621;
  --ah-cta-accent: #D16621;
  --ah-cta-border: #AB541B;
  --navy:#0A1F44;
  --teal:#009688;
  --gold:#F5A623;
  --honey:#E5A100;          /* darkened gold, decorative roles only */
  --teal-light:#73C5BE;     /* tint of brand teal, for text on navy (8:1) */
  --orange:#D16621;         /* division secondary: zones only, never text */
  --white:#FFFFFF;
  --ink:#0A1F44;
  --ink-soft:#33415E;
  --ground:#FFFFFF;
  --ground-quiet:#F5F7FA;
  --line:#E3E8F0;
  --max:1080px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Lato',Arial,sans-serif; color:var(--ink); background:var(--ground);
  line-height:1.7; font-size:1.0625rem; -webkit-font-smoothing:antialiased; }
img, svg { max-width:100%; height:auto; }
a { color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(0,150,136,.35); }
a:hover, a:focus-visible { border-bottom-color:var(--teal); }
a:focus-visible { outline:3px solid rgba(0,150,136,.4); outline-offset:2px; }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--navy);
  padding:10px 18px; z-index:100; border:0; font-weight:700; }
.skip-link:focus { left:12px; top:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- header ---------- */
.site-head { background:var(--navy); color:var(--white); }
.site-head .bar { max-width:var(--max); margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.brand-lockup { display:flex; align-items:center; gap:14px; border:0; }
.brand-lockup img { height:44px; width:auto; }
.brand-lockup .division { color:var(--white); font-weight:900; font-size:1.05rem;
  letter-spacing:.02em; line-height:1.25; }
.brand-lockup .division small { display:block; color:rgba(255,255,255,.72); font-weight:700;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.site-nav { display:flex; gap:22px; flex-wrap:wrap; }
.site-nav a { color:rgba(255,255,255,.88); border:0; font-weight:700; font-size:.95rem;
  padding-bottom:3px; border-bottom:2px solid transparent; }
/* Division accent as a rule under the label, never as text colour. */
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--white);
  border-bottom-color:var(--orange); }

/* ---------- hero ---------- */
.hero { background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.hero .wrap { max-width:var(--max); margin:0 auto; padding:96px 24px 110px; position:relative; }
.hero h1 { font-size:clamp(2.1rem,5vw,3.4rem); font-weight:900; line-height:1.12;
  max-width:19ch; }
/* Headings on navy use white or brand teal (Guide V6). Never gold:
   gold reads as the Web Development division. */
.hero h1 em { color:var(--teal-light); font-style:normal; }
.hero .lede { margin-top:26px; max-width:58ch; font-size:1.2rem; color:rgba(255,255,255,.85); }
.hero .honeycomb { position:absolute; right:-140px; top:-60px; width:480px; opacity:.08;
  pointer-events:none; }
/* No motifs on the hero. Hero imagery changes; the brand devices
   dress the quiet parts of the page instead. See estate-motifs.css. */

/* ---------- sections & white space ----------
   White space is a brand element. Sections breathe: the reader
   is never crowded, and the line elements guide the eye through
   the emptiness rather than filling it. */
.section { padding:clamp(26px,2.6vw,38px) 24px; position:relative; overflow:hidden; }
.section--quiet { background:var(--ground-quiet); }
/* A divider sits between two sections and adds its own 34px, which pushed
   that particular gap to 2.9cm while every other gap was 2cm. Pull the
   padding in on the two sections either side so the divider is absorbed
   into the 2cm rather than added on top of it. */
.section:has(+ .circuit) { padding-bottom:20px; }
.circuit + .section { padding-top:20px; }
.section--navy { background:var(--navy); color:var(--white); }
.section--navy p { color:rgba(255,255,255,.85); }
/* The white space either side of the content column is dressed by
   the shared estate motifs: circuit line left, bees returning to
   the hive right. See /ah-shared/estate-motifs.css. */
.wrap { max-width:var(--max); margin:0 auto; }
.wrap--narrow { max-width:760px; margin:0 auto; }
.eyebrow { color:var(--teal); font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  font-size:.8rem; }
.section--navy .eyebrow { color:var(--teal-light); }
h2 { font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:900; line-height:1.2; margin-top:10px;
  max-width:26ch; }
h3 { font-size:1.22rem; font-weight:700; margin-top:8px; }
.section p + p { margin-top:1em; }
.measure { max-width:66ch; }
.mt-1{margin-top:14px} .mt-2{margin-top:26px} .mt-3{margin-top:44px} .mt-4{margin-top:64px}

/* ---------- the line elements ----------
   Circuit line: a 2px technical line in a primary colour that
   travels the white space between sections. On this division's
   pages its NODES may be burnt orange (guide: secondary as a
   subtle node accent on service pages). */
.circuit { display:flex; align-items:center; gap:0; max-width:var(--max);
  margin:0 auto; padding:0 24px; height:34px; }
.circuit .track { flex:1; height:2px; background:var(--teal); position:relative; border-radius:1px; }
.circuit .node { width:10px; height:10px; border-radius:50%; border:2px solid var(--orange);
  background:var(--white); flex:none; }
.circuit .node--fill { background:var(--orange); }
.circuit--gold .track { background:var(--gold); }

/* The bee rides every divider, injected by bee-flight.js rather than
   written into the markup of every page. It travels inside the existing
   34px divider, so animating the line costs no extra vertical space.
   With reduced motion or without JavaScript the bee simply sits at the
   destination node, which is where the eye should end up anyway. */
.circuit__bee { position:absolute; top:50%; left:0; width:26px; height:26px;
  transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.circuit.is-flying .circuit__bee {
  animation:circuitBee 2.2s cubic-bezier(.33,0,.2,1) forwards; }
.circuit.has-landed .circuit__bee { opacity:1; left:100%; }
@keyframes circuitBee {
  0%   { left:0;    opacity:0; transform:translate(-50%,-50%) rotate(-8deg); }
  14%  { opacity:1; }
  45%  { transform:translate(-50%,-50%) translateY(-7px) rotate(5deg); }
  75%  { transform:translate(-50%,-50%) translateY(2px) rotate(-3deg); }
  100% { left:100%; opacity:1; transform:translate(-50%,-50%) rotate(0deg); }
}
@media (prefers-reduced-motion:reduce) {
  .circuit.is-flying .circuit__bee { animation:none; opacity:1; left:100%; }
}

/* Bee flight: the brand line element, animated. The line is teal
   and the bee is gold, exactly as the brand asset draws it. The
   bee flies in when the line scrolls into view and lands on the
   node above the call to action, cueing the eye to the decision.
   Fires once per page. Animation driven by assets/bee-flight.js;
   without JavaScript or with reduced motion, the bee simply sits
   at the destination. */
.bee-flight { position:relative; max-width:var(--max); margin:0 auto; padding:0 24px;
  height:70px; }
.bee-flight__track { position:absolute; left:24px; right:24px; top:50%;
  height:3px; background:var(--teal); border-radius:2px; transform:translateY(-50%); }
.bee-flight__origin, .bee-flight__dest { position:absolute; top:50%; width:16px; height:16px;
  border-radius:50%; border:3px solid var(--teal); background:var(--white);
  transform:translate(-50%,-50%); }
.bee-flight__origin { left:24px; }
.bee-flight__dest { right:24px; transform:translate(50%,-50%); }
.bee-flight__bee { position:absolute; top:50%; left:24px; width:42px; height:42px;
  transform:translate(-50%,-50%); opacity:0; }
.bee-flight.is-flying .bee-flight__bee { animation:beeFlight 2.4s cubic-bezier(.33,0,.2,1) forwards; }
.bee-flight.has-landed .bee-flight__bee { opacity:1; left:calc(100% - 24px);
  transform:translate(-50%,-50%); }
.bee-flight.has-landed .bee-flight__dest { background:var(--teal); }
@keyframes beeFlight {
  0%   { left:24px;  opacity:0; transform:translate(-50%,-50%) rotate(0deg); }
  12%  { opacity:1; }
  35%  { transform:translate(-50%,-90%) rotate(-7deg); }
  65%  { transform:translate(-50%,-20%) rotate(5deg); }
  100% { left:calc(100% - 24px); opacity:1; transform:translate(-50%,-50%) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bee-flight.is-flying .bee-flight__bee { animation:none; opacity:1;
    left:calc(100% - 24px); }
}

/* ---------- cards & grids ----------
   ESTATE BOX RULE (all AutoHive sites): a box is an action, never
   an ornament. Every card either IS a link (a.card) or ends in a
   .card-cta. Anatomy: accent top rule in the division colour, head
   row (hexagon icon + title), tag line, at most three bullets,
   then the call to action. Hover lifts, telling the hand it is
   clickable. Modelled on the estate gcard (webdev/thinktank). */
.grid { display:grid; gap:28px; margin-top:44px; }
/* min() so the 410px floor cannot exceed the viewport. A bare minmax(410px)
   forces a 410px track on a 375px phone, and because .section clips overflow
   the card is silently cut off rather than visibly scrolling. */
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(min(410px,100%),1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card { background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:26px 28px 24px; border-top:3px solid var(--svc,var(--orange));
  display:flex; flex-direction:column; }
a.card { color:inherit; text-decoration:none; }
a.card:hover, a.card:focus-visible { transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(10,31,68,.14); border-bottom-color:var(--line); }
.card { transition:transform .18s ease, box-shadow .18s ease; }
.section--quiet .card { border-color:transparent; border-top:3px solid var(--svc,var(--orange));
  box-shadow:0 4px 18px rgba(10,31,68,.06); }
.card-head { display:flex; align-items:center; gap:12px; }
.card-head .hex-icon { width:46px; height:46px; margin:0; flex:none; }
.card .hex-icon { width:46px; height:46px; margin-bottom:14px; }
.card h3 { margin-top:0; font-size:1.08rem; line-height:1.3; }
.card p { margin-top:10px; color:var(--ink-soft); font-size:.98rem; }
.card ul { list-style:none; margin-top:12px; display:grid; gap:6px; }
.card li { position:relative; padding-left:18px; font-size:.92rem; color:var(--ink-soft); }
.card li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px;
  border-radius:50%; background:var(--svc,var(--orange)); }
.card-cta { margin-top:auto; padding-top:16px; font-weight:900; font-size:.93rem;
  color:var(--teal); border:0; }
.card-cta::after { content:" \2192"; }
a.card .card-cta, .card a.card-cta:hover { color:var(--teal); }

/* ---------- CTA ----------
   Buttons carry the division sub-brand: burnt orange, matching the
   Agentic Digital Marketing hexagon. Bold white label at AA large-text
   contrast on #D16621. */
.btn { display:inline-block; background:var(--orange); color:var(--white); font-weight:900;
  padding:15px 34px; border-radius:999px; border:0; font-size:1.02rem; cursor:pointer; }
.btn:hover { filter:brightness(.88); }
.btn:focus-visible { outline:3px solid rgba(209,102,33,.45); outline-offset:2px; }
.btn--ghost { background:transparent; color:var(--white); border:2px solid var(--orange);
  filter:none; }
.btn--ghost:hover { background:rgba(209,102,33,.16); filter:none; }
.cta-block { text-align:center; padding:38px 24px 52px; }
.cta-block h2 { margin:14px auto 0; }
.cta-block .btn, .cta-block .ah-cta { margin-top:34px; }
.cta-block .note { margin-top:18px; color:var(--ink-soft); font-size:.95rem; }

/* ---------- tables ---------- */
.tbl-scroll { overflow-x:auto; margin-top:36px; }
table { border-collapse:collapse; width:100%; min-width:640px; }
th { text-align:left; background:var(--navy); color:var(--white); padding:13px 16px;
  font-size:.92rem; letter-spacing:.03em; }
td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; font-size:.97rem; }
tr:nth-child(even) td { background:var(--ground-quiet); }

/* ---------- pricing ---------- */
.tiers { display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:48px; align-items:stretch; }
.tier { border:1px solid var(--line); border-radius:16px; padding:36px 30px; background:var(--white);
  display:flex; flex-direction:column; }
.tier--lead { border:2px solid var(--orange); box-shadow:0 12px 34px rgba(10,31,68,.10); }
.tier .name { font-weight:900; font-size:1.25rem; }
.tier .for { color:var(--ink-soft); font-size:.92rem; margin-top:4px; min-height:2.6em; }
.tier .price { font-weight:900; font-size:2rem; margin-top:18px; }
.tier .price small { font-weight:700; font-size:.9rem; color:var(--ink-soft); }
.tier ul { list-style:none; margin-top:22px; flex:1; }
.tier li { padding:8px 0 8px 30px; position:relative; font-size:.97rem; }
.tier li::before { content:""; position:absolute; left:0; top:13px; width:14px; height:14px;
  background:var(--teal); clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); }
.tier .btn, .tier .ah-cta { margin-top:26px; text-align:center; }

/* ---------- glossary ---------- */
.term { border-bottom:1px solid var(--line); padding:26px 0; }
.term dt { font-weight:900; font-size:1.08rem; }
.term dd { margin-top:8px; color:var(--ink-soft); max-width:70ch; }

/* ---------- faq ---------- */
details { border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin-top:14px;
  background:var(--white); }
summary { font-weight:700; cursor:pointer; }
details p { margin-top:12px; color:var(--ink-soft); }

/* ---------- footer ----------
   Four column estate sitemap, matching web.autohive.co.za and the
   other AutoHive sites: division mark and line, this page, the
   division's pages, then the group. */
.site-foot { background:var(--navy); color:var(--white); margin-top:64px; }
.site-foot .foot-grid { max-width:var(--max); margin:0 auto; padding:64px 24px 34px;
  display:grid; gap:40px; grid-template-columns:1.3fr 1fr 1fr 1fr; align-items:start; }
.foot-logo { display:flex; align-items:center; gap:12px; border:0; }
.foot-logo img { width:44px; height:42px; }
.foot-logo span { font-weight:900; font-size:1rem; line-height:1.25; color:var(--white); }
.foot-line { margin-top:16px; font-size:.93rem; color:rgba(255,255,255,.72); max-width:34ch; }
.site-foot h3 { color:var(--teal-light); font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; margin-top:0; font-weight:900; }
.site-foot ul { list-style:none; margin-top:14px; }
.site-foot li { margin-top:9px; }
.site-foot a { color:rgba(255,255,255,.82); border:0; font-size:.94rem; }
.site-foot a:hover { color:var(--white); text-decoration:underline; }
.foot-legal { max-width:var(--max); margin:0 auto; padding:22px 24px 40px;
  border-top:1px solid rgba(255,255,255,.14); font-size:.87rem; color:rgba(255,255,255,.6); }
@media (max-width:860px) { .site-foot .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .site-foot .foot-grid { grid-template-columns:1fr; } }

/* AutoHive Group pills (estate standard) */
.ah-group { max-width:var(--max); margin:0 auto; padding:26px 24px 6px; }
.ah-group__label { color:var(--teal-light); font-weight:900; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; }
.ah-group-strip { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.ah-group-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid
  rgba(255,255,255,.25); border-radius:999px; padding:7px 16px; color:rgba(255,255,255,.85);
  font-size:.85rem; font-weight:700; }
.ah-group-pill:hover { border-color:var(--pill,#F5A623); color:var(--white); }
.ah-group-pill__dot { width:9px; height:9px; border-radius:50%; background:var(--pill,#F5A623); }
.ah-group-pill--parent { border-style:dashed; }

@media (max-width:700px) {
  .section { padding:26px 20px; }
  .hero .wrap { padding:64px 20px 76px; }
  .site-nav { gap:14px; }
}