/* Hero script face, self-hosted so it always renders and loads fast.
   SIL Open Font License — free to use and host. Swap the file and the
   font-family name below if you'd rather use a different script. */
@font-face{
  font-family:"Alex Brush";
  src:url("fonts/AlexBrush-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}



/* ══════════════════════════════════════════════════════════════════════
   1. COLOURS AND FONTS — change these values and the whole site changes.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:        #4B0721;   /* page background (deep passport-cover teal)  */
  --ink-raised: #89103E;   /* cards sitting on the dark background        */
  --ink-line:   #ea397c;   /* hairline borders on dark areas              */
  --paper:      #EDEAE0;   /* the form card — "document stock"            */
  --paper-2:    #E3DFD2;   /* slightly darker paper, for the MRZ strip    */
  --paper-line: #C6C1B1;   /* rules printed on the paper                  */
  --gold:       #ffbe3d;   /* foil: seals, rules, eyebrow labels          */
  --flop:       #E0457B;   /* the one loud accent: focus + active step    */
  --text-light: #E8E4D8;
  --text-dim:   #d78aa8;
  --text-dark:  #16292B;
  --text-mute:  #c5004c;
  --danger:     #A32218;

  --display: "Sansation", Georgia, "Times New Roman", serif;
  --body:    "Sansation", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --script:  "Alex Brush", "Snell Roundhand", cursive;   /* hero title     */

  --radius: 4px;
  --maxw:   1100px;
  --logo-h: 44px;
  --flag-h: 32px;          /* height of the flag beside the logo          */          /* height of the logo in the top bar          */
}

/* ══════════════════════════════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--text-light);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--flop); outline-offset:3px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
[hidden]{ display:none !important; }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0 0 10px;
}

/* ══════════════════════════════════════════════════════════════════════
   3. TOP BAR
   ══════════════════════════════════════════════════════════════════════ */
.topbar{ border-bottom:1px solid var(--ink-line); background:rgba(137,16,62,.9); }
.topbar-in{ display:flex; align-items:center; gap:14px; padding:14px 24px;
  max-width:var(--maxw); margin:0 auto; }
.brand{ display:inline-flex; align-items:center; gap:12px; min-width:0;
  text-decoration:none; }
.brand-flag{ height:var(--flag-h); width:auto; flex:none; border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22); }
.brand-rule{ width:2px; height:calc(var(--flag-h) + 8px); flex:none;
  background:#fff; opacity:.8; border-radius:1px; }

/* support email, top right */
.support{
  margin-left:auto;                /* pushes it to the right-hand end     */
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--text-dim); text-decoration:none; white-space:nowrap;
  padding:8px 0; transition:color .15s;
}
.support:hover{ color:var(--gold); }
.support svg{ width:15px; height:15px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6; }
@media (max-width:720px){
  /* not enough room beside the logo — drop it onto its own line */
  .topbar-in{ flex-wrap:wrap; row-gap:12px; }
  .support{ margin-left:0; font-size:10.5px; padding-top:0; }
}
.brand-logo{
  /* max-height, not height: on a narrow phone the width limit takes over
     and the logo shrinks proportionally instead of getting squashed. */
  width:auto; height:auto;
  max-height:var(--logo-h);
  max-width:100%; min-width:0;
}
@media (max-width:560px){ :root{ --logo-h:30px; --flag-h:23px; } }
@media (max-width:400px){ :root{ --logo-h:25px; --flag-h:19px; } .brand{ gap:9px; } }

/* ── main navigation ─────────────────────────────────────────────── */
.nav-main{ background:var(--ink); border-bottom:1px solid var(--ink-line); }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; gap:2px; overflow-x:auto; }
.nav-in a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim); text-decoration:none;
  padding:14px 16px; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav-in a:hover{ color:var(--text-light); }
.nav-in a.is-current{ color:var(--gold); border-bottom-color:var(--gold); }
@media (max-width:430px){
  .nav-in{ padding:0 14px; }
  .nav-in a{ padding:13px 11px; font-size:10.5px; letter-spacing:.11em; }
}

/* ── simple content pages (Passport, About) ──────────────────────── */
.page{ padding:clamp(46px,7vw,84px) 0 clamp(58px,8vw,96px); }
.page-in{ max-width:820px; margin:0 auto; padding:0 24px; }
.page h1{ font-family:var(--display); font-weight:600; line-height:1.08;
  font-size:clamp(29px,4.4vw,46px); margin:0 0 14px; }
.page .lede{ font-size:clamp(16.5px,1.9vw,19px); color:var(--text-light);
  margin:0 0 26px; }
.page h2{ font-family:var(--display); font-weight:600;
  font-size:clamp(21px,2.9vw,28px); margin:40px 0 12px; }
.page p{ color:var(--text-dim); margin:0 0 18px; }
.page-figure{ margin:34px 0; border:1px solid var(--ink-line);
  border-radius:var(--radius); overflow:hidden; background:var(--ink-raised); }
