/* =========================================================================
   TEE TIME — Design System
   Shared across nextonthetee.org and club-match-admin.
   Signature: hand-drawn, warm, orbital, rounded. No hard corners. No square
   grids of cards. Every section breathes and every element earns its place.
   ========================================================================= */

/* Google Fonts import removed. Every family it pulled — Inter,
   Oswald, Fraunces, Caveat, Playfair Display — has been replaced by
   Manrope, the app's typeface, self-hosted in tokens.css. Nothing
   referenced them any more, so this was downloading several font
   families on every page load to render none of them. */

:root {
    /* ── Tee Time palette — Maine fall foliage, sampled from the logo ── */
    --tt-orange:       #CE6428;   /* signature — matches logo background */
    --tt-orange-glow:  #E27A3D;   /* hover / highlight */
    --tt-orange-deep:  #8B3A0F;   /* rust, darker accent */
    --tt-orange-warm:  #F09256;   /* soft, warm hover */

    --tt-cream:        #F5E6D3;   /* the ink color from the logo — warm off-white */
    --tt-cream-soft:   #FBF6EE;   /* page bg on light sections */
    --tt-cream-hover:  #EAD5B7;

    --tt-espresso:     #1F0E00;   /* deep warm brown, grounded contrast */
    --tt-espresso-2:   #3A1C08;   /* softer than pure espresso */

    --tt-gold:         #F0C86F;   /* sparkle accent — used sparingly */

    --tt-text:         #1C1410;
    --tt-text-muted:   #7A6A5A;
    --tt-border:       rgba(31, 14, 0, 0.12);

    /* ── Radius scale — rounded everywhere; the smallest is bigger than most sites' largest ── */
    --r-sm:  12px;
    --r-md:  20px;
    --r-lg:  32px;
    --r-xl:  48px;
    --r-pill: 999px;

    /* ── Type scale ── */
    /* ── TYPE: the shared one ────────────────────────────
       These were Caveat, Fraunces and Inter — three families this
       room chose for itself, none of which the app or any other
       room uses. Counting the clubhouse's old Playfair and Tee Time
       Live's Oswald, one product was shipping FIVE typefaces.

       That is the mechanical reason the rooms felt like separate
       sites: type registers as "somewhere else" before colour does,
       because it is on every line.

       The variable names stay so nothing downstream has to change;
       they now resolve to Manrope, which is what the app uses.
       --f-script loses the handwriting flourish, which is a real
       loss and a deliberate one: the app has no script face, so
       keeping it here would be the one thing still saying "this is
       a different product". */
    --f-script:  var(--font-display);
    --f-display: var(--font-display);
    --f-sans:    var(--font-body);

    /* ── Semantic ── */
    --success:   #1a6e35;
    --warn:      #a36800;
    --danger:    #b32323;
    --info:      #0b5fa5;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--f-sans);
    color: var(--tt-text);
    background: var(--tt-cream-soft);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: var(--tt-orange); text-decoration: none; transition: color .2s; }
a:hover { color: var(--tt-orange-deep); }

img { max-width: 100%; height: auto; display: block; }

/* ══ Typography ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--tt-espresso);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 20px;
    font-variation-settings: 'opsz' 96;
}
h1 { font-size: clamp(2.8rem, 6.5vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); margin-bottom: 12px; }
h4 { font-size: 1.05rem; margin-bottom: 10px; }

.script {
    font-family: var(--f-script);
    font-weight: 700;
    color: var(--tt-orange);
    font-style: italic;
    letter-spacing: 0.005em;
}

.display-italic {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: 'opsz' 144;
}

p { margin: 0 0 16px; }

/* Small handwritten kicker above section titles — a signature move */
.eyebrow {
    display: inline-block;
    font-family: var(--f-script);
    font-size: 1.5rem;
    color: var(--tt-orange);
    line-height: 1;
    margin-bottom: 6px;
    transform: rotate(-2deg);
}
.eyebrow.on-dark { color: var(--tt-cream); }

