/* =========================== 
   THEME TOKENS (colors, type)
   =========================== */
:root{
  /* Colors – Palette C */
  --bg:#F8FAFC;
  --fg:#0F172A;
  --muted:#64748B;

  --brand:#0F5132;             /* Deep Green */
  --brand-contrast:#ffffff;
  --brand-soft:#E8F2ED;        /* light brand tint */

  --accent:#CDA434;            /* Gold */
  --accent-contrast:#111827;

  --success:#0F9960;
  --danger:#D92D20;
  --warning:#E3A008;

  --ring:#D1B464;              /* gold ring outline */
  --shadow:0 6px 24px rgba(18,25,38,.08);

  /* Topbar */
  --topbar-bg: var(--brand);
  --topbar-fg: #ffffff;
  --topbar-height: 36px;
  --topbar-font-size: 13px;

  /* Hover underline */
  --hover-underline-color: var(--accent);
  --hover-underline-height: 2px;
  --hover-underline-radius: 2px;
  --hover-underline-duration: .28s;

  /* Layout */
  --container-max: 1280px;
  --header-min-height: 64px;

  /* Typography */
  --font-heading:"Spectral", Georgia, "Times New Roman", Times, serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  --weight-heading:200; /* Spectral ExtraLight */
  --weight-body:300;    /* Inter Light */

  /* Type scale */
  --fs-xxs:12px; --fs-xs:13px; --fs-sm:14px; --fs-md:16px;
  --fs-lg:18px; --fs-xl:20px; --fs-2xl:24px;

  /* Component sizes */
  --fs-brand:var(--fs-xl);
  --fs-nav:var(--fs-md);
  --fs-btn:var(--fs-md);

  /* Radii & line-heights */
  --lh-tight:1.1; --lh-normal:1.6;
  --radius-10:10px; --radius-12:12px; --radius-pill:999px;
  
  --accent-gold: var(--accent);
}

/* ===========================
   BASE
   =========================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  color:var(--fg);
  background:var(--bg);
  line-height:var(--lh-normal);
}

/* Global container */
.container{max-width:var(--container-max);margin:0 auto;padding:0 16px}

/* Headings */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--font-heading);
  font-weight:var(--weight-heading)!important;
  letter-spacing:-0.01em; line-height:var(--lh-tight);
}

/* Paragraph-ish */
p,li,dd,dt,blockquote{font-family:var(--font-body);font-weight:var(--weight-body)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===========================
   TOPBAR
   =========================== */
.topbar{background:var(--topbar-bg);color:var(--topbar-fg);font-size:var(--topbar-font-size)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;min-height:var(--topbar-height);gap:12px}
.topbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phone-icon{width:18px;height:18px;display:block;color:var(--topbar-fg);opacity:.95}
.tb-strong{text-transform:uppercase;font-weight:800;letter-spacing:.03em}
.tb-sep{opacity:.6;padding:0 6px}
.tb-phone{color:var(--topbar-fg);text-decoration:none;font-weight:800}
.tb-phone:hover{text-decoration:underline}
.tb-msg{margin-left:14px;opacity:.95;font-weight:700}
.topbar-right{display:flex;align-items:center;gap:14px}
.topbar-right .dot{opacity:.65}
.topbar-link{color:var(--topbar-fg);text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:.12em;font-size:12px}
.topbar-link:hover{text-decoration:underline}
@media (max-width:980px){.topbar{font-size:12px}.tb-msg{display:none}.topbar-right{gap:10px}}

/* ===========================
   HEADER
   =========================== */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:var(--shadow)}
.site-header .container{display:flex;align-items:center;gap:12px;min-height:var(--header-min-height)}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .logo{display:inline-grid;place-items:center;width:32px;height:32px}
.brand .logo .ring{fill:none;stroke:var(--ring)}
.brand .brand-text{
  font-family:var(--font-heading);font-weight:var(--weight-heading);
  font-size:var(--fs-brand);line-height:1;white-space:nowrap;letter-spacing:.1px;
}
.brand .brand-text small{font-weight:500;color:var(--muted);margin-left:.25rem}

