/* ============================================================
   THE KNIGHT EXIM — News, Clients & Contact
   Extends assets/style.css and reuses its tokens.
   ============================================================ */

/* ==================== HERO BANNER ====================
   The whole banner has to be visible in one screen. Stretched to the
   viewport width a 2.23:1 image stands 613px tall on a 1366×768 laptop —
   taller than what is left under the sticky header — so the bottom of the
   artwork, including both buttons, fell below the fold.

   The banner stays edge-to-edge while it fits, and narrows once the screen
   is too short. Capping the *width* rather than the height keeps the
   wrapper exactly the size of the artwork, so the percentage-positioned
   hotspots stay on their buttons. The ratio comes from the image file, so
   a replacement banner of any shape still behaves. */
:root{--head-h:78px}
@media(max-width:1100px){:root{--head-h:66px}}

/* ==================== HEADER FIT ====================
   Seven nav items plus the logo need about 1030px. The hamburger only
   took over below 900px, so between 901 and 1100 the nav ran back over
   the logo — "HOME" sat on top of "KNIGHT". Hand over to the mobile menu
   earlier, and tighten the spacing just above that so the desktop nav
   stops crowding the logo on smaller laptops.

   The open-menu styles are repeated here because the originals live
   inside style.css's 900px query and would not apply at these widths. */
