/* ============================================================
   holos.works — v2
   Victorian-ornate · F-pattern · Pastoral-romantic
   Palette: parchment / Victorian brown / forest green / earth sienna /
   olive / dark text / mountain blue / gold accent
   ============================================================ */

:root {
    --parchment: #F4EDE0;
    --victorian-brown: #5A4A3A;
    --forest-green: #3A5A3A;
    --earth-sienna: #A06040;
    --olive-muted: #6A7A50;
    --text-dark: #2A2018;
    --mountain-blue: #5A6A7A;
    --gold-accent: #C4A060;

    --parchment-deep: #ECE2CD;
    --parchment-shadow: rgba(90, 74, 58, 0.12);

    --font-display: "Dancing Script", "Brush Script MT", cursive;
    --font-heading: "Playfair Display", "Times New Roman", serif;
    --font-body: "Crimson Pro", "Georgia", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--parchment);
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.85;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* ---------- Parchment grain overlay ---------- */
.parchment-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(90,74,58,0.05) 0, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(90,74,58,0.04) 0, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(160,96,64,0.03) 0, transparent 1px),
        radial-gradient(circle at 85% 20%, rgba(106,122,80,0.03) 0, transparent 1px);
    background-size: 240px 240px, 320px 320px, 180px 180px, 280px 280px;
    mix-blend-mode: multiply;
    opacity: 0.7;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    background:
        radial-gradient(ellipse at center, transparent 50%, rgba(90,74,58,0.10) 100%);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    background: var(--parchment);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Victorian frame for the hero */
.victorian-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.victorian-frame .frame-rule,
.victorian-frame .frame-corner path,
.victorian-frame .frame-scroll path {
    stroke: var(--victorian-brown);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.victorian-frame .frame-outer { stroke-width: 1.8; }
.victorian-frame .frame-inner { stroke-width: 1; opacity: 0.75; }

.victorian-frame .corner-rosette {
    fill: var(--victorian-brown);
    stroke: none;
}
.victorian-frame .scroll-bead {
    fill: var(--gold-accent);
    stroke: none;
}

/* Frame-draw animation: stroke-dashoffset */
.victorian-frame .frame-rule {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: frame-draw 2200ms cubic-bezier(.7,.05,.4,1) 200ms forwards;
}
.victorian-frame .frame-inner { animation-delay: 700ms; animation-duration: 1800ms; }

.victorian-frame .frame-corner path,
.victorian-frame .frame-scroll path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: frame-draw 1400ms cubic-bezier(.6,.05,.4,1) forwards;
}
.victorian-frame .corner-tl path { animation-delay: 200ms; }
.victorian-frame .corner-tr path { animation-delay: 350ms; }
.victorian-frame .corner-bl path { animation-delay: 500ms; }
.victorian-frame .corner-br path { animation-delay: 650ms; }
.victorian-frame .scroll-top path { animation-delay: 1100ms; }
.victorian-frame .scroll-bottom path { animation-delay: 1300ms; }

.victorian-frame .corner-rosette,
.victorian-frame .scroll-bead {
    opacity: 0;
    animation: fade-in 600ms 1500ms forwards;
}

@keyframes frame-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes fade-in {
    to { opacity: 1; }
}

/* ---------- Hero botanicals positioned around the logotype ---------- */
.hero-botanicals {
    position: absolute;
    inset: 80px;
    pointer-events: none;
}
.botanical {
    position: absolute;
    width: 14vw;
    max-width: 200px;
    min-width: 120px;
    height: auto;
    opacity: 0;
    animation: bot-fade 900ms ease forwards;
}
.botanical .bot-stem path,
.botanical .bot-leaves path,
.botanical .bot-flower path {
    fill: none;
    stroke: var(--forest-green);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.botanical .bot-flower ellipse,
.botanical .bot-flower circle {
    fill: none;
    stroke: var(--forest-green);
    stroke-width: 1.4;
}
.botanical .bot-acorns ellipse {
    fill: var(--earth-sienna);
    stroke: var(--victorian-brown);
    stroke-width: 1;
}
.botanical .bot-acorns path {
    fill: none;
    stroke: var(--victorian-brown);
    stroke-width: 1;
}
.botanical .thistle-head ellipse {
    fill: rgba(160,96,64,0.10);
}

/* SVG path-draw animation for botanicals */
.botanical path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: bot-draw 1800ms cubic-bezier(.6,.04,.4,1) forwards;
}

