/* =====================================================================
   Sky Trek Visa and Passport — stylesheet
   ---------------------------------------------------------------------
    1  Tokens              8  Cards & visa specs
    2  Reset               9  Forms
    3  Typography         10  Accordion
    4  Layout             11  Detail pages
    5  Buttons & pills    12  Footer & sticky CTA bar
    6  Header & nav       13  Utilities
    7  Hero & finder      14  Responsive
   ---------------------------------------------------------------------
   THE LOOK — "marigold and ink".

   One saturated marigold (#FFC629) and one warm near-black (#1A1712),
   used as full-bleed grounds rather than as trim. A section is either
   marigold, ink, or white — it is never a gradient of the two, and the
   page gets its rhythm from swapping between them. Headings are heavy
   uppercase grotesque, tightly tracked. Buttons are small solid pills.

   The three signature pieces, and the reason the site reads the way it
   does. Do not quietly delete them:
     .band-notch   a marigold band whose bottom edge is cut by a downward
                   triangle, with the section's CTA sitting in the notch
     .finder       the visa finder strip straddling the bottom of the hero
     .visa-tile    a spec card — timing strip on top, 2x2 fact grid below
   ===================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------ */
:root{
  /* brand — marigold is the ground, not the accent */
  --saffron:#FFC629;
  --saffron-600:#E8A400;
  --saffron-700:#B87F00;
  --saffron-300:#FFE08A;
  --saffron-100:#FFF6DC;

  /* warm near-black, the second ground */
  --ink:#1A1712;
  --ink-800:#241F18;
  --ink-700:#332C22;
  --ink-600:#4A4135;
  --ink-100:#D8D1C4;

  /* neutrals */
  --paper:#FAF7F0;
  --sand:#F3EDE1;
  --white:#FFFFFF;
  --text:#221E18;
  --text-2:#4A4237;
  --muted:#776E60;
  --muted-2:#9A9183;
  --line:#E4DCCC;
  --line-2:#F0EAE0;

  /* status */
  --green:#1F7A4C;
  --green-100:#E4F4EB;
  --amber:#8A5B0A;
  --amber-100:#FCF0D8;
  --red:#B03A2F;
  --red-100:#FBEAE7;

  /* type */
  --font:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Bricolage Grotesque','Instrument Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  /* shape & depth — squarer than the old build, on purpose */
  --r-sm:4px; --r:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  --shadow-1:0 1px 2px rgba(26,23,18,.07), 0 1px 3px rgba(26,23,18,.05);
  --shadow-2:0 8px 20px rgba(26,23,18,.10), 0 2px 6px rgba(26,23,18,.05);
  --shadow-3:0 24px 52px rgba(26,23,18,.20), 0 6px 16px rgba(26,23,18,.10);
  --shadow-saffron:0 8px 20px rgba(232,164,0,.34);

  --wrap:1220px;
  --header-h:76px;
  --bar-h:0px;                 /* sticky mobile bar height, set in §14 */
  --notch:38px;                /* depth of the .band-notch triangle */
}

/* ---------- 2. RESET ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;font-family:var(--font);font-size:16.5px;line-height:1.62;
  color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--bar-h);
}
img,svg,video{max-width:100%;display:block;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
ul,ol{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
:focus-visible{outline:3px solid var(--saffron-600);outline-offset:2px;border-radius:3px}
::selection{background:var(--saffron);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--saffron);
  padding:.75rem 1.15rem;z-index:400;font-weight:700}
.skip:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 3. TYPOGRAPHY -------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--display);margin:0;line-height:1.08;
  letter-spacing:-.025em;font-weight:800;color:var(--ink);
  font-variation-settings:'wdth' 100,'opsz' 14;
}
h1{font-size:clamp(2.1rem,5vw,3.6rem);text-transform:uppercase;letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem);text-transform:uppercase;letter-spacing:-.028em}
h3{font-size:clamp(1.12rem,1.8vw,1.35rem);letter-spacing:-.018em;font-weight:700}
h4{font-size:1rem;letter-spacing:-.012em;font-weight:700}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}
small{font-size:.86rem}

.eyebrow{
  font-family:var(--font);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--saffron-700);
  margin:0 0 .75rem;display:block;
}
.eyebrow.on-dark{color:var(--saffron)}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--text-2);line-height:1.6;max-width:64ch}
.lede.on-dark{color:var(--ink-100)}
.muted{color:var(--muted)}
.fine{font-size:.83rem;line-height:1.55;color:var(--muted)}
.serif{font-family:var(--display)}

/* the short bar under a section heading */
.rule{width:56px;height:5px;background:var(--saffron);margin:1rem 0 0}
.rule.center{margin-inline:auto}
.sec-ink .rule,.sec-navy .rule{background:var(--saffron)}
.band-saffron .rule{background:var(--ink)}

