/* Aussie Explorer.

   Scrubbed frame sequences on a fixed canvas, with DOM over and under them.

   THE PALETTE IS THE CLIENT'S, sampled from the Figma frames in
   source/figma/ on 2026-09-23. Do not substitute: the accent in particular
   was #e2622b here for a while and the real one is #ff6b3d. */

:root {
  /* THE COLUMN. The nav pill is a centred 1180px bar, so anything that should
     look aligned with it has to start at the same x. Copy used to start at
     --pad from the raw viewport edge, which on a 1920 screen put it 286px
     left of the logo above it. */
  /* MATCHED TO THE DESIGN, 2026-10-09. The design's content column is 1200
     wide starting at x=120 on a 1440 artboard. Ours was a 1180 bar with 72px
     of inner padding, so the real column was 1036 starting at 130: every
     element downstream rendered at about 86 percent of its design size, which
     is why the cards came out short and the showcase phones came out small.

     --col is now the OUTER bar, --pad the gutter, so the inner column is
     --col minus 2 * --pad. 1440 minus 240 is the design's 1200. */
  --col: 1440px;
  --pad: clamp(20px, 8.34vw, 120px);
  --gutter: max(var(--pad), calc((100% - var(--col)) / 2 + var(--pad)));

  /* the fixed nav's height plus its top offset. Panels pad past this so a
     vertically centred heading cannot land underneath the logo. */
  --navh: clamp(96px, 12vh, 132px);

  --night: #080808;   /* dark sections */
  --cream: #faf8f3;   /* light sections */
  --card: #161616;    /* a card on a dark section */
  --field: #ebf3f9;   /* form inputs, both themes */
  --accent: #ff6b3d;

  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.4);
  --line: rgba(255, 255, 255, 0.16);

  --ink-d: #0b0b0b;                    /* text on cream */
  --muted-d: rgba(11, 11, 11, 0.66);
  --faint-d: rgba(11, 11, 11, 0.42);
  --line-d: rgba(11, 11, 11, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: 'Satoshi', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* ---- the journey canvas ------------------------------------------------- */

#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
}

/* A warm grade plus a left-side scrim so the copy always has something to sit
   on. Kept gentle: an over-dark scrim is what made an earlier baked video read
   as "blurry and dark". */
#grade,
.look-grade {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* MATCHED TO THE DESIGN, 2026-10-08. The design scrims a scene with a FLAT
     black: 40 percent on the hero, 20 percent over the Great Ocean Road, and
     nothing else. Ours ran a gradient that reached 82 percent at the left
     edge plus 38 at the top and 45 at the bottom, which is what made the
     whole page read darker and heavier than the design.

     The left bias is kept, because our copy sits over moving footage rather
     than a still and needs something to hold on to, but it is now a lift of
     about 20 points over a 30 percent base instead of a wall. Far left lands
     near 50 percent, the right near 30, against the design's flat 40. */
  background:
    linear-gradient(100deg, rgba(8, 8, 8, 0.30) 0%, rgba(8, 8, 8, 0.10) 46%, rgba(8, 8, 8, 0) 74%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.22) 0%, rgba(8, 8, 8, 0) 22%),
    linear-gradient(0deg, rgba(8, 8, 8, 0.26) 0%, rgba(8, 8, 8, 0) 22%),
    rgba(8, 8, 8, 0.28);
}
.look-grade { position: absolute; z-index: 1; }

/* ---- look-arounds: the opening ------------------------------------------
   An ordinary full-height section with its own canvas, driven by the pointer
   rather than scroll, that you scroll straight past. It covers the fixed
   journey canvas while on screen and reveals it again after, which is why
   there is no handoff logic anywhere. */

.look {
  position: relative;
  z-index: 12;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--night);
}

.look canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- the copy column ---------------------------------------------------- */

.look-copy,
.panel {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--pad);
  padding-top: var(--navh);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  /* they span the viewport so the gutter can do the aligning, so they must
     not eat clicks; only their interactive children may */
  pointer-events: none;
}
/* 640 was a guess; the design's copy column measures 813 at 1440 wide,
   decoded straight out of canvas.fig. At 640 the hero headline wrapped onto
   three lines where the design has two. */
