/* ============================================================
   hrcohen.com — global stylesheet
   "Aqua Remaster" — Apple.com circa 2001-2003, 4K-remastered.
   Authentic bones: white pages, gray Aqua tab bar, blue links,
   1px-bordered tiles, dense Lucida Grande type, striped tables.
   Remaster layer: multi-stop gradients, stacked micro-shadows,
   specular top highlights, and restrained spring-feel motion.
   ============================================================ */

:root {
    --bg: #f5f5f4; /* offwhite from the original single-page design (oklch(0.97 0.001 106.424)) */
    --surface: #ffffff;
    --surface-low: #f7f7f7;
    --surface-container: #efefef;
    --surface-high: #e8e8e8;

    --fg: #1a1a1a;
    --fg-soft: #444444;
    --muted: #6e6e6e;

    --outline: #999999;
    --hairline: #d6d6d6;
    --tile-border: #cccccc;

    --link: #0055cc;           /* classic Apple.com blue */
    --link-visited: #551a8b;

    /* ---- iMac G3 "five flavors" accent palette — applied to gel
       buttons, category icons, status badges, and promo orbs. Rich,
       saturated, translucent-plastic jewel tones, not neon. ---- */
    --imac-teal: #0395c1;
    --imac-lavender: #8e70a4;
    --imac-fern: #4ba72a;
    --imac-berry: #cb3b57;
    --imac-tangerine: #df6b0a;

    --aqua-green: #22c55e;
    --aqua-green-dk: #1d6b39;

    --page-max: 1160px;
    --font: "Lucida Grande", "Lucida Sans Unicode", "Segoe UI", Helvetica, Arial, sans-serif;
    /* AppleMyungjo first (mac), then light/classic web-safe cousins of
       Apple Garamond — the actual 2001 headline face */
    --serif: "AppleMyungjo", "Times New Roman", Times, Georgia, "Palatino Linotype", Palatino, serif;

    /* ---- Motion: press is instant, release settles quickly with the
       faintest overshoot. Apple restraint — nothing bouncy. ---- */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-press: cubic-bezier(0.4, 0, 1, 1);
    --ease-settle: cubic-bezier(0.3, 1.2, 0.5, 1);

    /* ---- Remastered Aqua material recipes ---- */
    /* Platinum chrome: tabs, bars, gray buttons */
    --chrome-face: linear-gradient(to bottom,
        #fefefe 0%, #f5f5f5 42%, #e7e7e7 50%, #ececec 88%, #f4f4f4 100%);
    --chrome-face-hover: linear-gradient(to bottom,
        #ffffff 0%, #fafafa 42%, #efefef 50%, #f3f3f3 88%, #fafafa 100%);
    /* The stacked-shadow "remaster" depth: highlight seam, contact line,
       ambient, and soft drop — four tiny layers instead of one blob. */
    --chrome-depth:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.05),
        0 1px 1px rgba(0,0,0,.06),
        0 2px 4px rgba(0,0,0,.05);
    /* iMac G3 Lime gel: the primary-action material — same lightness/
       contrast structure as the original Aqua blue gel, with the iMac
       "bright fern" (--imac-fern) as the seam color instead of a
       washed-out pastel or a neon lime. */
    --gel-blue: linear-gradient(to bottom,
        #cdead0 0%, #90cf7a 44%, #4ba72a 50%, #6ec24c 78%, #b9e2a0 100%);
    --gel-blue-depth:
        inset 0 1px 1px rgba(255,255,255,.9),
        inset 0 -2px 4px rgba(25,70,15,.28),
        0 1px 1px rgba(0,0,0,.1),
        0 2px 5px rgba(35,85,20,.28);
    /* Aqua teal gel: availability status (--color-2) */
    --gel-green: linear-gradient(to bottom,
        #e4fdf4 0%, #b0f7dd 44%, #7affca 50%, #9df7d9 78%, #ddfbef 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Platinum gradient utility (kept for any legacy markup) */
.tab-gradient,
.brushed { background: var(--chrome-face); }

body {
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.55;
    color: var(--fg);
    margin: 0;
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    padding: 0 0 40px;
}

/* ============================================================
   Identity hero — sits ABOVE the nav bar, centered content.
   Faint pinstripe lives HERE only (authentic Aqua wallpaper),
   remastered: 1px lines with a soft vertical falloff.
   ============================================================ */
.hero {
    margin: 0;
    padding: 44px 26px 26px;
    text-align: center;
    background: var(--bg);
    position: relative;
}
/* Pinstripes live on a masked layer: visible behind the identity text,
   fading out before they reach the edges of the band. The mask is a
   fixed-size ellipse sized to the identity block itself (name, title,
   contact pills) — not a percentage of the full-bleed hero — so it
   actually fades out near the text instead of staying opaque almost
   to the navbar and page edges. Stripe color is a step darker than
   --bg (not the old #eeeeee, which was tuned for a pure-white hero)
   so it still reads clearly against the offwhite background. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #e7e5e4 2px, #e7e5e4 4px);
    -webkit-mask-image: radial-gradient(ellipse 360px 110px at 50% 55%, black 8%, rgba(0,0,0,.5) 35%, transparent 88%);
    mask-image: radial-gradient(ellipse 360px 110px at 50% 55%, black 8%, rgba(0,0,0,.5) 35%, transparent 88%);
    pointer-events: none;
}
.hero-inner { max-width: var(--page-max); margin: 0 auto; position: relative; }
.hero h1 { margin: 0 0 4px; font-size: 52px; }
.hero .header-title { margin: 0 0 18px; }
.hero .header-contact { justify-content: center; margin-bottom: 0; }

/* ============================================================
   The Apple.com tab bar — rounded-top platinum tabs on a thin
   chrome strip, 1px #9a9a9a seams. Remaster: 4-layer depth,
   specular top edge, press/hover motion.
   ============================================================ */
.apple-bar {
    width: min(calc(100% - 32px), var(--page-max));
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px 0;
    background: linear-gradient(to bottom, #fcfcfc 0%, #f0f0f0 55%, #e2e2e2 100%);
    border: 1px solid #b8b8b8;
    border-bottom: 1px solid #8e8e8e;
    border-radius: 10px 10px 6px 6px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 1px 2px rgba(0,0,0,.06),
        0 3px 8px rgba(0,0,0,.06);
}
.apple-bar a,
.apple-bar span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #333;
    padding: 8px 18px 7px;
    border: 1px solid #9a9a9a;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--chrome-face);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.04),
        0 1px 2px rgba(0,0,0,.07);
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    position: relative;
    top: 1px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle), background 180ms var(--ease-out);
}
.apple-bar a:active, .apple-bar span:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 3px rgba(0,0,0,.12);
    transition: transform 80ms var(--ease-press);
}
@media (hover: hover) and (pointer: fine) {
    .apple-bar a:hover {
        background: var(--chrome-face-hover);
        transform: translateY(-1px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            inset 0 -1px 0 rgba(0,0,0,.04),
            0 2px 3px rgba(0,0,0,.09),
            0 3px 6px rgba(0,0,0,.06);
        color: #000;
    }
}
.apple-bar .current {
    color: #000;
    background: var(--bg);
    border-color: #8e8e8e;
    border-bottom: 1px solid var(--bg);
    top: 1px;
    z-index: 1;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 -1px 2px rgba(0,0,0,.05);
}
/* Bridge patch: the container's own drop shadow (0 3px 8px below the
   whole bar) would otherwise show through the gap under the current
   tab's bottom border. Paint over just that sliver in the page's own
   background color, not a hardcoded white, so it still blends now
   that the page background is an offwhite, not pure white. */
.apple-bar .current::after {
    content: '';
    position: absolute;
    left: 1px; right: 1px;
    bottom: -9px;
    height: 10px;
    background: var(--bg);
}

/* Sub-nav strip (optional, injected per page) — the thin white bar of
   small links under the tabs on the 2001 site */
.subnav {
    max-width: var(--page-max);
    margin: 0 auto;
    background: linear-gradient(to bottom, #ffffff, #f4f4f4);
    border: 1px solid #9a9a9a;
    border-top: none;
    padding: 5px 12px;
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 10px;
    color: var(--muted);
}
.subnav a { color: var(--fg-soft); text-decoration: none; }
.subnav a:hover { color: var(--link); text-decoration: underline; }
.subnav .sep { color: var(--hairline); }

/* ============================================================
   Page container
   ============================================================ */
.page {
    max-width: var(--page-max);
    margin: 0 auto;
    background: transparent;
    border: none;
    padding: 26px 26px 30px;
}

/* ============================================================
   Hot News ticker — straight off the 2001 homepage.
   Remaster: chrome label chip + inset white track.
   ============================================================ */
.ticker {
    display: flex;
    align-items: stretch;
    border: 1px solid #9a9a9a;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 22px;
    height: 27px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.8);
}
.ticker-label {
    background: var(--chrome-face);
    border-right: 1px solid #9a9a9a;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #333;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
    white-space: nowrap;
}
.ticker-text {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 11px;
    color: var(--fg);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ============================================================
   Identity / header
   ============================================================ */
h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 46px;
    letter-spacing: -0.01em;
    line-height: 1.02;
    margin: 0 0 4px;
    color: var(--fg);
}
.header-title {
    font-size: 13px;
    color: var(--fg-soft);
    margin: 0 0 16px;
    letter-spacing: 0.01em;
}
.header-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Chrome pill (email / social) — platinum capsule */
.header-email {
    font-size: 11px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    color: var(--fg-soft);
    text-decoration: none;
    background: var(--chrome-face);
    border: 1px solid #a8a8a8;
    border-radius: 9999px;
    box-shadow: var(--chrome-depth);
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle);
}
.header-email:active { transform: scale(0.96); transition: transform 80ms var(--ease-press); }
@media (hover: hover) and (pointer: fine) {
    .header-email:hover { background: var(--chrome-face-hover); transform: translateY(-1px); }
}
.header-email a { color: var(--fg-soft); text-decoration: none; }
.header-email a:visited { color: var(--fg-soft); }
.email-icon, .social-icon { width: 12px; height: 12px; stroke: var(--muted); stroke-width: 1.6; fill: none; }
.social-icon.instagram { color: var(--muted); stroke: var(--muted); fill: none; }
.social-icon.vimeo { fill: var(--muted); stroke: none; }

/* Availability pill — aqua green gel, ambient pulse kept slow */
.availability-badge {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px;
    color: #14522e;
    background: var(--gel-green);
    border: 1px solid #57b97c;
    border-radius: 9999px;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.85),
        inset 0 -2px 3px rgba(20,90,50,.18),
        0 1px 3px rgba(20,90,50,.18);
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.availability-indicator {
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #a8ffc4, #22c55e);
    box-shadow: 0 0 2px #22c55e;
    animation: pulse 2.6s infinite ease-in-out;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.88); } }