/* ---------- 4. LAYOUT ------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.wrap-tight{max-width:840px}
section{position:relative}
.sec{padding:clamp(3rem,6vw,5.5rem) 0}
.sec-sm{padding:clamp(2.2rem,4vw,3.4rem) 0}
.sec-paper{background:var(--paper)}
.sec-white{background:var(--white)}
.sec-sand{background:var(--sand)}

/* the ink ground. `.sec-navy` is kept as an alias because the page
   templates and main.js still ask for it by that name. */
.sec-ink,.sec-navy{background:var(--ink);color:var(--ink-100);position:relative;overflow:hidden}
.sec-ink::before,.sec-navy::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:url('../img/stamps.svg') 0 0 repeat;background-size:300px 300px;
}
.sec-ink>*,.sec-navy>*{position:relative;z-index:1}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4,
.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-navy h4{color:var(--saffron)}
.sec-ink p,.sec-navy p{color:var(--ink-100)}
/* scoped away from .btn and whole-card links, which carry their own colour */
.sec-ink a:not(.btn):not(.visa-tile):not(.card),
.sec-navy a:not(.btn):not(.visa-tile):not(.card){color:var(--saffron)}

/* the marigold ground */
.band-saffron{background:var(--saffron);color:var(--ink)}
.band-saffron h1,.band-saffron h2,.band-saffron h3,.band-saffron h4{color:var(--ink)}
.band-saffron p{color:#4B3A06}
.band-saffron .eyebrow{color:#8A6300}
.band-saffron a:not(.btn):not(.visa-tile):not(.card){color:var(--ink)}

/* SIGNATURE — a marigold band whose card block is cut by a downward
   triangle, with the section's CTA sitting in the notch beneath it.
   Both pieces sit in normal flow so nothing has to be nudged by hand. */
.notch{
  width:0;height:0;margin:0 auto;
  border-left:58px solid transparent;border-right:58px solid transparent;
  border-top:var(--notch) solid var(--white);
}
/* two classes so this out-specifies `.btn{display:inline-flex}` and centres */
.band-notch .notch-cta{display:flex;width:max-content;max-width:100%;margin:1.7rem auto 0}
/* when the cards above the notch are not white */
.band-notch.on-paper .notch{border-top-color:var(--paper)}
.band-notch.on-ink .notch{border-top-color:var(--ink)}

/* subtle top hairline to separate same-coloured neighbours */
.sec-hair{border-top:1px solid var(--line)}

.head{max-width:72ch;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.head.center{margin-inline:auto;text-align:center}
.head p{margin-top:1rem}

.grid{display:grid;gap:clamp(1rem,2vw,1.4rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.split.aside{grid-template-columns:1fr 360px;align-items:start}
.stack{display:flex;flex-direction:column;gap:1rem}
.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.row-tight{gap:.45rem}

/* ---------- 5. BUTTONS & PILLS --------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.5rem;border-radius:var(--r-sm);
  font-weight:700;font-size:.92rem;line-height:1;letter-spacing:.01em;
  border:2px solid transparent;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease,border-color .14s ease;
  white-space:nowrap;text-decoration:none!important;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none}

/* `btn-gold` and `btn-navy` keep their names so every page keeps working —
   gold is now the marigold fill, navy is the ink fill. */
.btn-gold{background:var(--saffron);color:var(--ink);box-shadow:var(--shadow-saffron);border-color:var(--saffron)}
.btn-gold:hover{background:var(--saffron-600);border-color:var(--saffron-600);color:var(--ink)}
.btn-navy{background:var(--ink);color:var(--saffron);box-shadow:var(--shadow-2);border-color:var(--ink)}
.btn-navy:hover{background:#000;border-color:#000;color:var(--saffron)}
.btn-wa{background:#25D366;color:#06301A;box-shadow:0 8px 20px rgba(37,211,102,.3);border-color:#25D366}
.btn-wa:hover{background:#1EBE5A;border-color:#1EBE5A;color:#06301A}
.btn-ghost{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--saffron)}
.btn-ghost-light{border-color:rgba(255,255,255,.55);background:transparent;color:#fff}
.btn-ghost-light:hover{border-color:var(--saffron);background:var(--saffron);color:var(--ink)}
.btn-sm{padding:.55rem 1rem;font-size:.84rem;border-width:1.5px}
.btn-lg{padding:1rem 1.9rem;font-size:1rem}
.btn-block{width:100%}
.btn.is-busy{opacity:.65;pointer-events:none}

/* text link with a chevron */
.tlink{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--saffron-700);
  font-size:.86rem;text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
.tlink:hover{text-decoration:none;color:var(--ink)}
.tlink::after{content:'→';transition:transform .16s ease;display:inline-block}
.tlink:hover::after{transform:translateX(3px)}
.tlink.on-dark{color:var(--saffron)}

.pill{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;
  border-radius:var(--r-sm);font-size:.73rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:var(--sand);color:var(--text-2);border:1px solid var(--line);
}
.pill-gold{background:var(--saffron);color:var(--ink);border-color:var(--saffron)}
.pill-green{background:var(--green-100);color:var(--green);border-color:#C2E4D2}
.pill-amber{background:var(--amber-100);color:var(--amber);border-color:#EFDCB2}
.pill-navy{background:var(--ink);color:var(--saffron);border-color:var(--ink)}
.pill-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}

/* filter chips */
.chip{
  padding:.5rem 1rem;border-radius:var(--r-sm);border:2px solid var(--line);
  background:var(--white);font-size:.85rem;font-weight:700;color:var(--text-2);
  transition:all .14s ease;cursor:pointer;
}
.chip:hover{border-color:var(--saffron)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--saffron)}

/* ---------- 6. HEADER & NAV ------------------------------------------ */
.topbar{
  background:var(--ink);color:var(--ink-100);font-size:.79rem;padding:.55rem 0;
}
.topbar .wrap{display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.topbar a:hover{color:var(--saffron)}
.topbar-note{display:flex;align-items:center;gap:.45rem;color:var(--saffron);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}

/* the marigold header band is the loudest thing on the page, by design */
.header{
  position:sticky;top:0;z-index:120;background:var(--saffron);
  border-bottom:3px solid var(--ink);
}
.header .wrap{display:flex;align-items:center;gap:1rem;height:var(--header-h)}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none!important;margin-right:auto}
.brand-mark{
  width:44px;height:44px;flex:none;border-radius:var(--r-sm);
  background:var(--ink);display:grid;place-items:center;color:var(--saffron);
  font-family:var(--display);font-weight:800;font-size:1.04rem;letter-spacing:.01em;
}
.brand-text{display:flex;flex-direction:column;line-height:1.08}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.22rem;color:var(--ink);
  letter-spacing:-.025em;text-transform:uppercase}
.brand-sub{font-size:.635rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7A5800}

.nav{display:flex;align-items:center;gap:.1rem}
.nav a{
  padding:.55rem .72rem;font-size:.855rem;font-weight:700;letter-spacing:.02em;
  color:var(--ink);text-decoration:none!important;border-radius:var(--r-sm);
  transition:background .14s ease,color .14s ease;text-transform:uppercase;
}
.nav a:hover{background:rgba(26,23,18,.1)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--saffron)}
.nav-cta{margin-left:.6rem}
.header .btn-navy{box-shadow:none}

.burger{
  display:none;width:44px;height:44px;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:transparent;place-items:center;color:var(--ink);
}
.burger svg{width:20px;height:20px}

/* mobile drawer */
.scrim{position:fixed;inset:0;background:rgba(14,12,9,.6);opacity:0;pointer-events:none;
  transition:opacity .2s ease;z-index:130}
.scrim.is-open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:var(--white);
  z-index:140;transform:translateX(101%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:1.1rem;overflow-y:auto;box-shadow:var(--shadow-3);
}
.drawer.is-open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.drawer-close{width:40px;height:40px;border:2px solid var(--ink);border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--ink)}
.drawer-close svg{width:19px;height:19px}
.drawer nav{display:flex;flex-direction:column;gap:.1rem;margin-bottom:1.1rem}
.drawer nav a{padding:.8rem .6rem;font-weight:700;text-transform:uppercase;font-size:.9rem;
  color:var(--ink);border-bottom:1px solid var(--line-2);text-decoration:none!important}
.drawer nav a[aria-current="page"]{color:var(--saffron-700)}
.drawer-foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line);display:grid;gap:.6rem}

/* ---------- 7. HERO & FINDER ----------------------------------------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--ink) url('../img/hero.svg') center/cover no-repeat;
  min-height:min(74vh,660px);display:flex;align-items:center;
}
/* the scrim that keeps the overlay text legible over the artwork */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,9,.66) 0%,rgba(14,12,9,.34) 44%,rgba(14,12,9,.74) 100%);
}
.hero>.wrap{position:relative;z-index:1;padding-block:clamp(3.4rem,8vw,6rem);
  text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{color:#fff;max-width:19ch;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--saffron)}
.hero .lede{color:#F0EADF;margin-top:1.15rem;max-width:60ch;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;justify-content:center}
/* kept so any page still using the old two-column hero degrades sanely */
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.4rem);align-items:center;width:100%}

/* trust strip along the bottom of the hero */
.hero-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.8rem;width:100%;
  padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.25);
}
.hero-trust div span{display:block;font-size:.76rem;color:#E7DFD2;line-height:1.35;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.hero-trust div b{
  display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.1rem);
  color:var(--saffron);line-height:1;margin-bottom:.35rem;letter-spacing:-.02em;
}