.look-copy > * { max-width: min(813px, 100%); }
.panel > * { max-width: min(640px, 100%); }
.look-copy a, .look-copy button,
.panel.on a, .panel.on button { pointer-events: auto; }

.look-copy { position: relative; z-index: 2; height: 100%; }

.panel {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100vh;
  /* `safe center` centres the copy but refuses to push it off the TOP when it
     is taller than the space under the nav. Plain `center` overflowed both
     ways and put the Sydney chip underneath the logo. */
  justify-content: safe center;
  visibility: hidden;
}
.panel.on { visibility: visible; }

/* THE PANEL ITSELF NEVER ANIMATES, its children do.

   backdrop-filter is cancelled by any ancestor with opacity below 1 or a
   transform, and the Sydney card needs a real frosted blur. Fading the panel
   as a whole flattened it to a black slab, which is exactly what it looked
   like. So the fade lives on the children instead. */
.panel > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.panel.on > * { opacity: 1; transform: none; }
/* ...EXCEPT the handset, which carries a rotation of its own. The reveal
   animation sets `transform: none` on every direct child of a panel once it
   is on screen, so the phone tilted in and then snapped upright about a
   second later (user, 2026-10-08). Its rise is done with translate on a
   custom property instead, so the rotation survives. */
.panel.on > .handset { opacity: 1; transform: rotate(4.97deg); }

/* the wide layout: copy on the left, an app screen on the right */
.panel.wide { flex-direction: row; align-items: center; gap: clamp(24px, 4vw, 64px); }
.panel.wide > * { max-width: none; }
.panel-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: min(620px, 100%); }
/* An app screen only goes on a scene when it is a CLEAN CUT-OUT with a
   transparent background. A crop with the design's own backdrop baked in
   cannot be rescued with a border; it just looks like a mistake in a frame. */
.phone-shot {
  flex: 0 0 auto;
  width: auto;
  height: min(70vh, 500px);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}

/* SPLIT: copy on the left, a card on the RIGHT.
   Sydney's card used to sit under the heading on the left, directly on top of
   the Opera House. The plane's tail is generic and the Opera House is the
   landmark, so the card covers the plane instead. */
.panel.split { justify-content: safe center; align-items: center; }
.panel.split .panel-copy { flex: 1 1 46%; }
.panel.split .glass { flex: 0 1 min(480px, 48%); margin-top: 0; }

/* ---- type --------------------------------------------------------------- */

h1, h2 {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  /* min(vw, vh) ties the heading to the SMALLER dimension. Sizing on width
     alone made a wide-but-short window produce a heading tall enough to push
     the Sydney card off the bottom of the screen. */
  /* Decoded from the 1440x8277 artboard: the hero is 64 and every section
     heading is 48 to 56. The old ceiling of 76 was a guess and ran the hero
     onto a third line. h1 takes the 64; h2 is pulled back below. */
  font-size: clamp(30px, min(4.7vw, 7.4vh), 64px);
}
h2.tight { font-size: clamp(30px, 4.6vw, 60px); }

h3 {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lead { margin: 0; font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; }

.sub {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
}

.body {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.3vw, 16.5px);
  line-height: 1.65;
  color: var(--muted);
}

/* "Australia in your pocket." IS a tracked caps line, just a big one:
   20px, textCase UPPER, 3 units of tracking, #FFFFFF at 40 percent. */
.faint {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
}

.dotted {
  margin: 0;
  font-size: clamp(13px, 1.2vw, 15.5px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}

/* UPPERCASE IS CORRECT HERE, the SIZE was not. The design renders these
   uppercase via textCase, at 17px in the Great Ocean Road card and 20px with
   2 units of tracking as a footer column heading. Ours had the case right
   and the size at 11px, which is what made them read as micro caps against
   the design's much larger ones. */
.eyebrow {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
}
.foot-nav .eyebrow, .foot-follow .eyebrow {
  font-size: 20px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.30);
}