/* Burger */
.nav-toggle{margin-left:auto;border:0;background:transparent;display:none;flex-direction:column;gap:4px;padding:8px;z-index:1100}
.nav-toggle .bar{width:24px;height:2px;background:var(--fg);display:block}

/* Nav */
.main-nav{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.menu-item{position:relative}
.link{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;border-radius:var(--radius-10);
  text-decoration:none;color:var(--fg);font-weight:600;
  font-size:var(--fs-nav);white-space:nowrap;
}
.link:hover,.link:focus{background:#f3f4f6}
.link.is-active{background:var(--brand-soft);color:var(--brand)}
.caret{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* Dropdown (desktop) */
.dropdown{
  position:absolute;left:0;top:100%;min-width:220px;background:#fff;
  border:1px solid #e5e7eb;border-radius:var(--radius-12);
  box-shadow:var(--shadow);padding:8px;display:none;list-style:none;margin:0;z-index:2000;
}
.menu-item:hover>.dropdown,.menu-item:focus-within>.dropdown{display:block}
.dropdown-link{display:block;padding:10px 12px;border-radius:8px;color:var(--fg);text-decoration:none;position:relative;overflow:visible}
.dropdown-link:hover,.dropdown-link:focus{background:#f3f4f6}
.dropdown li{list-style:none}
.dropdown li::marker{content:''}

/* CTA */
.cta-area{display:flex;align-items:center;gap:10px}
.btn-enquiry{
  background:var(--accent);color:var(--accent-contrast);text-decoration:none;font-weight:700;
  padding:10px 14px;border-radius:var(--radius-pill);display:inline-block;font-size:var(--fs-btn)
}
.btn-enquiry:hover{opacity:.92}
.btn-auth{font-weight:600;color:var(--fg);text-decoration:none;opacity:.9}
.btn-auth:hover{opacity:1}
.hello{color:var(--muted);font-weight:600}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width:980px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;left:0;right:0;bottom:0;top:var(--header-min-height);
    background:#fff;transform:translateY(-120%);transition:transform .24s ease;
    flex-direction:column;align-items:stretch;gap:16px;padding:16px;z-index:1000;
  }
  .main-nav.open{transform:translateY(0)}
  body.nav-open{overflow:hidden}
  .menu{flex-direction:column;align-items:stretch}
  .menu-item .dropdown{position:static;display:none;border:none;box-shadow:none;padding:0;margin:4px 0 0 12px}
  .menu-item.open>.dropdown{display:block}
  .link{padding:12px 14px}
  .cta-area{justify-content:space-between}
}

/* Slight downscale window between 981–1180px */
@media (min-width:981px) and (max-width:1180px){
  :root{ --fs-brand:18px; --fs-nav:15px; --fs-btn:15px; }
}

/* ===========================
   Hover underline (left → right)
   =========================== */
.link{position:relative;overflow:visible}
.link::after{
  content:"";position:absolute;left:10px;right:10px;bottom:4px;
  height:var(--hover-underline-height);background:var(--hover-underline-color);
  border-radius:var(--hover-underline-radius);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--hover-underline-duration) ease;
}
.link:hover::after,.link:focus-visible::after,.link.is-active::after{transform:scaleX(1)}
.dropdown-link::after{
  content:"";position:absolute;left:8px;right:8px;bottom:6px;
  height:var(--hover-underline-height);background:var(--hover-underline-color);
  border-radius:var(--hover-underline-radius);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--hover-underline-duration) ease;
}
.dropdown-link:hover::after,.dropdown-link:focus-visible::after{transform:scaleX(1)}

/* ==== Fix dropdown hover gap (desktop) ==== */
.menu-item{position:relative}
.menu-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}

/* === Desktop caps nav look === */
@media (min-width:981px){
  .menu{gap:clamp(20px,5vw,56px)}
  .link{text-transform:uppercase;letter-spacing:.18em;font-weight:600;font-size:14px;padding:10px 0;border-radius:0;background:transparent!important}
  .link:hover,.link:focus{background:transparent}
  .link::after{left:0;right:0;bottom:-2px;height:1px;background:currentColor}
  .link.is-active{color:var(--brand);background:transparent}
  .caret{display:none}
}

