/* ============================================================
   AUTOHIVE BUSINESS CONSULTING: design system
   AutoHive Brand Guide V6 compliant.
   Primary colours carry 80% of every layout: Navy #0A1F44,
   Teal #009688, Gold #F5A623, White. The division secondary,
   Steel Blue #33578C, 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-04.svg");
  --ah-motif-accent:#33578C;
  --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) */
  --teal-deep:#00786C;      /* shade of brand teal, for text on white (5.4:1) */
  --flag:#C62828;           /* boundary tag only, never a heading or a link (5.6:1) */
  --steel:#33578C;         /* division secondary: zones only, never text */
  --ah-cta-accent: #33578C;
  --ah-cta-border: #2A4773;
  --white:#FFFFFF;
  --ink:#0A1F44;
  --ink-soft:#33415E;
  --ground:#FFFFFF;
  --ground-quiet:#F5F7FA;
  --line:#E3E8F0;
  --max:1200px;          /* body text stays capped at 66ch by .measure, so
                            widening only lets grids and cards use the screen */
}

* { 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(--steel); }

/* ---------- hero ---------- */
.hero { background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.hero .wrap { max-width:var(--max); margin:0 auto; position:relative;
  padding:clamp(58px,5.5vw,84px) 24px clamp(66px,6vw,96px); }
.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. */
/* 96px top and bottom meant 192px of dead white between every pair of
   sections, which read as a gap rather than as breathing room. Scaled to
   the viewport instead: tight on a laptop, generous on a large monitor,
   and never the full 192px band again. */
.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 steel blue (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(--steel);
  background:var(--white); flex:none; }
.circuit .node--fill { background:var(--steel); }
.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:36px; }
/* 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)); }
/* A square portrait beside a text column sets the row height to the image,
   so the text finishes early and leaves a hole beside it. Give the picture
   the smaller share and let both columns start at the top. */
.grid--portrait { align-items:start; }
@media (min-width:860px) {
  .grid--portrait { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); }
}
.grid--portrait img { width:100%; height:auto; border-radius:14px; display:block; }
.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(--steel));
  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(--steel));
  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(--steel)); }
.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); }

/* Boundary cards. The block itself stays identical to every other card,
   steel blue rule and all, because a recoloured card pulls the eye away
   from the cards that describe work we actually take. The whole signal
   is one small red tag above the name badge. PIF: say no plainly and
   early so nobody spends weeks discovering it, and keep the reason in
   the body so the no reads as scope, not as a judgement of the reader. */
/* Sister brand cards. Wherever this site points at another division, the
   card wears that division's own hexagon and its own colour on the top
   rule, so the reader recognises where the link is sending them before
   reading a word of it. The rule is the only recoloured element: heading
   text stays navy, because a division secondary is never a text colour. */
