/* Simporter: component layer on top of the compiled Tailwind build.
   Tokens mirror tailwind.config.js so both files agree on colour and radius. */
:root {
  --paper: #F4EFE6;
  --paper-white: #FFFDF8;
  --sand: #E8DFCE;
  --line: #D9CFBD;
  --ink: #1C1917;
  --ink-soft: #4A433C;
  --ink-mute: #6B6258;
  --ink-deep: #141110;
  --stamp: #C43D12;
  --stamp-deep: #A8340F;
  --stamp-light: #F0895B;
  --moss: #2F4A3A;
  --fog: #BDB3A3;
  --r-paper: 4px;
  --r-card: 12px;
  --ease-thump: cubic-bezier(.2, 1.5, .35, 1);
}

html { scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; background: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

::selection { background: var(--stamp); color: var(--paper-white); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--stamp-light); }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .75rem 1rem; border-radius: var(--r-paper); }
.skip-link:focus { top: 1rem; }

/* ---------- Type ---------- */
.display { font-family: Fraunces, Georgia, serif; font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.02em; }
.display em { font-style: italic; font-weight: 400; }
.hero-title { font-size: clamp(2.5rem, 1.5rem + 4vw, 3.5rem); line-height: 1.04; }
.eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-feature-settings: "tnum"; }