/* === Topbar: match menu hover underline & color === */
.topbar-link,
.tb-phone{
  position: relative;
  overflow: visible;
  text-decoration: none;              /* override old rule */
}

.topbar-link::after,
.tb-phone::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;                       /* sits just below text */
  height: var(--hover-underline-height);
  background: var(--hover-underline-color);  /* same as menu */
  border-radius: var(--hover-underline-radius);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hover-underline-duration) ease;
}

.topbar-link:hover::after,
.topbar-link:focus-visible::after,
.tb-phone:hover::after,
.tb-phone:focus-visible::after{
  transform: scaleX(1);
}

/* Remove the old hover underline style */
.topbar-link:hover { text-decoration: none; }
.tb-phone:hover    { text-decoration: none; }

/* Force gold underline on main menu (desktop) */
@media (min-width: 981px){
  .link::after{
    background: var(--hover-underline-color) !important; /* gold */
    height: 1px;  /* keep the thin style */
  }
  /* keep active state gold too */
  .link.is-active::after{
    background: var(--hover-underline-color) !important;
  }
}

/* === Slim Enquiry button === */
:root{
  --enquiry-fs: 14px;
  --enquiry-py: 6px;   /* vertical padding */
  --enquiry-px: 14px;  /* horizontal padding */
}

.btn-enquiry{
  padding: var(--enquiry-py) var(--enquiry-px) !important;
  font-size: var(--enquiry-fs) !important;
  font-weight: 600;                 /* a bit lighter than 700 */
  border-radius: var(--radius-pill);
  line-height: 1.5;                 /* tighter line height */
}

/* If you want it extra-slim on wide screens only */
@media (min-width: 981px){
  .btn-enquiry{ --enquiry-py: 5px; --enquiry-px: 12px; --enquiry-fs: 13px; }
}

/* === Enquiry hover: brand green + white text === */
.btn-enquiry{
  /* keep current base (gold) but allow smooth change */
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.btn-enquiry:hover,
.btn-enquiry:focus-visible{
  background: var(--brand) !important;          /* deep green */
  color: var(--brand-contrast) !important;       /* white */
  opacity: 1 !important;                         /* override earlier .92 */
}

/* (optional) pressed feedback */
.btn-enquiry:active{
  box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
}


/* ===========================
   FOOTER
   =========================== */

/* Wrapper + palette tuned to brand */
.site-footer{
  background:#0B1A23;                 /* deep navy for strong contrast */
  color:#EAF0F5;                       /* soft light text */
  position:relative;
  z-index:2;
  font-family:var(--font-body);
}

/* main grid */
.site-footer .footer-wrap{
  max-width:var(--container-max);
  margin-inline:auto;
  padding:56px 16px 32px;
  display:grid;
  gap:36px 24px;
  grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
}
@media (max-width:1024px){
  .site-footer .footer-wrap{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px){
  .site-footer .footer-wrap{ grid-template-columns: 1fr; }
}



/* About text */
.footer-text{
  margin:0 0 10px;
  color:#EAF0F5;
  opacity:.9;
  line-height:1.75;
}
.footer-more{
  display:inline-block;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  position:relative;
  padding-bottom:2px;
}
/* gold underline on hover */
.footer-more::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:var(--hover-underline-height);
  background:var(--hover-underline-color);
  border-radius:var(--hover-underline-radius);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--hover-underline-duration) ease;
}
.footer-more:hover::after{ transform:scaleX(1); }

/* Link lists (no arrows/chevrons) */
.footer-nav{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.footer-nav li{margin:0}
.footer-nav a{
  display:inline-block;
  color:#C7D3DE;                       /* muted */
  text-decoration:none;
  font-weight:600;
  padding:2px 0;
  position:relative;
  transition:color .2s ease, opacity .2s ease;
}
/* hover = brighter + gold underline */
.footer-nav a:hover{ color:#FFFFFF; }
.footer-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:var(--hover-underline-height);
  background:var(--hover-underline-color);
  border-radius:var(--hover-underline-radius);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--hover-underline-duration) ease;
}
.footer-nav a:hover::after{ transform:scaleX(1); }

