/* Sounding Wild · Across Continents site mockup (desktop first, 10 Oct 2026).
   Same look as the live page: Brandbook palette, Bricolage Grotesque. Shared by every page in site/. */
:root {
  --vh: 1vh;
  --orange: #EE5212; --blue: #0946E2; --brown: #581806; --peach: #FFD9C4; --ground: #FFF1E8;
  --ink: #1F1819; --ink-soft: #5a4540; --line: rgba(88,24,6,.22); --white: #fff;
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --head: 76px; --bar: 52px;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
html { background: var(--brown) } /* iPhone bounce above the header / below the footer shows brown, not a pale gap */
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.55 var(--font); -webkit-font-smoothing: antialiased }
img, video, iframe { max-width: 100% }
a { color: inherit }
h1, h2, h3, p { margin: 0 }
h2 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 400; line-height: 1.06; color: var(--blue); text-wrap: balance }
h3 { font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--brown) }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 32px }
section { padding-block: clamp(72px, 9vw, 128px) }
.kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; display: block }
.lead { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.38; max-width: 36ch }
.more { display: inline-flex; gap: 8px; align-items: center; font-size: 18px; font-weight: 600; color: var(--blue); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px }
.more:hover { color: var(--orange) }
/* Buttons: one pill shape for the whole site. Primary = orange with off-white text; .ghost = outlined in the text colour. */
.btn { display: inline-block; font: 600 17px var(--font); text-decoration: none; padding: 12px 28px; border-radius: 999px; background: var(--orange); color: var(--ground); white-space: nowrap; border: 2px solid transparent; cursor: pointer }
.btn:hover { background: var(--brown); color: var(--ground) }
.btn.ghost { background: transparent; border-color: currentColor; color: inherit }
.btn.ghost:hover { background: var(--ground); color: var(--brown); border-color: var(--ground) }
.btn.light { background: var(--white); color: var(--brown) }
.btn.light:hover { background: var(--ground) }
.btn.orange { background: var(--orange); color: var(--white) }
.btn.orange:hover { background: var(--brown) }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px }
.b-brown { background: var(--brown); color: var(--ground) } .b-brown h2 { color: var(--ground) } .b-brown .kicker { color: var(--peach) }
.b-blue { background: var(--blue); color: var(--ground) } .b-blue h2 { color: var(--ground) } .b-blue .kicker { color: var(--peach) }
.b-peach { background: var(--peach) }
.b-orange { background: var(--orange); color: var(--white) } .b-orange h2 { color: var(--white) }

/* the mockup note: which page this is, not part of the site */
.mocknote { background: var(--ink); color: var(--ground); font-size: 13px; padding: 7px 16px; display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: space-between }
.mocknote b { color: var(--peach); font-weight: 600 }

/* site header, as on soundingwild.com: swift logo, the website sound, Let's talk and the menu button */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ground); color: var(--brown); padding: 8px 14px }
.skip:focus { left: 8px }
.site { position: sticky; top: 0; z-index: 50; background: var(--brown); color: var(--ground); height: var(--head) }
.site .wrap { height: 100%; display: flex; align-items: center; gap: 24px; max-width: 1320px }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; color: var(--ground) }
.logo img { width: 46px; height: auto; display: block }
.logo span { display: grid; line-height: 1.12; font-size: 19px; letter-spacing: .02em }
.logo small { font-size: 15px; letter-spacing: 0; opacity: .9 }
.hsound { display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: auto }
.hsound .play { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--ground); cursor: pointer; padding: 0; border-radius: 50% }
.hsound .play:hover { background: rgba(255,241,232,.14) }
.hsound svg { width: 16px; height: 18px; fill: currentColor }
.hsound .i-pause { display: none } .hsound .play.on .i-play { display: none } .hsound .play.on .i-pause { display: inline }
.hsound .lbl { display: grid; line-height: 1.15; font-size: 13px }
.hsound .lbl b { font-weight: 600; font-size: 14px; max-width: 30ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hsound .t { opacity: .8; font-variant-numeric: tabular-nums }
.site .talk { flex: none; background: var(--ground); color: var(--brown); padding: 10px 22px; font-size: 16px }
.site .talk:hover { background: var(--orange); color: var(--ground) }
.site .hsound + .talk { margin-left: 0 } .site .logo + .talk { margin-left: auto }
.menu-btn { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ground); cursor: pointer; display: grid; place-content: center; gap: 5px }
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--brown); border-radius: 2px }
.menu-btn:hover { background: var(--peach) }
.menu { position: fixed; inset: 0; z-index: 90; background: rgba(9,70,226,.45) }
.menu .panel { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: 18px; width: min(560px, calc(100% - 36px)); max-height: calc(100% - 36px); overflow: auto; background: var(--brown); color: var(--ground); padding: 34px 36px 36px; box-shadow: 0 24px 60px rgba(31,24,25,.35) }
.menu ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 2px }
.menu li a { display: block; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.35; text-decoration: none; color: var(--ground) }
.menu li a:hover, .menu li a[aria-current] { color: var(--orange) }
.menu .grp { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--peach); opacity: .85; margin-top: 16px }
.menu .close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--orange); color: var(--ground); font-size: 28px; line-height: 1; cursor: pointer }
.menu .btn { background: var(--ground); color: var(--brown) }
html.menu-open { overflow: hidden }

