/* ==========================================================================
   Two Wrens components
   Measurements refer to design-reference/two-wrens-homepage-v2-navy.png,
   read at 1024px and scaled by 1.40625. See tokens.css for the derivation.
   ========================================================================== */

/* ==========================================================================
   Buttons
   Measured: 33px tall at 1024 -> 46px. Radius ~6px. No shadows.
   The reference uses two *different* greens for the two primary buttons:
   deep green in the header, olive in the hero. That is reproduced, not
   normalised, because both were sampled from flat fills.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--control-pad-x);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-button);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.btn:hover {
    text-decoration: none;
}

.btn svg {
    flex: none;
    width: 17px;
    height: 17px;
}

/* Header CTA */
.btn--deep {
    background: var(--green-deep);
    color: #fff;
}

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

/* Hero CTA */
.btn--olive {
    background: var(--green-olive);
    color: #fff;
}

.btn--olive:hover {
    background: var(--green-olive-hover);
}

/* Outlined, sits on the navy hero */
.btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Outlined, sits on a light field */
.btn--outline {
    background: transparent;
    border-color: var(--border-card);
    color: var(--ink-strong);
}

.btn--outline:hover {
    border-color: var(--green-deep);
    color: var(--green-deep);
}

.btn--compact {
    min-height: 40px;
    padding: 0 18px;
    font-size: 14px;
}

/* ---------- Text link with trailing arrow ---------- */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--green-deep);
    font-size: var(--fs-small);
    font-weight: 600;
}

.link-arrow svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition);
}

.link-arrow:hover {
    text-decoration: none;
}

.link-arrow:hover svg {
    transform: translateX(3px);
}

/* ==========================================================================
   Section headings
   Measured: centred, 30px bold over a ~17px grey sub-line.
   ========================================================================== */

.section-heading {
    max-width: 62ch;
}

/* Wider than the default measure so the sub-line stays on one line, as drawn */
.section-heading--center {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.section-heading__sub {
    margin-top: var(--space-3);
    color: var(--ink-muted);
    font-size: var(--fs-lead);
    line-height: 1.5;
}

.section__grid {
    margin-top: var(--space-8);
}

.eyebrow {
    color: var(--green-deep);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* ==========================================================================
   Header
   Measured: 46px band at 1024 -> 64px. White, logo hard left, nav group and
   CTA pushed right. A hairline separates it from white sections but not from
   the navy hero, so it is drawn on the header itself.
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-card);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-7);
    min-height: var(--header-height);
}

/* ---------- Logo lockup ---------- */

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.logo:hover {
    text-decoration: none;
}

/* The supplied mark is portrait (80x91), so it is sized by height and left to
   find its own width rather than being forced into the reference's wider box. */
.logo__mark {
    flex: none;
    width: auto;
    height: 46px;
}

.logo__word {
    display: block;
    color: var(--ink-strong);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* Measured: pale green caps, heavily letter-spaced, sized to the wordmark.
   On white the measured pale fails AA, so the light-surface ink is darker. */
.logo__tagline {
    display: block;
    margin-top: 3px;
    color: var(--green-pale-ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.site-footer .logo__tagline {
    color: var(--green-pale);
}

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

.site-nav {
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-7);
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-2);
    color: var(--ink-strong);
    font-size: var(--fs-nav);
    font-weight: 500;
}

.site-nav__link:hover {
    color: var(--green-deep);
    text-decoration: none;
}

.site-nav__link svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* Measured: 2px green underline under the active label only */
.site-nav__item--current .site-nav__link {
    color: var(--green-deep);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 var(--green-deep);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.site-nav__label {
    display: none;
}

.site-nav__cta {
    display: none;
}

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(14, 23, 38, 0.48);
    cursor: pointer;
}

.nav-scrim[hidden] {
    display: none;
}

body.nav-open {
    overflow: hidden;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    color: var(--ink-strong);
    cursor: pointer;
}

.nav-toggle svg {
    width: 22px;
    height: 22px;
    margin-inline: auto;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
}

/* ==========================================================================
   Hero — person-led navy, brand-first first viewport
   ========================================================================== */

.hero {
    position: relative;
    min-height: clamp(420px, 72vh, 620px);
    background: var(--navy);
    color: var(--ink-on-navy-soft);
    overflow: hidden;
}

.hero__visual {
    position: absolute;
    inset: 0 0 0 36%;
}

/* picture is a transparent wrapper so existing img object-fit rules still apply */
.hero__visual picture,
.page-head__visual picture,
.about__portrait picture,
.guides-visual__frame picture {
    display: contents;
}

.hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 45%;
    filter: brightness(0.92) saturate(0.95);
    transform: scale(1.02);
    animation: hero-settle 1.4s ease-out forwards;
}