@keyframes bot-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes bot-fade {
    to { opacity: 1; }
}

.botanical-oak {
    top: 4%; left: 4%;
    animation-delay: 1500ms;
}
.botanical-oak path { animation-delay: 1500ms; }

.botanical-thistle {
    top: 6%; right: 6%;
    animation-delay: 1700ms;
}
.botanical-thistle path { animation-delay: 1700ms; }

.botanical-glory {
    bottom: 6%; left: 4%;
    width: 18vw; max-width: 240px;
    animation-delay: 1900ms;
}
.botanical-glory path { animation-delay: 1900ms; }

.botanical-fern {
    bottom: 4%; right: 6%;
    animation-delay: 2100ms;
}
.botanical-fern path { animation-delay: 2100ms; }

/* ---------- Logotype block ---------- */
.logotype-block {
    position: relative;
    text-align: center;
    z-index: 5;
    padding: 60px;
    max-width: 720px;
}

.logotype-eyebrow {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.32em;
    text-transform: lowercase;
    color: var(--victorian-brown);
    margin-bottom: 18px;
    opacity: 0;
    animation: fade-in-up 800ms 1800ms forwards;
}

.logotype {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(56px, 8.4vw, 124px);
    line-height: 0.95;
    color: var(--text-dark);
    margin: 0;
    letter-spacing: -0.005em;
    position: relative;
    display: inline-block;
    /* Pulse-attention golden glow */
    animation: pulse-attention 3.4s ease-in-out 2400ms infinite,
               fade-in-up 1100ms 2000ms backwards;
}

@keyframes pulse-attention {
    0%, 100% { text-shadow: 0 0 0 rgba(196,160,96,0); }
    50%      { text-shadow: 0 0 22px rgba(196,160,96,0.55), 0 0 4px rgba(196,160,96,0.4); }
}

.logotype-rule {
    margin: 22px auto 22px;
    width: clamp(220px, 30vw, 360px);
    opacity: 0;
    animation: fade-in 900ms 2300ms forwards;
}
.logotype-rule svg {
    width: 100%;
    display: block;
}
.logotype-rule path {
    fill: none;
    stroke: var(--victorian-brown);
    stroke-width: 1.2;
    stroke-linecap: round;
}
.logotype-rule circle {
    fill: var(--gold-accent);
    stroke: var(--victorian-brown);
    stroke-width: 1;
}

.logotype-tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(15px, 1.15vw, 19px);
    color: var(--victorian-brown);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 520px;
    opacity: 0;
    animation: fade-in-up 800ms 2600ms forwards;
}

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

/* ---------- Scroll cue ---------- */
.hero-scroll-cue {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--victorian-brown);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    opacity: 0;
    animation: fade-in 800ms 3200ms forwards, scroll-bob 2.4s ease-in-out 3500ms infinite;
}
.hero-scroll-cue svg {
    width: 16px; height: 24px;
}
.hero-scroll-cue path {
    fill: none;
    stroke: var(--victorian-brown);
    stroke-width: 1.4;
    stroke-linecap: round;
}
@keyframes scroll-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

/* ============================================================
   Section eyebrow shared
   ============================================================ */
.section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(12px, 0.95vw, 14px);
    letter-spacing: 0.32em;
    text-transform: lowercase;
    color: var(--victorian-brown);
    margin: 0 auto 60px;
    max-width: 720px;
}
.section-eyebrow.left { justify-content: flex-start; }
.eyebrow-rule {
    flex: 1;
    height: 1px;
    background: var(--victorian-brown);
    opacity: 0.5;
    max-width: 160px;
}
.eyebrow-text { white-space: nowrap; }

/* ============================================================
   PORTFOLIO — F-pattern first sweep
   ============================================================ */
.portfolio {
    padding: 120px 60px 80px;
    background: var(--parchment);
}

.portfolio-row {
    display: grid;
    grid-template-columns: 50fr 30fr 20fr;
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: stretch;
}

.portfolio-piece {
    position: relative;
    background: var(--parchment-deep);
    padding: 36px 32px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: transform 350ms cubic-bezier(.4,.05,.3,1), box-shadow 350ms ease;
    cursor: pointer;
    /* enter from-left animation handled by IO + CSS class */
    opacity: 0;
    transform: translateX(-30px);
}
.portfolio-piece.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(.3,.05,.2,1);
}
.portfolio-piece:hover {
    transform: translate(0, -4px);
    box-shadow: 0 18px 40px -16px rgba(90,74,58,0.30);
}