/* Contact meta rows (Type/License/Validity) */
.foot-row{
  display:flex; gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.foot-row .k{
  color:#B9C6D3;
  flex:0 0 auto;
  font-weight:700;
  letter-spacing:.02em;
}
.foot-row .v{
  color:#FFFFFF;
  font-weight:700;
}

/* Contact list with small SVG icons */
.contact-list{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; gap:10px;
}
.contact-list li{
  display:flex; align-items:flex-start; gap:10px;
  color:#C7D3DE;
}
.contact-list svg{
  width:18px; height:18px; flex:0 0 18px; opacity:.9;
}
.contact-list a{
  color:#EAF0F5; text-decoration:none; position:relative; padding-bottom:2px;
}
.contact-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:var(--hover-underline-height); background:var(--hover-underline-color);
  border-radius:var(--hover-underline-radius);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--hover-underline-duration) ease;
}
.contact-list a:hover::after{ transform:scaleX(1); }

/* Bottom strip */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:8px;
  padding:14px 16px 22px;
}
.footer-bottom p{
  max-width:var(--container-max);
  margin:0 auto;
  color:#B9C6D3;
  text-align:center;
  font-size:var(--fs-sm);
}

/* Utility: keep any vertical side chips hidden over footer if present */
.site-footer .side-chip,
.site-footer .sticky-chip{ display:none !important; }

/* Footer color = top green */
:root{
  --footer-bg: var(--brand); /* reuse the site brand green */
}

.site-footer{
  background: var(--footer-bg) !important;
  color: #fff; /* keep text readable */
}

/* optional: tweak the bottom border tint to suit green */
.site-footer .footer-bottom{
  border-top: 1px solid rgba(255,255,255,.14);
}


/* Footer titles exactly like menu items */
.footer-title{
  font-family: var(--font-body) !important;   /* Inter like menu */
  font-size: 14px;                            /* same size */
  font-weight: 800;                           /* boldness */
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #fff;
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 6px;
}

/* Permanent gold underline */
.footer-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 36px;                                /* short underline */
  background: var(--hover-underline-color);   /* gold */
  border-radius: var(--hover-underline-radius);
}


/* Make K/V rows look like the other footer items */
.foot-row{
  display:block;
  padding:8px 0;
  border:0;                          /* no dividers */
  font-family: var(--font-body);     /* same as footer links */
  font-weight: 600;                  /* same weight */
  font-size: var(--fs-lg);           /* same size as your footer items (18px) */
  line-height: 1.6;
  color:#fff;
  letter-spacing: 0;                 /* no header tracking */
  text-transform: none;              /* keep normal case */
  white-space: nowrap;               /* single line */
  overflow: hidden;                  /* guard overflow */
  text-overflow: ellipsis;
}

/* Collapse label/value into one line cleanly */
.foot-row .k,
.foot-row .v{
  all: unset;
  font-family: var(--font-body);
  font-weight: 600;
}
.foot-row .k{ opacity:.9; margin-right:.5ch; }
.foot-row .k::after{ content: ":"; margin-left:.1ch; opacity:.9; }

/* Contact list (email/phone/time/address) same as others */
.contact-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.contact-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-weight:600;
  font-size: var(--fs-lg);           /* 18px */
  line-height:1.6;
  color:#fff;
  white-space: nowrap;               /* single line for all… */
  overflow:hidden;
  text-overflow: ellipsis;
}
.contact-list svg{
  width:18px; height:18px; flex:0 0 18px; opacity:.95; color:#fff;
}
.contact-list a{
  color:#fff; text-decoration:none;
}

/* …except the address (last item): allow wrapping & lighter weight */
.contact-list li:last-child{
  white-space: normal;               /* address may wrap */
  font-weight: 400;                  /* lighter like paragraph */
  opacity:.92;
}


