/* ==========================================================================
   Sunbury Web — "big sky, warm awning"

   The ground is the open sky over the volcanic plain north-west of Melbourne;
   the ink is Sunbury bluestone; the accent is shop-awning enamel. The signature
   element is the awning itself (see "Awning" below) — a striped, scalloped
   valance drawn in pure CSS. It appears exactly twice on the site: full-bleed
   across the top of the hero, and on the featured pricing card, where it does
   the job a "Most popular" badge would otherwise do.

   Everything is a token in :root. Nothing below that block hardcodes a colour.
   ========================================================================== */

:root {
    /* Ground — open sky over the basalt plains */
    --sky:          #E7EFF3;
    --sky-deep:     #D5E3EA;
    --card:         #FFFFFF;

    /* Ink — Sunbury bluestone */
    --ink:          #182A34;
    --ink-soft:     #4F646F;
    --line:         #C6D8E0;
    --line-soft:    #DDE9EE;

    /* Awning enamel */
    --awning:       #E2622F;
    --awning-deep:  #B0451A;
    --awning-press: #8F3712;
    --awning-light: #F7E7D2;
    --awning-wash:  #FBEDE3;
    --gold:         #EFB443;

    /* On the dark band */
    --dark:         #142430;
    --dark-raised:  #1D3644;
    --dark-line:    #2C4C5D;
    --dark-text:    #C4D8E2;
    --dark-faint:   #8CA0AB;

    /* Type. Bricolage Grotesque carries the personality — a grotesque with a
       humanist wobble, confident without being cute. Instrument Sans is
       slightly condensed and holds up at small sizes on a phone. */
    --font-display: "Bricolage Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono:    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --container-w:        1140px;
    --container-narrow-w: 700px;

    --radius:    10px;
    --radius-sm: 6px;

    /* Awning geometry. The stripe width equals the scallop tile width, so every
       scallop comes out a single solid colour, and one variable keeps the
       gradient and the mask permanently in step.

       Proportion is the whole thing: each hanging tab wants to be about as wide
       as it is tall (band height + scallop). Make the band taller than the
       stripe is wide and the scallops stop reading as scallops and start
       reading as fingers. */
    --awning-stripe:  2.6rem;
    --awning-scallop: 1.3rem;
    --awning-height:  1.4rem;

    --shadow-card: 0 1px 2px rgba(24, 42, 52, 0.04), 0 8px 24px -12px rgba(24, 42, 52, 0.18);
    --shadow-lift: 0 2px 4px rgba(24, 42, 52, 0.06), 0 18px 40px -16px rgba(24, 42, 52, 0.28);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
    margin: 0;
    background: var(--sky);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }

:focus-visible {
    outline: 2.5px solid var(--awning-deep);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--sky);
    padding: 0.75rem 1.25rem;
    z-index: 1000;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; top: 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--container-narrow-w); margin: 0 auto; padding: 0 1.5rem; }

/* Scroll-reveal — see scripts.js. baseof.html ships a <noscript> override so
   this never leaves content invisible when JS is off. */
[data-observe] { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
[data-observe].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-observe] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Awning — THE signature element.

   .awning is the striped band; its ::after hangs the scalloped valance below.
   Each mask tile is a circle whose bottom half fills the strip, so repeating
   the tile horizontally produces the row of hanging bumps. If mask-image isn't
   supported the valance degrades to a plain striped strip, which still reads
   as an awning.
   -------------------------------------------------------------------------- */

.awning {
    position: relative;
    height: var(--awning-height);
    background: repeating-linear-gradient(
        90deg,
        var(--awning)       0 var(--awning-stripe),
        var(--awning-light) var(--awning-stripe) calc(var(--awning-stripe) * 2)
    );
}
.awning::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: var(--awning-scallop);
    background: inherit;
    -webkit-mask-image: radial-gradient(circle var(--awning-scallop) at 50% 0, #000 99%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(circle var(--awning-scallop) at 50% 0, #000 99%, rgba(0,0,0,0) 100%);
    -webkit-mask-size: calc(var(--awning-scallop) * 2) 100%;
            mask-size: calc(var(--awning-scallop) * 2) 100%;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
}
/* Card-sized awning. It re-declares the geometry rather than just shrinking the
   height, so the tab stays roughly square at the smaller scale. */
