:root {
  --kraft-50:  #FBF8F3;
  --kraft-100: #F5EFE4;
  --kraft-200: #EDE3D2;
  --kraft-300: #DFD1B9;
  --kraft-400: #C4B294;

  --forest-900: #12271F;
  --forest-800: #16302A;
  --forest-700: #1E3A32;
  --forest-600: #2A4C42;
  --forest-400: #5C7A6E;

  --copper-600: #96682F;
  --copper-500: #B08A4A;
  --copper-400: #C9A469;
  --copper-100: #F0E3CE;

  --ink-900: #1B1713;
  --ink-700: #3B342C;
  --ink-500: #6B6055;
  --ink-400: #8B8073;

  --white: #fff;
  --ok: #2F6B4F;
  --warn: #9A6B15;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1200px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(27,23,19,.06), 0 2px 8px rgba(27,23,19,.04);
  --shadow-md: 0 2px 4px rgba(27,23,19,.05), 0 12px 32px rgba(27,23,19,.08);
  --shadow-lg: 0 4px 8px rgba(27,23,19,.06), 0 24px 64px rgba(27,23,19,.12);
  --photo-square: 1 / 1;
  --tap-target: 44px;
  --header-height: 76px;
  --dropdown-gap: 14px;
  --space-sm: .5rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --gallery-caption: .7rem;
  --caption-shade: rgba(18,39,31,.94);
}

/* PouchWorks - premium flexible packaging engine
   Palette: warm kraft neutrals · deep forest heritage · copper accent */



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

/* scroll-padding-top keeps the 76px sticky header from covering whatever we
   scroll to - in-page anchors and every scrollIntoView({block:'start'}) call
   (the quote stepper and the mockup studio mount both land under it otherwise). */
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kraft-50);
  color: var(--ink-900);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--forest-700); text-decoration-color: var(--copper-400); text-underline-offset: 3px; }
a:hover { color: var(--copper-600); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.08rem; font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }
/* Visual-level utilities. Semantic heading order (h1>h2>h3) is set by the tag;
   these keep the designed type scale when the correct tag is a bigger one. */
h2.h3, h3.h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h3.h4, h2.h4 { font-size: 1.08rem; font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }
p  { margin: 0 0 1.1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.narrow { max-width: 760px; }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper-600);
  margin-bottom: 1rem;
  display: block;
}
.eyebrow--light { color: var(--copper-400); }

.lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink-700); line-height: 1.6; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  padding: .95rem 1.75rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--forest-700); color: var(--kraft-50); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--forest-800); color: var(--white); box-shadow: var(--shadow-md); }
.btn--copper { background: var(--copper-500); color: #241703; }
.btn--copper:hover { background: var(--copper-400); color: #241703; }
.btn--ghost { background: transparent; color: var(--forest-700); border-color: var(--kraft-300); }
.btn--ghost:hover { border-color: var(--forest-700); color: var(--forest-800); }
.btn--ghost-light { background: transparent; color: var(--kraft-100); border-color: rgba(240,227,206,.35); }
.btn--ghost-light:hover { border-color: var(--copper-400); color: var(--white); }
.btn--sm { padding: .6rem 1.1rem; font-size: .85rem; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,248,243,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--kraft-200);
}
.site-header__in { display: flex; align-items: center; gap: 2rem; height: 76px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 30px; height: 34px; flex-shrink: 0; }
.brand__name {
  font-family: var(--serif); font-size: 1.4rem; color: var(--forest-800);
  letter-spacing: -0.015em; line-height: 1;
}
.brand__name em { font-style: normal; color: var(--copper-600); }

.nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
/* Scoped with :not(.btn) deliberately. `.nav a` (0-1-1) outranks `.btn--primary`
   (0-1-0), so an unscoped rule repainted the header CTA in --ink-700 on its
   --forest-700 fill (~1.3:1 - the label was effectively invisible) and drew the
   copper hover underline straight across the button. */
.nav a:not(.btn) {
  font-size: .92rem; color: var(--ink-700); text-decoration: none; font-weight: 500;
  position: relative; padding: .25rem 0;
}
.nav a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--copper-500); transition: right .25s ease;
}
.nav a:not(.btn):hover { color: var(--forest-800); }
.nav a:not(.btn):hover::after { right: 0; }
.nav a:not(.btn)[aria-current="page"] { color: var(--forest-800); }
.nav a:not(.btn)[aria-current="page"]::after { right: 0; }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--forest-800); margin: 5px 0; transition: .2s; }

