/* =============================================================================
   Sasal Ventures
   Single stylesheet. No build step, no dependencies.

   The palette comes off the logo: forest green and gold. The idea underneath it
   is the accountant's columnar ledger pad — green paper, gold ruling — which is
   why the canvas is a cool green-tinted off-white rather than a warm cream, and
   why gold appears only as rules, marks and active states. Gold is never a
   large fill and never body copy. Spread either one further and this stops
   looking like an accounting firm and starts looking like every other
   professional-services template.

   Full-bleed forest brackets each page: the hero at the top, and the
   CTA-into-footer mass at the bottom. That bracketing is deliberate — keep it,
   and resist adding a third dark band between them. Two dark sections meeting
   with nothing between them is what made the home page hero and the lodgement
   rail read as one shapeless block before the rail was taken off that page.

   Layer order controls all specificity. Add new rules to the right layer rather
   than escalating selectors; a later layer always wins regardless of selector
   weight. This is what stops .section and .cta padding rules cancelling each
   other out.
   ========================================================================== */

@layer reset, base, layout, components, sections, motion, utilities;

/* -----------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand. Sampled from the logo artwork. */
  --forest: #103021;       /* primary — ink, dark bands, headings */
  --forest-deep: #081d14;  /* footer, scrims, the deepest surface */
  --forest-mid: #1a4d36;   /* hover states and borders inside dark bands */
  --gold: #cda66b;         /* accent — rules, marks, active states */

  /* Gold fails contrast as body text on paper, so it comes in two strengths:
     the brand value for fills and rules, and a deeper one for the rare case
     where accent-coloured text has to be read. Never set body copy in --gold —
     against paper it measures 2.10:1, nowhere near the 4.5:1 AA needs.
     --gold-deep is 4.95:1 on paper, so small text set in it passes. */
  --gold-deep: #856630;
  --gold-wash: rgba(205, 166, 107, 0.14);

  --paper: #f5f7f4;        /* canvas */
  --paper-raised: #fbfcfa;
  --paper-sunk: #e4ebe3;   /* the ruled-pad tone */
  --slate: #5a6b62;        /* secondary text — green-grey, not neutral grey */

  /* Semantic tokens. These flip inside .on-dark; brand values never do. */
  --bg: var(--paper);
  --fg: var(--forest);
  --fg-dim: #46564d;
  --fg-mute: var(--slate);
  --surface: var(--paper-raised);
  --line: rgba(16, 48, 33, 0.16);
  --line-soft: rgba(16, 48, 33, 0.08);

  /* Type */
  --font-display: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, sfmono-regular, consolas, monospace;

  /* Fluid type scale */
  --step--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.8rem, 0.77rem + 0.13vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.36vw, 1.375rem);
  --step-2: clamp(1.38rem, 1.22rem + 0.78vw, 1.9rem);
  --step-3: clamp(1.65rem, 1.34rem + 1.5vw, 2.6rem);
  --step-4: clamp(2rem, 1.45rem + 2.7vw, 3.6rem);
  --step-5: clamp(2.4rem, 1.6rem + 4vw, 4.9rem);

  /* Space */
  --s1: 0.375rem;
  --s2: 0.625rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.25rem;
  --s6: 3.25rem;
  --s7: 5rem;
  --section-y: clamp(3rem, 6vw, 6.25rem);

  /* Layout */
  --wrap: 78rem;
  --wrap-narrow: 44rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --header-h: 4.5rem;
  --radius: 3px;   /* near-square. The mark is all straight cuts; so is the UI. */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.55s;
}

/* Dark context. Only semantic tokens flip. */
.on-dark {
  --bg: var(--forest);
  --fg: var(--paper);
  --fg-dim: #c2d2c9;
  --fg-mute: #93a89c;
  --surface: rgba(255, 255, 255, 0.05);
  --line: rgba(245, 247, 244, 0.2);
  --line-soft: rgba(245, 247, 244, 0.1);

  background: var(--bg);
  color: var(--fg);
}

.on-deep {
  --bg: var(--forest-deep);
}