/* SIGNATURE — the visa finder strip that sits under the hero */
.finder{background:var(--saffron);border-bottom:3px solid var(--ink);padding:1.1rem 0}
.finder .wrap{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.finder-title{
  font-family:var(--display);font-weight:800;font-size:1.05rem;text-transform:uppercase;
  letter-spacing:-.02em;color:var(--ink);white-space:nowrap;margin-right:.3rem;
}
.finder-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;flex:1;min-width:280px}
.finder select{
  width:100%;padding:.72rem .9rem;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:var(--white);font-size:.88rem;font-weight:600;cursor:pointer;
  appearance:none;-webkit-appearance:none;padding-right:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1712' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:15px;
}
.finder select:focus{outline:none;box-shadow:0 0 0 3px rgba(26,23,18,.25)}
.finder .btn{flex:none}

/* the "no price list" honesty note */
.note-quote{
  display:flex;gap:.65rem;align-items:flex-start;padding:.9rem 1.05rem;border-radius:var(--r-sm);
  background:var(--saffron-100);border-left:4px solid var(--saffron);color:#54400A;
  font-size:.86rem;line-height:1.5;
}
.note-quote svg{width:17px;height:17px;flex:none;margin-top:2px}
.note-quote.on-dark{background:rgba(255,198,41,.13);border-left-color:var(--saffron);color:#F4E7C6}

/* reassurance ribbon under the finder */
.ribbon{background:var(--ink);padding:.95rem 0}
.ribbon .wrap{display:flex;flex-wrap:wrap;gap:.7rem 2rem;align-items:center;justify-content:center}
.ribbon-item{display:flex;align-items:center;gap:.5rem;font-size:.79rem;font-weight:700;
  color:#EFE8DB;text-transform:uppercase;letter-spacing:.07em}
.ribbon-item svg{width:16px;height:16px;color:var(--saffron);flex:none}

/* ---------- 8. CARDS & VISA SPECS ------------------------------------ */
.card{
  background:var(--white);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--ink)}
.card h3{margin-bottom:.55rem}
.card p{color:var(--muted);font-size:.92rem}
.sec-ink .card,.sec-navy .card{background:var(--ink-800);border-color:var(--ink-700)}
.sec-ink .card p,.sec-navy .card p{color:var(--ink-100)}

/* icon tile used on service / why cards */
.ico{
  width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--saffron);color:var(--ink);margin-bottom:1rem;
}
.ico svg{width:23px;height:23px}
.ico-navy{background:var(--ink);color:var(--saffron)}
.sec-ink .ico,.sec-navy .ico{background:var(--saffron);color:var(--ink)}