/* Visible placeholder: anything the client still has to confirm */
.ph { background: #FFE08A; color: #3B2A00; padding: 0 .3em; border-radius: 2px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .875em; white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.375rem; border-radius: 9999px; font-weight: 600; font-size: 1rem; line-height: 1.2; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--stamp-deep); }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-stamp { background: var(--stamp); color: var(--paper-white); }
.btn-stamp:hover { background: var(--stamp-deep); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: var(--stamp-light); }
.btn svg { width: 1.125rem; height: 1.125rem; }

.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 1.25rem; height: 1.25rem; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(244, 239, 230, .92); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.nav-link { position: relative; padding: .5rem .125rem; font-size: 1rem; color: var(--ink-soft); }
.nav-link:hover { color: var(--ink); }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1.5px; background: var(--stamp); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-link:hover::after { transform: scaleX(1); }

.mobile-nav summary { list-style: none; cursor: pointer; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav[open] .mn-open { display: none; }
.mobile-nav:not([open]) .mn-close { display: none; }
.mobile-nav .mn-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: .5rem 1rem 1.25rem; box-shadow: 0 16px 32px -24px rgba(28, 25, 23, .5); }
.mobile-nav .mn-panel a { display: block; padding: .875rem .25rem; border-bottom: 1px dotted var(--line); font-size: 1.125rem; }

/* ---------- Hero document stack ---------- */
.docstack { position: relative; min-height: 25rem; }
.doc { position: absolute; background: var(--paper-white); border: 1px solid var(--line); border-radius: var(--r-paper); box-shadow: 0 1px 0 rgba(28,25,23,.04), 0 18px 40px -22px rgba(28,25,23,.35); padding: 1.125rem 1.25rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .75rem; line-height: 1.5; color: var(--ink-soft); }
.doc-title { color: var(--ink); font-weight: 500; letter-spacing: .08em; }
.doc-row { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 0; border-bottom: 1px dotted var(--line); }
.doc-row span:last-child { color: var(--ink); text-align: right; }
.doc-back { width: 62%; left: 4%; top: 0; transform: rotate(-4deg); }
.doc-mid { width: 64%; right: 0; top: 2.5rem; transform: rotate(3deg); }
.doc-front { width: 84%; left: 8%; top: 7.5rem; transform: rotate(-1deg); }
.doc-tag { position: absolute; left: 8%; bottom: 0; }
.docstack .stamp { position: absolute; right: 2%; top: 13.75rem; font-size: 1.375rem; }
@media (max-width: 639px) {
  .docstack { min-height: 22rem; }
  .doc-back { width: 72%; left: 0; }
  .doc-mid { width: 70%; }
  .doc-front { width: 94%; left: 3%; top: 6.5rem; }
  .docstack .stamp { top: 12.5rem; right: 0; font-size: 1.125rem; }
  .doc-tag { left: 3%; }
}

/* ---------- The stamp (signature element) ---------- */
.stamp {
  --r: -11deg;
  display: inline-block; padding: .3em .7em .25em; border: 3px solid currentColor; border-radius: var(--r-paper);
  color: var(--stamp); font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 1rem; letter-spacing: .16em; line-height: 1.1; text-transform: uppercase; white-space: nowrap;
  transform: rotate(var(--r)); transform-origin: 100% 50%; opacity: .92; pointer-events: none; user-select: none;
  /* worn rubber: speckled mask so the ink looks pressed, not printed */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.45'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.45'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 160px 80px; mask-size: 160px 80px;
}
.stamp-moss { color: var(--moss); }

/* Start state is gated behind html.js: with no JS every stamp is already pressed. */
html.js .stamp[data-stamp]:not(.is-in) { opacity: 0; transform: rotate(calc(var(--r) - 6deg)) scale(1.9); }
html.js .stamp[data-stamp] { transition: opacity .18s ease-out, transform .42s var(--ease-thump); }
.stamp-host.is-thumped { animation: thump-shake .32s ease-out .12s; }
@keyframes thump-shake { 0%,100% { translate: 0 0; } 30% { translate: 0 2px; } 60% { translate: 0 -1px; } }

/* ---------- Section: services index ---------- */
.svc { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem 1.25rem; padding: 1.75rem 0; border-top: 1px solid var(--ink); }
.svc:last-child { border-bottom: 1px solid var(--ink); }
.svc-no { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .875rem; color: var(--stamp-deep); padding-top: .35rem; }
@media (min-width: 768px) {
  .svc { grid-template-columns: 4rem minmax(0, 18rem) minmax(0, 1fr) 2.5rem; align-items: start; padding: 2rem 0; }
  .svc-icon { justify-self: end; color: var(--ink-mute); transition: color .2s, transform .3s; }
  .svc:hover .svc-icon { color: var(--stamp-deep); transform: rotate(-8deg); }
}

/* ---------- Section: process tickets ---------- */
.ticket { --notch: var(--ink); position: relative; overflow: clip; background: var(--paper-white); color: var(--ink); border-radius: var(--r-card); display: grid; grid-template-columns: minmax(0, 1fr); }
.ticket-main { padding: 1.5rem 1.5rem 1.25rem; }
.ticket-stub { position: relative; padding: 1.25rem 1.5rem 1.5rem; border-top: 2px dashed var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--notch); top: -.7rem; }
.ticket-stub::before { left: -.625rem; }
.ticket-stub::after { right: -.625rem; }
.ticket .stamp { align-self: flex-end; }
@media (min-width: 768px) {
  .ticket { grid-template-columns: minmax(0, 1fr) 17rem; }
  .ticket-main { padding: 2rem 2rem 2rem 2.25rem; }
  .ticket-stub { border-top: 0; border-left: 2px dashed var(--line); padding: 2rem 1.75rem; }
  .ticket-stub::before, .ticket-stub::after { left: -.7rem; right: auto; }
  .ticket-stub::before { top: -.625rem; }
  .ticket-stub::after { top: auto; bottom: -.625rem; }
  .ticket:nth-child(even) { margin-left: 3rem; }
  .ticket:nth-child(odd) { margin-right: 3rem; }
}
.ticket-no { font-family: Fraunces, Georgia, serif; font-size: 2.5rem; line-height: 1; color: var(--stamp-deep); font-weight: 400; font-style: italic; }

/* ---------- Section: lanes table ---------- */
.lanes-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper-white); }
.lanes { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: .875rem; }
.lanes th { text-align: left; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 1rem 1.25rem; border-bottom: 1.5px solid var(--ink); }
.lanes td { padding: 1.125rem 1.25rem; border-bottom: 1px dotted var(--line); vertical-align: top; color: var(--ink-soft); }
.lanes tr:last-child td { border-bottom: 0; }
.lanes td:first-child { color: var(--ink); font-weight: 600; }
.lanes .num { color: var(--ink); }
.lanes-wrap:focus-visible { outline-offset: 2px; }