/* the Across Continents page bar: the project's own pages, and tickets */
.pbar { position: sticky; top: var(--head); z-index: 40; background: var(--ground); border-bottom: 1px solid var(--line); height: var(--bar) }
.pbar .wrap { height: 100%; display: flex; align-items: center; gap: 6px; max-width: 1320px }
.pbar .name { font-weight: 600; color: var(--brown); margin-right: 14px; white-space: nowrap; font-size: 16px; text-decoration: none }
.pbar nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0 }
.pbar nav::-webkit-scrollbar { display: none }
.pbar nav a { flex: none; text-decoration: none; font-size: 15px; padding: 6px 14px; border-radius: 999px; color: var(--brown); white-space: nowrap }
.pbar nav a:hover { background: var(--peach) }
.pbar nav a[aria-current] { background: var(--brown); color: var(--ground) }
.pbar .btn { margin-left: auto; padding: 8px 20px; font-size: 15px; background: var(--orange); color: var(--white) }
.pbar .btn:hover { background: var(--brown) }

/* footer: the type-only logotype, the studio's groups, ways to stay close */
.foot { background: var(--brown); color: var(--ground); padding-block: 64px 40px; font-size: 16px }
.foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px }
.foot .word { font-size: 30px; letter-spacing: .04em; line-height: 1; margin-bottom: 12px }
.foot .brand p:not(.word) { opacity: .9; max-width: 30ch }
.foot .tag { margin-top: 10px; color: var(--peach) }
.foot h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--peach); font-weight: 400 }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.foot a { text-decoration: none; color: var(--ground) } .foot a:hover { color: var(--orange) }
.foot .mail { margin: 16px 0 12px }
.foot .btn.ghost { border-color: var(--ground); color: var(--ground) }
.foot .fine { grid-column: 1 / -1; border-top: 1px solid rgba(255,241,232,.2); padding-top: 18px; font-size: 14px; opacity: .85 }

/* sub-page opening */
.phead { padding-block: clamp(64px, 8vw, 110px) clamp(40px, 5vw, 64px) }
.phead h1 { font-size: clamp(48px, 7vw, 92px); font-weight: 200; line-height: .5; padding-block: .12em .32em; font-variation-settings: "opsz" 12; color: var(--brown); margin: 0 0 18px; text-wrap: balance } /* overlapping title, as Brand Partnerships */
.phead .lead { color: var(--ink-soft) }

@media (max-width: 1040px) {
  .hsound .lbl { display: none }
  .foot .wrap { grid-template-columns: 1fr 1fr }
}
@media (max-width: 760px) {
  :root { --head: 64px }
  body { font-size: 17px }
  .wrap { padding-inline: 20px }
  .pbar .btn { padding: 7px 14px; font-size: 14px; flex: none }
  .pbar nav { flex: 1; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent) }
  .hide-s { display: none }
  .pbar nav { padding-right: 28px } .pbar nav a { padding-block: 9px; min-height: 40px; display: inline-flex; align-items: center }
  .pbar nav::after { content: ""; flex: none; width: 48px }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center }
  .foot { padding-block: 44px 28px }
  .foot .wrap > div:last-of-type ul { display: flex; flex-wrap: wrap; gap: 6px 18px }
  .ttl, .phead h1 { line-height: .6 } /* titles still overlap on phones, a touch less so three-line titles stay readable */
  .foot .wrap { grid-template-columns: 1fr 1fr; gap: 28px 20px }
  .foot .brand, .foot .wrap > div:last-of-type, .foot .fine { grid-column: 1 / -1 }
  .logo span { font-size: 16px } .logo small { font-size: 13px } .logo img { width: 36px }
  .site .wrap { gap: 10px }
  .site .talk { display: none }
  .menu-btn { width: 44px; height: 44px }
  .menu .panel { padding: 28px 24px }
  .pbar .name { display: none }
}

