/* Field kit: black hoodie, tan pants, camo hat, leather strap. */
:root {
  --ink: #111110;
  --coal: #1b1a17;
  --char: #26241f;
  --sand: #ece6da;
  --paper: #f5f1e8;
  --tan: #c9b48b;
  --tan-deep: #a8915f;
  --olive: #5a5c3c;
  --leather: #8f5f36;
  --dust: #a49d8d;
  --line-dk: #34312a;
  --line-lt: #d5ccba;
  --rec: #d0312d;
  --head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: 20px;
  --section: 80px;
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gutter: 40px; --section: 128px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--sand); font-family: var(--body); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (min-width: 760px) { body { font-size: 1.15rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--tan); color: var(--ink); }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.section { padding-block: var(--section); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: .95; margin: 0; text-transform: uppercase; text-wrap: balance; letter-spacing: -.005em; }
h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1; }
p { margin: 0; }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; text-wrap: pretty; }
.tag { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tan); display: inline-flex; align-items: center; gap: 10px; }
.tag .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 4px rgba(208,49,45,.18); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; background: var(--tan); color: var(--ink); text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--tan); transition: background .35s ease, color .35s ease, border-color .35s ease; }
.btn:hover { background: var(--sand); border-color: var(--sand); }
.btn.ghost { background: transparent; color: var(--sand); border-color: rgba(236,230,218,.45); }
.btn.ghost:hover { border-color: var(--sand); background: rgba(236,230,218,.08); }
.btn.dark { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.btn.dark:hover { background: var(--char); border-color: var(--char); }

/* Header */
.top { position: absolute; inset: 0 0 auto; z-index: 5; padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 16px; }
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1; }
.brand b { font-family: var(--head); font-weight: 800; font-size: 1.45rem; letter-spacing: .08em; text-transform: uppercase; }
.brand small { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); margin-top: 5px; }
.top nav { display: flex; align-items: center; gap: 24px; }
.top nav a { font-family: var(--head); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; opacity: .85; }
.top nav a:hover { opacity: 1; }
.top nav a.book { opacity: 1; padding: 9px 16px; border: 2px solid var(--tan); color: var(--tan); }
.top nav a.book:hover { background: var(--tan); color: var(--ink); }
@media (max-width: 759px) { .top nav a:not(.book) { display: none; } }