/* -----------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  li {
    overflow-wrap: break-word;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 1px;
  }

  .on-dark :focus-visible {
    outline-color: var(--gold);
  }
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

@layer base {
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
  }

  /* Note: do NOT put font-variant-numeric: tabular-nums on body. It is tempting
     on an accounting site, but the OpenType `tnum` feature also swaps the comma
     and full stop for digit-width versions so decimal points align in columns —
     correct in a table of figures, and in running text it opens a visible gap
     before every comma and full stop. Use the .tabular utility on the specific
     element holding the numbers instead. */

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-5);
    font-weight: 800;
  }

  h2 {
    font-size: var(--step-4);
  }

  h3 {
    font-size: var(--step-2);
    line-height: 1.14;
  }

  h4 {
    font-size: var(--step-1);
    line-height: 1.2;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-color: var(--gold);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }

  strong {
    font-weight: 600;
  }

  ::selection {
    background: var(--gold);
    color: var(--forest-deep);
  }
}

/* -----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

@layer layout {
  .wrap {
    width: min(100% - var(--gutter) * 2, var(--wrap));
    margin-inline: auto;
  }

  .wrap--narrow {
    width: min(100% - var(--gutter) * 2, var(--wrap-narrow));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--section-y);
  }

  .section--tight {
    padding-block: calc(var(--section-y) * 0.62);
  }

  .section--flush-top {
    padding-block-start: 0;
  }

  .stack > * + * {
    margin-block-start: var(--s3);
  }

  .stack-lg > * + * {
    margin-block-start: var(--s5);
  }

  .skip {
    position: absolute;
    inset-inline-start: var(--s3);
    inset-block-start: -100%;
    z-index: 100;
    padding: var(--s2) var(--s4);
    background: var(--forest);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-decoration: none;
  }

  .skip:focus {
    inset-block-start: var(--s3);
  }
}

/* -----------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

@layer components {
  /* --- Eyebrow: the mono utility voice. Marks every section opening. ------- */

  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

  .on-dark .eyebrow {
    color: var(--gold);
  }

  /* The hexagon tick. Derived from the mark's 60-degree grid, so the section
     furniture and the logo share a geometry. */
  .eyebrow::before {
    content: "";
    inline-size: 9px;
    block-size: 10px;
    flex: none;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }

  .eyebrow--plain::before {
    display: none;
  }

  /* --- Lede ---------------------------------------------------------------- */

  .lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--fg-dim);
    max-width: 46ch;
  }

  .measure {
    max-width: 62ch;
  }

  /* --- Rules --------------------------------------------------------------- */

  .rule {
    border: 0;
    block-size: 1px;
    background: var(--line);
  }

  .rule--gold {
    background: linear-gradient(
      to right,
      var(--gold) 0,
      var(--gold) 3.5rem,
      var(--line) 3.5rem,
      var(--line) 100%
    );
  }

  /* --- Buttons ------------------------------------------------------------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 0.85em 1.6em;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
      border-color var(--dur) var(--ease), transform 0.2s var(--ease);
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn--primary {
    background: var(--forest);
    color: var(--paper);
  }

  .btn--primary:hover {
    background: var(--forest-deep);
  }

  .btn--ghost {
    border-color: var(--line);
    color: var(--fg);
  }

  .btn--ghost:hover {
    border-color: var(--gold);
    background: var(--gold-wash);
  }

  /* On forest bands the primary inverts to gold — the one place gold carries a
     fill, and it is what makes the CTA the loudest thing on a dark section. */
  .on-dark .btn--primary {
    background: var(--gold);
    color: var(--forest-deep);
  }

  .on-dark .btn--primary:hover {
    background: #dcb984;
  }

  .on-dark .btn--ghost {
    border-color: var(--line);
    color: var(--paper);
  }

  .on-dark .btn--ghost:hover {
    border-color: var(--gold);
    background: rgba(201, 164, 92, 0.12);
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
  }

  /* --- Text link with a moving gold underline ------------------------------ */

  .link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--fg);
    padding-block-end: 2px;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--dur) var(--ease);
  }

  .link:hover {
    background-size: 0 1px;
    background-position: 100% 100%;
  }

  .link::after {
    content: "→";
    font-family: var(--font-sans);
    transition: transform var(--dur) var(--ease);
  }

  .link:hover::after {
    transform: translateX(3px);
  }

  /* --- Figures ------------------------------------------------------------- */

  .figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper-sunk);
  }

  .figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .figure--3-2 { aspect-ratio: 3 / 2; }
  .figure--4-3 { aspect-ratio: 4 / 3; }
  .figure--square { aspect-ratio: 1 / 1; }
  .figure--portrait { aspect-ratio: 3 / 4; }
  .figure--tall { aspect-ratio: 2 / 3; }

  /* --- Header -------------------------------------------------------------- */

  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur) var(--ease),
      background var(--dur) var(--ease);
  }

  .header[data-stuck="true"] {
    border-block-end-color: var(--line-soft);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
  }

  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-block-size: var(--header-h);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    margin-inline-end: auto;
  }

  .brand__mark {
    inline-size: auto;
    block-size: 2.25rem;
    flex: none;
  }

  /* The vertical hairline between mark and wordmark is in the supplied logo
     lockup. Keeping it here is what makes the header read as the logo rather
     than as an icon sitting next to some text. */
  .brand__wordmark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--line);
    min-block-size: 2rem;
  }

  .brand__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--forest);
  }

  .brand__tag {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold-deep);
    line-height: 1.4;
  }

  .nav {
    display: none;
    gap: var(--s5);
  }

  .nav__link {
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    color: var(--fg-dim);
    padding-block: 0.35rem;
    position: relative;
    transition: color var(--dur) var(--ease);
  }

  .nav__link:hover,
  .nav__link[aria-current="page"] {
    color: var(--forest);
  }

  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--gold);
  }

  .header .btn {
    display: none;
  }

  @media (min-width: 60rem) {
    .nav,
    .header .btn {
      display: flex;
    }
  }

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

  .navtoggle {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-inline-end: calc(var(--s2) * -1);
    color: var(--forest);
  }

  .navtoggle__bars {
    inline-size: 20px;
    block-size: 12px;
    position: relative;
  }

  .navtoggle__bars::before,
  .navtoggle__bars::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 1.5px;
    background: currentColor;
    transition: transform var(--dur) var(--ease);
  }

  .navtoggle__bars::before { inset-block-start: 0; }
  .navtoggle__bars::after { inset-block-end: 0; }

  .navtoggle[aria-expanded="true"] .navtoggle__bars::before {
    transform: translateY(5.25px) rotate(45deg);
  }

  .navtoggle[aria-expanded="true"] .navtoggle__bars::after {
    transform: translateY(-5.25px) rotate(-45deg);
  }

  @media (min-width: 60rem) {
    .navtoggle {
      display: none;
    }
  }

  .panel {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 45;
    background: var(--forest);
    color: var(--paper);
    padding: var(--s5) var(--gutter) var(--s6);
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
      visibility 0.3s;
  }

  .panel[data-open="true"] {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .panel a {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    text-decoration: none;
    padding-block: var(--s2);
    border-block-end: 1px solid rgba(245, 247, 244, 0.12);
  }

  .panel .btn {
    margin-block-start: var(--s3);
    align-self: flex-start;
  }

  @media (min-width: 60rem) {
    .panel {
      display: none;
    }
  }

  /* --- Cards --------------------------------------------------------------- */

  .grid {
    display: grid;
    gap: var(--s4);
    grid-template-columns: 1fr;
  }

  @media (min-width: 38rem) {
    .grid--2,
    .grid--3,
    .grid--4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 62rem) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
  }

  .card .figure img {
    transition: transform 0.8s var(--ease), filter 0.8s var(--ease);
    filter: saturate(0.86);
  }

  .card:hover .figure img,
  .card:focus-visible .figure img {
    transform: scale(1.045);
    filter: saturate(1);
  }

  .card__index {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    color: var(--gold-deep);
  }

  .card__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .card__body {
    font-size: var(--step--1);
    color: var(--fg-mute);
    line-height: 1.6;
  }

  /* The gold underscore that grows on hover — the card's only decoration. */
  .card__title-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
  }

  .card__title-wrap::after {
    content: "";
    block-size: 1px;
    inline-size: 1.75rem;
    background: var(--gold);
    transition: inline-size var(--dur) var(--ease);
  }

  .card:hover .card__title-wrap::after,
  .card:focus-visible .card__title-wrap::after {
    inline-size: 100%;
  }

  /* --- Industry tiles ------------------------------------------------------ */

  .tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    padding: var(--s4);
    text-decoration: none;
    color: var(--paper);
  }

  .tile img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.9s var(--ease);
  }

  .tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to top,
      rgba(8, 29, 20, 0.92) 0%,
      rgba(8, 29, 20, 0.55) 42%,
      rgba(8, 29, 20, 0.12) 100%
    );
  }

  .tile:hover img {
    transform: scale(1.06);
  }

  .tile__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .tile__note {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-block-end: var(--s1);
  }

  /* --- Detail rows (services page, approach) ------------------------------- */

  .split {
    display: grid;
    gap: var(--s5);
    align-items: center;
    grid-template-columns: 1fr;
  }

  @media (min-width: 58rem) {
    .split {
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--s5), 6vw, var(--s7));
    }

    .split--flip .split__media {
      order: -1;
    }

    .split--narrow-text {
      grid-template-columns: 1.15fr 1fr;
    }
  }

  /* Where one column is much taller than the other — the contact form beside
     its aside — centring leaves the short column floating in the middle of the
     tall one. Align both to the top instead. */
  .split--top {
    align-items: start;
  }

  /* --- Numbered steps ------------------------------------------------------ */

  /* align-content: start matters. Each .step is stretched to the height of the
     tallest card in the row, and without this its auto rows share out the
     leftover space — so the card with the shortest body silently pushes its own
     title a few pixels lower than its neighbours' and the row stops aligning. */
  .step {
    display: grid;
    gap: var(--s2);
    align-content: start;
    padding-block-start: var(--s3);
    border-block-start: 1px solid var(--line);
  }

  .step__n {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    color: var(--gold-deep);
  }

  .on-dark .step__n {
    color: var(--gold);
  }

  .step__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .step__body {
    font-size: var(--step--1);
    color: var(--fg-mute);
  }

  /* --- Facts / definition rows --------------------------------------------- */

  .facts {
    display: grid;
    gap: 0;
  }

  .fact {
    display: grid;
    gap: var(--s1);
    padding-block: var(--s3);
    border-block-end: 1px solid var(--line);
  }

  @media (min-width: 44rem) {
    .fact {
      grid-template-columns: 12rem 1fr;
      gap: var(--s4);
      align-items: baseline;
    }
  }

  .fact__key {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

  .on-dark .fact__key {
    color: var(--gold);
  }

  .fact__val {
    font-size: var(--step--1);
    color: var(--fg-dim);
  }

  /* --- Checklist ----------------------------------------------------------- */

  .checks {
    display: grid;
    gap: var(--s2);
  }

  .checks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s3);
    align-items: start;
    font-size: var(--step--1);
    color: var(--fg-dim);
  }

  .checks li::before {
    content: "";
    inline-size: 8px;
    block-size: 9px;
    margin-block-start: 0.55em;
    background: var(--gold);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }

  /* --- FAQ ----------------------------------------------------------------- */

  .faq {
    border-block-start: 1px solid var(--line);
  }

  .faq details {
    border-block-end: 1px solid var(--line);
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding-block: var(--s4);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    content: "";
    flex: none;
    inline-size: 12px;
    block-size: 12px;
    border-inline-end: 1.5px solid var(--gold);
    border-block-end: 1.5px solid var(--gold);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur) var(--ease);
  }

  .faq details[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .faq details > p {
    padding-block-end: var(--s4);
    max-width: 68ch;
    color: var(--fg-dim);
    font-size: var(--step--1);
  }

  /* --- Forms --------------------------------------------------------------- */

  .field {
    display: grid;
    gap: var(--s1);
    margin-block-end: var(--s4);
  }

  .field label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

  .field input,
  .field textarea,
  .field select {
    padding: 0.8rem 0.95rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--step--1);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }

  .field textarea {
    resize: vertical;
    min-block-size: 8rem;
  }

  .field input:focus,
  .field textarea:focus,
  .field select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-wash);
  }

  .field[data-invalid="true"] input,
  .field[data-invalid="true"] textarea {
    border-color: #a33a2a;
  }

  .field__error {
    font-size: var(--step--2);
    color: #a33a2a;
    min-block-size: 1em;
  }

  .form__status {
    font-size: var(--step--1);
    padding: var(--s3);
    border-radius: var(--radius);
    border: 1px solid var(--line);
  }

  .form__status[data-state="error"] {
    border-color: #a33a2a;
    color: #8d3123;
  }

  .form__status[data-state="ok"] {
    border-color: var(--gold);
    background: var(--gold-wash);
  }

  .form__status:empty {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

@layer sections {
  /* --- Hero ---------------------------------------------------------------- */

  /* Background and colour come from .on-dark on the element itself, which also
     flips --fg, --line and friends. That flip is what makes .btn--ghost and the
     other dark-context component rules apply here — without it a ghost button
     renders forest-on-forest and vanishes. */
  /* Centred, not bottom-aligned. The copy used to sit hard against the bottom
     edge so it met the lodgement rail that followed; with the rail gone that
     left a tall band of empty photograph above the eyebrow. Height is capped in
     rem as well as svh so the hero does not stretch into a void on a large
     monitor. */
  .hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-block-size: min(78svh, 44rem);
    padding-block: var(--s6);
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Two scrims stacked: a horizontal one so the headline has a dark ground on
     the left, and a vertical one that darkens the top and bottom edges.

     The vertical one is a soft vignette, not a weight at the bottom. It used
     to resolve to solid var(--forest) so the hero melted into the lodgement
     rail below it, which is exactly why the two read as one shapeless mass.
     With the rail gone the hero ends on a clean edge against a paper section,
     so the photograph stays visible all the way down. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(
        to bottom,
        rgba(8, 29, 20, 0.38) 0%,
        rgba(8, 29, 20, 0.04) 36%,
        rgba(8, 29, 20, 0.2) 80%,
        rgba(8, 29, 20, 0.36) 100%
      ),
      linear-gradient(
        to right,
        rgba(8, 29, 20, 0.94) 0%,
        rgba(8, 29, 20, 0.86) 42%,
        rgba(8, 29, 20, 0.5) 72%,
        rgba(8, 29, 20, 0.14) 100%
      );
  }

  /* Wide enough that the h1 sets in two long lines rather than three short
     ones. At 40rem the headline could not fit two lines, so text-wrap: balance
     split it three ways and left orphans like "Numbers" alone on a line.

     61rem is the width at which all three page headlines resolve: the home and
     services h1s each set in two, and the short approach h1 stays on one. The
     horizontal scrim below is tuned to hold its darkness this far across. */
  .hero__inner {
    display: grid;
    gap: var(--s4);
    max-width: 61rem;
  }

  .hero h1 {
    color: var(--paper);
  }

  .hero .lede {
    color: #d3e0d8;
    max-width: 48ch;
  }

  .hero .eyebrow {
    color: var(--gold);
  }

  .hero--page {
    min-block-size: min(56svh, 31rem);
  }

  /* --- The lodgement rail --------------------------------------------------
     The signature band. It carries the Australian financial year as four BAS
     quarters with the current one marked from the visitor's own clock, and it
     is the credibility device that replaces testimonials on this site: it
     demonstrates command of the compliance calendar rather than asserting
     competence. It also never goes stale and never dates the firm.
     Without JS every quarter simply renders unmarked, which still reads.
     ---------------------------------------------------------------------- */

  .rail {
    padding-block: var(--s6);
  }

  .rail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    margin-block-end: var(--s5);
  }

  .rail__next {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--paper);
  }

  .rail__next b {
    color: var(--gold);
    font-weight: 500;
  }

  .rail__track {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    border-block-start: 1px solid var(--line);
  }

  @media (min-width: 46rem) {
    .rail__track {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .q {
    position: relative;
    padding-block: var(--s4) var(--s3);
    padding-inline-end: var(--s4);
    border-block-end: 1px solid var(--line);
  }

  @media (min-width: 46rem) {
    .q {
      border-block-end: 0;
      border-inline-start: 1px solid var(--line);
      padding-inline-start: var(--s4);
    }

    .q:first-child {
      border-inline-start: 0;
      padding-inline-start: 0;
    }
  }

  /* The marker sits on the track's top rule, so the rule reads as a timeline. */
  .q::before {
    content: "";
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: 0;
    inline-size: 8px;
    block-size: 9px;
    background: var(--line);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transition: background var(--dur) var(--ease);
  }

  @media (min-width: 46rem) {
    .q:not(:first-child)::before {
      inset-inline-start: var(--s4);
    }
  }

  .q__label {
    font-family: var(--font-mono);
    font-size: var(--step-1);
    font-weight: 500;
    color: var(--paper);
    letter-spacing: 0.02em;
  }

  .q__period {
    font-size: var(--step--1);
    color: var(--fg-mute);
    margin-block-end: var(--s3);
  }

  .q__due {
    display: grid;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.04em;
    color: var(--fg-dim);
  }

  .q__due b {
    font-weight: 500;
    color: var(--paper);
  }

  /* Active quarter. Gold is the whole point of the rationing — it lands here. */
  .q[data-current="true"]::before {
    background: var(--gold);
  }

  .q[data-current="true"] .q__label {
    color: var(--gold);
  }

  .q[data-current="true"] .q__due b {
    color: var(--gold);
  }

  .q__now {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-block-end: var(--s1);
  }

  .q[data-current="true"] .q__now {
    display: block;
  }

  .rail__foot {
    margin-block-start: var(--s5);
    font-size: var(--step--2);
    color: var(--fg-mute);
    max-width: 74ch;
  }

  /* --- Full-bleed statement band ------------------------------------------- */

  /* As with .hero — .on-dark on the element supplies background, colour and the
     semantic token flip. */
  .band {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-block-size: min(66svh, 34rem);
    padding-block: var(--s7);
  }

  .band__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .band__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to right,
      rgba(8, 29, 20, 0.93) 0%,
      rgba(8, 29, 20, 0.8) 45%,
      rgba(8, 29, 20, 0.45) 100%
    );
  }

  .band__inner {
    max-width: 42rem;
    display: grid;
    gap: var(--s4);
  }

  .band h2 {
    font-size: var(--step-3);
    color: var(--paper);
  }

  .band p {
    color: #cddbd3;
    max-width: 48ch;
  }

  /* --- CTA ----------------------------------------------------------------- */

  .cta {
    padding-block: var(--section-y);
  }

  .cta__inner {
    display: grid;
    gap: var(--s5);
    align-items: end;
  }

  @media (min-width: 58rem) {
    .cta__inner {
      grid-template-columns: 1.4fr 1fr;
    }
  }

  .cta h2 {
    font-size: var(--step-3);
  }

  /* --- Footer -------------------------------------------------------------- */

  .footer {
    padding-block: var(--s6) var(--s5);
    border-block-start: 1px solid var(--line-soft);
  }

  .footer__top {
    display: grid;
    gap: var(--s5);
    padding-block-end: var(--s5);
  }

  @media (min-width: 52rem) {
    .footer__top {
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: var(--s6);
    }
  }

  /* Large on purpose. This is the only place the two-colour mark appears, and
     the gold inline needs the height to resolve — at 4.5rem the shell and the
     line both fall under 2.5px and the whole thing reads as a wireframe. */
  .footer__mark {
    inline-size: auto;
    block-size: 7rem;
    margin-block-end: var(--s4);
  }

  .footer__tag {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .footer h3 {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-block-end: var(--s3);
  }

  .footer-nav {
    display: grid;
    gap: var(--s2);
  }

  /* The span covers non-link entries such as the service area, which otherwise
     inherit body size and sit heavier than the links above them. */
  .footer-nav a,
  .footer-nav span {
    font-size: var(--step--1);
    color: var(--fg-dim);
    text-decoration: none;
    justify-self: start;
    transition: color var(--dur) var(--ease);
  }

  .footer-nav a:hover {
    color: var(--gold);
  }

  .footer__base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s5);
    justify-content: space-between;
    align-items: center;
    padding-block-start: var(--s4);
    border-block-start: 1px solid var(--line-soft);
    font-size: var(--step--2);
    color: var(--fg-mute);
  }

  .footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
  }

  .footer__legal a {
    color: inherit;
    text-decoration: none;
  }

  .footer__legal a:hover {
    color: var(--gold);
  }

  /* The build credit. Deliberately dimmer than the client's own links beside it —
     it is an attribution, not navigation, and should not compete with Privacy and
     Contact for attention. Still clears AA at 4.7:1 on the footer ground. */
  .footer__credit {
    color: color-mix(in srgb, var(--fg-mute) 78%, transparent);
  }

  /* --- 404 ----------------------------------------------------------------- */

  .lost {
    min-block-size: 70svh;
    display: grid;
    place-content: center;
    text-align: center;
    gap: var(--s4);
    padding-block: var(--s7);
  }

  .lost .btn-row {
    justify-content: center;
  }
}

/* -----------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@layer motion {
  /* Scoped to .js, which site.js sets on <html> before anything paints. If the
     script never runs, [data-reveal] elements are simply visible instead of
     being stranded at opacity 0 — the failure mode that silently blanks a page.

     Staggering uses a custom property set in the markup so the rhythm stays
     visible in the HTML rather than hiding in an nth-child chain. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .js [data-reveal][data-shown="true"] {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }

    .js [data-reveal] {
      opacity: 1;
      transform: none;
    }
  }
}

/* -----------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .center {
    text-align: center;
  }

  .mt-0 { margin-block-start: 0; }
  .mt-3 { margin-block-start: var(--s3); }
  .mt-4 { margin-block-start: var(--s4); }
  .mt-5 { margin-block-start: var(--s5); }
  .mt-6 { margin-block-start: var(--s6); }

  .gold { color: var(--gold-deep); }
  .on-dark .gold { color: var(--gold); }

  .mono {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Opt-in column-aligned figures, for anything that is genuinely a table of
     numbers. Never put this on an element that also contains sentences — see
     the note beside the body rule. */
  .tabular {
    font-variant-numeric: tabular-nums;
  }

  [hidden] {
    display: none !important;
  }
}