.card--ah      { --svc:#F5A623; }   /* AutoHive, the parent */
.card--mkt     { --svc:#D16621; }   /* Agentic Digital Marketing */
.card--web     { --svc:#E5A100; }   /* Website Development */
.card--tank    { --svc:#D81B60; }   /* The Think Tank SA */
.card--net     { --svc:#218C5E; }   /* BeeHive Networking */
.card--castle  { --svc:#E91E63; }   /* Glass Castle Properties */

/* Same flag, running inline ahead of a term rather than above a card. */
.tag-inline { display:inline-block; margin-right:9px; padding:3px 10px 2px;
  border-radius:999px; background:var(--flag); color:var(--white);
  font-size:.64rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  vertical-align:2px; white-space:nowrap; }

.card-tag { align-self:flex-start; margin-bottom:14px; padding:5px 12px 4px;
  border-radius:999px; background:var(--flag); color:var(--white);
  font-size:.74rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.35; }

/* ---------- CTA ----------
   Primary CTAs now use the shared .ah-cta component (/ah-shared/estate-cta.css),
   themed via --ah-cta-accent / --ah-cta-border in :root above. The .btn base
   rule below is kept only as shared pill layout for .btn--ghost (secondary
   CTAs); background/color were dropped since .btn--ghost always overrides
   them and no element uses solid .btn alone anymore. */
.btn { display:inline-block; 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(51,87,140,.45); outline-offset:2px; }
.btn--ghost { background:transparent; color:var(--white); border:2px solid var(--steel);
  filter:none; }
.btn--ghost:hover { background:rgba(51,87,140,.16); filter:none; }
.cta-block { text-align:center; padding:38px 24px 52px; }
.cta-block h2 { margin:14px auto 0; }
.cta-block .btn { 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(--steel); 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 { 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; }
}

/* ---------- value chain diagram ----------
   Governance runs as a foundation bar with the three operating
   buckets standing on it. Scales down to a single column on
   narrow screens where the horizontal read stops working. */
.vc-figure { margin-top:40px; }
.vc-diagram { width:100%; height:auto; display:block; }
.vc-figure figcaption { margin-top:16px; font-size:.93rem; color:var(--ink-soft);
  max-width:70ch; }
.vc-legend { list-style:none; margin-top:26px; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
/* Each legend entry is identified by its own icon, not by a colour name.
   Naming a colour in the copy asks the reader to learn our palette, and
   it leaves anyone who cannot separate the hues with nothing to go on.
   The icon carries the identity, the tint keys it back to the diagram. */
.vc-legend li { position:relative; padding-left:34px; font-size:.95rem; }
.vc-ico { position:absolute; left:0; top:2px; width:24px; height:24px;
  color:var(--bucket,var(--steel)); fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* Plain words. Every metaphor and every deliberate contradiction on the
   page gets unpacked here in literal language. A reader who did not catch
   the figure of speech should lose nothing, and a reader who did should
   still find the paradox worth reading. Quiet by design: this explains
   the argument, it does not compete with it. */
.gloss { margin-top:30px; padding:24px 28px 22px; border:1px solid var(--line);
  border-left:3px solid var(--teal); border-radius:12px; background:#F7FAFA; }
.gloss h3 { margin:0 0 4px; font-size:1rem; }
.gloss > p { margin-top:6px; color:var(--ink-soft); font-size:.93rem; }
.gloss dl { margin-top:16px; display:grid; gap:14px; }
.gloss dt { font-weight:900; font-size:.95rem; color:var(--ink); }
.gloss dd { margin:4px 0 0; color:var(--ink-soft); font-size:.93rem; }
.gloss dt .lit { font-weight:400; color:var(--ink-soft); }

/* The dissertation panel. The cover is an SVG so it stays sharp on a retina
   screen at roughly four kilobytes, and the PDF behind it is only fetched
   when somebody actually clicks, so it costs the page nothing to sit here. */
.diss { display:grid; gap:30px; align-items:start; margin-top:34px;
  grid-template-columns:minmax(0,1fr); }
@media (min-width:820px) {
  .diss { grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:44px; }
}
.diss__cover { display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 16px 40px rgba(10,31,68,.22); border:1px solid var(--line); }
.diss__body h3 { margin:0 0 4px; font-size:1.12rem; line-height:1.3; }
.diss__body .cite { margin:0 0 16px; font-size:.9rem; color:var(--ink-soft); }
.diss__facts { list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; }
.diss__facts li { position:relative; padding-left:20px; font-size:.93rem; color:var(--ink-soft); }
.diss__facts li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px;
  border-radius:2px; background:var(--steel); }
.diss__facts b { color:var(--ink); font-weight:900; }
.diss__meta { margin-top:12px; font-size:.85rem; color:var(--ink-soft); }

/* ---------- booking form ----------
   minmax(0,1fr) on the grid and a hard cap on every control, because a
   select sized by its longest option will otherwise push the column wider
   than the phone and the section will clip it. */
.bookform { margin-top:26px; max-width:760px; }
.bookform .grid { margin-top:0; }
.field { display:flex; flex-direction:column; gap:6px; margin-top:18px; min-width:0; }
.field label { font-weight:700; font-size:.95rem; color:var(--ink); }
.field .opt { font-weight:400; color:var(--ink-soft); }
.field input, .field select, .field textarea {
  width:100%; max-width:100%; padding:12px 14px; font:inherit; font-size:1rem;
  color:var(--ink); background:var(--white); border:1px solid var(--line);
  border-radius:10px; }
.field textarea { resize:vertical; min-height:96px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline:3px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.field--check { flex-direction:row; align-items:flex-start; gap:11px; }
.field--check input { width:20px; height:20px; flex:none; margin-top:2px; }
.field--check label { font-weight:400; font-size:.93rem; color:var(--ink-soft); }
.bookform button[disabled] { opacity:.55; cursor:progress; }
#screenOut .card { max-width:640px; }

.references { margin-top:52px; padding-top:22px; border-top:1px solid var(--line); }
.references h2 { font-size:1.05rem; }
.references ol { margin-top:14px; padding-left:20px; }
.references li { font-size:.9rem; color:var(--ink-soft); margin-top:8px; }