/* ══ Layout ══════════════════════════════════════════════════════════════ */
.container       { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container-narrow{ max-width: 900px;  margin: 0 auto; padding: 0 28px; }

.section         { padding: 120px 0; position: relative; }
.section-sm      { padding: 70px 0; }

.bg-cream    { background: var(--tt-cream-soft); }
.bg-cream-2  { background: var(--tt-cream); }
.bg-orange   { background: var(--tt-orange); color: var(--tt-cream); }
.bg-orange h1, .bg-orange h2, .bg-orange h3 { color: var(--tt-cream); }
.bg-espresso { background: var(--tt-espresso); color: var(--tt-cream); }
.bg-espresso h1, .bg-espresso h2, .bg-espresso h3 { color: var(--tt-cream); }

/* Golf-ball dimple texture — subtle repeating radial dots */
.dimples {
    background-color: var(--tt-cream-soft);
    background-image:
        radial-gradient(circle at 8px 8px, rgba(206, 100, 40, 0.09) 1.5px, transparent 2.5px);
    background-size: 24px 24px;
}
.dimples-orange {
    background-image:
        radial-gradient(circle at 8px 8px, rgba(245, 230, 211, 0.12) 1.5px, transparent 2.5px);
    background-size: 24px 24px;
}
.dimples-dark {
    background-image:
        radial-gradient(circle at 8px 8px, rgba(245, 230, 211, 0.05) 1.5px, transparent 2.5px);
    background-size: 24px 24px;
}

/* ══ Curved section dividers ═════════════════════════════════════════════ */
.wave-divider {
    display: block;
    width: 100%;
    height: 80px;
    fill: currentColor;
}

/* ══ Nav-padding hook ══
   Pages without a full-viewport hero (admin dashboards, forms, secondary
   marketing pages) can add class="tt-nav-space" to <body> to push their
   content down below the floating pill nav. Pages with a hero that already
   accounts for the nav (index heroes) leave this off. */
body.tt-nav-space { padding-top: 108px; }

/* ══ Pill Navigation ═════════════════════════════════════════════════════ */
/* The clubhouse corridor is a sticky bar at the top of every page, so
   this room's floating pill nav has to sit below it rather than under
   it. --nav-height comes from tokens.css; the 0px fallback means this
   file still works standalone, outside the shell. */
.tt-nav {
    position: fixed;
    top: calc(22px + var(--nav-height, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(31, 14, 0, 0.72);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    padding: 8px 10px 8px 22px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(245, 230, 211, 0.18);
    box-shadow: 0 12px 40px rgba(31, 14, 0, 0.35);
    max-width: calc(100vw - 32px);
    transition: background .3s, top .3s;
}
.tt-nav.scrolled {
    background: rgba(31, 14, 0, 0.92);
    top: calc(14px + var(--nav-height, 0px));
}
.tt-nav-brand {
    font-family: var(--f-script);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--tt-cream);
    text-decoration: none;
    line-height: 1;
    padding-right: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tt-nav-brand img { height: 36px; width: auto; }
.tt-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tt-nav-links a {
    display: block;
    padding: 8px 16px;
    color: rgba(245, 230, 211, 0.82);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--r-pill);
    transition: background .2s, color .2s;
}
.tt-nav-links a:hover { background: rgba(245, 230, 211, 0.12); color: var(--tt-cream); }
.tt-nav-links a.active {
    background: var(--tt-orange);
    color: var(--tt-cream);
}
.tt-nav-cta {
    padding: 10px 18px !important;
    background: var(--tt-cream) !important;
    color: var(--tt-espresso) !important;
    font-weight: 600 !important;
}
.tt-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--tt-cream);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 6px 12px;
}