@media(max-width:1100px){
  .mainnav{display:none}
  .menu-btn{display:block}
  .head-in{height:66px}
  .mobnav.open{display:block;background:var(--navy-2);border-bottom:1px solid rgba(201,162,75,.25)}
  .mobnav.open a{display:block;padding:14px 26px;color:#dfe4ee;border-top:1px solid rgba(255,255,255,.06);
    font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
  .mobnav.open a.active{color:var(--gold-2)}
}
@media(min-width:1101px) and (max-width:1300px){
  .mainnav{gap:17px}
  .mainnav a{font-size:11.5px;letter-spacing:.05em}
}

.hero-banner-wrap{position:relative;z-index:2;line-height:0;margin:0 auto;width:100%;
  /* the 2px absorbs sub-pixel rounding, which otherwise leaves a sliver
     of the banner below the fold */
  max-width:calc((100vh - var(--head-h) - 2px) * var(--banner-ratio, 2.226));
  max-width:calc((100svh - var(--head-h) - 2px) * var(--banner-ratio, 2.226))}
.hero-banner{display:block;width:100%;height:auto}
.hero-banner-wrap .hero-hots{position:absolute;inset:0;z-index:3}

/* Fill the leftover margin with the banner's own edge colour so it reads
   as full-bleed. The section's dot pattern and world map are switched off
   here — texture in the margin gives the seam away. */
/* Hard split at the centre: the banner is centred, so the left half of
   the section is the left margin and the right half the right margin. */
.hero.has-banner{background:linear-gradient(90deg,
  var(--banner-bg-l,#e6e4e0) 0 50%, var(--banner-bg-r,#e6e4e0) 50% 100%)}
.hero.has-banner::before,
.hero.has-banner::after{display:none}

/* ==================== ABOUT HERO MEDIA ====================
   The media panel is the right-hand 56% of the section and its height
   came from whatever the copy beside it happened to need. object-fit:
   cover then trimmed the artwork to fit that box, which sliced the top
   and bottom points off the compass emblem.

   Giving the section a minimum height of (56% of the viewport ÷ the
   artwork's own ratio) makes the panel exactly the shape of the image,
   so cover has nothing left to crop. Below 1000px style.css stacks the
   layout and the image is shown at its natural height anyway. */
@media(min-width:1001px){
  .ab-hero{min-height:calc(56vw / var(--banner-ratio, 1.5))}
  .ab-hero-media img{object-position:center}
}

/* ==================== JOURNEY TIMELINE TYPE ====================
   The timeline was set a size smaller than everything around it — 14px
   year pills over 12px/1.6 copy — which made the dates hard to read.
   Brought up to the story columns below it (.js-col: 16px headings over
   13px/1.7 copy), which is the readable baseline on this page.
   Headings stay a shade under 16px because a timeline column is roughly
   a third the width of a story column and the wrapping gets ugly. */
/* Widen the section before enlarging the type. Five columns inside the
   1200px wrap are only ~220px each; at that width justified text with
   hyphenation breaks a word on nearly every line, and a larger font
   would break more of them, not fewer. */
.jr-tlsec .wrap{max-width:1460px}
.tl-col{padding:0 12px}

.tl-pill{font-size:17px;padding:7px 20px}
.tl-sub{font-size:13.5px;margin-top:12px}
.tl-ic{width:58px;height:58px;margin:18px auto 14px}
.tl-ic svg{width:28px;height:28px}
.tl-col h4{font-size:16px;margin-bottom:11px}
.tl-col p{font-size:14.5px;line-height:1.78}
.tl-col .au{font-size:18px;margin-top:6px}
.tl-flag{font-size:27px}
.tl-col.mid .tl-pill{margin-top:16px}
/* the highlighted pill carries words rather than a year, so it needs a
   slightly smaller size to stay on one line inside a timeline column */
.tl-pill.dark{font-size:15px;padding:7px 17px}

@media(max-width:1299px){
  .jr-tlsec .wrap{max-width:var(--wrap)}
}
@media(max-width:640px){
  /* one column on a phone — the copy can breathe a little more */
  .tl-pill{font-size:18px}
  .tl-col h4{font-size:17px}
  .tl-col p{font-size:15px}
}

/* ==================== JUSTIFIED BODY COPY ====================
   Applies to running text only. Headings, buttons, labels, stat
   captions and link lists stay as they are — justifying a line of two
   or three words tears it apart with white space.
   Hyphenation keeps the word gaps tight in narrow columns. */
.hero p.lede,
.welcome p,
.philo p,
.ab-p1, .ab-p2, .ab-row p, .abb-mid p, .abb-end p,
.sv-lead, .sv-row p, .sv-item p, .svp-sub,
.jr-lead, .tl-col p, .js-col p, .jp-col.dark p, .jp-list li, .jp-note p, .jc-txt p,
.jr-quote .qt,
.page-hero p,
.nw-txt p, .nw-lead, .nw-rich p, .nw-rich li,
.cl-intro, .cl-card blockquote,
.ct-form-lead, .ct-info-lead, .ct-privacy,
.sv-cert li, .nw-side-card p, .ct-list li > span:last-child,
.e404 p, .soon{
  text-align:justify;
  -webkit-hyphens:auto;
  hyphens:auto;
}

/* A justified last line looks broken when the block itself is centred,
   so centre the remainder for those. */
.page-hero p, .cl-intro, .e404 p, .soon{text-align-last:center}

/* ==================== SERVICES HERO, STACKED ====================
   Above 1000px the hero is two columns and the copy is left-aligned
   against the emblem beside it. Once it stacks there is nothing to align
   to, so the title, its ornament and the gold lead all centre. The lead
   drops out of justified here — a centred block reads better than a
   flush-left one under a centred title. */
@media(max-width:1000px){
  .sv-hero-txt{text-align:center}
  .sv-hero-txt .ab-dia{justify-content:center}
  .sv-lead{text-align:center;text-align-last:center;max-width:52ch;margin-left:auto;margin-right:auto}
}

/* ==================== MOBILE FIXES ====================
   Long section headings were locked with white-space:nowrap, which made
   them push past a narrow viewport instead of wrapping. */
@media(max-width:820px){
  .titlerow{gap:14px;flex-wrap:wrap}
  .titlerow h2{white-space:normal}
  .titlerow .tl{width:40px;min-width:0}
}
@media(max-width:520px){
  .titlerow .tl{display:none}
}

/* The journey timeline gets its track count from the number of entries.
   These rules live here, after style.css, so they still win — a media
   query in an earlier file loses to a later plain rule. */
/* Column count, widest first. These have to sit together and in this
   order — a later plain rule would out-rank an earlier media query. Five
   columns need roughly 1300px of viewport before each is wide enough for
   the amount of copy in them; below that they squeeze to ~160px, which is
   worse than the small type this was meant to fix. The connecting line
   only reads as a timeline on a single row, so it goes with the drop. */
.jr-tl{grid-template-columns:repeat(var(--tl-cols,5),1fr)}
@media(max-width:1299px){
  .jr-tl{grid-template-columns:repeat(3,1fr);gap:36px 20px}
  .tl-line{display:none}
}
@media(max-width:1000px){.jr-tl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.jr-tl{grid-template-columns:1fr}}

/* ==================== UPLOADED ICONS ====================
   An icon uploaded from the admin panel renders as <img class="icon-img">
   instead of inline SVG, so it has to take the same size as the SVG in
   every badge it can appear in. */
.why-ic .icon-img{width:58px;height:58px;object-fit:contain}
.am-ic .icon-img{width:34px;height:34px;object-fit:contain}
.am-ic.sm .icon-img{width:24px;height:24px}
.sv-item .am-ic .icon-img{width:26px;height:26px}
.jr-stat .ic .icon-img{width:34px;height:34px;object-fit:contain}
.tl-ic .icon-img{width:26px;height:26px;object-fit:contain}
.icon-img{display:block;max-width:100%}

/* ==================== FOOTER ====================
   The website / email / phone lines are links, so they need to look
   like it on hover. */
.foot-contact a{transition:color .22s var(--ease)}
.foot-contact a:hover{color:var(--gold-2)}
.foot-contact a:hover svg{color:#fff}
.foot-contact a span.u{border-bottom:1px solid transparent;transition:border-color .22s}
.foot-contact a:hover span.u{border-bottom-color:var(--gold-2)}

/* Bottom bar: everything centred on one axis. */
.foot-bar-in{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px}
.foot-bar .disclaimer{display:block;font-weight:500;opacity:.92;max-width:80ch}
.foot-bar .legal{justify-content:center}
.foot-bar .credit{display:block;font-weight:500;opacity:.88;font-size:12.5px}
/* only the name is a link, so it needs to look like one — the lead-in
   beside it is plain text at the same size and colour */
.foot-bar .credit a{font-weight:700;border-bottom:1px solid rgba(36,25,2,.4);
  padding-bottom:1px;transition:border-color .22s}
.foot-bar .credit a:hover{border-bottom-color:#241902;text-decoration:none}

/* ==================== BACK TO TOP ====================
   Sits above the footer's gold bar and clear of the lightbox, which is
   z-index 200. Hidden until there is something to scroll back over. */
.to-top{position:fixed;right:22px;bottom:22px;z-index:120;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--navy);color:var(--gold-2);border:1px solid rgba(201,162,75,.55);
  box-shadow:0 14px 30px -12px rgba(11,21,38,.55);
  opacity:0;transform:translateY(10px);transition:opacity .28s var(--ease),transform .28s var(--ease),background .22s}
.to-top.on{opacity:1;transform:none}
.to-top[hidden]{display:none}
.to-top svg{width:20px;height:20px}
.to-top:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.to-top:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
@media(max-width:640px){
  .to-top{right:14px;bottom:14px;width:44px;height:44px}
  .to-top svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:opacity .01s}
}

/* ==================== 404 ==================== */
.e404{background:linear-gradient(120deg,#f2eee4,#e6dfd0);border-bottom:1px solid var(--line);
  padding:74px 0 78px;text-align:center;position:relative;overflow:hidden}
.e404::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(19,32,56,.05) 1.2px,transparent 1.2px);
  background-size:24px 24px;opacity:.55;pointer-events:none}
.e404-in{position:relative;z-index:2}
.e404-mark{margin:0 auto 18px;width:66px;height:66px;opacity:.9}
.e404-mark svg{width:100%;height:100%}
.e404-num{display:block;font-family:var(--serif-d);font-weight:700;color:var(--ink);
  font-size:clamp(74px,13vw,150px);line-height:.9;letter-spacing:.06em}
.e404 h1{font-family:var(--serif);font-size:clamp(22px,3.2vw,34px);font-weight:600;color:var(--ink);
  margin-bottom:14px}
.e404 p{max-width:56ch;margin:0 auto;color:var(--text);font-size:15.5px;line-height:1.75}
.e404-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.e404-links{display:flex;gap:8px 26px;justify-content:center;flex-wrap:wrap;margin-top:38px;
  padding-top:26px;border-top:1px solid rgba(169,127,48,.28)}
.e404-links a{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text);transition:.22s}
.e404-links a:hover{color:var(--gold-deep)}
.e404-news{background:var(--cream-2);padding:56px 0 66px}
@media(max-width:640px){
  .e404{padding:54px 0 58px}
  .e404-links{gap:6px 18px}
}

/* A disclaimer under a page-hero sub-heading: its own line, quieter than
   the tagline above it. */
.page-hero .page-note{max-width:82ch;margin:12px auto 0;font-size:13.5px;line-height:1.65;
  color:var(--muted);font-style:italic;text-align:center}
@media(max-width:640px){
  .page-hero .page-note{font-size:12.5px;text-align:left;text-align-last:auto}
}

/* ==================== NEWS ==================== */
.nw-body{background:var(--cream-2);padding:54px 0 70px}

.nw-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.nw-filter a{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);border:1px solid var(--line);background:var(--paper);padding:9px 20px;border-radius:100px;transition:.25s var(--ease)}
.nw-filter a:hover{border-color:var(--gold);color:var(--gold-deep)}
.nw-filter a.on{background:var(--navy);border-color:var(--navy);color:var(--gold-2)}

.nw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.nw-card{background:var(--paper);border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;transition:.35s var(--ease)}
.nw-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(19,32,56,.45);border-color:rgba(201,162,75,.5)}
.nw-card.wide{grid-column:span 2;flex-direction:row}
.nw-card.wide .nw-media{width:46%;flex:0 0 auto;aspect-ratio:auto}
.nw-card.wide .nw-txt{padding:32px 30px}
.nw-card.wide h2{font-size:24px}