/* ============================================================
   Prose / links
   ============================================================ */
.intro-section { margin-bottom: 26px; }
.intro-section p { font-size: 13px; line-height: 1.65; color: var(--fg); margin: 0 0 12px; }
.intro-statement { font-size: 15px !important; line-height: 1.6 !important; color: var(--fg) !important; }
.section-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: -6px 0 18px; }
p { font-size: 12px; line-height: 1.65; color: var(--fg); }

/* Classic blue underlined-on-hover links */
.highlight { color: var(--link); text-decoration: none; }
.highlight:visited { color: var(--link-visited); }
.highlight:hover { text-decoration: underline; }

/* ============================================================
   Section headings — hairline rule, like the 2002 product pages
   ============================================================ */
h2 {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Geneva, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.005em;
    margin: 88px 0 16px;
    color: var(--fg);
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 9px;
}
h2:first-child { margin-top: 0; }

/* Reusable graphic section header: kicker + headline + lede.
   Used instead of a plain <h2> wherever a section needs to read
   like a considered moment rather than a document heading. */
.section-head { max-width: 640px; margin: 88px 0 40px; }
.section-head:first-child { margin-top: 0; }
.section-head .kicker {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--link); margin: 0 0 12px;
}
.section-head h2 {
    font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.12;
    letter-spacing: -0.01em; margin: 0 0 12px; border: none; padding: 0; color: var(--fg);
}
.section-head .lede { font-size: 14.5px; line-height: 1.65; color: var(--fg-soft); margin: 0; }
@media (max-width: 680px) {
    .section-head { margin: 56px 0 30px; }
    .section-head h2 { font-size: 24px; }
}
h3 {
    font-weight: 700;
    font-size: 13px;
    color: var(--fg);
    margin: 22px 0 6px;
}

/* ============================================================
   Demo reel / video — the "product shot" framed in hairline chrome
   ============================================================ */
.reel-card {
    background: #000;
    border: 1px solid #9a9a9a;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 26px;
    box-shadow:
        0 1px 2px rgba(0,0,0,.12),
        0 4px 12px rgba(0,0,0,.10);
}
.reel-video { width: 100%; aspect-ratio: 16 / 9; position: relative; background: #111; }
.reel-video iframe { width: 100%; height: 100%; border: none; position: absolute; inset: 0; }
.reel-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); pointer-events: none;
}
.reel-title { color: #fff; font-size: 14px; font-weight: 700; margin: 0; }
.reel-sub { color: rgba(255,255,255,0.72); font-size: 11px; margin: 2px 0 0; }

/* ============================================================
   Panels / link rows
   ============================================================ */
.panel {
    border: 1px solid var(--tile-border);
    background: #fff;
    padding: 4px 16px;
    margin-bottom: 18px;
}

.link-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e8;
    text-decoration: none;
    color: inherit;
}
.link-row:last-child { border-bottom: none; }
.link-row:hover { background: #f5f8fd; }
.link-row:hover .link-title { color: var(--link); text-decoration: underline; }
.cell-icon { width: 26px; height: 26px; flex-shrink: 0; stroke: var(--fg-soft); stroke-width: 1.5; fill: none; margin-top: 1px; }
.link-title { font-weight: 700; font-size: 14px; color: var(--fg); }
.link-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.link-arrow { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--link); white-space: nowrap; }

/* ============================================================
   Product tiles — the 4-up promo boxes from the 2001 homepage.
   White, 1px #ccc, square-ish. Remaster: layered hover lift,
   press feedback, specular hairline inside the top edge.
   ============================================================ */
.services-grid, .packages-grid, .inventory-grid, .steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.service-card, .package-card, .item-card, .step-card {
    border: 1px solid var(--tile-border);
    border-radius: 2px;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 88%, #fafafa 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 1px 1px rgba(0,0,0,.03);
    padding: 16px 17px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle), border-color 180ms var(--ease-out);
}
.service-card:active, .package-card:active, .item-card:active, .step-card:active {
    transform: scale(0.985);
    transition: transform 80ms var(--ease-press);
}
@media (hover: hover) and (pointer: fine) {
    .service-card:hover, .package-card:hover, .item-card:hover, .step-card:hover {
        border-color: #a8a8a8;
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 2px rgba(0,0,0,.06),
            0 3px 6px rgba(0,0,0,.06),
            0 8px 16px rgba(0,0,0,.05);
    }
}