@media (max-width: 820px) {
    .tt-nav { padding: 8px 8px 8px 18px; gap: 4px; }
    .tt-nav-brand { font-size: 1.3rem; }
    .tt-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        margin-top: 12px;
        left: 0; right: 0;
        flex-direction: column;
        background: rgba(31, 14, 0, 0.96);
        backdrop-filter: blur(16px);
        border-radius: var(--r-lg);
        border: 1px solid rgba(245, 230, 211, 0.18);
        padding: 12px;
        gap: 4px;
    }
    .tt-nav-links.open { display: flex; }
    .tt-nav-links a { text-align: center; }
    .tt-nav-toggle { display: block; }
}

/* ══ Hero — The Orb ══════════════════════════════════════════════════════ */
.tt-hero {
    position: relative;
    min-height: 100vh;
    padding: 140px 0 80px;
    background: var(--tt-orange);
    color: var(--tt-cream);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.tt-hero-inner {
    position: relative;
    z-index: 3;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    width: 100%;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}
.tt-hero-copy .eyebrow { color: var(--tt-cream); font-size: 1.75rem; }
.tt-hero-copy h1 {
    color: var(--tt-cream);
    font-size: clamp(3rem, 7.5vw, 6.2rem);
    line-height: 0.98;
    margin: 8px 0 24px;
    letter-spacing: -0.03em;
    font-weight: 700;
}
.tt-hero-copy h1 em {
    font-family: var(--f-script);
    font-style: italic;
    font-weight: 700;
    color: var(--tt-cream);
    display: inline-block;
    transform: translateY(6px) rotate(-3deg);
    padding: 0 6px;
}
.tt-hero-copy p.lead {
    color: rgba(245, 230, 211, 0.9);
    font-size: 1.2rem;
    max-width: 520px;
    line-height: 1.6;
    margin: 0 0 36px;
}
.tt-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* The Orb — the signature circular element, with orbital ring and dimples */
.tt-orb-wrap {
    position: relative;
    aspect-ratio: 1;
    max-width: 520px;
    margin-left: auto;
    animation: orbFloat 8s ease-in-out infinite;
}
.tt-orb {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: #F5EDDC url('/assets/golfball.png') center / cover no-repeat;
    box-shadow:
        inset -24px -34px 60px rgba(70, 30, 5, 0.22),
        inset 18px 22px 40px rgba(255, 255, 255, 0.95),
        0 24px 50px rgba(139, 58, 15, 0.28);
    box-shadow:
        inset -20px -30px 60px rgba(139, 58, 15, 0.25),
        0 40px 80px rgba(31, 14, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Golf-ball dimples on the orb — SVG-generated pattern */
.tt-orb::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(circle at 10px 10px, rgba(139, 58, 15, 0.28) 1.6px, transparent 3px);
    background-size: 22px 22px;
    opacity: 0.85;
    mask-image: radial-gradient(circle, black 60%, transparent 92%);
    -webkit-mask-image: radial-gradient(circle, black 60%, transparent 92%);
}
/* Orbital ring — matches the halo line in the logo */
.tt-orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--tt-cream);
    transform: rotate(-15deg) scaleX(1.15) scaleY(0.42);
    opacity: 0.9;
    animation: orbRing 24s linear infinite;
}
.tt-orb-ring::before {
    content: '';
    position: absolute;
    top: -8px; left: 50%;
    width: 14px; height: 14px;
    background: var(--tt-cream);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px rgba(245, 230, 211, 0.8);
}
/* Sparkles floating around the orb */
.tt-orb-wrap::before,
.tt-orb-wrap::after {
    content: '✦';
    position: absolute;
    color: var(--tt-cream);
    font-size: 26px;
    opacity: 0.9;
    pointer-events: none;
}
.tt-orb-wrap::before { top: 6%; right: 12%; animation: twinkle 3s ease-in-out infinite; }
.tt-orb-wrap::after  { bottom: 8%; left: 4%; font-size: 20px; animation: twinkle 3s ease-in-out 1.5s infinite; }