.awning--sm {
    --awning-stripe:  1.7rem;
    --awning-scallop: 0.85rem;
    --awning-height:  0.75rem;
}

/* --------------------------------------------------------------------------
   Brand mark — a miniature of the awning, so the logo and the signature are
   the same idea at two sizes.

   The mark is not a scale model of the hero awning — it can't be. The hero has
   about 35 stripes across the viewport; a 40px logo has four. So the mark keeps
   a tall canopy and a deliberately SHALLOW frill: the scallop strip is shorter
   than the mask circle's radius, so only the top of each circle shows. Deep
   scallops at this size collapse into a row of disconnected blobs.
   -------------------------------------------------------------------------- */

.brand-mark {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
    border-radius: 4px 4px 0 0;
    background: repeating-linear-gradient(
        90deg,
        var(--awning)       0 0.625rem,
        var(--awning-light) 0.625rem 1.25rem
    );
}
.brand-mark::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 0.3rem;
    background: inherit;
    -webkit-mask-image: radial-gradient(circle 0.3125rem at 50% 0, #000 99%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(circle 0.3125rem at 50% 0, #000 99%, rgba(0,0,0,0) 100%);
    -webkit-mask-size: 0.625rem 100%;
            mask-size: 0.625rem 100%;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.78rem 1.5rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.3;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.btn-primary { background: var(--awning-deep); color: #FFFFFF; }
.btn-primary:hover { background: var(--awning-press); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink); background: rgba(255,255,255,0.6); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-soft); }
.btn-ghost:hover { border-color: var(--awning); color: var(--awning-deep); }
.btn-on-dark { background: var(--gold); color: var(--dark); }
.btn-on-dark:hover { background: #FFFFFF; transform: translateY(-1px); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(231, 239, 243, 0.92);
    backdrop-filter: saturate(1.4) blur(8px);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--line);
}
.nav-container {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0.7rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.nav-logo { display: flex; align-items: flex-start; gap: 0.6rem; }
.nav-logo-text { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.35; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { font-weight: 500; font-size: 0.94rem; color: var(--ink-soft); }
.nav-links a:hover { color: var(--awning-deep); }
.nav-links .btn { color: #FFFFFF; }
.nav-links .btn:hover { color: #FFFFFF; }

.nav-mobile-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.4rem;
    color: var(--ink);
}
.nav-close-icon { display: none; }
.nav-links.nav--open .nav-hamburger-icon { display: none; }
.nav-links.nav--open .nav-close-icon { display: block; }

@media (max-width: 900px) {
    .nav-mobile-toggle { display: block; order: 2; }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--card);
        border-bottom: 1px solid var(--line);
        padding: 0.5rem 1.5rem 1.25rem;
        box-shadow: var(--shadow-card);
    }
    .nav-links.nav--open { display: flex; }
    .nav-links a { width: 100%; padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
    .nav-links .btn { margin-top: 0.9rem; border-bottom: none; }
}

/* --------------------------------------------------------------------------
   Bands — one class owns vertical section rhythm, so spacing has a single
   source of truth and no sibling selector can quietly lose to a class.
   -------------------------------------------------------------------------- */

.band { padding: 4.5rem 0; }
.band--tight { padding: 3rem 0; }
.band--sky-deep { background: var(--sky-deep); }
.band--card { background: var(--card); }
.band--dark { background: var(--dark); color: var(--dark-text); }
.band--dark h2, .band--dark h3 { color: #FFFFFF; }

@media (max-width: 720px) {
    .band { padding: 3.25rem 0; }
}

/* Section headers */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--awning-deep);
}
.eyebrow::before { content: ''; width: 1.4rem; height: 0.28rem; border-radius: 2px; background: var(--gold); }
.band--dark .eyebrow { color: var(--gold); }

.section-header { margin-bottom: 2.5rem; max-width: 44rem; }
.section-header--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header--center .eyebrow { justify-content: center; }
.section-title { font-size: clamp(1.85rem, 3.6vw, 2.5rem); line-height: 1.12; margin-top: 0.7rem; }
.section-description { color: var(--ink-soft); margin-top: 0.85rem; font-size: 1.05rem; }
.band--dark .section-description { color: var(--dark-text); }

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */

.hero { padding: 3.75rem 0 1.5rem; }
.hero-inner { max-width: 46rem; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--awning-deep);
    background: var(--awning-wash);
    border: 1px solid #F0D8C6;
    padding: 0.4rem 0.85rem;
    border-radius: 100px;
    margin-bottom: 1.6rem;
    /* A pill that wraps to two lines looks broken, so keep it short enough to
       fit a 320px screen and stop it overflowing if it ever isn't. */
    max-width: 100%;
}
.hero-title { font-size: clamp(2.5rem, 6.2vw, 4.3rem); line-height: 1.04; letter-spacing: -0.03em; }
.hero-title em { font-style: normal; color: var(--awning-deep); }
.hero-description { margin-top: 1.5rem; font-size: 1.2rem; color: var(--ink-soft); max-width: 36rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.1rem; }