.footer-col.contact .foot-row{
  display:flex;
  align-items:baseline;
  gap:.5ch;
  padding:10px 0;
  white-space:nowrap;                 /* keep on one line */
  overflow:hidden;
  text-overflow:ellipsis;

  /* match footer link look (same as "Customer's Login") */
  font-family: var(--font-body);
  font-size: var(--fs-lg);            /* 18px like footer items */
  font-weight: 600;
  line-height:1.6;
  color:#C7D3DE;                      /* same muted link color */
  text-transform:none;
  letter-spacing:0;
  position:relative;
}

/* make k:v text identical (no different weights/colors/italics) */
.footer-col.contact .foot-row .k,
.footer-col.contact .foot-row .v{
  all:unset;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  color:inherit;
}
.footer-col.contact .foot-row .k::after{
  content: ":";                       /* keep the colon */
  margin: 0 .35ch 0 .15ch;
  opacity:.9;
}

/* disable any accidental italics coming from <em>/<i> in content */
.footer-col.contact .foot-row em,
.footer-col.contact .foot-row i{
  font-style: normal !important;
  color: inherit !important;
}

/* hover = same as footer links: brighter text + thin gold underline */
.footer-col.contact .foot-row::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background: var(--hover-underline-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hover-underline-duration) ease;
}
.footer-col.contact .foot-row:hover{
  color:#fff;
}
.footer-col.contact .foot-row:hover::after{
  transform: scaleX(1);
}

/* Email/Phone/Time/Address list also match footer items */
.footer-col.contact .contact-list{
  list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px;
}
.footer-col.contact .contact-list li{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight:600;
  line-height:1.6;
  color:#C7D3DE;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.footer-col.contact .contact-list a{ color:inherit; text-decoration:none; }
.footer-col.contact .contact-list li:hover{ color:#fff; }
.footer-col.contact .contact-list li:hover a{ color:#fff; }

/* allow only the ADDRESS to wrap like a paragraph */
.footer-col.contact .contact-list li.address{
  white-space: normal;
  font-weight:400;            /* slightly lighter for readability */
  color:#EAF0F5;
}

/* CONTACT column = make every line look like other footer links
   (targets the 4th .footer-col in the footer grid) */
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .foot-row{
  display:flex;
  align-items:center;
  gap:.5ch;
  padding:10px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* match .footer-nav a */
  font-family: var(--font-body) !important;
  font-size: var(--fs-lg) !important;      /* same size as link items */
  font-weight: 600 !important;
  line-height: 1.6;
  color: #C7D3DE !important;               /* same muted color as links */
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}

/* flatten k:v so both sides look identical */
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .foot-row .k,
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .foot-row .v{
  all: unset;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .foot-row .k::after{
  content: ":";
  margin: 0 .4ch 0 .2ch;
  opacity: .9;
}

/* email/phone/time/address list — same as other items */
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .contact-list{
  list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px;
}
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .contact-list li{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-body) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 600 !important;
  line-height:1.6;
  color:#C7D3DE !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .contact-list a{
  color: inherit !important; text-decoration:none;
}

/* allow ONLY the address to wrap & be a bit lighter */
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .contact-list li:last-child{
  white-space: normal;
  font-weight: 400 !important;
  color: #EAF0F5 !important;
}

/* tone down the icons to match link color */
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .contact-list svg{
  width:18px; height:18px; flex:0 0 18px;
  color:#C7D3DE; opacity:.9;
}

/* optional hover to match other links (brighter on hover) */
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .foot-row:hover,
.site-footer .footer-wrap > .footer-col:nth-of-type(4) .contact-list li:hover{
  color:#fff !important;
}

/* ===========================
   CONTACT US — overrides only
   (affects 4th column only)
   =========================== */

/* 1) Cancel the browser's italic style for <address> */
.site-footer .footer-wrap > address.footer-col{
  font-style: normal !important;
}

/* 2) Make KV rows match other footer links (same as "Customer's Login") */
.site-footer .footer-wrap > address.footer-col .foot-row{
  display: block;
  padding: 10px 0;
  border: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* match .footer-nav a */
  font-family: var(--font-body) !important;
  font-size: inherit !important;          /* 16px like the other links */
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: #C7D3DE !important;               /* same muted color */
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* Flatten label/value so both look identical and stay on one line */
.site-footer .footer-wrap > address.footer-col .foot-row .k,
.site-footer .footer-wrap > address.footer-col .foot-row .v{
  all: unset;
  font: inherit !important;
  color: inherit !important;
}
.site-footer .footer-wrap > address.footer-col .foot-row .k::after{
  content: ":"; margin: 0 .35ch 0 .2ch; opacity: .9;
}

/* 3) Email / Phone / Time / Address list — same as other links */
.site-footer .footer-wrap > address.footer-col .contact-list{
  list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px;
}
.site-footer .footer-wrap > address.footer-col .contact-list li{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body) !important;
  font-size: inherit !important;          /* 16px */
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: #C7D3DE !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: normal !important;
}
.site-footer .footer-wrap > address.footer-col .contact-list a{
  color: inherit !important; text-decoration: none;
  position: relative; padding-bottom: 2px;
}
.site-footer .footer-wrap > address.footer-col .contact-list a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: var(--hover-underline-height); background: var(--hover-underline-color);
  border-radius: var(--hover-underline-radius);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--hover-underline-duration) ease;
}
.site-footer .footer-wrap > address.footer-col .contact-list a:hover::after{
  transform: scaleX(1);
}
.site-footer .footer-wrap > address.footer-col .contact-list svg{
  width: 18px; height: 18px; flex: 0 0 18px; color: #C7D3DE; opacity: .9;
}

/* Allow ONLY the last item (address) to wrap like a paragraph and be slightly lighter */
.site-footer .footer-wrap > address.footer-col .contact-list li:last-child{
  white-space: normal;
  font-weight: 400 !important;
  color: #EAF0F5 !important;
}

/* ======= DISCLAIMER (below footer) — like screenshot, light bg ======= */
.site-disclaimer{
  background: var(--brand-soft);              /* keep light, unlike screenshot */
  color: var(--fg);
  padding: 34px 0 42px;
  border-top: 1px solid rgba(17,24,39,.08);
  font-family: var(--font-body);
}

.site-disclaimer .disc-hero{
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 28px);       /* big like screenshot heading */
  letter-spacing: .01em;
  color: var(--accent-contrast);
}

