/* TRAVIGLOB — assets/css/site.css
   Design tokens first. Change a value here, not in a rule below.
   Palette is drawn from the objects this business handles: the deep navy of a
   passport page, the green of a visa foil, and the ochre of an entry stamp. */

:root{
  --ink:#12233F;
  --ink-deep:#0B1728;
  --ink-soft:#2C3F5A;
  --foil:#1B6B57;
  --foil-light:#E8F1ED;
  --stamp:#A8412A;
  --stamp-light:#F7EDE9;
  --paper:#FBFAF8;
  --card:#FFFFFF;
  --rule:#DCE2E8;
  --rule-soft:#EDF0F3;
  --muted:#58697E;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Spectral',Georgia,'Times New Roman',serif;

  --step--1:0.875rem;
  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:1.4375rem;
  --step-3:1.8125rem;
  --step-4:2.25rem;
  --step-5:2.9375rem;

  /* ---- Hero background strength. Tune these two, nothing else. ----------
     --hero-media: how much of the video/photo shows through. 0 = invisible,
       1 = full strength. Above about .6 the headline starts to struggle.
     --hero-veil-left / --hero-veil-right: how much navy sits over the media.
       The left is kept heavy because the headline and buttons live there;
       the right is lighter so the footage is clearly visible.
     Check the result on a phone before settling: a laptop screen at full
     brightness flatters low-contrast text in a way a phone outdoors does not. */
  --hero-media:.46;
  --hero-veil-left:.92;
  --hero-veil-mid:.78;
  --hero-veil-right:.34;

  --wrap:1140px;
  --gap:clamp(1.25rem,3vw,2.25rem);
  --band:clamp(3rem,7vw,5.5rem);
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--rule);text-underline-offset:3px}
a:hover{text-decoration-color:var(--stamp)}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.18;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-family:var(--sans);font-weight:600;letter-spacing:0}
p{margin:0 0 1em;max-width:68ch}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.35em}
strong{font-weight:600}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--rule-soft);padding:.1em .35em;border-radius:2px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2.5rem,760px)}
.band{padding-block:var(--band)}
.band-tint{background:var(--card);border-block:1px solid var(--rule)}
.band-deep{background:var(--ink);color:#E8EDF4}
.band-deep h1,.band-deep h2,.band-deep h3{color:#fff}
.band-deep a{color:#fff}
.lede{font-size:var(--step-1);color:var(--ink-soft);max-width:60ch;line-height:1.6}
.band-deep .lede{color:#B9C6D8}
.muted{color:var(--muted)}
.small{font-size:var(--step--1)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

.devbar{background:var(--stamp);color:#fff;font-size:.8125rem;padding:.5rem 1rem;text-align:center}
.devbar code{background:rgba(255,255,255,.18);color:#fff}

/* ---------- Header ---------- */
.site-head{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.head-inner{display:flex;align-items:center;gap:var(--gap);min-height:74px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{color:var(--foil);display:flex}
.brand-word{font-family:var(--serif);font-size:1.28rem;font-weight:600;letter-spacing:.055em}
.brand-logo{height:38px;width:auto;max-width:240px;display:block}
.foot-logo{height:34px;width:auto;max-width:220px;margin-bottom:.9rem}
@media (max-width:820px){.brand-logo{height:32px;max-width:180px}}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.site-nav a{text-decoration:none;font-size:.9375rem;color:var(--ink-soft);padding-block:.4rem;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--foil)}
.head-cta{background:var(--ink);color:#fff;text-decoration:none;font-size:.875rem;font-weight:500;padding:.6rem 1.05rem;border-radius:var(--radius)}
.head-cta:hover{background:var(--ink-deep)}
.navtoggle,.navburger{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:500;font-size:.9375rem;padding:.75rem 1.35rem;border-radius:var(--radius);border:1px solid var(--ink);cursor:pointer}
.btn:hover{background:var(--ink-deep)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-quiet:hover{background:var(--card);border-color:var(--ink-soft)}
/* Any dark surface, not just .band-deep. The hero and offering headers use
   their own classes, and leaving them out made the buttons invisible. */
.band-deep .btn,.hero .btn,.offer-head .btn{background:#fff;color:var(--ink);border-color:#fff}
.band-deep .btn:hover,.hero .btn:hover,.offer-head .btn:hover{background:var(--ibm-blue-10,#E8EDF4);color:var(--ink-deep)}
.band-deep .btn-quiet,.hero .btn-quiet,.offer-head .btn-quiet{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.band-deep .btn-quiet:hover,.hero .btn-quiet:hover,.offer-head .btn-quiet:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* ---------- Hero ---------- */
.hero{background:var(--ink);color:#E8EDF4;padding-block:clamp(3rem,7vw,5rem);position:relative;isolation:isolate;overflow:hidden}
/* Background photograph, when one exists at the documented path.
   Two layers: the image at low opacity, then a navy gradient over it, so
   headline contrast never depends on which photo is dropped in. */
.hero-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:var(--hero-media)}
/* Video sits above the still and below the veil. It starts fully transparent
   and is only faded in once the browser reports it is actually playing, so a
   slow or failed load leaves the navy showing rather than a black rectangle. */
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none;border:0}
.hero-video.is-playing{opacity:var(--hero-media)}
.hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(18,35,63,var(--hero-veil-left)) 0%,
    rgba(18,35,63,var(--hero-veil-mid)) 48%,
    rgba(18,35,63,var(--hero-veil-right)) 100%)}
/* On narrow screens the text sits over the whole width, so the veil goes flat
   and heavy. Mobile never loads the video anyway; this covers the still. */
@media (max-width:820px){
  .hero-veil{background:rgba(18,35,63,.90)}
  .hero-bg{opacity:.34}
}
.offer-head{position:relative;isolation:isolate;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.7fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.hero h1{color:#fff;font-size:clamp(2.15rem,4.6vw,3.35rem);font-weight:300;max-width:16ch}
.hero p{color:#B9C6D8;font-size:var(--step-1);max-width:52ch}
.hero-note{margin-top:2rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.16);color:#93A5BC;font-size:.9375rem;max-width:48ch}

/* The document card. The characteristic object of this business is a
   checklist, so it is the hero image rather than a photograph. */
.doclist{background:var(--card);color:var(--ink);border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(6,15,30,.30);overflow:hidden;
  max-width:340px;margin-left:auto;margin-top:-.5rem}
.doclist-top{background:var(--foil);color:#fff;padding:.6rem 1rem;font-size:.72rem;font-weight:500;
  letter-spacing:.02em;display:flex;justify-content:space-between;gap:.75rem}
.doclist-body{padding:1rem}
.doclist-body h2{font-family:var(--sans);font-size:.875rem;font-weight:600;margin-bottom:.6rem;line-height:1.3}
.doclist ul{list-style:none;margin:0;padding:0}
.doclist li{display:flex;gap:.55rem;align-items:flex-start;padding:.4rem 0;
  border-bottom:1px dashed var(--rule);font-size:.8125rem;line-height:1.42}
.doclist li:last-child{border-bottom:0}
.tick{flex:0 0 14px;height:14px;margin-top:.18rem;border:1.5px solid var(--foil);border-radius:2px;
  display:grid;place-items:center;color:var(--foil);font-size:9px;line-height:1}
.doclist-foot{background:var(--stamp-light);color:var(--stamp);padding:.6rem 1rem;
  font-size:.72rem;line-height:1.45}
@media (max-width:960px){.doclist{max-width:none;margin-left:0;margin-top:0}}

/* ---------- Generic grids and cards ---------- */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,4rem);align-items:start}

.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:1.5rem}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}

.section-title{max-width:34ch;margin-bottom:.6rem}
.section-intro{max-width:62ch;color:var(--ink-soft);margin-bottom:2.5rem}

/* ---------- Reasons (the three things competitors will not say) ---------- */
.reason{border-top:2px solid var(--ink);padding-top:1.1rem}
.reason h3{font-family:var(--serif);font-weight:600;font-size:var(--step-2);letter-spacing:-.01em}
.band-deep .reason{border-top-color:var(--stamp)}

/* ---------- Process: a real sequence, so numbers are earned ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:1.25rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:start;padding-bottom:1.25rem;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:0;padding-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-size:1.25rem;color:var(--foil);border-right:1px solid var(--rule);padding-right:.75rem;line-height:1.4}
.steps h3{margin-bottom:.2rem}
.steps p{margin:0;color:var(--ink-soft);font-size:.9375rem}

/* ---------- Catalogue ---------- */
.cat-group{margin-bottom:3.25rem}
.cat-group>h2{font-size:var(--step-2);padding-bottom:.6rem;border-bottom:2px solid var(--ink);margin-bottom:1.5rem}
.cat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cat-item{background:var(--card);padding:1.5rem;display:flex;flex-direction:column}
.cat-item h3{margin-bottom:.45rem;font-size:1.0625rem}
.cat-item h3 a{text-decoration:none}
.cat-item h3 a:hover{text-decoration:underline;text-decoration-color:var(--stamp)}
.cat-item p{font-size:.9375rem;color:var(--ink-soft);margin-bottom:1rem}
.cat-meta{margin-top:auto;padding-top:.9rem;border-top:1px dashed var(--rule);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.8125rem;color:var(--muted)}
.cat-price{color:var(--foil);font-weight:600}

/* ---------- Offering page ---------- */
.offer-head{background:var(--ink);color:#E8EDF4;padding-block:clamp(2.5rem,5vw,4rem)}
.offer-head h1{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:20ch}
.offer-head p{color:#B9C6D8;max-width:60ch}
.crumb{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1.25rem;font-size:.8125rem;color:#93A5BC}
.crumb a{color:#B9C6D8}
.crumb li+li::before{content:"/";margin-right:.5rem;color:#5A6E88}
.aside{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:1.4rem;position:sticky;top:96px}
.aside h2{font-family:var(--sans);font-size:.9375rem;font-weight:600;margin-bottom:.75rem}
.aside dl{margin:0 0 1.25rem}
.aside dt{font-size:.75rem;color:var(--muted);margin-top:.85rem}
.aside dd{margin:.1rem 0 0;font-size:.9375rem}
.checks{list-style:none;padding:0;margin:0 0 1.5rem}
.checks li{display:flex;gap:.7rem;padding:.5rem 0;border-bottom:1px dashed var(--rule);font-size:.9375rem;line-height:1.55}
.checks li:last-child{border-bottom:0}
.checks li::before{content:"";flex:0 0 8px;height:8px;margin-top:.55rem;background:var(--foil);border-radius:50%}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:1.1rem 0}
.faq summary{cursor:pointer;font-weight:500;font-size:1.0625rem;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--foil);font-size:1.4rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.85rem 0 0;color:var(--ink-soft);max-width:72ch}

/* ---------- Table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl th,.tbl td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{background:var(--ink);color:#fff;font-weight:500;font-size:.8125rem}
.tbl tbody tr:nth-child(even){background:var(--card)}
.tbl-scroll{overflow-x:auto}

/* ---------- Notice ---------- */
.notice{border-left:3px solid var(--stamp);background:var(--stamp-light);padding:1.1rem 1.35rem;border-radius:0 var(--radius) var(--radius) 0}
.notice p{margin:0;font-size:.9375rem;color:#6E2E1D}
.notice p+p{margin-top:.6rem}
.notice-foil{border-left-color:var(--foil);background:var(--foil-light)}
.notice-foil p{color:#144C3E}

/* ---------- Form ---------- */
.form{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.35rem}
.field .hint{font-size:.8125rem;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.9375rem;padding:.7rem .8rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);color:var(--ink)
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink-soft);background:#fff}
.field .err{display:block;color:var(--stamp);font-size:.8125rem;margin-top:.3rem}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--stamp)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{font-size:.8125rem;color:var(--muted);margin-top:1rem}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink-deep);color:#9FB0C6;padding-top:var(--band);margin-top:0;font-size:.9375rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--gap);padding-bottom:2.5rem}
.foot-word{color:#fff;margin-bottom:.75rem}
.site-foot p{color:#9FB0C6;max-width:36ch}
.foot-reg{font-size:.8125rem;color:#758AA5}
.foot-col h2{font-family:var(--sans);font-size:.8125rem;font-weight:600;color:#fff;margin-bottom:.9rem;letter-spacing:.02em}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:.5rem}
.foot-col a{color:#9FB0C6;text-decoration:none}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:baseline}
.foot-legal p{font-size:.8125rem;max-width:78ch;margin:0;color:#758AA5}
.foot-legal a{color:#9FB0C6}
.foot-legal ul{list-style:none;display:flex;gap:1.25rem;padding:0;margin:0;font-size:.8125rem}
.foot-legal a{text-decoration:none}
.foot-legal a:hover{color:#fff;text-decoration:underline}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .aside{position:static}
}
@media (max-width:820px){
  .head-inner{flex-wrap:wrap;min-height:64px;position:relative}
  .navburger{display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:42px;height:42px;cursor:pointer;padding:0 8px}
  .navburger span{display:block;height:2px;background:var(--ink);border-radius:2px}
  .site-nav{order:3;flex-basis:100%;margin-left:0;display:none}
  .navtoggle:checked~.site-nav{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding-block:.5rem}
  .site-nav a{display:block;padding:.7rem 0;border-bottom:1px solid var(--rule-soft)}
  .head-cta{order:2;font-size:.8125rem;padding:.5rem .85rem}
}
@media (max-width:680px){
  .g2,.g3,.g4,.form-row{grid-template-columns:1fr}
  .cat-list{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  h1{font-size:var(--step-4)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* Never autoplay moving video for someone who has asked for less motion.
     The JavaScript checks this too; the rule is here as a second line. */
  .hero-video{display:none}
}

@media print{
  .site-head,.site-foot,.devbar,.actions,.head-cta,.hero-video{display:none}
  body{background:#fff}
  .hero,.offer-head,.band-deep{background:#fff;color:#000}
  .hero h1,.offer-head h1{color:#000}
}
/* ---------- Homepage photography ----------
   Every rule here only takes effect when the image file exists, so the page
   is complete without any of them. Images are cropped with object-fit to a
   ratio set on the element, so nothing shifts as they load. */

/* Portrait image filling the left column beside "How a case runs". */
.side-figure{margin:1.75rem 0 0;border-radius:var(--radius);overflow:hidden}
.side-figure img{width:100%;height:auto;object-fit:cover;display:block;border-radius:var(--radius)}

/* Panoramic band opening a section. */
.wide-figure{margin:0 0 2.5rem;border-radius:var(--radius);overflow:hidden}
.wide-figure img{width:100%;height:auto;object-fit:cover;display:block;border-radius:var(--radius)}

/* Destination tiles, with the name laid over the foot of each image. */
.dest-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin-bottom:2rem}
.dest-strip figure{margin:0;border-radius:var(--radius);overflow:hidden;position:relative}
.dest-strip img{width:100%;height:auto;object-fit:cover;display:block}
.dest-strip figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(11,23,40,.88));
  color:#fff;font-size:.75rem;font-weight:500;padding:1.5rem .5rem .45rem;text-align:center}
@media (max-width:900px){.dest-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.dest-strip{grid-template-columns:repeat(2,1fr)}}

@media print{.side-figure,.wide-figure,.dest-strip{display:none}}


/* ==========================================================
   TRAVIGLOB - appearance overrides
   Appended at the END of site.css so these win over the
   rules above. No other file changes.
   ========================================================== */

:root{
  --radius:7px;              /* was 3px - card, aside, button, figure corners */
  --paper:#F2F5F9;           /* page background - blue mist */
  --rule:#D7E0EA;
  --rule-soft:#E6ECF3;
}

/* Catalogue cards are grid cells separated by 1px hairlines, so they
   have no corners to round. Break the hairlines into real gaps and
   give each card its own border. This is the only structural change. */
.cat-list{background:transparent;border:0;gap:1.25rem}
.cat-item{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}

/* Hover. Applies to both card types and the summary box.
   will-change is deliberately omitted: on a page with 19 cards it
   costs more in compositor memory than the animation is worth. */
.card,.cat-item,.aside{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover,.cat-item:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(18,35,63,.10), 0 2px 6px rgba(18,35,63,.06);
  border-color:var(--rule-soft);
}

/* Someone who has asked for less motion gets the shadow, not the movement. */
@media (prefers-reduced-motion:reduce){
  .card,.cat-item,.aside{transition:none}
  .card:hover,.cat-item:hover{transform:none}
}

/* Catalogue card heading becomes a solid clickable bar.
   The card padding moves off the card and onto the children, so the
   bar can run edge to edge instead of floating inside a white margin.
   The <a> is set to display:block so the whole bar is the click
   target - a link that only responds on the words is a small target
   on a phone. */
.cat-item{padding:0;overflow:hidden}
.cat-item h3{margin:0;font-size:1rem;line-height:1.35}
.cat-item h3 a{
  display:block;padding:.85rem 1.25rem;
  background:var(--foil-light);color:var(--ink);
  text-decoration:none;font-weight:600;
  transition:background .16s ease;
}
.cat-item h3 a:hover,.cat-item h3 a:focus-visible{
  background:var(--ink);color:#fff;text-decoration:none;
}
.cat-item h3 a:focus-visible{outline:2px solid var(--stamp);outline-offset:-3px}

/* Padding the bar no longer provides. */
.cat-item p{margin:1rem 1.25rem}
.cat-meta{margin:auto 1.25rem 0;padding-bottom:1.1rem}

/* Header. It currently uses the same colour as the body, so scrolling
   content slides underneath and the two blend. */
.site-head{background:var(--card);border-bottom:2px solid var(--ink)}



/* ==========================================================
   Enquiry form inside a dark band - contrast fix
   Append at the END of site.css.

   The form is a WHITE card that sits inside .band-deep on the
   homepage, the catalogue page and all 19 offering pages. Three
   rules written for the dark background were cascading into it:

     .band-deep{color:#E8EDF4}   -> .field label sets no colour of
                                    its own, so labels inherited
                                    near-white text on white.
     .band-deep a{color:#fff}    -> the privacy link went white,
                                    leaving only its underline.
     .band-deep .btn{background:#fff;color:var(--ink)}
                                 -> a white button on a white card.

   The .hint spans stayed readable because they DO set their own
   colour, which is why "with country code" was visible while the
   word "Phone" was not.

   Fix: re-assert the light-surface colours inside .form. Scoped to
   .band-deep .form so the dark band itself is untouched.
   ========================================================== */
.band-deep .form{color:var(--ink)}
.band-deep .form label{color:var(--ink)}
.band-deep .form .hint{color:var(--muted)}
.band-deep .form .form-foot{color:var(--muted)}

.band-deep .form a{color:var(--ink);text-decoration-color:var(--rule)}
.band-deep .form a:hover{color:var(--ink);text-decoration-color:var(--stamp)}

.band-deep .form .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.band-deep .form .btn:hover{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep)}

/* Validation messages and the bounce notice, for the same reason. */
.band-deep .form .err{color:var(--stamp)}
.band-deep .form .notice p{color:#6E2E1D}
.band-deep .form .notice-foil p{color:#144C3E}