/* Credential strip — the reason to trust a cheap quote. */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.4rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.hero-trust-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-trust-item svg { color: var(--awning-deep); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   "Every site includes" grid
   -------------------------------------------------------------------------- */

.included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 900px) { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .included-grid { grid-template-columns: 1fr; } }

.included-item {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 1.5rem 1.5rem 1.6rem;
}
.included-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: 8px;
    background: var(--awning-wash);
    color: var(--awning-deep);
    margin-bottom: 1rem;
}
.included-title { font-size: 1.08rem; font-weight: 700; }
.included-body { margin-top: 0.45rem; color: var(--ink-soft); font-size: 0.96rem; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

/* Cards stretch to a common height so the three "get a price" buttons land on
   one line — with align-items:start they end at three different heights and the
   row reads as ragged. `.price-card .btn { margin-top: auto }` does the rest. */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
@media (max-width: 940px) { .pricing-grid { grid-template-columns: 1fr; max-width: 34rem; margin: 0 auto; } }

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 1.75rem 1.6rem 1.75rem;
    box-shadow: var(--shadow-card);
}
/* The featured card wears the awning instead of a "Most popular" badge. */
.price-card--featured {
    border-color: var(--awning);
    box-shadow: var(--shadow-lift);
    padding-top: 2.6rem;
    overflow: visible;
}
.price-card--featured .awning {
    position: absolute;
    top: 0; left: -1px; right: -1px;
    border-radius: var(--radius) var(--radius) 0 0;
}
.price-card-pick {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--awning-deep);
    margin-bottom: 0.5rem;
}
.price-card-name { font-size: 1.35rem; font-weight: 800; }
.price-card-suits { color: var(--ink-soft); font-size: 0.94rem; margin-top: 0.4rem; min-height: 2.9em; }
.price-card-figure {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 1.1rem 0 0.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
}
.price-card-from { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.price-card-amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.price-card-gst { font-size: 0.82rem; color: var(--ink-soft); }
.price-card-lines { margin: 1.25rem 0 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.price-card-lines li { display: flex; gap: 0.6rem; font-size: 0.96rem; align-items: flex-start; }
.price-card-lines svg { color: var(--awning-deep); flex-shrink: 0; margin-top: 0.35rem; }
.price-card .btn { margin-top: auto; }

/* Care plan — a single wide note under the cards */
.care-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1.4rem 1.6rem;
    background: var(--awning-wash);
    border: 1px solid #F0D8C6;
    border-radius: var(--radius);
}
.care-plan-title { font-weight: 700; font-family: var(--font-display); font-size: 1.1rem; }
.care-plan-body { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.2rem; max-width: 44rem; }
.care-plan-price { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; white-space: nowrap; }
.care-plan-price span { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }

.price-note { margin-top: 1.25rem; font-size: 0.92rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   AI extras — the one dark band on the site
   -------------------------------------------------------------------------- */

.ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 780px) { .ai-grid { grid-template-columns: 1fr; } }

.ai-card {
    background: var(--dark-raised);
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    padding: 1.6rem;
}
.ai-card-title { font-size: 1.15rem; font-weight: 700; color: #FFFFFF; display: flex; align-items: center; gap: 0.6rem; }
.ai-card-title::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.ai-card-body { margin-top: 0.6rem; color: var(--dark-text); font-size: 0.97rem; }

.ai-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--dark-line);
}
.ai-footer p { color: var(--dark-text); font-size: 0.97rem; max-width: 40rem; }