/* SIGNATURE — the visa spec card.
   Marigold strip on top carries the number people actually came for
   (how long it takes); the 2x2 grid underneath carries the rest. */
.visa-tile{
  display:flex;flex-direction:column;background:var(--white);
  border:2px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none!important;color:inherit;
  transition:transform .16s ease,box-shadow .16s ease;
}
.visa-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.visa-time{
  background:var(--saffron);color:var(--ink);padding:.55rem 1.1rem;
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  border-bottom:2px solid var(--ink);
}
.visa-time .t-days{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.visa-time .t-tier{opacity:.72;white-space:nowrap;font-size:.7rem;letter-spacing:.09em}
.visa-time svg{width:14px;height:14px;flex:none}
.visa-tile-top{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.1rem .4rem}
.visa-flag{font-size:2rem;line-height:1;flex:none}
.visa-tile h3{font-size:1.1rem;margin:0;text-transform:uppercase;letter-spacing:-.02em}
.visa-tile-type{font-size:.76rem;color:var(--muted);font-weight:600;margin-top:.15rem}
.visa-tile p{font-size:.88rem;color:var(--muted);margin:0;padding:.55rem 1.1rem .9rem;flex:1}

/* the 2x2 fact grid — the "details about the visa" bit */
.spec-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.spec{background:var(--white);padding:.7rem 1.1rem}
.spec span{display:block;font-size:.65rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:.2rem}
.spec b{display:block;font-size:.85rem;font-weight:700;color:var(--ink);line-height:1.3}
.spec b.yes{color:var(--amber)}
.spec b.no{color:var(--green)}

.visa-tile-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.85rem 1.1rem;border-top:2px solid var(--ink);background:var(--paper);font-size:.82rem;
}
.visa-tile-foot b{color:var(--ink);font-weight:700}