.nw-media{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(150deg,var(--navy-3),var(--navy));overflow:hidden}
.nw-media img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s var(--ease)}
.nw-card:hover .nw-media img{transform:scale(1.05)}
.nw-crest{position:absolute;inset:0;display:grid;place-items:center;opacity:.5}
.nw-crest svg{width:74px;height:74px}
.nw-tag{position:absolute;left:14px;top:14px;background:var(--gold);color:#241902;font-family:var(--sans);
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:3px}

.nw-txt{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.nw-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.nw-meta.center{justify-content:center;margin-top:14px;margin-bottom:0}
.nw-meta span{color:var(--muted)}
.nw-meta span::before{content:"·";margin-right:14px;color:var(--line)}
.nw-txt h2{font-family:var(--serif);font-size:19px;line-height:1.35;font-weight:600;color:var(--ink);margin-bottom:10px}
.nw-txt h2 a:hover{color:var(--gold-deep)}
.nw-txt p{font-size:13.5px;line-height:1.7;color:var(--text);margin-bottom:18px}
.nw-more{margin-top:auto;align-self:flex-start;font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);
  padding-bottom:3px;transition:.25s}
.nw-more span{transition:.25s;display:inline-block}
.nw-more:hover{color:var(--gold-deep)}
.nw-more:hover span{transform:translateX(4px)}