@keyframes hero-settle {
    from { opacity: 0.55; transform: scale(1.06); }
    to { opacity: 1; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__visual img {
        animation: none;
        transform: none;
    }
}

.hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            var(--navy) 0%,
            rgba(14, 23, 38, 0.82) 12%,
            rgba(14, 23, 38, 0.18) 40%,
            rgba(14, 23, 38, 0.05) 68%,
            rgba(14, 23, 38, 0.28) 100%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    align-items: center;
    min-height: inherit;
    padding-block: var(--space-10) var(--space-9);
}

.hero__copy {
    max-width: 34rem;
    padding-left: var(--hero-copy-inset);
    animation: hero-copy-in 0.9s ease-out both;
}

@keyframes hero-copy-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__copy { animation: none; }
}

.hero__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.hero__brand-name {
    color: var(--ink-on-navy);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero__brand-tag {
    color: var(--green-bright);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.hero__title {
    color: var(--ink-on-navy);
}

.hero__title-accent {
    color: var(--green-accent);
}

.hero__lead {
    max-width: 28rem;
    margin-top: var(--space-5);
    color: var(--ink-on-navy-soft);
    font-size: var(--fs-lead);
    line-height: 1.55;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-7);
}

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

/* ==========================================================================
   Pain strip — under the hero, not competing with the H1
   ========================================================================== */

.pain-strip {
    background: var(--navy-deep);
    color: var(--ink-on-navy-soft);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pain-strip__inner {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-7);
    padding-block: var(--space-6);
}

.pain-strip__title {
    color: var(--green-bright);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.pain-strip__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

.pain-strip__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--ink-on-navy-soft);
    font-size: var(--fs-small);
    line-height: 1.4;
}

.pain-strip__icon {
    flex: none;
    color: var(--green-bright);
}

.pain-strip__icon svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Cards
   Measured: white, 1px #E7E8EA hairline, 8px radius, 24px padding,
   left aligned, green outline icon above a bold title and grey body.
   ========================================================================== */

.card {
    display: flex;
    flex-direction: column;
    padding: var(--card-pad);
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
}

.card__icon {
    color: var(--green-mid);
}

.card__icon svg {
    width: 26px;
    height: 26px;
}

.card__title {
    margin-top: var(--space-4);
    color: var(--ink-strong);
    font-size: var(--fs-card-title);
    font-weight: 700;
    line-height: 1.3;
}

.card__body {
    margin-top: var(--space-3);
    color: var(--ink-body);
    font-size: 14px;
    line-height: var(--lh-body);
}

.card__action {
    margin-top: auto;
    padding-top: var(--space-5);
}

/* Seven Business Context services settle into four columns, then three.
   auto-fit avoids an orphaned narrow card without encoding a special case. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--grid-gutter);
}

.services-grid--featured {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-more {
    margin-top: var(--space-7);
    text-align: center;
}

.service-card {
    scroll-margin-top: var(--space-6);
}

.card__eyebrow {
    margin-top: var(--space-2);
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* ==========================================================================
   Productised offering
   Business Context requires ten packages with outcomes, deliverables, duration
   and a CTA. This section uses the approved card vocabulary at a larger scale.
   ========================================================================== */

.section--packages {
    background: var(--surface-strip);
}

.packages-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 46rem;
    margin: var(--space-7) auto 0;
    padding: var(--space-4) var(--space-5);
    background: #fff;
    border: 1px solid var(--border-divider);
    border-radius: var(--radius-md);
    color: var(--ink-body);
    font-size: 14px;
    line-height: 1.6;
}

.packages-note__icon {
    flex: none;
    margin-top: 2px;
    color: var(--green-mid);
}

.packages-note__icon svg {
    width: 20px;
    height: 20px;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.packages-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
    margin-inline: auto;
}

.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-6);
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
}

.package-card--featured {
    border-color: var(--green-mid);
    box-shadow: inset 0 3px 0 var(--green-mid);
}

.package-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.package-card__category {
    color: var(--green-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.package-card__title {
    margin-top: var(--space-2);
    color: var(--ink-strong);
    font-size: 19px;
    line-height: 1.3;
}

.package-card__badge {
    flex: none;
    padding: 4px var(--space-2);
    background: var(--surface-tint);
    border-radius: var(--radius-sm);
    color: var(--green-deep);
    font-size: 11px;
    font-weight: 700;
}

.package-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-5);
    color: var(--green-deep);
}