/* directory row (the long country list) */
.vrow{
  display:grid;grid-template-columns:2fr 1.5fr 1.2fr auto;gap:1rem;align-items:center;
  padding:1rem 1.2rem;background:var(--white);border:2px solid var(--line);
  border-radius:var(--r);text-decoration:none!important;color:inherit;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.vrow:hover{border-color:var(--ink);box-shadow:var(--shadow-1);transform:translateX(3px)}
.vrow-name{display:flex;align-items:center;gap:.7rem;font-weight:700;color:var(--ink)}
.vrow-name span{font-size:1.4rem;line-height:1}
.vrow-meta{font-size:.85rem;color:var(--muted)}
.vrow-go{color:var(--saffron-700);font-weight:700;font-size:.8rem;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.06em}

/* numbered process step */
.step{display:flex;gap:1.1rem;align-items:flex-start}
.step-n{
  width:48px;height:48px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:var(--saffron);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.2rem;
}
.step h3{font-size:1.1rem;margin-bottom:.4rem;text-transform:uppercase}
.step p{color:var(--muted);font-size:.92rem}
.sec-ink .step h3,.sec-navy .step h3{color:var(--saffron)}
.sec-ink .step p,.sec-navy .step p{color:var(--ink-100)}

/* testimonial */
.quote{
  background:var(--white);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;
}
.stars{color:var(--saffron-600);letter-spacing:.14em;font-size:.95rem;line-height:1}
.quote blockquote{margin:0;font-size:.94rem;color:var(--text-2);line-height:1.62;flex:1}
.quote-by{display:flex;flex-direction:column;gap:.1rem;padding-top:.9rem;border-top:1px solid var(--line-2)}
.quote-by b{font-size:.9rem;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}
.quote-by span{font-size:.78rem;color:var(--muted)}

/* stat tiles */
.stat{text-align:center;padding:1.3rem .8rem;background:var(--white);
  border:2px solid var(--ink);border-radius:var(--r-lg)}
.stat b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--ink);line-height:1;letter-spacing:-.03em}
.stat span{display:block;font-size:.76rem;color:var(--muted);margin-top:.4rem;
  text-transform:uppercase;letter-spacing:.07em;font-weight:600}

/* big call-to-action band */
.cta-band{
  background:var(--ink);border-radius:var(--r-xl);padding:clamp(1.8rem,4vw,3rem);color:#fff;
  display:grid;grid-template-columns:1.3fr auto;gap:2rem;align-items:center;
  position:relative;overflow:hidden;border:3px solid var(--saffron);
}
.cta-band::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:url('../img/stamps.svg') right -40px top -30px repeat;background-size:300px 300px;
}
.cta-band h2{color:var(--saffron);position:relative;z-index:1}
.cta-band p{color:var(--ink-100);margin-top:.85rem;position:relative;z-index:1;max-width:52ch}
.cta-band-actions{display:flex;flex-direction:column;gap:.6rem;position:relative;z-index:1;min-width:230px}