/* Per-piece scroll-in stagger */
.portfolio-piece[data-piece="1"].is-visible { transition-delay: 0ms; }
.portfolio-piece[data-piece="2"].is-visible { transition-delay: 200ms; }
.portfolio-piece[data-piece="3"].is-visible { transition-delay: 400ms; }

/* Frame for each piece (CSS-drawn rules + SVG corners) */
.piece-frame {
    position: absolute;
    inset: 14px;
    pointer-events: none;
}
.piece-frame::before,
.piece-frame::after {
    content: "";
    position: absolute;
    background: var(--victorian-brown);
}
.piece-frame::before {
    top: 0; left: 24px; right: 24px; height: 1px;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 700ms 350ms cubic-bezier(.5,.05,.3,1);
}
.piece-frame::after {
    bottom: 0; left: 24px; right: 24px; height: 1px;
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform 700ms 350ms cubic-bezier(.5,.05,.3,1);
}
.portfolio-piece.is-visible .piece-frame::before,
.portfolio-piece.is-visible .piece-frame::after { transform: scaleX(1); }

/* Side rules using box-shadow trick replaced by separate elements—use background color rules drawn via outline pseudo */
.piece-frame {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}
.portfolio-piece::before,
.portfolio-piece::after {
    content: "";
    position: absolute;
    width: 1px;
    background: var(--victorian-brown);
    top: 38px; bottom: 38px;
    transform-origin: top center;
    transform: scaleY(0);
    transition: transform 700ms 500ms cubic-bezier(.5,.05,.3,1);
}
.portfolio-piece::before { left: 14px; }
.portfolio-piece::after  { right: 14px; }
.portfolio-piece.is-visible::before,
.portfolio-piece.is-visible::after { transform: scaleY(1); }

/* SVG corner ornament */
.piece-corner-svg {
    position: absolute;
    top: 14px; left: 14px;
    width: 60px; height: 60px;
    overflow: visible;
}
.piece-corner-svg path,
.piece-corner-svg circle {
    fill: none;
    stroke: var(--victorian-brown);
    stroke-width: 1.2;
    stroke-linecap: round;
}
.piece-corner-svg circle {
    fill: var(--gold-accent);
    stroke: var(--victorian-brown);
}
.piece-corner-svg path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    transition: stroke-dashoffset 700ms 200ms cubic-bezier(.5,.05,.3,1);
}
.portfolio-piece.is-visible .piece-corner-svg path { stroke-dashoffset: 0; }

/* Mirror corner SVG to other corners */
.portfolio-piece > .piece-frame {
    --frame-extra: 1;
}

/* Category icon row */
.piece-category {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--forest-green);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.28em;
    text-transform: lowercase;
    margin-bottom: 14px;
    margin-top: auto;
    padding-top: 24px;
}
.cat-icon {
    width: 28px; height: 28px;
    flex-shrink: 0;
}
.cat-icon path {
    fill: none;
    stroke: var(--forest-green);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.piece-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 36px);
    line-height: 1.1;
    color: var(--text-dark);
    margin: 0 0 14px;
}

.piece-hero .piece-title {
    font-size: clamp(28px, 3.2vw, 48px);
}
.piece-hero {
    /* pulse-attention featured piece */
    animation-name: pulse-attention-frame;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes pulse-attention-frame {
    0%, 100% { box-shadow: 0 0 0 rgba(196,160,96,0); }
    50%      { box-shadow: 0 0 20px rgba(196,160,96,0.30); }
}

.piece-desc {
    font-family: var(--font-body);
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0 0 18px;
    max-width: 60ch;
}
.piece-tertiary .piece-desc { font-size: 13px; line-height: 1.55; }

.piece-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--earth-sienna);
    text-transform: lowercase;
}
.piece-divider { color: var(--victorian-brown); opacity: 0.6; }

/* ============================================================
   PHILOSOPHY — F-pattern second sweep
   ============================================================ */
.philosophy {
    padding: 80px 60px 120px;
    background: var(--parchment);
}
.philosophy-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 65fr 30fr;
    gap: 60px;
    align-items: start;
}