/* pagination */
.nw-pager{margin-top:44px;display:flex;justify-content:center}
.nw-pager ul{list-style:none;display:flex;gap:8px;padding:0;margin:0}
.nw-pager a,.nw-pager span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:700;transition:.25s}
.nw-pager a:hover{border-color:var(--gold);color:var(--gold-deep)}
.nw-pager .active span{background:var(--navy);border-color:var(--navy);color:var(--gold-2)}
.nw-pager .disabled span{opacity:.4}

/* article page */
.nw-hero .eyebrow a:hover{color:var(--ink)}
.nw-hero h1{font-family:var(--serif);font-size:clamp(26px,3.8vw,42px);font-weight:600;letter-spacing:.01em;
  max-width:22ch;margin:0 auto;line-height:1.2}
.nw-article{background:var(--paper);padding:56px 0 70px}
.nw-article-in{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}

.nw-hero-img{margin:0 0 30px;border-radius:6px;overflow:hidden}
.nw-hero-img img{width:100%;display:block}
.nw-lead{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink);font-style:italic;
  border-left:2px solid var(--gold);padding-left:24px;margin-bottom:28px}
.nw-rich{font-size:15.5px;line-height:1.85;color:var(--text)}
.nw-rich p{margin-bottom:20px}
.nw-rich h2,.nw-rich h3,.nw-rich h4{font-family:var(--serif);color:var(--ink);margin:34px 0 14px;line-height:1.3}
.nw-rich h2{font-size:25px}
.nw-rich h3{font-size:21px}
.nw-rich h4{font-size:18px}
.nw-rich ul,.nw-rich ol{margin:0 0 20px;padding-left:22px}
.nw-rich li{margin-bottom:10px}
.nw-rich ul{list-style:none;padding-left:0}
.nw-rich ul li{position:relative;padding-left:26px}
.nw-rich ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg)}
.nw-rich b,.nw-rich strong{color:var(--ink)}
.nw-rich a{color:var(--gold-deep);border-bottom:1px solid rgba(201,162,75,.5)}
.nw-rich blockquote{margin:26px 0;padding:20px 26px;background:var(--cream-2);border-left:3px solid var(--gold);
  font-family:var(--serif);font-style:italic;color:var(--ink)}
