/* ===== Ambassador page only. Loaded by /ambassador/ and nothing else, so the home page is never affected. ===== */
.kick{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;margin-bottom:1rem}
.sec{padding:clamp(2.6rem,8vw,5.5rem) clamp(1rem,3vw,2rem);max-width:72rem;margin:auto}
.sec.tight{padding-block:clamp(1rem,3vw,1.6rem)}
.statement{font:500 clamp(1.7rem,5.2vw,3.6rem)/1.1 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1.2rem}
.body{max-width:46rem;font-size:1.05rem;line-height:1.65}

/* hero: cards 2 and 3 smaller than card 1 and pushed out to the edges (phone) */
.amb .b2,.amb .b3{width:min(42vw,185px);padding:.9rem;margin-bottom:3.6rem}
.amb .b2{margin-left:.6rem}
.amb .b3{margin-right:.6rem}
.amb .b2 b,.amb .b3 b{font-size:1.6rem}
.amb .b2 small,.amb .b3 small{font-size:.58rem}

/* vision: text, then a pair of overlapping images (phone) */
.blk{background:#1a2c63;color:#fff}
@media (prefers-color-scheme:dark){.blk{background:#000}}
.blk .in{max-width:72rem;margin:auto;padding:clamp(2.6rem,8vw,5.5rem) clamp(1rem,3vw,2rem)}
.blk a{color:#fff}
.vision .in{display:grid;grid-template-columns:1fr;gap:1rem}
.sech{font:700 clamp(1.5rem,4.6vw,2.4rem)/1.05 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin-bottom:1.2rem}
.vis{position:relative;aspect-ratio:1/1.1}
.vis .ph{position:absolute;aspect-ratio:3/4;box-shadow:0 0 0 1px var(--hair)}
.vis .va{left:0;bottom:0;width:62%}
.vis .vb{right:0;top:0;width:50%}
.s1 .im{background-image:var(--slot1,repeating-linear-gradient(155deg,rgba(255,255,255,.06) 0 2px,transparent 2px 20px),linear-gradient(155deg,#1a2c63,#0a1226))}
.s2 .im{background-image:var(--slot2,repeating-linear-gradient(25deg,rgba(255,255,255,.06) 0 2px,transparent 2px 20px),linear-gradient(205deg,#2b2466,#0a1226))}
.cap{position:absolute;left:.9rem;bottom:.8rem;z-index:1;color:#fff;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}

/* the work: two lists side by side on every screen, kept short */
.work{text-align:center}
.work h2{font:500 clamp(1.3rem,3.6vw,2.2rem)/1.1 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}
.work .body{margin:0 auto 1.2rem;font-size:1rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:46rem;margin:0 auto}
.cols h3{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;opacity:.85}
.dots{list-style:none;padding:0;font-size:.92rem;line-height:1.3}
.dots li+li::before{content:"\2022";display:block;line-height:.9;margin:.1rem 0;opacity:.7}

.ask{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);padding:1.1rem 0}
.ask h2{font:500 1rem/1.2 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.ask p{max-width:34rem;font-size:.92rem}

/* quote: full-width coloured band */
.qband{background:var(--fill);color:var(--on-fill);padding:clamp(3rem,10vw,7rem) clamp(1.2rem,4vw,3rem);text-align:center;box-shadow:0 0 0 1px var(--hair)}
.qband .mark{display:block;font:400 clamp(4rem,12vw,7rem)/.7 "Instrument Serif",Georgia,serif;opacity:.55}
.qband blockquote{font:400 clamp(1.9rem,5.6vw,3.8rem)/1.15 "Instrument Serif",Georgia,serif;max-width:48rem;margin:.6rem auto 0}
.qband cite{display:block;margin-top:1.2rem;text-transform:uppercase;letter-spacing:.09em;font-style:normal;font-size:.76rem;opacity:.9}

/* two cities side by side on every screen */
.maps{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.map{position:relative;aspect-ratio:3/4;background:var(--fill);color:var(--on-fill);overflow:hidden;box-shadow:0 0 0 1px var(--hair)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .t{position:absolute;left:.8rem;bottom:.8rem;z-index:1}
.map .t b{display:block;font:400 clamp(1.6rem,6vw,3rem)/1 "Instrument Serif",Georgia,serif}
.map .t span{display:block;font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem;line-height:1.35}

/* gallery: 2 columns on phone, one strip of six on PC */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem}
.gal .ph{aspect-ratio:3/4}
.gal .ph:nth-child(1) .im{background-image:repeating-linear-gradient(155deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(155deg,#1a2c63,#0a1226)}
.gal .ph:nth-child(2) .im{background-image:repeating-linear-gradient(25deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(205deg,#2b2466,#0a1226)}
.gal .ph:nth-child(3) .im{background-image:repeating-linear-gradient(155deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(155deg,#243b73,#101820)}
.gal .ph:nth-child(4) .im{background-image:repeating-linear-gradient(25deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(205deg,#101820,#26306b)}
.gal .ph:nth-child(5) .im{background-image:repeating-linear-gradient(155deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(155deg,#3a2f78,#0a1226)}
.gal .ph:nth-child(6) .im{background-image:repeating-linear-gradient(25deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(205deg,#1a2c63,#151a2e)}

@media (min-width:900px){
  .dots{font-size:1.05rem}
  .map{aspect-ratio:4/3}
  .maps{gap:1.2rem}
  .map .t{left:1.2rem;bottom:1.1rem}
  .map .t span{font-size:.72rem}
}

/* ===== PC (900px and up) ===== */
@media (min-width:900px){
  .kick{display:none}
  .blk .in{max-width:120rem;padding-inline:3vw}

  /* vision: big white headline left, paragraph right, always black */
  .vision .in{grid-template-columns:1.45fr 1fr;gap:5vw;align-items:start;padding-block:clamp(5rem,9vw,9rem)}
  .statement{font:700 clamp(3rem,5.2vw,6.4rem)/1.04 Archivo,Arial,sans-serif;letter-spacing:0;margin:0}
  .vision .body{max-width:none;font-size:clamp(1.05rem,1.3vw,1.5rem);line-height:1.55;padding-top:.6vw}

  /* two images: left one lower, right one higher, slight overlap; follows the light/dark theme */
  .sec.imgs{max-width:none;padding:clamp(3rem,6vw,6rem) 3vw clamp(5rem,9vw,9rem)}
  .vis{width:min(58vw,1200px);margin:0 auto;aspect-ratio:1/.79}
  .vis .ph{aspect-ratio:4/5;width:52.8%}
  .vis .va{left:0;bottom:0;right:auto;top:auto;z-index:1}
  .vis .vb{right:0;top:0;left:auto;bottom:auto;z-index:2}

  /* amenities-style: centred big heading, centred line, two dotted columns, always black */
  .work .in{max-width:120rem;padding-block:clamp(5rem,9vw,9rem)}
  .work h2{font:700 clamp(3rem,4.8vw,5.6rem)/1 Archivo,Arial,sans-serif;letter-spacing:0;margin-bottom:clamp(1.6rem,2.4vw,2.6rem)}
  .work .body{max-width:56rem;margin:0 auto;font-size:clamp(1.1rem,1.35vw,1.5rem);line-height:1.5}
  .cols{max-width:56rem;margin:clamp(3.5rem,8vw,9rem) auto 0;gap:2rem}
  .cols h3{font-size:.8rem;margin-bottom:1.2rem}
  .dots{font-size:clamp(.95rem,1.05vw,1.15rem);line-height:1.3}
  .dots li+li::before{margin:.7rem 0;line-height:1}

  /* headquarters: theme-coloured heading, then the two maps */
  .sech{font:700 clamp(3rem,4.8vw,5.6rem)/1 Archivo,Arial,sans-serif;letter-spacing:0;text-align:center;margin-bottom:clamp(2rem,3vw,3.2rem)}

  /* gallery: full-width strip of six squares, no gaps, no label */
  .sec.galsec{max-width:none;padding:0}
  .galsec .kick{display:none}
  .gal{grid-template-columns:repeat(6,1fr);gap:0}
  .gal .ph{aspect-ratio:1/1}
}

/* phone: division 1 higher; divisions 2 and 3 smaller, closer vertically, further apart sideways */
@media (max-width:899px){
  .amb .b1{margin-bottom:1.4rem}
  .amb .b2,.amb .b3{width:min(36vw,150px);padding:.8rem}
  .amb .b2{margin-left:.3rem;margin-bottom:-6.5rem}
  .amb .b3{margin-right:.3rem;margin-bottom:3rem}
  .amb .b2 b,.amb .b3 b{font-size:1.4rem}
  .amb .b2 small,.amb .b3 small{font-size:.52rem}
}