/* --------------------------------------------------------------------------
   How it works — numbering is used here and nowhere else, because this is the
   only content on the site where order actually carries information.
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 2.25rem; } }

.step { position: relative; padding-top: 2.5rem; }
.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: 0; left: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--awning);
    letter-spacing: -0.02em;
    line-height: 1;
}
/* The rule runs from the number to the edge of the column, reading as the
   thread between stages rather than as decoration. */
.step::after {
    content: '';
    position: absolute;
    top: 0.7rem; left: 3rem; right: 0;
    height: 1.5px;
    background: var(--line);
}
.step:last-child::after { background: linear-gradient(90deg, var(--line), rgba(198, 216, 224, 0)); }
.step-title { font-size: 1.2rem; font-weight: 700; }
.step-body { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   About / who builds it
   -------------------------------------------------------------------------- */

.about-strip { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .about-strip { grid-template-columns: 1fr; gap: 2rem; } }

.about-portrait {
    background: var(--sky-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
}
.about-initials {
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--ink);
    line-height: 1;
}
.about-name { font-weight: 700; margin-top: 1rem; font-size: 1.1rem; }
.about-role { color: var(--ink-soft); font-size: 0.93rem; }
.credential-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.25rem; text-align: left; }
.credential {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 500;
}
.credential svg { color: var(--awning-deep); flex-shrink: 0; margin-top: 0.3rem; }
.about-body p + p { margin-top: 1rem; }
.about-body p { color: var(--ink-soft); font-size: 1.05rem; }
.about-body strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   FAQ — native <details>, so it works without JS and is keyboard accessible.
   -------------------------------------------------------------------------- */

.faq { max-width: 46rem; margin: 0 auto; }
.faq-item {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}
.faq-item[open] { border-color: var(--line); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    font-weight: 600;
    font-size: 1.03rem;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '';
    width: 0.6rem; height: 0.6rem;
    border-right: 2px solid var(--awning);
    border-bottom: 2px solid var(--awning);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    flex-shrink: 0;
    margin-top: -0.3rem;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 0.2rem; }
.faq-answer { padding: 0 1.35rem 1.25rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
    .faq-item summary::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.cta-band { text-align: center; }
.cta-title { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; }
.cta-body { color: var(--ink-soft); margin: 1rem auto 0; max-width: 34rem; font-size: 1.08rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }
.cta-aside { margin-top: 1.5rem; font-size: 0.92rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */

.page-hero { padding: 3.5rem 0 2.75rem; border-bottom: 1px solid var(--line); }
.page-title { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.08; }
.page-description { color: var(--ink-soft); margin-top: 0.75rem; max-width: 44rem; font-size: 1.12rem; }
.page-back { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   Article grid / cards
   -------------------------------------------------------------------------- */

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .article-grid { grid-template-columns: 1fr; } }

.article-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.article-card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow-card); }
@media (prefers-reduced-motion: reduce) { .article-card:hover { transform: none; } }

.article-card-thumb { display: block; aspect-ratio: 16/10; background: var(--sky-deep); }
.article-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Deliberately quiet. An earlier version striped this like the awning, which
   put three loud patterns on screen at once and stole attention from the one
   place the awning is meant to live. */