/* Hero */
.hero { position: relative; min-height: min(100svh, 940px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,16,.96) 0%, rgba(17,17,16,.82) 30%, rgba(17,17,16,.25) 62%, rgba(17,17,16,.55) 100%), linear-gradient(to right, rgba(17,17,16,.7) 0%, rgba(17,17,16,.2) 55%, rgba(17,17,16,0) 75%); }
.frame { position: absolute; inset: 96px max(var(--gutter), env(safe-area-inset-right, 0px)) 28px max(var(--gutter), env(safe-area-inset-left, 0px)); z-index: 2; pointer-events: none; }
.frame i { position: absolute; width: 28px; height: 28px; border-color: rgba(236,230,218,.7); border-style: solid; border-width: 0; }
.frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.hero .wrap { position: relative; z-index: 3; padding-block: 140px 72px; }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 6.6rem); max-width: 15ch; margin-top: 22px; }
.hero h1 em { font-style: normal; color: var(--tan); }
.hero .lede { margin-top: 24px; max-width: 46ch; color: rgba(236,230,218,.9); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .actions .btn { flex: 1 1 180px; max-width: 240px; }

.kit { border-block: 1px solid var(--line-dk); background: var(--coal); }
.kit .wrap { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; padding-block: 18px; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.kit span b { color: var(--tan); font-weight: 500; }

/* Work */
.work .head { display: grid; gap: 22px; max-width: 760px; }
.work .head p { color: rgba(236,230,218,.78); }
.tabs { display: flex; gap: 8px; margin-top: 44px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; appearance: none; cursor: pointer; background: transparent; color: var(--dust); border: 1px solid var(--line-dk); padding: 12px 18px; font-family: var(--head); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
.tabs button span { font-family: var(--mono); font-size: .7rem; margin-right: 8px; color: var(--leather); }
.tabs button[aria-selected="true"] { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.tabs button:hover:not([aria-selected="true"]) { color: var(--sand); border-color: var(--dust); }
.grid { display: grid; gap: 8px; margin-top: 16px; grid-template-columns: 1fr 1fr; }
.grid figure { margin: 0; position: relative; overflow: hidden; background: var(--coal); min-width: 0; }
.grid figure:first-child { grid-column: 1 / -1; }
.grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.grid figure:first-child img { aspect-ratio: 16 / 9; }
.grid figure:hover img { transform: scale(1.03); }
@media (min-width: 900px) {
  .grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
  .grid figure:first-child { grid-column: 1; grid-row: 1 / 3; }
  .grid figure:first-child img { aspect-ratio: auto; }
  .grid figure:nth-child(4) { grid-column: 2 / 4; }
  .grid figure:nth-child(4) img { aspect-ratio: 21 / 9; }
}
.grid[hidden] { display: none; }
.world-note { margin-top: 18px; color: var(--dust); max-width: 60ch; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .grid img { transition: none; } }

/* Day rate */
.day { background: var(--paper); color: var(--ink); }
.day .tag { color: var(--leather); }
.day .split { display: grid; gap: 48px; }
@media (min-width: 960px) { .day .split { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }
.day .intro p { margin-top: 22px; color: #4a463d; max-width: 46ch; }
.ticket { background: var(--ink); color: var(--sand); padding: 32px 28px 28px; position: relative; }
.ticket .price { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.ticket .price b { font-family: var(--head); font-weight: 800; font-size: clamp(4rem, 9vw, 6rem); line-height: .9; color: var(--tan); }
.ticket .price span { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.ticket ul { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line-dk); }
.ticket li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-dk); }
.ticket li span:last-child { font-family: var(--mono); font-size: .8rem; color: var(--tan); text-align: right; align-self: center; }
.ticket .btn { width: 100%; margin-top: 26px; }
.ticket .fine { margin-top: 14px; font-size: .9rem; color: var(--dust); }
.addons { margin-top: 56px; }
.addons h3 { margin-bottom: 6px; }
.addons > p { color: #4a463d; }
.addons ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
@media (min-width: 760px) { .addons ul { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.addons li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line-lt); }
.addons li b { font-family: var(--head); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; }
.addons li em { font-style: normal; font-family: var(--mono); font-size: .8rem; color: var(--leather); align-self: center; text-align: right; }
.addons li p { grid-column: 1 / -1; color: #5b564b; font-size: .98rem; }
.steps3 { display: grid; gap: 1px; background: var(--line-lt); margin-top: 56px; border: 1px solid var(--line-lt); }
@media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.steps3 div { background: var(--paper); padding: 22px 22px 24px; }
.steps3 .n { font-family: var(--mono); font-size: .8rem; color: var(--leather); letter-spacing: .14em; }
.steps3 h3 { margin-top: 10px; }
.steps3 p { margin-top: 8px; color: #5b564b; font-size: 1rem; }
.money { margin-top: 28px; font-family: var(--head); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; }

/* AI */
.ai .head { display: grid; gap: 24px; }
@media (min-width: 960px) { .ai .head { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: end; } }
.ai .head h2 em { font-style: normal; color: var(--tan); }
.ai .copy { display: grid; gap: 1em; color: rgba(236,230,218,.82); }
.ai .copy strong { color: var(--sand); font-weight: 600; }
.flow { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: f; }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow li { border-top: 2px solid var(--tan); padding-top: 16px; }
.flow .n { font-family: var(--mono); font-size: .78rem; color: var(--tan); letter-spacing: .14em; }
.flow h3 { margin-top: 8px; }
.flow p { margin-top: 8px; color: var(--dust); font-size: 1rem; }
.example { margin-top: 72px; display: grid; gap: 28px; background: var(--coal); border: 1px solid var(--line-dk); padding: 14px; }
@media (min-width: 960px) { .example { grid-template-columns: 1.35fr 1fr; align-items: center; gap: 44px; padding: 18px 44px 18px 18px; } }
.browser { background: #0b0b0a; border: 1px solid var(--line-dk); min-width: 0; }
.browser .bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line-dk); }
.browser .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--char); }
.browser .bar span { margin-left: 10px; font-family: var(--mono); font-size: .72rem; color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.example .txt { padding: 6px 8px 14px; }
.example .txt h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 12px; }
.example .txt p { margin-top: 12px; color: rgba(236,230,218,.78); }
.example .txt a.more { display: inline-block; margin-top: 20px; font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); text-decoration: none; border-bottom: 2px solid var(--tan); padding-bottom: 2px; }
.example .txt a.more:hover { color: var(--sand); border-color: var(--sand); }
.next { margin-top: 14px; padding: 22px 0 0; color: var(--dust); font-size: 1rem; }

/* Stuck */
.stuck { background: var(--tan); color: var(--ink); }
.stuck .wrap { display: grid; gap: 28px; }
@media (min-width: 960px) { .stuck .wrap { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
.stuck .tag { color: var(--ink); }
.stuck p.lede { margin-top: 18px; max-width: 44ch; }
.promise { border-left: 6px solid var(--ink); padding-left: 24px; }
.promise p { font-family: var(--head); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.promise .btn { margin-top: 26px; }

/* About */
.about { background: var(--paper); color: var(--ink); }
.about .split { display: grid; gap: 40px; }
@media (min-width: 960px) { .about .split { grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; } }
.about figure { margin: 0; position: relative; }
.about figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 50%; }
.about figcaption { margin-top: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leather); }
.about .tag { color: var(--leather); }
.about h2 { margin-top: 16px; }
.about .story { display: grid; gap: 1em; margin-top: 26px; color: #3d3a33; }
.about .uniform { margin-top: 28px; padding: 18px 20px; background: var(--sand); border-left: 6px solid var(--olive); color: var(--ink); }
.verse { margin-top: 28px; font-family: var(--head); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.verse cite { display: block; margin-top: 6px; font-family: var(--mono); font-style: normal; font-weight: 500; font-size: .74rem; letter-spacing: .14em; color: var(--leather); }

/* Contact */
.contact .wrap { display: grid; gap: 36px; }
@media (min-width: 960px) { .contact .wrap { grid-template-columns: 1fr 1fr; align-items: end; gap: 72px; } }
.contact p.lede { margin-top: 20px; color: rgba(236,230,218,.78); max-width: 42ch; }
.reach { display: grid; gap: 6px; }
.reach a { font-family: var(--head); font-weight: 800; font-size: clamp(2.2rem, 6.4vw, 4rem); line-height: 1; text-decoration: none; color: var(--tan); overflow-wrap: anywhere; }
.reach a.email { text-transform: none; font-size: clamp(1.6rem, 4.4vw, 2.7rem); color: var(--sand); }
.reach a:hover { color: var(--sand); }
.reach a.email:hover { color: var(--tan); }
.reach .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

footer { border-top: 1px solid var(--line-dk); color: var(--dust); font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { text-decoration: none; font-family: var(--head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
footer a:hover { color: var(--tan); }

/* ---------- Multi-page additions ---------- */
.top.solid { position: sticky; top: env(safe-area-inset-top, 0px); background: rgba(17,17,16,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-dk); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ink); }
.top nav a[aria-current="page"] { opacity: 1; color: var(--tan); }

.page-hero { position: relative; overflow: hidden; background: var(--coal); border-bottom: 1px solid var(--line-dk); }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,16,.95), rgba(17,17,16,.35)); }
.page-hero .wrap { position: relative; z-index: 2; padding-block: 88px 64px; }
.page-hero h1 { font-size: clamp(2.8rem, 7vw, 6rem); margin-top: 18px; max-width: 16ch; }
.page-hero .lede { margin-top: 20px; max-width: 52ch; color: rgba(236,230,218,.86); }

.band-light { background: var(--paper); color: var(--ink); }
.band-light .tag { color: var(--leather); }
.band-light .muted { color: #5b564b; }
.band-tan { background: var(--tan); color: var(--ink); }
.band-tan .tag { color: var(--ink); }
.muted { color: var(--dust); }
.stack { display: grid; gap: 1em; }
.two { display: grid; gap: 40px; }
@media (min-width: 960px) { .two { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }

/* Teasers on home */
.cards { display: grid; gap: 12px; margin-top: 44px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; text-decoration: none; background: var(--coal); border: 1px solid var(--line-dk); min-width: 0; transition: border-color .35s ease; }
.card:hover { border-color: var(--tan); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card div { padding: 20px 20px 22px; display: grid; gap: 8px; }
.card h3 { font-size: 1.6rem; }
.card p { color: var(--dust); font-size: 1rem; }
.card .go { font-family: var(--head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); margin-top: 6px; }
.band-light .card { background: var(--sand); border-color: var(--line-lt); }
.band-light .card p { color: #5b564b; }
.band-light .card .go { color: var(--leather); }

/* Work pages */
.world { padding-block: 56px; border-top: 1px solid var(--line-dk); }
.world:first-of-type { border-top: 0; }
.world .lede { margin-top: 14px; max-width: 58ch; color: rgba(236,230,218,.8); }
.world .grid { margin-top: 28px; }

/* Video note */
.video-note { margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line-lt); background: var(--sand); display: grid; gap: 6px; }
.video-note b { font-family: var(--head); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; }

/* Launch timeline */
.examples { display: grid; gap: 12px; margin-top: 40px; }
@media (min-width: 900px) { .examples { grid-template-columns: repeat(5, 1fr); } }
.ex { border: 1px solid var(--line-dk); padding: 18px; display: grid; gap: 8px; align-content: start; background: var(--coal); min-width: 0; }
.ex .num { font-family: var(--head); font-weight: 800; font-size: 2.6rem; line-height: .9; color: var(--tan); }
.ex h3 { font-size: 1.3rem; }
.ex p { color: var(--dust); font-size: .95rem; }
.ex .state { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.ex.open { border-style: dashed; border-color: var(--tan); background: transparent; }
.timeline { list-style: none; margin: 40px 0 0; padding: 0; border-left: 2px solid var(--tan); display: grid; gap: 28px; }
.timeline li { padding-left: 24px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; background: var(--ink); border: 2px solid var(--tan); border-radius: 50%; }
.timeline li.now::before { background: var(--rec); border-color: var(--rec); }
.timeline .when { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tan); }
.timeline h3 { margin-top: 6px; }
.timeline p { margin-top: 6px; color: rgba(236,230,218,.78); max-width: 60ch; }

/* Course */
.learn { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.learn li { display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line-lt); }
.learn .n { font-family: var(--mono); font-size: .8rem; color: var(--leather); padding-top: 4px; }
.learn b { font-family: var(--head); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; }
.learn p { grid-column: 2; color: #5b564b; font-size: 1rem; }
.join { background: var(--ink); color: var(--sand); padding: 28px; display: grid; gap: 14px; }
.join .btn { width: 100%; }
.join p { color: var(--dust); font-size: .95rem; }

/* Field notes */
.notes { list-style: none; margin: 40px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.notes li a { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line-lt); text-decoration: none; }
@media (min-width: 760px) { .notes li a { grid-template-columns: 70px 1fr 160px; align-items: baseline; gap: 20px; } }
.notes .n { font-family: var(--mono); font-size: .8rem; color: var(--leather); }
.notes h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.notes li a:hover h3 { color: var(--leather); }
.notes .cat { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #7a7466; }
.notes p { color: #5b564b; font-size: 1rem; grid-column: 2; }

.article { background: var(--paper); color: var(--ink); }
.article .wrap { max-width: 820px; }
.article .crumbs { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leather); }
.article .crumbs a { text-decoration: none; }
.article h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-top: 18px; }
.article .meta { margin-top: 16px; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #7a7466; }
.answer { margin-top: 32px; padding: 22px 24px; background: var(--ink); color: var(--sand); }
.answer .tag { color: var(--tan); }
.answer p { margin-top: 10px; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; }
.body { margin-top: 36px; display: grid; gap: 1.1em; color: #2f2c26; }
.body h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: .8em; color: var(--ink); }
.body ul, .body ol { margin: 0; padding-left: 1.2em; display: grid; gap: .5em; }
.body strong { color: var(--ink); }
.body a { color: var(--leather); }
.signoff { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-lt); display: grid; gap: 16px; }
.signoff .btn { justify-self: start; }

/* CTA band */
.cta { border-top: 1px solid var(--line-dk); }
.cta .wrap { display: grid; gap: 24px; padding-block: 72px; }
@media (min-width: 900px) { .cta .wrap { grid-template-columns: 1fr auto; align-items: center; } }
.cta h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.cta .row { display: flex; flex-wrap: wrap; gap: 10px; }
footer nav.pages { flex-basis: 100%; padding-bottom: 14px; border-bottom: 1px solid var(--line-dk); }
footer nav.pages a { color: var(--sand); }

/* ---------- Icons + simple sections ---------- */
.ic { width: 28px; height: 28px; flex: 0 0 auto; color: var(--tan); }
.band-light .ic { color: var(--leather); }
.h-md { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-top: 14px; }
.narrow-read { max-width: 760px; }
.read { font-size: 1.15rem; line-height: 1.65; max-width: 60ch; }
.read strong { font-weight: 600; }
.link { font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tan); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.band-light .link { color: var(--leather); }

.rate { max-width: 560px; margin: 0 auto; background: var(--ink); color: var(--sand); padding: 36px 28px 28px; position: relative; display: grid; gap: 22px; }
.rate .price { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.rate .price b { font-family: var(--head); font-weight: 800; font-size: clamp(4.2rem, 13vw, 6.5rem); line-height: .9; color: var(--tan); }
.rate .price span { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.rate .fine { font-size: .95rem; color: var(--dust); text-align: center; }
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-dk); }
.icon-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-dk); font-size: 1.1rem; }
.band-light .rate .ic { color: var(--tan); }

.tiles { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: var(--coal); border: 1px solid var(--line-dk); padding: 22px; display: grid; gap: 8px; align-content: start; }
.tile b { font-family: var(--head); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; margin-top: 8px; }
.tile em { font-style: normal; font-family: var(--mono); font-size: .85rem; color: var(--tan); }
.tile p { color: var(--dust); font-size: 1.02rem; }

.steps-ic { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .steps-ic { grid-template-columns: repeat(3, 1fr); } }
.steps-ic li { display: flex; gap: 16px; align-items: flex-start; background: var(--sand); padding: 22px; }
.steps-ic b { font-family: var(--head); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; }
.steps-ic p { margin-top: 4px; color: #4a463d; font-size: 1.05rem; }

.faqs { margin-top: 28px; border-top: 1px solid var(--line-dk); }
.faq { border-bottom: 1px solid var(--line-dk); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--head); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { width: 22px; height: 22px; transition: transform .2s; }
.faq[open] .plus { transform: rotate(45deg); }
.faq p { padding: 0 0 22px; color: rgba(236,230,218,.82); font-size: 1.1rem; max-width: 56ch; }
.faq a { color: var(--tan); }

.skills { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 640px) { .skills { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .skills { grid-template-columns: repeat(3, 1fr); } }
.skill { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--line-dk); background: var(--coal); }
.skill b { font-family: var(--head); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; }
.skill p { color: var(--dust); font-size: 1.02rem; margin-top: 2px; }

.vids { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 760px) { .vids { grid-template-columns: 1fr 1fr; } }
.vid { position: relative; display: block; text-decoration: none; background: var(--ink); overflow: hidden; }
.vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .85; transition: opacity .2s, transform .5s; }
.vid:hover img { opacity: 1; transform: scale(1.02); }
.vid .play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(17,17,16,.7); border: 2px solid var(--tan); display: grid; place-items: center; }
.vid .play .ic { width: 26px; height: 26px; color: var(--tan); fill: var(--tan); margin-left: 3px; }
.vid b { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(to top, rgba(17,17,16,.92), rgba(17,17,16,0)); color: var(--sand); font-family: var(--head); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Field Notes: keep it simple ---------- */
.article .wrap { max-width: 700px; }
.article h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1; }
.article .meta { display: none; }
.answer { background: transparent; color: var(--ink); padding: 4px 0 4px 18px; border-left: 4px solid var(--tan); margin-top: 24px; }
.answer .tag { color: var(--leather); }
.answer p { font-size: 1.25rem; line-height: 1.5; font-weight: 500; margin-top: 6px; }
.body { font-size: 1.15rem; line-height: 1.7; margin-top: 32px; gap: 1.2em; }
.body h2 { font-size: clamp(1.6rem, 5vw, 2.1rem); margin-top: .6em; }
.body ul, .body ol { gap: .7em; }
.signoff { margin-top: 40px; }
@media (max-width: 759px) {
  body { font-size: 1.1rem; }
  .page-hero .wrap { padding-block: 56px 44px; }
  .section { padding-block: 64px; }
  .notes h3 { font-size: 1.55rem; }
  .notes p { font-size: 1.05rem; }
}
.note-img { margin: 24px 0 0; }
.note-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Left-aligned reading + course ---------- */
.article .wrap { max-width: 1240px; }
.article .wrap > * { max-width: 720px; }
a.tile { text-decoration: none; color: inherit; transition: border-color .35s ease; }
a.tile:hover { border-color: var(--tan); }
.band-light .tile { background: var(--sand); border-color: var(--line-lt); }
.band-light .tile p { color: #5b564b; }
.band-light .tile em { color: var(--leather); }
.rate { margin-left: 0; }
.card div { gap: 10px; }

.days { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .days { grid-template-columns: repeat(5, 1fr); } }
.days li { border: 1px solid var(--line-dk); background: var(--coal); padding: 20px; display: grid; gap: 4px; align-content: start; }
.days .d { font-family: var(--head); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--tan); text-transform: uppercase; }
.days .when { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.days b { font-family: var(--head); font-weight: 700; font-size: 1.45rem; text-transform: uppercase; margin-top: 10px; }
.days p { color: var(--dust); font-size: 1.02rem; }
.days li.hot { background: var(--tan); border-color: var(--tan); color: var(--ink); }
.days li.hot .d, .days li.hot .when, .days li.hot p { color: var(--ink); }

.exgrid { display: grid; gap: 12px; margin-top: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .exgrid { grid-template-columns: repeat(5, 1fr); } }
.excard { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--sand); border: 1px solid var(--line-lt); min-width: 0; }
.excard:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .excard:first-child { grid-column: auto; } }
.excard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.excard div { padding: 16px; display: grid; gap: 4px; }
.excard .num { font-family: var(--head); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--leather); }
.excard b { font-family: var(--head); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }
.excard p { color: #5b564b; font-size: .98rem; }
.excard.open { background: transparent; border: 2px dashed var(--tan-deep); justify-content: center; min-height: 160px; }
.wrap.narrow-read { max-width: 1240px; }
.wrap.narrow-read > * { max-width: 760px; }
.page-hero h1 { max-width: 20ch; }
.rate-row { display: grid; gap: 12px; margin-top: 36px; }
.rate-row .rate { margin: 0; max-width: none; }
.rate-row .steps-ic { margin: 0; }
@media (min-width: 960px) {
  .rate-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .rate-row .steps-ic { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .rate-row .steps-ic li { align-items: center; padding: 28px; }
}
/* Viewfinder corners stay with the content, not the window edge */
.frame { left: 50%; right: auto; width: min(calc(100% - 2 * var(--gutter)), 1264px); transform: translateX(-50%); }

/* ---------- Portfolio tabs: show they're clickable ---------- */
.tab-hint { display: flex; align-items: center; gap: 10px; margin-top: 40px; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tan); }
.ic.sm { width: 18px; height: 18px; }
.tab-hint + .tabs { margin-top: 14px; }
.tabs button { position: relative; overflow: hidden; }
.tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--leather); }
.tabs.auto button[aria-selected="true"]::after { animation: tabfill 7s linear forwards; }
@keyframes tabfill { from { width: 0; } to { width: 100%; } }
.tabs button:not([aria-selected="true"]) { color: rgba(236,230,218,.82); border-color: #4a463c; }
@media (prefers-reduced-motion: reduce) { .tabs.auto button::after { animation: none; } }
@media (max-width: 759px) {
  .tabs { margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px))); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: 40px; scroll-padding-left: 16px; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}
@media (max-width: 899px) { .grid figure:nth-child(4) { grid-column: 1 / -1; } .grid figure:nth-child(4) img { aspect-ratio: 16 / 9; } }

/* ---------- Sticky header on home: clear over the hero, solid after scrolling ---------- */
.top.over { position: fixed; transition: background .25s, border-color .25s; border-bottom: 1px solid transparent; }
.top.over.scrolled { background: rgba(17,17,16,.94); backdrop-filter: blur(8px); border-bottom-color: var(--line-dk); }
.top.over .wrap { height: 72px; }
.hero > img { transition: opacity .3s; }

/* ---------- Industry pages ---------- */
.gallery { display: grid; gap: 8px; margin-top: 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.gallery figure { margin: 0; min-width: 0; overflow: hidden; }
.gallery figure:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .gallery figure:first-child { grid-column: span 2; grid-row: span 2; } }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.skills.light .skill { background: var(--sand); border-color: var(--line-lt); }
.skills.light .skill p { color: #5b564b; }
.faq p a { color: var(--tan); }

/* ---------- Header: Work dropdown + phone menu ---------- */
.top .wrap { gap: 20px; }
.top nav { margin-left: auto; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.top-actions a.book { font-family: var(--head); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 9px 16px; border: 2px solid var(--tan); color: var(--tan); }
.top-actions a.book:hover { background: var(--tan); color: var(--ink); }
.dd { position: relative; display: flex; align-items: center; }
.dd > a { display: inline-flex; align-items: center; gap: 4px; }
.caret { width: 14px; height: 14px; transition: transform .2s; }
.dd-menu { position: absolute; top: 100%; left: -16px; min-width: 270px; padding: 10px 0; margin-top: 12px; background: var(--ink); border: 1px solid var(--line-dk); display: grid; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dd-menu a { padding: 10px 18px; opacity: 1 !important; }
.dd-menu a:hover { background: var(--coal); color: var(--tan); }
.dd-menu a:last-child { border-top: 1px solid var(--line-dk); margin-top: 6px; padding-top: 14px; color: var(--tan); }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd:hover .caret, .dd:focus-within .caret { transform: rotate(180deg); }
.menu-btn { display: none; appearance: none; background: transparent; border: 2px solid rgba(236,230,218,.4); width: 46px; height: 42px; padding: 0; cursor: pointer; position: relative; }
.menu-btn span:not(.sr) { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--sand); transition: transform .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1); }
.menu-btn span:nth-child(1) { top: 15px; }
.menu-btn span:nth-child(2) { top: 23px; }
.menu-open .menu-btn span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { top: 19px; transform: rotate(-45deg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 1079px) {
  .menu-btn { display: block; }
  .top nav { display: none !important; }
  .top nav.open { display: grid !important; position: fixed; inset: calc(72px + env(safe-area-inset-top, 0px)) 0 0 0; background: var(--ink); padding: 12px max(var(--gutter), env(safe-area-inset-left, 0px)) 40px; overflow-y: auto; align-content: start; gap: 0; border-top: 1px solid var(--line-dk); }
  .top nav.open > a, .top nav.open .dd > a { display: block !important; padding: 16px 0; font-size: 1.6rem; border-bottom: 1px solid var(--line-dk); opacity: 1; }
  .top nav.open .dd { display: block; }
  .top nav.open .caret { display: none; }
  .top nav.open .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; margin: 0; border: 0; padding: 4px 0 10px 14px; min-width: 0; background: transparent; }
  .top nav.open .dd-menu a { font-size: 1.15rem; padding: 10px 0; color: rgba(236,230,218,.8); }
  .top nav.open .dd-menu a:last-child { border-top: 0; margin: 0; color: var(--tan); }
  .menu-open { background: var(--ink) !important; }
}

/* ---------- Pricing packages ---------- */
.packs { display: grid; gap: 14px; }
@media (min-width: 960px) { .packs { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.pack { background: var(--sand); border: 1px solid var(--line-lt); padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 16px; position: relative; color: var(--ink); }
.pack .tag { display: inline-flex; align-items: center; gap: 8px; }
.pack .pp { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pack .pp b { font-family: var(--head); font-weight: 800; font-size: clamp(3.4rem, 8vw, 4.4rem); line-height: .9; }
.pack .pp span { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #6d675a; }
.pack .pfor { font-size: 1.08rem; color: #4a463d; }
.pack .icon-list { border-top-color: var(--line-lt); }
.pack .icon-list li { border-bottom-color: var(--line-lt); font-size: 1.02rem; padding: 12px 0; }
.pack .btn { margin-top: auto; width: 100%; }
.pack .btn.ghost { color: var(--ink); border-color: var(--ink); }
.pack .btn.ghost:hover { background: var(--ink); color: var(--sand); }
.pack.best { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.pack.best .tag { color: var(--tan); }
.pack.best .pp b { color: var(--tan); }
.pack.best .pp span, .pack.best .pfor { color: var(--dust); }
.pack.best .icon-list { border-top-color: var(--line-dk); }
.pack.best .icon-list li { border-bottom-color: var(--line-dk); }
.pack.best .ic { color: var(--tan); }
.badge { position: absolute; top: -13px; left: 24px; background: var(--tan); color: var(--ink); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; }
@media (min-width: 960px) { .pack.best { transform: translateY(-10px); } }
.fine-lt { margin-top: 20px; color: #5b564b; font-size: .98rem; }
.steps-ic.dark li { background: var(--coal); color: var(--sand); border: 1px solid var(--line-dk); }
.steps-ic.dark p { color: var(--dust); }
.faqs.light { border-top-color: var(--line-lt); }
.faqs.light .faq { border-bottom-color: var(--line-lt); }
.faqs.light .faq p { color: #4a463d; }
.faqs.light .faq a, .faqs.light .ic { color: var(--leather); }
@media (max-width: 1079px) { .top.menu-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }
@media (max-width: 1079px) { .top nav.open .dd-menu a { display: block !important; } }

/* ---------- C flag mark ---------- */
.brand { flex-direction: row !important; align-items: center; gap: 12px; }
.brand > span { display: flex; flex-direction: column; line-height: 1; }
.flag { width: 40px; height: auto; color: var(--tan); flex: 0 0 auto; display: block; }
.flag.sm { width: 22px; display: inline-block; vertical-align: -4px; margin-right: 10px; }
.flag.sign { width: 34px; color: var(--leather); }
.foot-id { display: inline-flex; align-items: center; }

/* ---------- Bundle card: taller on both ends, buttons in line ---------- */
@media (min-width: 960px) {
  .pack.best { transform: none; margin: -14px 0; padding: 42px 24px 38px; }
}
.brand b { white-space: nowrap; }
@media (max-width: 759px) { .flag { width: 32px; } .brand { gap: 10px; } .brand b { font-size: 1.25rem; } .top-actions { gap: 8px; } }

/* ---------- Stories ---------- */
.story-cards { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 700px) { .story-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .story-cards { grid-template-columns: repeat(3, 1fr); } }
.scard { position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--sand); background: var(--ink); min-height: 420px; }
.scard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.scard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,16,.95) 0%, rgba(17,17,16,.6) 45%, rgba(17,17,16,.05) 75%); }
.scard div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; display: grid; gap: 8px; }
.scard h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.scard p { color: rgba(236,230,218,.82); font-size: 1rem; }
.scard .go { font-family: var(--head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); }
.scard:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .scard img { transition: none; } }

.story-hero { position: relative; min-height: min(78svh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.story-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,16,.95) 0%, rgba(17,17,16,.55) 40%, rgba(17,17,16,.1) 75%); }
.story-hero .wrap { position: relative; z-index: 2; padding-block: 120px 56px; }
.story-hero .crumbs { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tan); margin-bottom: 14px; }
.story-hero .crumbs a { text-decoration: none; }
.story-hero h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); margin-top: 12px; max-width: 16ch; }
.story-hero .lede { margin-top: 16px; max-width: 48ch; color: rgba(236,230,218,.88); }

.story-body { background: var(--paper); color: var(--ink); }
.sbody { display: grid; gap: 1.2em; font-size: 1.18rem; line-height: 1.7; color: #2f2c26; }
.sbody > p, .sbody > h2, .sbody > .pull { max-width: 700px; }
.sbody h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--ink); margin-top: .8em; }
.sfig { margin: 0; }
.sfig img { width: 100%; height: 100%; object-fit: cover; }
.sfig.wide { margin: .8em 0; max-width: 1080px; }
.sfig.wide img { aspect-ratio: 3 / 2; }
.spair { display: grid; gap: 10px; margin: .8em 0; max-width: 1080px; }
@media (min-width: 700px) { .spair { grid-template-columns: 1fr 1fr; } }
.spair img { aspect-ratio: 4 / 5; }
.pull { margin: .6em 0; padding-left: 20px; border-left: 5px solid var(--tan); font-family: var(--head); font-weight: 800; font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.02; text-transform: uppercase; color: var(--ink); }
.scta { margin-top: 56px; max-width: 1080px; background: var(--ink); color: var(--sand); padding: 32px 28px; display: grid; gap: 14px; }
.scta .flag.sign { color: var(--tan); }
.scta h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.scta p { color: var(--dust); font-size: 1.1rem; }
.scta .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.snext { margin-top: 32px; display: grid; gap: 6px; max-width: 700px; }
.snext .tag { color: var(--leather); }
.snext a { font-family: var(--head); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.snext a:hover { color: var(--leather); }

/* ---------- Circle flag mark ---------- */
.flag { width: 42px; height: 42px; color: var(--sand); }
.flag.sm { width: 22px; height: 22px; color: var(--dust); }
.flag.sign { width: 40px; height: 40px; color: var(--leather); }
.scta .flag.sign { color: var(--tan); }
@media (max-width: 759px) { .flag { width: 34px; height: 34px; } }
.brand small { white-space: nowrap; }
@media (max-width: 759px) { .brand small { font-size: .58rem; letter-spacing: .14em; } }
.spair { grid-template-columns: 1fr 1fr; gap: 6px; }
@media (min-width: 700px) { .spair { gap: 10px; } }

/* ---------- Story cards: photo on top, text below, all the same size ---------- */
.story-cards { align-items: stretch; }
.scard { position: static; min-height: 0; display: flex; flex-direction: column; background: var(--coal); border: 1px solid var(--line-dk); color: var(--sand); }
.scard::after { display: none; }
.scard-img { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.scard-img img { position: static; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.scard:hover .scard-img img { transform: scale(1.04); }
.scard-txt { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.scard-txt b { font-family: var(--head); font-weight: 800; font-size: 1.55rem; line-height: 1; text-transform: uppercase; }
.scard-txt .go { margin-top: auto; padding-top: 8px; font-family: var(--head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); }
.band-light .scard { background: var(--sand); border-color: var(--line-lt); color: var(--ink); }
.band-light .scard-txt .tag { color: var(--leather); }
.band-light .scard-txt .go { color: var(--leather); }
.scard:hover { border-color: var(--tan); }

/* ---------- Bullets, pitch-deck style ---------- */
.bul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.bul li { position: relative; padding-left: 28px; font-size: 1.15rem; line-height: 1.45; }
.bul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 3px; background: var(--tan); }
.band-light .bul li::before, .dark-bul li::before, .story-body .bul li::before { background: var(--leather); }
.web-band { display: grid; gap: 22px; }
@media (min-width: 960px) { .web-band { grid-template-columns: 1.3fr 1fr auto; align-items: end; gap: 48px; } .web-band .bul { margin: 0; } }
.tiles.three { grid-template-columns: 1fr; }
@media (min-width: 760px) { .tiles.three { grid-template-columns: repeat(3, 1fr); } }
.price-top { padding-top: 56px; }
.packs.two-up { margin-top: 36px; }
@media (min-width: 960px) { .packs.two-up { grid-template-columns: 1fr 1fr; max-width: 900px; } }
.packs.two-up .pack.best { margin: 0; padding: 28px 24px 24px; }
.web-note { margin-top: 28px; font-size: 1.1rem; color: #4a463d; }
.web-note a { color: var(--leather); font-weight: 600; }

/* ---------- Story galleries ---------- */
.sgal { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; max-width: 1180px; margin: .6em 0; }
@media (min-width: 900px) { .sgal { grid-template-columns: repeat(6, 1fr); gap: 10px; } }
.sgal figure { margin: 0; overflow: hidden; background: var(--line-lt); }
.sgal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgal .land { grid-column: span 2; aspect-ratio: 3 / 2; }
.sgal .port { grid-column: span 1; aspect-ratio: 4 / 5; }
.sgal .hero-shot { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .sgal .land { grid-column: span 3; }
  .sgal .port { grid-column: span 2; aspect-ratio: 4 / 5; }
}
.sbody .bul { max-width: 700px; }

/* ---------- Justified story galleries ---------- */
.jgal { display: grid; gap: 8px; max-width: 1180px; margin: .8em 0; }
.jrow { display: grid; gap: 8px; }
.jrow figure { margin: 0; overflow: hidden; background: var(--line-lt); min-width: 0; }
.jrow img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 700px) { .jgal, .jrow { gap: 10px; } }

/* ---------- Travel map ---------- */
.map-sec { border-top: 1px solid var(--line-dk); }
.legend { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.sw { display: inline-block; width: 14px; height: 14px; }
.sw.on { background: var(--tan); }
.sw.off { background: var(--coal); border: 1px solid #4a463c; margin-left: 14px; }
.maps { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 960px) { .maps { grid-template-columns: 2fr 1fr; align-items: start; gap: 40px; } }
.map { margin: 0; }
.map svg { width: 100%; height: auto; display: block; }
.map path { stroke: var(--ink); stroke-width: .8; transition: fill .15s; }
.map path.off { fill: #2c2a25; }
.map path.on { fill: var(--tan); }
.map path:hover { fill: var(--sand); }
.map.world path { stroke-width: .4; }
.map-side .tag { display: block; margin-top: 18px; }
.states-list { margin-top: 24px; color: var(--dust); font-size: .98rem; max-width: 80ch; }
.insets { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.map.inset svg { background: #1a1917; border: 1px solid var(--line-dk); }
.map.inset path { stroke-width: .15; }
.map.inset figcaption { margin-top: 8px; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }

/* ---------- Corner marks removed ---------- */
.frame { display: none !important; }

/* ---------- Scroll cue ---------- */
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: rgba(236,230,218,.75); font-family: var(--mono); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; }
.scroll-cue i { display: block; width: 2px; height: 34px; background: rgba(236,230,218,.25); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--tan); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { top: -40%; } 100% { top: 100%; } }
.scroll-cue:hover { color: var(--sand); }
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation: none; top: 30%; } }

/* ---------- Mobile first: fewer words, one clear action ---------- */
@media (max-width: 759px) {
  .hide-sm { display: none !important; }
  main .tag:not(.keep) { display: none !important; }
  .pack .tag, .badge { display: inline-flex !important; }
  .section { padding-block: 52px; }
  .h-md, h2 { margin-top: 0 !important; }

  /* Hero: photo, headline, one button */
  .hero { min-height: 88svh; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.2rem); margin-top: 0; }
  .hero .lede { display: none; }
  .hero .actions .btn { max-width: none; width: 100%; min-height: 58px; font-size: 1.3rem; }
  .hero .wrap { padding-block: 120px 88px; }
  .kit { display: none; }

  /* Work: photos do the talking */
  .tab-hint, .world-note { display: none; }
  .work .head h2 { font-size: 2.5rem; }
  .tabs { margin-top: 18px; }

  /* Day rate: price, list, button. Steps as three small chips */
  .rate { padding: 26px 20px 22px; }
  .rate .fine { font-size: .85rem; }
  .steps-ic { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
  .steps-ic li { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 6px; }
  .steps-ic b { font-size: 1.15rem; }
  .steps-ic p { display: none; }

  /* Website band: headline and button only */
  .web-band .bul { display: none; }
  .web-band h2 { font-size: 2.1rem; }

  /* Stories swipe sideways instead of a long stack */
  .story-cards { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px))); padding-right: 40px; scrollbar-width: none; }
  .story-cards::-webkit-scrollbar { display: none; }
  .story-cards .scard { flex: 0 0 78%; scroll-snap-align: start; }
  .scard-txt { padding: 14px 16px 16px; }
  .scard-txt b { font-size: 1.3rem; }
  .scard-txt .go { display: none; }

  /* Page heroes and stories: less chrome */
  .story-hero .crumbs, .page-hero .lede { display: none; }
  .story-hero { min-height: 70svh; }
  .story-hero .wrap { padding-block: 100px 36px; }
  .story-hero .lede { font-size: 1.05rem; }
  .sbody { font-size: 1.08rem; }
  .jgal, .jrow { gap: 4px; }
  .scta { margin-top: 36px; padding: 24px 20px; }
  .cta .wrap { padding-block: 48px; }
  .cta h2 { font-size: 2rem; }
  .notes p { display: none; }
  .world .lede { display: none; }
  .skill p, .tile p { font-size: .95rem; }
  .legend { margin-top: 8px; }
  .states-list { display: none; }
}
/* Story call-to-action lines up with the photo rows at any width */
.scta { max-width: 1180px; }

/* Scroll cue sits on the right edge of the content, clear of the buttons */
.scroll-cue { left: auto; transform: none; right: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); bottom: 28px; }

/* Header: full menu from 960px up, menu button below. Nothing gets hidden or squeezed. */
@media (min-width: 1080px) and (max-width: 1239px) { .top nav { gap: 18px; } .top nav a { font-size: .98rem; } .brand small { letter-spacing: .14em; } }

/* ---------- Category strip: separated, clickable ---------- */
.kit .wrap { gap: 0; justify-content: stretch; padding-block: 0; }
.kit .wrap a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 12px; text-decoration: none; color: var(--dust); border-left: 1px solid var(--line-dk); transition: color .15s, background .15s; white-space: nowrap; }
.kit .wrap a:last-child { border-right: 1px solid var(--line-dk); }
.kit .wrap a:hover { color: var(--sand); background: #1f1e1a; }
.kit .wrap a b { color: var(--tan); font-weight: 500; }
.ilink { color: inherit; text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 4px; }

/* ---------- Field Notes newsletter ---------- */
.nl-form { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-form input { flex: 1 1 220px; min-width: 0; min-height: 54px; padding: 0 16px; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--paper); border: 2px solid var(--line-lt); border-radius: 0; }
.nl-form input:focus { outline: none; border-color: var(--tan); }
.nl-form .btn { flex: 0 0 auto; }
.nl-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-msg { margin-top: 10px; font-size: .98rem; color: var(--tan); }
.nl-band { background: var(--coal); border-block: 1px solid var(--line-dk); }
.nl.band { display: grid; gap: 22px; }
@media (min-width: 900px) { .nl.band { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 56px; } }
.nl h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.nl .nl-copy p { margin-top: 8px; color: var(--dust); font-size: 1.08rem; }
.nl.inline { margin-top: 20px; max-width: 1180px; padding: 28px; border: 1px solid var(--line-lt); background: var(--sand); color: var(--ink); display: grid; gap: 18px; }
@media (min-width: 900px) { .nl.inline { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; } }
.nl.inline h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: 6px; }
.nl.inline .nl-copy p { color: #5b564b; }
.nl.inline .nl-msg { color: var(--leather); }
.article .nl.inline { max-width: 720px; grid-template-columns: 1fr; }
.nl.foot { flex-basis: 100%; display: grid; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--line-dk); }
@media (min-width: 900px) { .nl.foot { grid-template-columns: auto auto 1fr; align-items: center; gap: 20px; } .nl.foot .nl-form { max-width: 520px; justify-self: end; width: 100%; } }
.nl.foot b { font-family: var(--head); font-weight: 800; font-size: 1.4rem; color: var(--sand); text-transform: uppercase; letter-spacing: .04em; }
.nl.foot > span { color: var(--dust); }
.nl.foot .nl-form input { min-height: 46px; background: var(--coal); color: var(--sand); border-color: var(--line-dk); }
.nl.foot .btn { min-height: 46px; font-size: 1rem; }
@media (max-width: 759px) { .nl.inline { padding: 22px 18px; } .nl-form .btn { width: 100%; } }