/* ---------- Section: sectors ---------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .75rem; letter-spacing: .04em; padding: .2rem .5rem; border: 1px solid var(--ink); border-radius: var(--r-paper); color: var(--ink); background: transparent; }
.sector { background: var(--paper-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; transition: transform .3s, box-shadow .3s; }
.sector:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(28, 25, 23, .45); }
.held { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--line); }

/* ---------- Section: ledger comparison ---------- */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid rgba(244, 239, 230, .28); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 768px) { .ledger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ledger-col { padding: 1.75rem; }
.ledger-col + .ledger-col { border-top: 1px solid rgba(244, 239, 230, .28); background: rgba(20, 17, 16, .22); }
@media (min-width: 768px) { .ledger-col + .ledger-col { border-top: 0; border-left: 1px solid rgba(244, 239, 230, .28); } }
.ledger li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .875rem; padding: 1rem 0; border-top: 1px dotted rgba(244, 239, 230, .28); }
.ledger li:first-child { border-top: 0; }
.strike { position: relative; display: inline-block; }
.strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 55%; height: 3px; background: var(--stamp-light); transform: rotate(-2deg); border-radius: 2px; }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--ink); }
.faq details:last-child { border-bottom: 1px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.5rem 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { flex: none; width: 1.75rem; height: 1.75rem; margin-top: .125rem; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; transition: transform .25s, background-color .2s, color .2s; }
.faq details[open] .plus { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.faq summary:hover .plus { background: var(--stamp); border-color: var(--stamp); color: var(--paper-white); }
.faq .answer { padding: 0 3.25rem 1.75rem 0; max-width: 46rem; }

/* ---------- Form ---------- */
.field label { display: block; font-weight: 600; margin-bottom: .5rem; }
.field input, .field textarea { width: 100%; font-size: 1rem; background: var(--paper-white); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--r-paper); padding: .8rem .95rem; }
.field input:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(240, 137, 91, .45); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); opacity: 1; }
.field [aria-invalid="true"] { border-color: var(--stamp-deep); }
.field-error { color: var(--stamp-deep); font-size: .875rem; margin-top: .375rem; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-card { background: var(--paper); color: var(--ink); border-radius: var(--r-card); padding: 1.75rem; }
@media (min-width: 768px) { .form-card { padding: 2.5rem; } }

/* ---------- Policy pages ---------- */
.prose-doc h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.75rem; line-height: 1.2; margin: 3rem 0 1rem; letter-spacing: -0.01em; }
.prose-doc h3 { font-weight: 600; font-size: 1.125rem; margin: 2rem 0 .5rem; }
.prose-doc p, .prose-doc li { color: var(--ink-soft); margin: 0 0 1rem; max-width: 44rem; }
.prose-doc ul { list-style: disc; padding-left: 1.25rem; }
.prose-doc a { color: var(--stamp-deep); text-decoration: underline; text-underline-offset: 3px; }
.review { border: 1.5px dashed var(--stamp-deep); background: #FBE6DC; color: #5E1D08; border-radius: var(--r-paper); padding: .75rem 1rem; margin-bottom: 1.25rem; max-width: 44rem; font-size: .875rem; }
.review strong { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Scroll reveal (progressive) ---------- */
html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.js [data-reveal] { transition: opacity .6s ease-out, transform .6s ease-out; }

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  html.js .stamp[data-stamp]:not(.is-in) { opacity: .92; transform: rotate(var(--r)); }
  .sector:hover { transform: none; }
}

@media print {
  .site-header, .skip-link, form { display: none !important; }
  html.js [data-reveal], html.js .stamp[data-stamp] { opacity: 1 !important; transform: none !important; }
}