.page-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.page-actions .btn{ flex:1 1 250px; }
.formsec.standalone{ padding-top:clamp(38px,6vw,66px); }

/* ══════════════════════════════════════════════════════════════════════
   4. HERO  (the big beach image on the landing page)

   background-position is "center top" on purpose: the photo always keeps
   its top edge, so the ocean stays behind the title on every screen and
   only the beach at the bottom gets cropped as the window narrows.
   ══════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:clamp(460px,82vh,880px);
  background-image:url("images/hero.jpg");    /* ← YOUR HERO PHOTO */
  background-size:cover;
  background-position:center top;
  background-color:#0d6b78;                   /* shows while the photo loads */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:clamp(30px,6.5vh,74px) 24px clamp(40px,8vh,84px);
  text-align:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,38,48,.32) 0%,rgba(0,38,48,.07) 40%,rgba(0,38,48,0) 68%);
}
.hero > *{ position:relative; z-index:1; }
.hero-eyebrow{
  font-family:var(--body); font-weight:700; color:#fff;
  font-size:clamp(9px,1.15vw,12.5px); letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 clamp(10px,3vh,20px); text-shadow:0 1px 14px rgba(0,0,0,.45);
}
/* The title is live text in a script font, so it scales cleanly on every
   screen. To use your own SVG instead, replace the <h1> contents in
   index.html with:
        <img src="images/title.svg" alt="Live Life like a Floptropican">
   and the .hero-title img rule below will size it. */
.hero-title{
  font-family:var(--script); font-weight:400; color:#fff;
  font-size:clamp(42px,9vw,130px); line-height:.98; margin:0;
  text-shadow:0 2px 28px rgba(0,0,0,.3);
}
.hero-title .tm{
  font-family:var(--body); font-weight:600; font-size:.17em;
  vertical-align:super; letter-spacing:0;
}
.hero-title img{ width:clamp(260px,80%,880px); height:auto; margin:0 auto; }

/* ── the two action cards ───────────────────────────────────────────── */
.actions{ display:grid; gap:20px; grid-template-columns:1fr 1fr;
  margin-top:-84px; position:relative; z-index:2; padding-bottom:72px; }
@media (max-width:760px){ .actions{ grid-template-columns:1fr; margin-top:-200px; } }

.action{
  background:var(--ink-raised); border:1px solid var(--ink-line);
  border-top:3px solid var(--gold); border-radius:var(--radius);
  padding:30px 28px 28px; display:flex; flex-direction:column;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.action h2{
  font-family:var(--display); font-weight:600; font-size:24px;
  line-height:1.2; margin:0 0 10px;
}
.action p{ margin:0 0 24px; color:var(--text-dim); font-size:15.5px; flex:1; }

.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--body); font-weight:600; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:16px 22px; line-height:1; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s, background .15s, color .15s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:#241C00; }
.btn-gold:hover{ background:#DDB63A; }
.btn-outline{ background:transparent; color:var(--text-light); border-color:var(--gold); }
.btn-outline:hover{ background:var(--gold); color:#241C00; }
.btn .arw{ font-family:var(--mono); font-weight:400; }

/* ══════════════════════════════════════════════════════════════════════
   5. THE FORM SECTION
   ══════════════════════════════════════════════════════════════════════ */
.formsec{ background:var(--ink); padding:0 0 90px; }
.formsec-head{ text-align:center; margin-bottom:26px; }
.formsec-head h2{ font-family:var(--display); font-weight:600;
  font-size:clamp(26px,3.6vw,38px); margin:0 0 8px; }
.formsec-head p{ margin:0; color:var(--text-dim); font-size:15.5px; }

.doc{
  background:var(--paper); color:var(--text-dark); border-radius:var(--radius);
  max-width:720px; margin:0 auto;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}

/* progress */
.progress{ padding:20px 32px 0; }
.progress-meta{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute); margin-bottom:9px; }
.bars{ display:flex; gap:4px; }
.bars i{ height:3px; flex:1; background:var(--paper-line); border-radius:2px;
  transition:background .25s; }
.bars i.done{ background:var(--gold); }
.bars i.now{ background:var(--flop); }

/* steps */
.steps{ padding:28px 32px 6px; }
.step{ border:0; margin:0; padding:0; min-inline-size:0; }
.step-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  color:var(--gold); text-transform:uppercase;
  border-bottom:1px solid var(--paper-line); padding-bottom:8px;
  margin:0 0 16px; display:block;
}
.step h3{ font-family:var(--display); font-weight:600; font-size:26px;
  line-height:1.18; margin:0 0 8px; }
.step-help{ margin:0 0 22px; color:var(--text-mute); font-size:14.5px; }
.anim{ animation:slide .28s ease both; }
@keyframes slide{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} }

/* fields */
.field{ display:block; margin-bottom:18px; }
.field-label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute); margin-bottom:7px;
}
.opt{ color:var(--text-mute); opacity:.7; }
.grid2{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .grid2{ grid-template-columns:1fr; } }

