/* Silk Lane Group - site styles
   Palette and type come from the brand brief: amber #FFBD59, black, white,
   warm off-white #E9E6E1, Platform in Light / Regular / Medium / Bold. */

@font-face{font-family:"Platform";font-weight:300;font-display:swap;src:local("Platform Light"),local("Platform-Light"),url("../fonts/Platform-Light.woff2") format("woff2"),url("../fonts/Platform-Light.woff") format("woff");}
@font-face{font-family:"Platform";font-weight:400;font-display:swap;src:local("Platform Regular"),local("Platform-Regular"),url("../fonts/Platform-Regular.woff2") format("woff2"),url("../fonts/Platform-Regular.woff") format("woff");}
@font-face{font-family:"Platform";font-weight:500;font-display:swap;src:local("Platform Medium"),local("Platform-Medium"),url("../fonts/Platform-Medium.woff2") format("woff2"),url("../fonts/Platform-Medium.woff") format("woff");}
@font-face{font-family:"Platform";font-weight:700;font-display:swap;src:local("Platform Bold"),local("Platform-Bold"),url("../fonts/Platform-Bold.woff2") format("woff2"),url("../fonts/Platform-Bold.woff") format("woff");}

:root{
  --amber:#FFBD59;
  --amber-dim:#8A6A2E;
  --ink:#000000;
  --ink-2:#111111;
  --paper:#E9E6E1;
  --paper-2:#F4F2EF;
  --white:#FFFFFF;
  --on-dark:#C9C6C1;
  --on-light:#3A3733;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(0,0,0,.14);
  --wrap:1180px;
  --gut:clamp(1.25rem,5vw,3.5rem);
  --sect:clamp(4rem,9vw,7.5rem);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:"Platform","Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--on-light);
  background:var(--paper);
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.sect{padding-top:var(--sect);padding-bottom:var(--sect);}
.dark{background:var(--ink);color:var(--on-dark);}
.dark-2{background:var(--ink-2);color:var(--on-dark);}
.light{background:var(--paper);color:var(--on-light);}
.light-2{background:var(--paper-2);color:var(--on-light);}

/* ---------- type ---------- */
h1,h2,h3{font-weight:700;line-height:1.08;letter-spacing:-.02em;}
h1{font-size:clamp(2.4rem,6.4vw,4.4rem);}
h2{font-size:clamp(1.8rem,3.8vw,2.9rem);letter-spacing:-.018em;}
h3{font-size:clamp(1.1rem,1.7vw,1.3rem);letter-spacing:-.01em;line-height:1.2;}
.dark h1,.dark h2,.dark h3,.dark-2 h1,.dark-2 h2,.dark-2 h3{color:var(--white);}
.light h1,.light h2,.light h3,.light-2 h1,.light-2 h2,.light-2 h3{color:var(--ink);}
.amber{color:var(--amber);}

.eyebrow{
  font-weight:500;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);margin-bottom:1.35rem;
}
.light .eyebrow,.light-2 .eyebrow{color:var(--amber-dim);}

.lead{font-weight:300;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.45;}
.measure{max-width:62ch;}
.measure-tight{max-width:48ch;}
p + p{margin-top:1.1rem;}

hr.rule{height:1px;background:var(--amber);border:0;margin:0;}
hr.rule.faint{background:var(--line-light);}
.dark hr.rule.faint,.dark-2 hr.rule.faint{background:var(--line-dark);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:500;font-size:.95rem;
  letter-spacing:.02em;padding:.95rem 1.9rem;border:1px solid var(--amber);
  background:var(--amber);color:var(--ink);transition:background .16s,color .16s;
}
.btn:hover{background:transparent;color:var(--amber);}
.btn.ghost{background:transparent;color:var(--amber);}
.btn.ghost:hover{background:var(--amber);color:var(--ink);}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--line-dark);}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:80px;}
.brand img{width:clamp(150px,20vw,215px);}
.nav{display:flex;gap:clamp(1.1rem,2.4vw,2.2rem);align-items:center;}
.nav a{
  text-decoration:none;font-weight:500;font-size:.86rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark);padding:.4rem 0;
  border-bottom:1px solid transparent;transition:color .16s,border-color .16s;
}
.nav a:hover{color:var(--white);}
.nav a[aria-current="page"]{color:var(--amber);border-bottom-color:var(--amber);}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-dark);color:var(--white);
  padding:.6rem .85rem;font:inherit;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;cursor:pointer;
}