.article-card-thumb--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--sky-deep);
    border-bottom: 1px solid var(--line-soft);
}
.article-card-thumb--placeholder span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--ink-soft);
    border: 1.5px solid var(--line);
    padding: 0.3rem 0.85rem;
    border-radius: 100px;
}
.article-card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.article-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.article-date { font-size: 0.8rem; color: var(--ink-soft); font-weight: 500; }
.article-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.28; }
.article-card-title a:hover { color: var(--awning-deep); }
.article-card-desc { color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.article-card-link { font-size: 0.88rem; font-weight: 600; color: var(--awning-deep); margin-top: auto; }

/* Tags */
.tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    background: var(--sky);
    border: 1px solid var(--line-soft);
    padding: 0.18rem 0.55rem;
    border-radius: 100px;
}
a.tag:hover { color: var(--awning-deep); border-color: var(--awning); background: var(--awning-wash); }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Byline */
.byline { display: inline-flex; align-items: center; gap: 0.55rem; }
.byline-name { font-size: 0.89rem; font-weight: 600; }
.byline-name a:hover { color: var(--awning-deep); }
.byline-role { font-size: 0.85rem; color: var(--ink-soft); display: block; }

.avatar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ink);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    border-radius: 50%;
    overflow: hidden;
}
.avatar-mark img { width: 100%; height: 100%; object-fit: cover; }
.avatar-mark--sm { width: 1.85rem; height: 1.85rem; font-size: 0.75rem; }
.avatar-mark--md { width: 3.1rem; height: 3.1rem; font-size: 1.1rem; }
.avatar-mark--lg { width: 5.25rem; height: 5.25rem; font-size: 1.9rem; }

/* --------------------------------------------------------------------------
   Article single
   -------------------------------------------------------------------------- */

.article-post { padding: 3rem 0 4rem; }
.article-post-back { font-size: 0.9rem; font-weight: 600; color: var(--awning-deep); }
.article-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.article-post-title { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; margin-top: 0.85rem; }
.article-post-lead { font-size: 1.2rem; color: var(--ink-soft); margin-top: 1rem; }

.article-post-content { margin-top: 2.5rem; font-size: 1.08rem; }
.article-post-content > * + * { margin-top: 1.35rem; }
.article-post-content h2 { font-size: 1.55rem; font-weight: 800; margin-top: 2.5rem; }
.article-post-content h3 { font-size: 1.22rem; font-weight: 700; margin-top: 1.9rem; }
.article-post-content a { color: var(--awning-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-post-content strong { font-weight: 600; }
.article-post-content blockquote {
    border-left: 3px solid var(--awning);
    padding: 0.25rem 0 0.25rem 1.25rem;
    color: var(--ink-soft);
}
.article-post-content ul, .article-post-content ol { list-style: disc; padding-left: 1.4rem; }
.article-post-content ol { list-style: decimal; }
.article-post-content li + li { margin-top: 0.4rem; }
.article-post-content img, .article-post-content figure { border-radius: var(--radius); }
.article-post-content figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; }
.article-post-content code { font-family: var(--font-mono); background: var(--sky-deep); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.88em; }
.article-post-content pre { background: var(--dark); color: var(--sky); padding: 1.1rem; border-radius: var(--radius-sm); overflow-x: auto; }
.article-post-content pre code { background: none; padding: 0; }
.article-post-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.article-post-content th, .article-post-content td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
.article-post-content th { font-weight: 600; }

.article-post-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.article-post-author-body p { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.2rem; }

.article-post-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}
.share-text { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft); margin-bottom: 0.5rem; font-weight: 600; }
.share-links { display: flex; gap: 0.6rem; }
.share-link { display: inline-flex; padding: 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--card); }
.share-link:hover { color: var(--awning-deep); border-color: var(--awning); }

/* In-article call to action — the guides exist to earn enquiries. */
.article-cta {
    margin-top: 3rem;
    padding: 1.75rem;
    background: var(--awning-wash);
    border: 1px solid #F0D8C6;
    border-radius: var(--radius);
}
.article-cta-title { font-size: 1.25rem; font-weight: 800; }
.article-cta p { color: var(--ink-soft); margin-top: 0.5rem; }
.article-cta .btn { margin-top: 1.25rem; }