.package-card__from {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.package-card__price strong {
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.package-card__price--unpriced strong {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0;
}

.package-card__summary {
    margin-top: var(--space-4);
    color: var(--ink-body);
    font-size: 14px;
    line-height: 1.65;
}

.package-card__examples {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-card);
}

.package-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-card);
}

.package-card__details-title {
    color: var(--ink-strong);
    font-size: 13px;
    font-weight: 700;
}

.package-card__list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.package-card__list li {
    position: relative;
    padding-left: 16px;
    color: var(--ink-body);
    font-size: 13px;
    line-height: 1.45;
}

.package-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 5px;
    height: 5px;
    background: var(--green-mid);
    border-radius: var(--radius-full);
}

.package-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-6);
}

.package-card__intro {
    display: contents;
}

.package-card--band {
    /* Sit beside the last fixed package on the final row (span 2 of 3). */
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: var(--space-6);
    align-items: start;
}

.package-card--band .package-card__intro {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    grid-row: 1 / -1;
}

.package-card--band .package-card__title {
    margin-top: 0;
    font-size: 20px;
}

.package-card--band .package-card__price {
    margin-top: var(--space-3);
}

.package-card--band .package-card__examples,
.package-card--band .package-card__details {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--space-6);
    border-top: none;
    border-left: 1px solid var(--border-card);
}

.package-card--band .package-card__examples {
    grid-column: 2;
}

.package-card--band .package-card__details {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.package-card--band .package-card__footer {
    margin-top: auto;
    padding-top: var(--space-6);
}

.package-card__duration {
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1.35;
}

.package-card__duration span,
.package-card__duration strong {
    display: block;
}

.packages-more {
    margin-top: var(--space-7);
    text-align: center;
}

.package-card__duration strong {
    margin-top: 2px;
    color: var(--ink-strong);
    font-size: 13px;
}

.website-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-top: var(--space-8);
    padding: var(--space-7);
    background: #fff;
    border: 1px solid var(--border-divider);
    border-radius: var(--radius-md);
}

.website-product h3 {
    margin-top: var(--space-2);
    font-size: 20px;
}

.website-product p:last-child {
    max-width: 68ch;
    margin-top: var(--space-2);
    color: var(--ink-body);
    font-size: 14px;
}

/* ==========================================================================
   Trust + stats strip
   Measured: #F7F8FA band. One text block, four stats and a partners block in
   a single row, separated by 1px vertical rules.
   ========================================================================== */

/* Measured at 1440: intro ~268px, each stat ~120px, partners ~263px */
.trust {
    display: grid;
    grid-template-columns:
        minmax(0, 1.9fr)
        repeat(2, minmax(0, 1fr))
        minmax(0, 1.9fr);
    align-items: center;
    gap: var(--space-7);
}

.trust__intro-title {
    color: var(--ink-strong);
    font-size: var(--fs-card-title);
    font-weight: 700;
    line-height: 1.35;
}

.trust__intro-text {
    margin-top: var(--space-3);
    color: var(--ink-muted);
    font-size: 14px;
    line-height: var(--lh-body);
}

/* Measured: hairline rules between every region, full item height */
.trust__stat,
.trust__partners {
    position: relative;
    padding-left: var(--space-7);
}

.trust__stat::before,
.trust__partners::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 62px;
    background: var(--border-divider);
}

.trust__stat {
    text-align: center;
}