/* ===== Studio pages (home, about, services, contact, FAQ, Wonder): shared building blocks ===== */
main { display: block }
/* Opening: a full-bleed photo with the light, overlapping title of the Brandbook (Carlie's style: title over the photo) */
.hero { position: relative; min-height: clamp(420px, 62vw, 760px); display: grid; align-items: start; overflow: hidden; background: var(--brown); color: var(--ground); padding: 0 }
.hero > img, .hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,24,25,.38), rgba(31,24,25,0) 45%) }
.hero .wrap { position: relative; z-index: 1; width: 100%; text-align: center; padding-top: clamp(16px, 2vw, 28px) }
.ttl { font-size: clamp(64px, 11.5vw, 176px); font-weight: 200; line-height: .5; padding-block: .12em .32em; /* Wix/Brandbook title: lines overlap (line-height = half the size) */ letter-spacing: -.01em; font-variation-settings: "opsz" 12; color: var(--peach); margin: 0; text-wrap: balance }
.ttl.ground { color: var(--ground) }
.hero .sub { margin-top: clamp(140px, 22vw, 300px); font-size: clamp(24px, 3vw, 38px); line-height: 1.25; color: var(--ground); max-width: 22ch; margin-inline: auto }
/* Coloured text blocks */
.band { padding-block: clamp(64px, 8vw, 112px) }
.band .wrap { max-width: 980px }
.band h2.k { font-size: clamp(26px, 2.8vw, 38px); font-weight: 600; line-height: 1.2; color: inherit; max-width: 30ch; margin-bottom: 22px }
.band p + p { margin-top: 14px }
.band .lede { font-size: clamp(19px, 1.6vw, 22px); max-width: 62ch }
.b-peach { color: var(--brown) } .b-peach h2.k { color: var(--blue) }
.ticks { margin: 18px 0 28px; padding-left: 1.2em; display: grid; gap: 6px; max-width: 62ch }
.ticks b { font-weight: 600 }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px }
.b-blue .btn.ghost, .b-brown .btn.ghost, .b-orange .btn.ghost { color: var(--ground) }
/* A photo band with one of the hand-drawn icons over it (Brandbook icons in movement / stamps on photography) */
.stamp { position: relative; height: clamp(260px, 34vw, 520px); overflow: hidden; padding: 0; background: var(--brown) }
.stamp > img.ph, .stamp > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.stamp .icon { position: absolute; left: 50%; top: 50%; width: clamp(120px, 16vw, 230px); transform: translate(-50%, -50%) }
.stamp .icon.right { left: 72% }
.stamp figcaption, .cap { font-size: 13px; color: var(--ink-soft); margin-top: 8px }
.stamp figcaption { position: absolute; left: 16px; bottom: 12px; color: var(--ground); opacity: .9; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.5) }
/* Two columns: words and a picture */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center }
.split + .split { margin-top: clamp(40px, 5vw, 72px) }
.split.flip > :first-child { order: 2 }
.split img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover }
.split h3 { color: inherit; margin-bottom: 12px }
/* Cards (services, works) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.card { display: grid; align-content: start; justify-items: center; text-align: center; gap: 14px; padding: 40px 26px 34px; text-decoration: none; min-height: 100% }
.card img { width: 120px; height: 120px; object-fit: contain }
.card b { font-size: 22px; font-weight: 400; line-height: 1.25 }
.card span { font-size: 16px; line-height: 1.45; opacity: .92 }
.card .go { font-weight: 600; font-size: 15px; opacity: 1; margin-top: 4px }
.card.peach { background: var(--peach); color: var(--orange) } .card.peach span { color: var(--brown) }
.card.blue { background: var(--blue); color: var(--orange) } .card.blue span { color: var(--ground) }
.card.ink { background: var(--ink); color: var(--orange) } .card.ink span { color: var(--ground) }
.card:hover { transform: translateY(-3px) } .card { transition: transform .2s }
.quote { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; font-style: italic; max-width: 38ch }
.quote cite { display: block; font-style: normal; font-size: 16px; margin-top: 12px; opacity: .85 }
.logos { display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: center }
.logos img { height: 44px; width: auto; object-fit: contain }
/* Still frame + play: a video loads only when tapped (no autoplaying players) */
.vid { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; display: block; width: 100% }
.vid img { width: 100%; height: 100%; object-fit: cover; display: block }
.vid button { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(31,24,25,.18); cursor: pointer; display: grid; place-items: center }
.vid button span { width: 74px; height: 74px; border-radius: 50%; background: var(--orange); display: grid; place-items: center }
.vid button span::after { content: ""; border-left: 22px solid var(--ground); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px }
.vid button:hover span { background: var(--brown) }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.vid + .cap { margin-top: 8px }
/* Sections still waiting for Axel's text are hidden on the live site (remove data-placeholder when the text goes in) */
[data-placeholder] { display: none !important }
.placeholder { border: 2px dashed var(--orange); padding: 22px 26px; font-style: italic; color: var(--ink-soft); background: rgba(255,241,232,.6) }
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr }
  .split { grid-template-columns: 1fr }
  .split.flip > :first-child { order: 0 }
  .stamp .icon.right { left: 50% }
}


/* Journey map on phones: the map keeps its tall shape (sized by the screen width), so give its box room for the legend,
   the whole route down to Cape Town and the "Start the journey" button below it. */
@media (max-width: 760px) {
  .mapbox, div:has(> sw-journey-map[hide-heading]) { height: calc(100vw * 1.5 + 190px) !important; max-height: none !important }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

@supports (height: 1svh) { :root { --vh: 1svh } }
/* Embedded in soundingwild.com (?embed=1): no header, page bar or footer of our own; Wix shows its own. --vh is set from the Wix window. */
html.embed { --head: 0px; --bar: 0px }
html.embed body { overflow: hidden; display: flow-root }
/* &scroll=1: the page scrolls inside a window-sized Wix frame (browser-native pinning); no second scrollbar beside Wix's. */
html.embed.scroll body { overflow: visible }
html.embed.scroll { scrollbar-width: none }
html.embed.scroll::-webkit-scrollbar { display: none }