/* A quiet line of type, not an animated prompt. */
.hint {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- chips -------------------------------------------------------------- */

.chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  /* NO backdrop-filter: this sits inside .panel, which fades and translates,
     and glass inside an animating ancestor flattens to nothing. */
  background: rgba(255, 255, 255, 0.13);
  /* 16px, sentence case, decoded from the 1440x8277 artboard. These were
     11.5px uppercase with 0.12em tracking, which is a different thing from
     what the design draws. The EM DASH in the scene chips is the design's
     own typography, not prose, so it stays (user, 2026-10-08). */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* a static dot, deliberately not animated */
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.chip-accent {
  background: rgba(255, 107, 61, 0.16);
  border-color: rgba(255, 107, 61, 0.42);
  color: var(--accent);
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.full { width: 100%; }

.btn-solid { background: var(--night); color: #fff; }
.btn-light { background: #fff; color: var(--ink-d); }
.btn-dark  { background: var(--night); color: #fff; }
.nav-pill .btn-solid { margin-left: 4px; }

.btn-ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
}

.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---- nav ---------------------------------------------------------------- */

.nav {
  position: fixed;
  top: clamp(12px, 2vw, 22px);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 0 var(--pad);
}

.nav-pill {
  width: min(var(--col), 100%);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 44px);
  padding: 10px 10px 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

/* Glass mounts only once a frame has been painted, and never inside anything
   that fades: backdrop-filter flattens while an ancestor animates a transform
   or sits below full opacity. LIGHT frost, not a dark slab: more frosted means
   MORE BLUR, not more tint, because tint washes out white text. */
body.painted .nav-pill {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }

/* THE REAL LOGO, 2026-10-08. It was an "AE" circle I drew, because the file
   the client sent was a 200px JPEG on a white square, too small and too
   opaque for the nav. Their own Figma turned out to carry the roundel at
   1024x1024 WITH an alpha channel, so the placeholder is gone and this is
   their actual mark. It reads on dark and on light because the disc has a
   white outer ring, so it needs no plate behind it. */
.mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: block;
  object-fit: contain;
  flex: none;
}

.wordmark { font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; white-space: nowrap; }

.links { display: flex; gap: clamp(12px, 2vw, 30px); margin-left: auto; }
.links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 160ms ease;
}
.links a:hover { color: var(--ink); }

/* THE NAV INVERTS OVER THE LIGHT SECTIONS. It is fixed and white, and the
   showcase and feedback sections are cream, so without this it disappears
   completely as you scroll into them. A class is toggled from app.js when a
   [data-light] section is under the nav band. */
body.on-light .nav-pill {
  background: rgba(11, 11, 11, 0.05);
  border-color: rgba(11, 11, 11, 0.14);
  box-shadow: none;
}
body.on-light.painted .nav-pill {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(11, 11, 11, 0.12);
}
/* SCOPED TO THE NAV. `body.on-light` flips the nav's colours when it is over
   a cream section, and this rule was not scoped, so it also turned the
   FOOTER's wordmark near-black on a near-black footer whenever the cream
   feedback section above it had triggered the flag. */
body.on-light header .wordmark,
body.on-light .links a:hover { color: var(--ink-d); }
body.on-light .links a { color: var(--muted-d); }
body.on-light .nav-pill .btn-solid { background: var(--night); color: #fff; }

/* ---- the journey -------------------------------------------------------- */

.journey { position: relative; }
.leg { position: relative; }

/* ---- panel furniture ---------------------------------------------------- */

.stats {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 52px);
}
.stats li { display: flex; flex-direction: column; gap: 2px; }
.stats b {
  /* 36px in the design */
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* A hairline under the number rather than a card around it. A boxed stat tile
   is the first-order reflex and it fights the photography behind it. */
.stats span {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  /* 17px sentence case in the design. The fifth and last micro caps
     correction: chips, eyebrows, the faint line, form labels and these. */
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* the Guide Pack and closing cards, over photography */
.glass {
  margin-top: 6px;
  /* scales with viewport HEIGHT as well, so the card cannot run off the
     bottom on a short window */
  padding: clamp(16px, 2.6vh, 32px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* REAL frosted glass. This works only because .panel no longer animates its
     own opacity or transform; with an animating ancestor the blur is dropped
     and this reads as a flat black box. */
  background: rgba(22, 24, 28, 0.38);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.5vh, 14px);
  max-width: min(520px, 100%);
}
.glass h2 { font-size: clamp(26px, min(3.4vw, 5vh), 46px); }
.glass .body { font-size: clamp(13px, 1.6vh, 16px); }

.ticks { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(5px, 1.1vh, 10px); }
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: clamp(13.5px, 1.2vw, 15.5px);
  line-height: 1.5;
  color: var(--muted);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background:
    linear-gradient(45deg, transparent 46%, var(--accent) 46%, var(--accent) 60%, transparent 60%) no-repeat 4px 8px / 5px 5px,
    linear-gradient(-45deg, transparent 46%, var(--accent) 46%, var(--accent) 60%, transparent 60%) no-repeat 7px 4px / 7px 8px;
}

.socials { display: flex; flex-wrap: wrap; gap: 9px; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease;
}
.socials a:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); }
.socials svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- sections that scroll OVER the canvas ------------------------------- */

.wrap { width: min(var(--col), 100%); margin: 0 auto; padding: 0 var(--pad); }

.showcase, .after { position: relative; z-index: 14; }

.showcase {
  background: var(--cream);
  color: var(--ink-d);
  padding: clamp(66px, 9vh, 116px) 0 clamp(56px, 8vh, 98px);
  text-align: center;
}
.showcase h2 { font-size: clamp(30px, 3.9vw, 50px); }
.showcase .body { margin: 18px auto 0; color: var(--muted-d); max-width: 54ch; }
/* THE SHOWCASE PHONES, built to the design's own numbers.

   The flat export was the right composition cropped level with the phone
   bottoms, so their drop shadows were sliced off. The design has no flat
   image there; it is three frames:

     side    218x430, rotated -7 and +7, bottom aligned
     centre  260x500, upright, in front, 70 taller so it rises above them
     below   84px of clear space for the shadows to fall into

   THE PHONE SHAPE, identical at both sizes:
     body     radius 38, fill #0A0A0A, 1px #FFFFFF at 10 percent, inside
     screen   inset 7 all round, radius 30
   The design DOES carry a 72x18 notch and an 80x3 home bar, and they are
   deliberately left out: our screen images are full screenshots that already
   include their own status bar, so drawing a notch over them covered live
   content. The design's own render shows no notch either, because its screen
   content sits below the 38px band where the notch lives.

   Everything is in `cqw`, a percentage of the .screens container, so the
   group scales as one. NOT percentage padding: that resolves against the
   containing block rather than the element, which is the trap that produced
   a 37px bezel on a 260px phone earlier today. */
.screens {
  position: relative;
  container-type: inline-size;
  width: min(1200px, 100%);
  margin: clamp(26px, 4vh, 48px) auto 0;
  aspect-ratio: 1200 / 584;
}
.ph {
  position: absolute;
  bottom: 14.4%;                      /* the design's 84px of shadow room */
  background: #0a0a0a;
  /* the design's stroke is #FFFFFF at 10 percent, aligned INSIDE, not the
     hard white outline a full-opacity border gives */
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 3.167cqw;            /* 38 of 1200 */
}
.ph-screen {
  position: absolute;
  /* 7 ALL ROUND. The design's `+7,38` container is where the CONTENT starts,
     under the status bar, not where the screen starts. Reading it as the
     screen gave a 38px top bezel on a 500px phone, which no handset has. */
  inset: 0.583cqw;                    /* 7 */
  border-radius: 2.5cqw;              /* 30 */
  overflow: hidden;
  background: #e9edf1;
}
.ph-screen img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ph-l, .ph-r {
  width: 18.167cqw;                   /* 218 */
  aspect-ratio: 218 / 430;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.ph-l { left: 26.25%; transform: rotate(-7deg); transform-origin: 50% 100%; }
.ph-r { left: 55.42%; transform: rotate(7deg);  transform-origin: 50% 100%; }
.ph-c {
  width: 21.667cqw;                   /* 260 */
  aspect-ratio: 260 / 500;
  left: 39.17%;
  z-index: 2;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.28);
}

@media (max-width: 860px) {
  .screens { aspect-ratio: 1200 / 660; }
  .ph-l, .ph-r { width: 21cqw; }
  .ph-c { width: 25cqw; left: 37.5%; }
  .ph-l { left: 21.5%; }
  .ph-r { left: 57.5%; }
}

.features {
  margin-top: clamp(26px, 4vh, 46px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 40px);
  text-align: center;
}
.feature h3 { font-size: 16px; }
.feature p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted-d); }

