/* ============================================================
   TOKENS
   Palette sampled directly from the supplied logo file.
   Contrast ratios verified against WCAG 2.2 AA.
   ============================================================ */
:root{
  --navy:#15274C;        /* 14.72:1 on white */
  --navy-mid:#1D335E;
  --navy-deep:#0E1B37;
  --gold:#E5B33C;        /* 7.60:1 on navy — ACCENT ON NAVY ONLY */
  --gold-ink:#7A5F14;    /* 6.04:1 on white — gold-toned TEXT on light */
  --ink:#1A1D23;         /* 15.4:1 on white */
  --muted:#4A5568;       /* 7.53:1 on white */
  --line:#D9DCE1;
  --line-soft:#E8EAEE;
  --paper:#FFFFFF;
  --band:#F5F5F2;

  --measure:34rem;
  --gap:clamp(1.25rem,3.2vw,2.25rem);
  --pad:clamp(1.25rem,5vw,2.5rem);
  --section:clamp(4rem,9vw,7.5rem);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--navy);margin:0;letter-spacing:-.012em;line-height:1.14}
h1{font-size:clamp(2.4rem,6.4vw,4.15rem);line-height:1.06;letter-spacing:-.024em}
h2{font-size:clamp(1.75rem,3.9vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.42rem);line-height:1.25}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:var(--navy);text-underline-offset:.18em;text-decoration-thickness:1px}

:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px;border-radius:1px}
.on-navy :focus-visible{outline-color:var(--gold)}

.wrap{max-width:78rem;margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.9rem 1.25rem;z-index:200;font-weight:500}
.skip:focus{left:0}

/* ---------- buttons: min 44px target ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3rem;padding:.8rem 1.5rem;border-radius:2px;border:1.5px solid transparent;
  font-family:var(--sans);font-size:1rem;font-weight:500;line-height:1.2;
  text-decoration:none;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-mid);border-color:var(--navy-mid)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);background:#fff}
.on-navy .btn-primary{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.on-navy .btn-primary:hover{background:#f2c454;border-color:#f2c454}
.on-navy .btn-ghost{color:#fff;border-color:rgba(255,255,255,.36)}
.on-navy .btn-ghost:hover{border-color:#fff}
.btn svg{width:1.15em;height:1.15em;flex:none}

.eyebrow{
  font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--gold-ink);
  margin:0 0 .75rem;
}
.lede{font-size:clamp(1.1rem,1.7vw,1.28rem);color:var(--muted);line-height:1.62;max-width:var(--measure)}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line-soft);
}
.head-in{display:flex;align-items:center;gap:var(--gap);min-height:4.75rem;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand img{width:46px}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-family:var(--sans);font-size:.9375rem;font-weight:600;color:var(--navy);letter-spacing:.01em}
.brand-txt span{font-size:.75rem;color:var(--muted);letter-spacing:.09em}
.site-nav{display:flex;gap:1.6rem;margin-left:auto}
.site-nav a{font-size:.9688rem;color:var(--muted);text-decoration:none;padding:.4rem 0}
.site-nav a:hover{color:var(--navy);text-decoration:underline}
.head-cta{display:flex;gap:.6rem;flex:none}
.head-cta .btn{min-height:2.75rem;padding:.55rem 1.15rem;font-size:.9375rem}
@media (max-width:1040px){ .site-nav{display:none} }
@media (max-width:620px){ .head-cta .btn-ghost{display:none} .brand-txt span{display:none} }

/* ============================================================
   HERO — asymmetric. Content left, live clocks right.
   ============================================================ */
.hero{padding-block:clamp(3.25rem,7vw,6rem) clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.hero h1{max-width:15ch}
.hero .lede{margin-top:1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.hero-note{margin-top:1.15rem;font-size:.9375rem;color:var(--muted)}

/* clocks — the one bold element */
.clocks{border:1px solid var(--line);border-top:3px solid var(--navy);padding:1.6rem 1.5rem 1.35rem;background:var(--band)}
.clock-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.clock{min-width:0}
.clock + .clock{border-left:1px solid var(--line);padding-left:1.25rem}
.clock-city{font-size:.9375rem;font-weight:600;color:var(--muted);margin:0 0 .4rem}
.clock-time{font-family:var(--serif);font-size:clamp(2rem,4.4vw,2.7rem);color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;display:block}
.clock-meta{font-size:.8125rem;color:var(--muted);margin:.4rem 0 0}
.clock-foot{margin:1.35rem 0 0;padding-top:1.05rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--muted)}
.clock-foot b{color:var(--navy);font-weight:600}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .clocks{max-width:26rem}
}

/* ============================================================
   CREDENTIAL STRIP
   ============================================================ */
.creds{background:var(--navy);color:#fff}
.creds-in{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-block:1.85rem}
.cred{min-width:0}
.cred dt{font-size:.9375rem;color:var(--gold);font-weight:600;margin:0 0 .3rem}
.cred dd{margin:0;font-size:.9688rem;color:rgba(255,255,255,.92);line-height:1.5}
@media (max-width:760px){ .creds-in{grid-template-columns:1fr;gap:1.15rem} }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding-block:var(--section)}
.section--band{background:var(--band)}
.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.section-head p{margin-top:1.1rem;color:var(--muted);font-size:1.0938rem;max-width:var(--measure)}

/* services — full-width rows, not a card kit */
.svc{border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--gap);padding-block:2.35rem}
.svc:last-of-type{border-bottom:1px solid var(--line)}
.svc-body p{color:var(--muted);margin-top:.7rem}
.svc h3{margin-bottom:0}
.svc-facts{margin:0;font-size:.9688rem}
.svc-facts div{display:flex;gap:.9rem;padding:.55rem 0;border-bottom:1px solid var(--line-soft)}
.svc-facts div:last-child{border-bottom:0}
.svc-facts dt{flex:0 0 8.5rem;color:var(--muted)}
.svc-facts dd{margin:0;color:var(--ink);font-weight:500}
@media (max-width:880px){
  .svc{grid-template-columns:1fr}
  .svc-facts{margin-top:1.1rem;border-top:1px solid var(--line-soft);padding-top:.35rem}
}

/* process — genuine sequence, so numbering is earned */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);counter-reset:s}
.step{border-top:3px solid var(--navy);padding-top:1.15rem}
.step b{display:block;font-family:var(--serif);font-size:1.1875rem;color:var(--navy);margin-bottom:.4rem;font-weight:500}
.step span{display:block;font-family:var(--serif);font-size:1.75rem;line-height:1;color:var(--gold-ink);margin-bottom:.7rem}
.step p{font-size:.9688rem;color:var(--muted);margin:0}
@media (max-width:880px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* fit / not fit */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.fit ul{list-style:none;margin:1.15rem 0 0;padding:0}
.fit li{padding:.7rem 0 .7rem 1.75rem;border-bottom:1px solid var(--line-soft);position:relative;color:var(--muted)}
.fit li::before{position:absolute;left:0;top:.7rem;font-weight:600}
.fit-yes li::before{content:"✓";color:var(--gold-ink)}
.fit-no li::before{content:"—";color:var(--muted)}
.fit h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;letter-spacing:0}
@media (max-width:720px){ .fit{grid-template-columns:1fr} }

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:880px){ .about{grid-template-columns:1fr} }

/* placeholder — deliberately obvious so nothing fake ships */
.tbc{border:2px dashed var(--gold-ink);background:#FBF7EA;padding:1.5rem 1.5rem 1.35rem;border-radius:2px}
.tbc > b{display:block;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.7rem;font-weight:600}
.tbc p{font-size:.9688rem;color:var(--muted)}
.tbc ul{margin:.5rem 0 0;padding-left:1.15rem;font-size:.9688rem;color:var(--muted)}
.tbc li{margin-bottom:.35rem}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--navy);color:#fff}
.contact h2,.contact h3{color:#fff}
.contact .section-head p{color:rgba(255,255,255,.8)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.25rem,5vw,4.5rem);align-items:start}
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr} }