/* Dropdown */
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + var(--dropdown-gap)); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: var(--white); border: 1px solid var(--kraft-200); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: .6rem; min-width: 270px;
  opacity: 0; visibility: hidden; transition: .2s ease;
}
/* Keep the pointer inside the dropdown while crossing its visual gap. */
.drop::before {
  content: ''; position: absolute; inset: auto 0 100%;
  height: var(--dropdown-gap);
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop a {
  display: block; padding: .55rem .8rem; border-radius: 2px; font-size: .9rem;
  color: var(--ink-700);
}
.drop a::after { display: none; }
.drop a:hover { background: var(--kraft-100); color: var(--forest-800); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(170deg, var(--forest-800) 0%, var(--forest-900) 100%);
  color: var(--kraft-100);
  position: relative; overflow: hidden;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 15%, rgba(176,138,74,.16), transparent 65%),
    radial-gradient(ellipse 50% 45% at 10% 90%, rgba(176,138,74,.08), transparent 60%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { color: var(--kraft-50); margin-bottom: .35em; }
.hero h1 em { font-style: italic; color: var(--copper-400); }
.hero .lede { color: rgba(245,239,228,.78); max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }
.hero__trust {
  margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(196,178,148,.2);
  display: flex; flex-wrap: wrap; gap: 2.25rem;
}
.hero__trust div { min-width: 0; }
.hero__trust strong { display: block; font-family: var(--serif); font-size: 1.75rem; color: var(--copper-400); line-height: 1; }
.hero__trust span { font-size: .78rem; color: rgba(245,239,228,.6); letter-spacing: .04em; }

/* ---------- Offer banner ---------- */
.offer {
  background: var(--copper-500); color: #221602;
  padding: 1rem 0; font-size: .93rem; font-weight: 500;
}
.offer__in { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; }
.offer strong { font-weight: 700; }
.offer a { color: #221602; font-weight: 700; text-decoration-thickness: 1.5px; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--kraft { background: var(--kraft-100); }
.section--paper { background: var(--white); }
.section--forest { background: var(--forest-800); color: var(--kraft-100); }
.section--forest h2, .section--forest h3 { color: var(--kraft-50); }
.section--forest .lede { color: rgba(245,239,228,.75); }

.section__head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head--center { margin-inline: auto; text-align: center; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--kraft-200); border-radius: var(--radius);
  padding: 1.75rem; transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.card:hover { border-color: var(--kraft-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-500); font-size: .95rem; margin-bottom: 0; }
.card__meta { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-600); font-weight: 600; }
.stat-value {
  margin: 0 0 .4rem;
  color: var(--ink-900);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* Vertical card */
.vcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--kraft-200); border-radius: var(--radius);
  overflow: hidden; transition: .25s ease;
}
.vcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--kraft-300); color: inherit; }
.vcard__art { background: var(--kraft-100); padding: 2rem 1rem 0; display: flex; justify-content: center; align-items: flex-end; min-height: 190px; }
.vcard__art svg { height: 160px; width: auto; }

/* The photo variant, matching .fcard__art--photo on pouches.html exactly: Iris's
   category frames are full-bleed studio scenes, not cut-out product shots, so they
   fill a square edge to edge instead of being bottom-aligned inside padding the way
   an SVG illustration needs. No radius or shadow of its own - .vcard already sets
   border-radius + overflow:hidden, so the top corners clip to the card for free.
   The modifier stays rather than replacing the base rule: the SVG fallback is still
   what a vertical with no photo yet renders. */
