/* ============ TOKENS ============ */
/* Brand: gold #C3971D (taken from Grace Lim's email signature),
   burgundy #8C1C2B accent, white ground, warm ivory neutrals.
   The logo keeps its own colours and is never recoloured. */
:root{
  /* Tell the browser this site is light, so Chrome's automatic dark mode
     on Android leaves it alone. There is no dark theme by design. */
  color-scheme:light;

  /* gold — leads */
  --gold:#C3971D;            /* the signature gold: rules, icons, borders, numerals */
  --gold-warm:#D9AE3A;       /* lighter gold for hairlines on white */
  --gold-pale:#FBF084;       /* the logo's own pale gold, used very sparingly */
  --brand:#A37519;           /* interactive gold — passes contrast as text on white */
  --brand-600:#8A6612;       /* gold hover */
  --brand-soft:rgba(195,151,29,.12);

  /* burgundy — accents */
  --red:#8C1C2B;
  --red-deep:#6E1420;
  --red-soft:rgba(140,28,43,.07);

  /* ink & ground */
  --ink:#221B1C;
  --body:#57545A;
  --muted:#8B857E;
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --panel:#FBF8F1;
  --panel-warm:#F7EFE1;
  --line:#EDE4D3;
  --line-strong:#DCCDB3;

  --shadow-sm:0 2px 10px rgba(90,70,25,.07);
  --shadow:0 14px 36px rgba(90,70,25,.13);
  --radius:5px;
  --container:1180px;

  --ease:cubic-bezier(.22,.8,.26,1);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:Poppins,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  margin:0;
  line-height:1.25;
  text-wrap:balance;
  font-weight:700;
}
h1{font-size:clamp(2rem,4.4vw,3.05rem);letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,3vw,2.15rem);letter-spacing:-.01em}
h3{font-size:1.16rem;font-weight:600}
h4{font-size:1rem;font-weight:600}
p{margin:0}
a{color:var(--brand-600);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:3px;
}
ul{margin:0;padding:0;list-style:none}
img,svg{max-width:100%}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding-inline:20px}
.section{padding-block:clamp(56px,7vw,92px)}
.section--panel{background:var(--panel)}
.section--warm{background:var(--panel-warm)}

.eyebrow{
  font-family:Poppins,sans-serif;font-size:.735rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red);
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-warm);flex:none}
.eyebrow--center{justify-content:center}
.lede{font-size:1.05rem;color:var(--body);max-width:62ch}
.head-center{text-align:center;max-width:64ch;margin-inline:auto}
.head-center .eyebrow{justify-content:center}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:Poppins,sans-serif;font-size:.875rem;font-weight:600;
  padding:14px 28px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn svg{width:16px;height:16px;flex:none}
.btn--primary{background:var(--gold);color:#221B1C;position:relative;overflow:hidden}
.btn--primary:hover{background:#B0871A;transform:translateY(-2px);box-shadow:0 8px 20px rgba(195,151,29,.32)}
.btn--primary::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .55s var(--ease);
}
.btn--primary:hover::after{left:140%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.btn--gold{background:var(--red);color:#fff}
.btn--gold:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 8px 20px rgba(140,28,43,.3)}

/* ============ TOP BAR ============ */
.topbar{background:var(--panel);color:var(--body);font-size:.8rem;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;padding-block:10px}
.topbar a{color:var(--body);display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:var(--brand)}
.topbar svg{width:14px;height:14px;color:var(--gold);flex:none}
.topbar .spacer{margin-left:auto}
.topbar .hours{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:18px;min-height:84px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand__mark{
  width:60px;height:60px;flex:none;border-radius:50%;
  background-image:url("logo.png");
  background-size:contain;background-position:center;background-repeat:no-repeat;
}
/* lockup: both words carry weight. "GAL" still leads on size, but a 500-weight
   "Global" next to an 800-weight "GAL" read as two different logos. */
.brand__name{font-family:Poppins,sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink);letter-spacing:-.01em;line-height:1.1}
.brand__gal{font-weight:800;font-size:1.24em;letter-spacing:-.02em}
.brand__sub{display:block;font-family:Roboto,sans-serif;font-weight:400;font-size:.615rem;letter-spacing:.155em;text-transform:uppercase;color:var(--brand-600);margin-top:4px}   /* deep gold: 5.3:1 on white; plain gold was 2.7:1 */

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  font-family:Poppins,sans-serif;font-size:.855rem;font-weight:500;color:var(--ink);
  padding:10px 14px;border-radius:4px;position:relative;
}
.nav a:hover{color:var(--red)}
.nav a[aria-current="page"]{color:var(--red)}
/* The current-page underline is a real <span>, not ::after, because a view
   transition can only carry an element from one page to the next - that is
   what lets it slide across to the new menu item instead of blinking. */
.nav__bar{position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--red);border-radius:2px}
.header-cta{margin-left:10px}
.navtoggle{
  display:none;background:transparent;border:1px solid var(--line-strong);border-radius:4px;
  width:44px;height:42px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.navtoggle svg{width:20px;height:20px}

@media (max-width:1000px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:8px 12px 16px;
    /* the open menu hangs from a sticky header, so the page scrolling behind
       it cannot bring its lower items into view. On a small phone, or any
       phone held sideways, Our Partners, Contact Us and Get a Quote were
       below the screen and out of reach. It scrolls itself now. */
    max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 10px;border-bottom:1px solid var(--line)}
  .nav__bar{display:none}
  .header-cta{margin:12px 10px 0;justify-content:center}
  .navtoggle{display:inline-flex}
  .site-header .wrap{position:relative}
}

/* ============ HERO ============ */
.hero{position:relative;background:var(--bg);overflow:hidden;border-bottom:1px solid var(--line)}
.hero__art{position:absolute;inset:0;width:100%;height:100%;opacity:1;pointer-events:none}
.hero .wrap{position:relative;padding-block:clamp(56px,7.5vw,96px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;align-items:center}
.hero h1{color:var(--ink)}
.hero__text p{color:var(--body);font-size:1.06rem;margin-top:20px;max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__auth{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}
.hero__auth span{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.815rem;letter-spacing:.02em}
.hero__auth svg{width:15px;height:15px;color:var(--gold);flex:none}

.hero__panel{
  background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--gold-warm);
  border-radius:6px;padding:30px 28px;box-shadow:var(--shadow);
}
.hero__panel h3{color:var(--ink);font-size:1.02rem;margin-bottom:4px}
.hero__panel .note{color:var(--muted);font-size:.82rem;margin-bottom:20px}
.deadline{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.deadline:first-of-type{border-top:0;padding-top:0}
.deadline__due{
  font-family:Poppins,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.06em;
  color:var(--brand);background:var(--brand-soft);border:1px solid var(--line-strong);
  border-radius:3px;padding:5px 9px;height:fit-content;white-space:nowrap;flex:none;min-width:92px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.deadline__what{color:var(--body);font-size:.86rem;line-height:1.55}
.deadline__what b{color:var(--ink);font-weight:600;display:block;font-family:Poppins,sans-serif;font-size:.9rem}

@media (max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:38px}
}

/* ============ FEATURE CARDS ============ */
.features{background:var(--panel)}
.features .wrap{padding-block:clamp(46px,5vw,64px)}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.feature{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
.feature__icon{
  width:54px;height:54px;border-radius:50%;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--brand);
}
.feature:nth-child(even) .feature__icon{background:var(--red-soft);color:var(--red)}
.feature{border-top:3px solid transparent}
.feature:hover{border-top-color:var(--gold-warm)}
.feature__icon svg{width:26px;height:26px}
.feature h3{margin-bottom:8px}
.feature p{font-size:.91rem}
@media (max-width:980px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.feature-grid{grid-template-columns:1fr}}

/* ============ SPLIT ============ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split--narrow{gap:48px}
@media (max-width:920px){.split{grid-template-columns:1fr;gap:38px}}

.figure{
  position:relative;border-radius:6px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);
  aspect-ratio:4/3.2;display:block;
}
.figure svg{width:100%;height:100%;display:block}
.figure__badge{
  position:absolute;left:22px;bottom:22px;right:22px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold-warm);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);
}
.figure__badge strong{display:block;font-family:Poppins,sans-serif;color:var(--ink);font-size:.95rem;font-weight:600}
.figure__badge span{font-size:.82rem;color:var(--muted)}

.checklist{display:grid;gap:13px;margin-top:26px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:.945rem}
.checklist svg{width:19px;height:19px;flex:none;margin-top:5px;color:var(--brand)}
.checklist b{color:var(--ink);font-weight:500}

.values{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.values span{
  font-family:Poppins,sans-serif;font-size:.78rem;font-weight:500;
  padding:7px 15px;border-radius:100px;background:var(--brand-soft);color:var(--brand);
}

/* ============ SERVICE PILLARS ============ */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:46px}
.pillar{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:34px 30px;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pillar__top{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.pillar__icon{width:50px;height:50px;border-radius:var(--radius);background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pillar{border-top:3px solid var(--gold)}
.pillar:nth-child(2){border-top-color:var(--red)}
.pillar:nth-child(2) .pillar__icon{background:var(--red)}
.pillar__icon svg{width:25px;height:25px}
.pillar > p{font-size:.92rem;margin-bottom:20px}
.pillar ul{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:20px}
.pillar li{display:flex;gap:10px;font-size:.9rem;color:var(--body)}
.pillar li svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--brand)}
@media (max-width:920px){.pillars{grid-template-columns:1fr}}

/* ============ SERVICE DETAIL LIST ============ */
.svc-block{border-top:1px solid var(--line);padding-top:42px;margin-top:46px}
.svc-block:first-of-type{border-top:0;margin-top:34px;padding-top:0}
.svc-block__head{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.svc-block__head .pillar__icon{width:46px;height:46px}
.svc-block__head p{font-size:.95rem;margin-top:6px}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;transition:border-color .2s ease,box-shadow .2s ease}
.svc:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.svc h4{margin-bottom:7px;display:flex;align-items:center;gap:9px}
.svc h4 svg{width:18px;height:18px;color:var(--brand);flex:none}
.svc p{font-size:.878rem;line-height:1.65}
@media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}}