/* ---------- Emergency deployment ---------- */
.btn-red { background: var(--rec); border-color: var(--rec); color: #fff; }
.btn-red:hover { background: #b0241f; border-color: #b0241f; color: #fff; }
.top nav a[href$="emergency.html"] { display: inline-flex; align-items: center; gap: 7px; }
.top nav a[href$="emergency.html"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 3px rgba(208,49,45,.2); }
.emer-hero::after { background: linear-gradient(to top, rgba(17,17,16,.95), rgba(17,17,16,.45)); }
.emer-hero h1 { max-width: 18ch; }
.moments { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.moments li { display: grid; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-lt); }
.moments span { font-family: var(--mono); font-size: .85rem; color: var(--leather); }
.moments b { font-family: var(--head); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats div { border: 1px solid var(--line-dk); background: var(--coal); padding: 22px 20px; display: grid; gap: 6px; }
.stats b { font-family: var(--head); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: .9; color: var(--tan); }
.stats span { color: var(--dust); font-size: 1rem; }
.estrip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 28px; }
@media (min-width: 900px) { .estrip { grid-template-columns: repeat(6, 1fr); } }
.estrip figure { margin: 0; overflow: hidden; }
.estrip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.emer-band { background: #1c1210; border-block: 1px solid #3a2420; }
.emer-cta { background: var(--rec); color: #fff; }
.emer-cta h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.emer-cta .lede { margin-top: 12px; color: rgba(255,255,255,.9); }
.emer-cta .btn-red { background: var(--ink); border-color: var(--ink); }
.emer-cta .btn.ghost { border-color: rgba(255,255,255,.7); color: #fff; }


/* ---------- About: facts + principles ---------- */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts div { border-top: 2px solid var(--tan); padding-top: 14px; display: grid; gap: 6px; }
.facts b { font-family: var(--head); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4rem); line-height: .9; color: var(--sand); }
.facts span { color: var(--dust); font-size: 1rem; }
.beliefs { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .beliefs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .beliefs { grid-template-columns: repeat(3, 1fr); } }
.beliefs li { background: var(--sand); border: 1px solid var(--line-lt); padding: 22px; display: grid; gap: 8px; align-content: start; }
.beliefs span { font-family: var(--mono); font-size: .8rem; color: var(--leather); letter-spacing: .12em; }
.beliefs b { font-family: var(--head); font-weight: 800; font-size: 1.7rem; line-height: 1; text-transform: uppercase; }
.beliefs p { color: #4a463d; font-size: 1.05rem; }
@media (max-width: 759px) { .beliefs p { font-size: 1rem; } }
.stat-note { margin-top: 12px; color: var(--dust); font-size: .95rem; max-width: 70ch; }

/* ---------- Book a Day: two paths + form ---------- */
.book-top { padding-top: 56px; }
.paths2 { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 900px) { .paths2 { grid-template-columns: 1fr 1fr; } }
.path2 { padding: 30px 28px; display: grid; gap: 12px; align-content: start; text-decoration: none; }
.path2 .lbl { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.path2 .lbl .ic { width: 22px; height: 22px; }
.path2 h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.path2 p { font-size: 1.1rem; }
.path2.fast { background: var(--tan); color: var(--ink); }
.path2.fast .lbl, .path2.fast .ic { color: var(--ink); }
.path2.fast .big-num { font-family: var(--head); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--ink); text-decoration: none; margin-top: 6px; }
.path2.fast .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.path2.fast .btn { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.path2.fast .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.path2.slow { background: var(--coal); border: 1px solid var(--line-dk); color: var(--sand); }
.path2.slow .lbl, .path2.slow .ic { color: var(--tan); }
.path2.slow p { color: var(--dust); }
.path2.slow .go { margin-top: auto; padding-top: 10px; font-family: var(--head); font-weight: 700; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tan); }
.path2.slow:hover { border-color: var(--tan); }
.book-form-wrap { display: grid; gap: 36px; }
@media (min-width: 1000px) { .book-form-wrap { grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; } .bf-intro { position: sticky; top: 110px; } }
.bf { display: grid; gap: 22px; }
.bf fieldset { border: 0; border-top: 2px solid var(--ink); margin: 0; padding: 16px 0 0; display: grid; gap: 14px; }
.bf legend { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leather); padding: 0 10px 0 0; }
.bf label { display: grid; gap: 6px; font-weight: 600; font-size: .98rem; color: var(--ink); }
.bf input:not([type="checkbox"]), .bf textarea { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-weight: 400; font-size: 1.05rem; color: var(--ink); background: #fff; border: 2px solid var(--line-lt); border-radius: 0; }
.bf textarea { min-height: 130px; resize: vertical; }
.bf input:focus, .bf textarea:focus { outline: none; border-color: var(--tan); }
.g2 { display: grid; gap: 14px; }
@media (min-width: 640px) { .g2 { grid-template-columns: 1fr 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex !important; grid-template-columns: none; align-items: center; cursor: pointer; font-weight: 500 !important; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 10px 14px; border: 2px solid var(--line-lt); background: #fff; font-size: .98rem; }
.chip input:checked + span { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--tan); outline-offset: 2px; }
.chip.wide span { padding: 12px 16px; }
.chip.agree input:checked + span { background: var(--tan); color: var(--ink); border-color: var(--tan); }
.bf .btn { justify-self: start; min-width: 240px; }
.bf-msg { color: var(--leather); }
.pray-line { color: var(--dust); font-size: 1.05rem; }
@media (max-width: 759px) { .path2 { padding: 24px 20px; } .bf .btn { width: 100%; } }
/* Emergency band: bright, clean red instead of a muddy dark red */
.emer-band { background: var(--rec); border: 0; color: #fff; }
.emer-band .tag { color: #fff; }
.emer-band .tag .dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.emer-band h2 { color: #fff; }
.emer-band .bul li { color: #fff; }
.emer-band .bul li::before { background: #fff; }
.emer-band .btn-red { background: var(--ink); border-color: var(--ink); color: #fff; }
.emer-band .btn-red:hover { background: #000; border-color: #000; }

/* ---------- Live (pulsing) dot for emergency ---------- */
.dot.live { position: relative; background: var(--rec) !important; }
.dot.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rec); animation: livepulse 1.6s ease-out infinite; }
@keyframes livepulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
.top nav a[href$="emergency.html"]::before { animation: navpulse 1.6s ease-in-out infinite; }
@keyframes navpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(208,49,45,.55); } 50% { box-shadow: 0 0 0 6px rgba(208,49,45,0); } }
@media (prefers-reduced-motion: reduce) { .dot.live::after, .top nav a[href$="emergency.html"]::before { animation: none; } }

/* Home emergency band: same layout as the website band, dark, red accents */
.emer-band2 { background: var(--ink); border-top: 1px solid var(--line-dk); }
.live-tag { color: #f06a66 !important; }
.red-txt { color: var(--rec); }
.red-bul li::before { background: var(--rec) !important; }
.band-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 759px) { .emer-band2 .live-tag { display: inline-flex !important; } .band-btns .btn { flex: 1 1 140px; } }

/* Emergency page: been vs wish */
.moments2 { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 900px) { .moments2 { grid-template-columns: 1fr 1fr; gap: 56px; } }
.moments2 h3 { font-size: 1.8rem; }
.moments2 .mlede { margin: 6px 0 14px; color: #5b564b; }
.moments.been li b { color: var(--rec); }

/* Booking page: emergency first */
.emer-strip { background: var(--rec); color: #fff; }
.emer-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px; }
.es-txt { display: inline-flex; align-items: center; gap: 12px; font-size: 1.08rem; flex-wrap: wrap; }
.es-txt b { font-family: var(--head); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; }
.emer-strip .dot.live { background: #fff !important; width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.emer-strip .dot.live::after { background: #fff; }
.emer-strip .btn-red { background: var(--ink); border-color: var(--ink); }
@media (max-width: 759px) { .emer-strip .btn { width: 100%; } }
/* Home emergency band back on bright red, keeping the new layout */
.emer-band2 { background: var(--rec); border-top: 0; color: #fff; }
.emer-band2 .live-tag { color: #fff !important; }
.emer-band2 .dot.live, .emer-band2 .dot.live::after { background: #fff !important; }
.emer-band2 h2 { color: #fff; }
.emer-band2 .red-txt { color: var(--ink); }
.emer-band2 .bul li { color: #fff; }
.emer-band2 .red-bul li::before { background: #fff !important; }
.emer-band2 .btn-red { background: var(--ink); border-color: var(--ink); color: #fff; }
.emer-band2 .btn-red:hover { background: #000; border-color: #000; }
.emer-band2 .btn.ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.emer-band2 .btn.ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- Story sections: split like the industry pages ---------- */
.sbody { gap: 0; }
.sbody > .ssplit { max-width: 1180px; padding-block: clamp(40px, 7vw, 88px); }
.sbody > .ssplit:first-child { padding-top: 0; }
.ssplit .h-md { margin-top: 14px; color: var(--ink); }
.ssplit .read { color: #2f2c26; }
.ssplit .read .bul { margin-top: 4px; }
.ssplit .read .pull { font-size: clamp(1.5rem, 3vw, 2rem); margin: .4em 0 0; }
.ssplit.say .pull { max-width: 22ch; margin: 0; }
.ssplit.say p { max-width: 30ch; font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.05; color: var(--ink); }
.ssplit.solo { padding-bottom: clamp(20px, 3vw, 32px); }
.sbody > .jgal { margin: 0; }
.story-body .ssplit .tag { color: var(--leather); }
.sbody .ssplit h2.h-md { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-top: 14px; }
.ssplit .read { font-size: 1.15rem; }

/* Six-photo grid (Active Emergency on the Photos page) */
.grid figure:nth-child(6):last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .grid figure:nth-child(5) img, .grid figure:nth-child(6) img { aspect-ratio: 3 / 2; }
  .grid figure:nth-child(6):last-child { grid-column: 2 / 4; }
}

/* Page headers: show more of the photo, keep the text side dark enough to read */
.page-hero > img { opacity: .8; }
.page-hero::after, .emer-hero::after { background:
  linear-gradient(to right, rgba(17,17,16,.88) 0%, rgba(17,17,16,.6) 45%, rgba(17,17,16,.12) 100%),
  linear-gradient(to top, rgba(17,17,16,.7) 0%, rgba(17,17,16,0) 45%); }
@media (max-width: 760px) {
  .page-hero::after, .emer-hero::after { background: linear-gradient(to top, rgba(17,17,16,.92) 0%, rgba(17,17,16,.55) 60%, rgba(17,17,16,.3) 100%); }
}

/* All Photos page on the light background */
.band-light .world { border-top-color: var(--line-lt); }
.band-light .world h2 { color: var(--ink); }
.band-light .world .lede { color: #5b564b; }
.band-light .grid figure { background: var(--sand); }

/* Home emergency band: headline, three equal points, then the buttons */
.eb3 { display: grid; gap: 36px; }
.eb3 h2 { max-width: none; }
.eb3-cols { display: grid; gap: 12px; }
.eb3-cols p { margin: 0; padding: 18px 20px; background: rgba(0,0,0,.14); border-left: 3px solid #fff; color: #fff; font-size: 1.15rem; line-height: 1.45; }
@media (min-width: 760px) { .eb3-cols { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* Photo page headers: 30% taller than the other page headers */
.ind-hero .wrap { padding-block: 156px 133px; }
@media (max-width: 760px) { .ind-hero .wrap { padding-block: 96px 80px; } }

/* ---------- Phone fixes ---------- */
/* Booking lives in the bottom bar on phones, so the header keeps only the logo and menu */
@media (max-width: 759px) { .top-actions a.book { display: none; } }

/* Home categories: all four visible as a 2x2 grid, with a line saying what to do */
@media (max-width: 759px) {
  .work .tab-hint { display: flex; margin-top: 18px; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .tabs button { width: 100%; padding: 12px 10px; font-size: .95rem; letter-spacing: .05em; text-align: left; white-space: normal; line-height: 1.15; }
  .tabs button span { display: block; margin: 0 0 4px; }
}

/* Booking form: nothing wider than the screen */
body { overflow-x: clip; }
.bf fieldset, .bf label, .bf .g2 > * { min-width: 0; }
.bf input[type="date"] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; min-width: 0; text-align: left; }
.bf input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Footer line: phone sits on its own line on phones */
.foot-id { gap: 0; align-items: flex-start; line-height: 1.5; }
.foot-id .flag.sm { flex: none; margin-top: 1px; }
.foot-id i.dot { font-style: normal; }
.foot-ph { text-transform: none; font-family: var(--body); font-weight: 400; letter-spacing: 0; }
@media (max-width: 759px) {
  .foot-id i.dot { display: none; }
  .foot-ph { display: block; }
  /* Gallery: an odd last photo fills the row instead of leaving a gap */
  .gallery figure:nth-child(even):last-child { grid-column: 1 / -1; }
  .gallery figure:nth-child(even):last-child img { aspect-ratio: 3 / 2; }
}

/* Home categories: photos crossfade in place. All four sets share one frame, so nothing below jumps. */
.stage { display: grid; }
.stage > .grid { grid-area: 1 / 1; transition: opacity .8s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s; }
.stage > .grid.off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s cubic-bezier(.4,0,.2,1), visibility 0s linear .8s; }
.stage > .grid figure { background: var(--coal); }
.tabs button { transition: background .5s ease, color .5s ease, border-color .5s ease; }
.world-note, #world-link { transition: opacity .3s ease; }
.world-note.fading, #world-link.fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .stage > .grid, .stage > .grid.off, .tabs button, .world-note, #world-link { transition: none; } }

/* Quiet arrival */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.2,.65,.2,1), transform 1s cubic-bezier(.2,.65,.2,1); }
.rv.in { opacity: 1; transform: none; }
img.fade { transition: opacity .8s ease; }
img.fade:not(.ok) { opacity: 0; }
/* Menu opens with a short fade instead of snapping */
html.menu-lock, html.menu-lock body { overflow: hidden; }
@media (max-width: 1079px) {
  .top nav.open { animation: menuin .4s cubic-bezier(.2,.65,.2,1); }
  .top nav.open > a, .top nav.open .dd { animation: menuitem .5s cubic-bezier(.2,.65,.2,1) both; }
  .top nav.open > :nth-child(2) { animation-delay: .04s; } .top nav.open > :nth-child(3) { animation-delay: .08s; }
  .top nav.open > :nth-child(4) { animation-delay: .12s; } .top nav.open > :nth-child(5) { animation-delay: .16s; } .top nav.open > :nth-child(n+6) { animation-delay: .2s; }
}
@keyframes menuin { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuitem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .top nav.open, .top nav.open > a, .top nav.open .dd { animation: none; } }

/* Phone tidy-ups */
@media (max-width: 899px) {
  .grid figure:nth-child(6):last-child { grid-column: auto; }
}
@media (max-width: 759px) {
  .chips { display: grid; grid-template-columns: 1fr 1fr; }
  .chips .chip { display: flex !important; }
  .chips .chip span { width: 100%; text-align: center; }
  .chips .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.about .lede { text-wrap: wrap; }
@media (max-width: 759px) { .chip.wide { display: flex !important; } .chip.wide span { width: 100%; text-align: center; } }

/* Phone menu: everything fits on one screen, no scrolling */
.top nav .nav-book { display: none !important; }
@media (max-width: 1079px) {
  .top nav.open { padding: 4px max(var(--gutter), env(safe-area-inset-left, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)); }
  .top nav.open > a, .top nav.open .dd > a { padding: clamp(9px, 1.6vh, 15px) 0; font-size: clamp(1.3rem, 3.4vh, 1.6rem); }
  .top nav.open .dd-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 4px 0 clamp(6px, 1.2vh, 12px); border-bottom: 1px solid var(--line-dk); }
  .top nav.open .dd > a { border-bottom: 0; }
  .top nav.open .dd-menu a { font-size: clamp(.9rem, 2.2vh, 1rem); padding: clamp(6px, 1.1vh, 9px) 0; letter-spacing: .06em; line-height: 1.15; }
  .top nav.open > a.nav-book { display: flex !important; justify-content: space-between; align-items: center; margin-top: clamp(14px, 2.6vh, 24px); padding: 0 20px; min-height: 54px; background: var(--tan); color: var(--ink); border: 0; font-size: 1.2rem; }
  .top nav.open > a.nav-book span { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; font-weight: 400; }
}

/* Home: websites get the room, emergency is a short line */
.web-home .wh-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .web-home .wh-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } }
.web-home h2 { margin-top: 14px; }
.web-home .lede { margin-top: 18px; max-width: 46ch; color: rgba(236,230,218,.82); }
.web-home .bul { margin-top: 22px; }
.web-home .bul li { font-size: 1.05rem; }
.wh-ex { display: grid; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.wh-ex img { transition: transform .8s cubic-bezier(.2,.65,.2,1); }
.wh-ex .browser { overflow: hidden; }
.wh-ex:hover img { transform: scale(1.02); }
.wh-cap { font-size: .95rem; color: rgba(236,230,218,.7); }
.wh-cap b { display: block; font-family: var(--head); font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); margin-bottom: 2px; }
.wh-packs { display: grid; gap: 10px; margin-top: 36px; }
@media (min-width: 640px) { .wh-packs { grid-template-columns: 1fr 1fr; gap: 14px; } }
.wh-pack { display: grid; gap: 6px; padding: 20px 22px; border: 1px solid var(--line-dk); background: var(--coal); text-decoration: none; color: var(--sand); transition: border-color .35s ease; }
.wh-pack:hover { border-color: var(--dust); }
.wh-pack.best { border-color: var(--tan); }
.wh-pack b { font-family: var(--head); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--tan); }
.wh-sub { font-size: .95rem; color: rgba(236,230,218,.7); }
.wh-go { margin-top: 24px; }
@media (max-width: 759px) { .wh-go .btn { width: 100%; } .web-home .bul { display: grid; } }

.emer-mini { background: var(--rec); color: #fff; }
.emer-mini .wrap { display: grid; gap: 18px; padding-block: 34px; }
@media (min-width: 900px) { .emer-mini .wrap { grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding-block: 30px; } }
.emer-mini p { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.emer-mini p b { font-family: var(--head); font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; margin-right: 6px; }
.emer-mini .dot.live { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 12px; vertical-align: 3px; background: #fff !important; }
.emer-mini .dot.live::after { background: #fff; }
.emer-mini .em-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.emer-mini .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.emer-mini .btn:hover { background: #000; border-color: #000; }
.emer-mini .em-link { color: #fff; font-family: var(--head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
@media (max-width: 759px) { .emer-mini .btn { flex: 1 1 auto; } .emer-mini p b { display: block; margin-bottom: 4px; } }

/* Phones: the next section peeking below the hero already says "keep going" */
@media (max-width: 759px) { .scroll-cue { display: none; } }
.wh-pack .tag.keep { display: block !important; color: var(--tan); }

/* Home: what one day gets you */
.uses .h-md { margin-top: 14px; }
.uses .lede { margin-top: 16px; max-width: 48ch; color: rgba(236,230,218,.82); }
.use-cards { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 860px) { .use-cards { grid-template-columns: 1fr 1fr; gap: 20px; } }
.use { display: grid; grid-template-rows: auto 1fr; background: var(--coal); border: 1px solid var(--line-dk); text-decoration: none; color: var(--sand); transition: border-color .35s ease; min-width: 0; }
.use:hover { border-color: var(--dust); }
.use .browser { border: 0; border-bottom: 1px solid var(--line-dk); overflow: hidden; }
.use .browser img, .use-feed img { transition: transform .8s cubic-bezier(.2,.65,.2,1); }
.use:hover .browser img { transform: scale(1.02); }
.use-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #0b0b0a; padding: 2px; }
.use-feed img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.use .browser img { aspect-ratio: 3 / 2; }
.use-txt { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; }
.use-txt .tag.keep { display: block !important; color: var(--tan); }
.use-txt b { font-family: var(--head); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1; text-transform: uppercase; }
.use-txt > span:not(.tag):not(.go) { color: rgba(236,230,218,.78); line-height: 1.5; }
.use-txt .go { margin-top: 6px; font-family: var(--head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); }
.use-more { margin-top: 20px; color: rgba(236,230,218,.75); }
.use-more b { color: var(--sand); }
@media (max-width: 759px) { .emer-mini { display: none; } }

/* Social media page: feed mockup */
.soc-top { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
.soc-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .soc-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; } }
.soc-copy .h-md { margin-top: 14px; }
.soc-copy .lede { margin-top: 18px; color: rgba(236,230,218,.82); max-width: 46ch; }
.math { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 28px; background: var(--line-dk); border: 1px solid var(--line-dk); }
@media (min-width: 640px) { .math { grid-template-columns: repeat(4, 1fr); } }
.math div { background: var(--ink); padding: 16px 16px 14px; display: grid; gap: 4px; }
.math b { font-family: var(--head); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--tan); }
.math span { font-size: .9rem; color: rgba(236,230,218,.72); }
.soc-note { margin-top: 18px; color: rgba(236,230,218,.75); max-width: 50ch; }
.soc-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 759px) { .soc-btns .btn { flex: 1 1 100%; } }
.phone { justify-self: center; width: min(100%, 380px); background: #0b0b0a; border: 1px solid var(--line-dk); border-radius: 34px; padding: 18px 10px 10px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.ph-top { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; }
.ph-av { width: 44px; height: 44px; border-radius: 50%; background: var(--tan); color: var(--ink); display: grid; place-items: center; font-family: var(--head); font-weight: 800; }
.ph-top b { display: block; color: var(--sand); font-size: 1rem; }
.ph-top span { font-size: .8rem; color: rgba(236,230,218,.6); }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-radius: 0 0 26px 26px; overflow: hidden; }
.ph-grid figure { margin: 0; position: relative; }
.ph-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ph-grid i { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.55); padding: 2px 5px; }

/* Phones: page heroes say what the page is in one line, buttons line up */
@media (max-width: 759px) {
  .hero .lede { display: block; font-size: 1.08rem; margin-top: 16px; }
  .hero .tag.keep { display: inline-flex !important; }
  .hero .wrap { padding-block: 110px 64px; }
  .page-hero .lede { display: block; font-size: 1.05rem; margin-top: 14px; }
  .ind-hero .wrap { padding-block: 104px 52px; }
  .pbtns { display: grid; grid-template-columns: 1fr; }
  .pbtns .btn { width: 100%; }
}
.pbtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 759px) { .pbtns { display: grid; grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 759px) { .soc-top { padding-top: calc(96px + env(safe-area-inset-top, 0px)); } }

/* Three uses side by side on desktop, same media height in every card */
@media (min-width: 1000px) { .use-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) and (max-width: 999px) { .use-cards { grid-template-columns: 1fr 1fr; } .use-cards .use:last-child { grid-column: 1 / -1; } }
.use > .use-feed, .use > .browser, .use > .wall { aspect-ratio: 3 / 2; overflow: hidden; }
.use > .browser { display: grid; grid-template-rows: auto 1fr; }
.use > .browser img { aspect-ratio: auto; height: 100%; }
.use-feed { grid-template-rows: 1fr 1fr; }
.use-feed img { aspect-ratio: auto; height: 100%; }
@media (min-width: 860px) and (max-width: 999px) { .use-cards .use:last-child > .wall { aspect-ratio: 3 / 1.2; } }

/* Wall mockup: frames on a painted wall */
.wall { display: flex; align-items: center; justify-content: center; gap: 5%; padding: 8% 8% 10%; background: linear-gradient(180deg, #5d5a52 0%, #4f4c45 78%, #3a3833 78.4%, #2c2a26 100%); }
.wall.warm { background: linear-gradient(180deg, #6b5847 0%, #5c4b3d 78%, #3d3229 78.4%, #2a231d 100%); }
.wall.light { background: linear-gradient(180deg, #d9d4ca 0%, #cfc9be 78%, #a39d91 78.4%, #8c867b 100%); }
.fr { display: block; flex: 0 0 22%; padding: 2.2%; background: #f4f1ea; border: 3px solid #121110; box-shadow: 0 10px 18px rgba(0,0,0,.4); }
.fr.big { flex-basis: 40%; }
.fr img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fr.big img { aspect-ratio: 4 / 3; }
.walls { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 900px) { .walls { grid-template-columns: 1fr 1fr; } .walls .wall-fig:first-child { grid-column: 1 / -1; } }
.wall-fig { margin: 0; }
.wall-fig .wall { aspect-ratio: 16 / 9; }
.wall-fig figcaption { margin-top: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tan); }
.mock-note { margin-top: 18px; font-size: .9rem; color: rgba(236,230,218,.6); }
.use-feed { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.use-feed img { height: 100%; min-height: 0; object-fit: cover; }
.use-txt { display: flex; flex-direction: column; }
.use-txt .go { margin-top: auto; padding-top: 12px; }
/* Text-only card: same frame, no photo */
.use-plain { grid-template-rows: 1fr; background: transparent; border-top: 3px solid var(--tan); }
.use-plain .use-txt { padding: 28px 26px 26px; gap: 12px; }
.use-plain .use-txt b { font-size: clamp(1.9rem, 3vw, 2.5rem); }
@media (min-width: 860px) and (max-width: 999px) { .use-cards .use-plain { grid-column: 1 / -1; } }

/* ---------- Video note: four poster cards that link out ---------- */
.vgrid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: .4em 0; }
@media (min-width: 600px) { .vgrid { grid-template-columns: 1fr 1fr; } }
.vcard { display: grid; gap: 4px; text-decoration: none; color: var(--ink) !important; }
.vimg { position: relative; display: block; overflow: hidden; background: var(--ink); }
.vimg img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .6s ease, opacity .6s ease; }
.vcard:hover .vimg img { transform: scale(1.03); opacity: .9; }
.vplay { position: absolute; left: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%; background: rgba(17,17,16,.72); display: grid; place-items: center; }
.vplay .ic { width: 20px; height: 20px; color: var(--sand); fill: var(--sand); margin-left: 3px; }
.vcard b { margin-top: 8px; font-family: var(--head); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; }
.vcard > span:last-child { color: #5b564b; font-size: .98rem; }

/* ---------- Trusted Sources ---------- */
.srcs { display: grid; gap: 12px; margin-top: 40px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .srcs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .srcs { grid-template-columns: repeat(3, 1fr); } }
.src { display: grid; gap: 6px; align-content: start; padding: 22px; background: var(--sand); border: 1px solid var(--line-lt); text-decoration: none; color: var(--ink); transition: border-color .35s ease; min-width: 0; }
.src:hover { border-color: var(--leather); }
.src .ic { color: var(--leather); margin-bottom: 6px; }
.src-k { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leather); }
.src b { font-family: var(--head); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; line-height: 1.05; }
.src p { color: #4a463d; font-size: 1.02rem; }
.src-u { margin-top: 8px; font-family: var(--mono); font-size: .8rem; color: var(--leather); overflow-wrap: anywhere; }
.src-fine, .band-light > .wrap > .fine { margin-top: 24px; color: #5b564b; font-size: .98rem; }

/* ---------- Gear ---------- */
.kits { display: grid; gap: 12px; margin-top: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .kits { grid-template-columns: repeat(3, 1fr); } }
.kits .kit { padding: 24px; background: var(--sand); border: 1px solid var(--line-lt); min-width: 0; }
.kits .kit .ic { color: var(--leather); }
.h-sm { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 10px; }
.gear { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line-lt); }
.gear li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-lt); }
.gear li > div { min-width: 0; }
.gear b { font-family: var(--head); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }
.gear p { margin-top: 4px; color: #4a463d; font-size: 1rem; }
.gear .ilink { flex: 0 0 auto; font-family: var(--mono); font-size: .8rem; color: var(--leather); padding: 6px 0; }
.truck-line { margin-top: 28px; display: flex; gap: 12px; align-items: center; font-size: 1.1rem; color: #2f2c26; }
.truck-line .ic { color: var(--leather); }

/* ---------- FAQ page ---------- */
.faq-group { margin-top: 48px; }
.faq-group .h-sm { color: var(--ink); }
.faq-group .faqs { margin-top: 12px; }

/* ---------- Footer: resource links sit as a second, quieter row ---------- */
footer nav.pages.res { padding-bottom: 14px; }
footer nav.pages.res a { color: var(--dust); font-size: .9rem; }
footer nav.pages.res a:hover { color: var(--tan); }
.price-top h1 + .lede { margin-top: 16px; max-width: 60ch; }
.src-get { display: grid; min-width: 0; }
.src-get .nl.inline { margin: 0; background: var(--ink); color: var(--sand); border-color: var(--ink); grid-template-columns: 1fr; gap: 14px; }
.src-get .nl.inline h2 { color: var(--sand); }
.src-get .nl.inline .nl-copy p { color: var(--dust); }
.src-get .nl.inline .nl-msg { color: var(--tan); }
@media (min-width: 640px) { .src-get { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .src-get { grid-column: span 2; } .src-get .nl.inline { grid-template-columns: 1fr 1.1fr; align-items: center; } }
/* Phone: footer links get thumb-sized rows */
@media (max-width: 759px) {
  footer nav { gap: 0 22px; }
  footer nav a { display: inline-flex; align-items: center; min-height: 40px; }
  footer .foot-ph { min-height: 40px; display: inline-flex; align-items: center; }
}
/* Touch screens wider than a phone (foldables, tablets): same thumb-sized footer links */
@media (pointer: coarse) and (min-width: 760px) {
  footer nav a, footer .foot-ph { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Home uses: social + website match the pricing row above (same columns, same gap);
   "Everything else" becomes a full-width strip underneath. */
@media (min-width: 860px) {
  .use-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .use-cards .use-plain { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .use-cards > .use:not(.use-plain) > .use-feed, .use-cards > .use:not(.use-plain) > .browser, .use-cards > .use:not(.use-plain) > .use-mon { aspect-ratio: auto; height: 340px; }
  .use-cards > .use:not(.use-plain) .use-txt { padding: 26px 28px 28px; }
  .use-plain { border-top: 1px solid var(--line-dk); border-left: 3px solid var(--tan); }
  .use-plain .use-txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; column-gap: 40px; row-gap: 6px; align-items: center; padding: 28px 32px; }
  .use-plain .use-txt .tag { grid-column: 1; grid-row: 1; }
  .use-plain .use-txt b { grid-column: 1; grid-row: 2; font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
  .use-plain .use-txt > span:not(.tag):not(.go) { grid-column: 2; grid-row: 1 / 3; }
  .use-plain .use-txt .go { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; white-space: nowrap; }
}
.use > .browser img { object-fit: cover; object-position: center top; }

/* ---------- Field Notes: one grid, stories and questions together ---------- */
.fn-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.fn-filter button { min-height: 44px; padding: 0 16px; font-family: var(--head); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line-lt); cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.fn-filter button:hover { border-color: var(--ink); }
.fn-filter button[aria-pressed="true"] { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.fn-count { margin-top: 18px; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leather); }
.fn-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .fn-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .fn-grid { grid-template-columns: repeat(3, 1fr); } }
.fcard { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); background: var(--sand); border: 1px solid var(--line-lt); transition: border-color .35s ease; }
.fcard:hover { border-color: var(--leather); }
.fcard.fn-off { display: none; }
.fcard-img { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ink); }
.fcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fcard:hover .fcard-img img { transform: scale(1.04); }
.fcard-txt { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.fcard-txt .tag.keep { display: block !important; color: var(--leather); }
.fcard-txt b { font-family: var(--head); font-weight: 800; font-size: 1.5rem; line-height: 1.02; text-transform: uppercase; }
.fcard-txt .go { margin-top: auto; padding-top: 8px; font-family: var(--head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leather); }
.kind { align-self: flex-start; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; background: var(--ink); color: var(--sand); }
.kind.question { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Featured story: wide card across the top */
@media (min-width: 700px) {
  .fcard.feat { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; background: var(--ink); color: var(--sand); border-color: var(--ink); }
  .fcard.feat .fcard-img { aspect-ratio: auto; min-height: 380px; }
  .fcard.feat .fcard-txt { justify-content: center; padding: 40px; gap: 12px; }
  .fcard.feat .fcard-txt b { font-size: clamp(2rem, 3.4vw, 3rem); }
  .fcard.feat .kind { background: var(--tan); color: var(--ink); }
  .fcard.feat .tag.keep, .fcard.feat .go { color: var(--tan); }
  .fcard.feat .go { margin-top: 8px; }
}
@media (min-width: 700px) { .fn-grid .fcard.feat.fn-off { display: none; } }
/* Phone: compact rows, photo left, so 25 notes stay easy to scan */
@media (max-width: 699px) {
  .fn-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px))); padding-right: 20px; }
  .fn-filter::-webkit-scrollbar { display: none; }
  .fn-filter button { flex: 0 0 auto; }
  .fcard:not(.feat) { flex-direction: row; }
  .fcard:not(.feat) .fcard-img { flex: 0 0 34%; aspect-ratio: auto; min-height: 128px; }
  .fcard:not(.feat) .fcard-txt { padding: 12px 14px; gap: 6px; }
  .fcard:not(.feat) .fcard-txt b { font-size: 1.15rem; }
  .fcard:not(.feat) .go { display: none; }
  .fcard .tag.keep, .fcard .kind { font-size: .72rem; }
  .fcard.feat .fcard-txt b { font-size: 1.7rem; }
}

/* Home website card: the site on a studio display, over a blurred copy of the same photo */
.use-mon { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #111110; }
.use-mon .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.42) saturate(.85); transform: scale(1.15); }
.use-mon .mon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 84%; display: flex; flex-direction: column; align-items: center; }
.use-mon .scr { position: relative; z-index: 1; display: block; height: 70%; aspect-ratio: 16 / 9; padding: 0; background: #030303; border-radius: 4px;
  box-shadow: 0 0 0 1px #2a2b2d, 0 0 0 2.2px #b7babe, 0 0 0 2.8px #6f7276, 0 22px 38px -8px rgba(0,0,0,.6); }
.use-mon .scr img { position: absolute; inset: 2.3% 1.3%; width: 97.4%; height: 95.4%; }
.use-mon .scr::after { content: ""; position: absolute; inset: 2.3% 1.3%; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%); }
.use-mon .stand { display: block; width: 100%; height: auto; margin-top: -1px; }
.use:hover .use-mon .scr img { transform: scale(1.02); }
/* Websites page: example sites on monitors */
.site-exs { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 760px) { .site-exs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.site-ex { display: grid; grid-template-rows: auto 1fr; background: var(--coal); border: 1px solid var(--line-dk); text-decoration: none; color: var(--sand); min-width: 0; transition: border-color .35s ease; }
.site-ex:hover { border-color: var(--dust); }
.site-ex .txt { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.site-ex .txt .tag.keep { display: block !important; color: var(--tan); }
.site-ex .txt b { font-family: var(--head); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1; text-transform: uppercase; }
.site-ex .txt > span:not(.tag):not(.go) { color: rgba(236,230,218,.78); line-height: 1.5; }
.site-ex .txt .go { margin-top: auto; padding-top: 12px; font-family: var(--head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); }
.site-ex:hover .use-mon .scr img { transform: scale(1.02); }
/* Contact: the two booking cards share one simple pattern */
.path2.fast .gos { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.path2.fast .go { font-family: var(--head); font-weight: 700; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid rgba(17,17,16,.45); padding-bottom: 2px; }
.path2.fast .go:hover { border-bottom-color: var(--ink); }
.paths2 { align-items: stretch; }
.path2 { height: 100%; }
.ex-lede { margin-top: 16px; max-width: 60ch; color: rgba(236,230,218,.82); }
/* Contact emergency strip: heading over one line of copy on the left, button centered on the right */
.emer-strip .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; padding-block: 24px; }
.emer-strip .es-txt { display: grid; gap: 4px; font-size: 1.08rem; line-height: 1.45; }
.emer-strip .es-txt b { display: flex; align-items: center; gap: 12px; }
.emer-strip .dot.live { margin-left: 3px; }
.emer-strip .btn { white-space: nowrap; }
@media (max-width: 759px) { .emer-strip .wrap { grid-template-columns: 1fr; } }
/* Trusted Sources: a last card alone on its row spans the row */
@media (min-width: 640px) and (max-width: 999px) { .srcs > .src:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .srcs > .src:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }