/* ============================== FONTS ===============================
   Self-hosted WOFF2 (latin subsets, downloaded from Google Fonts).
   Cached immutable under /assets; bump the ?v= param if files change. */
@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;
  src:url("../fonts/bricolage-grotesque-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/hanken-grotesk-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* ============================== TOKENS =============================== */
:root{
  --color-brand-primary:#103C3E;--color-brand-primary-hover:#0B2C2D;--color-brand-primary-soft:#1C5658;
  --color-brand-accent:#C2772C;--color-brand-accent-hover:#A8631F;--color-brand-accent-soft:#F0E0C6;
  --color-signal-stamp:#BE3A26;
  --color-surface-page:#FAF6EF;--color-surface-default:#FFFFFF;--color-surface-raised:#F2ECE0;
  --color-surface-sunken:#EFE8DA;--color-surface-ink:#103C3E;--color-surface-ink-deep:#0C2E2F;
  --color-text-primary:#1C2A2A;--color-text-secondary:#51605F;--color-text-muted:#5E6968;
  --color-text-on-brand:#F4EEE3;--color-text-on-brand-muted:#A7C1BD;--color-text-accent:#8A5217;--color-text-link:#1C5658;
  --color-border-default:#E4DBCB;--color-border-strong:#CFC5B1;--color-border-ink:rgba(16,60,62,.14);--color-focus-ring:#C2772C;
  --color-state-success:#2F7D5B;--color-state-success-soft:#E2F0E8;--color-state-warning:#C2772C;--color-state-warning-soft:#F7E9CF;
  --color-state-danger:#BE3A26;--color-state-danger-soft:#F6DED6;--color-state-info:#2C6E75;--color-state-info-soft:#DCEDEE;
  --font-display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --text-display-xl:clamp(2.9rem,1.8rem + 4.4vw,4.5rem);--text-display-lg:clamp(2.3rem,1.6rem + 2.8vw,3.3rem);
  --text-h2:clamp(1.8rem,1.35rem + 1.7vw,2.5rem);--text-h3:clamp(1.4rem,1.2rem + .8vw,1.7rem);--text-h4:1.3rem;
  --text-lead:clamp(1.2rem,1.1rem + .4vw,1.45rem);--text-body:1.1875rem;--text-sm:1.0625rem;--text-xs:.875rem;--text-label:.78rem;
  --leading-tight:1.05;--leading-snug:1.2;--leading-normal:1.5;--leading-relaxed:1.65;
  --tracking-tight:-0.02em;--tracking-label:0.12em;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extra:800;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;
  --space-7:3rem;--space-8:4rem;--space-9:6rem;--space-10:8rem;
  --space-section:clamp(3.5rem,2rem + 6vw,7rem);--gutter:clamp(1.25rem,.5rem + 3vw,2.5rem);
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:22px;--radius-pill:999px;--radius-postcard:8px;
  --border-width:1px;--border-width-strong:1.5px;
  --shadow-xs:0 1px 2px rgba(16,60,62,.06);--shadow-sm:0 2px 8px -2px rgba(16,60,62,.10);
  --shadow-card:0 10px 28px -12px rgba(16,60,62,.18);--shadow-panel:0 24px 60px -28px rgba(16,60,62,.28);
  --shadow-postcard:0 16px 34px -14px rgba(28,26,15,.30);--shadow-focus:0 0 0 3px rgba(194,119,44,.45);
  --max-content:1140px;--max-wide:1280px;--max-prose:680px;
  --z-header:1200;--z-overlay:1300;--z-modal:1400;
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:360ms;
  --ease-standard:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --color-surface-page:#0C2526;--color-surface-default:#123739;--color-surface-raised:#0F2F31;--color-surface-sunken:#0A2122;
  --color-surface-ink:#08191A;--color-surface-ink-deep:#061314;
  --color-text-primary:#F1ECE1;--color-text-secondary:#B9C5C2;--color-text-muted:#8DA09C;--color-text-accent:#E2A75A;--color-text-link:#5FB6AE;
  --color-brand-primary:#2FA39A;--color-brand-primary-hover:#3CB6AC;--color-brand-accent:#E2A75A;--color-brand-accent-hover:#EEB76C;
  --color-border-default:#1E4749;--color-border-strong:#2A5A5C;--color-border-ink:rgba(255,255,255,.12);
}

/* ============================== RESET =============================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--color-surface-page);color:var(--color-text-primary);font-family:var(--font-body);
  font-size:var(--text-body);line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0;color:var(--color-text-primary);font-weight:var(--weight-bold)}
p{margin:0}
a{color:var(--color-text-link);text-underline-offset:3px}
img,svg{display:block;max-width:100%}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
button{font-family:inherit}

/* ============================== HELPERS ============================ */
.wrap{max-width:var(--max-content);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--max-wide);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--color-text-accent);font-weight:var(--weight-medium);display:inline-flex;align-items:center;gap:.5rem}
.eyebrow::before{content:"";width:1.6rem;height:1.5px;background:var(--color-brand-accent)}
.muted{color:var(--color-text-secondary)}
.lead{font-size:var(--text-lead);color:var(--color-text-secondary);line-height:var(--leading-normal)}
.grid{display:grid;gap:var(--space-5)}
.kicker{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.06em}