.stores { margin-top: clamp(28px, 4vh, 46px); display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 22px;
  border-radius: 12px;
  background: var(--night);
  color: #fff;
  text-decoration: none;
  transition: transform 160ms ease;
}
.store:hover { transform: translateY(-1px); }
.store svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.store span span { display: block; }
/* "Download on the" and "Get it on" are 14px sentence case in the design. */
.store-k { font-size: 14px; letter-spacing: 0; text-transform: none; opacity: 0.7; }
.store-n { font-size: 15px; font-weight: 600; }

/* ---- the two forms ------------------------------------------------------ */

.partner, .feedback { padding: clamp(66px, 10vh, 130px) 0; }
.partner { background: var(--night); }
.feedback { background: var(--cream); color: var(--ink-d); }

.partner .wrap, .feedback .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: center;
}
.form-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.form-copy h2 { font-size: clamp(28px, 3.6vw, 48px); }
.feedback .body { color: var(--muted-d); }

.card { display: flex; flex-direction: column; gap: 14px; }
.partner .card { padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: var(--card); }

/* Form labels are 17px UPPERCASE in the design, white on the dark partner
   form and #5B646F on the light feedback one. Again: the case was right all
   along, the 11.5px size was not. */
.card label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
}
.feedback .card label { color: #5B646F; }

.card input, .card textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: var(--field);
  color: var(--ink-d);
  font: inherit;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 160ms ease;
}
.card textarea { resize: vertical; border-radius: 18px; }
.card input::placeholder, .card textarea::placeholder { color: rgba(11, 11, 11, 0.4); }
.card input:focus, .card textarea:focus { outline: none; border-color: var(--accent); }