.site-disclaimer .disc-sub{
  margin: 0 0 16px;
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 22px);       /* subheading size */
  color: var(--accent-contrast);
  opacity: .95;
}

/* Numbered list, one column, roomy lines like the screenshot */
.site-disclaimer .disc-list{
  list-style: decimal;                        /* 1,2,3… */
  margin: 0;
  padding-left: 2rem;                         /* space for numbers */
  display: grid;
  row-gap: 5px;
}

.site-disclaimer .disc-list li{
  margin: 0;
  font-size: clamp(10px, 1.4vw, 12px);       /* body size similar to screenshot */
  line-height: 1.9;
  color: var(--accent-contrast);
  opacity: .92;
}

/* Make the numbers strong and aligned */
.site-disclaimer .disc-list li::marker{
  font-weight: 700;
  color: var(--accent-contrast);              /* dark number on light bg */
}

/* Hide vertical side chips over disclaimer if they exist */
.site-disclaimer .side-chip,
.site-disclaimer .sticky-chip{ display: none !important; }

/* Stack is already single-column; keep readable on small screens */
@media (max-width: 600px){
  .site-disclaimer{ padding: 28px 0 34px; }
  .site-disclaimer .disc-list{ row-gap: 14px; }
}

/* ===== Disclaimer tweaks ===== */

/* "Risk Disclosures:" in red */
.site-disclaimer .disc-sub{
  color: var(--danger) !important;   /* uses your token #D92D20 */
}

/* "Attention Investors !" flashing (gentle, < 2 Hz) */
.site-disclaimer .disc-hero{
  display: inline-block;
  animation: attn-flash 1.2s ease-in-out infinite alternate;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .site-disclaimer .disc-hero{ animation: none; }
}