.trust__stat-value {
    display: block;
    color: var(--green-mid);
    font-size: var(--fs-stat);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.trust__stat-label {
    display: block;
    margin-top: var(--space-2);
    color: var(--ink-muted);
    font-size: var(--fs-small);
    line-height: 1.35;
}

.trust__partners-title {
    color: var(--ink-strong);
    font-size: 14px;
    font-weight: 700;
}

/* Measured: all three marks sit on one line inside the column */
.trust__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.trust__logos img {
    height: 18px;
    width: auto;
}

.trust__partners-note {
    margin-top: var(--space-3);
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

/* ==========================================================================
   Process — "How it works"
   Measured: 5 equal columns, 30px deep-green numbered circle beside a bold
   title, body copy below.
   ========================================================================== */

.step__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.step__number {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    background: var(--green-deep);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.step__title {
    color: var(--ink-strong);
    font-size: var(--fs-card-title);
    font-weight: 700;
}

.step__body {
    margin-top: var(--space-3);
    color: var(--ink-body);
    font-size: 14px;
    line-height: var(--lh-body);
}

/* ==========================================================================
   After the review — homepage bridge
   Reuses .step / .grid--3. Closer line under the three steps.
   ========================================================================== */

.after-review__closer {
    margin: var(--space-7) auto 0;
    max-width: 48ch;
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--fs-lead);
    line-height: 1.55;
}

/* ==========================================================================
   Case study cards
   NOT IN THE REFERENCE — the crop ends before this section. Built from the
   page's own vocabulary: same card shell, with the result promoted to a
   green stat line. Needs sign-off.
   ========================================================================== */

/* ==========================================================================
   Case studies — proof band
   ========================================================================== */

.section--cases {
    background: var(--navy);
    color: var(--ink-on-navy-soft);
}

.section--cases .section-heading h2,
.section--cases .section-heading__title {
    color: var(--ink-on-navy);
}

.section--cases .section-heading__sub {
    color: var(--ink-on-navy-soft);
}

.section--cases .link-arrow {
    color: var(--green-bright);
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.case-card {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
}

.case-card__result {
    display: grid;
    gap: var(--space-1);
}

.case-card__figure {
    color: var(--green-bright);
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.case-card__suffix {
    color: var(--ink-on-navy);
    font-size: var(--fs-card-title);
    font-weight: 600;
}

.case-card__sector {
    margin-top: var(--space-4);
    color: var(--green-bright);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.case-card__body {
    margin-top: var(--space-3);
    color: var(--ink-on-navy-soft);
    font-size: 14px;
    line-height: var(--lh-body);
}

.cases-disclaimer {
    max-width: 40rem;
    margin: var(--space-6) auto 0;
    color: var(--ink-on-navy-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.case__result {
    display: block;
    color: var(--green-mid);
    font-size: 26px;
    line-height: 1.15;
}

.case__sector {
    margin-top: var(--space-2);
    color: var(--ink-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* ==========================================================================
   Resource cards
   NOT IN THE REFERENCE. Same card shell with a green type tag.
   ========================================================================== */

.tag {
    display: inline-block;
    padding: 3px var(--space-2);
    background: var(--surface-tint);
    border-radius: var(--radius-sm);
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.card__status {
    margin-top: auto;
    padding-top: var(--space-5);
    color: var(--ink-muted);
    font-size: var(--fs-small);
    font-weight: 600;
}

/* ==========================================================================
   Founder
   ========================================================================== */

.section--about {
    background: var(--surface-tint);
}

.about {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: var(--space-10);
}

.about__portrait {
    overflow: hidden;
    max-width: 26rem;
    aspect-ratio: 1 / 1;
    margin-inline: auto 0;
    border-radius: var(--radius-lg);
}

.about__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 35% 40%;
    filter: brightness(0.97) saturate(0.9);
}

.about__copy h2 {
    max-width: 22ch;
    margin-top: var(--space-3);
}

.about__copy > p:not(.eyebrow, .about__intro, .about__action, .about__proof) {
    max-width: 62ch;
    margin-top: var(--space-4);
    color: var(--ink-body);
    line-height: var(--lh-body);
}

.about__intro {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-5);
}

.about__intro strong {
    color: var(--ink-strong);
}

.about__intro span {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.about__proof {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-divider);
    color: var(--ink-muted);
    font-size: var(--fs-small);
    line-height: 1.5;
}

.about__action {
    margin-top: var(--space-6);
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Final CTA
   NOT IN THE REFERENCE. A navy band that bookends the hero, using the hero's
   own type and button treatment.
   ========================================================================== */

.final-cta {
    background: var(--navy);
    color: var(--ink-on-navy-soft);
}

.final-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding-block: var(--space-10);
}

.final-cta__title {
    color: var(--ink-on-navy);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

.final-cta__text {
    margin-top: var(--space-3);
    max-width: 52ch;
    color: var(--ink-on-navy-soft);
    font-size: var(--fs-lead);
    line-height: 1.6;
}

.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ==========================================================================
   Footer
   NOT IN THE REFERENCE. Navy, to close the page in the same register as the
   hero and final CTA.
   ========================================================================== */

.site-footer {
    background: var(--navy-deep);
    color: var(--ink-on-navy-muted);
    padding-block: var(--space-10) var(--space-8);
}

.site-footer a {
    color: var(--ink-on-navy-muted);
}

.site-footer a:hover {
    color: #fff;
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}

.site-footer .logo__word {
    color: #fff;
}

.site-footer__blurb {
    margin-top: var(--space-4);
    max-width: 36ch;
    font-size: 14px;
    line-height: var(--lh-body);
}

.site-footer__title {
    color: #fff;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.site-footer__list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: 14px;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-9);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--fs-small);
}

.site-footer__legal {
    display: grid;
    gap: var(--space-1);
}

.site-footer__policies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
}

.site-footer__policy-button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.site-footer__policies a:hover,
.site-footer__policy-button:hover {
    color: #fff;
}

.site-footer__social {
    display: flex;
    gap: var(--space-3);
}

.site-footer__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
}

.site-footer__social svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Simple content pages — compact imaged page hero
   Same dissolve language as .hero, shorter scale for Services / Packages.
   ========================================================================== */

.page-head {
    position: relative;
    background: var(--navy);
    color: var(--ink-on-navy-soft);
    overflow: hidden;
    /* Fallback padding for Contact / Error pages without an imaged hero. */
    padding-block: var(--space-10);
}

.page-head:has(.page-head__visual) {
    min-height: clamp(280px, 38vh, 360px);
    padding-block: 0;
}

.page-head__visual {
    position: absolute;
    inset: 0 0 0 40%;
}

.page-head__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 40%;
    filter: brightness(0.9) saturate(0.92);
}

.page-head__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            var(--navy) 0%,
            rgba(14, 23, 38, 0.88) 14%,
            rgba(14, 23, 38, 0.28) 42%,
            rgba(14, 23, 38, 0.08) 70%,
            rgba(14, 23, 38, 0.32) 100%);
    pointer-events: none;
}

.page-head__inner {
    position: relative;
    display: grid;
    align-items: center;
    min-height: inherit;
    padding-block: var(--space-10) var(--space-9);
}

.page-head__copy {
    max-width: 36rem;
}

.page-head .eyebrow,
.page-head .eyebrow--on-navy {
    color: var(--green-bright);
}

.page-head h1,
.page-head h2 {
    color: var(--ink-on-navy);
}

.page-head .section-heading__sub {
    color: var(--ink-on-navy-soft);
}

/* Contact page-head: a little taller so the booking promise has room */
.page-head--contact {
    min-height: clamp(320px, 42vh, 400px);
}

.page-head--contact .page-head__copy {
    max-width: 38rem;
}

.prose {
    max-width: 68ch;
}

/* Inline links in continuous copy must not rely on colour alone (WCAG 1.4.1). */
.prose a,
.contact__privacy a,
.contact__alt a,
.contact__host a,
.contact-form__consent a,
.booking__note a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.prose > h2 {
    margin-top: var(--space-9);
    margin-bottom: var(--space-5);
}

.prose > h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

.prose > h2:first-child,
.prose > h3:first-child,
.prose > .eyebrow + h2,
.prose > .eyebrow + h3 {
    margin-top: 0;
}

.prose p + p {
    margin-top: var(--space-4);
}

.prose ul,
.prose ol {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

/* Heading owns the gap to the next block — don't stack with list/paragraph tops */
.prose h2 + p,
.prose h2 + ul,
.prose h2 + ol,
.prose h3 + p,
.prose h3 + ul,
.prose h3 + ol {
    margin-top: 0;
}

.prose li {
    position: relative;
    padding-left: var(--space-6);
}

.prose li + li {
    margin-top: var(--space-3);
}

.prose li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    background: var(--green-mid);
    border-radius: var(--radius-full);
}

.prose__action,
.prose__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.prose__action .btn,
.prose__actions .btn {
    margin: 0;
}

.contact-selection {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: #fff;
    border: 1px solid var(--border-card);
    border-left: 3px solid var(--green-mid);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.contact-selection strong,
.contact-selection span {
    display: block;
}

.contact-selection strong {
    color: var(--ink-strong);
}

.contact-selection span {
    margin-top: var(--space-1);
    color: var(--ink-muted);
    font-size: 14px;
}

/* ==========================================================================
   Contact — Calendly booking
   ========================================================================== */

.section--contact {
    background: var(--surface-strip);
    padding-block: var(--space-10) var(--space-12);
}

.contact {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    grid-template-areas:
        "intro calendar"
        "write calendar";
    gap: var(--space-9) var(--space-10);
    align-items: start;
}

.contact__intro {
    grid-area: intro;
    padding-top: var(--space-2);
}

.contact__calendar {
    grid-area: calendar;
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    min-width: 0;
}

.contact__write {
    grid-area: write;
    min-width: 0;
}

.contact__intro .eyebrow {
    margin-bottom: var(--space-3);
}

.contact__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: var(--lh-h2);
    color: var(--ink-strong);
}

.contact__lead {
    margin-top: var(--space-4);
    max-width: 36ch;
    color: var(--ink-body);
    font-size: var(--fs-lead);
    line-height: 1.55;
}

.contact__assurances {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding: var(--space-5) var(--space-6);
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
}

.contact__assurance {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink-body);
    font-size: var(--fs-body);
    font-weight: 500;
}

.contact__assurance svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--green-mid);
}

.contact__host {
    margin-top: var(--space-6);
    color: var(--ink-body);
    font-size: var(--fs-body);
}

.contact__host a {
    color: var(--green-deep);
    font-weight: 600;
}

.contact__host a:hover {
    text-decoration: underline;
}

.contact__alt {
    margin-top: var(--space-5);
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.contact__alt a {
    color: var(--green-deep);
    font-weight: 600;
}

.contact__calendar-caption {
    margin-bottom: var(--space-3);
    color: var(--green-deep);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.contact__calendar-frame {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-2) 0;
}

.contact__privacy {
    margin-top: var(--space-5);
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

/* ==========================================================================
   Contact enquiry form (left column, write alternative to Calendly)
   ========================================================================== */

.contact-form-block {
    padding-top: var(--space-7);
    border-top: 1px solid var(--border-divider);
}

.contact-form-block .eyebrow {
    margin-bottom: var(--space-3);
}

.contact-form__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-strong);
}

.contact-form__lead {
    margin-top: var(--space-3);
    max-width: 36ch;
    color: var(--ink-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.contact-form {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.contact-form__field {
    display: grid;
    gap: var(--space-2);
}

.contact-form__label {
    color: var(--ink-strong);
    font-size: var(--fs-body);
    font-weight: 600;
}

.contact-form__required,
.contact-form__optional {
    color: var(--ink-muted);
    font-weight: 500;
    font-size: var(--fs-small);
}

.contact-form__hint {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.contact-form__error:not(:empty) {
    color: #8B2E2E;
    font-size: var(--fs-small);
}

.contact-form__summary:not(:empty) {
    padding: var(--space-4) var(--space-5);
    border: 1px solid #E2C4C4;
    border-left: 3px solid #8B2E2E;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: #FFF8F8;
    color: #8B2E2E;
    font-size: var(--fs-small);
}

.contact-form__summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.contact-form__input,
.contact-form__textarea,
.contact-form__select {
    width: 100%;
    min-height: var(--control-height);
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    color: var(--ink-strong);
    font: inherit;
}

.contact-form__textarea {
    min-height: 9.5rem;
    resize: vertical;
}

.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
    outline: 2px solid var(--green-mid);
    outline-offset: 2px;
}

.contact-form__input.input-validation-error,
.contact-form__textarea.input-validation-error,
.contact-form__select.input-validation-error {
    border-color: #8B2E2E;
}

.contact-form__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    color: var(--ink-body);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    cursor: pointer;
}

.contact-form__consent input {
    margin-top: 0.2em;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--green-deep);
}

.contact-form__consent a {
    color: var(--green-deep);
    font-weight: 600;
}

.contact__privacy a,
.contact__alt a,
.contact__host a {
    font-weight: 600;
}

.contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.contact-form__actions .btn[disabled] {
    opacity: 0.72;
    cursor: wait;
}

.contact-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.contact-form__honeypot input {
    pointer-events: none;
}

.contact-form__turnstile {
    min-height: 65px;
}

.contact-form__success {
    margin-top: var(--space-6);
    padding: var(--space-5) 0;
}

.contact-form__success:focus {
    outline: 2px solid var(--green-mid);
    outline-offset: 4px;
}

.contact-form__success-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--green-deep);
}