.nw-rich img{border-radius:5px;margin:8px 0 22px}

.nw-share{display:flex;align-items:center;gap:12px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line-2)}
.nw-share span{font-family:var(--serif-d);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nw-share a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  border:1px solid var(--line);transition:.25s}
.nw-share a:hover{background:var(--navy);border-color:var(--navy);color:var(--gold-2);transform:translateY(-2px)}

.nw-side{position:sticky;top:110px;display:grid;gap:22px}
.nw-side-card{background:linear-gradient(160deg,var(--navy-2),var(--navy));border:1px solid rgba(201,162,75,.3);
  border-radius:6px;padding:26px 24px;color:#fff}
.nw-side-card h4{font-family:var(--serif-d);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:12px}
.nw-side-card p{font-size:13.5px;line-height:1.7;color:#cdd6e8;margin-bottom:18px}
.nw-side-list{background:var(--cream-2);border:1px solid var(--line-2);border-radius:6px;padding:24px}
.nw-side-list h4{font-family:var(--serif-d);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin-bottom:16px}
.nw-side-item{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line-2)}
.nw-side-item:first-of-type{border-top:0;padding-top:0}
.nw-side-item .d{width:9px;height:9px;flex:0 0 auto;margin-top:6px;background:var(--gold);transform:rotate(45deg)}
.nw-side-item b{display:block;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);
  line-height:1.45;transition:.2s}
.nw-side-item i{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.nw-side-item:hover b{color:var(--gold-deep)}
.nw-back{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--gold-deep)}
.nw-back:hover{color:var(--ink)}

@media(max-width:1000px){
  .nw-grid{grid-template-columns:repeat(2,1fr)}
  .nw-card.wide{grid-column:span 2;flex-direction:column}
  .nw-card.wide .nw-media{width:100%;aspect-ratio:16/10}
  .nw-article-in{grid-template-columns:1fr;gap:40px}
  .nw-side{position:static}
}
@media(max-width:640px){
  .nw-grid{grid-template-columns:1fr}
  .nw-card.wide{grid-column:span 1}
  .nw-lead{font-size:17px;padding-left:18px}
}

/* ==================== CLIENTS ==================== */
.cl-body{background:var(--cream-2);padding:54px 0 66px}
.cl-intro{max-width:64ch;margin:18px auto 0;font-size:15px;line-height:1.75;color:var(--text)}

.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.cl-card{position:relative;background:var(--paper);border:1px solid var(--line-2);border-radius:6px;
  padding:34px 28px 26px;margin:0;display:flex;flex-direction:column;transition:.35s var(--ease)}