.vcard__art--photo {
  display: block; padding: 0; min-height: 0; aspect-ratio: var(--photo-square);
  overflow: hidden; background: var(--kraft-100);
}
.vcard__art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vcard__body { padding: 1.5rem 1.5rem 1.75rem; border-top: 1px solid var(--kraft-200); }
.vcard__body h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.vcard__body p { color: var(--ink-500); font-size: .9rem; margin: 0 0 1rem; }
.vcard__more { font-size: .82rem; font-weight: 600; color: var(--copper-600); letter-spacing: .02em; }
.vcard:hover .vcard__more { color: var(--forest-700); }

/* Format card */
.fcard { text-align: center; }
a.fcard { color: inherit; text-decoration: none; }
a.fcard:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.fcard[id] { scroll-margin-top: calc(var(--header-height) + 2rem); }
.fcard__art { min-height: 150px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 1.25rem; }
.fcard__art svg { height: 130px; width: auto; }

/* The photo variant. Iris's frames are full-bleed studio scenes rather than cut-out
   product shots, so they get a framed square instead of the bottom-aligned,
   free-floating treatment the SVGs need. Every catalog format has a photo now, but
   the modifier stays: the SVG fallback is still what a new, un-shot format renders. */
.fcard__art--photo {
  display: block; min-height: 0; aspect-ratio: var(--photo-square); overflow: hidden;
  border-radius: var(--radius); background: var(--kraft-100);
  box-shadow: var(--shadow-sm);
}
.fcard__art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fcard .abbr {
  font-size: .68rem; letter-spacing: .14em; color: var(--copper-600);
  font-weight: 700; display: block; margin-bottom: .4rem;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--kraft-200); border-radius: var(--radius); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
thead th {
  background: var(--kraft-100); text-align: left; padding: .95rem 1.1rem;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-700);
  font-weight: 700; border-bottom: 1px solid var(--kraft-200); white-space: nowrap;
}
tbody td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--kraft-100); color: var(--ink-700); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--kraft-50); }
td strong { color: var(--ink-900); }

/* ---------- Spec list ---------- */
.spec { display: grid; grid-template-columns: 150px 1fr; gap: .5rem 1.25rem; font-size: .92rem; }
.spec dt { color: var(--ink-400); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding-top: .2rem; }
.spec dd { margin: 0; color: var(--ink-700); }

/* ---------- Pills ---------- */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  font-size: .8rem; padding: .35rem .8rem; border-radius: 100px;
  background: var(--kraft-100); border: 1px solid var(--kraft-200); color: var(--ink-700);
}
.pill--copper { background: var(--copper-100); border-color: var(--copper-400); color: var(--copper-600); font-weight: 600; }
.pill--forest { background: var(--forest-700); border-color: var(--forest-700); color: var(--kraft-100); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 2rem; }
.step { position: relative; padding-left: 4.25rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.3rem;
  font-family: var(--serif); font-size: 2rem; color: var(--copper-500); line-height: 1;
}
.step h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.step p { color: var(--ink-500); font-size: .93rem; margin: 0; }
.section--forest .step p { color: rgba(245,239,228,.65); }
.section--forest .step::before { color: var(--copper-400); }

/* ---------- Callouts ---------- */
.callout {
  border-left: 2px solid var(--copper-500); background: var(--kraft-100);
  padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: .93rem;
  color: var(--ink-700);
}
.callout strong { color: var(--ink-900); }
.callout--note { border-left-color: var(--forest-400); }
.callout p:last-child { margin-bottom: 0; }

.source-note {
  font-size: .78rem; color: var(--ink-400); line-height: 1.55;
  border-top: 1px dashed var(--kraft-300); padding-top: .9rem; margin-top: 1.25rem;
}
.source-note a { color: var(--ink-500); }
.source-note code { background: var(--kraft-100); padding: .1rem .35rem; border-radius: 2px; font-size: .95em; }