.philosophy-text { max-width: 720px; }

.philo-heading {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(32px, 4.8vw, 64px);
    line-height: 1.05;
    color: var(--text-dark);
    margin: 12px 0 28px;
    letter-spacing: -0.01em;
}
.philo-heading em {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
    color: var(--earth-sienna);
}
.philo-lede {
    font-family: var(--font-body);
    font-size: clamp(17px, 1.3vw, 21px);
    font-style: italic;
    line-height: 1.6;
    color: var(--victorian-brown);
    margin: 0 0 40px;
    border-left: 2px solid var(--gold-accent);
    padding-left: 22px;
}

.philo-subheading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2vw, 30px);
    color: var(--earth-sienna);
    margin: 32px 0 8px;
    line-height: 1.1;
}
.philosophy-text p {
    margin: 0 0 18px;
    color: var(--text-dark);
}

.philosophy-illustrations {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 60px;
    position: sticky;
    top: 60px;
}
.philo-bot {
    width: 100%;
    max-width: 200px;
    height: auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1000ms ease, transform 1000ms cubic-bezier(.5,.05,.3,1);
}
.philo-bot.is-visible {
    opacity: 1; transform: translateY(0);
}
.philo-bot.is-visible:nth-child(2) { transition-delay: 200ms; }
.philo-bot.is-visible:nth-child(3) { transition-delay: 400ms; }
.philo-bot path,
.philo-bot ellipse {
    fill: none;
    stroke: var(--forest-green);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.philo-bot.is-visible path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: bot-draw 1600ms forwards cubic-bezier(.5,.05,.3,1);
}

/* ============================================================
   TESTIMONIALS — handwritten letter cards
   ============================================================ */
.testimonials {
    padding: 80px 60px 120px;
    background: var(--parchment);
    position: relative;
}
.letters-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    max-width: 1300px;
    margin: 0 auto;
    align-items: start;
}

.letter-card {
    position: relative;
    transform: rotate(var(--rot, 0deg));
    transition: transform 280ms cubic-bezier(.4,.05,.3,1);
}
.letter-card:hover {
    transform: translateY(-4px) rotate(0deg);
}
.letter-card:hover .botanical-stamp {
    opacity: 1;
}
.letter-card:hover .botanical-stamp .stamp-ring,
.letter-card:hover .botanical-stamp .stamp-ring-inner,
.letter-card:hover .botanical-stamp .stamp-bot path {
    transform: scale(1.08);
    transform-origin: 50px 50px;
}

.letter-paper {
    background:
        linear-gradient(180deg, #FBF6EA 0%, #F1E7D2 100%);
    padding: 38px 36px 56px;
    box-shadow:
        0 1px 0 rgba(90,74,58,0.10) inset,
        0 0 0 1px rgba(90,74,58,0.10),
        0 18px 40px -22px rgba(90,74,58,0.32);
    position: relative;
    /* paper texture noise */
    background-image:
        linear-gradient(180deg, #FBF6EA 0%, #F1E7D2 100%),
        radial-gradient(circle at 20% 30%, rgba(90,74,58,0.05) 0, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(90,74,58,0.04) 0, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(160,96,64,0.05) 0, transparent 1px);
    background-size: cover, 100px 100px, 130px 130px, 90px 90px;
    background-blend-mode: normal, multiply, multiply, multiply;
}
.letter-paper::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(90,74,58,0.20);
    pointer-events: none;
}

.letter-body {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(17px, 1.3vw, 21px);
    line-height: 1.55;
    color: var(--text-dark);
    margin: 0 0 28px;
}

.letter-sign {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-heading);
}
.sign-name {
    font-style: italic;
    font-weight: 700;
    color: var(--victorian-brown);
    font-size: 15px;
}
.sign-role {
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: lowercase;
    color: var(--earth-sienna);
}

/* Botanical stamp / wax seal */
.botanical-stamp {
    position: absolute;
    bottom: -22px;
    right: -16px;
    width: 86px;
    height: 86px;
    opacity: 0.6;
    transition: opacity 320ms ease;
}
.botanical-stamp .stamp-ring,
.botanical-stamp .stamp-ring-inner {
    fill: none;
    stroke: var(--earth-sienna);
    stroke-width: 1.6;
    transition: transform 320ms ease;
}
.botanical-stamp .stamp-ring-inner {
    stroke-width: 0.8;
    stroke-dasharray: 2 3;
}
.botanical-stamp .stamp-bot path {
    fill: none;
    stroke: var(--earth-sienna);
    stroke-width: 1.4;
    stroke-linecap: round;
    transition: transform 320ms ease;
}
.botanical-stamp .stamp-text {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 8px;
    letter-spacing: 0.18em;
    fill: var(--earth-sienna);
    text-transform: lowercase;
}