@keyframes orbFloat  { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-14px); } }
@keyframes orbRing   { from { transform: rotate(-15deg) scaleX(1.15) scaleY(0.42); } to { transform: rotate(345deg) scaleX(1.15) scaleY(0.42); } }
@keyframes twinkle   { 0%,100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

/* Corner sparkle overlay on any dark section */
.sparkle-overlay {
    position: absolute;
    pointer-events: none;
    color: var(--tt-cream);
    opacity: 0.35;
    font-size: 24px;
}

@media (max-width: 900px) {
    .tt-hero { min-height: auto; padding: 130px 0 60px; }
    .tt-hero-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .tt-hero-copy p.lead { margin-left: auto; margin-right: auto; }
    .tt-hero-buttons { justify-content: center; }
    .tt-orb-wrap { max-width: 340px; margin: 0 auto; }
}

/* ══ Buttons ═════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    font-family: var(--f-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--r-pill);
    cursor: pointer;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s, box-shadow .25s;
    border: 2px solid transparent;
    line-height: 1;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn::after {
    content: '→';
    font-size: 1.15em;
    transition: transform .25s;
}
.btn.no-arrow::after { display: none; }
.btn:hover::after { transform: translateX(4px); }

.btn-primary {
    background: var(--tt-cream);
    color: var(--tt-espresso);
    box-shadow: 0 10px 30px rgba(31, 14, 0, 0.25);
}
.btn-primary:hover { background: var(--tt-cream-hover); color: var(--tt-espresso); box-shadow: 0 14px 40px rgba(31, 14, 0, 0.35); }

.btn-outline-cream {
    background: transparent;
    color: var(--tt-cream);
    border-color: var(--tt-cream);
}
.btn-outline-cream:hover { background: var(--tt-cream); color: var(--tt-espresso); }

.btn-orange {
    background: var(--tt-orange);
    color: var(--tt-cream);
    box-shadow: 0 10px 30px rgba(206, 100, 40, 0.35);
}
.btn-orange:hover { background: var(--tt-orange-deep); color: var(--tt-cream); }

.btn-outline-dark {
    background: transparent;
    color: var(--tt-espresso);
    border-color: var(--tt-espresso);
}
.btn-outline-dark:hover { background: var(--tt-espresso); color: var(--tt-cream); }

.btn-large { padding: 20px 34px; font-size: 1.08rem; }

/* Floating "ball" CTA — bottom right corner, persistent */
.tt-ball-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: var(--tt-orange);
    color: var(--tt-cream);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    box-shadow: 0 12px 40px rgba(31, 14, 0, 0.4);
    border: 2px solid var(--tt-cream);
    transition: transform .25s, background .25s;
    padding: 10px;
}
.tt-ball-cta:hover { transform: scale(1.08); background: var(--tt-orange-deep); color: var(--tt-cream); text-decoration: none; }
.tt-ball-cta::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 6px 6px, rgba(245,230,211,0.16) 1.2px, transparent 2px);
    background-size: 14px 14px;
    pointer-events: none;
}
@media (max-width: 640px) { .tt-ball-cta { width: 88px; height: 88px; font-size: 0.68rem; right: 16px; bottom: 16px; padding: 6px; } }

/* Portal back-to-home button used on portal subpages */
.portal-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 8px 12px;
    background: rgba(245, 230, 211, 0.12);
    border: 1px solid rgba(245, 230, 211, 0.2);
    color: var(--tt-cream);
    text-decoration: none;
    border-radius: var(--r-pill);
    font-size: 0.86rem;
    font-weight: 600;
    transition: background .2s, transform .2s;
    margin-bottom: 12px;
}
.portal-back:hover { background: rgba(245, 230, 211, 0.22); color: var(--tt-cream); text-decoration: none; transform: translateX(-3px); }
.portal-back::before { content: '←'; font-size: 1.15em; }