.cl-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -32px rgba(19,32,56,.45);border-color:rgba(201,162,75,.55)}
.cl-card.feat{background:linear-gradient(165deg,var(--navy-2),var(--navy));border-color:rgba(201,162,75,.35)}
.cl-card.feat blockquote,.cl-card.feat .cl-who i{color:#cdd6e8}
.cl-card.feat .cl-who b{color:#fff}
.cl-card.feat .cl-initial{background:rgba(201,162,75,.16);color:var(--gold-2);border-color:rgba(201,162,75,.5)}
.cl-card.feat figcaption{border-top-color:rgba(255,255,255,.12)}
.cl-card.feat .cl-country{color:var(--gold-2)}

.cl-qm{position:absolute;right:22px;top:10px;font-family:var(--serif);font-size:74px;line-height:1;
  color:var(--gold);opacity:.22;pointer-events:none}
.cl-stars{display:flex;gap:3px;color:var(--gold);margin-bottom:14px}
.cl-stars svg{width:15px;height:15px}
.cl-card blockquote{margin:0 0 22px;font-size:14.5px;line-height:1.8;color:var(--text);flex:1}

/* Attached certificates and photos.
   A certificate is scanned at A4, so a square thumbnail cropped the top
   and bottom off it. The tile is a fixed height with the width following
   the artwork, and the image is contained rather than cropped, so the
   whole document is visible. data-shape forces a ratio when a scan has
   uneven borders. */
.cl-files{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px;align-items:flex-start}
.cl-file{padding:6px;border:1px solid var(--line);background:var(--paper);border-radius:5px;overflow:hidden;
  cursor:pointer;display:block;max-width:100%;transition:.25s var(--ease)}

/* auto: the tile hugs the document, so nothing is cropped and nothing is
   letterboxed — an A4 scan is tall, a wide scan is wide. The caps keep a
   very tall certificate from swallowing the whole card. */
.cl-file img{display:block;margin:0 auto;width:auto;height:auto;
  max-width:100%;max-height:340px;object-fit:contain}

/* a forced shape is for scans with uneven borders, so it crops to fit */
.cl-file[data-shape="a4p"] img{width:100%;height:auto;aspect-ratio:1/1.4142;object-fit:cover;max-height:420px}
.cl-file[data-shape="a4l"] img{width:100%;height:auto;aspect-ratio:1.4142/1;object-fit:cover;max-height:none}
.cl-file[data-shape="sq"] img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;max-height:none}
.cl-file[data-shape="a4p"],
.cl-file[data-shape="a4l"],
.cl-file[data-shape="sq"]{flex:1 1 100%}
.cl-file:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(19,32,56,.55)}
.cl-file.pdf{width:auto;height:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;
  font-size:12.5px;font-weight:700;color:var(--gold-deep);letter-spacing:.02em;cursor:pointer}
.cl-file.pdf svg{width:16px;height:16px;flex:0 0 auto}
.cl-file.pdf span{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-card.feat .cl-file{border-color:rgba(201,162,75,.4);background:rgba(255,255,255,.06)}
.cl-card.feat .cl-file.pdf{color:var(--gold-2)}

/* lightbox */
.cl-lb{position:fixed;inset:0;z-index:200;background:rgba(8,14,26,.9);display:grid;place-items:center;padding:28px}
.cl-lb[hidden]{display:none}
.cl-lb figure{margin:0;max-width:min(1100px,94vw);max-height:90vh;display:flex;flex-direction:column;gap:12px}
.cl-lb img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:4px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.cl-lb figcaption{color:#e9eef6;font-size:14px;text-align:center}
.cl-lb figcaption[hidden]{display:none}
.cl-lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(201,162,75,.5);color:#fff;font-size:26px;line-height:1;
  transition:.22s}
.cl-lb-close:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}

.cl-card figcaption{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line-2)}
.cl-photo,.cl-initial{width:50px;height:50px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.cl-initial{display:grid;place-items:center;background:var(--cream);border:1px solid var(--line);
  font-family:var(--serif-d);font-size:20px;font-weight:700;color:var(--gold-deep)}
.cl-who b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.cl-who i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.cl-country{display:block;font-size:12px;font-weight:700;color:var(--gold-deep);margin-top:3px;letter-spacing:.04em}

.cl-logos{background:var(--paper);padding:56px 0 64px;border-top:1px solid var(--line-2)}
.cl-logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:38px}
.cl-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:118px;padding:20px 14px;border:1px solid var(--line-2);border-radius:5px;background:var(--cream-2);
  transition:.3s var(--ease)}
.cl-logo:hover{border-color:var(--gold);background:var(--paper);transform:translateY(-3px)}
.cl-logo img{max-height:52px;width:auto;object-fit:contain}
.cl-logo-name{font-family:var(--serif-d);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink);line-height:1.35}
.cl-logo small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}

@media(max-width:1000px){
  .cl-grid{grid-template-columns:repeat(2,1fr)}
  .cl-logo-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  /* one card per row on a phone, so a document gets the full width */
  .cl-file{flex:1 1 100%}
  .cl-file img{max-height:400px}
}
@media(max-width:640px){
  .cl-grid{grid-template-columns:1fr}
  .cl-logo-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==================== CONTACT ==================== */
.ct-body{background:var(--cream-2);padding:56px 0 66px}
.ct-in{display:grid;grid-template-columns:1.35fr .85fr;gap:34px;align-items:start}

.ct-form-card{background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:38px 36px 34px;
  box-shadow:0 24px 54px -40px rgba(19,32,56,.5)}
.ct-form-card h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,29px);font-weight:600;color:var(--ink)}
.ct-form-lead{font-size:14.5px;line-height:1.7;color:var(--text);margin:12px 0 26px;max-width:56ch}