/* No endpoint yet: submitting acknowledges rather than reloading, which would
   look like a fault to anyone reviewing. */
.card .ok { margin: 0; font-size: 13.5px; color: var(--accent); display: none; }
.card.sent .ok { display: block; }
.card.sent button { opacity: 0.45; pointer-events: none; }

/* ---- footer ------------------------------------------------------------- */

/* No studio branding anywhere on this page. It is subcontracted work and the
   end client's relationship is with the agency above. */
.foot { background: var(--night); padding: clamp(50px, 7vh, 82px) 0 30px; }
.foot .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.foot-brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.foot-tag { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.stores.small { margin: 0; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 10px; }
.stores.small .store { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); }

.foot-nav, .foot-follow { display: flex; flex-direction: column; gap: 10px; }
.foot-nav .eyebrow, .foot-follow .eyebrow { margin: 0 0 4px; }
.foot-nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot-nav a:hover { color: var(--ink); }

.icons { display: flex; gap: 10px; }
.icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.icons a:hover { background: rgba(255, 255, 255, 0.16); }
.icons svg { width: 16px; height: 16px; fill: currentColor; }
.foot-note { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--faint); max-width: 34ch; }

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(34px, 5vh, 58px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* The design sets this row at 17px on one line with middot separators,
   not 12.5px wrapping onto two. */
.foot-legal p { margin: 0; font-size: 16px; color: var(--faint); }
.foot-legal nav { display: flex; flex-wrap: nowrap; gap: 14px; align-items: center; }
.foot-legal .sep { color: rgba(255, 255, 255, 0.28); }
.foot-legal a { color: var(--faint); text-decoration: none; font-size: 16px; white-space: nowrap; }
.foot-legal a:hover { color: var(--ink); }

/* ---- scroll cue --------------------------------------------------------- */

/* No bobbing chevron: a hairline with a travelling light instead, the same
   device the loading screen uses. */
.cue {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.cue span { font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.cue i { position: relative; width: 1px; height: 48px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.cue i::after {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  height: 16px;
  background: #fff;
  animation: run 2.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes run { from { transform: translateY(-20px); } to { transform: translateY(52px); } }
.cue.gone { opacity: 0; }

/* ---- loading ------------------------------------------------------------ */

.loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  gap: 10px;
  background: var(--night);
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.loading.done { opacity: 0; visibility: hidden; }
.loading span { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); grid-row: 1; }
.loading b { grid-row: 2; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1060px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner .wrap, .feedback .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 1060px) {
  .panel.wide { flex-direction: column; align-items: flex-start; }
  .phone-shot { display: none; }
}

@media (max-width: 860px) {
  .links { display: none; }
  /* bottom-anchored, clear of the fixed cue which occupies ~120px */
  .panel { justify-content: flex-end; padding-bottom: 128px; }
  .look-copy { justify-content: flex-end; padding-bottom: 188px; }
  /* The Great Ocean Road phone render puts the vehicle low, at 52 to 64 percent
     of the frame height, and this card is the tallest of the five, so at the
     standard 128px it starts at 51 percent and sits right on top of the car.
     Drop it as far as the fixed cue allows. Measured in shots/phone-gor.png. */
  /* GREAT OCEAN ROAD on a phone. Dropped from 128px to 54px on 2026-10-06 to
     clear the vehicle in the landscape crop, then to 8px on 2026-10-08 when
     its own 9:16 render arrived: that render puts the vehicle at 60 to 64
     percent of the frame and the card started at 55, so the car was entirely
     behind it. The card is tightened to buy back the height, which also pulls
     the three social buttons onto one row. Third time a layout change has
     beaten a regeneration on this page. */
  #leg-gor .panel { padding-bottom: 8px; }
  #leg-gor .glass { padding: 13px 16px; gap: 7px; }
  #leg-gor .glass h2 { font-size: 21px; }
  #leg-gor .glass .sub { font-size: 13px; }
  #leg-gor .socials { gap: 6px; }
  #leg-gor .socials a { padding: 7px 12px; font-size: 12.5px; }
  .stats { gap: 18px 28px; }
  .glass { max-width: 100%; padding: 20px; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr); }
  #grade, .look-grade {
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.6) 0%, rgba(8, 8, 8, 0.1) 32%, rgba(8, 8, 8, 0.88) 100%);
  }
}