/* ══ Marquee (script text scroller) ══════════════════════════════════════ */
.tt-marquee {
    background: var(--tt-espresso);
    color: var(--tt-cream);
    padding: 26px 0;
    overflow: hidden;
    position: relative;
}
.tt-marquee-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: marqueeScroll 34s linear infinite;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 400;
}
.tt-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    color: var(--tt-cream);
}
.tt-marquee-item::after {
    content: '✦';
    color: var(--tt-orange-glow);
    font-size: 1rem;
    margin-left: 24px;
}
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ══ Bento-Orb grid — the "no square grids" layout ═══════════════════════ */
/* Uses asymmetric grid with rounded rectangles, half-circle callouts, and a
   true circle in one slot for visual variety. */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 20px;
}
.bento-tile {
    background: var(--tt-cream-soft);
    border: 1px solid var(--tt-border);
    border-radius: var(--r-lg);
    padding: 36px;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bento-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(31, 14, 0, 0.1); }
.bento-tile h3 { margin: 0 0 12px; }
.bento-tile p  { color: var(--tt-text-muted); font-size: 0.98rem; line-height: 1.7; margin: 0; }

.bento-tile.tile-wide  { grid-column: span 4; }
.bento-tile.tile-half  { grid-column: span 3; }
.bento-tile.tile-third { grid-column: span 2; }

.bento-tile.tile-orange  { background: var(--tt-orange); color: var(--tt-cream); border-color: transparent; }
.bento-tile.tile-orange h3 { color: var(--tt-cream); }
.bento-tile.tile-orange p  { color: rgba(245, 230, 211, 0.85); }
.bento-tile.tile-dark    { background: var(--tt-espresso); color: var(--tt-cream); border-color: transparent; }
.bento-tile.tile-dark h3 { color: var(--tt-cream); }
.bento-tile.tile-dark p  { color: rgba(245, 230, 211, 0.85); }

/* Circular tile — big number in the middle */
.bento-orb {
    grid-column: span 2;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #F5EDDC url('/assets/golfball.png') center / cover no-repeat;
    box-shadow:
        inset -24px -34px 60px rgba(70, 30, 5, 0.22),
        inset 18px 22px 40px rgba(255, 255, 255, 0.95),
        0 24px 50px rgba(139, 58, 15, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    border: none;
    position: relative;
    box-shadow: 0 20px 50px rgba(139, 58, 15, 0.18);
    overflow: hidden;
    transition: transform .3s;
}
.bento-orb::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: radial-gradient(circle at 8px 8px, rgba(139, 58, 15, 0.22) 1.4px, transparent 2.5px);
    background-size: 20px 20px;
    mask-image: radial-gradient(circle, black 55%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle, black 55%, transparent 90%);
    pointer-events: none;
}
.bento-orb:hover { transform: rotate(-8deg) scale(1.03); }
.bento-orb .orb-num {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    color: var(--tt-orange-deep);
    line-height: 1;
    z-index: 2;
    margin-bottom: 6px;
}
.bento-orb .orb-lbl {
    font-family: var(--f-script);
    font-size: 1.1rem;
    color: var(--tt-espresso);
    z-index: 2;
    line-height: 1.15;
}

/* Half-circle "wedge" tile */
.bento-wedge {
    grid-column: span 2;
    background: var(--tt-orange);
    color: var(--tt-cream);
    border-radius: 50% 50% 12px 12px / 60% 60% 12px 12px;
    padding: 40px 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: none;
}
.bento-wedge .script { color: var(--tt-cream); font-size: 1.8rem; }
.bento-wedge p { color: rgba(245, 230, 211, 0.9); font-size: 0.95rem; margin: 10px 0 0; }

@media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento-tile.tile-wide, .bento-tile.tile-half, .bento-tile.tile-third, .bento-orb, .bento-wedge { grid-column: span 2; }
    .bento-orb { max-width: 260px; margin: 0 auto; }
}