/* ============ NAVY BAND ============ */
.band{background:var(--bg);position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band__art{position:absolute;inset:0;opacity:1;pointer-events:none}
.band .wrap{position:relative}
.band h2,.band h3{color:var(--ink)}
.band p{color:var(--body)}

.calendar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:42px}
.cal{border:1px solid var(--line);border-top:3px solid var(--gold-warm);border-radius:var(--radius);padding:22px 20px;background:var(--card);box-shadow:var(--shadow-sm)}
.cal__due{font-family:Poppins,sans-serif;font-weight:700;color:var(--gold);font-size:.98rem;margin-bottom:9px;font-variant-numeric:tabular-nums}
.cal h4{color:var(--ink);font-size:.93rem;margin-bottom:6px}
.cal p{font-size:.83rem;line-height:1.6;color:var(--body)}
@media (max-width:1000px){.calendar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.calendar{grid-template-columns:1fr}}

/* ============ CTA BAND ============ */
.cta-band{background:var(--panel-warm);position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band .wrap{padding-block:clamp(44px,5vw,62px);position:relative;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.cta-band h2{color:var(--ink);font-size:clamp(1.4rem,2.5vw,1.9rem);max-width:22ch}
.cta-band p{color:var(--body);margin-top:8px;max-width:52ch}
.cta-band__art{position:absolute;inset:0;opacity:1;pointer-events:none}

/* ============ WHY / NUMBERED ============ */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:44px}
.why{display:flex;gap:18px}
.why__icon{width:48px;height:48px;flex:none;border-radius:var(--radius);background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}
.why__icon svg{width:23px;height:23px}
.why h3{margin-bottom:6px}
.why p{font-size:.92rem}
@media (max-width:820px){.why-grid{grid-template-columns:1fr}}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:44px;counter-reset:step}
.step{position:relative;padding-top:26px;border-top:2px solid var(--gold-warm)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:-16px;left:0;background:var(--panel-warm);padding-right:12px;
  font-family:Poppins,sans-serif;font-weight:700;font-size:1.35rem;color:var(--red);
  font-variant-numeric:tabular-nums;
}
.step h3{margin-bottom:7px;font-size:1.03rem}
.step p{font-size:.885rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ============ LEADERSHIP ============ */
.leader{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:center;margin-top:44px}
@media (max-width:860px){.leader{grid-template-columns:1fr;gap:32px}}
.leader__photo{
  position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);border-bottom:4px solid var(--gold-warm);
  background:var(--panel);box-shadow:var(--shadow);max-width:360px;
}
.leader__photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 12%;display:block}
.leader__name{font-family:Poppins,sans-serif;font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.leader__role{
  font-family:Poppins,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin-top:10px;
}
.leader p{margin-top:18px;font-size:.97rem;max-width:60ch}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.creds span{
  font-family:Poppins,sans-serif;font-size:.735rem;font-weight:600;letter-spacing:.05em;
  padding:6px 13px;border-radius:3px;background:var(--brand-soft);color:var(--brand);
}
.leader__contact{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.leader__contact a{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--body)}
.leader__contact a:hover{color:var(--brand)}
.leader__contact svg{width:16px;height:16px;color:var(--gold);flex:none}

.fa-no{
  margin-top:16px;font-family:Poppins,sans-serif;font-size:.755rem;font-weight:600;
  letter-spacing:.07em;color:var(--gold);
}

/* ============ PARTNERS ============ */
.partner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px}
.partner{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px}
.partner__icon{width:46px;height:46px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.partner__icon svg{width:22px;height:22px}
.partner h3{margin-bottom:7px}
.partner p{font-size:.895rem}
@media (max-width:900px){.partner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.partner-grid{grid-template-columns:1fr}}

/* ============ CAREERS ============ */
.roles{display:grid;gap:16px;margin-top:40px}
.role{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:var(--radius);padding:24px 26px;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.role__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.role__meta span{font-size:.75rem;font-family:Poppins,sans-serif;font-weight:500;color:var(--muted);border:1px solid var(--line-strong);border-radius:100px;padding:4px 12px}
.role h3{margin-bottom:4px}
.role p{font-size:.895rem;max-width:62ch}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.info{display:grid;gap:22px}
.info__row{display:flex;gap:16px}
.info__icon{width:46px;height:46px;flex:none;border-radius:var(--radius);background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center}
.info__icon svg{width:21px;height:21px}
.info h4{margin-bottom:3px}
.info a{color:var(--body)}
.info a:hover{color:var(--brand)}

.form{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:32px 30px;box-shadow:var(--shadow-sm)}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:Poppins,sans-serif;font-size:.78rem;font-weight:500;color:var(--ink);letter-spacing:.02em}
.field input,.field select,.field textarea{
  font-family:Roboto,sans-serif;font-size:.925rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:12px 14px;width:100%;transition:border-color .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
/* iPhones zoom the whole page into any field whose text is under 16px, and
   leave it zoomed. On touch screens the fields are 16px; desktop is unchanged. */
@media (hover:none) and (pointer:coarse){
  .field input,.field select,.field textarea{font-size:16px}
}
.field textarea{resize:vertical;min-height:120px}
.form__note{font-size:.79rem;color:var(--muted);margin-top:14px;line-height:1.6}
.form__status{font-size:.86rem;color:var(--brand);margin-top:12px;font-weight:500}

/* ============ FOOTER ============ */
/* Burgundy footer (v13): the one element on every page, so it anchors the palette.
   Text #F7EFE1 on #8C1C2B 7.9:1; headings/accents #E8C86A 5.6:1. Plain gold
   #C3971D is only 3.4:1 on burgundy, so it is not used for text here. */
.site-footer{background:var(--red);color:#F7EFE1;padding-top:clamp(48px,6vw,72px);border-top:3px solid var(--gold)}
.site-footer h4{color:#E8C86A;font-size:.95rem;margin-bottom:18px;letter-spacing:.01em;position:relative;padding-bottom:12px}
.site-footer h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:rgba(232,200,106,.55);border-radius:2px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:38px}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}}
@media (max-width:540px){.footer-grid{grid-template-columns:1fr}}
.site-footer p{font-size:.895rem;line-height:1.75}
.site-footer ul{display:grid;gap:11px}
.site-footer a{color:#F7EFE1;font-size:.895rem}
.site-footer a:hover{color:#E8C86A}
.footer-brand{display:flex;align-items:center;gap:19px;margin-bottom:22px}
.footer-brand .brand__mark{width:104px;height:104px}
/* the footer column is narrower than the header, so the lockup gets a
   nowrap: "GAL Global" breaking over two lines stops reading as a logo. */
.footer-brand .brand__name{color:#fff;font-size:1.72rem;white-space:nowrap}
.footer-brand .brand__sub{color:#E8C86A;font-size:.72rem;letter-spacing:.12em;margin-top:7px;white-space:nowrap}
.footer-contact li{display:flex;gap:11px;align-items:flex-start;font-size:.895rem}
.footer-contact svg{width:16px;height:16px;flex:none;margin-top:5px;color:#E8C86A}
.site-footer .fa-no{color:#E8C86A}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.18);margin-top:clamp(36px,5vw,54px);
  padding-block:22px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.82rem;color:#EDE4D3;
}

/* ============ PAGE HEADER (inner pages) ============ */
.pagehead{background:var(--panel);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.pagehead__art{display:none}
.pagehead .wrap{padding-block:clamp(52px,6vw,84px);position:relative;z-index:1}
/* The company mark, shown properly. It was a faded watermark cut from the
   215px logo, which the browser had to stretch to twice its size on any sharp
   screen - so it came out soft, and at 62% opacity the navy read as lavender.
   logo-hd.webp is cut from the 645px master at 460px, enough for a 210px mark
   on a 2x display, and it is drawn at full strength. Inset matches the page
   gutter so the mark is whole. */
.pagehead::after{
  content:"";position:absolute;top:50%;right:clamp(40px,14vw,300px);
  width:clamp(130px,17vw,210px);aspect-ratio:1;transform:translateY(-50%);
  background:url("logo-hd.webp") center/contain no-repeat;
  pointer-events:none;z-index:0;
}
@media (max-width:1100px){
  .pagehead::after{right:clamp(20px,6vw,80px)}
}
/* On a phone the mark used to sit behind the description at 30%, because at
   full strength it would collide with the text. It moves up beside the title
   instead, smaller, and stays at full strength - clear, and never under words. */
@media (max-width:760px){
  .pagehead::after{top:clamp(40px,11vw,52px);transform:none;right:20px;width:68px}
}
.pagehead h1{color:var(--ink);font-size:clamp(1.85rem,3.6vw,2.6rem)}
.pagehead h1::after{content:"";display:block;width:52px;height:3px;background:var(--gold-warm);margin-top:18px;border-radius:2px}
.pagehead p{color:var(--body);margin-top:16px;max-width:60ch;font-size:1.02rem}
.crumbs{display:flex;gap:9px;align-items:center;font-size:.8rem;color:var(--muted);margin-top:18px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand)}

/* ============ FAQ ============ */
.faq{display:grid;gap:14px;margin-top:40px;max-width:820px;margin-inline:auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:0 22px}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 0;
  font-family:Poppins,sans-serif;font-weight:600;font-size:.97rem;color:var(--ink);
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-size:1.35rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details > p{padding:0 0 20px;font-size:.92rem;border-top:1px solid var(--line);padding-top:16px}


.form__banner{
  border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--panel);
  color:var(--ink);border-radius:var(--radius);padding:14px 16px;font-size:.9rem;margin-bottom:20px;
}
.form__banner--err{border-left-color:#B3261E;color:#8C1D18;background:#FDF3F2}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


.hero__grid{position:relative;z-index:1}

/* ==========================================================================
   MOTION
   ========================================================================== */

/* Page-to-page transitions.
   The header is the one thing a visitor's eye is resting on when they click,
   so it does not move: it - and the hours bar above it - is lifted out of the
   page and held perfectly still
   while the content underneath leaves and the new page rises in. The red line
   under the current menu item is carried across and slides from the old item
   to the new one - the single piece of motion that says "you went from here
   to there". The FAQ button is held still for the same reason as the header.
   Browsers without view transitions simply navigate, and anyone who has asked
   their device for less motion gets an ordinary page load. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.topbar{view-transition-name:topbar}
.site-header{view-transition-name:site-header}
.nav__bar{view-transition-name:nav-bar}
.faqw__launcher{view-transition-name:faq-launcher}

/* held still: the new one is shown at once, the old one never drawn */
::view-transition-group(topbar),
::view-transition-group(site-header),
::view-transition-group(faq-launcher){animation:none}
::view-transition-old(topbar),
::view-transition-old(site-header),
::view-transition-old(faq-launcher){display:none}
::view-transition-new(topbar),
::view-transition-new(site-header),
::view-transition-new(faq-launcher){animation:none}

/* the underline sets off at once and lands softly, arriving with the page
   rather than after it - an ease-in start left it sitting under the old item
   until the new page had already settled */
::view-transition-group(nav-bar){animation-duration:.46s;animation-timing-function:cubic-bezier(.22,.8,.26,1)}
::view-transition-old(nav-bar),::view-transition-new(nav-bar){animation-duration:.46s}

::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(.16,1,.3,1) .06s both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}

/* A plain fade-in on load, but only where view transitions do not exist.
   Where they do, this fade would run on the body INSIDE the transition and
   fade the held header in with it - the header would flicker instead of
   staying put. */
@supports not (view-transition-name:none){
  body{animation:page-in .4s ease both}
}
@keyframes page-in{from{opacity:0}to{opacity:1}}

html{scroll-behavior:smooth}

/* Hero entrance — staggered, from a visible resting state */
.hero__text>*{animation:rise .75s var(--ease) both}
.hero__text>*:nth-child(1){animation-delay:.10s}
.hero__text>*:nth-child(2){animation-delay:.17s}
.hero__text>*:nth-child(3){animation-delay:.24s}
.hero__text>*:nth-child(4){animation-delay:.31s}
.hero__text>*:nth-child(5){animation-delay:.38s}
.hero__panel{animation:rise .8s var(--ease) .34s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Scroll reveals. The class is added by JS, so with JS off everything
   stays visible — nothing is ever parked invisible waiting on an observer. */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .75s ease,transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Sticky header gains a shadow once the page moves */
.site-header{transition:box-shadow .3s ease,border-color .3s ease}
.site-header.scrolled{box-shadow:0 4px 20px rgba(90,70,25,.10);border-bottom-color:transparent}

/* Nav underline grows from the centre on hover */
.nav a{transition:color .2s ease}
.nav a::before{
  content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;
  background:var(--gold);border-radius:2px;transition:left .25s var(--ease),right .25s var(--ease);
}
.nav a:hover::before{left:14px;right:14px}
.nav a.btn::before{display:none}

/* Card and link micro-interactions */
.svc,.cal,.partner,.role,.feature,.pillar{transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease}
.svc:hover,.cal:hover,.partner:hover,.role:hover{transform:translateY(-3px)}
.cal:hover{box-shadow:var(--shadow)}
.figure img,.leader__photo img{transition:transform .6s var(--ease)}
.leader__photo:hover img{transform:scale(1.03)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.faq summary::after{transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  body{opacity:1}
}

/* ==========================================================================
   HERO SLIDER
   Photos drop in by setting --img on each .slide__media (see assets/README).
   Until then each slide falls back to a gold/burgundy gradient.
   ========================================================================== */
.hero{
  position:relative;background:var(--bg);overflow:hidden;
  border-bottom:1px solid var(--line);padding:0;
}
.slider{position:relative;isolation:isolate}
.slider__track{position:relative;display:grid}
.slide{
  grid-area:1/1;position:relative;display:flex;align-items:center;
  min-height:clamp(400px,56vh,540px);
  opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s;
  z-index:0;
}
.slide.is-active{opacity:1;visibility:visible;z-index:1}
.slide__media{
  position:absolute;inset:0;
  background-image:var(--img,linear-gradient(115deg,#5E1420 0%,#8C1C2B 40%,#A8761A 78%,#C3971D 100%));
  background-size:cover;background-position:center;
  transform:scale(1.06);
}
.slide.is-active .slide__media{animation:ken 9s ease-out both}
@keyframes ken{from{transform:scale(1.06)}to{transform:scale(1.14)}}
.slide__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,14,15,.80) 0%,rgba(20,14,15,.58) 45%,rgba(20,14,15,.22) 100%);
}
.slide .wrap{position:relative;z-index:2;width:100%}
.slide__inner{max-width:620px;padding-block:clamp(34px,4.5vw,62px)}
/* slide 1 carries the page h1; slides 2-3 are h2 but look identical */
.slide h1,.slide h2{color:#fff;margin-bottom:0;font-size:clamp(1.85rem,3.5vw,2.65rem);line-height:1.2;letter-spacing:-.02em}
.slide .eyebrow{color:#E8C86A}
.slide .eyebrow::before{background:#E8C86A}
.slide__sub{color:#E4DCD2;font-size:1.02rem;margin-top:16px;max-width:52ch}
.slide .hero__actions{margin-top:26px}

/* slide contents animate in each time the slide becomes active */
.slide.is-active .slide__inner>*{animation:rise .8s var(--ease) both}
.slide.is-active .slide__inner>*:nth-child(1){animation-delay:.12s}
.slide.is-active .slide__inner>*:nth-child(2){animation-delay:.22s}
.slide.is-active .slide__inner>*:nth-child(3){animation-delay:.32s}
.slide.is-active .slide__inner>*:nth-child(4){animation-delay:.42s}

.btn--onphoto{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--onphoto:hover{background:#fff;color:#221B1C;border-color:#fff}

.slider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);color:#fff;
  transition:background .22s ease,border-color .22s ease,transform .22s var(--ease);
}
.slider__arrow:hover{background:var(--gold);border-color:var(--gold);color:#221B1C}
.slider__arrow svg{width:22px;height:22px}
.slider__arrow--prev{left:clamp(10px,2.5vw,28px)}
.slider__arrow--next{right:clamp(10px,2.5vw,28px)}
.slider__arrow--prev:hover{transform:translateY(-50%) translateX(-3px)}
.slider__arrow--next:hover{transform:translateY(-50%) translateX(3px)}

/* The dots were the button: 4px tall, which no thumb can hit, and on phones
   the arrows are hidden, so they were the only control. The button is now a
   24px target; the bar you see is drawn inside it, in the same place as
   before (the row sits 10px lower to keep the bar where it was). */
.slider__dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:3;
  display:flex;gap:10px;
}
.slider__dot{
  position:relative;width:28px;height:24px;cursor:pointer;border:0;padding:0;background:none;
  transition:width .25s var(--ease);
}
.slider__dot::before{
  content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.42);transition:background .25s ease;
}
.slider__dot.is-active{width:44px}
.slider__dot.is-active::before{background:var(--gold)}
.slider{touch-action:pan-y}

@media (max-width:640px){
  .slider__arrow{display:none}
  .slide{min-height:420px}
}

/* ==========================================================================
   CALENDAR LEAD-IN (the compliance panel, moved out of the hero)
   ========================================================================== */
.calendar-lead__grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(30px,4vw,56px);align-items:center;
}
@media (max-width:920px){.calendar-lead__grid{grid-template-columns:1fr}}

/* ==========================================================================
   NAV DROPDOWN
   ========================================================================== */
.nav__item{position:relative}
.nav__item>a{display:inline-flex;align-items:center;gap:6px}
.nav__caret{width:13px;height:13px;transition:transform .25s var(--ease)}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:100%;left:6px;min-width:290px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s var(--ease),visibility .25s;
}
.nav__item:hover .dropdown,.nav__item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:block;padding:11px 14px;border-radius:3px;font-size:.865rem;
  font-family:Poppins,sans-serif;font-weight:500;color:var(--ink);
  transition:background .18s ease,color .18s ease,padding-left .18s var(--ease);
}
.dropdown a:hover{background:var(--panel);color:var(--red);padding-left:20px}
.dropdown a::before{display:none}
.dropdown small{display:block;font-family:Roboto,sans-serif;font-weight:400;font-size:.76rem;color:var(--muted);margin-top:2px}

@media (max-width:1000px){
  .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--gold);border-radius:0;
    padding:0 0 0 12px;margin:0 0 8px 10px;min-width:0;
  }
  .nav__caret{display:none}
  .dropdown a{padding:10px 8px;border-bottom:1px solid var(--line)}
  .dropdown a:hover{padding-left:12px}
}

/* ==========================================================================
   PHOTOGRAPHY
   Stock photos are atmosphere only: never captioned, named or placed so they
   read as GAL staff or clients. The only real person on the site is Grace
   (grace-lim.jpg). Sources and licences: assets/IMAGE-CREDITS.md.
   If a file is missing, each slot falls back to its gradient/colour.
   ========================================================================== */
.slide-1 .slide__media{--img:url("hero-1.webp")}
.slide-2 .slide__media{--img:url("hero-2.webp")}
.slide-3 .slide__media{--img:url("hero-3.webp")}

/* full-width photo bands: deadlines calendar and the closing CTA */
.photo-band,.cta-band--photo{position:relative;overflow:hidden;isolation:isolate;background:#241A1B}
.photo-band__media{
  position:absolute;inset:0;z-index:-1;
  background:var(--img,none) center/cover no-repeat;
}
/* same dark scrim family as the hero, so light text stays at AA */
.photo-band__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,15,.82) 0%,rgba(20,14,15,.72) 100%);
}
.photo-band--deadlines .photo-band__media{--img:url("band-deadlines.webp")}
.cta-band--photo .photo-band__media{--img:url("band-cta.webp")}
.photo-band .wrap{padding-block:clamp(64px,8vw,104px)}
.photo-band h2,.cta-band--photo h2{color:#fff}
.photo-band p,.cta-band--photo p{color:#EDE6DC}
.photo-band .eyebrow{color:#E8C86A}
.photo-band .eyebrow::before{background:#E8C86A}
.photo-band .cal{background:rgba(255,255,255,.97)}
.photo-band .cal p{color:var(--body)}   /* cards stay dark-on-white */
.cta-band--photo{border:0}
.cta-band--photo .wrap{padding-block:clamp(60px,7vw,92px)}

/* Grace's portrait beside the home "Who we are" statement */
.split--portrait{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.portrait{max-width:420px;border-radius:6px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.portrait img{display:block;width:100%;height:auto}
.portrait__note{margin-top:20px;font-size:.92rem}
.portrait__note a{font-weight:600}
@media (max-width:920px){
  .split--portrait{grid-template-columns:1fr}
  .portrait{max-width:340px}
}

/* inner-page photos in the existing figure frame */
.figure--photo img{width:100%;height:100%;object-fit:cover;display:block}
.standard{margin-top:18px;padding-left:16px;border-left:3px solid var(--gold-warm);color:var(--ink);font-size:.98rem}
.standard b{font-weight:600}
.fa-line{margin-top:16px;font-size:.84rem;font-weight:500;color:var(--body);letter-spacing:.02em}

/* Short laptop screens: keep the hero from filling the whole viewport, so a
   sliver of the next section shows and the page reads as scrollable. */
@media (max-height:830px) and (min-width:861px){
  .slide{min-height:360px}
  .slide__inner{padding-block:clamp(22px,2.6vw,38px)}
  .slide h1,.slide h2{font-size:clamp(1.7rem,2.9vw,2.2rem)}
  .slide__sub{font-size:.96rem;margin-top:13px}
  .slide .hero__actions{margin-top:20px}
  .slider__dots{bottom:6px}
}

/* ===== FAQ helper =====
   Corner panel injected by app.js on every page except /contact-us/.
   Buttons only — no text input, by design (see the comment in app.js).
   Motion is switched off by the global prefers-reduced-motion rule above.
   ========================================================================== */
.faqw__launcher{
  position:fixed;z-index:70;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  width:88px;height:88px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--ink);   /* ink on gold: 6.2:1, AA */
  box-shadow:var(--shadow);
  transition:background .2s ease,transform .2s var(--ease);
}
.faqw__launcher:hover{background:var(--gold-warm);transform:translateY(-2px)}
.faqw__launcher:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:50%}
.faqw__launcher svg{width:38px;height:38px}
.faqw__launcher.is-open{background:var(--gold-warm)}

.faqw__panel{
  position:fixed;z-index:70;
  right:max(20px,env(safe-area-inset-right));
  bottom:calc(max(20px,env(safe-area-inset-bottom)) + 100px);
  width:380px;max-width:calc(100vw - 40px);
  /* it sits above the 88px button, so on a phone held sideways 70% of the
     screen was taller than the room left and the top edge was cut off */
  max-height:min(70vh, calc(100vh - 136px));max-height:min(70dvh, calc(100dvh - 136px));
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.faqw__panel[hidden]{display:none}
.faqw__panel:not([hidden]){animation:faqw-in .25s var(--ease)}
@keyframes faqw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.faqw__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 10px 10px 20px;border-bottom:1px solid var(--line);flex:none;
}
.faqw__title{font-family:Poppins,"Segoe UI",Arial,sans-serif;font-weight:600;font-size:.95rem;color:var(--ink)}
.faqw__close{
  width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.faqw__close:hover{background:var(--panel)}
.faqw__close svg{width:18px;height:18px}

.faqw__body{overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px}
.faqw__intro{font-size:.9rem;line-height:1.6;margin-bottom:14px}
.faqw__list{display:grid;gap:8px}
.faqw__q{
  display:block;width:100%;text-align:left;cursor:pointer;
  font:500 .86rem/1.4 Poppins,"Segoe UI",Arial,sans-serif;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 14px;transition:border-color .18s ease,background .18s ease;
}
.faqw__q:hover{border-color:var(--gold);background:var(--panel-warm)}

.faqw__asked{font-family:Poppins,"Segoe UI",Arial,sans-serif;font-weight:600;font-size:.95rem;line-height:1.4;color:var(--ink);margin-bottom:10px}
.faqw__asked:focus{outline:none}
.faqw__answer{font-size:.9rem;line-height:1.65}
/* --muted fails AA at this size (3.6:1), so the closing line uses body
   colour (7.4:1) and is set apart by size and style instead. */
.faqw__closing{font-size:.8rem;line-height:1.55;font-style:italic;margin-top:14px}

.faqw__handoff{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.faqw__lead{font-size:.86rem;font-weight:500;color:var(--ink)}
.faqw__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.faqw__link{
  flex:1 1 auto;text-align:center;padding:9px 12px;
  font:600 .82rem Poppins,"Segoe UI",Arial,sans-serif;color:var(--ink);
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);
  transition:border-color .18s ease,color .18s ease;
}
.faqw__link:first-child{background:var(--gold);border-color:var(--gold)}
.faqw__link:hover{border-color:var(--gold);color:var(--red)}
.faqw__link:first-child:hover{background:var(--gold-warm);color:var(--ink)}

/* follow-ups: a short list under the answer, with a quiet one-line handoff */
.faqw__follow{
  margin:16px 0 8px;font:600 .72rem Poppins,"Segoe UI",Arial,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--body);
}
.faqw__quiet{font-size:.84rem;margin-top:12px}
.faqw__quiet a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

.faqw__nav{display:flex;gap:18px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.faqw__back,.faqw__again{
  padding:0;border:0;background:none;cursor:pointer;
  font:600 .84rem Poppins,"Segoe UI",Arial,sans-serif;color:var(--brand-600);
}
.faqw__back::before{content:"\2190\00a0"}
.faqw__back:hover,.faqw__again:hover{color:var(--red)}

/* Phones: full width inside the normal 20px page gutter. */
@media (max-width:560px){
  .faqw__panel{left:20px;right:20px;width:auto;max-width:none}
}

/* ==========================================================================
   COLOUR (v13) — burgundy and cream used structurally, no new colours.
   Contrast (WCAG AA): white on burgundy #8C1C2B 9.1:1; #F7EFE1 on burgundy
   7.9:1; #E8C86A on burgundy 5.6:1; icons #A37519 on cream 3.9:1 and
   burgundy on white 9.1:1 (graphics need 3:1). Plain gold #C3971D on cream is
   only 2.6:1, so it is never used there for text or icons.
   ========================================================================== */

/* Services: each pillar gets a burgundy header band with a faint number */
.svc-section{scroll-margin-top:90px}
.svc-band{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;gap:20px;align-items:center;
  background:var(--red);color:#fff;border-radius:var(--radius);
  padding:clamp(26px,3.4vw,40px) clamp(22px,3.4vw,44px);margin-bottom:28px;
}
.svc-band::before{
  content:attr(data-num);position:absolute;z-index:-1;
  right:clamp(10px,3vw,40px);top:50%;transform:translateY(-50%);
  font:700 clamp(4.5rem,11vw,8.5rem)/1 Poppins,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.04em;color:transparent;opacity:.42;
  -webkit-text-stroke:2px rgba(255,255,255,.5);
}
.svc-band__icon{
  width:56px;height:56px;flex:none;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.svc-band__icon svg{width:26px;height:26px}
.svc-band h2{color:#fff;font-size:clamp(1.35rem,2.4vw,1.7rem)}
.svc-band p{color:#F7EFE1;margin-top:6px;max-width:64ch;font-size:.97rem}
/* On a phone the band stacks: icon and number share the top row, heading and
   text run the full width beneath. Side by side, "Corporate Secretarial" ran
   straight through its "02"; padding the heading clear of the number instead
   pushed an unbreakable word like "Accounting," wider than the band on a 320px
   screen, and the band clipped the text. Stacked, neither can happen. */
@media (max-width:560px){
  .svc-band{flex-direction:column;align-items:flex-start;gap:14px}
  .svc-band__icon{width:46px;height:46px}
  .svc-band::before{font-size:3.2rem;top:clamp(20px,6vw,26px);right:18px;transform:none}
}

/* One icon colour throughout. It used to flip burgundy on white, gold on cream,
   which from a reader's seat is the same kind of card changing colour for no
   reason they can see. */
.svc-section .svc h4 svg{color:var(--brand)}

/* The headline service in each family. This was a solid burgundy fill, which
   read as a selected item rather than an emphasised one - especially as it
   lands in a different grid position in every section. A gold rule and a
   burgundy heading carry the same weight without looking like a UI state.
   The "Most requested" tag is what makes the emphasis mean anything: without
   it a visitor sees one card in six picked out and has to guess why. */
.svc__tag{
  display:inline-block;margin-bottom:11px;
  font-family:Poppins,"Segoe UI",Arial,sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600);
  background:var(--brand-soft);border:1px solid var(--line-strong);
  padding:3px 9px;border-radius:999px;line-height:1.5;
}
.svc.svc--feature{background:var(--card);border-color:var(--line-strong);box-shadow:inset 0 3px 0 var(--gold-warm),var(--shadow-sm)}
.svc.svc--feature h4{color:var(--red)}

/* hover: burgundy left edge and a small lift (the lift is set above) */
.svc:hover{border-color:var(--line-strong);box-shadow:inset 3px 0 0 var(--red),var(--shadow-sm)}
.svc.svc--feature:hover{border-color:var(--line-strong);box-shadow:inset 0 3px 0 var(--gold-warm),inset 3px 0 0 var(--red),var(--shadow)}

/* narrow photo strips between pillars; no text sits on them */
.photo-strip{position:relative;height:clamp(130px,16vw,220px);background:#241A1B center/cover no-repeat}
.photo-strip::after{content:"";position:absolute;inset:0;background:rgba(20,14,15,.35)}
.photo-strip--deadlines{background-image:url("band-deadlines.webp")}
.photo-strip--partners{background-image:url("partners-meeting.webp");background-position:center 40%}

/* Partners: burgundy icons on the white section, same hover as Services */
.partner__icon{background:var(--red-soft);color:var(--red)}
.partner:hover{border-color:var(--line-strong);box-shadow:inset 3px 0 0 var(--red),var(--shadow-sm)}

/* Contact: cream band, burgundy rule under the heading */
.contact-band h2::after{content:"";display:block;width:52px;height:3px;background:var(--red);margin-top:14px;border-radius:2px}

/* Careers paused — see PROJECT_HANDOVER_SUMMARY.md "Paused" */
.paused-note{
  margin-top:clamp(40px,5vw,64px);padding:24px 26px;max-width:760px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:var(--radius);
}
.paused-note p{color:var(--ink);font-size:1rem;line-height:1.7}

/* ==========================================================================
   v14 — Careers notice, service strip lines, the gold G as recurring device
   ========================================================================== */
.paused-band{padding-top:clamp(28px,4vw,44px)}
.paused-band .paused-note{margin-top:0}

/* one line of light gold over each Services photo strip.
   #E8C86A over the photo under a .74 scrim: see contrast note in the report */
.photo-strip{display:flex;align-items:center;justify-content:center}
.photo-strip::after{background:rgba(20,14,15,.74)}
.photo-strip__line{
  position:relative;z-index:1;margin:0;padding:0 20px;max-width:62ch;text-align:center;
  font:500 clamp(1.05rem,2vw,1.3rem)/1.45 Poppins,"Segoe UI",Arial,sans-serif;color:#E8C86A;
}

/* FAQ launcher carries the gold G on burgundy, matching the favicon */
/* navy disc in the logo's blue; the G gold on it is 5.3:1 (6.5:1 on the hover/open navy) */
.faqw__launcher{background:#3A4698}
.faqw__launcher:hover{background:#2E3A86}
.faqw__launcher.is-open{background:#232D6E;box-shadow:0 0 0 3px #FBF187,var(--shadow)}
/* The whole G mark (G + globe, 400x322, aspect kept; globe darkened to 78% on this
   copy only so the gold G reads against it) is embedded, not fetched: the launcher is created by JS after load, so a
   separate image request left it as an empty circle until the file arrived. */
.faqw__g{display:block;width:52px;height:43px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA3CAYAAAC1pezdAAAaBUlEQVR42sWbe7Bd113fP7+11t7nfe5L915JfkiJH4llB4fEJDwyJA4tCTixaxrdhmcbAjFkQuEPZqB0OteaEiYUBqYwNA2UoW2GpCMFp84LQjqN05IhJIQEjBz5JduSrXuvdN/ntR9rrV//2EfSlSzZlgLp1pyRdO49+6z9Xb/H9/f9/ZbwLb4WFxcNb8IcuvOQP/ve4cPvn5V649sJ7g5n3avRsF+Mu17EOAUVBFBRdCnG+IxoeDhq9lWj8lf33vuLJ8/f56CFgywsLISrXZ98q4BQVTly5Ig5u9jDh98/mzQn7nImvcfa2uuTpL2n2ejgTIpi0VgtTwAFFMWIgonE6BllPbLR9roPw6/5kH3KpPX/ee8P/OzT50AHDh06FK8KEFUVuN8CER4ROIjI1aN88XX48GF7FoiPPvBrNzdqM++rJe13Tk3NzdaSNqG0eA8ihPHDC6oXbJYCRkRRUGNUYzTOiljrycstTq+fGIaQf6qedn7nrre864s7vjeOP/7SAFFVEZHnfUAEVL95qwBEROKHPvwre+ZnXv4rrdrkv5qe3tuO3hGCBhSiBiOy01pfyHB1x/1RY2wUsRriyBV+ha3eaRDzMSPJr779re/+27MW81KtRQA+/7XfnnztTavvrdn8u8SmA+/NA83mrx5WrX4ugl5NrDi7iI89+Dvv7rRn//2u6f17QmGIio/RWxGRb95rq6UZk2rpB3Fl9WHTbtUly/IccR9Yfpb333fffeVOK31BQFZXP3Btq33mU/WauR0ywAIpw+34X/7Db/3Gfffffz8iLw1dBUHhoYcW7Z13HvJ/9Nv/cnLXK97wn+Zm9/+wZQLvg1f1FjEXASFXBYQRi6oSNRC1pD9cosh7TE/cEDZ6T9paKhRF/MvM85PvuPu+Y5///KK7c0cwvyQgg9Evf6ZZz3+g9KMCjB3HL03KkCx/wyzsueODR1QPWpEj4fJusWA4ArJw/nd+99MP3LwvDR+7Zu4Vr8oz8SEUY4tQBEWksnmRSBVBq/cZ/+vyYClGHMN8jd5giZmJG1FVltf+FjQgCBOd6xExur71eOh0pl1RFmtlCD/2z9/2vj97MVAkK38+WMlRjKkirKFc6/vaxro5fdL+yZ7v//iCHsbKAuFil7j/1kdkJwiHVe2b/+r+PcvHT71ms9H5/dnZ3fOxsD6SO4yAdWAdZahTxibYCUppEaUFkgLm3OOLKKIBCJfwcyFqydrW4xTlgPmZbyOEjNWNY2gsaTb2MNG9ntPrDxODD4lz1lhCkccf+aF73nf4hUBxglUwIhgUiFsDipVN7OoGrJhLG+vhg1YWDoVDwLHP/+au3ekT/yT0177fP/B9r8v6W/uvtdraJ46wodGlzpFYwABCCBYVB8bhJaGgA3TImGQUJxEzRRETiuCIZo5ou5ewEcWYhLmp2zi9/ndsbD6Bcw0Qy66pm6mnM2TFKkQQsL4so4li0jT5yAMPfkjvvPO+I5cDxQXvPpXWa/eEsizKrLTF8iZheV1Db2iKYupjAA8dfaPAF1BVMSIqC0fC0pf+7cta+RM/F/wXf6Te25yX7TOMSiE2p9lszMYs6UquiVEFEwxSgE2gkZakklGzBanNaLCJ6joteQasQjSoc1hbsBkP8AwHscTnuY5qRMTQqM2wsX0cKbZxLsWHIWc2TpGXWxgZb4SoiUGjx5tamnz0gQc+tHXnnff9+aUCrdvcmP15O7N6c5rKLY2VVWxvG0aZPbne+vCHf/pzH1s8IebOQ1/wqotGRCKLapbe/KO/1Bgd/eWO73c3V5Y4nZuQdV+rZ7rXmnUzJXlsGhlFQhUtqj8akSxWrmAidVPQTUZ0ky2m01W66QDRQMChAkaUBI/EF0hEAj4WIIIVR4yeze1nEDEYcTtStIBgQojRmGCSunzkwQf/4DvvuWfhiYtTsgD81SP/beaW6aM/45959nv98upW0TcPXPujn/sfSqjoyOGDVhaOhL/5P/9x9mXxLz7cNb23rD+7QtnP/MbEd9rRnrvkdCH0e0sYUYzEcb4eh8eKf4PKmHVWvEsxQCQVz0x9m5d1n2LabJKrw5mcITfzRPgXCP4iC1EEQ1TP8trfoqFExFwUhPVy3Cg0mw2bjfIvT3Zv+54zZ87owYML8Sy1uCwx21kfLCwcCSe/tHhtfevrn+2Wqwc2nl3zo+a8Xd37TiknvptsuML6+sNYk5xbiCJENYQx/RYFTMTs2ApVrQipGgq1WOt59eTjXFc/ieJZ52aeCQs4OQuIAoIRgxLZ2H4KgCzbQNW/5PStqr7bbbnedvHvfuifvfdXd7rORdT9UOQIFXVfOBJ0cdHIoUPx5Jc+cG1t6bN/nhYbt4x6mS+mb3fLu9+Nt3NI2ObM+lG8zzFiiAghWhLradohnaTHVG2EZYvEFiRSuRDGkpWWSJ1Ma2yXhrzs0PNNXjtzlOl0meeK21iRBRLxRAVjDBojRbnNZv8EMXrmpg+wsvrwlQECao2oiC3FNV5991vf9ajqoogciq5KcaLAjoh7BFXk/vsP8eTnPjBhH//0Z+rJ8JY84su9t7tTUz9DpE2iGZuj0xR+hJMEr4ZESq6beJa99VO0XY+6jvAIhXYINFEcMXjqps9koyDRAgVCy+JJyWINxBDE4mydMh/gY5807dAbrJNl6+RFH4gY41jbeHTMY+RKCjiJIcRmK6n1hsNfB+45e4PL3qWKGx8LT/3xm47sbufvGIqUoT6VPNV8D97uxuIJGji9+jCqBV4T5htr3NR9lLZbQ2JgoPNshQP0uJ5gdlN4S2+0Qp6fwVHQTCN7OwltOUlDnqPmhohYvFqczVkpbucrp/Yy1Zmh5tqcXnsEa9OK1CGICCGUIDLOKFd8xSRNTYz2Dffc9dNfPHz4sHWXB+NIOP7xhfuundh4x5ZPvTN5smzvpLDX4Ogj0mQ4XCHEPpEWN3Sf5abWY8CIMjQ47V/PJnfgzQTOJGT5GTa3v0GIOUYcBQ5fNKjJa9hAsPE07fJxZu3XaNhtVCyl1khdmzxbpzRDnEvHfKZKCjEG6rVJammX7cGpKy4AVIlpYs1gkP0c8EU4grmkgHPwSHzq87+4u9vOfm1kbLQ2mpGZZyt9DZYCSIhaMspWCdpgT3OFG1qPEMnJtMXjxVtZM29FbYvUFGTZEmsbR4kxw2JAFYNgKInlKsPRSTLfYIPv5YnynWzEfRjrCdSYnb4FxDAqNsZg6NiwBdVIo76LTuuaHcrJFWgfgh0OMzVW7v74n35w/8LCkfA8QO6/9RERQWuc+IXJSZ3Ooovq1GwmryKaDkJAxFKWPfJixGR9yK0TlR8HOnxt9dtZHe0iNSOEgA+Bze2nxqk42VGnCCEGVjceY33rCULsk5oRanZxqnwz2AaJBRFHt30diLnggassLkQNhFiQuDpXoVZIjBparWZDgt7NGPILCjVZOBKW//L983XJ39PLoooTq6bG0N5wNoEiIgzzDVQ8B7rHSHSImjp/v3Ub61mLhJyIQcRRlFuEmAPJRVrGedJkxVW8IirBb+DjLFl6DbZdJ4ZALWmTmIs+P9Zshtk61qbMztxGLZ1ArzTAikrwXuOlAOGhN9kKtsfe0Zm0U6VKtDZKMNOU7MHgAYNGTz8fsL+7zEyyjhjLyeE+locTpK4KtmONixj9iy5PVRGxDLMznFl/mDwfsS43EOptLI5htkaMl06rtbTFxvYzqAqd1l50TP2uII6YoihFNbz2k5/8r9dcGFQf+kIEIUpxr9eoxjmMFAzDDF7qWAIihtKXJAy4rrWCRsi0xTP9PThRUIMPBaoRI0IIHr2ooL+EioIxhjwfojGwPXyUlaUDOJfSGz1Gf/jsJbJIJLEtVCOjfI1GbZJ6OkmjNk2WryMXUPcXshAR74OmNTdZhuz17gJ3EYnbf/0bu/L8y3eUBSIixkigkGkUB+QYEbIiYzpdocsARFjNZhiVDRJTomLwYUQIOS7pEGN4CbxAK9eoTbE9WibEIZvbJxBxjLIVjEkvsbOREEaMRhmqgdIPaTZ20W7tJis2r8hKRIjOOet9+I7zLnNkwQBk4eSBdl0mfIwqogKGaCaQqhhBEUIcMZesgkZUYN1PXFBIqQbObH6Dweg0rdYsiL3MAqtMoShrW49ixDDTvRlByIstsnxtDEa8oE5RjdRrM1hbQ1UxxoF6ynKANQlyxQlY0BhB423nLOSh2dMV3XGDV9bqSlYSAKdqyXwbcVW6iyo46TNd26wYpjgGvsXOckgQfMhY3z5O6lqXWaCgWtJqzgOGrf4Jtvqn2L3r2/Aho9c/ici4ETAO5qCEWNBp7WF64hUMs9OsbTwGwHb/OUbZJmLc1aiREkJACS8/ZyFvGv+dxNGsjC1BRBAMXty5/YkqNKVPajzRQhlSstJh5MJIYUlAI3mxeZn9qgD2sWR64kamOjeSlxtkxQbd9jU4Vx+rZTLeiBJV6LavY6LzMqIGrKkjYsZB2eHDiKLYvgo8VEKIiJi58xZyzjc787CJETve2YjgzkVvVWi6IWJLAo4oFsWe50sXqeGXC26qoJowHG6xnSwzMfFyrGvTG6wzPdGhUZtnq/cMxlgg0KjvpdOaI01aqFZxKcR8R/oe67LPC74vibBJtZ5Yf559RWNbZx9M9AKJZUcIHKImIipYgRfuUugl33I2UKuNiFHIssdIkhGd5hRGPFu9r1NzHWppQPE4Z5if7hJijaCV1iICMVbxZ6Jz/Tmhepit40OGVKEa1YCR5EUBUlWsNW13scu4Mls+20I8r+7o8yiLEYMaByZgpEAlRV5SmgMfhYmWZ/91WxhTsqszxMkxfKjclDiWkURxNpLHBttbp3hu9c0gM+PC3FD6AfVaF2ublH4LXw6IoazAUCVxTZKkxWB4pnJ/qVzPiLvAbcfplxhj/3kWYhPZRKRaOYIxkURzRjttxDjEGqIaXBJo1jyDvmCtXtyBvKSrWKNsbtf4m4d3IyYy1S64/aYlpie2CVHG1awSEZ44uZcTS5PUarfSrM9iJaJayYWjfIOJ9l5ajVm2+yP6xfLYBgyqgTRpsWv6FmKMWJvQae2mNzhFf7CCCBjr0BAruiqIYrLn1TI+uOc0QkRFx421mgwusPfEthFJQAzilGZtdKV1FSLgHFhjOL3R4ujT85XqHyLBK4bA6sYEf/fYHnqDlP5wiWG2RH+wjA8Zeb5BCCPSpEuWb5Llm6h6dFzzGGMZ5ets95+j27mWic4+nG0w1b2B6clXgE1oNnbTaMwSY1BrHRr19HkLOTOnAN52jw+LLUQwwVC1U2QNQqwEbIFSu6iR6v+NlD1zJSdWwxV34HRssWkS6Y8MWWFIbUBj9T39UYKQ45yhKLZYyzervsI4uwiGYbZKnq9TT6fIy97zyNvG1pOIERr1OSY6+xCg1dhFktQJIcfW6hTltopRxLjj5y3k4OEIMKzf9FgeZD1NrIiKIglNu4qQoViMKKMwSVZrYGdS3Ow0s/uh2SiJQa6yNauEYAnBImdJmAYMLVqta7C2jrUNrK1VAlIYUfoBIXo2t58mL4ZsD5+rLCSUF7a0xKIxoBrGmm+1qzF4zqwdZXvwNJ3mnvFC4t+7HZy+SufynvXNr/7Ew7WavrHQGINJbdNsUis3KZjDSmAUOvSSa5me61MEQ82OuGZ+wKPHa6RWr25qQO25XSUKKMSYE0Kg05zHJR2MscToKfyAEPyYBmiVhgUSW0NjpD9cHle956/UNegNlnCuRp73qNfaJEmTLNtG1BowoOVfX1TcvdHCF7za2l+YenwjZaEignMZbX+C1XwPVkvE1Fldn2ff9ZtIIUQCN+5b5cSpLoWvrOiqpncUjJ4Xd8VEhtkZQgCRBGdrWOswY3oeNRBCiQ8Zk539NOozbPSeOgfGeVAMW73nUAKN+gx5vkmWp2gMgGhebkpU2Uok/cqFQXUcRwo7+ZksR43BSmKRdoOpuRPAiKhCLTWsr85yZikhkQJfBFqNATftX8UHxqz1m7/Kompsi1Q0vyh7DLN1+oNleoMlBsPT5MUmIeYMsxWWznyVXn/pXLvTuQZJ0sa5JkpJuznP9MQNGJPifVbxcSE2Gg0F/vruu+87cQEgsnAkApzMb/jKiPSxxnQTM9WObtcuZq8ZMjlxEh8SjAk4N8PDx+bx3mAFfOG46foVrpndIi8tYr7paRuKQi/gC2c7csYk514iFsEwyjaJscAIhFgy0bmeuZlXMTd9K9OTNwKOWjpxnpiJnBu6sVbEiv3E8wUiUNVFd8cd95WxO/NRt2dO6jOtaJwhBuW63Q9jzYAQoNVss9Gb45EnZ3E2EnxAQ+Q1t5xiujukLKqG/9VMfsg4hsglma5e9NrR+AJqaZdu5zpajflxw6Hq5UQNF1XOlRlZK7Y/GA01rX/8UoBw//1EVSTY6z80LGRLxJuQ5xqLQKd5ij2zf0PpLUYsk90pjj05zdMndlFLPaE0pDbjDbc/yXXzm+Te4FXO87wXKL+FiMRxsxsdywLmRVO5jOWGNJli19QBdk0fYLK9/5wlqEaca7Br6pU4W6sGgiSpajMhNBp1kcgn733rT548fPigfR4gVeP3oJmff9/yqCeLxjhjovfiPaFMuW73UWYn/56sdLTqM6Rpja8+PsfTz81RqwViEJwpeN2tx3ndLSeZaI0ovaHwhqhyjpSJ6LkXKFEVNFTF2rizjwqXJr5yDigfC9J0kl1TN1NLuuOJIn9BBSZiaNVnMMYh4qjX2mjVLzZlGUhc/XfH3OMFGlV60Iocjr31X/hUeyr8YLlZliIkaESD8uizb2B7eDvD0eNs9E5gtc7N+5a4ef8SqUQKD85GyjJleWOS5fUua1tNijKh9Hash4BIxJhIpzXkDbc+Rs0FZKQMn1nm6ys3s5zehqO4QK3XMXDGJNTr00y0r8GYdCwDyAsWmSKOvNjk9MbR0G22bK+ffeId9/7re6rphnEr8zJt7qgqHD36Bz9+g/3GQ/VJeVWxNixRk4iBV17/f3lqacSSv53UbqPa59hTu1lZ7/KKfSvsnuwh6qklBft2L7Fv7jSj0jHMmgz6aSVJqmJMQaNR0K1lJDGQPb3OyUeXePr404z2zmP3OoLPz80WqQYS16LVnKNWm8TZehUZeSEwdla5WgVSYyQviixtdH7pgvmQFxBfVXXR3HbbT68//chvvWU2nPyT5kztu8ozoxCDMcYgL9/zl7SamzzByzl9JsO6yFavxZeOvoypVs50d5vp7pBOs6Ce5lgpmWn1mTmrOMYAUfG5ob/RZP3Rp3n22MOc7g8ZZT3qeyPJ2ckBqSyjUZ9mauJGjHFVnInhxQLURc9lGI7WQ7OVutHA/+a9d73r2OHDh+3ZuVx58exXmdLXP/vfWze97usfbDaLHycbURbRo8Y6V0pWdnjyuTmOL3XJ8gRnlBgr3U2NklqoOY/gaTYCaQoSISsDeSnkvgE0KP7ug2RrjxEwlFlG+9aD1K77PrQcjhtVMDdzG861z3f79aWXUCIG74dhO3vCjobZl/ft/a43HD9+PB48eDCeHQlxL36TQ7EC5ScGwE8M1//NnzkTfz2Z1mvplxQjGxLT47b92+Zl8y05sTLDcxsd+v06RbSgQlkKRZGimrIxGPMJYzDGVgKTbuGf/QSDM8eIGEIoyYtIO2mcl3NUMTYdx4odzSi5lBgllxmCkDjMl02eZesunfjRO+64o1zURbMgC3rFA6LjGRIRORSPHfvQrmunH3tvmuY/ldTDdeBh4InBR2OJRUzY7jXtVq8t/aLOds8QSMElmCJQDEYMRwPI1/AbTzFcP0axvUyMUJaxkin3fzeTBxZQted8XyRhbuZWjKntePjzpE2q0Sk0RvSCuTRFJInDbEl6o5NRSvf2u+++708vNWMmV04gz8+sPvW1P5qc3fvE2w29dyQ2/06XMkddKjlvlEEoI2oNwUBpGCxt8+yxk5x8dpmN7Q1GWZ+YQV5NW+FqLdzULTT3fQ+1Xa8k+vJicZzZqVtI0/a5jFKJzBHvh+RFnxg8jeYMztYrMiYG1MRRcVr6wxOxLPjhH7rnvZedQpSrn2FfMDuHeXXzD6b7o6dfbcm+w1DcNsh5W+J00sSRl42+W/rGc5x86iSr29vkvsQTEdcgui7SnqM28wqSqRtx9fmqgvX5RcGykv+6rWuZnLiBGEu8H5EVlThUFn2i+kqRc3V2Tb2SWtKh9FnIihU7ylZCUbz4nKp888P9Rwwc1YvHvz98+MMHuo3ekelJe6C3vulH2cCOR+9QwFrBuTretjG2Xg3ihRKN5Qssq1LVW8094+mDHlFDJZkbWzF1FaJ6kqStjdp0ULbdKO+tiaY/ds/bfubFJ5n/Ic/DwIKBA+MDA4f8H3/qj6ea2vu9tJn8cFGUxFK9CJXypJWvC2dHuzmn475Y6yBqGCvv9nJThwGibbUb5CP/JaJ7190vddb9H+/AUJWuAR78zAffbZRfq9Xd3KA/RCGoMj4SclXl3/NBqE7SREWk1aqZogg56n4rG07ev7CwULzU0xDmHwuQKl2rLC4umnt+8Gf/0BfxjlHuf08Sl7U6beucFVUCaFC9Uo3tPOOkAteLEWm2GrZeT01RxE+Irb3+7re951cWFhaKxcVF81KPnX1Ljpjt3J0H//T3bzWqPxujf2ejUZuJMVIUJWXpq4EglbMMXC42hwo3URFUVY1zVtI0wTnHYDgaGuynbWL/811vec//vuoTVfD/58zdg//rI/PGD+9S7++JWr5OxOxO04SokRiUEMJ4sC6O02vVWrDOYgR8UMoQNqzydbH2kyZJH3zbP3338X+QM3ffymtRF82tR26VnSb8mc/84axXf0fU8DpUX6XKy4FrVDUxIlOq9DGaCbKKynEVPZq42ldI+fLbvu+nnvmHPJX5/wDrnUOB/6fVWwAAAABJRU5ErkJggg==") center/contain no-repeat}

/* a large faint G behind the home CTA band, well away from the button */
.cta-band--photo::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:clamp(-60px,-2vw,0px);top:50%;transform:translateY(-50%);
  width:clamp(220px,30vw,380px);aspect-ratio:320/323;
  background:url("g-only.webp") center/contain no-repeat;opacity:.08;
}
.cta-band--photo .wrap{z-index:1}

/* ==========================================================================
   WORLD TO SINGAPORE (v16) — pure SVG + CSS; app.js only drives the rotating
   graticule and starts/stops everything via IntersectionObserver.
   Land and arcs are one fixed composition, so an arc can never detach from
   its origin; only the meridians behind the land move.
   Default (no JS, or reduced motion): arcs drawn statically, nothing moves.
   ========================================================================== */
/* v17: the whole section is a navy band in the logo's blue, so the blue globe reads as
   the logo enlarged rather than a cool object pasted onto a warm page.
   Contrast (AA): ivory #F3EADA on band 9.1-13.4:1; body #DDD5C6 7.4:1; gold #E8C86A 6.6:1;
   ink on the gold button 6.3:1. Site gold #C3971D is only 4.0:1 here, so no text uses it. */
.world{
  background:radial-gradient(ellipse at 70% 45%,#2B3680 0%,#1F2866 55%,#161D4A 100%);
  padding-block:clamp(48px,6vw,76px);
}
.world h2{color:#F3EADA}
.world .lede{color:#DDD5C6}
.world__split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.world__figure{width:100%;max-width:580px;margin-inline:auto}
.wg-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:none;cursor:grab}
.wg-svg:active,.world.is-dragging .wg-svg{cursor:grabbing}
/* the svg box is 680x584, so a border-radius focus ring draws a stretched
   oval around the globe. The ring is a real circle in the drawing instead. */
.wg-svg:focus-visible{outline:none}
.wg-focus{fill:none;stroke:#FBF187;stroke-width:2;stroke-opacity:0;transition:stroke-opacity .15s}
.wg-svg:focus-visible .wg-focus{stroke-opacity:.85}
.wg-grat{fill:none;stroke:#FBF187;stroke-opacity:.13;stroke-width:1}
/* Gold continents on a blue globe: the company mark, at size. A flat fill reads
   as yellow paint however well chosen, so the land takes a gradient ramp -
   highlight, mid, shadow, second sheen - and a dark edge, which is what makes
   metal look like metal rather than a colour. */
.wg-land{fill:url(#wg-gold) #C9A23C;stroke:#6B4F16;stroke-opacity:.85;stroke-width:.9;stroke-linejoin:round}
.wg-gloss,.wg-terminator{pointer-events:none}
/* A bronze line reads over gold land and disappears over the navy ocean, so
   each route is drawn twice: a pale casing underneath that carries it across
   the water, and the bronze core on top that carries it across land. */
.wg-casing{fill:none;stroke:#F3E2AE;stroke-width:2.6;stroke-linecap:round;opacity:.2}
.wg-trail{fill:none;stroke:#4A3A12;stroke-width:1.2;stroke-linecap:round;opacity:.42}
/* the lit leg: a bright head running the route, with the tail falling away behind */
.wg-light{fill:none;stroke:#FFF6D6;stroke-width:3.4;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,236,160,.9))}
.wg-label.is-live rect{fill:#141A45;stroke:#FFDF8F;stroke-opacity:1;stroke-width:1.3}
.wg-label.is-live text{fill:#FFE9A8}
@media (prefers-reduced-motion:reduce){
  .wg-light{display:none}
  .wg-trail{opacity:.62}
  .wg-casing{opacity:.3}
}
.wg-origin{fill:#4A3A12;opacity:.75}
.wg-sg{fill:#E8C86A;stroke:#fff;stroke-width:1.6}
.wg-sg-halo{fill:#E8C86A;opacity:0;transform-box:fill-box;transform-origin:center}
.wg-label rect,.wg-sg-label rect{fill:#141A45;stroke:#E8C86A;stroke-opacity:.5;stroke-width:1}
.wg-label text,.wg-sg-label text{fill:#E8C86A;font:600 13px Poppins,"Segoe UI",Arial,sans-serif;letter-spacing:.02em}
.wg-sg-label rect{fill:#E8C86A;stroke:#141A45;stroke-width:1.4}
.wg-sg-label text{fill:#141A45;font-weight:700}
/* the labels are repositioned every frame, so the only transition that can
   safely run is opacity - anything on x/y would lag a whole drag behind */
.wg-label{transition:opacity .18s linear}
/* a name moved away from its dot in the finale is tied back to it */
.wg-leader{stroke:#FFDF8F;stroke-width:1;stroke-opacity:.8;stroke-linecap:round}
.world.is-dragging .wg-label{transition:none}

.wg-hint{
  margin:14px 0 0;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  color:#FBF187;opacity:.55;user-select:none
}
.wg-hint svg{width:16px;height:16px}
.world.is-dragging .wg-hint{opacity:0;transition:opacity .2s}

@keyframes wg-pulse{0%{opacity:.55;transform:scale(1)} 100%{opacity:0;transform:scale(3.2)}}
@keyframes wg-shine{from{transform:translate(-26px,-10px)} to{transform:translate(34px,14px)}}
@keyframes wg-glow{from{opacity:.55} to{opacity:1}}
.wg-sg-halo{animation:wg-pulse 2.6s ease-out infinite}
.wg-shine{animation:wg-shine 30s ease-in-out infinite alternate}
.wg-glow{animation:wg-glow 8s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){
  .wg-sg-halo,.wg-shine,.wg-glow{animation:none}
  .wg-sg-halo{opacity:0}
}

@media (max-width:920px){.world__split{grid-template-columns:1fr}.world__figure{max-width:460px;margin-inline:auto}}
@media (max-width:560px){
  .wg-label text,.wg-sg-label text{font-size:17px}
  .world{overflow-x:clip}
}

/* screening note: same dialog pattern as the FAQ helper */
.wg-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.wg-modal[hidden]{display:none}
.wg-modal__backdrop{position:absolute;inset:0;background:rgba(34,27,28,.55)}
.wg-modal__panel{
  position:relative;max-width:620px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--card);border-top:4px solid var(--red);border-radius:var(--radius);
  padding:clamp(26px,4vw,40px);box-shadow:var(--shadow);
}
.wg-modal__panel h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin-bottom:14px;padding-right:36px}
.wg-modal__panel p{font-size:.95rem;line-height:1.7;margin-top:12px}
.wg-modal__note{font-size:.84rem!important;color:var(--body);border-top:1px solid var(--line);padding-top:12px;margin-top:18px!important}
.wg-modal__close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.wg-modal__close:hover{background:var(--panel)}
.wg-modal__close svg{width:20px;height:20px}
html.wg-modal-open{overflow:hidden}
.wg-modal:not([hidden]) .wg-modal__panel{animation:wg-modal-in .25s var(--ease)}
@keyframes wg-modal-in{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}

/* ==========================================================================
   About: Community (v18) — Grace's voluntary role with the World Chinese Qipao
   Alliance. A credential and a community note, not a partnership: keep it off
   the home page, the services page, the nav and the partner listings.
   ========================================================================== */
/* desktop: one centred column - mark above the heading, text at a readable measure */
.community{display:grid;gap:34px;max-width:960px;margin-inline:auto}
.community__intro{text-align:center;max-width:64ch;margin-inline:auto}
.community h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:12px}
.community__intro p{margin-top:12px}
/* two appointments, side by side on desktop, stacked on narrow screens */
.appts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.appt{display:grid;justify-items:center;text-align:center;gap:10px;
      background:#fff;border:1px solid rgba(42,53,128,.10);border-radius:14px;padding:30px 26px;
      box-shadow:0 1px 2px rgba(20,24,52,.04)}
.appt__mark{display:block;width:auto;height:72px;margin-bottom:4px}
.appt__role{font-size:1.02rem;line-height:1.35;margin:0;color:var(--navy,#2A3580)}
.appt__org{margin:0;font-size:.9rem;font-weight:500}
.appt__org .cjk{display:inline-block;margin-top:3px;font-weight:400;opacity:.78}
.appt__note{margin:6px 0 0;font-size:.88rem;line-height:1.6;opacity:.82;max-width:40ch}
/* Poppins/Roboto have no CJK glyphs: system CJK fonts for these spans only
   (no webfont - CJK webfonts run to several megabytes) */
.cjk{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
@media (max-width:760px){
  .appts{grid-template-columns:1fr;gap:20px}
  .appt{padding:26px 22px}
}
@media (max-width:560px){
  .community{gap:26px}
}