.ladder{list-style:none;margin:0;padding:0}
.ladder li{border-top:1px solid rgba(255,255,255,.18);padding:1.15rem 0}
.ladder li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.ladder a{display:flex;align-items:center;gap:.95rem;color:#fff;text-decoration:none;min-height:2.75rem}
.ladder a:hover .l-title{text-decoration:underline}
.l-ico{flex:none;width:2.5rem;height:2.5rem;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:2px}
.l-ico svg{width:1.15rem;height:1.15rem;fill:var(--gold)}
.l-title{display:block;font-weight:500}
.l-sub{display:block;font-size:.875rem;color:rgba(255,255,255,.72)}

/* form */
.form-shell{background:#fff;color:var(--ink);padding:clamp(1.6rem,3.5vw,2.25rem);border-radius:2px;border-top:3px solid var(--gold)}
.form-shell h3{color:var(--navy);font-size:1.3rem}
.form-shell > p{color:var(--muted);font-size:.9688rem;margin-top:.6rem}
.field{margin-top:1.35rem}
.field label{display:block;font-size:.9375rem;font-weight:500;color:var(--ink);margin-bottom:.4rem}
.field .opt{color:var(--muted);font-weight:400}
.field input,.field textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:2px;background:#fff;
  min-height:3rem;transition:border-color .15s ease;
}
.field textarea{min-height:7.5rem;resize:vertical;line-height:1.55}
.field input:hover,.field textarea:hover{border-color:#B9BEC7}
.field input:focus,.field textarea:focus{border-color:var(--navy);outline:3px solid var(--gold-ink);outline-offset:2px}
.field.err input,.field.err textarea{border-color:#9B1C1C;border-width:2px}
.msg{display:none;margin-top:.45rem;font-size:.9063rem;color:#9B1C1C;font-weight:500}
.field.err .msg{display:flex;gap:.4rem;align-items:flex-start}
.field.err .msg::before{content:"!";flex:none;width:1.15rem;height:1.15rem;border-radius:50%;background:#9B1C1C;color:#fff;font-size:.75rem;display:grid;place-items:center;margin-top:.1rem}

.consent{display:flex;gap:.75rem;align-items:flex-start;margin-top:1.35rem}
.consent input{width:1.35rem;height:1.35rem;min-height:0;flex:none;margin-top:.15rem;accent-color:var(--navy)}
.consent label{font-size:.9063rem;color:var(--muted);font-weight:400;line-height:1.5;margin:0}
.consent a{color:var(--navy)}
.consent.err label{color:#9B1C1C}

.form-actions{margin-top:1.6rem;display:flex;flex-direction:column;gap:.85rem}
.form-actions .btn{width:100%}
.form-actions small{color:var(--muted);font-size:.875rem;line-height:1.5}
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}
.spin{width:1rem;height:1rem;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:none}
.btn[aria-busy="true"] .spin{display:block}
@keyframes sp{to{transform:rotate(360deg)}}

.form-done{display:none;text-align:left;padding:1rem 0}
.form-done.on{display:block}
.form-done .tick{width:3rem;height:3rem;border-radius:50%;background:var(--navy);display:grid;place-items:center;margin-bottom:1.15rem}
.form-done .tick svg{width:1.5rem;height:1.5rem;fill:var(--gold)}
.form-fail{display:none;margin-top:1.1rem;padding:1rem 1.15rem;border-left:3px solid #9B1C1C;background:#FCF4F4;font-size:.9375rem;color:var(--ink)}
.form-fail.on{display:block}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--navy-deep);color:rgba(255,255,255,.78);font-size:.9375rem}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--gap);padding-block:clamp(2.75rem,5vw,3.75rem) 2rem}
/* Cover h2, h3 and h4 so the footer headings render correctly whichever
   heading level a given page happens to use. Previously this targeted
   h3 only, so pages updated to h2 fell back to the generic navy serif
   heading — navy text on a navy footer, effectively invisible. */
.site-foot h2,
.site-foot h3,
.site-foot h4{font-family:var(--sans);font-size:.9375rem;color:var(--gold);margin:0 0 .85rem;font-weight:600;letter-spacing:0}
.site-foot a{color:rgba(255,255,255,.86)}
.site-foot a:hover{color:#fff}
.site-foot address{font-style:normal;line-height:1.6}
.foot-brand img{width:150px;margin-bottom:1.1rem}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:.55rem}
.foot-list a{display:inline-block;min-height:1.75rem;padding:.1rem 0}
.foot-bar{border-top:1px solid rgba(255,255,255,.14);padding-block:1.5rem 2rem;font-size:.875rem;color:rgba(255,255,255,.62);display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:space-between}
.disclaimer{border-top:1px solid rgba(255,255,255,.14);padding-block:1.5rem;font-size:.8438rem;color:rgba(255,255,255,.6);line-height:1.6;max-width:60rem}
@media (max-width:820px){ .foot-in{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
@media (max-width:520px){ .foot-in{grid-template-columns:1fr} }

/* ============================================================
   STICKY MOBILE ACTION BAR
   ============================================================ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--navy);border-top:2px solid var(--gold);
  padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  gap:.5rem;transform:translateY(105%);transition:transform .22s ease;
}
.dock.on{transform:translateY(0)}
.dock a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  min-height:3rem;color:#fff;text-decoration:none;font-size:.8125rem;font-weight:500;border-radius:2px;
}
.dock a:hover{background:var(--navy-mid)}
.dock svg{width:1.15rem;height:1.15rem;fill:var(--gold)}
@media (max-width:880px){ .dock{display:flex} body{padding-bottom:4.25rem} }


/* ============================================================
   POLICY PAGES (privacy.html, terms.html)
   ============================================================ */
.doc{padding-block:clamp(3rem,6vw,4.75rem) clamp(3.5rem,7vw,6rem)}
.doc-head{border-bottom:1px solid var(--line);padding-bottom:2rem;margin-bottom:2.75rem;max-width:52rem}
.doc-head p{color:var(--muted);margin:1rem 0 0;font-size:.9688rem}
.doc-body{max-width:44rem}
.doc-body h2{margin-top:2.75rem;margin-bottom:.85rem;font-size:clamp(1.3rem,2.4vw,1.6rem)}
.doc-body h2:first-of-type{margin-top:0}
.doc-body ul{padding-left:1.2rem}
.doc-body li{margin-bottom:.5em}
.note{border:2px dashed var(--gold-ink);background:#FBF7EA;padding:1.35rem 1.5rem;border-radius:2px;margin-bottom:2.75rem;max-width:44rem}
.note b{display:block;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.6rem;font-weight:600}
.note p{font-size:.9688rem;color:var(--muted);margin:0}
.ph{background:#FBF7EA;border-bottom:2px solid var(--gold-ink);padding:0 .25rem;font-weight:500;color:var(--gold-ink)}
.toc{background:var(--band);padding:1.5rem 1.75rem;margin-bottom:2.75rem;max-width:44rem;border-top:3px solid var(--navy)}
.toc h2{font-family:var(--sans);font-size:.9375rem;font-weight:600;color:var(--muted);margin:0 0 .85rem;letter-spacing:0}
.toc ol{margin:0;padding-left:1.25rem;font-size:.9688rem}
.toc li{margin-bottom:.35em}
.doc-head + .note, .note + .toc{margin-top:0}

/* thank-you page */
.done-page{padding-block:clamp(4rem,9vw,7rem);text-align:left}
.done-page .inner{max-width:36rem}
.done-page .tick{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--navy);display:grid;place-items:center;margin-bottom:1.5rem}
.done-page .tick svg{width:1.75rem;height:1.75rem;fill:var(--gold)}
.done-page p{color:var(--muted);margin-top:1.15rem}
.done-page .btn{margin-top:1.75rem}

/* ============================================================
   NEW SECTIONS (client content, Sept 2026)
   ============================================================ */

/* --- full-width navy statement bands: UK & UAE, Opportunity --- */
.statement{background:var(--navy);color:#fff;padding-block:clamp(3.5rem,7vw,5.75rem)}
.statement-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.statement .big{
  font-family:var(--serif);font-size:clamp(1.55rem,3.2vw,2.35rem);line-height:1.22;
  letter-spacing:-.014em;color:#fff;margin:0;max-width:18ch;
}
.statement p{color:rgba(255,255,255,.84);max-width:38rem}
.statement p + p{margin-top:1.05em}
.statement-cta{margin-top:1.9rem}
@media (max-width:860px){ .statement-grid{grid-template-columns:1fr} }

/* --- six services, two columns, rules instead of cards --- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem)}
.svc-item{border-top:1px solid var(--line);padding:2.1rem 0 2.35rem}
.svc-item h3{margin:0 0 .8rem}
.svc-item p{color:var(--muted);font-size:1.0313rem;margin:0 0 .85em}
.svc-item p:last-child{margin-bottom:0}
@media (max-width:860px){
  .svc-grid{grid-template-columns:1fr}
  .svc-item{padding:1.85rem 0 2rem}
}

/* --- closing line under the four approach steps --- */
.approach-note{margin-top:clamp(2.75rem,5vw,3.75rem);padding-top:2rem;border-top:1px solid var(--line);max-width:44rem}
.approach-note p{color:var(--muted)}
.approach-note .ask{
  font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.3;
  color:var(--navy);margin:1.15rem 0 0;
}

/* --- founder --- */
.bio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:clamp(2rem,5vw,4rem);align-items:start}
.bio > div p{color:var(--muted)}
.bio > div p.lede{color:var(--muted)}
.bio strong{color:var(--ink);font-weight:600}
.bio-photo{margin:0}
.bio-photo img{width:100%;border-radius:2px}
.bio-photo figcaption{margin-top:.85rem;font-size:.9375rem;color:var(--muted)}
.photo-slot{border:2px dashed var(--gold-ink);background:#FBF7EA;padding:1.35rem 1.4rem;border-radius:2px}
.photo-slot > b{display:block;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.7rem;font-weight:600}
.photo-slot p{font-size:.9063rem;color:var(--muted);margin:0 0 .7em;line-height:1.55}
.photo-slot p:last-child{margin-bottom:0}
.photo-slot .how{font-size:.8125rem;color:var(--muted)}
.photo-slot code{background:#fff;border:1px solid var(--line);padding:.1rem .3rem;font-size:.9em;word-break:break-all}
@media (max-width:860px){
  .bio{grid-template-columns:1fr}
  .bio-photo{max-width:22rem}
}

/* ============================================================
   LAYOUT CORRECTIONS
   Adjacent navy sections were merging into one block with a
   dead gap between them. These rules join them deliberately
   instead, and fix a button that inherited the wrong palette.
   ============================================================ */

/* --- credentials strip runs straight into the UK & UAE band --- */
.creds + .statement{padding-top:0}
.creds + .statement > .wrap{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:clamp(2.75rem,5vw,4rem);
}

/* --- contact section now opens with the closing statement --- */
.contact{background:var(--navy);color:#fff}
.contact h2{color:#fff}
.contact .section-head p{color:rgba(255,255,255,.82)}

.closing{padding-block:clamp(3.5rem,7vw,5.5rem) 0}
.closing .big{
  font-family:var(--serif);font-size:clamp(1.55rem,3.2vw,2.35rem);line-height:1.22;
  letter-spacing:-.014em;color:#fff;margin:0;max-width:18ch;
}
.closing p{color:rgba(255,255,255,.84);max-width:38rem}
.closing p + p{margin-top:1.05em}

.contact-inner{
  padding-block:clamp(2.75rem,5vw,4rem) clamp(4rem,8vw,6.5rem);
  margin-top:clamp(2.75rem,5vw,4rem);
  border-top:1px solid rgba(255,255,255,.18);
}

/* --- the form panel is white, so its button must not use the
       on-navy gold. Gold on white measures 1.94:1 and fails AA. --- */
.form-shell .btn-primary,
.on-navy .form-shell .btn-primary{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.form-shell .btn-primary:hover,
.on-navy .form-shell .btn-primary:hover{
  background:var(--navy-mid);
  border-color:var(--navy-mid);
}

/* --- placeholder block: keep the code snippet readable --- */
.photo-slot code{word-break:normal;overflow-wrap:anywhere}

/* ============================================================
   FOOTER LOGO
   The supplied logo has a navy wordmark and a navy "C", both of
   which disappear against the navy footer. The footer now uses a
   reversed variant: white wordmark, first C lightened to a steel
   blue so it stays distinct from the silver one.

   The "CONSULTANCY" subline is not in the reversed artwork. At
   footer size it rendered around 6px tall and was unreadable, and
   the address directly beneath already reads "Calibre Collective
   Consulting FZ-LLC" — so it was redundant as well as illegible.

   assets/img/logo.webp (the dark original) is still there for use
   on light backgrounds.
   ============================================================ */
.foot-brand img{width:210px;height:auto;margin-bottom:1.25rem}
@media (max-width:520px){ .foot-brand img{width:180px} }

/* --- About section without a photograph -------------------------------
   If you'd rather run this section with no portrait than with a weak one,
   delete the whole <figure class="bio-photo">…</figure> from index.html
   and change <div class="bio"> to <div class="bio bio--nophoto">.
   It then reads as a deliberate single-column layout rather than a gap. */
.bio--nophoto{grid-template-columns:minmax(0,44rem)}
.bio--nophoto > div p{max-width:44rem}

/* ============================================================
   CONTACT LAYOUT CORRECTION
   The "Start with a conversation" heading used to sit full width
   above the two-column grid, which left a tall empty navy block
   beside it before the form began. The heading now lives in the
   grid's left column, so the form rises to meet it.
   ============================================================ */
.contact-left{min-width:0}
.contact-left .section-head{margin-bottom:clamp(1.75rem,3vw,2.5rem);max-width:none}
.contact-left .section-head p{max-width:30rem}
.contact-inner .contact-grid{align-items:start}


/* ============================================================
   FORM PANEL TEXT COLOUR — keep last
   The form sits on a white panel inside a navy section, so it must
   opt out of the section's white-on-navy text colours. Higher
   specificity than ".contact h3" so later edits cannot undo it.
   ============================================================ */
.contact .form-shell h3,
.contact .form-shell .form-done h3{color:var(--navy)}
.contact .form-shell label,
.contact .form-shell .field label{color:var(--ink)}