/* ---------- Subpage: one way in, opened up ---------- */
    .sub-hero { position: relative; overflow: hidden; height: 62svh; min-height: 380px; color: var(--white); }
    .sub-hero .photo { position: absolute; inset: 0; }
    .sub-hero .photo .brief { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.35); }
    .sub-hero .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,8,18,.35), rgba(26,8,18,0) 45%); }
    .sub-hero .word { position: absolute; left: var(--gutter); bottom: 22px; z-index: 2; font-family: var(--serif); font-size: 2.2rem; line-height: 1; }

    .intro { padding: 64px var(--gutter) 40px; }
    .eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood-ink); }
    .intro h1 { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; line-height: 1.2; margin-top: 10px; }
    .intro .lede { font-size: 1.1rem; margin-top: 18px; max-width: 32em; }

    .offer { padding: 40px var(--gutter) 56px; display: grid; gap: 24px; }
    .offer + .offer { border-top: 1px solid rgba(65, 28, 50, 0.14); padding-top: 56px; }
    .offer .photo { aspect-ratio: 4 / 3; }
    .offer h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.25; }
    .offer .line { font-family: var(--serif); color: var(--rosewood-ink); margin-top: 6px; font-size: 1.05rem; }
    .offer p.body { margin-top: 14px; max-width: 32em; }
    .included { list-style: none; margin-top: 22px; max-width: 32em; }
    .included li { padding: 11px 0; border-top: 1px solid rgba(65, 28, 50, 0.14); font-size: 15px; }
    .included li:last-child { border-bottom: 1px solid rgba(65, 28, 50, 0.14); }
    .pricing { margin-top: 18px; font-size: 14px; color: var(--stone-ink); max-width: 32em; }
    .enquire { display: inline-block; margin-top: 22px; padding: 6px 0 2px; font-family: var(--serif); font-size: 1.15rem; }
    .todo { color: var(--rosewood-ink); }

    .others { padding: 72px var(--gutter) 104px; background: var(--white); }
    .others h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin-bottom: 22px; }
    .others-grid { display: grid; gap: 14px; }
    .other { position: relative; display: block; aspect-ratio: 4 / 3; color: var(--white); overflow: hidden; }
    .other .photo { position: absolute; inset: 0; }
    .other .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,8,18,.35), rgba(26,8,18,0) 45%); }
    .other .word { position: absolute; left: 20px; bottom: 16px; z-index: 2; font-family: var(--serif); font-size: 1.7rem; line-height: 1; }
    .other .sub { position: absolute; right: 20px; bottom: 18px; z-index: 2; font-size: 13px; color: rgba(255,255,255,.85); }

    @media (min-width: 700px) {
      .sub-hero .word { font-size: 2.6rem; bottom: 30px; }
      .intro { padding: 96px var(--gutter) 56px; }
      .intro h1 { font-size: 2.8rem; }
      .offer { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 72px var(--gutter); }
      .offer + .offer { padding-top: 72px; }
      .offer:nth-of-type(even) .photo { order: 2; }
      .offer .photo { aspect-ratio: 4 / 5; }
      .others-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
      .other .word { left: 28px; bottom: 26px; font-size: 2rem; }
      .other .sub { right: 28px; bottom: 28px; }
    }
    @media (min-width: 1024px) {
      .sub-hero { height: 72svh; }
      .sub-hero .word { font-size: 3rem; }
      .intro, .offers, .others-inner { max-width: 1200px; margin: 0 auto; }
      .intro { padding: 120px var(--gutter) 64px; }
      .intro h1 { font-size: 3.2rem; }
      .offer { gap: 96px; padding: 96px var(--gutter); }
      .offer h2 { font-size: 2.2rem; }
      .others { padding: 120px var(--gutter) 150px; }
    }

    /* ---------- Service pages ---------- */
    .notice { background: var(--plum); color: var(--taupe); text-align: center; font-size: 13px; letter-spacing: 0.04em; padding: 10px var(--gutter); }
    .notice strong { color: var(--white); font-weight: 400; }
    .section { padding: 64px var(--gutter); }
    .section.tint { background: var(--white); }
    .section-inner { max-width: 1100px; margin: 0 auto; }
    .section h2 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.25; max-width: 20em; }
    .section .eyebrow + h2 { margin-top: 10px; }
    .section p.body { margin-top: 16px; max-width: 34em; }
    .section p.body + p.body { margin-top: 12px; }
    .aside-line { margin-top: 20px; font-family: var(--serif); font-size: 1.15rem; color: var(--rosewood-ink); max-width: 30em; }
    .cta { display: inline-block; margin-top: 28px; padding: 6px 0 3px; font-family: var(--serif); font-size: 1.15rem; }
    .small-note { margin-top: 10px; font-size: 14px; color: var(--stone-ink); max-width: 34em; }

    /* Points: a title and a line or two, separated by hairlines */
    .points { list-style: none; margin-top: 32px; max-width: 46em; }
    .points li { padding: 20px 0; border-top: 1px solid rgba(65, 28, 50, 0.14); }
    .points li:last-child { border-bottom: 1px solid rgba(65, 28, 50, 0.14); }
    .points h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.3; }
    .points p { margin-top: 6px; font-size: 15px; color: #4a3942; max-width: 36em; }

    /* Steps */
    .steps { list-style: none; margin-top: 32px; display: grid; gap: 28px; counter-reset: step; }
    .steps li { counter-increment: step; display: grid; grid-template-columns: 2.2em 1fr; column-gap: 12px; }
    .steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--rosewood-ink); }
    .steps h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.3; }
    .steps p { margin-top: 4px; font-size: 15px; color: #4a3942; }

    /* Traffic lights, in muted tones */
    .lights { list-style: none; margin-top: 32px; display: grid; gap: 14px; max-width: 46em; }
    .lights li { display: grid; grid-template-columns: 18px 1fr; column-gap: 16px; padding: 18px 20px; background: var(--white); }
    .section.tint .lights li { background: var(--paper); }
    .lights .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 7px; }
    .lights .green { background: #6f7d5c; } .lights .amber { background: #b8905a; } .lights .red { background: #9c5a55; }
    .lights h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
    .lights p { font-size: 15px; color: #4a3942; margin-top: 2px; }

    /* A day, told by the hour */
    .day { list-style: none; margin-top: 36px; max-width: 46em; border-left: 1px solid rgba(65, 28, 50, 0.18); }
    .day li { position: relative; padding: 0 0 30px 26px; }
    .day li::before { content: ''; position: absolute; left: -4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--rosewood); }
    .day .time { font-family: var(--serif); color: var(--rosewood-ink); font-size: 1rem; }
    .day h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.3; margin-top: 2px; }
    .day p { font-size: 15px; color: #4a3942; margin-top: 4px; }

    /* Fit: for you if, probably not if */
    .fit { display: grid; gap: 36px; margin-top: 32px; }
    .fit h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }
    .fit ul { list-style: none; margin-top: 12px; }
    .fit li { padding: 12px 0; border-top: 1px solid rgba(65, 28, 50, 0.14); font-size: 15px; }
    .fit li:last-child { border-bottom: 1px solid rgba(65, 28, 50, 0.14); }

    /* Price, set on plum linen */
    .price-card { position: relative; background: var(--plum); color: var(--white); text-align: center; padding: 72px var(--gutter); }
    .price-card .inner { position: relative; z-index: 1; max-width: 34em; margin: 0 auto; }
    .price-card .eyebrow { color: var(--taupe); }
    .price-card .amount { font-family: var(--serif); font-size: 2.6rem; line-height: 1.1; margin-top: 14px; }
    .price-card .amount s { color: var(--taupe); opacity: 0.7; font-size: 0.6em; margin-right: 10px; text-decoration-thickness: 1px; }
    .price-card .unit { color: var(--taupe); margin-top: 6px; }
    .price-card p.body { margin: 18px auto 0; color: var(--taupe); font-size: 15px; }
    .price-card .cta { color: var(--white); }

    /* Questions */
    .faq { max-width: 46em; margin-top: 28px; }
    .faq details { border-top: 1px solid rgba(65, 28, 50, 0.14); }
    .faq details:last-child { border-bottom: 1px solid rgba(65, 28, 50, 0.14); }
    .faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::before, .faq summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 14px; height: 1px; background: var(--plum); transition: transform 0.5s var(--ease); }
    .faq summary::after { transform: rotate(90deg); }
    .faq details[open] summary::after { transform: rotate(0deg); }
    .faq .a { padding: 0 0 20px; font-size: 15px; color: #4a3942; max-width: 40em; }
    @media (prefers-reduced-motion: no-preference) {
      .faq details[open] .a { animation: surface 0.9s var(--slow) both; }
    }

    /* Founder note */
    .founder-note { display: grid; gap: 28px; }
    .founder-note .photo { aspect-ratio: 4 / 5; max-width: 360px; }

    @media (min-width: 700px) {
      .section { padding: 96px var(--gutter); }
      .section h2 { font-size: 2.3rem; }
      .points.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; max-width: none; }
      .points.two li:nth-last-child(2) { border-bottom: 1px solid rgba(65, 28, 50, 0.14); }
      .steps { grid-template-columns: 1fr 1fr; column-gap: 40px; }
      .fit { grid-template-columns: 1fr 1fr; column-gap: 56px; }
      .price-card { padding: 104px var(--gutter); }
      .price-card .amount { font-size: 3.2rem; }
      .founder-note { grid-template-columns: 4fr 7fr; gap: 64px; align-items: center; }
    }
    @media (min-width: 1024px) {
      .section { padding: 120px var(--gutter); }
      .section h2 { font-size: 2.6rem; }
      .steps { grid-template-columns: repeat(4, 1fr); }
    }
    .friday-head { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin-top: 12px; }

    /* ---------- Pictures between sections ---------- */
    .band { padding: 0 var(--gutter); }
    .band .photo { aspect-ratio: 4 / 3; max-width: 1200px; margin: 0 auto; }
    .photo-pair { display: grid; gap: 14px; padding: 0 var(--gutter); max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; }
    .photo-pair .photo { aspect-ratio: 4 / 5; }
    .split-inner { display: grid; gap: 36px; }
    .split .photo { aspect-ratio: 4 / 5; }
    .split .photo:has(img[src$="founder-reading-full.jpg"]) { aspect-ratio: 2 / 3; }   /* the full portrait, uncropped */
    @media (min-width: 700px) {
      .band .photo { aspect-ratio: 16 / 9; }
      .photo-pair { grid-template-columns: 1fr 1fr; gap: 20px; }
      .split-inner { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
      .split.flip .split-inner > .photo { order: -1; }
      .split.flip .split-inner { grid-template-columns: 5fr 7fr; }
    }
    @media (min-width: 1024px) {
      .band .photo { aspect-ratio: 21 / 9; }
    }

    /* ---------- Two hands: one picture, a line you can drag ---------- */
    .hands { position: relative; margin-top: 36px; aspect-ratio: 4 / 5; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
    .hands-layer { position: absolute; inset: 0; }
    .hands-layer.right { z-index: 1; }
    .hands-layer.left { z-index: 2; }
    .hands-layer .photo { position: absolute; inset: 0; }
    .hands-layer .photo .brief { display: none; }
    .hands-layer.left { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
    .hands-layer.left .photo::after { content: ''; position: absolute; inset: 0; background: var(--plum); opacity: 0.66; }
    .hands-layer.right .photo::after { content: ''; position: absolute; inset: 0; background: var(--paper); opacity: 0.5; }
    .hands-layer.right .hands-text::before { content: ''; position: absolute; inset: -40px -16px -22px -40px; z-index: -1; background: radial-gradient(ellipse at 80% 80%, rgba(243, 239, 234, 0.85), rgba(243, 239, 234, 0) 70%); }
    .hands-layer.left .hands-text::before { content: ''; position: absolute; inset: -40px -40px -22px -16px; z-index: -1; background: radial-gradient(ellipse at 20% 80%, rgba(46, 19, 35, 0.6), rgba(46, 19, 35, 0) 70%); }
    .hands-text { position: absolute; bottom: 22px; width: 42%; z-index: 2; }
    .hands-layer.left .hands-text { left: 16px; color: var(--white); }
    .hands-layer.right .hands-text { right: 16px; text-align: right; color: var(--plum); }
    .hands-text .eyebrow { font-size: 10px; letter-spacing: 0.24em; }
    .hands-layer.left .hands-text .eyebrow { color: var(--taupe); }
    .hands-text h3 { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; line-height: 1.25; margin-top: 6px; }
    .hands-text p:not(.eyebrow) { font-size: 12.5px; line-height: 1.55; margin-top: 6px; }
    .hands-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--white); z-index: 3; pointer-events: none; }
    .hands-line .knob {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--plum);
      display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; line-height: 1;
      box-shadow: 0 1px 0 rgba(65, 28, 50, 0.12);
    }
    .hands input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
    .hands input[type="range"]:focus-visible ~ .hands-line .knob, .hands:has(input:focus-visible) .knob { outline: 1px solid var(--rosewood); outline-offset: 3px; }
    .hands-hint { margin-top: 12px; font-size: 13px; color: var(--stone-ink); }
    @media (min-width: 700px) {
      .hands { aspect-ratio: 16 / 9; }
      .hands-text { bottom: 36px; width: 38%; }
      .hands-layer.left .hands-text { left: 36px; }
      .hands-layer.right .hands-text { right: 36px; }
      .hands-text .eyebrow { font-size: 11px; }
      .hands-text h3 { font-size: 1.6rem; }
      .hands-text p:not(.eyebrow) { font-size: 15px; }
    }
    @media (min-width: 1024px) { .hands { aspect-ratio: 21 / 9; } .hands-text { width: 32%; } }
    .mark-photo { display: flex; align-items: center; justify-content: center; }
    .mark-photo .about-mark { width: 78%; height: auto; }
    /* Legal text: one readable column */
    .legal { max-width: 40em; }
    .legal h2 { font-size: 1.4rem; margin-top: 44px; }
    .legal h2:first-of-type { margin-top: 28px; }
    .legal strong { font-weight: 500; }
    .notice s, .small-note s, .pricing s { opacity: 0.7; text-decoration-thickness: 1px; margin-right: 2px; }
    /* Page not found */
    .nf { background: var(--paper); padding-top: 8px; }
    .others-grid.three { display: grid; gap: 14px; }
    .nf-contact { margin-top: 36px; }
    @media (min-width: 700px) { .others-grid.three { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
    .enquire-form { padding-top: 8px; }
    /* The Chord form: match its page colour so its edges disappear, and crop the dark strip along its top */
    body.enquire-page { background: #faf7f5; }
    body.enquire-page .masthead { background: rgba(250, 247, 245, 0.94); }
    .enquire-form .chord-frame { max-width: 720px; margin: 0 auto; overflow: hidden; }
    .enquire-form .chord-frame iframe { margin-top: -16px; }
    .enquire-form iframe { display: block; }
    .enquire-form .small-note { text-align: center; }
    body.enquire-page .intro { text-align: center; }
    body.enquire-page .intro .lede { margin-left: auto; margin-right: auto; }


    /* ---------- About: "Meet Melody Bay" opening ---------- */
    .meet { padding-top: 48px; }
    .meet .split-inner { gap: 32px; }
    .meet .split-inner > .photo { order: -1; margin: 0 calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; }
    .meet-title { font-family: var(--serif); font-weight: 400; font-size: 2.3rem; line-height: 1.15; }
    .role-label { margin-top: 12px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--plum); }
    .meet .body:first-of-type { margin-top: 28px; }
    @media (min-width: 700px) {
      .meet { padding-top: 72px; padding-bottom: 96px; }
      .meet .split-inner > .photo { margin: 0; }
    }
    @media (min-width: 1024px) {
      .meet { padding: 96px var(--gutter) 120px; }
      .meet .section-inner { max-width: none; }
      .meet .split-inner { grid-template-columns: 5fr 6fr; gap: 88px; align-items: center; }
      .meet .section-inner { max-width: 1200px; }
      .meet .split-inner > .photo { aspect-ratio: 4 / 5; }
      .meet-title { font-size: 3.2rem; }
      .meet .split-inner > div { padding-right: clamp(24px, 6vw, 96px); padding-top: 48px; }
    }

    /* Photo pairs: breathe away from white sections, and keep pale photos from dissolving into the page */
    .photo-pair { padding-top: 56px; padding-bottom: 56px; }
    .photo-pair .photo, .band .photo { outline: 1px solid rgba(65, 28, 50, 0.08); outline-offset: -1px; }
    @media (min-width: 1024px) { .photo-pair { padding-top: 88px; padding-bottom: 88px; } }

    /* Weathered Sage sections */
    .section.sage { background: var(--sage); color: var(--paper); }
    .section.sage .eyebrow { color: var(--taupe); }
    .section.sage .points li { border-color: rgba(243, 239, 234, 0.2); }
    .section.sage .points p, .section.sage .body { color: rgba(243, 239, 234, 0.85); }

    /* Dusty Rosewood: one warm section (a touch deeper than the swatch, so white text reads clearly) */
    .section.rosewood { background: #8a6465; color: var(--white); }
    .section.rosewood .eyebrow { color: #f1e4df; }
    .section.rosewood .points li { border-color: rgba(255, 255, 255, 0.25); }
    .section.rosewood .points p, .section.rosewood .body { color: rgba(255, 255, 255, 0.9); }
    .section.rosewood .cta { color: var(--white); }

    /* Castle Stone: the quiet, practical questions */
    .section.stone { background: var(--stone); color: var(--white); }
    .section.stone .faq details { border-color: rgba(255, 255, 255, 0.22); }
    .section.stone .faq summary::before, .section.stone .faq summary::after { background: var(--white); }
    .section.stone .faq .a { color: rgba(255, 255, 255, 0.9); }
    .section.stone .faq .a a { color: var(--white); }

    /* Enquire on Dusty Rosewood: the form sits on it like a sheet of paper */
    body.enquire-page { background: #8a6465; }
    body.enquire-page .intro { color: var(--white); }
    body.enquire-page .intro .eyebrow { color: #f1e4df; }
    body.enquire-page .enquire-form { padding-bottom: 96px; }
    body.enquire-page .enquire-form .chord-frame { background: #faf7f5; padding: 12px 8px 20px; box-shadow: 0 30px 60px -30px rgba(26, 8, 18, 0.5); }
    body.enquire-page .enquire-form .small-note { color: #f6ecea; }
    body.enquire-page .enquire-form .small-note a { color: var(--white); }
    @media (min-width: 700px) { body.enquire-page .enquire-form .chord-frame { padding: 24px 24px 32px; } }
    /* Transparent Chord embed: no crop, no panel; the form card sits straight on the page */
    .enquire-form .chord-frame iframe { margin-top: 0; }
    body.enquire-page .enquire-form .chord-frame { background: transparent; padding: 0; box-shadow: none; }
    body.enquire-page .enquire-form .small-note { text-align: center; max-width: none; margin-top: 8px; }

    /* Text on plum is white; only eyebrows keep the taupe */
    .notice { color: rgba(255, 255, 255, 0.85); }
    .price-card .unit, .price-card p.body { color: var(--white); }
    .price-card .amount s { color: var(--white); opacity: 0.6; }

    /* A product film behind a designed cover: plays with sound only when pressed */
    .film-section .section-inner { text-align: center; }
    .film-section .eyebrow { color: var(--rosewood-ink); }
    .film-section h2 { max-width: 16em; margin-left: auto; margin-right: auto; }
    .film { position: relative; max-width: 980px; margin: 36px auto 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
      background: #fbf8f5; box-shadow: 0 40px 70px -40px rgba(26, 8, 18, 0.45); }
    .film video { display: block; width: 100%; height: 100%; object-fit: contain; background: #fbf8f5; }
    .film-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
      padding: 24px; border: 0; background: #fbf8f5; color: var(--plum); cursor: pointer; font: inherit; text-align: center; }
    .film-mark { width: min(120px, 26%); height: auto; opacity: 0.85; }
    .film-title { font-family: var(--serif); font-size: clamp(2.2rem, 7vw, 4.6rem); line-height: 1.05; }
    .film-line { font-size: clamp(13px, 1.6vw, 16px); color: var(--stone-ink); max-width: 30em; }
    .film-play { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(8px, 3vw, 28px); padding: 10px 22px 10px 10px; border-radius: 999px;
      background: var(--plum); color: var(--white); font-size: 15px; box-shadow: 0 14px 28px -14px rgba(26, 8, 18, 0.6); transition: transform 0.4s var(--ease), background 0.3s; }
    .film-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); position: relative; }
    .film-icon::after { content: ''; position: absolute; left: 14px; top: 11px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--white); }
    .film-length { color: rgba(255, 255, 255, 0.72); font-size: 13px; }
    .film-cover:hover .film-play, .film-cover:focus-visible .film-play { transform: translateY(-2px); background: #34142a; }
    .film-cover:focus-visible { outline: 2px solid var(--rosewood); outline-offset: -6px; }
    .film-cover[hidden] { display: none; }

    /* Price tiers: two or three cards side by side (white-label sprints, handover options) */
    .tiers { display: grid; gap: 20px; margin-top: 36px; }
    .tier { background: var(--white); border: 1px solid rgba(65, 28, 50, 0.14); padding: 32px 28px; display: flex; flex-direction: column; }
    .tier.feature { background: var(--plum); color: var(--white); border-color: var(--plum); }
    .tier .eyebrow { margin-bottom: 8px; }
    .tier.feature .eyebrow { color: var(--taupe); }
    .tier h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
    .tier .amount { font-family: var(--serif); font-size: 2.2rem; line-height: 1.1; margin-top: 14px; }
    .tier .unit { font-size: 13px; letter-spacing: 0.04em; color: var(--stone-ink); margin-top: 4px; }
    .tier.feature .unit { color: var(--taupe); }
    .tier .for { margin-top: 16px; font-size: 15px; color: #4a3942; }
    .tier.feature .for { color: var(--taupe); }
    .tier ul { list-style: none; margin-top: 18px; }
    .tier li { padding: 10px 0; border-top: 1px solid rgba(65, 28, 50, 0.14); font-size: 15px; }
    .tier.feature li { border-top-color: rgba(255, 255, 255, 0.18); }
    .tiers-note { margin-top: 24px; font-size: 15px; color: #4a3942; max-width: 46em; }
    @media (min-width: 700px) {
      .tiers { grid-template-columns: 1fr 1fr; }
      .tiers.three { grid-template-columns: repeat(3, 1fr); }
      .tiers.one { grid-template-columns: 1fr; max-width: 30em; }
    }
    .section.tint .tier:not(.feature) { background: var(--paper); }

    /* Speaking: a plain list of questions, and a row of places spoken */
    .questions { list-style: none; margin-top: 28px; display: grid; gap: 14px; max-width: 46em; }
    .questions li { font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; padding-left: 1.4em; position: relative; }
    .questions li::before { content: '“'; position: absolute; left: 0; color: var(--rosewood-ink); }
    .credits { list-style: none; margin-top: 32px; display: grid; gap: 28px; }
    .credits li { display: flex; flex-direction: column; gap: 6px; }
    .credits .name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
    .credits .what { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rosewood-ink); }
    .section.rosewood a.u { color: var(--white); }
    @media (min-width: 700px) {
      .questions { grid-template-columns: 1fr 1fr; column-gap: 40px; }
      .credits { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    }
    .sub-hero img[src$="speaking-audience.jpg"] { object-position: 72% center; }
    .section.rosewood .credits .what { color: #f1e4df; }
    .pledge { margin-top: 48px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.3); max-width: 40em; }
    .pledge-line { font-family: var(--serif); font-size: 1.6rem; line-height: 1.3; }
    .pledge .body { margin-top: 14px; }
    @media (min-width: 700px) { .pledge-line { font-size: 2rem; } }
    /* Speaking: the award card, and the podcast line under the timeline */
    .award { margin: 32px 0 44px; padding: 28px 30px; background: #8a6465; color: var(--white); max-width: 36em; }
    .award .eyebrow { color: #f1e4df; }
    .award .eyebrow { margin-bottom: 6px; }
    .award .name { font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; }
    .award .what { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
    .also { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(65, 28, 50, 0.14); font-family: var(--serif); font-size: 1.2rem; max-width: 46em; }
    .also .what { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rosewood-ink); margin-bottom: 4px; }

    /* Service pages: words on the left, a styled photo on the right, real work framed over it */
    .hero-split { display: grid; background: var(--paper); }
    .hs-text { padding: 56px var(--gutter) 48px; }
    .hs-text .eyebrow { margin-bottom: 14px; }
    .hs-text h1 { font-family: var(--serif); font-weight: 400; font-size: 2.5rem; line-height: 1.08; text-wrap: balance; }
    .hs-text .lede { margin-top: 20px; font-size: 1.08rem; color: #4a3942; max-width: 30em; }
    .hs-text .btn { margin-top: 30px; }
    .hs-text .small-note { margin-top: 14px; font-size: 13px; color: var(--stone-ink); }
    .hs-pic { position: relative; min-height: 360px; }
    .hs-pic .photo { position: absolute; inset: 0; }
    .hs-pic .photo img { width: 100%; height: 100%; object-fit: cover; }
    .hs-frame { position: absolute; left: var(--gutter); bottom: -36px; width: min(56%, 300px); background-color: var(--white); box-shadow: 0 30px 60px -28px rgba(65, 28, 50, 0.45); z-index: 2; }
    .hs-frame .bar { display: flex; gap: 5px; align-items: center; height: 18px; padding: 0 8px; background: #f1ece6; }
    .hs-frame .bar i { width: 6px; height: 6px; border-radius: 50%; background: #cdbfb5; display: block; }
    .hs-frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
    .hero-split + * { margin-top: 36px; }
    .hero-split.fade + * { margin-top: 0; }  /* the photo hero has its own space below; a gap shows a beige strip above white sections */
    @media (min-width: 900px) {
      .hero-split { grid-template-columns: 1.05fr 1fr; min-height: 640px; }
      .hs-text { padding: 110px 72px 80px clamp(40px, 7vw, 120px); align-self: center; }
      .hs-text h1 { font-size: clamp(2.8rem, 4.4vw, 3.9rem); }
      .hs-pic { min-height: 0; }
      .hs-frame { left: -80px; bottom: 64px; width: 340px; }
      .hero-split + * { margin-top: 0; }
    }

    /* Editorial index: the name large on the left, detail beside it, hairlines between */
    .index { list-style: none; margin-top: 40px; border-top: 1px solid rgba(65, 28, 50, 0.16); }
    .index li { display: grid; gap: 6px; padding: 24px 0; border-bottom: 1px solid rgba(65, 28, 50, 0.16); }
    .index h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.25; }
    .index p { font-size: 15.5px; color: #4a3942; max-width: 40em; }
    .index .n { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--rosewood); }
    .section.sage .index, .section.sage .index li { border-color: rgba(243, 239, 234, 0.22); }
    @media (min-width: 900px) {
      .index li { grid-template-columns: minmax(260px, 5fr) 7fr; gap: 40px; align-items: baseline; padding: 30px 0; }
      .index.numbered li { grid-template-columns: 48px minmax(240px, 5fr) 7fr; }
      .index h3 { font-size: 1.75rem; }
    }
    .section .orn.left { margin-bottom: 20px; }

    /* Feature testimonial: one client's words on a sage band, their own site rising out of it */
    .feat { background: var(--sage); color: var(--paper); margin-top: 90px; }
    .feat-inner { max-width: 1200px; margin: 0 auto; display: grid; }
    .feat-pic { margin: -60px var(--gutter) 0; height: 420px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); background: var(--white); }
    .feat-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
    .feat-q { padding: 48px var(--gutter) 72px; }
    .feat-q .eyebrow { color: var(--taupe); }
    .feat-q blockquote { font-family: var(--serif); font-size: 1.4rem; line-height: 1.45; margin-top: 18px; }
    .feat-q mark { background: none; color: var(--taupe); }
    .feat-q .att { margin-top: 22px; font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe); }
    @media (min-width: 900px) {
      .feat { margin-top: 140px; }
      .feat-inner { grid-template-columns: 5fr 7fr; gap: 72px; padding: 0 clamp(40px, 7vw, 120px); }
      .feat-pic { margin: -80px 0 80px; height: 600px; }
      .feat-q { padding: 110px 0 110px; align-self: center; }
      .feat-q blockquote { font-size: 1.85rem; }
    }
    .tier:not(.feature), .lights li, .hs-frame { background-image: url(images/linen-light.svg); background-size: 360px 360px; }
    /* Website screenshots: softly rounded bottom corners and a gentle shadow */
    .feat-pic, .hs-frame { border-radius: 0 0 10px 10px; box-shadow: 0 2px 4px rgba(20, 10, 16, 0.08), 0 24px 48px -18px rgba(20, 10, 16, 0.38); }

    /* Portfolios as a lookbook: two columns, the right one starting lower, proof on each photo */
    .lookbook { display: grid; gap: 64px; margin-top: 40px; }
    .lb-card { position: relative; display: flex; flex-direction: column; color: var(--plum); }
    .lb-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e4ddd5; }
    .lb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .lb-pic::after { content: ''; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(30, 10, 20, 0.45), transparent); pointer-events: none; }
    .lb-tag { position: absolute; left: 24px; top: 22px; right: 30%; z-index: 1; color: var(--white); font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; }
    .lb-mark { position: absolute; right: -18px; top: -22px; z-index: 2; width: 76px; height: 76px; border-radius: 50%; background: var(--paper); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; }
    .lb-mark img { width: 64%; height: 64%; object-fit: contain; }
    .lb-status { margin-top: 20px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rosewood-ink); }
    .lb-title { font-family: var(--serif); font-size: 1.75rem; line-height: 1.2; margin-top: 6px; }
    .lb-hook { margin-top: 8px; font-size: 15px; color: #4a3942; max-width: 34em; }
    @media (prefers-reduced-motion: no-preference) { .lb-pic img { transition: transform 1.2s var(--ease); } .lb-card:hover .lb-pic img { transform: scale(1.03); } }
    @media (min-width: 900px) {
      .lookbook { grid-template-columns: 1fr 1fr; column-gap: 88px; row-gap: 110px; }
      .lookbook .lb-card:nth-child(even) { margin-top: 190px; margin-bottom: -190px; }
      .lookbook { padding-bottom: 190px; }
      .lb-tag { font-size: 1.3rem; left: 28px; top: 26px; }
    }
    .lookbook.wide .lb-pic { aspect-ratio: 5 / 4; }
    .lookbook.wide .lb-pic img { object-position: top; }
    /* Where a hero shows real work, it stands alone on a taupe linen panel, with no stock photo behind it */
    .hs-pic.framed { background: var(--taupe) url(images/linen-light.svg); background-size: 360px 360px; display: flex; align-items: center; justify-content: center; padding: 48px var(--gutter); }
    .hs-pic.framed .hs-frame { position: relative; left: auto; bottom: auto; width: min(78%, 420px); }
    @media (min-width: 900px) {
      .hs-pic.framed { padding: 72px 64px; }
      .hs-pic.framed .hs-frame { left: auto; bottom: auto; width: min(72%, 440px); }
    }
    .hs-pic.framed .hs-frame img { aspect-ratio: auto; height: auto; object-fit: contain; }

    /* Service heroes: one full-width photo, fading to paper on the left so the words stand clear */
    .hero-split.fade { position: relative; display: block; min-height: 560px; overflow: hidden; }
    .hero-split.fade .hs-pic { position: absolute; inset: 0; min-height: 0; }
    .hero-split.fade .hs-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243, 239, 234, 0.92) 0%, rgba(243, 239, 234, 0.88) 55%, rgba(243, 239, 234, 0.55) 100%); }
    .hero-split.fade .hs-text { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 96px; }
    @media (min-width: 900px) {
      .hero-split.fade { min-height: 680px; display: flex; align-items: center; }
      .hero-split.fade .hs-pic::after { background: linear-gradient(90deg, #f3efea 0%, #f3efea 30%, rgba(243, 239, 234, 0.9) 42%, rgba(243, 239, 234, 0.45) 58%, rgba(243, 239, 234, 0) 74%); }
      .hero-split.fade .hs-text { max-width: 640px; padding: 110px 0 110px clamp(40px, 7vw, 120px); }
    }
    /* Longer client quotes set smaller in the feature band */
    .feat.long .feat-q blockquote { font-size: 1.15rem; line-height: 1.6; }
    .feat.long .feat-q blockquote p + p { margin-top: 14px; }
    @media (min-width: 900px) { .feat.long .feat-q blockquote { font-size: 1.3rem; } }
    .feat-q blockquote p + p { margin-top: 12px; }
    .feat-q .att a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(243, 239, 234, 0.4); }
    /* Case study covers: the same soft corners and shadow as other screenshots */
    .case-cover img { border-radius: 0 0 10px 10px; box-shadow: 0 2px 4px rgba(20, 10, 16, 0.08), 0 24px 48px -18px rgba(20, 10, 16, 0.3); }
    /* On the dark bands (sage, rosewood, stone, plum): white ornament and light body text */
    .section.sage .orn, .section.rosewood .orn, .section.stone .orn, .feat .orn { color: rgba(243, 239, 234, 0.7); }
    .section.sage .orn svg g:first-child, .section.rosewood .orn svg g:first-child, .section.stone .orn svg g:first-child { fill: #c6b8ac; }
    .section.sage .orn svg g:last-child, .section.rosewood .orn svg g:last-child, .section.stone .orn svg g:last-child { fill: #ffffff; }
    .section.sage .index p, .section.rosewood .index p, .section.stone .index p { color: rgba(243, 239, 234, 0.85); }
    .section.sage .index .n, .section.rosewood .index .n { color: var(--taupe); }
    /* Writing lookbook: the client's site on its own, no words or shading over it */
    .lookbook.wide .lb-pic::after { display: none; }
    /* Enquire: the rosewood page carries the linen weave, like the Write to me band */
    body.enquire-page { background-image: url(images/linen.svg); background-size: 360px 360px; }
    /* Portrait photos (About, The Visibility Fix) sit on the right half and fade into the paper */
    @media (min-width: 900px) {
      .hero-split.fade.fade-right .hs-pic { left: 42%; }
      .hero-split.fade.fade-right .hs-pic::after { background: linear-gradient(90deg, #f3efea 0%, rgba(243, 239, 234, 0.6) 18%, rgba(243, 239, 234, 0) 40%); }
    }
    /* White-label: the Blueprint's words on the left, its card on the right */
    @media (min-width: 900px) {
      #blueprint .section-inner, #bundle .section-inner { display: grid; grid-template-columns: 1fr minmax(360px, 440px); column-gap: 80px; align-content: start; }
      #blueprint .section-inner > *, #bundle .section-inner > * { grid-column: 1; }
      #blueprint .section-inner > .tiers, #bundle .section-inner > .tiers { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; align-self: start; }
    }
    /* The ornament above the Investment card: white and taupe on plum */
    .price-card .orn { color: rgba(243, 239, 234, 0.6); margin-bottom: 18px; }
    .price-card .orn svg g:first-child { fill: #c6b8ac; }
    .price-card .orn svg g:last-child { fill: #ffffff; }
    /* Website screenshots: all four corners softly rounded, more subtly */
    .feat-pic, .hs-frame, .case-cover img { border-radius: 6px; }
    /* About: a quote on rosewood linen between the hero and Meet Melody Bay */
    .quote-band { background: #8a6465 url(images/linen.svg); background-size: 360px 360px; color: var(--white); text-align: center; padding: 88px var(--gutter); }
    .quote-band .orn { color: rgba(243, 239, 234, 0.6); margin-bottom: 26px; }
    .quote-band .orn svg g:first-child { fill: #c6b8ac; }
    .quote-band .orn svg g:last-child { fill: #ffffff; }
    .quote-band blockquote { font-family: var(--serif); font-size: 1.7rem; line-height: 1.3; max-width: 22em; margin: 0 auto; text-wrap: balance; }
    .quote-band cite { display: block; margin-top: 20px; font-style: normal; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: #f1e4df; }
    @media (min-width: 900px) { .quote-band { padding: 120px var(--gutter); } .quote-band blockquote { font-size: 2.3rem; } }
    /* About: a second photo behind the portrait, offset diagonally, like the home founder section */
    .meet .layered { max-width: 560px; }
    @media (min-width: 700px) { .split.flip .split-inner > .layered { order: -1; } }
    @media (min-width: 700px) { .meet .split-inner { grid-template-columns: 6fr 7fr; } }
    /* About: portrait bottom right in front, the second photo top left behind it */
    .meet .layered .back { top: 0; left: 0; right: auto; bottom: auto; z-index: 1; }
    .meet .layered .front { bottom: 0; right: 0; left: auto; top: auto; z-index: 2; }
    /* Plum price cards: a pale linen weave, like the plum Investment band */
    .tier.feature { background-image: url(images/linen-dark.svg); background-size: 360px 360px; }
    /* Paper-coloured cards on white bands (the Core tier) carry the taupe-strength linen */
    .section.tint .tier:not(.feature) { background-image: url(images/linen.svg); background-size: 360px 360px; }

    /* Partners: each studio as an editorial row, name on the left, detail on the right */
    .partners { margin-top: 44px; border-top: 1px solid rgba(65, 28, 50, 0.16); }
    .partner { display: grid; gap: 18px; padding: 40px 0; border-bottom: 1px solid rgba(65, 28, 50, 0.16); }
    .pt-name h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.2; }
    .pt-who { margin-top: 8px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rosewood-ink); }
    .pt-link { display: inline-block; margin-top: 16px; font-family: var(--serif); font-size: 1rem; }
    .pt-text p { font-size: 15.5px; color: #4a3942; max-width: 40em; }
    .pt-text p + p { margin-top: 10px; }
    .pt-text .pt-lbl { margin-top: 20px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rosewood-ink); }
    .pt-text .pt-lbl + p { margin-top: 4px; }
    @media (min-width: 900px) {
      .partner { grid-template-columns: minmax(280px, 5fr) 7fr; gap: 56px; padding: 52px 0; }
      .pt-name h3 { font-size: 2.2rem; }
    }
    /* A section with a photo beside it (Speaking: podcast hosts, fees) */
    .with-pic { display: grid; gap: 40px; }
    .with-pic > .photo { aspect-ratio: 4 / 5; overflow: hidden; }
    .with-pic > .photo img { width: 100%; height: 100%; object-fit: cover; }
    @media (min-width: 900px) {
      .with-pic { grid-template-columns: 7fr 4fr; gap: 72px; align-items: center; }
      .with-pic .credits { grid-template-columns: 1fr; gap: 20px; }
    }
    /* The highlight: the same soft taupe underline band as the home page quote, on every feature quote */
    .feat-q mark { color: inherit; background: linear-gradient(transparent 62%, rgba(198, 184, 172, 0.42) 62%); }
    /* Speaking: questions in one calm column beside the photo; the bio below */
    .with-pic .questions { grid-template-columns: 1fr; gap: 16px; }
    .with-pic .questions li { font-size: 1.15rem; }
    .bio-block { margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(65, 28, 50, 0.14); max-width: 46em; }
    .bio-block .friday-head { margin-top: 0; }
    @media (min-width: 900px) {
      .with-pic.pic-left { grid-template-columns: 5fr 7fr; }
      .with-pic.pic-left > .layered { order: -1; width: 100%; max-width: 520px; }
    }

    /* One left edge for every section (see --edge in house.css) */
    @media (min-width: 1024px) {
      .section, .intro, .others { padding-left: var(--edge); padding-right: var(--edge); }
      .section-inner, .intro, .others-inner, .offers { max-width: none; }
      .offers .offer { padding-left: var(--edge); padding-right: var(--edge); }
      .hero-split.fade .hs-text { padding-left: var(--edge); }
      .hero-split:not(.fade) .hs-text { padding-left: var(--edge); }
      .feat-inner { max-width: none; padding-left: var(--edge); padding-right: var(--edge); }
      .quote-band, .price-card { padding-left: var(--edge); padding-right: var(--edge); }
    }

    /* Partners: each studio gets its own band, its website rising out of the top */
    .partner-feat h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.15; margin-top: 8px; }
    .partner-feat .feat-q p { font-size: 15.5px; line-height: 1.7; color: rgba(243, 239, 234, 0.88); max-width: 34em; }
    .partner-feat .feat-q .eyebrow { color: var(--taupe); font-size: 11.5px; }
    .partner-feat .pt-what { margin-top: 16px; }
    .partner-feat .pt-lbl { margin-top: 20px !important; font-size: 11px !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe) !important; }
    .partner-feat .pt-lbl + p { margin-top: 4px; }
    .partner-feat .pt-link { display: inline-block; margin-top: 26px; font-family: var(--serif); font-size: 1.05rem; color: var(--white); }
    .partner-feat + .partner-feat { margin-top: 150px; }
    .partner-feat.on-taupe { background: var(--taupe) url(images/linen.svg); background-size: 360px 360px; color: var(--plum); }
    .partner-feat.on-taupe .feat-q p, .partner-feat.on-taupe .pt-link { color: var(--plum); }
    .partner-feat.on-taupe .feat-q .eyebrow, .partner-feat.on-taupe .pt-lbl { color: var(--rosewood-ink) !important; }
    .partner-feat.on-rose { background: #8a6465 url(images/linen.svg); background-size: 360px 360px; }
    .partner-feat.on-rose .feat-q .eyebrow, .partner-feat.on-rose .pt-lbl { color: #f1e4df !important; }
    @media (min-width: 900px) {
      .partner-feat.flip .feat-inner { grid-template-columns: 7fr 5fr; }
      .partner-feat.flip .feat-pic { order: 2; }
      .partner-feat h2 { font-size: 2.6rem; }
    }
    /* Partners: the frame takes the screenshot's own shape, so nothing is cropped at the sides */
    .partner-feat .feat-pic { height: auto; aspect-ratio: 900 / 1125; }
    .partner-feat .feat-pic img { height: 100%; object-fit: cover; object-position: top center; }
    @media (min-width: 900px) { .partner-feat .feat-pic { height: auto; max-width: 460px; } }
    /* Faded heroes: the words keep a 580px measure after the shared left margin */
    @media (min-width: 1024px) {
      .hero-split.fade .hs-text { max-width: none; width: calc(var(--edge) + 580px); padding-right: 40px; }
    }
    /* Heroes step out of the content column: about 90px left of the shared edge, a deliberate offset */
    @media (min-width: 1024px) {
      :root { --hero-edge: max(clamp(48px, 7vw, 110px), calc(var(--edge) - 90px)); }
      .hero-split.fade .hs-text, .hero-split:not(.fade) .hs-text { padding-left: var(--hero-edge); width: calc(var(--hero-edge) + 600px); }
    }
    .hero-split img[src$="hero-codecraft-group.jpg"] { object-position: 70% center; }

    /* Code & Craft, week by week: three photos stepping down a tall column on the diagonal */
    .with-stack { display: grid; gap: 48px; }
    .stack3 { display: none; }
    @media (min-width: 1024px) {
      .with-stack { grid-template-columns: 7fr 4fr; gap: 72px; align-items: start; }
      .stack3 { display: block; position: relative; height: 100%; min-height: 900px; }
      .stack3 .photo { position: absolute; width: 72%; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 30px 50px -28px rgba(65, 28, 50, 0.4); }
      .stack3 .photo img { width: 100%; height: 100%; object-fit: cover; }
      .stack3 .s1 { top: 0; right: 0; z-index: 1; }
      .stack3 .s2 { top: 33%; left: 0; z-index: 2; }
      .stack3 .s3 { top: 66%; right: 4%; z-index: 3; width: 64%; }
    }
    /* Plum Investment bands carry the same pale linen as the plum price cards */
    .price-card { background-image: url(images/linen-dark.svg); background-size: 360px 360px; }
    /* Stack: larger photos that overlap by about a third */
    @media (min-width: 1024px) {
      .stack3 { min-height: 0; height: auto; aspect-ratio: 1 / 2.05; align-self: start; }
      .stack3 .photo { width: 76%; }
      .stack3 .s1 { top: 0; right: 0; }
      .stack3 .s2 { top: 27%; left: 0; }
      .stack3 .s3 { top: 54%; right: 6%; width: 70%; }
    }
    @media (min-width: 1024px) {
      .stack3 { aspect-ratio: 1 / 2.45; }
      .stack3 .photo { width: 84%; }
      .stack3 .s1 { top: 0; right: 0; }
      .stack3 .s2 { top: 30%; left: 0; }
      .stack3 .s3 { top: 59%; right: 4%; width: 80%; }
    }
    @media (min-width: 1024px) {
      .stack3 { aspect-ratio: 1 / 2.62; }
      .stack3 .s2 { top: 33%; }
      .stack3 .s3 { top: 64%; }
    }
    .lookbook.wide .lb-pic { aspect-ratio: 4 / 5; }
    .lookbook.wide .lb-pic img { object-position: center; }
    /* Speaking fees: more room between the photos and the words */
    @media (min-width: 900px) {
      .with-pic.pic-left { column-gap: 120px; grid-template-columns: 4fr 7fr; }
      .with-pic.pic-left > .layered { max-width: 440px; }
    }
    /* Speaking fees: larger photos, still clear of the words */
    .with-pic.pic-left > .layered { width: 100%; max-width: 560px; margin: 0 auto; }
    .with-pic.pic-left > .layered .back, .with-pic.pic-left > .layered .front { width: 70%; }
    @media (min-width: 900px) {
      .with-pic.pic-left { grid-template-columns: 5fr 6fr; column-gap: 96px; }
      .with-pic.pic-left > .layered { max-width: 540px; }
    }

    /* Speaking, working together: two short workshop clips beside the words */
    .with-clips { display: grid; gap: 40px; }
    .clips { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
    .clip { margin: 0; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background: var(--taupe); box-shadow: 0 24px 48px -26px rgba(26, 8, 18, 0.45); }
    .clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .clips .clip:nth-child(2) { margin-top: 48px; }
    @media (min-width: 900px) {
      .with-clips { grid-template-columns: 6fr 5fr; gap: 88px; align-items: center; }
      .clips { max-width: 460px; }
    }
    /* Credits for photos and video taken by others */
    .credit { margin-top: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-ink); }
    .band .credit { padding: 0 var(--gutter); text-align: right; }
    @media (min-width: 1024px) { .band .credit { padding: 0 var(--edge); } }
    .clips-wrap .credit { text-align: right; }
    @media (min-width: 900px) { .clips-wrap { max-width: 460px; } }
    /* Event photos and clips keep their own colour: no house photo filter */
    .photo img[src$="speaking-group.jpg"] { filter: none; }

    /* Timelines on desktop: a centre line, events alternating left and right */
    @media (min-width: 1024px) {
      .day:not(.with-stack .day) { max-width: 1000px; margin-left: auto; margin-right: auto; border-left: 0; position: relative; }
      .day:not(.with-stack .day)::before { content: ''; position: absolute; top: 0; bottom: 30px; left: 50%; width: 1px; background: rgba(65, 28, 50, 0.18); }
      .day:not(.with-stack .day) li { width: 50%; padding: 0 56px 44px 0; text-align: right; }
      .day:not(.with-stack .day) li::before { left: auto; right: -4px; top: 9px; }
      .day:not(.with-stack .day) li:nth-child(even) { margin-left: 50%; padding: 0 0 44px 56px; text-align: left; }
      .day:not(.with-stack .day) li:nth-child(even)::before { right: auto; left: -4px; }
      .day:not(.with-stack .day) li + li { margin-top: -40px; }
      .day:not(.with-stack .day) li p { margin-left: auto; max-width: 30em; }
      .day:not(.with-stack .day) li:nth-child(even) p { margin-left: 0; }
    }
    /* Claude setups: "And every Friday" as two cards side by side */
    .friday-cards { display: grid; gap: 20px; margin-top: 28px; }
    .friday-card { background: var(--paper) url(images/linen.svg); background-size: 360px 360px; padding: 32px 30px; border: 1px solid rgba(65, 28, 50, 0.1); }
    .friday-card .time { font-family: var(--serif); color: var(--rosewood-ink); font-size: 1rem; }
    .friday-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.25; margin-top: 4px; }
    .friday-card p:not(.time) { font-size: 15px; color: #4a3942; margin-top: 10px; }
    @media (min-width: 900px) { .friday-cards { grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1000px; margin-left: auto; margin-right: auto; } }
    @media (min-width: 1024px) { .friday-head { text-align: center; } }
    /* Speaking: the award and the podcast as two cards below the timeline */
    .spoke-cards { display: grid; gap: 20px; margin-top: 48px; }
    .spoke-card { padding: 30px 32px; margin: 0; max-width: none; }
    .spoke-card .eyebrow { margin-bottom: 8px; }
    .spoke-card .name { font-family: var(--serif); font-size: 1.4rem; line-height: 1.3; }
    .spoke-card .what { margin-top: 8px; font-size: 15px; }
    .spoke-card.podcast { background: var(--paper) url(images/linen.svg); background-size: 360px 360px; border: 1px solid rgba(65, 28, 50, 0.1); }
    .spoke-card.podcast .what { color: #4a3942; }
    @media (min-width: 900px) { .spoke-cards { grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1000px; margin-left: auto; margin-right: auto; } }
    /* The podcast card on stone, with the pale linen */
    .spoke-card.podcast { background: var(--stone) url(images/linen-dark.svg); background-size: 360px 360px; border: 0; color: var(--white); }
    .spoke-card.podcast .eyebrow { color: #e6e2dc; }
    .spoke-card.podcast .what { color: rgba(255, 255, 255, 0.88); }
    /* Phones: keep the 16:9 frame, show the film's opening frame and just the play button */
    @media (max-width: 699px) {
      .film-cover { background: rgba(26, 8, 18, 0.12); }
      .film-mark, .film-title, .film-line { display: none; }
      .film-play { margin-top: 0; font-size: 14px; padding: 8px 18px 8px 8px; }
      .film-icon { width: 30px; height: 30px; }
      .film-icon::after { left: 12px; top: 9px; }
    }
    .section-cta { margin-top: 36px; }
    @media (min-width: 1024px) { .friday-cards + .section-cta { text-align: center; } }

    /* Claude workshops: each level's heading and price card share the top row; its list runs full width underneath */
    @media (min-width: 900px) {
      .level .section-inner { display: grid; grid-template-columns: 1fr minmax(320px, 380px); grid-template-rows: auto auto 1fr; column-gap: 72px; align-items: start; }
      .level .section-inner > * { grid-column: 1 / -1; }
      .level .section-inner > .eyebrow, .level .section-inner > h2, .level .section-inner > .lead { grid-column: 1; }
      .level .section-inner > .tiers { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none; }
      .level .section-inner > .index, .level .section-inner > .fit, .level .section-inner > .points { margin-top: 48px; }
      .fit.three { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
      .fit .more { display: inline-block; margin-top: 14px; font-size: 15px; }
    }