/* A short viewport is where a big heading meets a fixed nav. Shrink the type
   rather than let them collide. */
@media (max-height: 700px) {
  h1, h2 { font-size: clamp(26px, 4.4vw, 44px); }
  .glass { gap: 10px; padding: 18px; }
  .ticks { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .cue i::after { animation-duration: 5s; }
  .panel { transition-duration: 1ms; }
  .btn:hover, .store:hover { transform: none; }
}





/* THE PHONE INTRO: image band on top, copy below. 2026-10-06.

   Reported as "a bit too zoomed in for phone", and it was arithmetic rather
   than taste. A full-height canvas cover-fits a 1280x669 frame into a tall
   viewport, and the visible share of the frame's WIDTH is

       canvas_width / (1.913 * canvas_height)

   which on a 393x853 phone is 205/853, about **24 percent**. The vehicle
   occupies 48 percent of the frame and sits centred, so a 24 percent crop
   taken from the middle can only ever show the cab and a front wheel. No
   crop bias fixes that: there is nothing wrong with WHERE the window sits,
   it is too narrow.

   The only lever is canvas height, and 205/400 puts 51 percent of the frame
   on screen, which contains the whole vehicle with the bull bar clear of the
   left edge. That means the copy comes off the picture and sits under it,
   which is an ordinary phone hero and reads better than white text over a
   cropped photograph anyway.

   The primary button has to flip to white here: .btn-solid is near-black and
   the section behind it is near-black, so on the picture it read fine and off
   the picture it disappeared. */
@media (max-width: 860px) {
  .look.intro { height: auto; min-height: 0; display: block; }
  .look.intro #introStage { position: relative; width: 100%; height: 400px; }
  .look.intro .look-grade {
    position: absolute; top: 0; left: 0; right: 0; height: 400px;
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.58) 0%, rgba(8, 8, 8, 0) 24%,
                                        rgba(8, 8, 8, 0) 74%, rgba(8, 8, 8, 0.55) 100%);
  }
  .look.intro .look-copy {
    position: relative;
    height: auto;
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 76px;
    gap: 13px;
  }
  .look.intro .btn-solid { background: #fff; color: var(--ink-d); }
}

/* The scroll cue is fixed to the bottom of the VIEWPORT and only fades after
   a third of a screen of scrolling, so once the intro copy moved below the
   picture it landed on the body paragraph on a short phone. It still sits
   clear on a tall one, so it goes only where it actually collides. */