.ct-alert{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;border-radius:4px;font-size:14px;
  line-height:1.6;margin-bottom:24px}
.ct-alert svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.ct-alert.ok{background:#eaf6ee;border:1px solid #b7ddc4;color:#1d6b38}
.ct-alert.err{background:#fdeeee;border:1px solid #f0c2c2;color:#a32626}

.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-field{display:block;margin-bottom:18px}
.ct-field>span{display:block;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.ct-field>span i{color:var(--gold-deep);font-style:normal}
.ct-field input,.ct-field textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--cream-2);border:1px solid var(--line);border-radius:4px;padding:13px 15px;
  transition:.25s;outline:none}
.ct-field textarea{resize:vertical;line-height:1.7}
.ct-field input:focus,.ct-field textarea:focus{border-color:var(--gold);background:var(--paper);
  box-shadow:0 0 0 3px rgba(201,162,75,.16)}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#a8afbc}
.ct-field.bad input,.ct-field.bad textarea{border-color:#d98080;background:#fdf7f7}
.ct-field em{display:block;font-style:normal;font-size:12.5px;color:#a32626;margin-top:6px}

.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* numeric captcha */
.ct-captcha{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:4px 0 22px;
  padding:18px 20px;background:var(--cream-2);border:1px solid var(--line);border-radius:6px}
.ct-captcha.bad{border-color:#d98080;background:#fdf7f7}
.ct-cap-img{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ct-cap-img img{display:block;border:1px solid var(--line);border-radius:4px;background:#fff}
.ct-cap-img button{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:.25s var(--ease)}
.ct-cap-img button svg{width:17px;height:17px}
.ct-cap-img button:hover{border-color:var(--gold);color:var(--gold-deep);transform:rotate(-90deg)}
.ct-cap-in{flex:1;min-width:220px;margin-bottom:0}
.ct-cap-in input{letter-spacing:.35em;font-weight:700;font-size:17px}
.ct-cap-help{color:var(--muted)!important;font-size:12.5px}
@media(max-width:640px){
  .ct-captcha{padding:16px}
  .ct-cap-in{min-width:100%}
}

.ct-submit{margin-top:8px;border:0}
.ct-submit span{transition:.25s;display:inline-block}
.ct-submit:hover span{transform:translateX(4px)}
.ct-privacy{font-size:12.5px;color:var(--muted);margin-top:16px}

.ct-info{background:linear-gradient(165deg,var(--navy-2),var(--navy));border:1px solid rgba(201,162,75,.28);
  border-radius:6px;padding:34px 30px;color:#fff;position:sticky;top:110px}
.ct-info h3{font-family:var(--serif-d);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:12px}
.ct-info-lead{font-size:13.5px;line-height:1.7;color:#aeb8c9;margin-bottom:24px}
.ct-list{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.ct-list li{display:flex;gap:14px;align-items:flex-start}
.ct-list .ic{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(201,162,75,.4);
  background:rgba(201,162,75,.1);display:grid;place-items:center;color:var(--gold-2)}
.ct-list .ic svg{width:18px;height:18px}
.ct-list b{display:block;font-family:var(--serif-d);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:3px;font-weight:700}
.ct-list li>span:last-child{font-size:14px;line-height:1.6;color:#dbe2ee}
.ct-list a{color:#dbe2ee;transition:.2s}
.ct-list a:hover{color:var(--gold-2)}

.ct-emblem{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:16px}
.ct-emblem svg{width:52px;height:52px;flex:0 0 auto}
.ct-emblem p{font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--gold-2);font-style:italic}

.ct-map{background:var(--paper);padding:52px 0 0}
.ct-map-frame{margin-top:34px;line-height:0;border-top:3px solid var(--gold);filter:grayscale(.25)}
.ct-map-frame iframe{width:100%;height:400px;display:block;border:0}

@media(max-width:1000px){
  .ct-in{grid-template-columns:1fr}
  .ct-info{position:static}
}
@media(max-width:640px){
  .ct-row{grid-template-columns:1fr;gap:0}
  .ct-form-card{padding:28px 22px 26px}
  .ct-map-frame iframe{height:300px}
}