input[type=text], input[type=date], input[type=file], select, textarea, .pick-btn{
  width:100%; font-family:var(--body); font-size:16px; color:var(--text-dark);
  background:#FBFAF5; border:1px solid var(--paper-line); border-radius:var(--radius);
  padding:13px 14px; transition:border-color .15s, box-shadow .15s;
}
textarea{ resize:vertical; min-height:88px; }
input:focus, select:focus, textarea:focus, .pick-btn:focus{
  outline:none; border-color:var(--flop); box-shadow:0 0 0 3px rgba(224,69,123,.16);
}
input.bad, select.bad, .pick-btn.bad{ border-color:var(--danger); }
.err{ color:var(--danger); font-size:13.5px; margin:-10px 0 16px; min-height:0; }
.err:empty{ margin:0; }

/* gender chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.chip{
  font-family:var(--body); font-size:13.5px; padding:7px 13px; cursor:pointer;
  background:transparent; color:var(--text-mute);
  border:1px solid var(--paper-line); border-radius:100px; transition:.15s;
}
.chip:hover{ border-color:var(--flop); color:var(--flop); }

/* custom picker (flags / watermark icons) */
.pick{ position:relative; }
.pick-btn{ display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; }
.pick-btn img{ width:34px; height:23px; object-fit:cover; flex:none;
  border:1px solid rgba(0,0,0,.18); border-radius:2px; background:#fff; }
.pick-btn .ph{ width:34px; height:23px; flex:none; }
.pick-btn .cap{ flex:1; }
.pick-btn .chev{ font-family:var(--mono); color:var(--text-mute); }
.pick-btn[aria-expanded=true] .chev{ transform:rotate(180deg); }
.pick-list{
  position:absolute; z-index:30; top:calc(100% + 5px); left:0; right:0;
  max-height:290px; overflow:auto; margin:0; padding:5px; list-style:none;
  background:#FBFAF5; border:1px solid var(--paper-line); border-radius:var(--radius);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.pick-list li{
  display:flex; align-items:center; gap:12px; padding:9px 10px;
  border-radius:3px; cursor:pointer; font-size:15px;
}
.pick-list li img{ width:34px; height:23px; object-fit:cover; flex:none;
  border:1px solid rgba(0,0,0,.18); border-radius:2px; background:#fff; }
.pick-list li .ph{ width:34px; height:23px; flex:none; }
.pick-list li[aria-selected=true]{ background:rgba(201,162,39,.2); }
.pick-list li.cursor{ background:var(--flop); color:#fff; }
/* watermark icons are square, not 3:2 */
.pick-wm .pick-btn img, .pick-wm .pick-list li img{ width:26px; height:26px; padding:2px; }

/* photo preview */
.preview{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.preview img{ width:82px; height:104px; object-fit:cover;
  border:1px solid var(--paper-line); background:#fff; }
.preview span{ font-family:var(--mono); font-size:12px; color:var(--text-mute); }

/* review list */
.review{ list-style:none; margin:0 0 6px; padding:0; }
.review li{ display:grid; grid-template-columns:210px 1fr; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--paper-line); font-size:15px; }
.review li b{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-mute); font-weight:500; padding-top:3px; }
@media (max-width:560px){ .review li{ grid-template-columns:1fr; gap:2px; } }

/* MRZ strip — the live preview at the foot of the document */
.mrz{
  background:var(--paper-2); border-top:1px solid var(--paper-line);
  padding:16px 32px; overflow-x:auto;
}
.mrz-label{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-mute); margin:0 0 7px; }
.mrz pre{
  font-family:var(--mono); font-size:clamp(9px,2.05vw,13px); line-height:1.55;
  margin:0; color:var(--text-dark); white-space:pre; letter-spacing:.06em;
}

/* nav */
.nav{ display:flex; justify-content:space-between; gap:12px;
  padding:20px 32px 26px; border-top:1px solid var(--paper-line); }
.btn-back{ background:transparent; color:var(--text-mute); border-color:var(--paper-line); }
.btn-back:hover{ background:rgba(0,0,0,.05); color:var(--text-dark); }
.btn-next{ background:var(--ink); color:var(--text-light); margin-left:auto; }
.btn-next:hover{ background:var(--ink-raised); }
.btn-send{ background:var(--flop); color:#fff; margin-left:auto; }
.btn-send:hover{ background:#EE5A8D; }
.btn[disabled]{ opacity:.55; cursor:progress; transform:none; }
@media (max-width:560px){
  .progress, .steps, .nav, .mrz{ padding-left:20px; padding-right:20px; }
  .nav{ flex-direction:column-reverse; }
  .nav .btn{ width:100%; margin-left:0; justify-content:center; }
}

/* footer */
footer{ border-top:1px solid var(--ink-line); padding:34px 0 46px;
  color:var(--text-dim); font-size:13.5px; }
footer p{ margin:0 0 8px; max-width:70ch; }
footer .note{ font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); }

/* honeypot */
.hp{ position:absolute; left:-9999px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}