/* Finance Craft, Tideline theme. One stylesheet for every page.
   Calm and photo led. Few words per screen, full screen coastal photos, slow motion only.
   Sand, sea, ink and white. Orange stays in the logo.

   Per page, only the hero wash changes. Each page sets five values on .hero,
   --w0 --w1 --w2 for the desktop gradients and --w3 --w4 for the phone one.
   Everything else here is shared, so a change to the theme is one edit to this file. */

:root {
  color-scheme: light;
  interpolate-size: allow-keywords;
  --ink: #0E1F26;
  --ink-soft: #3E4E55;
  --muted: #66757B;
  --paper: #FFFFFF;
  --foam: #F4F7F6;
  --line: #E1E7E7;
  --sand: #F4DFD7;
  --sea: #1C6B75;
  --deep: #05323A; /* the dark turquoise band behind every case study and guide cover */
  --font: 'Instrument Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --line-tint: #D9E1E0;
  --gutter: clamp(22px, 5vw, 80px);
  /* One type scale for the whole page */
  --fs-display: min(clamp(3rem, 8.4vw, 8rem), 13.5vh); /* hero headline and closing headline */
  --copy-bottom: clamp(40px, 7vh, 76px);         /* where words sit on every full-screen photo */
  --fs-statement: clamp(1.55rem, 2.5vw, 2.35rem); /* reviews and opening lines */
  --fs-title: clamp(1.5rem, 2.1vw, 1.9rem); /* every section heading */
  --fs-item: clamp(1.2rem, 1.6vw, 1.45rem); /* row titles, steps, questions */
  --fs-lead: clamp(1.08rem, 1.3vw, 1.2rem); /* supporting paragraphs */
  --ease: cubic-bezier(.22, .7, .15, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; padding: 0; }
ol { list-style: none; }
ul { list-style: none; }
h1, h2 { font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 4px; border-radius: 6px; }
.label { font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 500; font-size: 1rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--sea); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--foam); }
.btn-line { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-outline { border-color: rgba(14, 31, 38, .32); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: rgba(14, 31, 38, .05); }
.quiet { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity .3s; }
.quiet:hover { opacity: .65; }
.quiet svg { width: 16px; height: 16px; }
/* ========== Header ========== */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; padding-inline: var(--gutter); }
.bar-badge { height: 44px; width: auto; margin-right: auto; margin-left: 14px; padding-left: 14px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 22%, transparent); }
.logo { position: relative; display: block; height: 30px; }
.logo img { height: 30px; width: auto; }
.bar[data-tone="dark"] { background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.bar[data-solid="true"] { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.bar-right { display: flex; align-items: center; gap: 10px; }
.bar .tel { font-weight: 500; font-size: .95rem; padding: 10px 10px; transition: opacity .3s; }
.bar .tel:hover { opacity: .65; }
.bar .pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid currentColor; font-weight: 500; font-size: .95rem; transition: background-color .3s, color .3s, border-color .3s; }
.bar .pill:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 12px; border: 0; background: transparent; cursor: pointer; font-weight: 500; font-size: .95rem; }
.menu-btn i { position: relative; display: block; width: 22px; height: 10px; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.menu-btn i::before { top: 0; }
.menu-btn i::after { top: 8.5px; }
.menu-open .menu-btn i::before { top: 4.25px; transform: rotate(45deg); }
.menu-open .menu-btn i::after { top: 4.25px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; background: #fff; color: var(--ink); display: grid; align-content: safe center; overflow-y: auto; padding: 110px var(--gutter) 60px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.menu-open .menu { opacity: 1; visibility: visible; }
.menu-open .bar { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px 80px; max-width: 1200px; }
.menu nav > a, .menu .m-group > summary { display: flex; align-items: center; gap: .34em; font-size: clamp(1.9rem, 4vw, 3.4rem); letter-spacing: -.035em; line-height: 1.22; font-weight: 500; transition: color .3s, transform .45s var(--ease); }
.menu nav > a:hover, .menu .m-group > summary:hover { color: var(--sea); transform: translateX(8px); }
.m-group > summary { list-style: none; cursor: pointer; }
.m-group > summary::-webkit-details-marker { display: none; }
.m-group > summary i { flex: none; width: .26em; height: .26em; border-right: .055em solid currentColor; border-bottom: .055em solid currentColor; rotate: 45deg; translate: 0 -.09em; transition: rotate .45s var(--ease), translate .45s var(--ease); }
.m-group[open] > summary i { rotate: 225deg; translate: 0 .06em; }
.m-group::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.m-group[open]::details-content { block-size: auto; }
.m-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; padding: 10px 0 20px; }
.m-sub-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-sub a { padding: 6px 0; font-size: 1.02rem; color: var(--ink-soft); transition: color .3s; }
.m-sub a:hover { color: var(--sea); }
.menu-side { display: grid; gap: 18px; align-content: end; color: var(--ink-soft); }
.menu-side a:hover { color: var(--sea); }
/* ========== Hero ========== */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #123A42; color: #fff; isolation: isolate; }
.hero-img { position: absolute; top: -4%; left: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: 50% 50%; z-index: -3; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, rgba(6, 26, 32, var(--w0)) 0%, rgba(6, 26, 32, var(--w1)) 40%, rgba(6, 26, 32, 0) 76%), linear-gradient(90deg, rgba(6, 26, 32, var(--w2)) 0%, rgba(6, 26, 32, 0) 64%); }
.hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--copy-bottom); display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: var(--fs-display); line-height: .92; letter-spacing: -.05em; text-wrap: balance; color: #fff; text-shadow: 0 2px 28px rgba(6, 26, 32, .22); }
.hero h1 .hero-sub { display: block; margin-top: 22px; font-size: clamp(1.08rem, 1.5vw, 1.35rem); font-weight: 400; letter-spacing: 0; line-height: 1.6; color: rgba(255, 255, 255, .9); max-width: 49ch; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
/* ========== Sections after the hero share one layout. Heading left, content right. ========== */
.sec { padding: clamp(90px, 11vw, 160px) var(--gutter); scroll-margin-top: 60px; }
.tint { background: var(--foam); --line: var(--line-tint); }
.sec-grid { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 34px clamp(40px, 6vw, 110px); align-items: start; }
.sec-side { position: sticky; top: 118px; display: grid; gap: 24px; align-content: start; }
.sec-title { font-size: var(--fs-title); font-weight: 500; letter-spacing: -.028em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.sec-main { min-width: 0; display: grid; gap: clamp(26px, 3vw, 40px); justify-items: start; }
.statement { font-size: var(--fs-statement); line-height: 1.24; letter-spacing: -.026em; color: var(--ink); max-width: 30ch; }
.statement span { color: var(--muted); }
.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-soft); max-width: 58ch; }
.story { display: grid; gap: 20px; }
.links { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
/* Rows. Steps, credentials and questions all use the same row. */
/* Rows. Loans, steps and questions all use the same row. */
.rows { width: 100%; border-top: 1px solid var(--line); }
.rows > li, .rows > details { border-bottom: 1px solid var(--line); }
.rows.flush > li:last-child { border-bottom: 0; }
.row-title { font-size: var(--fs-item); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); transition: color .35s var(--ease); }
.row-desc { font-size: 1rem; line-height: 1.55; color: var(--muted); max-width: 56ch; }
.way { display: grid; gap: 6px; padding: 22px 0; }
/* ========== Photo sequence ========== */
.seq { position: relative; height: 190vh; background: #0B2A31; }
.seq-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.seq-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.08; transition: opacity .8s var(--ease), scale 5s var(--ease); z-index: -2; }
.seq-img.on { opacity: 1; scale: 1; }
.seq-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 24, 30, .66) 0%, rgba(8, 24, 30, .36) 42%, rgba(8, 24, 30, 0) 70%); }
.seq-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--copy-bottom); display: flex; flex-direction: column; gap: 22px; color: #fff; }
.seq-label { color: rgba(255, 255, 255, .8); }
.seq-items { display: grid; }
.seq-item { grid-area: 1 / 1; align-self: end; display: grid; gap: 14px; opacity: 0; translate: 0 26px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.seq-item.on { opacity: 1; translate: 0 0; transition-delay: .06s; }
.seq-item h3 { font-size: var(--fs-display); line-height: .92; letter-spacing: -.05em; font-weight: 500; text-wrap: balance; }
.seq-item p { font-size: clamp(1.08rem, 1.5vw, 1.35rem); max-width: 49ch; color: rgba(255, 255, 255, .88); }
.seq-meta { position: absolute; right: var(--gutter); bottom: var(--copy-bottom); display: grid; justify-items: end; gap: 16px; color: rgba(255, 255, 255, .8); }
.seq-dots { display: flex; gap: 8px; }
.seq-dots i { display: block; width: 28px; height: 2px; background: rgba(255, 255, 255, .3); transition: background-color .6s var(--ease), width .6s var(--ease); }
.seq-dots i.on { background: #fff; width: 48px; }
.seq-place { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; height: 1.3em; overflow: hidden; display: grid; }
.seq-place span { grid-area: 1 / 1; text-align: right; opacity: 0; transition: opacity .6s var(--ease); }
.seq-place span.on { opacity: 1; }
/* ========== Reviews ========== */
.g-line { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .95rem; }
.g-line svg { width: 22px; height: 22px; }
.g-line b { color: var(--ink); font-weight: 500; font-size: 1.1rem; }
.g-line .stars { color: #E9A21B; letter-spacing: .1em; font-size: .85rem; }
.rev-nav { display: flex; align-items: center; gap: 10px; }
.rev-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #C6D0CF; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.rev-nav button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.rev-nav button svg { width: 18px; height: 18px; }
.rev-count { min-width: 3.6em; text-align: center; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rev-stage { width: 100%; display: grid; transition: height .55s var(--ease); touch-action: pan-y; }
.rev-stage:focus-visible { outline-offset: 10px; }
.rev { grid-area: 1 / 1; align-self: start; display: grid; gap: 20px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s; }
.rev.on { opacity: 1; visibility: visible; transform: none; }
.rev blockquote p { font-size: var(--fs-statement); line-height: 1.3; letter-spacing: -.024em; max-width: none; }
.rev figcaption { color: var(--muted); }
/* ========== Portrait block ========== */
/* ========== Loans ========== */
.loan a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 22px 0; transition: padding .6s var(--ease); }
.loan .row-desc { grid-column: 1; }
.loan svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--sea); opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.loan a:hover { padding-left: 8px; }
.loan a:hover .row-title { color: var(--sea); }
.loan a:hover svg { opacity: 1; transform: none; }
.also { color: var(--muted); max-width: 56ch; }
.also a, .more a { color: var(--ink); text-decoration: underline; text-decoration-color: #BFCBCA; text-underline-offset: 4px; transition: color .3s, text-decoration-color .3s; }
.also a:hover, .more a:hover { color: var(--sea); text-decoration-color: var(--sea); }
/* Steps */
/* ========== Signature under the first section heading ========== */
.signature { display: grid; gap: 16px; justify-items: start; max-width: 264px; }
.signature .photo { width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius: 14px; object-fit: cover; background: #1C1C1D; }
.signature figcaption { display: grid; gap: 3px; }
.signature strong { font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
.signature span { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.signature .badge { width: 56px; height: 56px; margin-top: 8px; }
/* ========== Where Shane works ========== */
/* ========== Where I work ========== */
.suburbs { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 26px; border-top: 1px solid var(--line); }
.suburbs li { border-bottom: 1px solid var(--line); }
.suburbs a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 0; font-size: 1.02rem; color: var(--ink); transition: color .3s, padding .5s var(--ease); }
.suburbs a svg { width: 15px; height: 15px; flex: none; color: var(--sea); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .5s var(--ease); }
.suburbs a:hover { color: var(--sea); padding-left: 4px; }
.suburbs a:hover svg { opacity: 1; transform: none; }
/* ========== Questions ========== */
.faq-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; }
.faq-q summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #C6D0CF; transition: background-color .35s var(--ease), border-color .35s var(--ease), rotate .45s var(--ease); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--ink); translate: -50% -50%; transition: background-color .35s; }
.pm::after { rotate: 90deg; }
.faq-q summary:hover .pm { border-color: var(--ink); }
.faq-q summary:hover .row-title { color: var(--sea); }
.faq-q[open] .pm { rotate: 45deg; background: var(--ink); border-color: var(--ink); }
.faq-q[open] .pm::before, .faq-q[open] .pm::after { background: #fff; }
.faq-q::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq-q[open]::details-content { block-size: auto; }
.faq-q .ans { padding: 0 58px 24px 0; color: var(--ink-soft); max-width: 62ch; }
.faq-q .ans a { color: var(--ink); text-decoration: underline; text-decoration-color: #BFCBCA; text-underline-offset: 4px; }
.faq-q .ans a:hover { color: var(--sea); text-decoration-color: var(--sea); }
.more { display: grid; gap: 12px; }
.more .label { color: var(--muted); margin-bottom: 2px; }
/* ========== How it works ========== */
.step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 22px 0; }
.step .n { grid-row: 1 / span 2; font-size: var(--fs-item); font-weight: 500; line-height: 1.25; color: var(--sea); font-variant-numeric: tabular-nums; }
/* Broker or bank, two plain columns */
.vs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px clamp(28px, 4vw, 56px); }
.vs-col { display: grid; gap: 14px; align-content: start; }
.vs-head { font-size: var(--fs-item); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vs-list { display: grid; gap: 12px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.vs-list li { position: relative; padding-left: 26px; }
.vs-list li::before { position: absolute; left: 0; top: .04em; font-size: 1.05em; line-height: 1.4; }
.vs-list.yes li::before { content: "+"; color: var(--sea); }
.vs-list.no { color: var(--muted); }
.vs-list.no li::before { content: "–"; color: #B2BEBE; }
/* Cover. A dark panel rather than a photo, with the three numbers along the bottom. */
.cover { background: var(--deep); color: #fff; padding: calc(84px + clamp(56px, 7vw, 96px)) var(--gutter) clamp(48px, 6vw, 76px); }
.cover-grid { max-width: 1240px; display: grid; gap: clamp(20px, 2.4vw, 32px); }
.cover .label { color: rgba(255, 255, 255, .6); }
.cover h1 { font-size: min(clamp(2.5rem, 5.4vw, 4.5rem), 17vh); line-height: 1; letter-spacing: -.045em; color: #fff; max-width: 21ch; }
.cover-lead { font-size: var(--fs-lead); line-height: 1.65; color: rgba(255, 255, 255, .8); max-width: 64ch; }
.cover-lead a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
.cover-lead a:hover { text-decoration-color: #fff; }
.cover-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 44px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid rgba(255, 255, 255, .22); }
.cover-num b { display: block; font-size: clamp(1.7rem, 2.9vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.cover-num span { display: block; margin-top: 9px; font-size: .92rem; line-height: 1.35; color: rgba(255, 255, 255, .64); }
.cover-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
/* Guides. The cover meta line, the pulled-out notes, plain bullet lists and the read-next links. */
.cover-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .92rem; color: rgba(255, 255, 255, .64); }
.cover-meta b { color: #fff; font-weight: 500; }
.cover-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .42); }
.note { display: grid; gap: 10px; border-left: 2px solid var(--sea); padding-left: clamp(18px, 2.2vw, 30px); max-width: 62ch; }
.note .lbl { font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sea); }
.note p { font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.note strong { color: var(--ink); font-weight: 500; }
.mapwide { width: 100%; max-width: 1240px; }
.mapframe { width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--foam); }
.mapframe iframe { width: 100%; height: clamp(320px, 42vw, 520px); border: 0; display: block; }
.bullets { display: grid; gap: 14px; max-width: 62ch; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.bullets li { position: relative; padding-left: 26px; }
.bullets li::before { content: "\2013"; position: absolute; left: 0; color: #B2BEBE; }
.bullets b { color: var(--ink); font-weight: 500; }
.rel-link { display: inline-flex; align-items: center; gap: 10px; transition: color .3s var(--ease); }
.rel-link svg { width: 16px; height: 16px; flex: none; }
.rel-link:hover { color: var(--sea); }
/* The story runs as one block: no alternating backgrounds, tighter rhythm between beats. */
.story-sec { padding-bottom: clamp(52px, 6vw, 88px); }
.story-sec + .story-sec { padding-top: 0; }
.story-sec.story-end { padding-bottom: clamp(90px, 11vw, 160px); }
.result-main { border-left: 2px solid var(--sea); padding-left: clamp(18px, 2.2vw, 30px); }
.result-main .lead { font-size: clamp(1.1rem, 1.4vw, 1.28rem); color: var(--ink); }
/* Case study hub. Filter chips, then the cards as real tiles. */
/* Calculators. Tabs, fields, results and the email gate. */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-tab { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(14, 31, 38, .32); background: transparent; color: var(--ink); font-weight: 500; font-size: .95rem; cursor: pointer; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.calc-tab:hover { border-color: var(--ink); background: rgba(14, 31, 38, .05); }
.calc-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.calc-panel { width: 100%; display: grid; gap: clamp(26px, 3vw, 38px); justify-items: start; }
.calc-panel[hidden] { display: none; }
.calc-lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-soft); max-width: 58ch; }
.sub-label { font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fields { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 34px); }
.field { display: grid; gap: 7px; min-width: 0; }
.field[hidden] { display: none; }
.field label { font-size: .95rem; font-weight: 500; color: var(--ink-soft); }
.field input, .field select { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid #CFD9D8; border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1.02rem; transition: border-color .3s var(--ease); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus { border-color: var(--sea); outline: none; }
.field input::placeholder { color: #9FADAF; }
.out { width: 100%; display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 26px; }
.out-n { font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.out-head { display: grid; gap: 10px; }
.out-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.out-row:last-of-type { border-bottom: 0; }
.out-row span:first-child { font-weight: 500; color: var(--ink); }
.out-row span:last-child { font-variant-numeric: tabular-nums; }
.out-line { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.out-line:empty { display: none; }
.out-total { font-weight: 500; color: var(--ink); }
.out-note { color: var(--sea); }
.vs-list.plain li::before { content: "–"; color: #B2BEBE; }
/* Questions */
/* ========== Closing ========== */
.close { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; color: #fff; background: #5C4A44; }
.close-img { position: absolute; top: -4%; left: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: 50% 42%; z-index: -2; }
.close::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 16, 18, .62) 0%, rgba(20, 16, 18, .22) 45%, rgba(20, 16, 18, .08) 100%); }
.close-copy { padding: 0 var(--gutter) var(--copy-bottom); display: grid; gap: 22px; }
.close h2 { font-size: var(--fs-display); line-height: .92; letter-spacing: -.05em; }
.close p { font-size: clamp(1.08rem, 1.4vw, 1.3rem); color: rgba(255, 255, 255, .88); }
.close .hero-actions { margin-top: 10px; }
/* ========== Footer ========== */
.foot { padding: 56px var(--gutter) 44px; display: grid; gap: 30px; font-size: .92rem; color: var(--muted); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.foot-brand { display: flex; align-items: center; gap: 22px; }
.foot-brand .logo-foot { height: 26px; width: auto; }
.foot-brand .badge { width: 60px; height: 60px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 26px; color: var(--ink); }
.foot nav a:hover { color: var(--sea); }
.foot-legal { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .82rem; line-height: 1.55; }
.foot-legal p { max-width: 80ch; }
.foot-legal .foot-credit { max-width: 92ch; }
.foot-legal .foot-line { max-width: none; }
.foot-line .nw { white-space: nowrap; }
.foot-line .sep { display: inline-block; padding: 0 8px; color: var(--muted); }
.foot-line a:hover { color: var(--sea); }
/* ========== Motion ========== */
@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: drift-hero 26s ease-in-out infinite alternate; }
  .close-img { animation: drift 44s ease-in-out infinite alternate; }
  .hero-copy > * { animation: arrive 1.4s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .25s; }
}
@keyframes drift {
  from { transform: translate3d(-1.2%, -1%, 0) scale(1); }
  to { transform: translate3d(1.2%, 1%, 0) scale(1.05); }
}
@keyframes drift-hero {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
@keyframes arrive {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .soft { animation: soft linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}
@keyframes soft {
  from { translate: 0 40px; }
  to { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev, .rev-stage { transition: none; }
  .seq-img, .seq-item, .seq-place span, .seq-dots i, .rev, .rev-stage { transition: none; }
}
/* Savings table. Same tokens, no chrome, just rules. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tbl-wrap { width: 100%; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; }
.tbl th, .tbl td { padding: 15px 16px 15px 0; text-align: right; border-bottom: 1px solid var(--line); font-weight: 400; }
.tbl thead th { font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 0; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl tbody th { font-size: var(--fs-item); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.tbl tbody td { color: var(--ink-soft); }
.tbl-words tbody th, .tbl-words tfoot th { font-size: 1.02rem; }
.tbl tfoot th, .tbl tfoot td { border-top: 1px solid var(--line); font-weight: 500; color: var(--ink); }
.big { font-size: var(--fs-item); font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.big span { display: block; margin-top: 2px; font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--sea); }
.tbl tbody td.win { color: var(--sea); font-weight: 500; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tfoot tr th, .tbl tfoot tr td { border-bottom: 0; }
.fine { font-size: .88rem; line-height: 1.6; color: var(--muted); max-width: 68ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.case-filter { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(14, 31, 38, .32); background: transparent; color: var(--ink); font-weight: 500; font-size: .92rem; cursor: pointer; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.case-filter:hover { border-color: var(--ink); background: rgba(14, 31, 38, .05); }
.case-filter.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.case-count { font-size: .92rem; color: var(--muted); }
.case-head { max-width: 1240px; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(30px, 3.4vw, 44px); }
.case-head-side { display: grid; gap: 18px; }
.case-grid { width: 100%; max-width: 1240px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 1.8vw, 24px); }
.case-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.2vw, 30px); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; transition: border-color .35s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); }
.case-card .case-nums { margin-top: auto; }
.case-card:hover { border-color: #BFCDCC; transform: translateY(-3px); box-shadow: 0 16px 44px rgba(14, 31, 38, .08); }
.case-card[hidden] { display: none; }
.case-card.feature { grid-column: span 2; }
.case-card.feature .case-title { font-size: clamp(1.55rem, 2.2vw, 2.05rem); }
.case-card.feature .case-summary { max-width: 74ch; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tag { padding: 5px 12px; border-radius: 999px; background: var(--sand); color: var(--ink); font-size: .68rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.case-title { font-size: clamp(1.24rem, 1.6vw, 1.42rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; color: var(--ink); text-wrap: balance; transition: color .35s var(--ease); }
.case-card:hover .case-title { color: var(--sea); }
.case-summary { font-size: .97rem; line-height: 1.6; color: var(--ink-soft); }
@media (min-width: 861px) and (max-width: 1160px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card.feature { grid-column: 1 / -1; }
}
.case-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.case-nums.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-num { display: block; min-width: 0; }
.case-num b { display: block; font-weight: 500; font-size: 1.12rem; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.case-num span { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.35; color: var(--muted); }
.case-read { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .95rem; color: var(--sea); }
.case-read svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.case-card:hover .case-read svg { transform: translateX(4px); }
.bp-locked { filter: blur(7px); pointer-events: none; user-select: none; }
#bp-detail { transition: filter .4s; display: grid; gap: 0; }
.gate { width: 100%; display: grid; gap: 10px; justify-items: start; padding: 22px 0 4px; }
.gate-title { font-size: var(--fs-item); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.gate-form { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin-top: 4px; }
.gate-form input[type="email"] { flex: 1 1 240px; min-height: 54px; padding: 0 16px; border: 1px solid #CFD9D8; border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; }
.gate-form input[type="email"]:focus { border-color: var(--sea); outline: none; }
.gate-err { color: #B23B2E; font-size: .9rem; }
.gate-err[hidden], #bp-thanks[hidden], #bp-gate[hidden] { display: none; }
#bp-thanks { display: grid; gap: 14px; justify-items: start; padding-top: 18px; }
/* Four numbers, plain */
.stats { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px clamp(20px, 3vw, 40px); border-top: 1px solid var(--line); padding-top: 26px; }
.stats li { display: grid; gap: 3px; align-content: start; }
.stat-n { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-l { margin-top: 8px; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.stat-s { font-size: .92rem; line-height: 1.4; color: var(--muted); }
/* ========== Responsive ========== */
@media (max-width: 860px) {
  .bar-inner { height: 70px; }
  .bar-badge { height: 34px; margin-left: 10px; padding-left: 10px; }
  .logo, .logo img { height: 26px; }
  .bar .pill, .bar .tel { display: none; }
  .hero::before { background: linear-gradient(0deg, rgba(6, 26, 32, var(--w3)) 0%, rgba(6, 26, 32, var(--w4)) 50%, rgba(6, 26, 32, 0) 86%); }
  .seq-meta { left: var(--gutter); right: auto; top: 96px; bottom: auto; justify-items: start; }
  .seq-place span { text-align: left; }
  .sec-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sec-side { position: static; }
  .suburbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs { grid-template-columns: minmax(0, 1fr); }
  .cover-nums { gap: 16px 16px; }
  .cover-num b { font-size: 1.45rem; }
  .cover-num span { margin-top: 6px; font-size: .84rem; }
  .case-grid { grid-template-columns: minmax(0, 1fr); }
  .case-card.feature { grid-column: auto; }
  .case-head { display: grid; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .faq-q .ans { padding-right: 0; }
  .rev-nav button { width: 44px; height: 44px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The table restacks rather than scrolling sideways, so the savings stay on screen. */
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl tbody tr, .tbl tfoot tr { display: grid; gap: 2px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .tbl tbody tr { display: grid; gap: 2px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .tbl tbody tr:last-child { border-bottom: 0; }
  .tbl tbody th, .tbl tbody td, .tbl tfoot th, .tbl tfoot td { display: flex; align-items: baseline; gap: 14px; padding: 0; border: 0; text-align: left; }
  .tbl tbody th, .tbl tfoot th { margin-bottom: 8px; }
  .tbl tbody td::before, .tbl tfoot td::before { content: attr(data-l); flex: 0 0 10.5em; color: var(--muted); font-size: .95rem; }
  .tbl tbody th, .tbl tbody td { display: flex; align-items: baseline; gap: 14px; padding: 0; border: 0; text-align: left; }
  .tbl tbody th { margin-bottom: 8px; }
  .tbl tbody td::before { content: attr(data-l); flex: 0 0 10.5em; color: var(--muted); font-size: .95rem; }
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
  .menu { align-content: start; }
  .m-sub, .m-sub-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
  .signature { max-width: 210px; }
}

/* Contact page. The enquiry form, the booking frame. */
.enq { width: 100%; display: grid; gap: 22px; }
.enq[hidden] { display: none; }
.field.wide { grid-column: 1 / -1; }
.field textarea { width: 100%; min-height: 132px; padding: 13px 14px; border: 1px solid #CFD9D8; border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1.02rem; line-height: 1.6; resize: vertical; transition: border-color .3s var(--ease); }
.field textarea:focus { border-color: var(--sea); outline: none; }
.field textarea::placeholder { color: #9FADAF; }
.enq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.enq-note { font-size: .95rem; color: var(--muted); margin: 0; }
.enq-err { color: #B23B2E; font-size: .95rem; margin: 0; }
.enq-err[hidden], .enq-done[hidden] { display: none; }
.enq-done { display: grid; gap: 12px; border-left: 2px solid var(--sea); padding: 4px 0 4px 22px; }
.enq-done p { color: var(--ink-soft); margin: 0; }
.enq-done:focus { outline: none; }
.rows.bare { border-top: 0; }
.rows.bare > li { border-bottom: 0; }
.book-head { max-width: 1240px; display: grid; gap: 14px; margin-bottom: clamp(30px, 3.4vw, 44px); }
.bookframe { width: 100%; max-width: 1240px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.bookframe .calendly-inline-widget { width: 100%; }
@media (max-width: 860px) {
  .enq-foot .btn { width: 100%; justify-content: center; }
  .bookframe .calendly-inline-widget { height: 1150px !important; }
}

/* Legal pages. Prose lists, the one place the site shows bullets. */
.prose-list { display: grid; gap: 10px; max-width: 58ch; padding-left: 1.2em; font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-soft); }
.prose-list li { list-style: disc; }
.prose-list li::marker { color: var(--sea); }