.contact-form__success p {
    margin-top: var(--space-3);
    color: var(--ink-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.contact-form__success-next a {
    color: var(--green-deep);
    font-weight: 600;
}

/* ==========================================================================
   Consent-gated booking
   The fallback occupies the same frame as the widget so allowing the calendar
   does not shift the rest of the page.
   ========================================================================== */

.booking__fallback {
    padding: var(--space-6);
}

.booking__title {
    font-size: var(--fs-h3);
}

.booking__fallback p {
    margin-top: var(--space-3);
    color: var(--ink-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.booking__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.booking__note {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.booking__note a {
    color: var(--green-deep);
    font-weight: 600;
}

/* Calendly renders its spinner and iframe straight into the element handed to
   initInlineWidget — it does not wrap them in its own .calendly-inline-widget,
   so the sizing and positioning that class normally supplies has to live here.
   The height must be definite rather than a min-height: the iframe is written
   as height="100%", and against an auto height that percentage never resolves,
   leaving the iframe at its 150px intrinsic default with the calendar cropped. */
.booking__frame {
    position: relative;
    height: 1000px;
}

.booking__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   Cookie consent
   Fixed to the bottom rather than covering the page: the visitor can read the
   site while deciding, which the ICO treats as the point of an honest banner.
   ========================================================================== */

.consent-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    background: var(--navy-panel);
    border-top: 1px solid var(--border-on-navy);
    color: var(--ink-on-navy-soft);
    padding-block: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
}

.consent-banner[hidden] {
    display: none;
}

.consent-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.consent-banner__copy {
    flex: 1 1 30rem;
    min-width: 0;
}

.consent-banner__title {
    color: var(--ink-on-navy);
    font-size: var(--fs-card-title);
}

.consent-banner__copy p {
    margin-top: var(--space-2);
    max-width: 62ch;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
}

.consent-banner__lead--short {
    display: none;
}

.consent-banner__copy a {
    color: var(--green-bright);
    text-decoration: underline;
}

.consent-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Reject is filled and sized identically to accept. An outlined "no" beside a
   solid "yes" nudges the choice, which is the nudge the ICO objects to. */
.consent-banner__actions .btn {
    min-width: 7.5rem;
}

.consent-banner__actions .btn--ghost {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}

.consent-banner__actions .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Deliberately quieter than accept and reject, which are the two real choices
   and are given identical weight. */
.consent-banner__manage {
    background: none;
    border: 0;
    padding: var(--space-2);
    color: var(--ink-on-navy-muted);
    font-family: inherit;
    font-size: var(--fs-small);
    text-decoration: underline;
    cursor: pointer;
}

.consent-banner__manage:hover {
    color: #fff;
}

.consent-dialog {
    width: min(34rem, calc(100vw - 2 * var(--container-pad)));
    padding: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    color: var(--ink-body);
}

.consent-dialog::backdrop {
    background: rgba(8, 16, 29, 0.6);
}

.consent-dialog__inner {
    padding: var(--space-7);
}

.consent-dialog__title {
    font-size: var(--fs-h3);
}

.consent-dialog__lead {
    margin-top: var(--space-3);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.consent-option {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-card);
}

.consent-option__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

label.consent-option__head {
    cursor: pointer;
}

.consent-option__name {
    color: var(--ink-strong);
    font-size: var(--fs-card-title);
    font-weight: 700;
}

.consent-option__state {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.consent-option__toggle {
    flex: none;
    width: 20px;
    height: 20px;
    accent-color: var(--green-deep);
    cursor: pointer;
}

.consent-option__body {
    margin-top: var(--space-2);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
}

.consent-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-7);
}

/* ==========================================================================
   Legal pages
   ========================================================================== */

/* Policy text stays at the 68ch reading measure — past roughly 75 characters
   the eye starts losing the line on the return sweep, and this is already
   effortful reading. The width left over carries the contents list rather
   than being spent on longer lines. */
.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
    column-gap: var(--space-9);
    align-items: start;
}

.legal h2 {
    margin-top: var(--space-9);
    font-size: 24px;
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

/* Sits against the container's right edge so the page holds the same full
   width as the rest of the site, rather than stopping two thirds across. */
.legal-contents {
    position: sticky;
    top: calc(var(--header-height) + var(--space-7));
    justify-self: end;
    width: min(16rem, 100%);
    padding-left: var(--space-6);
    border-left: 1px solid var(--border-card);
}

.legal-contents__title {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.legal-contents__list {
    margin-top: var(--space-4);
    list-style: none;
}

.legal-contents__list li + li {
    margin-top: var(--space-2);
}

.legal-contents__list a {
    display: block;
    padding: 2px 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: calc(-1 * var(--space-6));
    padding-left: var(--space-6);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.legal-contents__list a:hover,
.legal-contents__list a:focus-visible {
    color: var(--ink-strong);
}

/* The marker sits on the panel's own rule, so the current section reads as a
   position within the document rather than as a selected button. */
.legal-contents__list a.is-current {
    color: var(--ink-strong);
    font-weight: 600;
    border-left-color: var(--green-mid);
}

.legal h3 {
    margin-top: var(--space-6);
    font-size: var(--fs-h3);
}

.legal h2 + p,
.legal h3 + p,
.legal h2 + ul {
    margin-top: 0;
}

.legal__intro {
    color: var(--ink-strong);
    font-size: var(--fs-lead);
    line-height: 1.6;
}

.legal code {
    padding: 2px 6px;
    background: var(--surface-strip);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    font-size: 0.92em;
}

.legal-table {
    width: 100%;
    margin-top: var(--space-5);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    border-collapse: collapse;
    overflow: hidden;
    font-size: var(--fs-small);
    text-align: left;
}

.legal-table caption {
    margin-bottom: var(--space-3);
    color: var(--ink-muted);
    font-size: var(--fs-small);
    text-align: left;
}

.legal-table th,
.legal-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-card);
    vertical-align: top;
    line-height: var(--lh-body);
}

.legal-table tr:last-child th,
.legal-table tr:last-child td {
    border-bottom: 0;
}

.legal-table th {
    width: 34%;
    color: var(--ink-strong);
    font-weight: 600;
}

/* ==========================================================================
   Detail pages, locations, Practical Guides
   ========================================================================== */

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    gap: var(--space-9) var(--space-10);
    align-items: start;
}

.detail-aside {
    position: sticky;
    top: var(--space-7);
    padding: var(--space-6);
    background: var(--surface-strip);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
}

.detail-aside__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink-strong);
}