/* ---------- Forms ---------- */
.form-shell {
  background: var(--white); border: 1px solid var(--kraft-200);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.field { margin-bottom: 1.4rem; }
/* A radio/checkbox group is a fieldset so the question is announced with the
   options. Reset the UA border/padding so it looks identical to a .field div. */
fieldset.field { border: 0; padding: 0; min-width: 0; }
fieldset.field > legend.field-legend { padding: 0; float: none; width: 100%; }
.field > label, .field-legend {
  display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-700); margin-bottom: .55rem;
}
.field .hint { font-size: .82rem; color: var(--ink-400); margin: -.25rem 0 .6rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink-900);
  padding: .8rem .95rem; border: 1px solid var(--kraft-300); border-radius: var(--radius);
  background: var(--kraft-50); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--forest-600); background: var(--white);
  box-shadow: 0 0 0 3px rgba(30,58,50,.09);
}
textarea { resize: vertical; min-height: 110px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6055' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
.choice {
  position: relative; display: flex; align-items: center; gap: .6rem;
  padding: .8rem .9rem; border: 1px solid var(--kraft-300); border-radius: var(--radius);
  background: var(--kraft-50); cursor: pointer; font-size: .89rem; transition: .15s ease;
}
.choice:hover { border-color: var(--copper-400); background: var(--white); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box {
  width: 16px; height: 16px; border: 1px solid var(--kraft-400); border-radius: 2px;
  flex-shrink: 0; display: grid; place-items: center; background: var(--white); transition: .15s;
}
.choice input[type="radio"] + .choice__box { border-radius: 50%; }
.choice__box::after { content: ''; width: 8px; height: 8px; background: var(--white); transform: scale(0); transition: transform .15s; }
.choice input[type="radio"] + .choice__box::after { border-radius: 50%; }
.choice input:checked + .choice__box { background: var(--forest-700); border-color: var(--forest-700); }
.choice input:checked + .choice__box::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--forest-700); background: var(--white); box-shadow: 0 0 0 1px var(--forest-700); }
/* The real <input> is opacity:0, so the global :focus-visible outline lands on an
   element nobody can see and the keyboard path through these tiles has no ring at
   all. Hoist it onto the tile itself. Copper, not forest, so the focused-but-not-
   yet-chosen tile stays distinguishable from the selected one. */
.choice:has(input:focus-visible) { outline: 2px solid var(--copper-500); outline-offset: 2px; }

/* Photo choice tiles (quote step 2, "Format"). The radio dot moves to the corner
   of the image so the tile reads as a product card, but the DOM order stays
   input -> .choice__box so the adjacent-sibling checked state above still fires. */
.choice-grid--photo { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.choice--photo { flex-direction: column; align-items: stretch; gap: .6rem; padding: .55rem .55rem .8rem; text-align: center; }
.choice--photo .choice__box { position: absolute; top: .9rem; right: .9rem; z-index: 2; box-shadow: 0 0 0 3px var(--kraft-50); }
.choice--photo:has(input:checked) .choice__box { box-shadow: 0 0 0 3px var(--white); }
.choice--photo .choice__thumb {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: calc(var(--radius) - 3px); background: var(--kraft-100);
}
.choice--photo .choice__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* All eight tiles are photographs now, stick pack included. This rule is the
   fallback for a format that lands in the catalog before its frame does:
   formatArt() emits the vector illustration, and its viewBox letterboxes into
   the same square the photos fill. */
.choice--photo .choice__thumb svg { display: block; width: 100%; height: 100%; padding: .6rem; }
.choice--photo .choice__label { font-weight: 600; line-height: 1.25; }

/* Phones fall to ONE column and step 2 becomes a 2,600px scroll for 8 tiles.
   The arithmetic: .wrap eats 2 x 20px of gutter and .form-shell another
   2 x 28px + 2px of border, so the grid gets viewport - 98px. auto-fill needs
   332.8px for a second 160px track, which means two columns only appear at
   431px and up. A 430px iPhone Pro Max misses it by 0.8px. Below that the
   tiles do not need to be 160px wide to be recognisable, so pin two columns
   and let them shrink. minmax(0, 1fr) not (160px, 1fr) or the track refuses
   to go under its floor and the row overflows. */
@media (max-width: 520px) {
  .choice-grid--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .choice--photo { font-size: .84rem; }
  .choice--photo .choice__box { top: .7rem; right: .7rem; }
}

.error { color: #A02C1E; font-size: .82rem; margin-top: .4rem; display: none; }
.field.is-invalid .error { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #A02C1E; }

/* Stepper */
.stepper { display: flex; gap: .5rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--kraft-200); }
.stepper__item {
  flex: 1; padding: 0 0 .9rem; font-size: .8rem; font-weight: 600; color: var(--ink-400);
  border-bottom: 2px solid transparent; margin-bottom: -1px; letter-spacing: .04em;
}
.stepper__item .n {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--kraft-200); color: var(--ink-500); font-size: .7rem; margin-right: .45rem;
}
.stepper__item.is-active { color: var(--forest-800); border-bottom-color: var(--copper-500); }
.stepper__item.is-active .n { background: var(--forest-700); color: var(--kraft-50); }
.stepper__item.is-done .n { background: var(--copper-500); color: #241703; }

.step-panel { display: none; }
.step-panel.is-active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.form-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--kraft-200); }