/* ---------- hero ---------- */
.hero{background:var(--ink);padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem);}
.hero h1{color:var(--white);}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero .lead{color:var(--on-dark);margin-top:1.9rem;max-width:44ch;}
.hero .cta{margin-top:2.8rem;display:flex;gap:1rem;flex-wrap:wrap;}
.hero .terr{
  margin-top:clamp(3rem,7vw,5rem);padding-top:1.4rem;border-top:1px solid var(--amber);
  font-weight:500;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
}
.page-head{background:var(--ink);padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,7vw,5rem);}
.page-head h1{color:var(--white);}
.page-head .lead{color:var(--on-dark);margin-top:1.5rem;}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark);}
.stats .stat{padding:2.4rem 1.9rem;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);}
.stats .stat:last-child{border-right:0;}
.stats b{display:block;font-weight:700;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1;color:var(--amber);letter-spacing:-.03em;}
.stats span{display:block;margin-top:.9rem;font-size:.9rem;line-height:1.45;color:var(--on-dark);}

/* ---------- capability list ---------- */
.caps{display:grid;gap:0;margin-top:3rem;border-top:1px solid var(--line-light);}
.dark .caps,.dark-2 .caps{border-top-color:var(--line-dark);}
.cap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,4vw,4rem);
  padding:2.2rem 0;border-bottom:1px solid var(--line-light);
}
.dark .cap,.dark-2 .cap{border-bottom-color:var(--line-dark);}
.cap h3{margin:0;}
.cap p{margin:0;}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(1.25rem,2.4vw,1.9rem);}
.grid.g2{grid-template-columns:repeat(2,1fr);}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.card{padding:clamp(1.6rem,3vw,2.4rem);border:1px solid var(--line-light);background:var(--paper-2);}
.dark .card,.dark-2 .card{border-color:var(--line-dark);background:var(--ink-2);}
.card h3{margin-bottom:.85rem;}
.card p{font-size:.98rem;}
.card .num{
  display:block;font-weight:500;font-size:.72rem;letter-spacing:.2em;
  color:var(--amber-dim);margin-bottom:1rem;
}
.dark .card .num,.dark-2 .card .num{color:var(--amber);}

/* ---------- where we operate ---------- */
.ops{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:3rem;}
.ops figure{display:flex;flex-direction:column;gap:1.25rem;}
.ops img{width:100%;max-width:225px;}
.ops figcaption{
  font-weight:500;font-size:.95rem;padding-left:.85rem;
  border-left:2px solid var(--amber);color:var(--ink);
}
.dark .ops figcaption,.dark-2 .ops figcaption{color:var(--white);}

/* ---------- pull ---------- */
.pull{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2.2rem);border-top:1px solid var(--amber);}
.pull p{font-weight:300;font-size:clamp(1.35rem,2.9vw,2.15rem);line-height:1.3;letter-spacing:-.015em;color:var(--ink);max-width:24ch;}
.dark .pull p,.dark-2 .pull p{color:var(--white);}

/* ---------- contact ---------- */
.contact-list{list-style:none;display:flex;flex-direction:column;gap:1.5rem;margin-top:2.2rem;}
.contact-list li{display:flex;flex-direction:column;gap:.35rem;}
.contact-list .k{font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);}
.contact-list a,.contact-list .v{font-size:1.15rem;color:var(--white);text-decoration:none;word-break:break-word;}
.contact-list a:hover{color:var(--amber);}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--on-dark);padding-top:clamp(3.5rem,7vw,5rem);padding-bottom:2.5rem;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);}
.site-foot img.f-logo{width:200px;margin-bottom:1.4rem;}
.site-foot h4{font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:1.1rem;}
.site-foot ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;}
.site-foot a{text-decoration:none;font-size:.98rem;}
.site-foot a:hover{color:var(--white);}
.foot-bot{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.86rem;color:#7E7A75;
}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .stats .stat:nth-child(2n){border-right:0;}
  .grid.g3{grid-template-columns:repeat(2,1fr);}
  .foot-top{grid-template-columns:1fr 1fr;}
  .site-foot img.f-logo{width:175px;}
}