.service-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.service-icon { width: 20px; height: 20px; stroke: var(--fg-soft); stroke-width: 1.5; fill: none; flex-shrink: 0; }
.service-title, .package-tier, .item-name, .step-title, .job-title { font-weight: 700; color: var(--fg); }
.service-title { font-size: 14px; }
.service-desc { font-size: 12px; line-height: 1.55; color: var(--fg); margin-top: 3px; }
.service-credit { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* Package tiles */
.package-tag {
    align-self: flex-start; display: inline-block;
    background: linear-gradient(to bottom, #7a7a7a 0%, #565656 48%, #3f3f3f 52%, #555 100%);
    color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 9px; border-radius: 9px; margin-bottom: 9px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 1px rgba(0,0,0,.15);
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}
.package-tier { font-size: 15px; }
.package-price { font-weight: 700; font-size: 22px; color: var(--fg); margin: 5px 0 2px; letter-spacing: -0.01em; }
.package-price span { font-size: 12px; font-weight: 400; color: var(--muted); }
.package-alacarte { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.package-bundle { font-size: 12px; line-height: 1.5; color: var(--fg); }
.package-perk { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: auto; padding-top: 10px; }

/* Equipment inventory tiles */
.item-card { display: flex; gap: 14px; align-items: stretch; }
.item-thumb {
    flex: 0 0 88px; width: 88px; border: 1px solid #444;
    border-radius: 2px;
    background: linear-gradient(to bottom, #1c1c1c, #000 60%, #101010);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    color: #d8d8d8;
}
.item-thumb svg { width: 28px; height: 28px; stroke: #cfcfcf; stroke-width: 1.5; fill: none; }
.item-cat { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9a9a; }
.item-status { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 7px; }
.item-status.available { color: #d9ffe6; background: rgba(34,197,94,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.item-status.booked { color: #ffe9c2; background: rgba(214,158,46,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.item-status.soon { color: #ddd; background: rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.item-body { flex: 1; display: flex; flex-direction: column; }
.item-name { font-size: 13px; }
.item-spec { font-size: 11px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.item-price { font-weight: 700; font-size: 13px; color: var(--fg); margin-top: 9px; }
.item-price span { font-weight: 400; color: var(--muted); font-size: 11px; }

/* Steps — numbered aqua-gel dots */
.step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background:
        radial-gradient(ellipse 80% 55% at 50% 8%, rgba(255,255,255,.85), transparent 55%),
        var(--gel-blue);
    border: 1px solid #3a8620;
    color: #fff; font-weight: 700; font-size: 13px;
    text-shadow: 0 -1px 1px rgba(25,70,15,.5);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.8),
        inset 0 -2px 3px rgba(25,70,15,.3),
        0 1px 2px rgba(35,85,20,.25);
    display: flex; align-items: center; justify-content: center; margin-bottom: 9px;
}
.step-title { font-size: 14px; }
.step-desc { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 3px; }

/* ============================================================
   Tables — striped blue/white credits (authentic Downloads table)
   ============================================================ */
table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 6px 0 4px; border: 1px solid var(--tile-border); }
th, td { text-align: left; padding: 5px 9px; }
th {
    font-weight: 700; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: #333;
    background: var(--chrome-face);
    border-bottom: 1px solid #999; border-right: 1px solid #ccc;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
tbody tr:nth-child(even) { background: #edf3fe; }
tbody tr:nth-child(odd)  { background: #ffffff; }
tbody tr:hover { background: #e3ecfb; }
td { border-bottom: 1px solid #eee; }

/* Lists */
ul, ol { font-size: 12px; line-height: 1.6; color: var(--fg); padding-left: 20px; }
li { margin-bottom: 5px; }

/* CV experience rows */
.experience-item {
    margin: 10px 0; padding: 8px 0 8px 14px; line-height: 1.5;
    border-bottom: 1px solid #eee; position: relative;
}
.experience-item:last-child { border-bottom: none; }
.experience-title { font-weight: 400; margin-bottom: 4px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.experience-content { flex: 1; padding-right: 14px; }
.job-title { font-size: 14px; display: inline-block; letter-spacing: -0.01em; overflow-wrap: break-word; }
.row-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
.experience-date { min-width: 100px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--fg-soft); text-align: right; padding-top: 1px; white-space: nowrap; }

/* ============================================================
   Buttons + CTA — aqua blue gel primary (the "Buy Now" material)
   ============================================================ */
.cta {
    border: 1px solid #9a9a9a;
    border-radius: 3px;
    background: linear-gradient(to bottom, #fbfbfb, #ededed);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.05);
    padding: 22px;
    margin: 26px 0 0;
    text-align: center;
}
.cta p { font-size: 13px; margin: 0 0 14px; }
.cta-button, .pill-button {
    display: inline-block;
    position: relative;
    background:
        radial-gradient(ellipse 85% 55% at 50% 4%, rgba(255,255,255,.9), transparent 55%),
        var(--gel-blue);
    color: #ffffff;
    border: 1px solid #3a8620;
    padding: 7px 24px;
    border-radius: 9999px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    text-shadow: 0 -1px 1px rgba(25,70,15,.55);
    box-shadow: var(--gel-blue-depth);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle), filter 180ms var(--ease-out);
}
button.cta-button:disabled {
    opacity: .5; cursor: not-allowed; filter: none; transform: none;
}
.cta-button:active, .pill-button:active {
    transform: scale(0.95);
    box-shadow:
        inset 0 2px 4px rgba(25,70,15,.35),
        0 1px 1px rgba(0,0,0,.1);
    transition: transform 80ms var(--ease-press);
}
@media (hover: hover) and (pointer: fine) {
    .cta-button:hover, .pill-button:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.95),
            inset 0 -2px 4px rgba(25,70,15,.25),
            0 2px 3px rgba(0,0,0,.12),
            0 4px 10px rgba(35,85,20,.3);
    }
}

/* ============================================================
   Footer
   ============================================================ */
.footer-contact {
    margin-top: 44px; padding-top: 16px;
    border-top: 1px solid var(--hairline);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.footer-name { font-weight: 700; font-size: 16px; color: var(--fg); margin: 0; letter-spacing: -0.01em; }
.footer-badges-row { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-badge {
    font-size: 11px; padding: 4px 11px;
    background: var(--chrome-face);
    border: 1px solid #a8a8a8; border-radius: 9999px;
    box-shadow: var(--chrome-depth);
    display: flex; align-items: center; gap: 6px;
}
.footer-badge a { color: var(--fg-soft); text-decoration: none; }
.footer-badge a:visited { color: var(--fg-soft); }
.footer-social-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-copy { font-size: 10px; color: var(--muted); text-align: center; margin-top: 4px; }

/* ============================================================
   HOME IA — hero feature, offering tiles, credibility strip
   ============================================================ */
.feature {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 22px;
    align-items: stretch;
    margin: 0 0 10px;
}
.feature .reel-card { margin: 0; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 4px 0; }
.feature-kicker {
    font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 8px;
}
.feature-copy h2 {
    font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05;
    letter-spacing: -0.01em; margin: 0 0 12px; padding: 0; border: none; color: var(--fg);
}
.feature-copy p { font-size: 13px; line-height: 1.6; color: var(--fg-soft); margin: 0 0 16px; }
.feature-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Offering tiles — 2001-homepage promo boxes: white, hairline border,
   bold headline, blue "go" link. Accent classes tint only the icon. */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 4px;
}
.offer {
    display: flex; flex-direction: column;
    border: 1px solid var(--tile-border);
    border-radius: 2px;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 88%, #fafafa 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 1px 1px rgba(0,0,0,.03);
    padding: 18px 18px 16px;
    text-decoration: none; color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle), border-color 180ms var(--ease-out);
}
.offer:active { transform: scale(0.985); transition: transform 80ms var(--ease-press); }
@media (hover: hover) and (pointer: fine) {
    .offer:hover {
        border-color: #a8a8a8;
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 2px rgba(0,0,0,.06),
            0 3px 6px rgba(0,0,0,.06),
            0 8px 16px rgba(0,0,0,.05);
    }
}
.offer-ico {
    width: 34px; height: 34px; margin-bottom: 12px;
    stroke: #3a7bd5; stroke-width: 1.4; fill: none;
}
.offer.offer-purple .offer-ico { stroke: #7b5cc9; }
.offer.offer-pink .offer-ico { stroke: #c95d9e; }
.offer.offer-green .offer-ico { stroke: #3aa662; }
.offer h3 {
    font-family: var(--font); font-weight: 700; font-size: 16px;
    letter-spacing: -0.005em;
    margin: 0 0 6px; color: var(--fg);
}
.offer p { font-size: 12px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; flex: 1; }
.offer-go { font-size: 11px; font-weight: 700; color: var(--link); }
@media (hover: hover) and (pointer: fine) {
    .offer:hover .offer-go { text-decoration: underline; }
}

/* Credibility strip — same striped bordered-rectangle list as the CV
   page's skills grid, not a dense inline run of text. */
.cred {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin: 34px 0;
    padding: 16px 0 20px;
}
.cred-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.cred-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); white-space: nowrap;
}
.cred-more { font-size: 11px; font-weight: 700; color: var(--link); text-decoration: none; white-space: nowrap; }
.cred-more:hover { text-decoration: underline; }
.cred-grid.skills-grid { margin-top: 0; grid-template-columns: repeat(3, 1fr); }
.cred-grid .skills-title { font-size: 12px; }
/* Alternates per item (odd/even), not per row of 3 — this is a flat
   list of unrelated credits, not grouped rows, so a whole row sharing
   one color misleadingly implied a relationship between them. */
.cred-grid.skills-grid > .skills-item:nth-child(odd) { background: #edf3fe; }
.cred-grid.skills-grid > .skills-item:nth-child(even) { background: #ffffff; }
@media (max-width: 680px) {
    .cred-grid.skills-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .feature { grid-template-columns: 1fr; }
    .offer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CV — scannable credits table + compact lists
   ============================================================ */
.cv-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.cv-table tr { border-bottom: 1px solid var(--hairline); }
.cv-table tr:hover { background: #f5f8fd; }
.cv-table td { padding: 7px 8px; vertical-align: top; }
.cv-year {
    font-family: var(--font); font-weight: 700; font-size: 13px;
    color: var(--fg); padding: 16px 0 4px; letter-spacing: 0.08em; text-transform: uppercase;
}
.cv-role { font-weight: 700; color: var(--fg); width: 26%; white-space: nowrap; }
.cv-role a { color: var(--fg); text-decoration: none; }
.cv-role a:hover { color: var(--link); text-decoration: underline; }
.cv-proj { color: var(--fg-soft); width: 30%; }
.cv-proj b { color: var(--fg); font-weight: 700; }
.cv-proj a { color: var(--link); text-decoration: none; }
.cv-proj a:hover { text-decoration: underline; }
.cv-meta { color: var(--muted); width: 30%; }
.cv-date { color: var(--muted); width: 14%; text-align: right; white-space: nowrap; }
.tag-paid, .tag-credit {
    display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 1px 5px; border-radius: 2px; margin-left: 4px; vertical-align: middle;
}
.tag-paid { background: #e3f1e3; color: #2c7a2c; border: 1px solid #c4e0c4; }
.tag-credit { background: #e9eefa; color: #3a5aa3; border: 1px solid #ccd8f0; }

.compact-list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; }
.compact-item {
    border: 1px solid var(--tile-border); background: #fff; padding: 8px 11px; font-size: 12px; color: var(--fg-soft);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,.03);
}
.compact-item b { color: var(--fg); font-weight: 700; }
.compact-item a { color: var(--link); text-decoration: none; }
.compact-item a:hover { text-decoration: underline; }

@media (max-width: 680px) {
    .cv-role, .cv-proj, .cv-meta, .cv-date { white-space: normal; width: auto; display: block; }
    .cv-table, .cv-table tbody, .cv-table tr, .cv-table td { display: block; }
    .cv-table tr { padding: 8px 0; }
    .cv-date { text-align: left; }
}

/* ============================================================
   Responsive — keep it boxed, just scale down
   ============================================================ */
@media (max-width: 680px) {
    /* Mobile gets a real native-feeling bottom tab bar instead of a
       horizontally-scrolling row of desktop tabs — see .bottom-nav below. */
    .apple-bar { display: none; }
    h1 { font-size: 30px; }
    .page { padding: 18px 16px 24px; }
    .link-row { flex-wrap: wrap; }
    .link-arrow { margin-left: 0; width: 100%; }
    .ticker-text { font-size: 10px; }
}

/* ============================================================
   Bottom mobile nav — fixed, thumb-reachable, platinum chrome
   with an aqua-gel active state. Hidden on desktop.
   ============================================================ */
.bottom-nav { display: none; }
@media (max-width: 680px) {
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    /* Same chrome strip as the desktop .apple-bar, holding standalone
       button tabs (full border, real gap between each) rather than
       tabs fused into the strip — flipped and tightened for thumb use. */
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 50%;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        width: calc(100% - 28px);
        max-width: 420px;
        z-index: 20;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 6px;
        border: 1px solid #b8b8b8;
        border-bottom-color: #9e9e9e;
        border-radius: 16px;
        background: linear-gradient(to bottom, #fcfcfc 0%, #f0f0f0 55%, #e2e2e2 100%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 2px 4px rgba(0,0,0,.1),
            0 8px 20px rgba(0,0,0,.14);
    }
    .bottom-nav a, .bottom-nav span {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
        padding: 6px 2px;
        border: 1px solid #9a9a9a;
        border-radius: 10px;
        background: var(--chrome-face);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -1px 0 rgba(0,0,0,.04),
            0 1px 2px rgba(0,0,0,.07);
        text-decoration: none;
        color: #333;
        font: 700 8.5px/1 "Lucida Grande", sans-serif;
        letter-spacing: .01em;
        text-shadow: 0 1px 0 rgba(255,255,255,.8);
        -webkit-tap-highlight-color: transparent;
        transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle), background 180ms var(--ease-out);
    }
    .bottom-nav svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; fill: none; }
    .bottom-nav a:active, .bottom-nav span:active {
        transform: scale(0.93);
        box-shadow: inset 0 2px 3px rgba(0,0,0,.12);
        transition: transform 80ms var(--ease-press);
    }
    .bottom-nav .current {
        color: #fff;
        background:
            radial-gradient(ellipse 85% 55% at 50% 4%, rgba(255,255,255,.85), transparent 55%),
            var(--gel-blue);
        border-color: #3a8620;
        text-shadow: 0 -1px 1px rgba(25,70,15,.55);
        box-shadow: var(--gel-blue-depth);
    }
}

/* ============================================================
   SPACIOUS AQUA — the 2001 Apple layout language with the air
   turned up: fewer elements per screen, generous rhythm, calm
   hierarchy. Modern content patterns (pricing cards, service
   grids) built strictly from the old primitives: 1px borders,
   chrome headers, striped tables, gel buttons, blue links.
   ============================================================ */

/* ---- Aqua gel orbs — glossy dimensional icon marks, the
   QuickTime/iTools asset language ---- */
.orb {
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    background:
        radial-gradient(ellipse 62% 42% at 50% 16%, rgba(255,255,255,.95), rgba(255,255,255,.18) 62%, transparent 68%),
        radial-gradient(ellipse 75% 45% at 50% 100%, rgba(255,255,255,.38), transparent 62%),
        linear-gradient(to bottom, #7cd0e8 0%, #0f9dc4 48%, #06729a 55%, #3aaed1 100%);
    border: 1px solid rgba(5, 60, 80, .55);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.65),
        inset 0 -3px 6px rgba(4, 45, 60, .4),
        0 1px 1px rgba(0,0,0,.18),
        0 4px 10px rgba(6, 70, 95, .35);
}
.orb svg {
    width: 22px; height: 22px;
    stroke: #fff; stroke-width: 1.8; fill: none;
    filter: drop-shadow(0 1px 1px rgba(0, 25, 60, .55));
}
.orb.orb-green {
    background:
        radial-gradient(ellipse 62% 42% at 50% 16%, rgba(255,255,255,.95), rgba(255,255,255,.18) 62%, transparent 68%),
        radial-gradient(ellipse 75% 45% at 50% 100%, rgba(255,255,255,.38), transparent 62%),
        linear-gradient(to bottom, #a3dd85 0%, #57ab34 48%, #357a1d 55%, #6cc248 100%);
    border-color: rgba(30, 65, 15, .55);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.65),
        inset 0 -3px 6px rgba(20, 50, 10, .4),
        0 1px 1px rgba(0,0,0,.18),
        0 4px 10px rgba(25, 65, 15, .35);
}
.orb.orb-graphite {
    background:
        radial-gradient(ellipse 62% 42% at 50% 16%, rgba(255,255,255,.95), rgba(255,255,255,.2) 62%, transparent 68%),
        radial-gradient(ellipse 75% 45% at 50% 100%, rgba(255,255,255,.3), transparent 62%),
        linear-gradient(to bottom, #a9b2ba 0%, #78838d 48%, #566169 55%, #7e8993 100%);
    border-color: rgba(40, 48, 55, .55);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.65),
        inset 0 -3px 6px rgba(25, 32, 40, .4),
        0 1px 1px rgba(0,0,0,.18),
        0 4px 10px rgba(35, 45, 55, .35);
}
.orb.orb-lavender {
    background:
        radial-gradient(ellipse 62% 42% at 50% 16%, rgba(255,255,255,.95), rgba(255,255,255,.18) 62%, transparent 68%),
        radial-gradient(ellipse 75% 45% at 50% 100%, rgba(255,255,255,.38), transparent 62%),
        linear-gradient(to bottom, #c3b3d6 0%, #8e70a4 48%, #6f5482 55%, #a58fbc 100%);
    border-color: rgba(50, 35, 65, .55);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.65),
        inset 0 -3px 6px rgba(45, 30, 60, .4),
        0 1px 1px rgba(0,0,0,.18),
        0 4px 10px rgba(55, 40, 70, .35);
}
.orb.orb-berry {
    background:
        radial-gradient(ellipse 62% 42% at 50% 16%, rgba(255,255,255,.95), rgba(255,255,255,.18) 62%, transparent 68%),
        radial-gradient(ellipse 75% 45% at 50% 100%, rgba(255,255,255,.38), transparent 62%),
        linear-gradient(to bottom, #e8a3b3 0%, #cb3b57 48%, #9e2c43 55%, #d66980 100%);
    border-color: rgba(70, 15, 25, .55);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.65),
        inset 0 -3px 6px rgba(60, 10, 20, .4),
        0 1px 1px rgba(0,0,0,.18),
        0 4px 10px rgba(75, 15, 25, .35);
}
.orb.orb-tangerine {
    background:
        radial-gradient(ellipse 62% 42% at 50% 16%, rgba(255,255,255,.95), rgba(255,255,255,.18) 62%, transparent 68%),
        radial-gradient(ellipse 75% 45% at 50% 100%, rgba(255,255,255,.38), transparent 62%),
        linear-gradient(to bottom, #f5b978 0%, #df6b0a 48%, #b25508 55%, #e88a3d 100%);
    border-color: rgba(70, 35, 5, .55);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.65),
        inset 0 -3px 6px rgba(60, 30, 5, .4),
        0 1px 1px rgba(0,0,0,.18),
        0 4px 10px rgba(75, 40, 10, .35);
}

/* ---- Modern pricing display, old visual language: 1px bordered
   cards with chrome header bars, big quiet numbers, gel action ---- */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin: 30px 0 0;
    align-items: stretch;
}
.price-card {
    border: 1px solid #b6b6b6;
    border-radius: 3px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(0,0,0,.05);
    display: flex; flex-direction: column;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle);
}
@media (hover: hover) and (pointer: fine) {
    .price-card:hover {
        transform: translateY(-3px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            0 2px 3px rgba(0,0,0,.06),
            0 6px 14px rgba(0,0,0,.08);
    }
}
.price-hd {
    background: var(--chrome-face);
    border-bottom: 1px solid #b6b6b6;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    padding: 8px 14px;
    font-size: 12px; font-weight: 700; color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.price-pop {
    font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #14522e;
    background: var(--gel-green);
    border: 1px solid #57b97c;
    border-radius: 9px;
    padding: 1px 8px;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.8);
}
.price-bd { padding: 20px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.price-amt {
    font-family: var(--serif); font-weight: 400;
    font-size: 34px; line-height: 1; color: var(--fg);
    margin: 0 0 2px;
}
.price-amt span { font-family: var(--font); font-size: 11px; color: var(--muted); }
.price-was { font-size: 10.5px; color: #a0a0a0; margin: 0 0 14px; }
.price-feat { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; }
.price-feat li {
    font-size: 11.5px; line-height: 1.55; color: var(--fg-soft);
    padding: 6px 0;
    border-bottom: 1px dotted #e0e0e0;
}
.price-feat li:last-child { border-bottom: none; }
.price-ft { text-align: center; padding-top: 4px; }
.price-card .price-ft .cta-button { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.price-card.featured { border-color: #3a8620; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(35,85,20,.12), 0 4px 12px rgba(35,85,20,.12); }

/* Session-rate cards — same chrome-card family as the retainer tiers
   (shared hierarchy), but a visual half-step quieter since they're
   the building blocks, not the primary upsell. */
.rate-grid { margin-top: 16px; }
.price-card.rate .price-amt { font-size: 26px; margin-bottom: 4px; }
.price-card.rate .price-was { margin-bottom: 14px; }
.price-card.rate .price-bd { padding: 16px 16px 14px; }

/* ---- Quiet centered close — a single serif line and one action ---- */
.cta-quiet { text-align: center; margin: 84px 0; }
.cta-quiet p { font-family: var(--serif); font-size: 21px; color: var(--fg-soft); margin: 0 0 20px; }

/* ---- Spacious rhythm ---- */
.page { padding-top: 34px; }

/* ============================================================
   2001 LAYOUT GRAMMAR — the structural idioms from Apple.com
   circa 2001-03: editorial hero, promo tile row, two-column
   link directory with sidebar boxes, striped catalog tables,
   centered hairline footer.
   ============================================================ */

/* --- Editorial hero (Rip. Mix. Burn.): product shot left,
       giant serif headline right, timestamp underneath --- */
/* Shared marketing-style page intro (Film Services / Equipment /
   Assistant): small-caps kicker + light serif headline + lede,
   replacing a plain paragraph so inner pages open like a landing
   page rather than a reference doc. */
.page-intro { padding: 6px 0 6px; margin-bottom: 8px; }
.page-intro .kicker {
    font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 10px;
}
.page-intro .headline {
    font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.08;
    letter-spacing: -0.01em; color: var(--fg); margin: 0 0 14px;
}
.page-intro .lede { font-size: 14px; line-height: 1.65; color: var(--fg-soft); max-width: 640px; margin: 0; }
@media (max-width: 680px) { .page-intro .headline { font-size: 28px; } }

/* --- Rental date bar — set before browsing so availability makes
   sense in context, a brushed-chrome toolbar spanning the full
   content width above the sidebar + catalogue split. --- */
.rental-dates {
    display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 28px;
    background: var(--chrome-face);
    border: 1px solid var(--tile-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.05);
}
.rental-dates .form-field { margin-bottom: 0; flex: 0 0 auto; }
.rental-dates .form-field input { width: auto; min-width: 150px; }
.rental-dates-hint { font-size: 11.5px; color: var(--fg-soft); margin: 0 0 7px; }
@media (max-width: 680px) {
    .rental-dates { flex-direction: column; align-items: stretch; gap: 10px; }
    .rental-dates .form-field input { width: 100%; }
    .rental-dates-hint { margin: 2px 0 0; }
}

.home-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 26px;
    align-items: center;
    padding: 8px 0 0;
}
.home-hero .reel-card { margin: 0; }
.hero-headline {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 42px;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--fg);
    margin: 0 0 10px;
    border-bottom: none;
    padding-bottom: 0;
}
.hero-subline {
    font-family: var(--font);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fg-soft);
    margin: 0 0 18px;
}
.hero-meta {
    text-align: right;
    font-size: 10px;
    color: #999;
    margin: 8px 0 12px;
}

/* --- Promo tile row (Download iTunes / PowerBook G4 / ...) --- */
.promo-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 18px 0 0;
}
.promo-row.promo-row-3 { grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.promo {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border: 1px solid #9a9a9a;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.8);
    padding: 16px 13px 13px;
    text-decoration: none; color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle), border-color 180ms var(--ease-out);
}
.promo:active { transform: scale(0.985); transition: transform 80ms var(--ease-press); }
@media (hover: hover) and (pointer: fine) {
    .promo:hover {
        border-color: #999;
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 2px rgba(0,0,0,.06),
            0 1px 2px rgba(0,0,0,.06),
            0 3px 6px rgba(0,0,0,.06),
            0 8px 16px rgba(0,0,0,.05);
    }
}
.promo h3 {
    font-family: var(--font); font-weight: 700; font-size: 15px;
    letter-spacing: -0.005em;
    margin: 0 0 7px; color: var(--fg); line-height: 1.1;
}
.promo-ico { width: 30px; height: 30px; margin: 4px 0 10px; stroke: #444; stroke-width: 1.4; fill: none; }
.promo p { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; flex: 1; }
.promo-go { font-size: 11px; font-weight: 700; color: var(--link); }
@media (hover: hover) and (pointer: fine) { .promo:hover .promo-go { text-decoration: underline; } }

/* --- Two-column split: main content + sidebar boxes --- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
    margin-top: 8px;
}
.split.side-left { grid-template-columns: 232px minmax(0, 1fr); }
.split.help-split { grid-template-columns: 1fr 1fr; gap: 0 40px; }

/* Sidebar box with chrome header bar (Downloads / MPG Contents) */
.side-box {
    border: 1px solid #b0b0b0;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin-bottom: 16px;
    overflow: hidden;
}
.side-box-hd {
    background: var(--chrome-face);
    border-bottom: 1px solid #b0b0b0;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.side-box-bd { padding: 11px 12px 12px; font-size: 11px; line-height: 1.55; color: var(--fg); }
.side-box-bd p { font-size: 11px; margin: 0 0 9px; }
.side-box-bd p:last-child { margin-bottom: 0; }
.side-box-bd .price-line { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid #eee; }
.side-box-bd .price-line:last-child { border-bottom: none; }
.side-box-bd .price-line b { font-size: 11px; color: var(--fg); }
.side-box-bd .price-line span { white-space: nowrap; color: var(--muted); }
.side-links { list-style: none; padding: 0; margin: 0; }
.side-links li { margin: 0; padding: 4px 0; border-bottom: 1px dotted #ddd; font-size: 11px; }
.side-links li:last-child { border-bottom: none; }
.side-links a { color: var(--link); text-decoration: none; font-weight: 700; }
.side-links a:hover { text-decoration: underline; }

/* --- Link directory (the Hardware page's Desktops/Portables lists) --- */
.dir-group { margin: 0 0 20px; }
.dir-group > h4 {
    font-size: 12px; font-weight: 700; color: var(--fg);
    margin: 18px 0 8px; padding-bottom: 4px;
    border-bottom: 1px solid var(--hairline);
}
.dir-group > h4:first-child { margin-top: 0; }
.dir-item { font-size: 11px; line-height: 1.55; margin: 0 0 11px; color: var(--fg); }
.dir-item > a, .dir-item > b > a {
    color: var(--link); font-weight: 700; text-decoration: underline;
}
.dir-item > a:hover { color: #003d99; }
.dir-item .dir-name { color: var(--link); font-weight: 700; }
.dir-item .dir-credits { color: var(--muted); font-size: 10px; display: block; margin-top: 2px; }

/* Scannable role row: icon chip + bold title on its own line, so the
   directory reads at a glance instead of like running prose. */
.dir-item.role {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 13px 0; margin: 0;
    border-bottom: 1px solid var(--hairline);
}
.dir-item.role:last-child { border-bottom: none; }
.dir-icon {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface-low); border: 1px solid var(--tile-border);
    display: flex; align-items: center; justify-content: center;
}
.dir-icon svg { width: 17px; height: 17px; stroke: var(--fg-soft); stroke-width: 1.5; fill: none; }
.dir-item.role .dir-content { flex: 1; min-width: 0; }
.dir-item.role .dir-title {
    display: block; font-weight: 700; font-size: 13px; color: var(--fg); margin-bottom: 3px;
}
.dir-item.role .dir-title a { color: inherit; text-decoration: none; }
.dir-item.role .dir-title a:hover { color: var(--link); text-decoration: underline; }
.dir-item.role .dir-desc { font-size: 11.5px; line-height: 1.55; color: var(--fg-soft); margin: 0 0 4px; }
.dir-item.role .dir-credits { color: var(--muted); font-size: 10px; display: block; margin-top: 0; }

/* --- Striped catalog table (the Downloads table) --- */
.catalog-table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 8px 0 22px; border: 1px solid #b0b0b0; }
.catalog-table th {
    font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: #333;
    background: var(--chrome-face);
    border-bottom: 1px solid #999;
    padding: 5px 10px;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.catalog-table td { padding: 6px 10px; border-bottom: 1px solid #e2e8f2; vertical-align: top; }
.catalog-table tbody tr:nth-child(even) { background: #edf3fe; }
.catalog-table tbody tr:nth-child(odd) { background: #fff; }
.catalog-table tbody tr:hover { background: #e3ecfb; }
.catalog-table .cat-name { font-weight: 700; color: var(--fg); white-space: nowrap; }
.catalog-table .cat-price { font-weight: 700; white-space: nowrap; text-align: right; }
.catalog-table .cat-price span { font-weight: 400; color: var(--muted); }
.cat-status { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 7px; white-space: nowrap; }
.cat-status.available { color: #1d6b39; background: #dcf3e3; border: 1px solid #b2e0c2; }
.cat-status.booked { color: #8a5a00; background: #faedd2; border: 1px solid #e8d3a0; }
.cat-status.soon { color: #555; background: #ececec; border: 1px solid #d0d0d0; }

/* --- Video catalog table — same striped chrome-headed table, one
   column is a live looping preview instead of plain text --- */
.video-table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 8px 0 22px; border: 1px solid #b0b0b0; }
.video-table th {
    font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: #333;
    background: var(--chrome-face);
    border-bottom: 1px solid #999;
    padding: 5px 10px;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.video-table td { padding: 0; border-bottom: 1px solid #e2e8f2; vertical-align: top; }
/* Each entry is two physical rows (the full-width meta header, then
   the text+video row) sharing one explicit stripe-a/stripe-b class
   (see sync/render-portfolio.js) so the whole video section — meta
   bar, title, description, and thumbnail — alternates as one unit
   instead of the meta bar staying a fixed, non-alternating chrome
   color while only the body row alternated underneath it. */
.video-table tbody tr.stripe-a { background: #fff; }
.video-table tbody tr.stripe-b { background: #edf3fe; }
.video-table tbody tr:hover { background: #e3ecfb; }

/* Video fills its cell edge-to-edge — no gap, no rounding, a plain
   full-bleed product shot like the old catalogue thumbs — with a
   hairline seam separating it from the content cell. */
.video-table .vid-thumb-cell { width: 240px; border-left: 1px solid #8fb2c0; }
.video-thumb { width: 100%; aspect-ratio: 16/9; min-height: 135px; position: relative; overflow: hidden; background: #000; }
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; pointer-events: none; }

/* Play/expand overlay — the background iframe is a static poster
   frame (no autoplay), so this is the only way to actually open the
   video with sound and real controls. Hidden until hovered on
   pointer-fine devices; always shown on touch, since there's no
   hover state to reveal it there. */
.video-play {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0); border: none; padding: 0; margin: 0; cursor: pointer;
    opacity: 1;
    transition: background 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.video-play svg {
    width: 46px; height: 46px;
    stroke: #fff; stroke-width: 1.2; fill: rgba(0,0,0,.35);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    transition: transform 180ms var(--ease-settle), fill 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .video-play { opacity: 0; }
    .video-thumb:hover .video-play, .reel-video:hover .video-play, .video-play:focus-visible { opacity: 1; }
    .video-play:hover { background: rgba(0,0,0,.15); }
    .video-play:hover svg { transform: scale(1.08); fill: rgba(0,0,0,.55); }
}
.video-play:active svg { transform: scale(0.96); }

/* Full-width year/category bar — the same platinum row material and
   dimensions as `.experience-item.year-row` below. The flex layout
   lives on an inner wrapper, not the <td> itself: making the table
   cell flex breaks colspan. Keep the chrome on the cell so it spans
   both columns, and give it the same top/bottom hairlines and 23px
   rhythm as every other year divider on the CV. */
.video-table .vid-meta {
    padding: 0;
    position: relative; z-index: 2;
    background: var(--chrome-face) !important;
    border-top: 1px solid var(--tile-border);
    border-bottom: 1px solid var(--tile-border);
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.video-table .vid-meta-inner {
    min-height: 23px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 3px 12px;
}
.video-table .vid-body { padding: 12px 14px 14px; }
.video-table .vid-title { display: block; font-weight: 700; font-family: var(--font); color: var(--fg); font-size: 14px; letter-spacing: -0.005em; margin-bottom: 5px; }
.video-table .vid-desc { color: var(--fg-soft); font-size: 12px; line-height: 1.55; margin: 0; }
.video-table .vid-link { font-size: 10.5px; font-weight: 700; white-space: nowrap; text-align: right; }
@media (max-width: 680px) {
    .video-table .vid-title { font-size: 12.5px; }
    .video-table .vid-meta { font-size: 9px; }
}
@media (max-width: 680px) {
    .video-table, .video-table tbody, .video-table tr, .video-table td { display: block; width: auto; }
    .video-table tr { border-bottom: 1px solid #e2e8f2; }
    .video-table td { border-bottom: none; }
    .video-table .vid-thumb-cell { width: auto; border-left: none; border-top: 1px solid #8fb2c0; }
    .video-table .vid-link { text-align: left; margin-top: 6px; display: block; }
    .video-table thead { display: none; }
}

/* --- Video lightbox modal — real controls, unmuted, opened from the
   play-button overlay on any video thumbnail. --- */
.video-modal {
    display: none;
    position: fixed; inset: 0; z-index: 100;
    align-items: center; justify-content: center;
    padding: 26px;
}
.video-modal.open { display: flex; }
/* .visible is toggled by JS a frame after .open, and removed before
   .open — that's what actually drives the fade/scale transitions,
   since a display:none -> flex jump can't itself transition. */
.video-modal-backdrop {
    position: absolute; inset: 0; background: rgba(10,10,15,.82);
    opacity: 0; transition: opacity 320ms var(--ease-out);
}
.video-modal.visible .video-modal-backdrop { opacity: 1; }
.video-modal-inner {
    position: relative;
    width: 100%; max-width: 920px;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 20px 60px rgba(0,0,0,.35);
    overflow: hidden;
    transform-origin: center center;
    will-change: transform;
}
.video-modal-frame, .video-modal-frame iframe { width: 100%; height: 100%; border: none; }
.video-modal-close {
    position: absolute; top: -18px; right: -18px; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--chrome-face);
    border: 1px solid #9a9a9a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.3);
    font-size: 20px; line-height: 1; color: #333; cursor: pointer;
    opacity: 0; transition: opacity 200ms var(--ease-out);
}
.video-modal.visible .video-modal-close { opacity: 1; }
@media (max-width: 680px) {
    .video-modal { padding: 0; }
    .video-modal-inner { max-width: 100%; border-radius: 0; border: none; }
    .video-modal-close { top: 10px; right: 10px; }
}

/* --- Product shopping grid — transparent product photography (no
   plate, no card box, no hairlines). Each item carries an explicit
   checkbox (right-aligned) so the page behaves like a rental "shop":
   check the items you want, then send the request from the sidebar
   cart. Price and availability read as small brushed-aluminum badges. --- */
.gear-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 28px;
    margin: 24px 0 6px;
}
.gear-card {
    display: flex; gap: 16px; align-items: flex-start;
    position: relative;
    padding: 4px 0;
}
.gear-photo {
    flex: 0 0 88px; width: 88px; height: 88px;
    display: flex; align-items: center; justify-content: center;
}
.gear-photo svg { width: 62px; height: 62px; stroke-width: 1.2; fill: none; filter: drop-shadow(0 2px 3px rgba(20,30,40,.13)); }
.gear-card.is-camera .gear-photo svg { stroke: var(--imac-teal); }
.gear-card.is-lens .gear-photo svg { stroke: var(--imac-lavender); }
.gear-card.is-light .gear-photo svg { stroke: var(--imac-tangerine); }
.gear-card.is-data .gear-photo svg { stroke: var(--imac-berry); }
.gear-body { flex: 1; min-width: 0; padding-top: 2px; }
.gear-name { font-weight: 700; font-family: var(--font); color: var(--fg); font-size: 15px; display: block; margin-bottom: 6px; letter-spacing: -0.005em; }
.gear-spec { font-size: 12px; color: var(--fg-soft); line-height: 1.6; margin: 0 0 9px; }
.gear-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gear-check {
    margin-left: auto;
    flex: 0 0 22px; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.gear-check input {
    position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer;
}
.gear-check-box {
    width: 20px; height: 20px; border-radius: 5px;
    background:
        linear-gradient(to bottom, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(to bottom, #f2f4f6 0%, #dde1e5 48%, #c3c9ce 52%, #eef0f2 100%);
    border: 1px solid #9aa2a9;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.06);
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.gear-check-box svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.5; fill: none; opacity: 0; transform: scale(0.6); filter: drop-shadow(0 1px 1px rgba(25,70,15,.4)); transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-settle); }
.gear-check input:checked + .gear-check-box {
    background:
        radial-gradient(ellipse 85% 55% at 50% 8%, rgba(255,255,255,.75), transparent 55%),
        var(--gel-blue);
    border-color: #3a8620;
    box-shadow: var(--gel-blue-depth);
}
.gear-check input:checked + .gear-check-box svg { opacity: 1; transform: scale(1); }
.gear-check input:focus-visible + .gear-check-box { outline: 2px solid var(--link); outline-offset: 2px; }

/* Brushed-aluminum badges — same gel/chrome family as the nav tabs,
   scaled down for inline price + availability tags. */
.gear-price, .cat-status {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-weight: 700; font-size: 10.5px; letter-spacing: .01em;
    background:
        linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(to bottom, #f2f4f6 0%, #dde1e5 48%, #c9ced3 52%, #eef0f2 100%);
    border: 1px solid #b7bcc1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(0,0,0,.07), 0 1px 1px rgba(0,0,0,.05);
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
    color: #3a4148;
}
.gear-price span { font-weight: 400; color: #6b7278; margin-left: 2px; }
.cat-status.available { color: #1d6b39; }
.cat-status.booked { color: #8a5a00; }
.cat-status.soon { color: #5a5f63; }

/* --- Sidebar cart + rental request form --- */
.cart-summary { font-size: 11.5px; margin: 4px 0 12px; padding-top: 10px; border-top: 1px dotted #ccc; }

/* Selected-item "metal card" — a brushed-chrome header bar + bold
   white body, the same idiom as the gear-card meta bar and video
   table, so the currently-selected request reads as a distinct,
   prominent unit instead of a quiet line of text. */
.request-selected {
    border: 1px solid var(--tile-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    margin: 0 0 14px;
}
.request-selected .cart-empty { padding: 12px 14px; margin: 0; font-size: 11.5px; }
.request-selected-hd {
    padding: 5px 12px;
    background: var(--chrome-face);
    border-bottom: 1px solid var(--tile-border);
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.request-selected-bd {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 10px 12px;
}
.request-selected-name { display: block; font-weight: 700; font-size: 13.5px; color: var(--fg); line-height: 1.35; }
.request-selected-note { font-size: 11px; font-weight: 400; color: var(--fg-soft); line-height: 1.5; margin: 5px 0 0; }
.request-selected-bd .cart-remove { flex-shrink: 0; }
.cart-empty { color: var(--muted); margin: 0; }
.cart-count { font-weight: 700; color: var(--fg); margin: 0 0 6px; }
.cart-list { list-style: none; margin: 0 0 2px; padding: 0; }
.cart-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 5px 0; border-bottom: 1px dotted #ddd; color: var(--fg-soft);
}
.cart-list li:last-child { border-bottom: none; }
.cart-remove {
    background: none; border: none; padding: 0; margin: 0;
    color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer;
    font-family: var(--font);
}
.cart-remove:hover { color: #c0392b; }
.rental-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.form-field { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 9px; }
.form-field input, .form-field textarea {
    display: block; width: 100%; margin-top: 4px;
    font-family: var(--font); font-size: 12.5px; font-weight: 400; color: var(--fg);
    text-transform: none; letter-spacing: normal;
    padding: 6px 8px; border: 1px solid #b9b9b9; border-radius: 4px;
    background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--link); box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 0 0 2px rgba(58,123,213,.25); }
.form-row { display: flex; gap: 8px; }
.form-row .form-field { flex: 1; }
#rental-submit[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.rental-form > button[type="submit"] {
    display: block; width: 100%; text-align: center; box-sizing: border-box;
    margin-top: 18px; padding-top: 10px; padding-bottom: 10px;
}

/* --- Assistant request box — two columns on desktop (contact info
   left, service + calendar right), single column on mobile. --- */
.request-box { max-width: 720px; margin: 0 auto; }
.request-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 680px) {
    .request-cols { grid-template-columns: 1fr; gap: 4px; }
}

/* Month/day calendar — plain client-side date picker, no backend
   availability check. Day-view slot length is prefixed to whichever
   session size (quick/half/full) was last selected above. */
.cal-widget {
    margin-top: 10px;
    border: 1px solid var(--tile-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.cal-month-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px;
    background: var(--chrome-face);
    border-bottom: 1px solid var(--tile-border);
    font-size: 11.5px; font-weight: 700; color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.cal-nav {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #b9b9b9;
    font-size: 13px; line-height: 1; color: #333; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.cal-nav:active { transform: scale(0.9); }
.cal-dow {
    display: grid; grid-template-columns: repeat(7, 1fr);
    padding: 6px 6px 0;
    font-size: 9px; font-weight: 700; color: var(--muted); text-align: center;
    letter-spacing: .04em;
}
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 4px 6px 8px;
}
.cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; color: var(--fg);
    border: none; background: none; border-radius: 4px; cursor: pointer;
}
.cal-day:disabled { color: #ccc; cursor: default; }
.cal-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--link); }
@media (hover: hover) and (pointer: fine) {
    .cal-day:not(:disabled):hover { background: #eef4fa; }
}
.cal-day-empty { visibility: hidden; }
.cal-day-view { padding: 10px 12px 14px; }
.cal-back {
    background: none; border: none; padding: 0; margin: 0 0 8px;
    color: var(--link); font-size: 11px; font-weight: 700; cursor: pointer;
}
.cal-day-label { font-weight: 700; font-size: 13px; color: var(--fg); margin-bottom: 2px; }
.cal-slot-hint { font-size: 10.5px; color: var(--muted); margin-bottom: 9px; }
.cal-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-slot {
    padding: 5px 11px; border-radius: 9999px;
    font-size: 11px; font-weight: 700; color: #333;
    background: linear-gradient(to bottom, #fdfdfd 0%, #eef0f2 48%, #dfe3e6 52%, #f4f5f6 100%);
    border: 1px solid #b9b9b9;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    cursor: pointer;
}
.cal-slot.is-selected {
    background: var(--gel-blue); border-color: #3a8620; color: #fff;
    text-shadow: 0 -1px 1px rgba(25,70,15,.5);
}

/* --- "What I Help With" cards — a marketing-style grid using the
   same gel-orb icon mark as the homepage promo tiles, bold sans
   title, muted description. --- */
.feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 16px;
}
.feature-row {
    display: block;
    border: 1px solid #9a9a9a;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.8);
    padding: 20px 20px 22px;
    transition: transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-settle);
}
@media (hover: hover) and (pointer: fine) {
    .feature-row:hover {
        transform: translateY(-3px);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.06), 0 10px 20px rgba(0,0,0,.07);
    }
}
.feature-row .orb { margin-bottom: 14px; }
.feature-row h3 { font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: -0.005em; margin: 0 0 6px; }
.feature-row p { font-size: 12px; line-height: 1.6; color: var(--fg-soft); margin: 0; }
@media (max-width: 900px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
    .feature-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .feature-row { padding: 16px 14px 18px; }
    .feature-row .orb { width: 38px; height: 38px; margin-bottom: 10px; }
    .feature-row .orb svg { width: 18px; height: 18px; }
    .feature-row h3 { font-size: 13px; }
    .feature-row p { font-size: 11px; }
}

/* --- Big bordered promo panel (Get even more with a Mac) --- */
.panel-promo {
    border: 1px solid #9a9a9a;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.05);
    overflow: hidden;
}
.panel-promo-hd {
    font-family: var(--font); font-weight: 700; font-size: 14px;
    background: linear-gradient(to bottom, #fafafa, #efefef);
    border-bottom: 1px solid #ccc;
    padding: 11px 14px;
}
.panel-promo-bd { padding: 14px; font-size: 11px; line-height: 1.55; }
.panel-promo-bd .tier { padding: 9px 0; border-bottom: 1px solid #eee; }
.panel-promo-bd .tier:last-of-type { border-bottom: none; }
.panel-promo-bd .tier b { font-size: 12px; }
.panel-promo-bd .tier .tier-price { float: right; font-weight: 700; }
.panel-promo-bd .tier p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; }
.panel-promo-ft { padding: 12px 14px 14px; text-align: center; border-top: 1px solid #e4e4e4; background: #fafafa; }

/* --- Centered hairline footer (Site Map | Search Tips) --- */
.site-footer {
    max-width: var(--page-max);
    margin: 40px auto 0;
    padding: 18px 26px 0;
    border-top: 1px solid #ccc;
    text-align: center;
}
.site-footer .footer-nav { font-size: 10px; margin-bottom: 10px; }
.site-footer .footer-nav a { color: var(--link); text-decoration: underline; }
.site-footer .footer-nav .sep { color: #bbb; margin: 0 5px; }
/* The bottom nav already covers site navigation on mobile — a second
   footer with the same links right above it is redundant clutter. */
@media (max-width: 680px) { .site-footer { display: none; } }

@media (max-width: 680px) {
    .home-hero { grid-template-columns: 1fr; }
    .hero-headline { font-size: 32px; }
    .promo-row, .promo-row.promo-row-3 { grid-template-columns: 1fr; margin-top: 30px; }
    .split, .split.side-left, .split.help-split { grid-template-columns: 1fr; gap: 26px; }
    /* The sidebar (Inventory / Good to Know / Request boxes) sits
       BEFORE the main content in the DOM on side-left pages
       (Equipment) so the desktop grid can put it in a left rail —
       but on a single mobile column that buries the actual products
       under three sidebar boxes. Force main content first. */
    .split.side-left > aside { order: 2; }
    .split.side-left > div { order: 1; }
    .hero-meta { text-align: left; }

    /* Left-align the identity header on mobile — centered text reads
       fine on wide desktop but feels adrift on a narrow column. */
    .hero { text-align: left; padding-left: 20px; padding-right: 20px; }
    .hero .header-contact { justify-content: flex-start; }
    /* Mobile identity block is left-aligned, not centered, so the
       radial fade shifts toward the text instead of the desktop's
       centered ellipse — still fading on every side (left, right,
       top, and bottom), not just horizontally. */
    .hero::before {
        -webkit-mask-image: radial-gradient(ellipse 85% 100% at 32% 42%, black 20%, transparent 85%);
        mask-image: radial-gradient(ellipse 85% 100% at 32% 42%, black 20%, transparent 85%);
        opacity: 1;
    }

    h2 { margin-top: 56px; }
}

/* ============================================================
   Mobile: crew roles, "what I help with", and equipment items all
   fall back to their default hairline-divided stacked list — plain
   old-web scanning, no swipe/carousel gimmick.
   ============================================================ */
@media (max-width: 680px) {
    .gear-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ============================================================
   Motion — entrance stagger + reduced-motion safety net.
   Elements marked .reveal start hidden/offset; motion.js adds
   .in when they scroll into view.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 380ms var(--ease-out), transform 320ms var(--ease-settle);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .apple-bar a, .apple-bar span,
    .cta-button, .pill-button,
    .header-email, .offer,
    .service-card, .package-card, .item-card, .step-card,
    .bottom-nav a, .bottom-nav span {
        transition: none !important;
        transform: none !important;
    }
    .availability-indicator { animation: none; }
}

/* ============================================================
   CV PAGE — the original single-page portfolio's exact structure
   (full-width video cards, timeline experience rows, skills grid)
   reskinned in the vintage Aqua language. Same layout/spacing/
   interaction as the source, just different materials.
   ============================================================ */

/* Selected Works — one full-width video per row, hover reveals a
   caption overlay (category / year pills + title + description). */
.projects-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
.project-card {
    background: #fff; border: 1px solid #8fb2c0; border-radius: 9px;
    overflow: hidden; width: 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(20,60,90,.1), 0 4px 10px rgba(20,60,90,.08);
    transition: transform 220ms var(--ease-settle), box-shadow 220ms var(--ease-settle);
}
.project-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 2px 4px rgba(20,60,90,.14), 0 12px 26px rgba(20,80,120,.16); }
.project-card-video { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-bottom: 1px solid #8fb2c0; }
.project-card-video iframe { width: 100%; height: 100%; border: none; position: absolute; inset: 0; }

/* Caption sits BELOW the video as plain content, not overlaid on
   top of it — the old-web pattern: media, then a caption block. */
.project-card-overlay { padding: 14px 16px 16px; background: #fff; }
.project-card-category, .project-card-year {
    display: inline-block;
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 9999px; margin: 0 8px 8px 0;
}
.project-card-category {
    color: #12384a;
    background:
        radial-gradient(ellipse 90% 70% at 50% -20%, rgba(255,255,255,.9), transparent 60%),
        linear-gradient(to bottom, #eef8fc, #bfe2ef 45%, #8fc4d8 100%);
    border: 1px solid #7fb2c0;
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.project-card-year {
    color: var(--muted); background: var(--chrome-face);
    border: 1px solid var(--tile-border);
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.project-card-title {
    color: var(--fg); font-family: var(--serif); font-weight: 400; font-size: 20px;
    display: block; margin: 2px 0 6px;
}
.project-card-description {
    color: var(--fg-soft); font-size: 12.5px; line-height: 1.55; margin: 0;
}


/* Classic striped list rows — the same alternating blue/white
   idiom as the site's credit tables, not a soft-edged modern card. */
.experience-item {
    margin: 0; padding: 8px 12px; position: relative;
    border-left: 1px solid var(--tile-border);
    border-right: 1px solid var(--tile-border);
    border-bottom: 1px solid var(--hairline);
}
.experience-item:first-of-type { border-top: 1px solid var(--tile-border); }
/* Striped by an explicit stripe-a/stripe-b class assigned per real
   entry (see sync/render-experience.js), not :nth-child — year-row
   dividers sit in the same DOM flow but must not consume a slot in
   the alternation, or entries after a divider can repeat the color
   the previous group ended on instead of continuing to alternate. */
.experience-item.stripe-a { background: #ffffff; }
.experience-item.stripe-b { background: #edf3fe; }
.experience-item:last-child { border-bottom: 1px solid var(--tile-border); }
@media (hover: hover) and (pointer: fine) {
    .experience-item:hover { background: #e3ecfb; }
}
/* Year divider — its own slim row in the table, smaller than a
   real entry, instead of a badge floating on top of the content. */
.experience-item.year-row {
    padding: 3px 12px;
    font-family: var(--font); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); text-align: right;
    background: var(--chrome-face) !important;
    border-bottom: 1px solid var(--tile-border);
}
.experience-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.experience-content { flex: 1; padding-right: 16px; min-width: 0; }
.job-title { font-weight: 700; font-size: 13px; color: var(--fg); display: inline-block; letter-spacing: -0.005em; }
.company-name { font-weight: 400; font-size: 11.5px; color: var(--fg-soft); display: block; margin-top: 1px; }
.experience-details, .non-film-details { margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.experience-date {
    min-width: 84px; flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--muted);
    text-align: right; white-space: nowrap; padding-top: 1px;
}
.org-link { color: var(--link); text-decoration: none; }
.org-link:hover { text-decoration: underline; }

/* Skills grid — same striped-table list as the experience rows,
   two columns of rows in a contained bordered rectangle, not
   floating gradient cards. */
.skills-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-auto-flow: row; margin-top: 18px;
    border-top: 1px solid var(--tile-border);
    border-left: 1px solid var(--tile-border);
    border-right: 1px solid var(--tile-border);
}
.skills-item {
    border-right: 1px solid var(--tile-border);
    border-bottom: 1px solid var(--hairline);
    padding: 9px 12px;
}
.skills-grid > .skills-item:nth-child(4n+1),
.skills-grid > .skills-item:nth-child(4n+2) { background: #edf3fe; }
.skills-grid > .skills-item:nth-child(4n+3),
.skills-grid > .skills-item:nth-child(4n+4) { background: #ffffff; }
@media (hover: hover) and (pointer: fine) {
    .skills-item:hover { background: #e3ecfb; }
}
.skills-title { font-weight: 700; font-size: 12.5px; color: var(--fg); margin-bottom: 2px; display: flex; align-items: center; gap: 7px; }
.skills-description { font-size: 11px; color: var(--muted); line-height: 1.45; padding-left: 23px; }
.skill-icon, .section-icon { width: 15px; height: 15px; stroke: var(--link); stroke-width: 1.6; fill: none; flex-shrink: 0; }

@media (max-width: 680px) {
    .skills-grid { grid-template-columns: 1fr; }
    .skills-grid > .skills-item:nth-child(odd) { background: #edf3fe; }
    .skills-grid > .skills-item:nth-child(even) { background: #ffffff; }
}

.section { margin-bottom: 28px; }

@media (max-width: 680px) {
    .experience-item:not(.year-row) { padding-right: 66px; }
    .experience-title { flex-direction: column; gap: 2px; }
    .experience-date {
        position: absolute; top: 8px; right: 12px;
        min-width: 0; text-align: right; padding-top: 0;
    }
}