.detail-aside__title + .detail-aside__title,
.detail-aside__list + .detail-aside__title {
    margin-top: var(--space-6);
}

.detail-aside__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-aside__list li + li {
    margin-top: var(--space-2);
}

.detail-aside__note {
    margin-top: var(--space-6);
    font-size: 0.95rem;
    color: var(--ink-muted);
}

.card__title a,
.package-card__title a {
    color: inherit;
    text-decoration: none;
}

.card__title a:hover,
.package-card__title a:hover {
    color: var(--green-mid);
}

.case-card__link {
    margin-top: var(--space-4);
}

.guides-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-5);
}

.section--guides {
    background: var(--surface-strip);
}

.guides-index {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    gap: var(--space-9) var(--space-10);
    align-items: start;
}

.guides-index__main {
    min-width: 0;
}

.guides-visual {
    position: sticky;
    top: var(--space-7);
}

.guides-visual__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    min-height: 28rem;
    background: var(--navy);
    border: 1px solid var(--border-card);
}

.guides-visual__frame img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 28rem;
    object-fit: cover;
    object-position: 50% 40%;
    filter: brightness(0.96) saturate(0.92);
}

.guides-visual__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(14, 23, 38, 0.06) 0%,
            rgba(14, 23, 38, 0.22) 100%);
    pointer-events: none;
}