/* ============================================================
   FOOTER — Victorian band + mountain landscape
   ============================================================ */
.footer {
    background: linear-gradient(180deg, var(--parchment) 0%, #ECE2CD 60%, #E0D5BC 100%);
    padding-top: 60px;
    position: relative;
    border-top: none;
}

.footer-border {
    width: 100%;
    height: 30px;
    display: block;
    margin-bottom: 50px;
}
.footer-border path {
    stroke: var(--victorian-brown);
    stroke-width: 1.2;
    fill: none;
}

/* Repeating ornamental pattern injected via CSS background to avoid huge SVG */
.footer-border-pattern {
    /* drawn via a CSS background fallback below */
}
.footer::before {
    content: "";
    display: block;
    height: 30px;
    margin-top: -50px;
    margin-bottom: 30px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 22px,
            var(--victorian-brown) 22px,
            var(--victorian-brown) 23px,
            transparent 23px,
            transparent 30px
        ),
        radial-gradient(circle at 15px 15px, var(--gold-accent) 2px, transparent 2.5px) 0 0/30px 30px,
        linear-gradient(transparent calc(50% - 0.6px), var(--victorian-brown) calc(50% - 0.6px), var(--victorian-brown) calc(50% + 0.6px), transparent calc(50% + 0.6px));
}
.footer .footer-border { display: none; }

.footer-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 60px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
}

.footer-col { color: var(--text-dark); }

.footer-brand .footer-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 2.6vw, 40px);
    color: var(--text-dark);
    display: block;
    margin-bottom: 12px;
}
.footer-blurb {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: var(--victorian-brown);
    margin: 0;
    max-width: 320px;
}

.footer-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-variant: small-caps;
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--earth-sienna);
    margin: 0 0 14px;
    text-transform: lowercase;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-dark);
}
.footer-link {
    color: var(--victorian-brown);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 200ms ease, border-color 200ms ease;
}
.footer-link:hover {
    color: var(--earth-sienna);
    border-color: var(--earth-sienna);
}

/* Mountain landscape */
.footer-mountain {
    width: 100%;
    height: clamp(140px, 18vw, 220px);
    display: block;
    margin-top: 20px;
}
.footer-mountain .mountain-far {
    fill: var(--mountain-blue);
    opacity: 0.55;
}
.footer-mountain .mountain-mid {
    fill: var(--mountain-blue);
    opacity: 0.85;
}
.footer-mountain .footer-trees path {
    fill: var(--forest-green);
    stroke: none;
}

.footer-coda {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 28px 0 36px;
    font-family: var(--font-heading);
    font-style: italic;
    font-variant: small-caps;
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--victorian-brown);
    text-transform: lowercase;
}
.coda-mark {
    color: var(--gold-accent);
    font-family: var(--font-display);
    font-style: normal;
    font-size: 18px;
    letter-spacing: 0;
}

/* ============================================================
   Reveal helpers
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.5,.05,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .portfolio-row {
        grid-template-columns: 1fr 1fr;
    }
    .piece-tertiary { grid-column: span 2; min-height: 280px; }
    .philosophy-grid { grid-template-columns: 1fr; }
    .philosophy-illustrations {
        flex-direction: row;
        justify-content: center;
        position: relative;
        top: 0;
        padding-top: 30px;
    }
    .philo-bot { max-width: 140px; }
    .letters-row { grid-template-columns: 1fr; max-width: 560px; gap: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .hero { padding: 20px; }
    .hero-botanicals { inset: 50px; }
    .botanical { width: 22vw; min-width: 90px; }
    .logotype-block { padding: 30px 20px; }
    .portfolio { padding: 80px 24px 60px; }
    .portfolio-row { grid-template-columns: 1fr; }
    .piece-tertiary { grid-column: auto; }
    .philosophy { padding: 60px 24px 80px; }
    .testimonials { padding: 60px 24px 80px; }
    .footer-inner { padding: 20px 24px 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}