@media (max-width: 860px) and (max-height: 720px) {
  .cue { display: none; }
}

/* THE HANDSET at Uluru. The design shows the app's map screen on a phone
   beside that copy, and the slot had been empty since September because the
   export we were given had the mockup's backdrop baked in. The screen came
   out of the client's own Figma package with its alpha intact, so the frame
   below is drawn in CSS and the screen sits inside it.

   The asset is 316x647, which is small, so the frame is sized to show it at
   roughly 1:1 rather than upscaled. Ask the client for a larger export and
   this grows without any other change. */
.handset {
  flex: 0 0 auto;
  /* 260x520 in the design, with a 244x500 screen at radius 34 inside, so the
     bezel is 8px. IN PIXELS, NOT PERCENT: percentage padding resolves against
     the CONTAINING BLOCK's width, not the element's, so 3.1 percent here was
     3.1 percent of the 1200px panel, a 37px bezel. Same trap as the showcase
     frames earlier the same day. */
  width: min(260px, 30%);
  border-radius: 36px;
  padding: 8px;
  background: linear-gradient(160deg, #2b2f36, #0e1013 60%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  align-self: center;
  /* A FLAT 4.97 DEGREE ROTATION, straight out of the file. An earlier pass
     read a perspective taper off a screenshot and applied rotateX/rotateY,
     which was wrong: Figma has no 3D, and the node's own transform matrix
     says 4.97 degrees and nothing else. docs/DESIGN-SPEC.txt. */
  transform: rotate(4.97deg);
}
.handset img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 25px;
  /* NO background and NO radius of its own. The source PNG carried soft
     transparent edges all the way round, including down both sides, so a
     plate behind it showed through as pale slivers at every edge and corner
     (user, 2026-10-08: "white gaps in the screen with the phone"). The asset
     is now flattened to fully opaque and the FRAME does the rounding, with
     overflow clipping it, so there is nothing left to show through. */
}

@media (max-width: 860px) {
  /* the Uluru copy already fills a phone, and a picture of a phone inside a
     phone is the least useful thing on the page at that width */
  .handset { display: none; }
}

/* THE HERO, measured against the design file rather than guessed. Decoded
   from canvas.fig at the 1440 artboard: the copy column is 813 wide, the
   headline 60px on two lines, the lead 20px, the body 17px and the two
   buttons 54 tall with 17px labels. Ours had drifted to a 640 column, a 75.6
   headline on three lines and 15px buttons. */
.look-copy .body { font-size: 17px; }
.look-copy .ctas .btn { padding: 16px 28px; font-size: 17px; }
.look-copy .chip { margin-bottom: 4px; }

@media (max-width: 860px) {
  .look-copy .body { font-size: 15.5px; }
  .look-copy .ctas .btn { padding: 13px 22px; font-size: 15px; }
}

/* THE DREAM PACK CARD is 448 wide in the design and sits in the left column
   under the heading, not opposite it. Two earlier blocks here pushed it
   around to keep it off the aircraft's tail fin; the design never had that
   problem because the card was never on that side. */
#dream { max-width: 448px; }

/* SECTION HEADINGS are smaller than the hero in the design: 52 at 90 Mile and
   Uluru, 48 at Blythe Rd, Sydney, the Great Ocean Road, the showcase and the
   partner form, 56 at the feedback form. One ceiling of 52 covers it without
   five special cases. */
h2 { font-size: clamp(28px, min(4vw, 6.2vh), 52px); }
.feedback h2 { font-size: clamp(28px, min(4.2vw, 6.6vh), 56px); }

/* The feature row and the footer were both a size down from the design. */
.feature h3 { font-size: 20px; }
.feature p { font-size: 15px; }
/* The design's footer: links 17px, column headings 20px, the brand 32px.
   The brand wordmark was also inheriting a dark colour onto the near-black
   footer and had gone almost invisible. */