/* notice boxes */
.notice{
  display:flex;gap:.7rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:var(--r-sm);
  font-size:.89rem;line-height:1.55;border-left:4px solid;
}
.notice svg{width:18px;height:18px;flex:none;margin-top:2px}
.notice-info{background:var(--sand);border-color:var(--ink);color:var(--text-2)}
.notice-warn{background:var(--amber-100);border-color:var(--saffron-600);color:#6E4708}
.notice-ok{background:var(--green-100);border-color:var(--green);color:#0F5A3E}
.notice-bad{background:var(--red-100);border-color:var(--red);color:#8A2C22}
.sec-ink .notice-info,.sec-navy .notice-info{background:rgba(255,255,255,.06);
  border-color:var(--saffron);color:var(--ink-100)}

/* the sample-content warning banner (delete before go-live) */
.sample-banner{
  background:#7A1F16;color:#FFE9E5;font-size:.8rem;padding:.55rem 0;text-align:center;
}
.sample-banner b{color:#fff}

/* ---------- 9. FORMS ------------------------------------------------- */
.form{display:grid;gap:1.05rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field>label{font-size:.78rem;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.07em}
.field .hint{font-size:.78rem;color:var(--muted-2);text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;padding:.78rem .95rem;border:2px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);font-size:.94rem;transition:border-color .14s ease,box-shadow .14s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--saffron-300);
}
.field textarea{min-height:104px;resize:vertical}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23776E60' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px;
}
.field .err{font-size:.79rem;color:var(--red);display:none;text-transform:none;letter-spacing:0}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red);background:#FFFCFB}
.field.invalid .err{display:block}
.req{color:var(--red);font-weight:700}

.field-2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.field-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem}

.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--text-2);line-height:1.5}
.check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--saffron-600)}
.check-wrap.invalid .check{color:var(--red)}
.check-wrap.invalid .err{display:block;font-size:.79rem;color:var(--red)}
.check-wrap .err{display:none}

/* radio cards for choosing a service */
.radio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.rcard{position:relative}
.rcard input{position:absolute;opacity:0;pointer-events:none}
.rcard span{
  display:flex;flex-direction:column;gap:.15rem;padding:.85rem .95rem;cursor:pointer;
  border:2px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  font-size:.88rem;font-weight:700;color:var(--text-2);transition:all .14s ease;
}
.rcard span small{font-weight:500;font-size:.75rem;color:var(--muted)}
.rcard input:checked+span{border-color:var(--ink);background:var(--saffron-100);color:var(--ink)}
.rcard input:focus-visible+span{outline:3px solid var(--saffron-600);outline-offset:2px}

.form-foot{display:flex;flex-direction:column;gap:.8rem;padding-top:.3rem}
.form-status{margin:0}
.form-or{display:flex;align-items:center;gap:.8rem;color:var(--muted-2);font-size:.76rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.form-or::before,.form-or::after{content:'';flex:1;height:1px;background:var(--line)}

/* the "what happens next" list beside a form */
.next-list{display:grid;gap:.85rem}
.next-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.89rem;color:var(--text-2);line-height:1.5}
.next-list svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:2px}

/* ---------- 10. ACCORDION -------------------------------------------- */
.acc{border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{
  padding:1.05rem 1.25rem;cursor:pointer;font-weight:700;font-size:.96rem;color:var(--ink);
  display:flex;align-items:flex-start;gap:.8rem;list-style:none;transition:background .14s ease;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--saffron-100)}
.acc summary::after{
  content:'+';margin-left:auto;font-size:1.4rem;line-height:1;color:var(--saffron-600);
  font-weight:700;flex:none;transition:transform .18s ease;
}
.acc details[open] summary::after{content:'–'}
.acc details[open] summary{background:var(--saffron);color:var(--ink)}
.acc details[open] summary::after{color:var(--ink)}
.acc .acc-body{padding:1.1rem 1.25rem;font-size:.92rem;color:var(--text-2);line-height:1.65;max-width:78ch}