.guides-search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-5);
}

.guides-search__input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    color: var(--ink-strong);
    font: inherit;
}

.guides-search__input:focus {
    outline: 2px solid var(--green-mid);
    outline-offset: 2px;
}

.guides-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
}

.guides-topics__link {
    color: var(--ink-muted);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    font-size: 0.95rem;
}

.guides-topics__link:hover,
.guides-topics__link--current {
    color: var(--ink-strong);
}

.guides-topics__link--current {
    font-weight: 600;
    text-decoration-thickness: 2px;
}

.guides-count {
    margin: 0 0 var(--space-6);
    color: var(--ink-muted);
    font-size: 0.95rem;
}

.guides-count a {
    color: var(--green-mid);
}

.guides-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-divider);
}

.guides-pager__link {
    color: var(--green-mid);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.guides-pager__link--disabled {
    color: var(--ink-muted);
    text-decoration: none;
    opacity: 0.55;
}

.guides-pager__status {
    color: var(--ink-muted);
    font-size: 0.95rem;
}

.guides-card {
    padding: var(--space-6);
    background: var(--surface-page);
    border: 1px solid var(--border-card);
    border-left: 3px solid var(--green-mid);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), background-color var(--transition);
}

.guides-card:hover {
    border-color: var(--border-card);
    border-left-color: var(--green-deep);
    background: #fff;
}

.guides-card__topics a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.guides-card__topics a:hover {
    color: var(--green-mid);
}

.guides-card__meta {
    margin: 0 0 var(--space-2);
    color: var(--ink-muted);
    font-size: 0.9rem;
}

.guides-card__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    color: var(--ink-strong);
}

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

.guides-card__title a:hover {
    color: var(--green-mid);
}

.guides-card__body {
    margin: 0;
    max-width: 65ch;
    color: var(--ink-muted);
}

.guides-card__topics {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-divider);
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.guides-article h2 {
    margin-top: var(--space-9);
    margin-bottom: var(--space-5);
    font-family: var(--font-display);
}

.guides-article h2 + * {
    margin-top: 0;
}

.guides-article a:not(.btn) {
    color: var(--green-mid);
}

.site-footer__blurb + .site-footer__blurb {
    margin-top: var(--space-3);
}