.theme-toggle{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;
  background:var(--color-surface-default);border:var(--border-width) solid var(--color-border-strong);color:var(--color-text-primary);
  padding:.45rem .8rem;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:border-color var(--dur-fast),background var(--dur-fast)}
.theme-toggle:hover{border-color:var(--color-brand-primary)}

/* ============================== BUTTONS ========================== */
.btn{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;text-decoration:none;
  padding:.85rem 1.4rem;border-radius:var(--radius-md);border:var(--border-width-strong) solid transparent;
  transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--color-brand-primary);color:var(--color-text-on-brand);border-color:var(--color-brand-primary)}
.btn--primary:hover{background:var(--color-brand-primary-hover);border-color:var(--color-brand-primary-hover);box-shadow:var(--shadow-sm)}
.btn--secondary{background:transparent;color:var(--color-brand-primary);border-color:var(--color-border-strong)}
.btn--secondary:hover{border-color:var(--color-brand-primary);background:var(--color-surface-default)}
.btn--accent{background:var(--color-brand-accent);color:#fff;border-color:var(--color-brand-accent)}
.btn--accent:hover{background:var(--color-brand-accent-hover);border-color:var(--color-brand-accent-hover);box-shadow:var(--shadow-sm)}
.btn--ghost{background:transparent;color:var(--color-brand-primary);border-color:transparent;padding-inline:.6rem}
.btn--ghost:hover{background:var(--color-surface-raised)}
.btn--lg{padding:1.05rem 1.7rem;font-size:var(--text-body)}
.btn--sm{padding:.55rem .95rem;font-size:var(--text-xs)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn--link{background:none;border:none;color:var(--color-brand-primary);padding:.4rem 0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--color-brand-accent)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}


/* ============================== FORMS =========================== */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--space-4)}
.field label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.field .hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.input,.textarea,.select{font-family:inherit;font-size:var(--text-body);color:var(--color-text-primary);
  background:var(--color-surface-default);border:var(--border-width) solid var(--color-border-strong);
  border-radius:var(--radius-md);padding:.8rem .9rem;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);width:100%}
.input::placeholder,.textarea::placeholder{color:var(--color-text-muted)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:var(--shadow-focus)}
.input--error{border-color:var(--color-state-danger)}
.field .error{font-size:var(--text-xs);color:var(--color-state-danger);font-weight:var(--weight-medium)}
.textarea{min-height:120px;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--text-sm);color:var(--color-text-secondary)}
.check input{margin-top:.2rem;accent-color:var(--color-brand-primary);width:18px;height:18px}

/* ============================== CARDS =========================== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5)}
.card{background:var(--color-surface-default);border:var(--border-width) solid var(--color-border-default);
  border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card)}
.card__icon{width:42px;height:42px;border-radius:var(--radius-md);background:var(--color-brand-accent-soft);
  display:grid;place-items:center;color:var(--color-text-accent);margin-bottom:var(--space-4)}
.card__icon svg{width:22px;height:22px}
.card h3{font-size:var(--text-h4);margin-bottom:var(--space-2)}
.card p{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}

/* ============================== PROCESS ========================= */
.stepper{display:grid;gap:var(--space-4);grid-template-columns:1fr}
@media(min-width:760px){.stepper{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:var(--color-surface-default);border:var(--border-width) solid var(--color-border-default);
  border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base)}