/* ---------- 11. DETAIL PAGES ----------------------------------------- */
.crumbs{font-size:.8rem;color:var(--muted);padding:1rem 0 0;display:flex;gap:.4rem;flex-wrap:wrap}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--muted-2)}

.page-head{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:clamp(2.2rem,5vw,3.8rem) 0;border-bottom:5px solid var(--saffron);
}
.page-head::before{
  content:'';position:absolute;inset:0;opacity:.65;pointer-events:none;
  background:url('../img/stamps.svg') right -30px top -20px repeat;background-size:300px 300px;
}
.page-head>.wrap{position:relative;z-index:1}
.page-head h1{color:#fff}
.page-head .lede{color:var(--ink-100);margin-top:1rem}
.page-head .eyebrow{color:var(--saffron)}
.page-head .crumbs{color:rgba(255,255,255,.6);padding-top:0;margin-bottom:1rem}
.page-head .crumbs a{color:rgba(255,255,255,.8)}
.page-head .crumbs span{color:rgba(255,255,255,.44)}
.head-flag{font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;margin-bottom:.6rem;display:block}

/* the fact table on a visa detail page */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  border:2px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.facts div{padding:1rem 1.15rem;background:var(--white)}
.facts dt,.facts span{display:block;font-size:.67rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:.3rem}
.facts dd,.facts b{display:block;margin:0;font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.4}

/* document checklist */
.doclist{display:grid;gap:.7rem}
.doclist li{display:flex;gap:.75rem;align-items:flex-start;font-size:.92rem;
  color:var(--text-2);line-height:1.55}
.doclist li::before{
  content:'';width:19px;height:19px;flex:none;margin-top:2px;border-radius:3px;
  background:var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A4C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.notelist{display:grid;gap:.8rem}
.notelist li{display:flex;gap:.75rem;align-items:flex-start;font-size:.91rem;
  color:var(--text-2);line-height:1.6}
.notelist li::before{content:'';width:8px;height:8px;background:var(--saffron);
  flex:none;margin-top:.5rem}

/* sticky sidebar on detail pages */
.aside-card{
  background:var(--white);border:2px solid var(--ink);border-radius:var(--r-lg);
  padding:1.5rem;position:sticky;top:calc(var(--header-h) + 18px);
}
.aside-card h3{font-size:1.1rem;margin-bottom:.5rem;text-transform:uppercase}
.aside-card .stack{margin-top:1.1rem}

.prose{max-width:70ch}
.prose h2{margin-top:2.2rem;margin-bottom:.9rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.6rem;margin-bottom:.5rem}
/* Only unclassed lists get the generic marigold square. Without :not([class])
   this rule out-specifies .doclist / .notelist and eats their own markers. */
.prose ul:not([class]){display:grid;gap:.6rem;margin:0 0 1rem}
.prose ul:not([class]) li{display:flex;gap:.7rem;font-size:.94rem;color:var(--text-2);line-height:1.6}
.prose ul:not([class]) li::before{content:'';width:7px;height:7px;
  background:var(--saffron);flex:none;margin-top:.55rem}
.prose .doclist,.prose .notelist{margin:0 0 1rem}

/* ---------- 12. FOOTER & STICKY CTA BAR ------------------------------ */
.footer{background:var(--ink);color:var(--ink-100);padding:clamp(2.6rem,5vw,4rem) 0 0;
  font-size:.89rem;border-top:6px solid var(--saffron)}
.footer a{color:var(--ink-100);text-decoration:none}
.footer a:hover{color:var(--saffron);text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem}
.footer h4{color:var(--saffron);font-family:var(--font);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.footer ul{display:grid;gap:.55rem}
.footer .brand-mark{background:var(--saffron);color:var(--ink)}
.footer .brand-name{color:#fff}
.footer .brand-sub{color:var(--saffron)}
.footer-about{max-width:38ch;margin-top:1.1rem;color:var(--muted-2);line-height:1.6;font-size:.855rem}

/* outlined marigold contact blocks, the way the reference site does them */
.footer-contact{display:grid;gap:.75rem}
.footer-contact div{display:flex;gap:.7rem;align-items:flex-start}
.footer-contact svg{width:16px;height:16px;color:var(--saffron);flex:none;margin-top:3px}
.hours-list{display:grid;gap:.4rem;font-size:.85rem}
.hours-list div{display:flex;justify-content:space-between;gap:1rem}
.hours-list b{color:#fff;font-weight:600}
.socials{display:flex;gap:.55rem;margin-top:1.2rem}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--saffron);color:var(--saffron);transition:all .14s ease}
.socials a:hover{background:var(--saffron);color:var(--ink);text-decoration:none}
.socials svg{width:17px;height:17px}
.footer-legal{
  margin-top:2.4rem;border-top:1px solid rgba(255,255,255,.13);padding:1.3rem 0 1.6rem;
  display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;justify-content:space-between;
  font-size:.79rem;color:var(--muted-2);
}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem}
.footer-disclaimer{
  background:#0E0C09;padding:1.15rem 0;font-size:.77rem;line-height:1.6;color:var(--muted-2);
}
.footer-disclaimer .wrap{display:grid;gap:.6rem}

/* desktop floating WhatsApp button */
.wa-float{
  position:fixed;right:20px;bottom:24px;z-index:110;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#06301A;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(37,211,102,.42);transition:transform .18s ease;
}
.wa-float:hover{transform:scale(1.07) translateY(-2px)}
.wa-float svg{width:29px;height:29px}
.wa-float::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.55);opacity:0}}