@media (max-width:820px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ink);border-bottom:1px solid var(--line-dark);
    padding:.5rem var(--gut) 1.5rem;
  }
  .nav.open{display:flex;}
  .nav a{width:100%;padding:.95rem 0;border-bottom:1px solid var(--line-dark);}
  .nav a[aria-current="page"]{border-bottom-color:var(--line-dark);}
  .nav-toggle{display:block;}
  .site-head .wrap{position:relative;}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  body{font-size:1rem;}
  .cap{grid-template-columns:1fr;gap:.75rem;padding:1.8rem 0;}
  .grid.g2,.grid.g3{grid-template-columns:1fr;}
  /* Captioned maps stack, so the map can sit beside its label. */
  .ops{grid-template-columns:1fr;gap:2rem;}
  .ops figure{flex-direction:row;align-items:center;gap:1.25rem;}
  .ops img{max-width:110px;}
  /* Homepage maps: side by side with the country list rather than one under
     the other, which made the section very long to scroll past. Maps stack in
     the left column, the six names run down the right beside them. */
  .ops-wrap{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(1rem,4vw,1.75rem);align-items:stretch;
  }
  .ops-wrap{
    grid-template-columns:minmax(0,140px) 1fr;
    gap:clamp(1.75rem,6vw,2.5rem) clamp(1rem,4vw,1.5rem);
    align-items:center;margin-top:2.5rem;
  }
  /* the maps and the name groups become direct children of the grid above, so
     each map can be placed on the same row as its own countries */
  .ops.nocaps,.ops.nocaps + .terr-line{display:contents;}
  .ops.nocaps figure{flex-direction:column;align-items:center;gap:0;}
  .ops.nocaps img{max-width:100%;}
  .ops.nocaps figure:nth-of-type(1){grid-area:1 / 1;}
  .ops.nocaps figure:nth-of-type(2){grid-area:2 / 1;}
  .ops.nocaps figure:nth-of-type(3){grid-area:3 / 1;}
  /* .ops-wrap is in these selectors purely for specificity. The base rule that
     collapses the groups sits further down the file, so without the extra
     class it wins and the six names scatter across the grid one by one. */
  .ops-wrap .terr-line .grp{
    display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;
  }
  .ops-wrap .terr-line .grp:nth-of-type(1){grid-area:1 / 2;}
  .ops-wrap .terr-line .grp:nth-of-type(2){grid-area:2 / 2;}
  .ops-wrap .terr-line .grp:nth-of-type(3){grid-area:3 / 2;}
  .foot-top{grid-template-columns:1fr;}
  .hero .cta .btn{width:100%;text-align:center;}
}

@media (max-width:420px){
  .stats{grid-template-columns:1fr;}
  .stats .stat{border-right:0;padding:1.9rem 1.4rem;}
}

/* ============================================================
   Components carried over from the printed brochure so the two
   pieces read as one system. Added 31/08/2026.
   ============================================================ */

/* headings take the same white and gold split the brochure uses */
h1 em,h2 em,h3 em{font-style:normal;}
.dark h1 em,.dark h2 em,.dark-2 h1 em,.dark-2 h2 em,.hero h1 em,.page-head h1 em{color:var(--amber);}
.light h2 em,.light-2 h2 em{color:var(--amber-dim);}

/* line icons */
.ic{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* ---- horizontal stepper ---- */
.hstep{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(2.5rem,5vw,3.5rem);}
.hs{position:relative;display:flex;flex-direction:column;align-items:center;gap:.85rem;}
.hdot{
  /* explicit width AND height. aspect-ratio plus a percentage-sized child is a
     circular dependency and Chrome resolved it as an ellipse. */
  flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  border:1px solid var(--amber);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
}
.hdot svg{width:27px;height:27px;}
.hs > span:not(.hdot){font-weight:500;font-size:.78rem;line-height:1.25;text-align:center;color:var(--white);}
.hs:not(:last-child)::after{
  content:"";position:absolute;top:29px;left:100%;
  width:9px;height:9px;border-top:1px solid var(--amber);border-right:1px solid var(--amber);
  transform:translate(-50%,-50%) rotate(45deg);
}
/* the stepper now sits on a cream band, so amber-on-white and white labels
   both wash out. Swap to the darker amber and ink on light sections. */
.light .hs > span:not(.hdot),.light-2 .hs > span:not(.hdot){color:var(--ink);font-size:.86rem;}
.light .hdot,.light-2 .hdot{border-color:var(--amber-dim);color:var(--amber-dim);}
.light .hs:not(:last-child)::after,.light-2 .hs:not(:last-child)::after{
  border-top-color:var(--amber-dim);border-right-color:var(--amber-dim);
}

/* ---- stat cards ---- */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-dark);}
.statgrid .cell{
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem);
  border-right:1px solid var(--line-dark);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.statgrid .cell:last-child{border-right:0;}
