/* CoreShift Digital's original Noira photograph, font faces and palette.
   Layout and business content belong to the main site. */
:root {
  color-scheme: dark;
  --bg: #2A2419;
  --text: #F6F2EA;
  --muted: #F6F2EA;
  --faint: #F6F2EA;
  --text-dim: #F6F2EA;
  --accent: #B8863B;
  --surface: rgba(24,18,8,.34);
  --surface-2: rgba(24,18,8,.52);
  --line: rgba(246,242,234,.30);
  --display: 'Archivo Condensed', sans-serif;
  --font: 'IBM Plex Sans', sans-serif;
}
body { background: var(--bg); isolation: isolate; }
.desert-plate {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #2A2419 image-set(url('/assets/desert/desert-dusk-wide.avif') type('image/avif'), url('/assets/desert/desert-dusk-wide.webp') type('image/webp')) 60% 50% / cover no-repeat;
}
.desert-plate::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(24,18,8,.16),transparent 22%,transparent 74%,rgba(24,18,8,.18)),linear-gradient(rgba(24,18,8,.62),rgba(24,18,8,.62));
}
@media(max-aspect-ratio:1/1) {
  .desert-plate { background-image: image-set(url('/assets/desert/desert-dusk-tall.avif') type('image/avif'),url('/assets/desert/desert-dusk-tall.webp') type('image/webp')); background-position: 50% 40%; }
}
h1,h2,.tunnel-copy h1,.tunnel-scene h2,.closing h2,.editorial-copy h2,.demo-showcase h2 {
  font-family: var(--display); font-weight: 700; font-stretch: 62%;
  text-transform: uppercase; letter-spacing: -.005em; line-height: .96;
}
h1,.tunnel-copy h1 { font-size: clamp(2.75rem,4.6vw,4.5rem); max-width: 24ch; }
h2,.tunnel-scene h2 { font-size: clamp(2rem,3.2vw,3rem); max-width: 30ch; }
h3,.service-name h3,.work-grid article h3,.work-feature h3,.two-column h3,.industry-directory h3 {
  font-family: Archivo,sans-serif; font-stretch: 125%; font-weight: 600;
  letter-spacing: -.005em; font-size: clamp(1.25rem,1.8vw,1.5rem); line-height: 1.25;
}
.container { max-width: 1280px; padding-inline: clamp(1.25rem,4vw,3rem); }
.section,.section:nth-child(2n+3),.tunnel-story,.tunnel-bottom,
.tunnel-copy,.tunnel-scene,html:not(.tunnel-enhanced) .tunnel-copy,
html.tunnel-enhanced .tunnel-copy { background: transparent; }
.section.services,.section.workbench { background: transparent !important; }
.section { padding-block: clamp(3.5rem,7vw,6rem); }
.page-hero:after,.closing:after { display: none; }
.page-hero .lede,.tunnel-copy .lede { max-width: 55ch; }
.tunnel-copy h1 em { color: var(--text); }
.eyebrow,.scene-number,.service-index,.workbench-step,.connection-flow span,
.pricing-columns .price-caption,.workflow-steps h3:before,.process h3:before,
.wt-k,.wt-channel { color: var(--text); }
.eyebrow { font-family: 'IBM Plex Mono',monospace; font-weight: 500; font-size: .8rem; }
.eyebrow:before { content: ''; display: inline-block; width: 1.5rem; height: 2px; background: var(--accent); margin-right: .65rem; vertical-align: middle; }
.site-header {
  background: linear-gradient(rgba(24,18,8,.34),rgba(24,18,8,.34)),rgba(246,242,234,.19);
  border-color: var(--line); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 24px 60px -12px rgba(30,22,10,.45);
}
.site-header .brand { letter-spacing: .015em; font-weight: 600; }
.services-dropdown { background: #30281d; border-color: var(--line); }
.services-dropdown a:hover { background: rgba(246,242,234,.13); }
.button,.nav-button,.skip-link { background: var(--accent); color: #2A2419; }
.button:hover,.nav-button:hover { background: #c99a50; color: #2A2419; }
.quiet-button,.tunnel-copy .quiet-button { background: rgba(24,18,8,.22); color: var(--text); border-color: var(--line); }
a:hover,.text-link:hover { color: var(--text); }
.text-link:hover { border-color: var(--accent); }
:is(a,button,summary,input,select,textarea):focus-visible { outline-color: var(--accent); }
.service-portrait,.service-sample,.pricing-columns,.price-grid,.score-grid article,
.two-column article,.connection-flow,.wt-stage,.wt-panel,.contact-aside,.calculator,
.home-audit .container {
  background: rgba(24,18,8,.34); border: 1px solid var(--line); border-radius: 20px;
  backdrop-filter: blur(22px); box-shadow: 0 24px 60px -12px rgba(30,22,10,.25);
}
.service-portrait { padding: 1.2rem; }
.service-portrait .service-sample { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.sample-tiles div,input,textarea,select,.wt-msg,.wt-msg.wt-bot { background: rgba(24,18,8,.34); color: var(--text); }
input::placeholder,textarea::placeholder { color: rgba(246,242,234,.72); }
select option { background: #2A2419; color: var(--text); }
.home-audit { padding-top: 3rem; }
.home-audit .container { width: calc(100% - 2.5rem); padding: clamp(1.4rem,4vw,3rem); max-width: 1184px; }
.home-audit .score-grid { margin-bottom: 0; }
.price-amount,.score { font-family: 'IBM Plex Mono',monospace; font-weight: 500; }
.closing,.site-footer { background: linear-gradient(transparent,rgba(24,18,8,.52)); }
.closing h2 { font-weight: 700; letter-spacing: -.005em; }
.service-local-nav { margin-top: 1.75rem; }
.site-footer h2 { font-family: 'IBM Plex Mono',monospace; font-size: .875rem; }
.text-link { border-color: var(--line); }
::selection { background: var(--accent); color: #2A2419; }
@media(min-width:1240px) {
  .site-header #navigation { gap: 1.15rem; }
  .site-header #navigation>a:not(.button),.site-header .services-menu>summary { font-size: .84rem; }
  .site-header .nav-button { font-size: .84rem; }
}
@media(max-width:1239px) {
  .site-header #navigation.is-open { background: #30281d; border-radius: 20px; }
}
@media(max-width:600px) {
  h1,.tunnel-copy h1 { font-size: clamp(2.65rem,10vw,3.4rem); }
  h2,.tunnel-scene h2 { font-size: 2.25rem; }
  .home-audit .container { width: calc(100% - 1.5rem); }
}
@media(prefers-reduced-transparency:reduce) {
  .site-header,.home-audit .container,.service-sample,.pricing-columns,.score-grid article { background: #2A2419; backdrop-filter: none; }
}

/* 2026-09-15 — Darrin: the opening line is the right size; the three service scenes under it
   were too small. They now use the SAME clamp as the hero h1, and their paragraph the same as
   the hero lede. Specificity, not load order, is what decides here: `.tunnel-story--text
   .tunnel-copy h1` in desert-overrides.css (three classes) already beats `h1,.tunnel-copy h1`
   in this file, so these matching rules have to carry the same three-class weight.
   The generic `h2` rule above still governs every other heading on the site — those do NOT grow. */
.tunnel-story--text .tunnel-scene h2 { font-size: clamp(4rem, 7.5vw, 7.2rem); max-width: none; line-height: .98; }
.tunnel-story--text .tunnel-scene p { font-size: clamp(1.25rem, 1.7vw, 1.5rem); max-width: 54ch; }
.tunnel-story--text .scene-number { font-size: .85rem; }
@media (max-width: 1000px) {
  .tunnel-story--text .tunnel-scene h2 { font-size: 5rem; }
}
@media (max-width: 600px) {
  .tunnel-story--text .tunnel-scene h2 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .tunnel-story--text .tunnel-scene p { font-size: 1.15rem; }
}
/* A 12-word heading needs ~700px of height at 1440 (108px type) but only ~545px at 1280 (96px),
   so the clip is a wide-and-short window, not a short one. Measured: 1440x900 fits, 1440x760
   does not, 1280x800 does. The step-down is therefore scoped to >=1300 wide AND <=860 tall —
   everywhere else the scenes match the h1 exactly. */
@media (min-width: 1300px) and (max-height: 860px) {
  .tunnel-story--text .tunnel-scene h2 { font-size: clamp(3rem, 5.4vw, 5rem); }
  .tunnel-story--text .tunnel-scene p { font-size: 1.2rem; }
}

/* 2026-09-15 — photography. Card-top band and the flipped editorial spread.
   The thumbnail reuses the 700px WebP the phone already downloads, so a card costs no extra
   asset. A fixed aspect band keeps a grid even when the copy lengths differ.
   ⚠️ No negative side margins: desert-overrides gives .work-grid article `padding: 2rem 0`
   and the catalog cards `padding: 1.8rem 0` — zero horizontal padding — so pulling the image
   out by 1.5rem each side overflowed the page by 8px at 390. Measured, not assumed. */
.card-thumb { margin: 0 0 1.4rem; border-radius: var(--radius); overflow: hidden; }
.card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
.work-grid article, .catalog-grid article { overflow: hidden; }
.catalog-grid--cards .card-thumb img { aspect-ratio: 3/2; }
.editorial-spread--flip { direction: rtl; }
.editorial-spread--flip > * { direction: ltr; }
@media (max-width: 800px) {
  .editorial-spread--flip { direction: ltr; }
}

/* R3: inner spacing for homepage cards, records, controls and bordered links.
   The audit container retains its existing clamp. Decorative image borders and
   page-wide backgrounds use their existing content container inset. */
.page-home { --panel-x: 20px; --panel-y: 18px; }
.page-home :is(.service-portrait,.service-sample,.sample-approval,
 .service-sample dl>div,.workbench-record-head,.workbench-fields>div,
 .workbench-approval,.workbench-flow,.workbench-flow>li,.pricing-columns,
 .faq details,.text-link,.tunnel-track a,.service-name>a,#audit-findings article) {
  padding: var(--panel-y) var(--panel-x);
}
.page-home .service-list>article { padding-inline: var(--panel-x); min-width: 0; }
.page-home .service-list>article>div { min-width: 0; }
.page-home .process>li { padding: 24px var(--panel-x) var(--panel-y); }
.page-home :is(.button,.quiet-button,#audit-domain) {
  padding-block: var(--panel-y); padding-inline: max(20px, var(--panel-x));
  white-space: normal;
}
.page-home .service-sample dl>div { grid-template-columns: 1fr; gap: .3rem; }
.page-home .workbench-record-head { flex-wrap: wrap; }
.page-home .workbench-approval>div { flex-wrap: wrap; }
.page-home .workbench-approval dd { text-align: left; }
.page-home .workbench-fields>div { grid-template-columns: 1fr; gap: .3rem; }
.page-home .workbench-fields dd { overflow-wrap: anywhere; }
.page-home .faq summary { padding: 0 2rem 0 0; min-height: 28px; }
.page-home .faq summary:after { top: -.25rem; }
.page-home .faq details>div { padding-top: 18px; }
@media (max-width: 900px) {
  .page-home .workbench-flow { grid-template-columns: 1fr; }
  .page-home .workbench-flow>li+li { border-left: 0; border-top: 1px solid var(--line); }
  .page-home .workbench-explain,.page-home .workbench-flow h3 { min-height: 0; }
}
@media (max-width: 600px) {
  .page-home { --panel-x: 16px; --panel-y: 16px; }
  .page-home :is(.button,.quiet-button,#audit-domain) { padding: var(--panel-y) var(--panel-x); }
  .page-home .process>li { padding: var(--panel-y) var(--panel-x); }
}
/* R3: scale the existing clamps, scoped to the two requested headings. */
.services h2 { font-size: clamp(3rem,4.8vw,4.5rem); }
.service-name h3 { font-size: clamp(2.125rem,3.06vw,2.55rem); max-width: none; }
.service-index { font-size: 1rem; }
@media (min-width: 601px) and (max-width: 900px) {
  .page-home .service-list>article { grid-template-columns: 1fr; }
  .page-home .service-list>article:nth-child(2) .service-name { order: 0; }
  .page-home .service-list>article:nth-child(2)>div:last-child { order: 0; }
}
/* R3: the website explanation accompanies the working audit. */
.audit-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(1.5rem,3vw,3rem); align-items: start; }
.audit-layout>* { min-width: 0; }
.audit-website-copy h3 { line-height: 1.35; }
.audit-website-copy p { max-width: 40ch; }
.home-audit .audit-entry { flex-wrap: wrap; }
.home-audit .audit-entry input { flex-basis: 100%; margin-bottom: 0; }
.home-audit .score-grid article { padding: var(--panel-y) var(--panel-x); min-width: 0; }
.home-audit .score-grid h3 { font-size: 1rem; }
.home-audit .score { font-size: clamp(1.5rem,2.8vw,2.6rem); white-space: nowrap; }
.home-audit #audit-version { overflow-wrap: anywhere; }
.page-home .service-list>article:first-child { grid-template-columns: 1fr; }
.page-home .service-list>article:first-child .service-portrait { max-width: none; }
.page-home .service-list>article:first-child .service-sample { max-width: none; }
.page-home .sample-machines dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
@media (max-width: 900px) { .audit-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .page-home .sample-machines dl { grid-template-columns: 1fr; }
  .home-audit .score-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-industries-agriculture .editorial-section .editorial-spread { grid-template-columns: 1fr; }
}