.step:hover{border-color:var(--color-brand-accent);box-shadow:var(--shadow-card);transform:translateY(-3px)}
.step__num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-on-brand);
  background:var(--color-brand-primary);width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;margin-bottom:var(--space-4)}
.step:hover .step__num{background:var(--color-brand-accent)}
.step h4{font-size:var(--text-h4);margin-bottom:var(--space-2)}
.step p{font-size:var(--text-sm);color:var(--color-text-secondary)}

/* ============================== PRICING ========================= */
.price-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr}
@media(min-width:820px){.price-grid{grid-template-columns:1fr 1fr}}
.price{background:var(--color-surface-default);border:var(--border-width) solid var(--color-border-default);
  border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-4)}
.price--feature{border-color:var(--color-brand-primary);box-shadow:var(--shadow-panel);position:relative}
.price--feature::before{content:"Recommended";position:absolute;top:-12px;left:var(--space-6);
  font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;
  background:var(--color-brand-accent);color:#fff;padding:.3rem .7rem;border-radius:var(--radius-pill)}
.price h3{font-size:var(--text-h3)}
.price .amount{font-family:var(--font-display);font-size:2.4rem;font-weight:var(--weight-extra);letter-spacing:var(--tracking-tight)}
.price .amount span{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted)}
.price ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.price li{display:flex;gap:.6rem;font-size:var(--text-sm);color:var(--color-text-secondary)}
.price li svg{width:18px;height:18px;color:var(--color-state-success);flex-shrink:0;margin-top:1px}

/* ============================ COMPARISON ======================== */
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-sm);overflow:hidden;
  border:var(--border-width) solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-surface-default)}
.compare th,.compare td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:var(--border-width) solid var(--color-border-default);vertical-align:top}
.compare thead th{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);background:var(--color-surface-raised)}
.compare thead th:last-child{color:var(--color-brand-primary)}
.compare tbody tr:last-child td{border-bottom:none}
.compare td:last-child{color:var(--color-text-primary);font-weight:var(--weight-medium)}
.compare td:first-child{color:var(--color-text-secondary)}

/* ============================== FAQ ============================= */
.faq{max-width:var(--max-prose);border-top:var(--border-width) solid var(--color-border-default)}
.faq__item{border-bottom:var(--border-width) solid var(--color-border-default)}
.faq__btn{width:100%;background:none;border:none;cursor:pointer;text-align:left;display:flex;justify-content:space-between;gap:var(--space-4);
  align-items:center;padding:var(--space-4) var(--space-1);font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:var(--text-h4);color:var(--color-text-primary)}
.faq__icon{flex-shrink:0;width:26px;height:26px;border-radius:var(--radius-sm);border:var(--border-width) solid var(--color-border-strong);
  display:grid;place-items:center;color:var(--color-brand-primary);transition:transform var(--dur-base) var(--ease-standard),background var(--dur-base),color var(--dur-base)}
.faq__btn[aria-expanded="true"] .faq__icon{transform:rotate(45deg);background:var(--color-brand-primary);color:var(--color-text-on-brand);border-color:var(--color-brand-primary)}
.faq__panel{overflow:hidden;max-height:0;transition:max-height var(--dur-slow) var(--ease-out)}
.faq__panel-inner{padding:0 var(--space-1) var(--space-5);color:var(--color-text-secondary);font-size:var(--text-body);line-height:var(--leading-normal);max-width:62ch}

/* ============================ BADGES / ALERT =================== */
.pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:var(--text-xs);
  font-weight:var(--weight-medium);letter-spacing:.03em;padding:.3rem .7rem;border-radius:var(--radius-pill);border:1px solid transparent}