.statgrid svg{width:34px;height:34px;color:var(--amber);margin-bottom:1.2rem;}
.statgrid b{font-weight:700;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1;color:var(--amber);letter-spacing:-.03em;}
.statgrid span{margin-top:.7rem;font-size:.86rem;line-height:1.4;color:var(--on-dark);}
.light .statgrid,.light-2 .statgrid{border-color:var(--line-light);}
.light .statgrid .cell,.light-2 .statgrid .cell{border-right-color:var(--line-light);}
.light .statgrid span,.light-2 .statgrid span{color:var(--on-light);}
.light .statgrid svg,.light-2 .statgrid svg{color:var(--amber-dim);}
.light .statgrid b,.light-2 .statgrid b{color:var(--amber-dim);}

/* ---- vertical flow ---- */
.flow{margin-top:clamp(2.5rem,5vw,3.5rem);}
.fstep{display:grid;grid-template-columns:56px 1fr;gap:clamp(1.25rem,3vw,2rem);align-items:stretch;}
.frail{display:flex;flex-direction:column;align-items:center;}
.fdot{
  flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  border:1px solid var(--amber);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
}
.fdot svg{width:26px;height:26px;}
.fline{flex:1 1 auto;width:100%;min-height:44px;position:relative;display:flex;align-items:center;justify-content:center;}
.fline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:var(--amber);}
.fchev{color:var(--amber);display:flex;}
.fchev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.fbody{padding-bottom:clamp(2rem,4vw,3rem);}
.fstep:last-child .fbody{padding-bottom:0;}
.fbody h3{margin:0;}
.fkeys{margin-top:.5rem;font-weight:500;font-size:.86rem;line-height:1.4;color:var(--amber-dim);}
.dark .fkeys,.dark-2 .fkeys{color:#A9A49D;}
.fkeys i{font-style:normal;color:var(--amber);padding:0 .45rem;}
.fbody p{margin-top:.5rem;font-size:1rem;}

/* ---- sector and value icon grids ---- */
.icongrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(2rem,4vw,3rem);}
.icongrid figure{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;}
.icongrid svg{width:44px;height:44px;color:var(--amber);}
.icongrid figcaption{font-weight:500;font-size:.86rem;line-height:1.25;color:var(--white);}
.light .icongrid svg,.light-2 .icongrid svg{color:var(--amber-dim);}
.light .icongrid figcaption,.light-2 .icongrid figcaption{color:var(--ink);}

.valuegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2rem,4vw,3rem);}
.value{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.6rem,3vw,2.2rem);border:1px solid var(--line-dark);}
.light .value,.light-2 .value{border-color:var(--line-light);}
.value svg{width:40px;height:40px;color:var(--amber);}
.light .value svg,.light-2 .value svg{color:var(--amber-dim);}
.value h3{margin:0;}
.value p{font-size:.98rem;}

/* ---- photo placeholders ----
   Each one is a live brief. Whoever takes the photo reads the box that the
   photo will sit in, so the shot is built for the slot rather than the other
   way round. Delete the class and drop in an <img> when the shot exists. */
.ph{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;text-align:center;padding:clamp(1.5rem,4vw,3rem);
  border:2px dashed var(--amber);background:rgba(255,189,89,.05);
  aspect-ratio:var(--ratio,16/9);
}
.ph svg{width:38px;height:38px;color:var(--amber);}
.ph b{font-weight:700;font-size:1rem;color:var(--amber);letter-spacing:-.01em;}
.ph span{font-size:.88rem;line-height:1.5;max-width:46ch;color:var(--on-dark);}
.light .ph span,.light-2 .ph span{color:var(--on-light);}
.ph em{font-style:normal;display:block;margin-top:.4rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dim);}