/* ══ Stat orbs — grid of circular stat callouts ══════════════════════════ */
.orb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    justify-items: center;
}
.orb-stat {
    aspect-ratio: 1;
    width: 100%;
    max-width: 220px;
    border-radius: 50%;
    background: #F5EDDC url('/assets/golfball.png') center / cover no-repeat;
    box-shadow:
        inset -24px -34px 60px rgba(70, 30, 5, 0.22),
        inset 18px 22px 40px rgba(255, 255, 255, 0.95),
        0 24px 50px rgba(139, 58, 15, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    position: relative;
    box-shadow: 0 20px 40px rgba(139, 58, 15, 0.15);
    transition: transform .3s;
    overflow: hidden;
}
.orb-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: none;
    background-size: 19px 19px, 19px 19px;
    mask-image: radial-gradient(circle, black 55%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle, black 55%, transparent 90%);
    pointer-events: none;
}
.orb-stat:hover { transform: translateY(-6px) rotate(-4deg); }
.orb-stat-num {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    color: var(--tt-orange-deep);
    line-height: 1;
    z-index: 2;
}
.orb-stat-lbl {
    font-family: var(--f-script);
    font-size: 1.1rem;
    color: var(--tt-espresso);
    margin-top: 4px;
    z-index: 2;
}

/* ══ Quote block ═════════════════════════════════════════════════════════ */
.quote-block {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.quote-mark {
    font-family: var(--f-display);
    font-size: 6rem;
    color: var(--tt-orange);
    line-height: 0.4;
    margin-bottom: 20px;
    display: block;
    opacity: 0.4;
}
.quote-text {
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    color: var(--tt-espresso);
    line-height: 1.35;
    margin: 0 0 24px;
    font-weight: 400;
    font-variation-settings: 'opsz' 144;
}
.quote-attr {
    font-family: var(--f-script);
    font-size: 1.3rem;
    color: var(--tt-orange);
}

/* ══ Forms ═══════════════════════════════════════════════════════════════ */
form label {
    display: block;
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--tt-espresso);
    margin-bottom: 8px;
}
form input, form select, form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--tt-border);
    border-radius: var(--r-lg);
    font-family: inherit;
    font-size: 1rem;
    background: white;
    color: var(--tt-text);
    transition: border-color .2s, box-shadow .2s;
}
form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--tt-orange);
    box-shadow: 0 0 0 4px rgba(206, 100, 40, 0.15);
}

/* ══ Footer ══════════════════════════════════════════════════════════════ */
.tt-footer {
    background: var(--tt-espresso);
    color: rgba(245, 230, 211, 0.7);
    padding: 100px 0 32px;
    position: relative;
    overflow: hidden;
}
.tt-footer::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -180px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(206, 100, 40, 0.25) 0%, transparent 70%);
    pointer-events: none;
}
.tt-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}
.tt-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tt-footer-brand .brand-mark {
    font-family: var(--f-script);
    font-size: 2.4rem;
    color: var(--tt-cream);
    line-height: 1;
    margin: 0;
}
.tt-footer-brand p { color: rgba(245, 230, 211, 0.65); font-size: 0.95rem; max-width: 380px; margin: 0; }
.tt-footer h4 {
    color: var(--tt-cream);
    font-family: var(--f-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.tt-footer ul { list-style: none; padding: 0; margin: 0; }
.tt-footer li { margin-bottom: 12px; }
.tt-footer a { color: rgba(245, 230, 211, 0.7); font-size: 0.95rem; transition: color .2s; }
.tt-footer a:hover { color: var(--tt-cream); }
.tt-footer-bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(245, 230, 211, 0.1);
    text-align: center;
    color: rgba(245, 230, 211, 0.5);
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}
.tt-footer-bottom p { margin: 0; }

@media (max-width: 720px) {
    .tt-footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .tt-footer { padding: 70px 0 24px; }
}

/* ══ Utility ═════════════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.mb-lg { margin-bottom: 64px; }
.mb-md { margin-bottom: 32px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}