/* Price box */
.pricebox {
  border: 1px solid var(--copper-400); background: var(--copper-100);
  border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem;
}
.pricebox__amt { font-family: var(--serif); font-size: 2.5rem; color: var(--forest-800); line-height: 1; margin-bottom: .3rem; }
.pricebox__amt small { font-size: .95rem; font-family: var(--sans); color: var(--ink-500); }
.pricebox p { font-size: .88rem; color: var(--ink-700); margin: 0; }

/* Summary */
.summary { background: var(--kraft-100); border: 1px solid var(--kraft-200); border-radius: var(--radius); padding: 1.5rem; }
.summary dl { display: grid; grid-template-columns: 130px 1fr; gap: .55rem 1rem; margin: 0; font-size: .9rem; }
.summary dt { color: var(--ink-400); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; padding-top: .15rem; }
.summary dd { margin: 0; color: var(--ink-900); }

/* Success */
.success-panel { display: none; text-align: center; padding: 1rem 0; }
.success-panel.is-active { display: block; animation: fade .3s ease; }
.success-mark {
  width: 62px; height: 62px; border-radius: 50%; background: var(--forest-700);
  display: grid; place-items: center; margin: 0 auto 1.5rem;
}
.success-mark svg { width: 28px; height: 28px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--forest-800); color: var(--kraft-100); text-align: center; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.cta-band h2 { color: var(--kraft-50); }
.cta-band p { color: rgba(245,239,228,.72); max-width: 46ch; margin-inline: auto; }
.cta-band .hero__cta { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-900); color: rgba(245,239,228,.62); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .89rem; }
.site-footer h4, .site-footer .footer-h {
  color: var(--kraft-100); font-family: var(--sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.site-footer a { color: rgba(245,239,228,.62); text-decoration: none; }
.site-footer a:hover { color: var(--copper-400); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(196,178,148,.14); }
.footer-brand .brand__name { color: var(--kraft-50); }
.footer-bottom { padding-top: 1.75rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }

/* ---------- Editorial photography ---------- */
.photo-frame {
  position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--kraft-200);
}
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-frame--accent::after {
  content: ''; position: absolute; inset: 12px; border: 1px solid rgba(201,164,105,.55);
  pointer-events: none;
}
.photo-frame--3-2 { aspect-ratio: 3 / 2; }
.photo-frame--1-1 { aspect-ratio: var(--photo-square); }

.editorial {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.editorial--reverse .photo-frame { order: -1; }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery__item {
  position: relative; border-radius: var(--radius); overflow: hidden;
  /* Use the same square crop as the catalog and industry photography. */
  box-shadow: var(--shadow-md); aspect-ratio: var(--photo-square);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem .7rem;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--kraft-50); background: linear-gradient(0deg, rgba(18,39,31,.82), transparent);
}

@media (max-width: 860px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial--reverse .photo-frame { order: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Breadcrumb ---------- */
.crumb { font-size: .82rem; color: var(--ink-400); padding: 1.5rem 0 0; }
.crumb a { color: var(--ink-500); text-decoration: none; }
.crumb a:hover { color: var(--copper-600); }
.crumb span { margin: 0 .5rem; color: var(--kraft-400); }

/* ---------- Page head ---------- */
.page-head { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--kraft-200); }
.page-head .lede { max-width: 60ch; }

/* ---------- Vertical hero ---------- */
.vhero { background: var(--kraft-100); border-bottom: 1px solid var(--kraft-200); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.vhero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* The homepage hero art column now holds a square photo-frame rather than a
   free-floating SVG. Capped so it stays a portrait beside the headline instead of
   ballooning to the full grid column on a wide desktop. */
.hero__art { display: flex; justify-content: center; align-items: center; }
.hero__art .photo-frame { width: 100%; max-width: 460px; }

.vhero__art { display: flex; justify-content: center; align-items: flex-end; }
.vhero__art svg { height: clamp(220px, 30vw, 330px); width: auto; filter: drop-shadow(0 18px 40px rgba(27,23,19,.16)); }
/* The vertical hero now holds a photo-frame; flex would leave it at intrinsic
   width and pinned to the bottom of the grid cell. */
.vhero__art .photo-frame { width: 100%; align-self: center; }

/* ---------- CRM table ---------- */
.crm-empty { text-align: center; padding: 4rem 1rem; color: var(--ink-400); background: var(--white); border: 1px dashed var(--kraft-300); border-radius: var(--radius); }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 2px; }
.badge--new { background: var(--copper-100); color: var(--copper-600); }
.badge--paid { background: #DCEBE1; color: var(--ok); }
.badge--free { background: var(--forest-700); color: var(--kraft-100); }

/* ---------- Mockup Studio (internal, crm.html only) ---------- */
.studio { background: var(--white); border: 1px solid var(--kraft-300); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.studio__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--kraft-200); background: var(--kraft-50); }
.studio__head h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.studio__body { padding: 1.75rem; }
.studio-empty { text-align: center; padding: 3.5rem 1rem; color: var(--ink-400); }

.engine-strip { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-500); margin-bottom: 1.5rem; }
.engine-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 2px; background: var(--forest-700); color: var(--kraft-100); }
.engine-badge--rules { background: var(--kraft-300); color: var(--ink-700); }
.engine-badge--degraded { background: #F4E3C4; color: var(--warn); }

.privacy { border: 1px solid var(--kraft-200); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.5rem; background: var(--kraft-50); font-size: .82rem; }
.privacy summary { cursor: pointer; font-weight: 600; color: var(--ink-700); }
.privacy dl { display: grid; grid-template-columns: 8rem 1fr; gap: .35rem 1rem; margin: .8rem 0 0; }
.privacy dt { color: var(--ink-400); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; padding-top: .1rem; }
.privacy dd { margin: 0; color: var(--ink-700); }

.conflict { border-left: 3px solid var(--copper-500); background: var(--kraft-50); padding: .9rem 1.1rem; margin-bottom: .75rem; border-radius: 0 var(--radius) var(--radius) 0; }
.conflict--high { border-left-color: #9A3B2F; }
.conflict--medium { border-left-color: var(--warn); }
.conflict--low { border-left-color: var(--forest-400); }
.conflict h5 { margin: 0 0 .3rem; font-family: var(--sans); font-size: .9rem; }
.conflict p { margin: 0; font-size: .84rem; color: var(--ink-500); }
.conflict .sev { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); margin-right: .5rem; }

.alt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.altcard { border: 1px solid var(--kraft-300); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; overflow: hidden; }
.altcard.is-selected { border-color: var(--copper-500); box-shadow: 0 0 0 2px rgba(176,138,74,.22); }
.altcard__art { background: var(--kraft-100); padding: 1.5rem; display: flex; justify-content: center; border-bottom: 1px solid var(--kraft-200); }
.altcard__art svg { height: 190px; width: auto; filter: drop-shadow(0 10px 24px rgba(27,23,19,.14)); }
.altcard__body { padding: 1.25rem 1.35rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.altcard__body h4 { margin: .1rem 0 .35rem; font-size: 1.05rem; }
.altcard__body .one-liner { font-size: .84rem; color: var(--ink-500); margin: 0 0 1rem; }
.altcard .spec { grid-template-columns: 6.5rem 1fr; gap: .3rem .8rem; font-size: .8rem; margin: 0 0 1rem; }
.altcard h6 { margin: 1rem 0 .3rem; font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.altcard p { font-size: .84rem; margin: 0; }
.altcard .altcard__foot { margin-top: auto; padding-top: 1.25rem; display: flex; gap: .5rem; flex-wrap: wrap; }

.dirchip { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 2px; background: var(--forest-700); color: var(--kraft-100); }
.dirchip--warn { background: #F4E3C4; color: var(--warn); }

.swatches { display: flex; gap: .4rem; margin: .4rem 0 0; }
.swatch { width: 1.9rem; height: 1.9rem; border-radius: 2px; border: 1px solid rgba(27,23,19,.12); }

.studio-meta { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--kraft-200); font-size: .78rem; color: var(--ink-400); display: flex; gap: 1.25rem; flex-wrap: wrap; }

@media (max-width: 1000px) { .alt-grid { grid-template-columns: 1fr; } }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; }
.center { text-align: center; }
.muted { color: var(--ink-400); }
.small { font-size: .86rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--copper-500); outline-offset: 2px; }

/* Bypass block (WCAG 2.4.1) - off-screen until focused, then pinned top-left
   above the offer bar and header so it is the first stop on every page. */
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  background: var(--forest-800); color: var(--kraft-50);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 860px) {
  .hero__in, .vhero__in { grid-template-columns: 1fr; }
  .hero__art, .vhero__art { order: -1; }
  .vhero__art svg { height: 220px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .spec { grid-template-columns: 1fr; gap: .15rem 0; }
  .spec dd { margin-bottom: .75rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__trust { gap: 1.5rem; }
  .stepper__item { font-size: 0; }
  .stepper__item .n { font-size: .7rem; margin: 0; }
  .summary dl { grid-template-columns: 1fr; gap: .1rem; }
  .summary dd { margin-bottom: .7rem; }
}

@media print { .site-header, .site-footer, .offer, .btn { display: none; } }

/* ------------------------------------------------------------------ privacy
   Support for the hardened quote/CRM flow: the bot trap, the PII mask on the
   lead desk, and prose lists on the privacy notice. */

/* Bot trap. Off-screen rather than display:none - some bots skip hidden inputs,
   but they happily fill a positioned one. Never shown, never focusable. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Masked contact details on the lead desk, revealed only on demand. */
.pii { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pii--masked { color: var(--ink-400, #8A8378); }

.ticks { list-style: none; padding: 0; margin: 1rem 0; }
.ticks li { position: relative; padding-left: 1.5rem; margin-bottom: .7rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--copper-500, #B08A4A);
}

.mt-1 { margin-top: 1rem; }

@media (max-width: 1100px) {
  .nav {
    position: absolute; inset: 100% 0 auto; background: var(--kraft-50); flex-direction: column;
    align-items: stretch; gap: 0; padding: 1rem var(--gut) 2rem; border-bottom: 1px solid var(--kraft-200);
    box-shadow: var(--shadow-md); display: none;
    /* The drawer holds 12 links + the CTA (~738px). Without a bounded height it
       is a fixed element taller than the viewport, so the last items - Contact
       and the primary "Get a Free Mockup" CTA - cannot be scrolled to at all. */
    max-height: calc(100vh - var(--nav-top, var(--header-height)));
    max-height: calc(100dvh - var(--nav-top, var(--header-height)));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--kraft-200); }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 1rem; justify-content: center; border-bottom: 0; }
  .nav-toggle { display: block; }
  .drop { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0; background: transparent; }
  .has-drop:hover .drop, .has-drop:focus-within .drop { transform: none; }
  .drop::before { display: none; }
}

/* Shared photo crops and accessible controls. */
.gallery__cap { font-size: var(--gallery-caption); background: var(--caption-shade); padding: var(--space-sm); letter-spacing: normal; }
.nav-toggle { min-width: var(--tap-target); min-height: var(--tap-target); }
.grid > *, .editorial > *, .hero__in > *, .vhero__in > * { min-width: 0; }
.brand__mark path:first-child { fill: var(--forest-700); }
.brand__mark path:nth-child(2) { fill: var(--copper-500); }
.brand__mark path:nth-child(3) { stroke: var(--copper-400); }
@media (max-width: 620px) {
  .hero__cta { align-items: stretch; }
  .btn { max-width: 100%; white-space: normal; justify-content: center; text-align: center; }
  .hero__cta .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}