@media (max-width:900px){
  .icongrid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .statgrid{grid-template-columns:repeat(2,1fr);}
  .statgrid .cell:nth-child(2n){border-right:0;}
  .statgrid .cell:nth-child(-n+2){border-bottom:1px solid var(--line-dark);}
  .hstep{grid-template-columns:repeat(2,1fr);gap:1.75rem 0;}
  .hs:not(:last-child)::after{display:none;}
  .valuegrid{grid-template-columns:1fr;}
  .icongrid{grid-template-columns:repeat(2,1fr);}
  .fstep{grid-template-columns:44px 1fr;gap:1rem;}
  .fdot{flex-basis:44px;width:44px;height:44px;}
  .fdot svg{width:20px;height:20px;}
}

/* ---- two column hero ----
   The landing view was a full screen of black before anything lightened.
   The photo now sits beside the headline, and the stepper moved to a cream
   band directly below, so the page lifts immediately after the fold. */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.hero-grid img{width:100%;height:clamp(320px,44vh,540px);object-fit:cover;object-position:50% 46%;}
.hero .terr{margin-top:clamp(2rem,4vw,3rem);}

/* stepper on the cream band takes the darker gold so it stays legible */
.light .hdot{border-color:var(--amber-dim);color:var(--amber-dim);}
.light .hs > span:not(.hdot){color:var(--ink);}
.light .hs:not(:last-child)::after{border-color:var(--amber-dim);}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2rem;}
  .hero-grid img{height:clamp(220px,42vw,340px);}
}

/* ============================================================
   Lachlan's strip-back, 01/09/2026
   ============================================================ */

/* full height hero, photo behind, text over the top.
   The gradient is doing real work: the building is pale grey and white text
   would disappear on it without a screen behind. Darkest at the bottom where
   the type sits, lighter through the middle so the building still reads. */
.hero-full{
  position:relative;
  min-height:calc(100svh - 80px);
  display:flex;align-items:flex-end;
  background:var(--ink);overflow:hidden;
}
.hero-full > picture{display:contents;}
.hero-full img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
}
.hero-full::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.30) 32%,
    rgba(0,0,0,.55) 68%, rgba(0,0,0,.92) 100%);
}
.hero-full .wrap{
  position:relative;z-index:1;width:100%;
  padding-top:clamp(5rem,14vh,9rem);
  padding-bottom:clamp(3rem,8vh,5.5rem);
}
.hero-full h1{color:var(--white);text-shadow:0 2px 24px rgba(0,0,0,.5);}
.hero-full h1 em{font-style:normal;color:var(--amber);}
.hero-full .terr{
  margin-top:clamp(2rem,5vh,3.5rem);padding-top:1.4rem;
  border-top:1px solid var(--amber);
  font-weight:500;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);
}
.hero-full .cta{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap;}

/* On a phone the type block starts much higher up the image, so the screen
   has to start higher too or the headline lands on the building signage. */
@media (max-width:760px){
  .hero-full img{object-position:50% 26%;}
  .hero-full::after{
    background:linear-gradient(to bottom,
      rgba(0,0,0,.62) 0%, rgba(0,0,0,.32) 18%,
      rgba(0,0,0,.86) 42%, rgba(0,0,0,.95) 100%);
  }
  /* six country names is a lot of characters for a phone, so tighten the
     tracking rather than let it run to three lines */
  .hero-full .terr{font-size:.74rem;letter-spacing:.12em;line-height:1.9;}
}

/* a real photograph, as opposed to .ph which is the dashed placeholder */
.shot{margin:0;}
/* height:auto matters. The img carries width/height attributes to stop the page
   jumping while it loads, and without this the attribute height wins and
   aspect-ratio is ignored. */
.shot img{width:100%;height:auto;aspect-ratio:var(--ratio,16/9);object-fit:cover;display:block;}
.shot figcaption{
  margin-top:1rem;padding-left:.85rem;border-left:2px solid var(--amber);
  font-size:.88rem;line-height:1.5;max-width:52ch;color:var(--on-dark);
}
.light .shot figcaption,.light-2 .shot figcaption{color:var(--on-light);}

/* the flywheel on the about page */
.flywheel{width:100%;height:auto;}
.flywheel text{font-family:"Platform","Segoe UI",system-ui,sans-serif;}

/* two column block: text one side, diagram the other */
.split2{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,4vw,3.2rem);align-items:center;}
@media (max-width:900px){ .split2{grid-template-columns:1fr;} }