.article-post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.article-nav-link { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.article-nav-link:hover { border-color: var(--awning); }
.article-nav-next { text-align: right; grid-column: 2; }
.article-nav-label { display: block; font-size: 0.78rem; color: var(--ink-soft); font-weight: 500; }
.article-nav-title { display: block; font-weight: 600; margin-top: 0.3rem; }
@media (max-width: 620px) {
    .article-post-navigation { grid-template-columns: 1fr; }
    .article-nav-next { grid-column: 1; text-align: left; }
}

/* --------------------------------------------------------------------------
   Authors
   -------------------------------------------------------------------------- */

.author-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 620px) { .author-grid { grid-template-columns: 1fr; } }
.author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    transition: border-color 0.16s ease;
}
.author-card:hover { border-color: var(--awning); }
.author-card-name { font-weight: 700; }
.author-card-role { font-size: 0.88rem; color: var(--ink-soft); }
.author-card-count { font-size: 0.82rem; color: var(--awning-deep); margin-top: 0.2rem; font-weight: 500; }

.author-profile { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.author-profile-name { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.author-profile-role { color: var(--ink-soft); margin-top: 0.25rem; }
.author-profile-bio { margin-top: 1.5rem; max-width: 44rem; font-size: 1.05rem; }
.author-profile-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 1.75rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label { font-size: 0.88rem; font-weight: 600; }
.form-field-optional { color: var(--ink-soft); font-weight: 400; }
.form-field input, .form-field textarea, .form-field select {
    font: inherit;
    padding: 0.72rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--sky);
    color: var(--ink);
    width: 100%;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    outline: 2.5px solid var(--awning-deep);
    outline-offset: 1px;
    border-color: var(--awning);
    background: var(--card);
}
.form-field textarea { resize: vertical; min-height: 8rem; }
.form-note { font-size: 0.86rem; color: var(--ink-soft); }
.form-status { font-size: 0.93rem; font-weight: 600; margin-top: 0.6rem; min-height: 1.3em; }
.form-status[data-state="pending"] { color: var(--awning-deep); }
.form-status[data-state="error"] { color: #B3261E; }

.contact-aside { display: flex; flex-direction: column; gap: 0; }
.contact-info-item { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.contact-info-item:first-child { padding-top: 0; }
.contact-info-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 600; }
.contact-info-value { margin-top: 0.35rem; font-weight: 600; font-size: 1.05rem; }
.contact-info-value a:hover { color: var(--awning-deep); }
.contact-info-note { font-size: 0.9rem; color: var(--ink-soft); font-weight: 400; margin-top: 0.2rem; }
.contact-social { padding-top: 1.1rem; }
.contact-social .share-links { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Generic content page (About)
   -------------------------------------------------------------------------- */

.content-page { padding: 3rem 0 4rem; }
.content-page .article-post-content { margin-top: 0; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 3rem; font-size: 0.92rem; color: var(--ink-soft); }
.pagination-link { font-weight: 600; color: var(--awning-deep); }

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

.not-found { padding: 6rem 0; text-align: center; }
.not-found-code { font-size: 0.95rem; color: var(--awning-deep); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.not-found-title { font-size: 2.1rem; margin-top: 0.75rem; }
.not-found-text { color: var(--ink-soft); margin-top: 0.75rem; }
.not-found .btn { margin-top: 2rem; }

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

.footer { background: var(--dark); color: var(--dark-text); margin-top: 0; padding: 3rem 0 2rem; }
.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--dark-line);
}
@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr; gap: 2rem; } }
.footer-brand { display: flex; align-items: flex-start; gap: 0.6rem; }
.footer-brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: #FFFFFF; letter-spacing: -0.02em; line-height: 1.35; }
.footer-tagline { margin-top: 0.9rem; font-size: 0.95rem; color: var(--dark-text); max-width: 26rem; }
.footer-heading { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--gold); font-weight: 600; margin-bottom: 0.9rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a { color: var(--dark-text); font-size: 0.95rem; }
.footer-links a:hover { color: #FFFFFF; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.footer-social-link { display: inline-flex; padding: 0.5rem; border: 1px solid var(--dark-line); border-radius: var(--radius-sm); color: var(--dark-text); }
.footer-social-link:hover { color: var(--dark); background: var(--gold); border-color: var(--gold); }
.footer-bottom {
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
}
.footer-text { font-size: 0.85rem; color: var(--dark-faint); }