.foot a, .foot p { font-size: 17px; }
.foot .brand { color: #fff; }
.foot .brand .wordmark { font-size: 32px; font-weight: 700; }
.foot .mark { width: 46px; height: 46px; }
.foot-legal { font-size: 16px; }

/* THE TWO GLASS CARDS ARE NOT THE SAME TREATMENT, which is the thing that was
   being missed. Decoded from the 1440x8277 artboard:

     Dream Pack, Sydney   448x589 at x=120   fill #FFFFFF at 10%  radius 24
     Great Ocean Road     617x452 at x=120   fill #030303 at 35%  radius 28

   Both carry a 1px #FFFFFF at 20% stroke, both a background blur, and both
   sit 41px inside their own padding. Ours used one dark treatment for both,
   so the Sydney card read as a dark slab where the design has a light frosted
   one over the aircraft. */
#dream {
  width: min(448px, 38%);
  max-width: 448px;
  border-radius: 24px;
  padding: 41px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
}
#leg-gor .glass {
  width: min(617px, 52%);
  max-width: 617px;
  border-radius: 28px;
  padding: 41px;
  background: rgba(3, 3, 3, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

/* The scene chips are a pill of #FFFFFF at 10% with the same 20% stroke,
   34 tall, which is what ours already approximated. */
/* CHIP COLOURS, decoded. Every chip's TEXT is the accent #FF6B3D on a
   neutral pill of #FFFFFF at 10 percent with a #FFFFFF at 20 percent stroke.
   The ONE exception is the Guide Pack chip inside the Dream Pack card, which
   inverts it: an orange pill at 20 percent with a 40 percent orange stroke
   and near-white text.

   Ours had it backwards on two scene chips, which is why the Great Ocean
   Road badge came out orange where the design has it neutral, and the
   partner badge came out neutral where the design has it orange. */
/* CHIPS, from the decoded text properties, not from looking at exports.
   Every chip is 16px, textCase UPPER, text #FFFFFF at 90 percent, on a pill
   of #FFFFFF at 10 percent with a #FFFFFF at 20 percent stroke.

   TWO exceptions, and only two:
     the Guide Pack chip inside the Dream Pack card inverts the pill to
       #FF6B3D at 20 percent with a 40 percent orange stroke;
     the Partner chip is the ONE chip with ORANGE TEXT, #FF6B3D.

   An earlier pass here made every chip's text orange off a single sample.
   Reading textCase and the fill off all of them is what corrected it. */
.chip {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.90);
}
.chip-accent {
  background: rgba(255, 107, 61, 0.20);
  border-color: rgba(255, 107, 61, 0.40);
  color: rgba(255, 255, 255, 0.90);
}
/* The partner chip is the one that takes the orange pill AND orange text.
   The card's Guide Pack chip takes the same pill with near-white text. */
.partner .chip-accent { color: var(--accent); }

/* The Great Ocean Road card is 617x452 in the design. Ours ran tall because
   its rows are spaced further apart than the design's 41px padding allows. */
#leg-gor .glass { gap: 10px; }
#leg-gor .glass h2 { font-size: clamp(28px, 3.6vw, 48px); }


@media (max-width: 860px) {
  #dream, #leg-gor .glass { padding: 20px; }
}

@media (max-width: 1100px) {
  /* below the design's artboard the fixed widths start to crowd, so the two
     cards fall back to most of the column */
  #dream { width: min(448px, 60%); }
  #leg-gor .glass { width: min(617px, 72%); }
}
@media (max-width: 860px) {
  #dream, #leg-gor .glass { width: 100%; }
}

/* CARD FOOTPRINTS. The design's cards are taller than their content because
   its internal rows are more generous: the Dream Pack card is 448x589 with
   505 of content inside 41px padding, and the Great Ocean Road card is
   617x452. Ours came out 476 and 362 because every row was tighter. Setting
   the footprint and opening the gaps matches the design without hardcoding
   each row. */
#dream { gap: 16px; }
#dream .ticks { gap: 11px; }
#leg-gor .glass { gap: 12px; }

@media (max-width: 1100px) {
  #dream { gap: 13px; }
  #leg-gor .glass { gap: 11px; }
}

/* SYDNEY SITS HIGH, not centred. In the design its chip is 6 percent down
   the section, the heading 11, and the Dream Pack card runs from 29 to 95.
   Ours centred the whole block, which pushed the card low and left it
   looking cramped against the bottom. Anchoring to the top with the nav
   cleared gives the design's rhythm and lets the card breathe. */
@media (min-width: 861px) {
  #leg-sydney .panel {
    justify-content: flex-start;
    padding-top: calc(var(--navh) + 26px);
  }
}