.pill--neutral{background:var(--color-surface-raised);color:var(--color-text-secondary);border-color:var(--color-border-strong)}
.pill--brand{background:var(--color-brand-primary);color:var(--color-text-on-brand)}
.pill--accent{background:var(--color-brand-accent-soft);color:var(--color-text-accent);border-color:var(--color-brand-accent)}
.pill--success{background:var(--color-state-success-soft);color:var(--color-state-success)}
.pill--private{background:var(--color-state-danger-soft);color:var(--color-state-danger);text-transform:uppercase;letter-spacing:.08em}
.alert{display:flex;gap:.8rem;align-items:flex-start;padding:var(--space-4);border-radius:var(--radius-md);border:var(--border-width) solid;font-size:var(--text-sm)}
.alert svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.alert b{display:block;font-weight:var(--weight-semibold);margin-bottom:.15rem;color:var(--color-text-primary)}
.alert--info{background:var(--color-state-info-soft);border-color:color-mix(in srgb,var(--color-state-info) 35%,transparent);color:var(--color-state-info)}
.alert--success{background:var(--color-state-success-soft);border-color:color-mix(in srgb,var(--color-state-success) 35%,transparent);color:var(--color-state-success)}
.alert--warning{background:var(--color-state-warning-soft);border-color:color-mix(in srgb,var(--color-state-warning) 40%,transparent);color:var(--color-text-accent)}
.alert p{color:var(--color-text-secondary)}

/* ============================ MOCK NAV ========================= */
.mocknav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  background:var(--color-surface-default);border:var(--border-width) solid var(--color-border-default);
  border-radius:var(--radius-pill);padding:.55rem .6rem .55rem 1.2rem;box-shadow:var(--shadow-sm)}
.mocknav .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:var(--weight-extra);font-size:1rem}
.mocknav .brand .dot{width:11px;height:11px;border-radius:3px;background:var(--color-brand-primary);position:relative}
.mocknav .brand .dot::after{content:"";position:absolute;right:-4px;bottom:-4px;width:7px;height:7px;border-radius:2px;background:var(--color-brand-accent)}
.mocknav .links{display:none;gap:1.1rem;font-size:var(--text-sm);color:var(--color-text-secondary)}
.mocknav .links a{text-decoration:none;color:inherit}
.mocknav .links a:hover{color:var(--color-text-primary)}
@media(min-width:760px){.mocknav .links{display:flex}}

/* ============================ MODAL ============================ */
.overlay{position:fixed;inset:0;background:rgba(12,38,38,.55);display:none;place-items:center;z-index:var(--z-overlay);padding:var(--gutter)}
.overlay[data-open="true"]{display:grid}
.modal{background:var(--color-surface-default);border-radius:var(--radius-xl);max-width:440px;width:100%;
  padding:var(--space-6);box-shadow:var(--shadow-panel);border:var(--border-width) solid var(--color-border-default)}
.modal h3{font-size:var(--text-h3);margin-bottom:var(--space-2)}
.modal p{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-5)}

.preview-card{background:var(--color-surface-default);border:var(--border-width) solid var(--color-border-default);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base)}
.preview-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow-panel)}
.preview-card__chrome{display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;background:var(--color-surface-sunken);border-bottom:var(--border-width) solid var(--color-border-default)}
.preview-card__chrome .d{width:9px;height:9px;border-radius:50%;background:var(--color-border-strong)}
.preview-card__chrome .tag{margin-left:auto}
.preview-card__shot{aspect-ratio:16/10;background:
  linear-gradient(var(--color-surface-page),var(--color-surface-page));position:relative;padding:var(--space-4);display:flex;flex-direction:column;gap:.5rem}
.skel{background:var(--color-border-default);border-radius:4px}
.skel.lg{height:14px;width:55%}.skel.md{height:10px;width:80%}.skel.sm{height:10px;width:40%}
.skel.box{height:46px;width:100%;background:var(--color-surface-raised);border:1px solid var(--color-border-default);margin-top:auto}
.skel.btn{height:28px;width:120px;background:var(--color-brand-primary);border-radius:6px}

/* booking */
.book-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media(min-width:820px){.book-grid{grid-template-columns:1fr 1fr}}
.book-list{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.book-list li{display:flex;gap:.6rem;font-size:var(--text-sm);color:var(--color-text-secondary)}
.book-list svg{width:18px;height:18px;color:var(--color-brand-primary);flex-shrink:0;margin-top:2px}

.col-2{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media(min-width:860px){.col-2{grid-template-columns:1fr 1fr}}