/*
 * CampOffice website: the Daylight look (html[data-look="daylight"]; docs/architecture/website.md, "Daylight").
 * Loaded after site.css and site-looks.css, only for this look. Option C of the three shown to the owner on
 * 2026-10-29 (warm white, Geist, the camp as a floating miniature) with Option A's motion and the office's own
 * colors: ink navy, the Color War four (blue, gold, red, green) and the gold "Talk to us".
 * Anything hidden or moved for motion is under html.dlm (set by site/motion, taken off if GSAP never runs), so
 * without a script, or for a reader who asked for less motion, every part is in place. No width over 360px.
 */

html[data-look="daylight"] {
    --pine: #141a33;
    --pine-deep: #0b1026;
    --ink: #141a33;
    --muted: #5b6075;
    --birch: #f6f3ec;
    --sky: #f6f3ec;
    --paper: #ffffff;
    --dl-bg: #f6f3ec;
    --dl-line: rgba(20, 26, 51, 0.1);
    --dl-soft: #a3a6b3;
    --dl-mint: #e7ecfb;
    --dl-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --dl-mono: "Geist Mono", ui-monospace, monospace;
    --dl-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
    background: var(--dl-bg);
}

[data-look="daylight"] .site { font-family: var(--dl-sans); background: var(--dl-bg); color: var(--ink); overflow-x: clip; }
[data-look="daylight"] .site h1, [data-look="daylight"] .site h2, [data-look="daylight"] .site h3,
[data-look="daylight"] .site h4, [data-look="daylight"] .site .brand { font-family: var(--dl-sans); letter-spacing: -0.035em; }
[data-look="daylight"] .wrap { max-width: 74rem; padding: 0 1.5rem; }
[data-look="daylight"] .section-h { font-weight: 700; letter-spacing: -0.04em; }

/* The four-color band along the top fills as the page scrolls (the office's band). */
[data-look="daylight"] .dl-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
[data-look="daylight"] .dl-progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg, var(--team-blue) 0 25%, var(--team-gold) 25% 50%, var(--team-red) 50% 75%, var(--team-green) 75%); }