/* mobile sticky call / whatsapp bar */
.cta-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:115;
  background:var(--ink);border-top:3px solid var(--saffron);padding:.6rem .7rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
}
.cta-bar-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.45rem}
.cta-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  padding:.55rem .3rem;border-radius:var(--r-sm);font-size:.7rem;font-weight:700;
  text-decoration:none!important;line-height:1;text-transform:uppercase;letter-spacing:.04em;
}
.cta-bar svg{width:19px;height:19px}
.cta-bar .b-call{background:var(--white);color:var(--ink)}
.cta-bar .b-wa{background:#25D366;color:#06301A}
.cta-bar .b-form{background:var(--saffron);color:var(--ink)}

/* ---------- 13. UTILITIES -------------------------------------------- */
.hide{display:none!important}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:1.8rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:1.2rem}.mb-3{margin-bottom:1.8rem}
.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}
.empty{
  padding:2.6rem 1.5rem;text-align:center;background:var(--white);border:2px dashed var(--line);
  border-radius:var(--r-lg);color:var(--muted);
}
.count{font-size:.84rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted-2);pointer-events:none}
.search-wrap input{padding-left:2.7rem}

/* ---------- 14. RESPONSIVE ------------------------------------------- */
@media (max-width:1060px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .split.aside{grid-template-columns:1fr}
  .aside-card{position:static}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .nav a{padding:.5rem .55rem;font-size:.8rem}
}
@media (max-width:940px){
  .nav,.nav-cta{display:none}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr}
  .cta-band-actions{min-width:0}
  .vrow{grid-template-columns:1fr auto;row-gap:.5rem}
  .vrow-meta:nth-of-type(2){display:none}
  .radio-cards{grid-template-columns:repeat(2,1fr)}
  .finder .wrap{flex-direction:column;align-items:stretch}
  .finder-title{text-align:center;margin:0 0 .2rem}
  .finder .btn{width:100%}
}
@media (max-width:720px){
  :root{--bar-h:74px;--notch:28px}
  .cta-bar{display:block}
  .wa-float{display:none}
  .topbar-hide{display:none}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-trust{grid-template-columns:1fr 1fr;gap:1.2rem}
  .finder-fields{grid-template-columns:1fr}
  .field-2,.field-3{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-legal{flex-direction:column;align-items:flex-start}
  .radio-cards{grid-template-columns:1fr}
  .band-notch::after{border-left-width:40px;border-right-width:40px}
  h1{font-size:clamp(1.9rem,7.6vw,2.5rem)}
}
@media (max-width:420px){
  .brand-sub{display:none}
  .hero-trust{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr}
}

/* ---------- PRINT ---------------------------------------------------- */
@media print{
  .header,.topbar,.cta-bar,.wa-float,.footer,.cta-band,.drawer,.scrim,
  .sample-banner,.finder,.ribbon{display:none!important}
  body{background:#fff;padding:0}
  .hero,.page-head{background:#fff;color:#000;min-height:auto}
  .hero::before,.page-head::before{display:none}
  .hero h1,.hero .lede,.page-head h1,.page-head .lede{color:#000;text-shadow:none}
  a{text-decoration:underline}
}