/* what we provide retailers */
.provide{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2.2rem);margin-top:clamp(2rem,4vw,3rem);}
.provide div{display:flex;flex-direction:column;gap:.9rem;}
.provide svg{width:38px;height:38px;color:var(--amber);}
.light .provide svg,.light-2 .provide svg{color:var(--amber-dim);}
.provide h3{margin:0;font-size:1.05rem;}
@media (max-width:820px){ .provide{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .provide{grid-template-columns:1fr;} }

/* "How we build your brand" sits on cream, but its stat band and cards stay
   black and dark grey. The .light rules further up would otherwise flip them
   to cream, so they are put back here. */
.dark-boxes .statgrid{background:var(--ink);border-color:var(--line-dark);}
.dark-boxes .statgrid .cell{border-right-color:var(--line-dark);}
.dark-boxes .statgrid svg{color:var(--amber);}
.dark-boxes .statgrid b{color:var(--amber);}
.dark-boxes .statgrid span{color:var(--on-dark);}
.dark-boxes .card{background:var(--ink-2);border-color:var(--line-dark);}
.dark-boxes .card h3{color:var(--white);}
.dark-boxes .card p{color:var(--on-dark);}
.dark-boxes .card .num{color:var(--amber);}

/* centres a heading over whatever sits beneath it. measure-tight caps the
   width, so it also needs the auto margins to actually sit in the middle. */
.centred{text-align:center;margin-left:auto;margin-right:auto;}

/* centres a heading over whatever sits beneath it. measure-tight caps the
   width, so it also needs the auto margins to actually sit in the middle. */
.centred{text-align:center;margin-left:auto;margin-right:auto;}

/* A single line on cream, sitting between two black sections. The line is
   what justifies the change of background: a photograph on cream looked like
   a mistake, a statement does not. It also stops the two black sections
   either side reading as one continuous block. */
.quoteband{padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:clamp(3.5rem,7vw,5.5rem);}
.quoteband p{
  font-weight:300;font-size:clamp(1.45rem,3.3vw,2.5rem);line-height:1.25;
  letter-spacing:-.018em;color:var(--ink);
  max-width:34ch;margin-inline:auto;text-align:center;
  /* balance stops the last line being a single orphaned word */
  text-wrap:balance;
}
.quoteband p em{font-style:normal;color:var(--amber-dim);}
.quoteband p.sub{
  font-weight:400;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.5;
  letter-spacing:0;color:var(--on-light);max-width:44ch;margin-top:1.9rem;
}
/* the two halves of the line, each with its own icon above it */
.qpair{display:flex;align-items:center;justify-content:center;
       gap:clamp(1.75rem,5vw,4rem);flex-wrap:wrap;}
.qpair > div{display:flex;flex-direction:column;align-items:center;gap:1.1rem;}
.qpair svg{width:clamp(42px,4.6vw,58px);height:clamp(42px,4.6vw,58px);color:var(--amber-dim);}
.qpair p{margin:0;max-width:none;}
.qdiv{width:1px;align-self:stretch;background:var(--line-light);margin-block:.4rem;}
@media (max-width:620px){ .qdiv{display:none;} }

/* The six countries under the three maps, centred, each carrying the same
   amber accent bar the map captions use. */
.terr-line{
  display:flex;flex-wrap:wrap;justify-content:space-evenly;
  gap:1rem clamp(1rem,2.5vw,2rem);
  margin-top:clamp(2.25rem,4vw,3.25rem);
}
@media (max-width:700px){ .terr-line{justify-content:center;} }
/* the groups exist only for the phone layout, so on a computer they collapse
   and all six names lay out as one row */
.terr-line .grp{display:contents;}
.terr-line span{
  font-weight:500;font-size:.95rem;line-height:1.2;
  padding-left:.85rem;border-left:2px solid var(--amber);color:var(--ink);
}
.dark .terr-line span,.dark-2 .terr-line span{color:var(--white);}

/* The maps stay left aligned in their grid cells, so the block of three ends
   short of the right hand edge of the column. Pull the country row in by that
   same amount, so it sits centred under the maps rather than under the full
   width of the section. 225px is the map max-width, 3 columns with 2 gaps. */
.ops.nocaps + .terr-line{
  padding-right:max(0px, calc((100% - 2 * clamp(1.5rem,4vw,3.5rem)) / 3 - 225px));
}