/* Masthead: fixed, clear over the hero, frosted once the page moves. */
[data-look="daylight"] .masthead { position: fixed; inset: 0 0 auto; z-index: 50; padding: 0.85rem 0; background: transparent; transition: background 0.3s, box-shadow 0.3s; }
[data-look="daylight"] .masthead.dl-solid { background: rgba(246, 243, 236, 0.86); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 1px 0 var(--dl-line); }
[data-look="daylight"] .topnav a { font-weight: 500; color: var(--muted); }
[data-look="daylight"] .topnav a:hover, [data-look="daylight"] .topnav a[aria-current] { color: var(--ink); text-decoration: none; }
[data-look="daylight"] .site .topnav a.topnav-contact { background: var(--team-gold); color: var(--ink); font-weight: 600; padding: 0.6rem 1.15rem; }
[data-look="daylight"] .site .topnav a.topnav-contact:hover { background: #ffd666; }
[data-look="daylight"] #main { padding-top: 4.5rem; }

/* Buttons: pill-shaped, the gold one stays the main call to action. */
[data-look="daylight"] .btn { border-radius: 999px; font-family: var(--dl-sans); font-weight: 600; padding: 0.95rem 1.5rem; border-width: 0; box-shadow: none; transition: background 0.25s, box-shadow 0.25s, color 0.25s; }
[data-look="daylight"] .site a.btn-sun { background: var(--team-gold); color: var(--ink); }
[data-look="daylight"] .site a.btn-sun:hover { background: #ffd666; }
[data-look="daylight"] .site a.btn-line { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--dl-line); }
[data-look="daylight"] .site a.btn-line:hover { box-shadow: 0 0 0 1px var(--ink); }
[data-look="daylight"] .site a.btn-pine { background: var(--ink); color: #fff; }
[data-look="daylight"] .site a.btn-pine:hover { background: var(--team-blue); }

/* Shared words. Headings take their section's color, so they read on the dark bands too. */
.site .dl-h, .site .dl-card h3, .site .dl-season h3, .site .dl-assist h3, .site .dl-tour-end-h,
[data-look="daylight"] .reasons li h3, [data-look="daylight"] .dl-pricing .section-h { color: inherit; }
.dl-kick { display: inline-block; margin: 0; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--dl-mint); color: var(--team-blue); font: 500 0.8rem/1.2 var(--dl-mono); }
.site .dl-h { font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; margin: 1rem 0 0; }
.dl-lede { color: var(--muted); font-size: clamp(1.05rem, 1.35vw, 1.25rem); max-width: 36em; margin: 1.1rem 0 0; }
.dl-head { margin-bottom: 3.5rem; }
.dl-center { text-align: center; max-width: 52rem; margin-inline: auto; }
.dl-center .dl-lede { margin-inline: auto; }
.dl-soft { color: var(--dl-soft); }
.dl-pic { overflow: hidden; border-radius: 1rem; background: #eceae4; }
.dl-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* Hero */
.dl-hero { padding: clamp(2.5rem, 7vh, 5rem) 0 2rem; }
.dl-hero-grid { display: grid; gap: 2rem; align-items: center; text-align: center; }
.site .dl-hero h1 { font-size: clamp(2.9rem, 6.6vw, 6rem); line-height: 0.98; font-weight: 800; letter-spacing: -0.05em; margin: 1.3rem 0 0; }
.dl-hero .dl-lede { margin-inline: auto; }
.dl-hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.dl-hero .hero-note { color: var(--muted); font-size: 0.92rem; margin: 1rem auto 0; max-width: 40em; }
.dl-island { position: relative; width: min(38rem, 92%); margin: 0 auto; }
.dl-island img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.dl-island::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 2%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 26, 51, 0.28), transparent); filter: blur(6px); }
.dl-chip { position: absolute; z-index: 2; display: none; align-items: center; gap: 0.6rem; margin: 0; padding: 0.7rem 0.95rem; border-radius: 0.9rem; background: #fff; box-shadow: 0 1.2rem 2.5rem -1rem rgba(20, 26, 51, 0.3), 0 0 0 1px var(--dl-line); font-size: 0.88rem; font-weight: 600; text-align: left; white-space: nowrap; }
.dl-chip small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.dl-chip i { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; font-style: normal; }
.dl-chip-1 { left: -6%; top: 20%; } .dl-chip-1 i { background: #dff5ec; color: #11845a; }
.dl-chip-2 { right: -4%; top: 40%; } .dl-chip-2 i { background: #fff3d1; color: #a26a00; }
.dl-chip-3 { left: -2%; bottom: 14%; } .dl-chip-3 i { background: var(--dl-mint); color: var(--team-blue); }
@media (min-width: 62rem) {
    .dl-hero { min-height: 92vh; display: flex; align-items: center; }
    .dl-hero-grid { grid-template-columns: 1.05fr 1fr; text-align: left; }
    .site .dl-hero h1 { margin-top: 1.3rem; }
    .dl-hero .dl-lede, .dl-hero .hero-note { margin-inline: 0; }
    .dl-hero .hero-actions { justify-content: flex-start; }
    .dl-island { width: 100%; }
    .dl-chip { display: flex; }
}

/* The boys at camp, wide */
.dl-panorama { position: relative; overflow: hidden; margin: 2rem 0 0; aspect-ratio: 3 / 1; max-height: 70vh; }
.dl-panorama img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Words that roll by (and speed up with the scroll) */
.dl-marquee { overflow: hidden; background: var(--ink); color: #f6f3ec; padding: 1.4rem 0; }
.dl-marquee-track { display: flex; width: max-content; }
.dl-marquee span { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.dl-marquee span::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--team-gold); }
.dl-marquee span:nth-child(4n + 2)::after { background: var(--team-blue); }
.dl-marquee span:nth-child(4n + 3)::after { background: var(--team-red); }
.dl-marquee span:nth-child(4n)::after { background: var(--team-green); }

/* The office, growing to fill the screen */
.dl-zoom-pin { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(3rem, 8vw, 6rem) 1.5rem; }
.dl-device { width: 100%; max-width: 74rem; border-radius: 1.4rem; background: #10142a; padding: 0.7rem; box-shadow: 0 5rem 7rem -3rem rgba(20, 26, 51, 0.45); transform-origin: 50% 30%; }
.dl-device img { display: block; width: 100%; height: auto; border-radius: 0.8rem; }
.dl-caption { margin: 1.6rem 0 0; color: var(--muted); font-size: 0.9rem; text-align: center; }

/* What changes: stacked cards in the four team colors */
.dl-helps { padding: clamp(4rem, 9vw, 8rem) 0; }
.dl-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.dl-card { --team: var(--team-blue); display: grid; gap: 1.5rem; align-items: center; padding: 1.75rem; border-radius: 1.75rem; background: #fff; box-shadow: 0 0 0 1px var(--dl-line), 0 2rem 4rem -2.5rem rgba(20, 26, 51, 0.35); transform-origin: 50% 0; }
.dl-team-gold { --team: #e0a400; } .dl-team-red { --team: var(--team-red); } .dl-team-green { --team: var(--team-green); }
.dl-card:nth-child(even) { background: var(--ink); color: #fff; }
.dl-card:nth-child(even) p { color: rgba(255, 255, 255, 0.72); }
.site .dl-card:nth-child(even) .dl-more { color: #fff; }
.dl-num { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; font: 500 0.78rem var(--dl-mono); color: var(--team); background: color-mix(in srgb, var(--team) 14%, transparent); }
.site .dl-card h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.08; font-weight: 700; margin: 1rem 0 0.8rem; }
.dl-card p { color: var(--muted); margin: 0; }
.site .dl-more { display: inline-flex; gap: 0.5rem; margin-top: 1.2rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--team); padding-bottom: 0.15rem; }
.site .dl-more::after { content: "→"; transition: transform 0.3s; }
.site .dl-more:hover::after { transform: translateX(0.25rem); }
.dl-card .dl-pic { aspect-ratio: 16 / 10; box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.35); }
@media (min-width: 56rem) { .dl-card { grid-template-columns: 1fr 1.25fr; gap: 3rem; padding: 3rem; min-height: 26rem; } }
/* Wide screens with motion (site-daylight.js adds .dl-stacked): every card in one grid cell, each 14px lower and above the one
   before, so the stack is as tall as its tallest card plus the offsets, and the cards slide in over each other. */
.dl-stack.dl-stacked { gap: 0; }
.dl-stacked > .dl-card { grid-area: 1 / 1; margin-top: calc(var(--i, 0) * 14px); z-index: calc(var(--i, 0) + 1); position: relative; }

/* The office tour: a row that slides sideways while the section holds (wide screens with motion) */
.dl-tour { background: #fff; overflow: hidden; }
.dl-tour-pin { padding: clamp(4rem, 9vw, 7rem) 0; }
.dl-tour-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; margin-bottom: 3rem; }
.dl-tour-head .dl-lede { max-width: 30em; }
.dl-tour-track { list-style: none; margin: 0 auto; padding: 0 1.5rem; display: grid; gap: 2rem; max-width: 74rem; }
.dl-tour-card .dl-pic { aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--dl-line), 0 2rem 4rem -2.5rem rgba(20, 26, 51, 0.45); }
.dl-tour-card.dl-phone .dl-pic { display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(160deg, var(--dl-mint), #d6def7); }
.dl-tour-card.dl-phone .dl-pic img { width: auto; height: 92%; object-fit: contain; object-position: bottom; border: 0.45rem solid #111; border-bottom: 0; border-radius: 1.6rem 1.6rem 0 0; }
.site .dl-tour-card a { display: flex; gap: 1.2rem; align-items: baseline; margin-top: 1.3rem; color: var(--ink); text-decoration: none; }
.dl-tour-card a b { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.05em; color: var(--team-gold); }
.dl-tour-card a strong { display: block; font-size: 1.15rem; }
.dl-tour-card a span { color: var(--muted); }
.dl-tour-end { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.9rem; }
.dl-tour-end-h { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 0.5rem; }
@media (min-width: 48rem) { .dl-tour-track { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) {
    html.dlm .dl-tour-track { display: flex; width: max-content; max-width: none; padding: 0 max(1.5rem, calc((100vw - 74rem) / 2)); gap: 2.5rem; }
    html.dlm .dl-tour-card { width: min(46rem, 60vw); flex: none; }
    html.dlm .dl-tour-end { width: min(24rem, 40vw); flex: none; }
}

/* Everything that comes with CampOffice (the shared partial) */
[data-look="daylight"] .everything { padding: clamp(4rem, 9vw, 8rem) 0; background: transparent; }
[data-look="daylight"] .everything .section-h { text-align: center; font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.02; }
[data-look="daylight"] .everything .section-lede { text-align: center; margin-inline: auto; }
[data-look="daylight"] .reasons li { border-radius: 1.5rem; background: #fff; box-shadow: 0 0 0 1px var(--dl-line); padding: 1.75rem; border: 0; }
[data-look="daylight"] .reasons li:first-child { background: var(--ink); color: #fff; }
[data-look="daylight"] .reasons li:first-child p { color: rgba(255, 255, 255, 0.75); }
[data-look="daylight"] .everything-group { border-radius: 1.5rem; background: #fff; box-shadow: 0 0 0 1px var(--dl-line); padding: 1.75rem; }
[data-look="daylight"] .everything-group:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--group) 45%, #fff), 0 22px 40px -26px rgba(20, 26, 51, 0.5); }

/* Everything in the office (site/daylight-parts): a plain list with each picture under its part; on wide screens with motion
   the list scrolls on the left while the screen on the right holds and cross-fades to the part in view (site-daylight.js). */
.dl-parts { padding: clamp(4rem, 9vw, 8rem) 0; }
.dl-parts-list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.dl-part { border-radius: 1.5rem; background: #fff; box-shadow: 0 0 0 1px var(--dl-line); padding: 1.75rem; border-top: 0.3rem solid var(--group); }
.dl-part-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.site .dl-part h3 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; font-weight: 700; }
.site .dl-part h3 a { color: inherit; text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--group) 55%, transparent); }
.dl-part-icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 0.95rem; color: var(--group); background: color-mix(in srgb, var(--group) 14%, #fff); }
.dl-part-icon svg { width: 1.5rem; height: 1.5rem; }
.dl-parts .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; color: var(--muted); }
.dl-parts .ticks li { position: relative; padding-left: 1.6rem; }
.dl-parts .ticks li::before { content: ""; position: absolute; left: 0.1rem; top: 0.45em; width: 0.75rem; height: 0.42rem; border-left: 3px solid var(--group); border-bottom: 3px solid var(--group); transform: rotate(-45deg); }
.dl-part-pic { margin-top: 1.5rem; aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--dl-line); }
.dl-pic.dl-phone { display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(160deg, var(--dl-mint), #d6def7); }
.dl-pic.dl-phone img { width: auto; height: 92%; object-fit: contain; object-position: bottom; border: 0.45rem solid #111; border-bottom: 0; border-radius: 1.6rem 1.6rem 0 0; }
.dl-parts-stage { display: none; }
.dl-parts-note { margin: 2.5rem auto 0; max-width: 40rem; text-align: center; color: var(--muted); }
@media (min-width: 62rem) {
    html.dlm .dl-parts-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; margin-top: 3rem; }
    html.dlm .dl-parts-list { margin: 0; gap: 0; padding-bottom: 20vh; }
    html.dlm .dl-part { background: transparent; box-shadow: none; border-radius: 0; border-top: 0; padding: 0; min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
        opacity: 0.32; transition: opacity 0.5s var(--dl-ease); }
    html.dlm .dl-part.is-on { opacity: 1; }
    html.dlm .dl-part-pic { display: none; }
    html.dlm .site .dl-part h3, html.dlm .dl-part h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
    html.dlm .dl-parts-stage { display: grid; height: calc(100vh - 8rem); max-height: 44rem; align-items: center; }
    html.dlm .dl-parts-shot { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(1.5rem) scale(0.97); transition: opacity 0.6s var(--dl-ease), transform 0.8s var(--dl-ease); }
    html.dlm .dl-parts-shot.is-on { opacity: 1; transform: none; }
    html.dlm .dl-parts-shot .dl-pic { aspect-ratio: 16 / 10; border-radius: 1.5rem; box-shadow: 0 0 0 1px var(--dl-line), 0 2rem 4rem -2.5rem rgba(20, 26, 51, 0.45); border-top: 0.35rem solid var(--group); }
    html.dlm .dl-parts-shot figcaption { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; font-weight: 600; }
    html.dlm .dl-parts-shot figcaption .dl-part-icon { width: 2.4rem; height: 2.4rem; border-radius: 0.75rem; }
}

/* The camp year: the seasons slide by while a gold line fills (wide screens with motion) */
.dl-year { background: var(--ink); color: #fff; border-radius: 2.5rem; margin: 0 0.75rem; overflow: hidden; padding-bottom: clamp(4rem, 8vw, 6rem); }
.dl-year .dl-kick { background: rgba(255, 255, 255, 0.1); color: var(--team-gold); }
.dl-year .dl-lede { color: rgba(255, 255, 255, 0.65); }
.dl-year-pin { padding: clamp(4rem, 9vw, 7rem) 0 3rem; }
.dl-rail { height: 2px; margin: 3rem 0 0; background: rgba(255, 255, 255, 0.14); }
.dl-rail i { display: block; height: 100%; background: var(--team-gold); transform-origin: left; }
.dl-seasons { list-style: none; margin: 3rem auto 0; padding: 0 1.5rem; display: grid; gap: 2.5rem; max-width: 74rem; }
.dl-season { display: grid; gap: 1.5rem; align-items: center; }
.dl-season .dl-pic { aspect-ratio: 4 / 3; }
.dl-when { margin: 0; font: 500 0.8rem var(--dl-mono); color: var(--team-gold); text-transform: uppercase; letter-spacing: 0.06em; }
.site .dl-season h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.05; margin: 0.7rem 0 0.9rem; }
.dl-season p:last-child { color: rgba(255, 255, 255, 0.7); margin: 0; }
@media (min-width: 48rem) { .dl-season { grid-template-columns: 1.1fr 1fr; } }
@media (min-width: 62rem) {
    html.dlm .dl-seasons { display: flex; width: max-content; max-width: none; padding: 0 max(1.5rem, calc((100vw - 74rem) / 2)); gap: 3.5rem; }
    html.dlm .dl-season { width: min(54rem, 70vw); flex: none; }
}
.dl-assist { display: grid; gap: 2rem; align-items: center; margin-top: 1rem; padding: 2rem; border-radius: 1.6rem; background: #fff; color: var(--ink); }
.site .dl-assist h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0.9rem 0 0.6rem; }
.dl-assist p { color: var(--muted); }
.site .dl-assist a { color: var(--team-blue); font-weight: 600; }
.dl-bubble { margin: 0; padding: 1.1rem 1.3rem; min-height: 4.6em; border-radius: 1.3rem 1.3rem 0.4rem 1.3rem; background: var(--dl-bg); font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.dl-bubble small { display: block; margin-bottom: 0.3rem; font: 500 0.75rem var(--dl-mono); color: var(--muted); }
.dl-reply { margin: 0.8rem 0 0 12%; padding: 1rem 1.2rem; border-radius: 1.3rem 1.3rem 1.3rem 0.4rem; background: var(--ink); color: #fff; font-size: 0.95rem; }
.dl-reply b { color: var(--team-gold); }
.dl-ok { display: inline-block; margin-top: 0.6rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--team-gold); color: var(--ink); font-weight: 600; font-size: 0.85rem; }
@media (min-width: 56rem) { .dl-assist { grid-template-columns: 1fr 1.15fr; padding: 2.5rem; } }

/* Pricing over the camp at dusk */
.dl-pricing { position: relative; overflow: hidden; padding: clamp(5rem, 11vw, 9rem) 0; background: #0b1026; color: #fff; }
.dl-pricing-bg { position: absolute; inset: -10% 0 auto; width: 100%; height: 120%; object-fit: cover; opacity: 0.45; }
.dl-pricing::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 16, 38, 0.92) 0%, rgba(11, 16, 38, 0.55) 30%, rgba(11, 16, 38, 0.85) 100%); }
.dl-pricing { margin-top: 0.75rem; border-radius: 2.5rem; margin-inline: 0.75rem; }
.dl-pricing .wrap { position: relative; z-index: 2; }
.dl-pricing .dl-kick { background: rgba(255, 255, 255, 0.12); color: var(--team-gold); }
.dl-pricing .dl-lede { color: rgba(255, 255, 255, 0.75); }
[data-look="daylight"] .dl-pricing .offer { border-radius: 1.75rem; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
[data-look="daylight"] .dl-pricing .offer-full { box-shadow: 0 0 0 2px var(--team-gold), 0 2.5rem 5rem -2rem rgba(255, 200, 58, 0.45); }
[data-look="daylight"] .dl-pricing .offer-price strong { font-family: var(--dl-sans); letter-spacing: -0.05em; }
[data-look="daylight"] .dl-pricing .offers-extra { color: rgba(255, 255, 255, 0.8); }
[data-look="daylight"] .site .dl-pricing .offers-extra a, [data-look="daylight"] .site .dl-pricing .pricing-more a { color: var(--team-gold); }

/* Questions */
[data-look="daylight"] .dl-faq { background: transparent; padding: clamp(4rem, 9vw, 7rem) 0; }
[data-look="daylight"] .dl-faq .dl-h { text-align: center; margin-bottom: 2.5rem; }
[data-look="daylight"] .dl-faq details { border: 0; border-radius: 1.1rem; background: #fff; margin-bottom: 0.65rem; padding: 0 1.4rem; box-shadow: 0 0 0 1px var(--dl-line); transition: box-shadow 0.3s; }
[data-look="daylight"] .dl-faq details[open] { box-shadow: 0 0 0 2px var(--team-blue); }

/* Tell us about your camp: the gold band, as on the site before */
.dl-contact { margin: 0 0.75rem 0.75rem; border-radius: 2.5rem; background: var(--team-gold); color: var(--ink); overflow: hidden; transform-origin: 50% 100%; }
.dl-contact-grid { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(4rem, 9vw, 7rem); }
.dl-contact .dl-lede { color: rgba(20, 26, 51, 0.75); margin-bottom: 2rem; }
.site .dl-contact a:not(.btn) { color: var(--ink); font-weight: 600; }
.dl-contact-art img { display: block; width: 100%; height: auto; border-radius: 1.5rem; transform: rotate(3deg); box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.45); }
@media (min-width: 56rem) { .dl-contact-grid { grid-template-columns: 1.1fr 1fr; } }

[data-look="daylight"] .dl-form { margin: 0 0 1.25rem; padding: 1.5rem; border-radius: 1.5rem; background: #fff; box-shadow: 0 2rem 4rem -2rem rgba(20, 26, 51, 0.35); }
[data-look="daylight"] .dl-form .site-form { max-width: none; margin: 0; }
[data-look="daylight"] .site-form input:not([type="checkbox"]), [data-look="daylight"] .site-form textarea { border-radius: 0.75rem; font-family: var(--dl-sans); }
[data-look="daylight"] .dl-form .field-help, [data-look="daylight"] .dl-form .choice { font-size: 0.85rem; }
@media (min-width: 40rem) { [data-look="daylight"] .dl-form .site-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; } [data-look="daylight"] .dl-form .site-form > :is(.field:has(textarea), .consent, button, .field-help, .hp) { grid-column: 1 / -1; } [data-look="daylight"] .dl-form .site-form > button { justify-self: start; } }
@media (min-width: 56rem) { .dl-contact-grid { align-items: start; } .dl-contact-art { position: relative; top: 4rem; } }

/* Footer: navy, as on the site before, with the big name rising at the foot */
[data-look="daylight"] .foot { overflow: hidden; }
[data-look="daylight"] .foot::after { content: "CampOffice"; display: block; text-align: center; font: 800 clamp(4rem, 17vw, 15rem)/0.8 var(--dl-sans); letter-spacing: -0.06em; color: rgba(255, 255, 255, 0.06); margin-top: 2.5rem; white-space: nowrap; }

/* Inner pages pick up the same type and colors through the variables above; their tops sit under the masthead. */
[data-look="daylight"] .page-head { background: transparent; }

/* Motion: hidden only under html.dlm, until site-daylight.js shows it. */
html.dlm .dl-rv { opacity: 0; }
html.dlm .dl-split { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    [data-look="daylight"] .masthead, [data-look="daylight"] .site .dl-more::after { transition: none; }
}