@keyframes attn-flash{
  0%   { opacity: 1;   text-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { opacity: .45; text-shadow: 0 0 8px rgba(205,164,52,.35); } /* soft gold glow */
  100% { opacity: 1;   text-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* Derivatives block tweaks */
/* Make the second (Derivatives) list use the exact same style */
.site-disclaimer .disc-list-deriv{ margin-top: 6px; }  /* small separation from subheading */

/* If you previously added .disc-bullets rules, neutralize them */
.site-disclaimer .disc-bullets{ all: unset; display: contents; }
.site-disclaimer .disc-bullets li{ all: unset; }

/* === Make BOTH disclaimer subheads look the same === */
.site-disclaimer .disc-sub{
  font-family: var(--font-body) !important;              /* Inter, not Spectral */
  font-weight: 700 !important;
  font-size: clamp(16px, 1.8vw, 22px) !important;        /* same size as your first line */
  color: var(--danger) !important;                       /* red */
  margin: 0 0 12px !important;
  line-height: 1.25;
  font-style: normal !important;                         /* in case inside <address> etc. */
}

/* Add breathing room before "Risk Disclosure on Derivatives" */
.site-disclaimer .disc-list + .disc-sub{
  margin-top: 18px !important;                           /* space between list and new heading */
}

/* keep the source line tidy */
.site-disclaimer .disc-source{
  margin: 8px 0 12px !important;
  font-size: var(--fs-sm) !important;
  color: var(--muted) !important;
}

/* Footer bottom accents */
.footer-bottom .heart{
  color: var(--danger);        /* red heart */
  font-weight: 700;
}

.footer-bottom .mya,
.footer-bottom .mya:visited{
  color: #f97316;              /* orange */
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-bottom .mya:hover,
.footer-bottom .mya:focus-visible{
  color: #2563eb;              /* blue on hover/focus */
  text-decoration: none;
}
/* === Enquiry CTA — animated gold border ring (site-matched) === */
.cta-area .btn-enquiry,
.cta-area .btn-enquiry:where(a){
  --gold: var(--accent-gold, var(--accent));     /* gold arc color */
  --ring: 2px;                                   /* border thickness */
  --bg:   var(--accent);                         /* keep your site gold fill */
  --fg:   var(--accent-contrast);                /* dark text from tokens */

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  /* keep your slim sizing vars */
  padding: var(--enquiry-py, .7rem) var(--enquiry-px, 1.1rem);
  border-radius: var(--radius-pill, 999px);
  font-weight: 600;
  line-height: 1;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid transparent;                 /* clean edge in Safari fallback */
  text-decoration: none;
  cursor: pointer;
}

/* Animated “running” border */
.cta-area .btn-enquiry::before{
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ring));
  border-radius: inherit;

  /* thin golden arc that rotates around the pill */
  background:
    conic-gradient(from 0deg,
      transparent 0turn .92turn,
      var(--gold) .92turn 1turn);

  /* show only the ring area */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  padding: var(--ring);
  pointer-events: none;
  animation: enquiry-ring-rotate 2.75s linear infinite;
}

@keyframes enquiry-ring-rotate { to { transform: rotate(1turn); } }

/* Keep your existing hover that swaps to brand green */
.cta-area .btn-enquiry:hover { filter: brightness(1.05); }
.cta-area .btn-enquiry:active { transform: translateY(1px); }
.cta-area .btn-enquiry:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--gold) 70%, white 30%);
  outline-offset: 2px;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .cta-area .btn-enquiry::before { animation: none; }
}

/* <a class="btn-enquiry"> fallback parity */
a.btn-enquiry{ display:inline-flex; }

/* Graceful fallback if masking unsupported (older Safari/Edge) */
@supports not (-webkit-mask: none) {
  .cta-area .btn-enquiry::before{
    /* no mask available → show a subtle static gold outline */
    background: none;
    padding: 0;
    inset: 0;
    box-shadow: 0 0 0 var(--ring) var(--gold) inset;
    animation: none;
  }
}