/* Finn Graphics, concept 07. Structure and motion after gallery-play.be, in Finn's own type, colours and work. */
@font-face { font-family: "FNGX Archivo"; src: url("assets/fonts/archivo-var-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "FNGX Archivo"; src: url("assets/fonts/archivo-var-italic-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

:root {
  --ink: #0f1c1d;        /* dark sections: black pulled toward the logo teal */
  --ink-2: #182a2b;
  --mist: #e3e7e2;       /* light sections */
  --paper: #ece5d8;      /* type on dark, light buttons */
  --accent: #214b56;     /* the FNGX logo teal */
  --accent-lite: #94c6d1;
  --mute-d: rgba(236,229,216,.62);
  --mute-l: #55625f;
  --line-d: rgba(236,229,216,.14);
  --line-l: rgba(15,28,29,.16);
  --f: "FNGX Archivo", "Archivo", system-ui, sans-serif;
  --gut: clamp(18px, 3.4vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 500 16px/1.55 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent-lite); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-lite); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 12px; }
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; }

/* display type: Archivo opened up wide and set bold in capitals (the reference uses a wide grotesk; this is a touch wider and rounder) */
.hero-h, .big-h, .stack, .mid-h, .huge, .contact-h, .faq-h, .statement-text, .pj-title, .pj-cta h2 {
  font-family: var(--f); font-stretch: 118%; font-weight: 720; text-transform: uppercase; letter-spacing: -.012em; line-height: .9; margin: 0; }
.ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; } .ln > span { display: inline-block; }

/* buttons: wide, flat, square-ish like the reference */
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; height: 48px; padding: 0 28px; border-radius: 3px; font: 500 15px var(--f); text-decoration: none; cursor: pointer; border: 0; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.btn-light { background: var(--paper); color: var(--ink); } .btn-light:hover { background: var(--accent-lite); }
.btn-line { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(236,229,216,.5); } .btn-line:hover { box-shadow: inset 0 0 0 1px var(--paper); background: rgba(236,229,216,.06); }
.btn-dark { background: var(--ink); color: var(--paper); } .btn-dark:hover { background: var(--accent); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; } .btns.c { justify-content: center; }

/* header: logo left, Menu right; difference blend keeps both readable over light and dark */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: space-between; align-items: flex-start; padding: 22px var(--gut); pointer-events: none; }
.hd > * { pointer-events: auto; }
.hd-logo img { width: clamp(104px, 8.4vw, 132px); height: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
.hd-btn { transition: color .35s; } .hd.on-light .hd-btn { color: var(--ink); }
.hd-btn { background: none; border: 0; color: #ece5d8; font: 500 16px var(--f); padding: 4px 0; cursor: pointer; }
.hd-menu { display: grid; justify-items: end; }
.menu[hidden] { display: none; }
.menu { display: grid; justify-items: end; gap: 6px; margin-top: 12px; padding: 14px 16px; border-radius: 4px; background: rgba(15,28,29,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.menu a { font: 500 16px var(--f); text-decoration: none; color: var(--paper); padding: 2px 0; transition: color .3s; } .menu a:hover { color: var(--accent-lite); }

/* hero: full screen, stays put while the page slides up over it */
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; z-index: 0; }
.hero-media, .hero-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-still { transform-origin: 60% 40%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,28,29,.45) 0%, rgba(15,28,29,.05) 30%, rgba(15,28,29,.15) 55%, rgba(15,28,29,.82) 100%); }
.hero-in { position: absolute; inset: auto var(--gut) clamp(28px, 6vh, 64px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: 30px; align-items: end; }
.hero-h { font-size: clamp(40px, 5.2vw, 84px); }
.hero-side { display: grid; gap: 18px; justify-items: start; padding-bottom: 6px; }
.hero-side p { margin: 0; font-size: 15px; color: rgba(236,229,216,.86); max-width: 34ch; }
.cover { position: relative; z-index: 1; background: var(--ink); }

/* club logo strip */
.logos { background: var(--ink); border-bottom: 1px solid var(--line-d); overflow: hidden; }
.logos-track { display: flex; align-items: center; gap: clamp(60px, 8vw, 130px); width: max-content; padding: 30px 0; animation: logos 34s linear infinite; }
.logos-track img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.logos-track span { font: 720 20px/1 var(--f); font-stretch: 110%; text-transform: uppercase; white-space: nowrap; opacity: .9; }
@keyframes logos { to { transform: translateX(-50%); } }

/* statement over a black and #ece5d8 match photo */
.statement { position: relative; min-height: 115vh; display: grid; align-items: center; overflow: hidden; }
.statement-bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.62); }
.statement::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(15,28,29,0) 26%, rgba(15,28,29,0) 70%, var(--ink) 100%); }
.statement-in { position: relative; z-index: 1; padding: 0 var(--gut); display: grid; gap: 40px; justify-items: start; }
.statement-text { font-size: clamp(26px, 3.1vw, 50px); line-height: .98; text-align: justify; text-align-last: left; max-width: 1500px; }
[data-words] .w { display: inline-block; }

/* work: stacked words, then a 3D wall of projects */
.work { position: relative; padding: 18vh 0 12vh; overflow: hidden; }
.contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contours path { fill: none; stroke: rgba(236,229,216,.07); stroke-width: 1; }
.stack { position: relative; display: grid; justify-items: center; text-align: center; font-size: clamp(64px, 10.4vw, 168px); line-height: .88; }
.wall { position: relative; height: 150vh; margin-top: -26vh; perspective: 1500px; perspective-origin: 50% 40%; pointer-events: none; }
.wall-plane { position: absolute; left: 50%; top: 0; width: 1500px; height: 1700px; margin-left: -750px; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-26deg) rotateZ(4deg); }
.tile { position: absolute; display: block; pointer-events: auto; text-decoration: none; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.6); }
.tile-cap { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: flex; justify-content: space-between; gap: 10px; font: 500 12px var(--f); color: var(--mute-d); }
.tile-cap b { font-weight: 500; color: var(--paper); }
.tile:hover { transform: translateZ(60px) !important; }
.tile:hover .tile-cap em { color: var(--accent-lite); }
.tile-cap em { font-style: normal; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; transition: color .3s; }
.work-foot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; padding: 6vh var(--gut) 0; }
.work-foot p { margin: 0; max-width: 34ch; font-size: 14px; color: var(--mute-d); }

/* services: light, with three cards that open up on hover */
.services { background: var(--mist); color: var(--ink); padding: 20vh var(--gut) 18vh; display: grid; justify-items: center; text-align: center; }
.big-h { font-size: clamp(54px, 8.8vw, 150px); }
.services-sub { margin: 36px 0 54px; font-size: 13px; color: var(--mute-l); max-width: 30ch; }
.aud { width: 100%; max-width: 1500px; display: flex; gap: 6px; height: min(64vh, 620px); margin-bottom: 70px; text-align: left; }
.aud-card { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 10px; color: var(--paper); text-decoration: none; transition: flex .8s var(--ease); }
.aud-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.8); transform: scale(1.12); transition: filter .8s var(--ease), transform .8s var(--ease); }
.aud-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,28,29,.1), rgba(15,28,29,.72)); }
.aud-card h3 { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; padding: 0 20px; text-align: center; font: 720 clamp(18px, 1.7vw, 26px)/1 var(--f); font-stretch: 118%; text-transform: uppercase; transition: top .8s var(--ease), translate .8s var(--ease); }
.aud-in { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; opacity: 0; translate: 0 14px; transition: opacity .45s, translate .6s var(--ease); }
.aud-in p { margin: 0 0 10px; font-size: 14px; max-width: 44ch; }
.aud-in ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
@media (hover: hover) and (min-width: 901px) {
  .aud:hover .aud-card:hover { flex: 2.1; }
  .aud-card:hover img { filter: blur(0) brightness(.9); transform: scale(1); }
  .aud-card:hover h3 { top: 50%; translate: 0 -50%; }
  .aud-card:hover .aud-in { opacity: 1; translate: 0 0; transition-delay: .2s; }
}

/* clubs + carousel */
.clubs, .reviews { position: relative; padding: 18vh 0 14vh; overflow: hidden; text-align: center; }
.arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .arcs circle { fill: none; stroke: rgba(236,229,216,.07); }
.mid-h { position: relative; font-size: clamp(26px, 2.3vw, 34px); margin-bottom: 34px; }
.tabs { position: relative; display: inline-flex; gap: 12px; margin-bottom: 40px; }
.tabs button { min-width: 200px; height: 44px; border-radius: 3px; border: 0; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(236,229,216,.45); font: 500 14px var(--f); cursor: pointer; transition: background .35s, color .35s; }
.tabs button[aria-selected="true"] { background: rgba(236,229,216,.28); box-shadow: none; }
.car { position: relative; }
.car-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gut); cursor: grab; }
.car-track::-webkit-scrollbar { display: none; }
.car-track.drag { cursor: grabbing; scroll-snap-type: none; }
.car-card { flex: 0 0 clamp(220px, 19vw, 300px); scroll-snap-align: center; text-align: left; text-decoration: none; color: var(--paper); }
.car-card .img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--ink-2); }
.car-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .8s; pointer-events: none; }
.car-card:hover img { transform: scale(1.05); }
.car-card .cc { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 13px; }
.car-card .cc small { color: var(--mute-d); font-size: 11px; text-align: right; }
.car-dots { display: flex; justify-content: center; gap: 6px; margin-top: 26px; }
.car-dots button { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: rgba(236,229,216,.3); cursor: pointer; transition: background .3s, transform .3s; }
.car-dots button[aria-current="true"] { background: var(--paper); transform: scale(1.5); }
.about-text { position: relative; max-width: 30em; margin: 22vh auto 54px; padding: 0 var(--gut); font: 500 clamp(19px, 1.8vw, 27px)/1.35 var(--f); text-align: justify; text-align-last: left; }
.about-text .w { color: rgba(236,229,216,.22); transition: color .25s; }

/* reviews */
.reviews { padding-top: 6vh; }
.rev { flex: 0 0 clamp(280px, 30vw, 420px); scroll-snap-align: center; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; border-radius: 4px; background: var(--ink-2); text-align: left; }
.rev .stars { display: flex; gap: 3px; color: #f1b83a; font-size: 14px; } .rev .stars i { font-style: normal; } .rev .stars i.off { color: rgba(236,229,216,.2); }
.rev blockquote { margin: 0; flex: 1; font: 500 18px/1.5 var(--f); }
.rev.sample blockquote { color: var(--mute-d); }
.rev b { font-weight: 500; font-size: 14px; } .rev small { display: block; color: var(--mute-d); font-size: 12px; }
.rev-note { position: relative; margin: 26px auto 0; font-size: 12px; color: var(--mute-d); }

/* split call to action */
.cta { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.cta-img { overflow: hidden; } .cta-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.cta-side { position: relative; overflow: hidden; background: var(--mist); color: var(--ink); display: grid; align-content: center; justify-items: start; gap: 40px; padding: 10vh var(--gut); }
.huge { position: relative; font-size: clamp(54px, 6.4vw, 112px); }
.huge span { display: inline-block; }
.blob { position: absolute; right: -14%; bottom: -24%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--accent-lite), var(--accent) 45%, transparent 70%); filter: blur(60px); opacity: .55; animation: blob 14s ease-in-out infinite alternate; }
@keyframes blob { to { transform: translate(-12%, -10%) scale(1.15); } }

/* contact */
.contact { padding: 16vh var(--gut) 18vh; }
.contact-h { font-size: clamp(44px, 8.2vw, 150px); margin-bottom: 9vh; }
.contact-h .ln:first-child > span { display: block; text-align: justify; text-align-last: justify; }
.form { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; padding: 30px; border-radius: 8px; background: rgba(236,229,216,.05); box-shadow: inset 0 0 0 1px var(--line-d); }
.form label { display: grid; gap: 6px; font-size: 13px; color: var(--mute-d); }
.form .wide { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(236,229,216,.3); background: transparent; color: var(--paper); font: 500 16px var(--f); padding: 8px 0; border-radius: 0; transition: border-color .3s; resize: vertical; }
.form select option { color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--accent-lite); }
.form .btn { width: 100%; }
.form-note { margin: -8px 0 0; font-size: 12px; color: var(--mute-d); text-align: center; }
.form-note.err { color: #f4a68b; }

/* FAQ */
.faq { background: var(--mist); color: var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding: 16vh var(--gut); }
.faq-h { font-size: clamp(56px, 6.4vw, 104px); }
.faq-list { border-top: 1px solid var(--line-l); }
.qa { border-bottom: 1px solid var(--line-l); }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; border: 0; background: none; color: var(--ink); font: 500 16px var(--f); text-align: left; cursor: pointer; }
.qa button i { font-style: normal; font-size: 20px; line-height: 1; transition: rotate .45s var(--ease); }
.qa.open button i { rotate: 45deg; }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.qa.open .qa-a { grid-template-rows: 1fr; }
.qa-a > div { overflow: hidden; } .qa-a p { margin: 0 0 22px; max-width: 60ch; color: var(--mute-l); }

/* footer */
.ft { position: relative; z-index: 1; background: var(--ink); padding: 12vh var(--gut) 26px; display: grid; justify-items: center; gap: 12vh; border-top: 1px solid var(--line-d); }
.ft-logo { width: clamp(200px, 18vw, 300px); }
.ft-row { width: 100%; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--mute-d); }
.ft-links { display: flex; gap: 26px; } .ft-links a { text-decoration: none; } .ft-links a:hover { color: var(--paper); }

/* project page */
.pj-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.pj-hero .wash { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(70px) saturate(1.2) brightness(.5); }
.pj-hero .cover-img { position: absolute; right: 8vw; top: 50%; height: 74vh; width: auto; max-width: 46vw; object-fit: contain; translate: 0 -50%; border-radius: 3px; box-shadow: 0 40px 90px -20px rgba(0,0,0,.7); }
.pj-hero.big .cover-img { inset: 0; right: 0; top: 0; translate: none; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; box-shadow: none; }
.pj-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,28,29,.35), transparent 35%, rgba(15,28,29,.85)); pointer-events: none; }
.pj-hero-in { position: absolute; z-index: 1; left: var(--gut); right: var(--gut); bottom: clamp(28px, 7vh, 70px); display: grid; gap: 26px; justify-items: start; }
.pj-tag { font-size: 13px; color: var(--accent-lite); }
.pj-title { font-size: clamp(44px, 6.6vw, 112px); max-width: 12ch; }
.pj-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.pj-facts { padding: 14vh var(--gut) 10vh; display: grid; gap: 34px; align-content: start; }
.pj-facts dl { margin: 0; display: grid; gap: 26px; }
.pj-facts dt { font-size: 12px; color: var(--mute-d); margin-bottom: 4px; }
.pj-facts dd { margin: 0; font-size: 15px; }
.pj-brief { font: 500 clamp(17px, 1.3vw, 20px)/1.55 var(--f); max-width: 46ch; margin: 0; }
.pj-lists { display: grid; gap: 26px; }
.pj-lists h3 { margin: 0 0 10px; font: 500 12px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-d); }
.pj-lists ol, .pj-lists ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.pj-side { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink-2); }
.pj-side img { width: 100%; height: 100%; object-fit: cover; }
.pj-side.poster img { object-fit: contain; padding: 8vh 6vw; }
.pj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pj-grid figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.pj-grid img { width: 100%; height: 100%; object-fit: cover; }
.pj-cta { padding: 18vh var(--gut); display: grid; justify-items: center; gap: 44px; text-align: center; }
.pj-cta h2 { font-size: clamp(36px, 4.6vw, 76px); max-width: 16ch; }
.pj-next { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px var(--gut); border-top: 1px solid var(--line-d); text-decoration: none; }
.pj-next span { font-size: 13px; color: var(--mute-d); } .pj-next b { font: 720 clamp(22px, 2.4vw, 36px)/1 var(--f); font-stretch: 118%; text-transform: uppercase; transition: color .3s; }
.pj-next:hover b { color: var(--accent-lite); }

/* phones and small tablets */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 22px; }
  .work-foot { grid-template-columns: 1fr; }
  .wall { height: 110vh; margin-top: -14vh; }
  .wall-plane { width: 900px; height: 1200px; margin-left: -450px; }
  .aud { flex-direction: column; height: auto; gap: 8px; }
  .aud-card { flex: none; height: 420px; }
  .aud-card img { filter: brightness(.75); transform: none; }
  .aud-card h3 { top: 26px; translate: none; text-align: left; padding: 0 22px; }
  .aud-in { opacity: 1; translate: none; }
  .cta { grid-template-columns: 1fr; } .cta-img { height: 60vh; }
  .form { grid-template-columns: 1fr; padding: 22px; }
  .faq { grid-template-columns: 1fr; }
  .tabs button { min-width: 0; padding: 0 22px; }
  .pj-split { grid-template-columns: 1fr; }
  .pj-side { position: relative; height: 70vh; }
  .pj-grid { grid-template-columns: 1fr 1fr; }
  .pj-hero .cover-img { right: 50%; translate: 50% -62%; height: auto; max-height: 56vh; max-width: 80vw; }
  .ft-row { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track, .blob { animation: none; }
  * { transition-duration: .01ms !important; }
}
@media (max-width: 900px) {
  .statement-text, .about-text { text-align: left; }
  .statement-text { font-size: clamp(24px, 7vw, 34px); }
  .contact-h .ln:first-child > span { text-align: left; text-align-last: left; }
  .aud-card::after { background: linear-gradient(180deg, rgba(15,28,29,.55), rgba(15,28,29,.35) 40%, rgba(15,28,29,.9)); }
}

/* ===================== round 2 ===================== */
@font-face { font-family: "FNGX Caveat"; src: url("assets/fonts/caveat-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* header: logo top left (back to top), a centred pill of links that folds into Menu as you scroll */
.hd { align-items: center; }
.nv { position: fixed; top: 16px; left: 50%; translate: -50% 0; display: flex; align-items: center; padding: 5px 5px 5px 8px; border-radius: 999px; pointer-events: auto;
  background: rgba(236,229,216,.86); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(15,28,29,.08), 0 12px 32px -14px rgba(0,0,0,.45); }
.nv-links { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); max-width: 520px; padding: 0 22px 0 14px; overflow: hidden; white-space: nowrap; opacity: 1;
  transition: max-width .6s cubic-bezier(.65, 0, .35, 1), padding .6s cubic-bezier(.65, 0, .35, 1), opacity .35s .15s; }
.nv.mini .nv-links { max-width: 0; padding: 0; opacity: 0; transition: max-width .6s cubic-bezier(.65, 0, .35, 1), padding .6s cubic-bezier(.65, 0, .35, 1), opacity .2s; }
.nv-l { display: inline-flex; padding: 10px 0; color: #55625f; font: 500 15px/1 var(--f); text-decoration: none; transition: color .3s; }
.nv-l:hover, .nv-l:focus-visible { color: var(--ink); }
.nv-l i, .mw i { display: inline-block; font-style: normal; translate: 0 var(--dy, 0); transition: translate .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * 18ms); }
.nv-menu { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 14px var(--f); cursor: pointer; transition: background .3s; }
.nv-menu:hover { background: var(--accent); }
.nv-burger { position: relative; width: 16px; height: 10px; }
.nv-burger i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.nv-burger i:first-child { top: 1px; } .nv-burger i:last-child { top: 7.5px; }
.nv-menu.open .nv-burger i:first-child { top: 4.25px; transform: rotate(45deg); } .nv-menu.open .nv-burger i:last-child { top: 4.25px; transform: rotate(-45deg); }
.hd-logo { position: relative; z-index: 2; }
/* the menu: a grey card that drops from the pill, huge condensed words, a handwritten nudge at Close */
.menu, .menu[hidden] { all: unset; }
.menu { position: fixed; top: 70px; left: 50%; translate: -50% 0; width: min(460px, calc(100vw - 24px)); box-sizing: border-box; padding: 14px 26px 30px; border-radius: 6px; background: #d3d9d3; color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); display: grid; pointer-events: auto; z-index: 60; }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0 -12px 16px 0; }
.menu-note { display: inline-flex; align-items: center; gap: 4px; font: 600 19px "FNGX Caveat", cursive; rotate: -4deg; }
.menu-note svg { width: 30px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-close { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1.5px solid var(--accent); border-radius: 3px; background: var(--paper); color: var(--ink); font: 500 15px var(--f); cursor: pointer; }
.menu-close span { font-size: 22px; font-weight: 300; line-height: 1; }
.menu .mw { display: block; overflow: hidden; color: var(--ink); text-decoration: none; font: 700 clamp(48px, 6.4vw, 70px)/.9 var(--f); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; transition: color .3s; }
.menu .mw:hover, .menu .mw:focus-visible { color: var(--accent); }
@media (max-width: 760px) { .nv-links { display: none; } .nv { left: auto; right: var(--gut); translate: none; top: 14px; padding: 5px; } .menu { top: 66px; } }

/* the wall holds still (pinned) while the plane of projects drifts up through it */
.work { padding-bottom: 8vh; }
.wall { height: 300vh; margin-top: 4vh; perspective: none; pointer-events: auto; }
.wall-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1500px; perspective-origin: 50% 35%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.wall-plane { top: 0; transform: rotateX(14deg) rotateY(-16deg) rotateZ(3deg); }
@media (max-width: 900px) { .wall { height: 220vh; margin-top: 0; } }

/* carousels drift on their own */
.car-track { scroll-snap-type: none; }
.car-card { scroll-snap-align: none; }

/* contact: back to the call booking */
.contact-h { font-size: clamp(40px, 7vw, 128px); margin-bottom: 26px; }
.contact-h .ln:first-child > span { display: inline-block; text-align: left; text-align-last: auto; }
.contact-sub { margin: 0 0 7vh; max-width: 44ch; color: var(--mute-d); font-size: 16px; } .contact-sub a { color: var(--accent-lite); }
.book { max-width: 1240px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--accent); color: var(--paper); box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); }
.bk { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(230px, 300px); min-height: 540px; }
.bk-info, .bk-cal { border-right: 1px solid rgba(236,229,216,.14); }
.bk-info { padding: 30px 26px; }
.bk-av { width: 46px; height: 46px; padding: 8px; border-radius: 50%; background: var(--paper); object-fit: contain; }
.bk-who { margin: 14px 0 4px; color: rgba(236,229,216,.7); font-size: 15px; }
.bk-info h3 { margin: 0 0 12px; font: 720 26px/1 var(--f); font-stretch: 112%; text-transform: uppercase; }
.bk-desc { margin: 0 0 20px; color: rgba(236,229,216,.88); font-size: 15px; }
.bk-meta { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bk-meta li { padding: 7px 12px; border-radius: 999px; background: rgba(236,229,216,.12); font-size: 13px; }
.bk-alt { margin: 0; color: rgba(236,229,216,.7); font-size: 13px; line-height: 1.7; } .bk-alt a { color: var(--paper); }
.bk-cal { padding: 30px 26px; }
.bk-cal header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.bk-month { margin: 0; font: 500 22px var(--f); } .bk-month span { color: rgba(236,229,216,.6); font-weight: 300; }
.bk-nav { background: none; border: 0; color: rgba(236,229,216,.7); font-size: 24px; padding: 2px 12px; cursor: pointer; } .bk-nav:hover { color: #ece5d8; }
.bk-wk, .bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bk-wk span { text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(236,229,216,.75); padding-bottom: 10px; }
.bk-days > * { aspect-ratio: 1; display: grid; place-items: center; position: relative; border-radius: 10px; font-size: 15px; }
.bk-off { color: rgba(236,229,216,.35); }
.bk-day { border: 0; background: rgba(236,229,216,.14); color: #ece5d8; font: 500 15px var(--f); cursor: pointer; transition: background .2s, transform .2s; }
.bk-day:hover { background: rgba(236,229,216,.26); transform: scale(1.04); } .bk-day.sel { background: var(--paper); color: var(--accent); }
.bk-days i { position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.bk-side { padding: 26px 22px; overflow: auto; max-height: 620px; }
.bk-side header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.bk-side header b { font-weight: 600; font-size: 17px; } .bk-side header b span { color: rgba(236,229,216,.6); font-weight: 300; }
.bk-fmt { display: flex; border: 1px solid rgba(236,229,216,.25); border-radius: 9px; overflow: hidden; }
.bk-fmt button { background: none; border: 0; color: rgba(236,229,216,.7); padding: 5px 10px; font: 500 13px var(--f); cursor: pointer; } .bk-fmt button[aria-pressed="true"] { background: rgba(236,229,216,.2); color: #ece5d8; }
.bk-slots { display: grid; gap: 10px; } .bk-slot { display: flex; gap: 8px; }
.bk-time { flex: 1; height: 46px; border-radius: 10px; border: 1px solid rgba(236,229,216,.28); background: rgba(0,0,0,.14); color: #ece5d8; font: 500 15px var(--f); cursor: pointer; transition: border-color .2s; }
.bk-time:hover { border-color: rgba(236,229,216,.6); }
.bk-slot.open .bk-time { flex: .5; background: rgba(236,229,216,.2); border-color: transparent; }
.bk-go, .bk-confirm { border: 0; border-radius: 10px; background: var(--paper); color: var(--accent); font: 600 14px var(--f); cursor: pointer; }
.bk-go { flex: .5; } .bk-confirm { height: 46px; margin-top: 4px; }
.bk-empty { color: rgba(236,229,216,.7); }
.bk-form { display: grid; gap: 12px; } .bk-form label { display: grid; gap: 6px; font-size: 12px; color: rgba(236,229,216,.8); }
.bk-form input, .bk-form select, .bk-form textarea { background: rgba(0,0,0,.16); border: 1px solid rgba(236,229,216,.28); border-radius: 10px; color: #ece5d8; padding: 10px 12px; font: 500 14px var(--f); }
.bk-form select option { color: var(--ink); }
.bk-back { justify-self: start; background: none; border: 0; color: #ece5d8; font: 500 13px var(--f); padding: 0 0 6px; cursor: pointer; text-align: left; }
.bk-fine { margin: 0; font-size: 12px; color: rgba(236,229,216,.65); }
.bk-done h4 { margin: 10px 0 8px; font: 720 22px var(--f); font-stretch: 112%; text-transform: uppercase; } .bk-done p { color: rgba(236,229,216,.85); font-size: 14px; }
.bk-again { margin-top: 10px; background: none; border: 1px solid rgba(236,229,216,.35); color: #ece5d8; border-radius: 999px; padding: 8px 16px; font: 500 13px var(--f); cursor: pointer; }
@media (max-width: 1000px) { .bk { grid-template-columns: 1fr; } .bk-info, .bk-cal { border-right: 0; border-bottom: 1px solid rgba(236,229,216,.14); } .bk-side { max-height: none; } }
@media (max-width: 600px) {
  .book { border-radius: 16px; } .bk-info { padding: 22px 18px; } .bk-cal { padding: 20px 12px; } .bk-wk, .bk-days { gap: 5px; } .bk-wk span { font-size: 10px; letter-spacing: .04em; }
  .bk-side { padding: 18px 14px 20px; } .bk-slots { grid-template-columns: repeat(3, 1fr); gap: 8px; } .bk-slot.open { grid-column: 1 / -1; } .bk-time { height: 44px; font-size: 14px; }
}

/* footer: one last ask, the links, the wordmark full width */
.ft { display: block; gap: 0; padding: 16vh var(--gut) 24px; overflow: hidden; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; padding-bottom: 9vh; border-bottom: 1px solid var(--line-d); }
.ft-h { margin: 0; font: 720 clamp(44px, 6.4vw, 112px)/.9 var(--f); font-stretch: 118%; text-transform: uppercase; letter-spacing: -.012em; }
.ft-ask { display: grid; justify-items: end; gap: 18px; }
.ft-mail { font: 500 clamp(18px, 1.6vw, 24px) var(--f); text-decoration: none; border-bottom: 1px solid rgba(236,229,216,.35); padding-bottom: 4px; transition: color .3s, border-color .3s; }
.ft-mail:hover { color: var(--accent-lite); border-color: var(--accent-lite); }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 7vh 0 10vh; }
.ft-cols h4 { margin: 0 0 14px; font: 500 11px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--mute-d); }
.ft-cols a, .ft-cols span { display: block; margin-bottom: 8px; color: var(--paper); text-decoration: none; font-size: 15px; }
.ft-cols a:hover { color: var(--accent-lite); }
.ft-mark { display: block; width: 100%; height: auto; margin: 0 auto 4vh; }
.ft-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--mute-d); }
.ft-up { color: var(--paper); text-decoration: none; } .ft-up:hover { color: var(--accent-lite); }
@media (max-width: 760px) { .ft-top { grid-template-columns: 1fr; } .ft-ask { justify-items: start; } .ft-cols { grid-template-columns: 1fr 1fr; } }
.work { overflow: clip; }

/* ===================== round 3: the reference's colours + Finn's light blue as small accents, Lexend type ===================== */
@font-face { font-family: "FNGX Lexend Exa"; src: url("assets/fonts/lexend-exa-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "FNGX Lexend"; src: url("assets/fonts/lexend-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --ink: #1e1e1e; --ink-2: #2a2a2a; --mist: #e0e0e0; --paper: #ece5d8;
  --blue: #94c6d1;                       /* Finn's light blue, used sparingly */
  --accent: var(--blue); --accent-lite: var(--blue);
  --mute-d: rgba(236,229,216,.6); --mute-l: #5c5c5c; --line-d: rgba(236,229,216,.12); --line-l: rgba(30,30,30,.15);
  --f: "FNGX Lexend", system-ui, sans-serif; --fd: "FNGX Lexend Exa", "FNGX Lexend", sans-serif;
}
body { background: var(--ink); color: var(--paper); font: 500 16px/1.6 var(--f); letter-spacing: -.005em; }
::selection { background: var(--blue); color: var(--ink); }

/* headings: wide geometric capitals, pulled tight */
.hero-h, .big-h, .stack, .mid-h, .huge, .contact-h, .faq-h, .statement-text, .pj-title, .pj-cta h2, .ft-h, .bk-info h3, .bk-done h4, .aud-card h3, .pj-next b {
  font-family: var(--fd); font-stretch: normal; font-weight: 700; text-transform: uppercase; letter-spacing: -.06em; line-height: .96; }
.hero-h { font-size: clamp(40px, 5.2vw, 86px); }
.statement-text { font-weight: 600; font-size: clamp(22px, 2.7vw, 46px); line-height: 1.04; letter-spacing: -.055em; }
.mid-h { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.05em; }
.big-h { font-size: clamp(46px, 7.6vw, 132px); }
.huge { font-size: clamp(48px, 5.8vw, 104px); }
.contact-h { font-size: clamp(38px, 6.4vw, 118px); }
.faq-h { font-size: clamp(52px, 6vw, 100px); }
.ft-h { font-size: clamp(40px, 5.6vw, 98px); }
.aud-card h3 { font-size: clamp(16px, 1.4vw, 22px); letter-spacing: -.04em; }
.bk-info h3 { font-size: 22px; letter-spacing: -.05em; }
.btn { font: 500 15px var(--f); letter-spacing: 0; }

/* colour: #ece5d8 and near-black buttons like the reference; the blue only on hover and small details */
.btn-light { background: #ece5d8; color: var(--ink); } .btn-light:hover { background: var(--blue); color: var(--ink); }
.btn-line { color: #ece5d8; box-shadow: inset 0 0 0 1px rgba(236,229,216,.55); } .btn-line:hover { box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); background: transparent; }
.btn-dark { background: var(--ink); color: #ece5d8; } .btn-dark:hover { background: #000; color: var(--blue); }
.nv { background: rgba(236,229,216,.88); }
.nv-l { color: #6a6a6a; } .nv-l:hover, .nv-l:focus-visible { color: var(--ink); }
.nv-menu { background: var(--ink); color: #ece5d8; } .nv-menu:hover { background: #000; color: var(--blue); }
.menu { background: #e0e0e0; }
.menu-close { border-color: var(--ink); }
.menu .mw:hover, .menu .mw:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 5px; text-underline-offset: 2px; }
.logos-track img { opacity: .85; }
.arcs circle { stroke: rgba(236,229,216,.07); }
.tabs button { box-shadow: inset 0 0 0 1px rgba(236,229,216,.4); } .tabs button[aria-selected="true"] { background: rgba(236,229,216,.22); }
.faq, .services, .cta-side { background: var(--mist); }
.qa button i { color: var(--ink); }
.qa.open button { color: var(--ink); } .qa.open button i { color: var(--ink); }
.blob { background: radial-gradient(circle at 40% 40%, var(--blue), rgba(148,198,209,.4) 45%, transparent 70%); opacity: .6; }

/* clubs: straight after the statement, a slider like the reference's player slider */
.clubs { padding: 16vh 0 12vh; }
.sl { position: relative; }
.sl-view { overflow: hidden; padding: 0 var(--gut); touch-action: pan-y; cursor: grab; user-select: none; }
.sl-view:active { cursor: grabbing; }
.sl-track { display: flex; gap: 10px; will-change: transform; }
.sl .car-card { flex: 0 0 clamp(220px, 19vw, 290px); }
.sl .car-card .img { border-radius: 3px; }
.sl .car-card .cc span { font-weight: 400; }
.sl .car-card:hover .cc span { color: var(--blue); }
.sl-dots { display: flex; justify-content: center; gap: 7px; margin-top: 28px; }
.sl-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(236,229,216,.28); cursor: pointer; transition: background .3s, transform .3s; }
.sl-dots button[aria-current="true"] { background: #ece5d8; transform: scale(1.35); }
.clubs-note { margin: 22px 0 0; font-size: 13px; color: var(--mute-d); }

/* about + reviews in one section */
.reviews { padding: 18vh 0 14vh; }
.rv-about { position: relative; max-width: 1040px; margin: 0 auto 18vh; padding: 0 var(--gut); text-align: left; }
.about-text { margin: 0 0 44px; padding: 0; max-width: none; font: 500 clamp(22px, 2.3vw, 36px)/1.3 var(--f); letter-spacing: -.02em; text-align: left; text-align-last: auto; }
.about-text .w { color: rgba(236,229,216,.2); }
.rv-about .btns { justify-content: flex-start; }
.sl-rev .rev { flex: 0 0 clamp(280px, 30vw, 420px); background: var(--ink-2); }
.rev .stars { color: var(--blue); }
.rev blockquote { font: 500 18px/1.5 var(--f); }

/* contact: "rather write" made big and clear */
.contact-sub { margin: 0 0 8vh; max-width: 900px; }
.contact-sub p { margin: 0 0 10px; color: var(--mute-d); font-size: 17px; }
.contact-sub .rather { color: #ece5d8; font: 500 clamp(22px, 2.3vw, 34px)/1.3 var(--f); letter-spacing: -.02em; }
.contact-sub .rather a { color: #ece5d8; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .3s; }
.contact-sub .rather a:hover { color: var(--blue); }
.book { background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-d); }
.bk-info, .bk-cal { border-color: var(--line-d) !important; }
.bk-day.sel { background: #ece5d8; color: var(--ink); }
.bk-days i { background: var(--blue); }
.bk-go, .bk-confirm { background: #ece5d8; color: var(--ink); } .bk-go:hover, .bk-confirm:hover { background: var(--blue); }
.bk-alt a, .contact-sub a { color: #ece5d8; }

/* footer: the ask, tidy columns, then the wordmark across the whole bottom, cut off by the edge of the page */
.ft { padding: 16vh var(--gut) 0; background: var(--ink); }
.ft-top { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 40px; align-items: end; padding-bottom: 10vh; }
.ft-ask { justify-items: start; gap: 22px; }
.ft-ask p { margin: 0; font-size: 17px; color: var(--mute-d); max-width: 32ch; }
.ft-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 7vh 0 8vh; border-bottom: 1px solid var(--line-d); }
.ft-cols h4 { font: 500 12px var(--f); letter-spacing: .08em; color: var(--mute-d); text-transform: uppercase; }
.ft-cols a, .ft-cols span { font-size: 16px; font-weight: 300; }
.ft-cols a:hover { color: var(--blue); }
.ft-base { padding: 22px 0; font-size: 13px; color: var(--mute-d); }
.ft-up:hover { color: var(--blue); }
.ft-mark { margin: 2vh calc(var(--gut) * -1) 0; height: 19vw; overflow: hidden; }
.ft-mark img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .ft-top { grid-template-columns: 1fr; }
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .rv-about { margin-bottom: 12vh; }
  .statement-text { font-size: clamp(22px, 6.4vw, 30px); }
}
.ft > .ft-top, .ft > .ft-cols, .ft > .ft-base { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.ft-cols span span { display: inline; margin: 0; }
.contact-sub .rather a { white-space: nowrap; }

/* ===================== round 4: Pennybridge-style type (Barlow Condensed + Barlow) and more handwriting ===================== */
@font-face { font-family: "FNGX Barlow Condensed"; src: url("assets/fonts/barlow-condensed-wght-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "FNGX Barlow Condensed"; src: url("assets/fonts/barlow-condensed-wght-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "FNGX Barlow Condensed"; src: url("assets/fonts/barlow-condensed-ital-wght-1-600.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "FNGX Barlow"; src: url("assets/fonts/barlow-wght-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "FNGX Barlow"; src: url("assets/fonts/barlow-wght-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FNGX Barlow"; src: url("assets/fonts/barlow-wght-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "FNGX Barlow"; src: url("assets/fonts/barlow-wght-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root { --f: "FNGX Barlow", "Barlow", system-ui, sans-serif; --fd: "FNGX Barlow Condensed", "Barlow Condensed", sans-serif; --hand: "FNGX Caveat", "Caveat", cursive; }
body { font: 500 17px/1.55 var(--f); letter-spacing: 0; }

/* headings: semi-bold condensed capitals, like Pennybridge's Herokid Condensed */
.hero-h, .big-h, .stack, .mid-h, .huge, .contact-h, .faq-h, .statement-text, .pj-title, .pj-cta h2, .ft-h, .bk-info h3, .bk-done h4, .aud-card h3, .pj-next b {
  font-family: var(--fd); font-weight: 600; letter-spacing: -.005em; line-height: .9; text-transform: uppercase; }
.hero-h { font-size: clamp(54px, 7.4vw, 124px); }
.statement-text { font-weight: 600; font-size: clamp(30px, 3.9vw, 66px); line-height: .98; letter-spacing: 0; }
.mid-h { font-size: clamp(30px, 2.8vw, 44px); letter-spacing: .005em; }
.big-h { font-size: clamp(60px, 10vw, 176px); }
.huge { font-size: clamp(64px, 8vw, 140px); }
.contact-h { font-size: clamp(52px, 8.8vw, 160px); }
.faq-h { font-size: clamp(70px, 8vw, 132px); }
.ft-h { font-size: clamp(54px, 7.4vw, 128px); }
.aud-card h3 { font-size: clamp(22px, 2vw, 30px); letter-spacing: .01em; }
.bk-info h3 { font-size: 30px; } .bk-done h4 { font-size: 28px; }
.pj-title { font-size: clamp(60px, 8.6vw, 148px); }
.pj-cta h2 { font-size: clamp(46px, 6vw, 100px); }
.pj-next b { font-size: clamp(30px, 3.2vw, 48px); }
.about-text { font: 500 clamp(24px, 2.4vw, 38px)/1.28 var(--f); letter-spacing: -.01em; }
.contact-sub .rather { font: 500 clamp(24px, 2.4vw, 36px)/1.25 var(--f); letter-spacing: -.01em; }
.btn { font: 500 16px var(--f); }
.nv-l { font: 500 16px/1 var(--f); }
.nv-menu, .menu-close { font-family: var(--f); font-weight: 500; }
.menu .mw { font: 700 clamp(52px, 6.8vw, 76px)/.9 var(--fd); letter-spacing: 0; }
.tile-cap, .car-card .cc, .rev, .ft-cols, .ft-base, .bk, .form { font-family: var(--f); }

/* one word in each big heading is written by hand, in Finn's light blue */
.hand { display: inline-block; font-family: var(--hand); font-style: normal; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.12em; line-height: .7; color: var(--blue); rotate: -4deg; transform-origin: 30% 70%; padding: 0 .06em; }
.services .hand, .cta-side .hand { color: #2d6c7b; }

/* handwritten notes with hand-drawn arrows */
.note { display: inline-flex; align-items: center; gap: 6px; font: 600 clamp(20px, 1.6vw, 24px)/1 var(--hand); color: var(--blue); rotate: -4deg; white-space: nowrap; }
.note .arw { width: 34px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.note .arw.down { width: 18px; height: 34px; }
.note .arw.back { transform: scaleX(-1); }
.n-hero { justify-self: start; margin-bottom: -4px; rotate: -6deg; }
.n-clubs { display: flex; width: max-content; margin: -14px auto 18px; rotate: 3deg; }
.n-aud { display: flex; width: max-content; align-self: start; margin: 0 0 10px 4%; color: var(--ink); rotate: -3deg; }
.cta-go { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.n-cta { color: var(--ink); rotate: -5deg; }
.n-book { display: flex; width: max-content; margin: -3vh 0 14px auto; rotate: 4deg; padding-right: 6%; }
.faq-l { display: grid; align-content: start; gap: 18px; }
.n-faq { color: var(--ink); justify-self: start; rotate: -5deg; }
.n-ft { display: flex; width: max-content; margin: 0 0 6px auto; padding-right: 4%; rotate: -4deg; }
.services .note, .cta-side .note, .faq .note { color: var(--ink); }
.menu-note { font-family: var(--hand); }
@media (max-width: 900px) { .n-book { margin: 0 0 12px; } .n-ft { margin-left: 0; } .hand { font-size: 1.06em; } }
.note { font-size: clamp(22px, 1.9vw, 30px); }
.note .arw { width: 40px; height: 18px; } .note .arw.down { width: 20px; height: 38px; }

/* ===================== round 5 ===================== */
/* text font: light and slightly wide, like the reference's body copy (Archivo Light, opened up) */
:root { --f: "FNGX Archivo", "Archivo", system-ui, sans-serif; }
body { font: 500 16px/1.6 var(--f); font-stretch: 108%; letter-spacing: .005em; }
.about-text, .contact-sub .rather, .rev blockquote { font-family: var(--f); font-stretch: 106%; font-weight: 300; }
.contact-sub .rather { font-weight: 400; }
.tile-cap, .car-card .cc, .rev, .ft-cols, .ft-base, .bk, .form, .nv-l, .nv-menu, .menu-close { font-family: var(--f); font-stretch: 106%; }
.nv-l { font-weight: 400; font-size: 15px; } .nv-menu { font-weight: 400; }

/* one button shape everywhere: slim, wide, barely rounded, like the reference */
.btn { min-width: 240px; height: 42px; padding: 0 26px; border-radius: 3px; gap: 10px; font: 500 14px var(--f); font-stretch: 106%; letter-spacing: .01em; }
.btn .g-ico { width: 16px; height: 16px; flex: none; }
.tabs { gap: 10px; flex-wrap: wrap; justify-content: center; }
.tabs button { min-width: 0; height: 42px; padding: 0 22px; border-radius: 3px; font: 500 14px var(--f); font-stretch: 106%; }
.bk-time, .bk-go, .bk-confirm, .bk-day, .bk-form input, .bk-form select, .bk-form textarea { border-radius: 3px; }
.bk-again { border-radius: 3px; }
.qa button { font-family: var(--f); font-stretch: 106%; }

/* hero laid out like the reference: big headline bottom left, a narrow column bottom right with a small justified line over a full-width button */
.hero-in { inset: auto var(--gut) clamp(30px, 5.5vh, 60px); grid-template-columns: minmax(0, 1fr) clamp(240px, 19vw, 300px); align-items: end; }
.hero-h { font-size: clamp(54px, 6.8vw, 116px); }
.hero-side { gap: 26px; padding-bottom: 4px; }
.hero-side p { font-size: 13px; line-height: 1.5; text-align: justify; color: rgba(236,229,216,.9); max-width: none; }
.hero-side .btn { width: 100%; min-width: 0; }
@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; } .hero-side { max-width: 320px; } .hero-side p { text-align: left; } }

/* work + reviews */
.clubs .mid-h { max-width: none; }
.mid-link { color: inherit; text-decoration: none; transition: color .3s; } .mid-link:hover { color: var(--blue); }
.rev-btns { margin-top: 30px; }

/* footer: links in small spaced capitals that scramble on hover, then FNGX drawn full width */
.ft { padding: 0; background: var(--ink); border-top: 1px solid var(--line-d); overflow: hidden; }
.gf-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px 28px; padding: clamp(80px, 12vh, 150px) var(--gut) 0; }
.gf-fade { opacity: 0; translate: 0 12px; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .1, 1); }
.gf-fade:nth-child(2) { transition-delay: .08s; } .gf-fade:nth-child(3) { transition-delay: .16s; } .gf-fade:nth-child(4) { transition-delay: .24s; }
.ft.in .gf-fade { opacity: 1; translate: 0 0; }
.gf-ask { display: grid; justify-items: start; gap: 18px; }
.gf-lede { margin: 0; font: 600 clamp(34px, 3.4vw, 54px)/.92 var(--fd); text-transform: uppercase; }
.gf-mail { position: relative; display: inline-flex; align-items: center; gap: .55em; font-size: clamp(17px, 1.3vw, 20px); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid rgba(236,229,216,.3); }
.gf-mail svg { width: .8em; height: .8em; fill: none; stroke: currentColor; stroke-width: 1.3; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.gf-mail:hover { color: var(--blue); border-color: var(--blue); } .gf-mail:hover svg { translate: 5px 0; }
.ft h4 { margin: 0 0 16px; font: 500 11px var(--f); font-stretch: 110%; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-d); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gf-link { position: relative; display: inline-flex; align-items: center; gap: .6em; padding: 1px 0; color: #ece5d8; text-decoration: none; font: 500 13px var(--f); font-stretch: 110%; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.gf-link::after { content: ""; position: absolute; left: 0; right: 1.6em; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.gf-link:hover::after, .gf-link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.gf-link svg { width: .8em; height: .8em; fill: none; stroke: currentColor; stroke-width: 1.3; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.gf-link:hover { color: var(--blue); } .gf-link:hover svg { translate: 5px 0; }
.gf-copy p { margin: 0 0 6px; font-size: 14px; color: rgba(236,229,216,.8); }
.gf-copy .gf-up { margin-top: 14px; }
/* the wordmark: full width, bottom cut off by the edge of the page */
.gf-mark { padding: clamp(40px, 7vh, 80px) var(--gut) 0; margin-bottom: -4.5vw; }
.gf-svg { display: block; width: 100%; height: auto; overflow: visible; fill: #ece5d8; }
.gf-rise { transition: transform 1.15s cubic-bezier(.16, .84, .2, 1) var(--d, 0ms); transform: translateY(112px); }
.ft.in .gf-rise { transform: none; }
.gf-g { cursor: pointer; }
.gf-flip { transform-box: fill-box; transform-origin: 50% 50%; }
.gf-flip.is-flip { animation: gfflip .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes gfflip { 45% { transform: scaleY(-1); } }
.gf-half { transition: transform .45s cubic-bezier(.2, .9, .25, 1.15); }
.gf-g:hover .gf-up { transform: translate(5px, -1.5px); } .gf-g:hover .gf-dn { transform: translate(-5px, 1.5px); }
.gf-sh polygon { fill: var(--blue); }
@media (max-width: 900px) { .gf-top { grid-template-columns: 1fr 1fr; } .gf-ask { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .gf-fade, .gf-rise { opacity: 1 !important; translate: none !important; transform: none !important; } }
.ft { display: block !important; } .gf-top, .gf-mark { width: 100%; }

/* ===================== round 6 ===================== */
/* header + hero sit inside a centred frame, like the reference (about 15% in from each side on a wide screen) */
:root { --edge: var(--gut); }
@media (min-width: 1000px) { :root { --edge: clamp(48px, 13vw, 300px); } }
.hd { padding: 22px var(--edge); }
.hero-in { left: var(--edge); right: var(--edge); }
/* nav on the right: links then Menu in one evenly padded pill; scrolling folds the links away cleanly */
.nv { left: auto; right: var(--edge); translate: none; top: 18px; padding: 4px; gap: 0; }
.nv-links { padding: 0 20px 0 18px; }
.nv-menu { height: 38px; padding: 0 16px 0 18px; }
.nv-links { transition: max-width .7s cubic-bezier(.76, 0, .24, 1), padding .7s cubic-bezier(.76, 0, .24, 1), opacity .4s .2s, transform .7s cubic-bezier(.76, 0, .24, 1); }
.nv.mini .nv-links { transform: translateX(14px); transition: max-width .7s cubic-bezier(.76, 0, .24, 1), padding .7s cubic-bezier(.76, 0, .24, 1), opacity .25s, transform .5s cubic-bezier(.76, 0, .24, 1); }
.menu { left: auto; right: var(--edge); translate: none; top: 66px; }
@media (max-width: 760px) {
  .nv { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; right: var(--gut); top: 16px; }
  .nv-menu { box-shadow: 0 6px 20px -8px rgba(0,0,0,.5); }
  .menu { right: 12px; top: 64px; }
}
/* the bird in the footer */
.gf-bird { cursor: pointer; }
.gf-bird-art path { fill: var(--blue); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; }
.gf-bird-art .bw path { fill: #6fa6b3; }
.gf-bird-art g:not(.bw) > path:last-of-type { fill: var(--ink); stroke: none; }

/* ===================== round 7 ===================== */
/* small outlined map of South East Queensland behind the plain dark sections */
.clubs, .reviews, .contact { position: relative; }
.map-bg { position: absolute; z-index: 0; width: clamp(220px, 22vw, 340px); pointer-events: none; opacity: .9; }
.map-bg svg { width: 100%; height: auto; display: block; overflow: visible; }
.map-bg .m-coast { fill: none; stroke: rgba(236,229,216,.16); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map-bg .m-border { fill: none; stroke: rgba(236,229,216,.12); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.map-bg .m-dot { fill: rgba(236,229,216,.35); }
.map-bg .m-home { fill: var(--blue); }
.map-bg .m-lbl { fill: rgba(236,229,216,.32); font: 500 26px var(--f); letter-spacing: .14em; }
.map-r { right: var(--gut); top: 6vh; }
.map-l { left: var(--gut); bottom: 6vh; }
.map-r2 { right: var(--gut); top: 10vh; }
.clubs > *:not(.map-bg), .reviews > *:not(.map-bg), .contact > *:not(.map-bg) { position: relative; z-index: 1; }
@media (max-width: 900px) { .map-bg { width: 160px; opacity: .6; } }

/* reviews: an animated testimonial */
.reviews { padding: 18vh var(--edge) 12vh; text-align: left; }
.tm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; max-width: 1300px; margin: 0 auto; }
.tm-side { display: grid; justify-items: start; gap: 22px; }
.tm-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(236,229,216,.08); box-shadow: inset 0 0 0 1px rgba(236,229,216,.12); color: #ece5d8; font: 500 13px var(--f); text-decoration: none; transition: background .3s; }
.tm-badge:hover { background: rgba(236,229,216,.14); }
.tm-badge .g-ico { width: 15px; height: 15px; }
.tm-h { margin: 0; font: 600 clamp(54px, 6.4vw, 108px)/.9 var(--fd); text-transform: uppercase; }
.tm-h a { color: inherit; text-decoration: none; }
.tm-sub { margin: 0; max-width: 38ch; color: var(--mute-d); font-size: 16px; }
.tm-dots { display: flex; gap: 8px; margin: 6px 0 10px; }
.tm-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(236,229,216,.25); cursor: pointer; transition: width .45s var(--ease), background .3s; }
.tm-dots button[aria-current="true"] { width: 30px; background: #ece5d8; }
.tm-stage { position: relative; padding: 26px; }
.tm-ghost { position: absolute; border-radius: 10px; background: rgba(236,229,216,.04); box-shadow: inset 0 0 0 1px rgba(236,229,216,.07); }
.tm-ghost.g1 { inset: 0 0 52px 52px; } .tm-ghost.g2 { inset: 52px 52px 0 0; }
.tm-card { position: relative; margin: 0; padding: clamp(28px, 3vw, 40px); border-radius: 10px; background: #262626; box-shadow: inset 0 0 0 1px rgba(236,229,216,.08), 0 40px 80px -40px rgba(0,0,0,.8); min-height: 300px; display: flex; flex-direction: column; }
.tm-stars { display: flex; gap: 4px; color: var(--blue); font-size: 17px; } .tm-stars i { font-style: normal; } .tm-stars i.off { color: rgba(236,229,216,.2); }
.tm-q { position: absolute; top: 18px; right: 28px; font: 600 110px/1 var(--fd); color: rgba(236,229,216,.08); }
.tm-text { margin: 22px 0 28px; flex: 1; font: 500 clamp(18px, 1.5vw, 22px)/1.55 var(--f); font-stretch: 104%; color: #ece5d8; }
.tm-card.sample .tm-text { color: rgba(236,229,216,.7); }
.tm-who { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(236,229,216,.1); }
.tm-av { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--blue); color: var(--ink); font: 600 17px var(--fd); }
.tm-av img { width: 100%; height: 100%; object-fit: cover; }
.tm-name { display: block; font-weight: 500; font-size: 15px; } .tm-role { display: block; color: var(--mute-d); font-size: 13px; }
.tm-side .btn { width: auto; }
.reviews .rev-note { text-align: center; }
.tm-logos { max-width: 1300px; margin: 12vh auto 0; text-align: center; }
.tm-logos p { margin: 0 0 22px; font-size: 13px; color: var(--mute-d); }
.tm-logos div { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(30px, 6vw, 90px); }
.tm-logos img { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .45; transition: opacity .3s; }
.tm-logos span { font: 600 20px var(--fd); text-transform: uppercase; color: rgba(236,229,216,.45); }
.tm-logos img:hover { opacity: .9; }
@media (max-width: 900px) { .reviews { padding: 12vh var(--gut); } .tm { grid-template-columns: 1fr; } .tm-stage { padding: 14px; } }

/* about + FAQ: a profile card beside the about text and questions */
.about { background: var(--mist); color: var(--ink); display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; padding: 16vh var(--edge); }
.ab-card-wrap { position: sticky; top: 100px; }
.pc { position: relative; border-radius: 18px; overflow: hidden; background: #1e1e1e; color: #ece5d8; box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); padding-bottom: 22px; }
.pc-cover { position: relative; height: 150px; overflow: hidden; }
.pc-cover img { width: 100%; height: 100%; object-fit: cover; }
.pc-ig { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(30,30,30,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #ece5d8; transition: background .3s; }
.pc-ig:hover { background: var(--blue); color: var(--ink); }
.pc-ig svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pc-av { position: relative; width: 84px; height: 84px; margin: -42px auto 0; border-radius: 50%; padding: 4px; background: #1e1e1e; }
.pc-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #ece5d8; padding: 12px; }
.pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 22px 18px; }
.pc-head h3 { margin: 0; font: 600 30px/1 var(--fd); text-transform: uppercase; }
.pc-head p { margin: 4px 0 0; font-size: 14px; color: rgba(236,229,216,.65); }
.pc-tools { display: grid; grid-template-columns: auto auto; gap: 6px; justify-items: center; }
.pc-tools span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: rgba(236,229,216,.08); box-shadow: inset 0 0 0 1px rgba(236,229,216,.12); font: 600 12px var(--f); color: var(--blue); }
.pc-tools small { grid-column: 1 / -1; font-size: 11px; color: rgba(236,229,216,.5); }
.pc-stats { margin: 0 22px 18px; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(236,229,216,.1); }
.pc-stats div { padding: 14px 6px; text-align: center; } .pc-stats div + div { box-shadow: -1px 0 0 rgba(236,229,216,.1); }
.pc-stats dt { order: 2; font-size: 12px; color: rgba(236,229,216,.55); } .pc-stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.pc-stats dd { margin: 0; font: 600 26px/1 var(--fd); }
.pc-btn { display: flex; margin: 0 22px; width: auto; min-width: 0; }
.ab-text { display: grid; gap: 30px; }
.ab-lead { margin: 0; max-width: 34em; font: 500 clamp(20px, 1.8vw, 28px)/1.4 var(--f); font-stretch: 104%; }
.about .faq-h { font-size: clamp(64px, 7vw, 120px); }
.about .hand { color: #2d6c7b; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; padding: 12vh var(--gut); } .ab-card-wrap { position: static; max-width: 420px; } }
.clubs > .arcs { position: absolute; z-index: 0; }
.map-l { left: auto; right: var(--gut); bottom: auto; top: 4vh; width: clamp(160px, 14vw, 220px); opacity: .7; }
@media (max-width: 900px) { .map-l { display: none; } }

/* ===================== round 8 ===================== */
/* one edge for everything, so every section lines up with the header and hero */
@media (min-width: 1000px) { :root { --edge: clamp(48px, 9vw, 210px); } }
.statement-in, .services, .contact, .reviews, .about { padding-left: var(--edge); padding-right: var(--edge); }
.gf-top, .gf-mark { padding-left: var(--edge); padding-right: var(--edge); }
.hd { padding: 18px var(--edge); justify-content: flex-end; }

/* every button is a pill, like the navigation bar: a frosted light one, a dark one like Menu, and an outlined one */
.btn { min-width: 0; height: 44px; padding: 0 24px; border-radius: 999px; font: 500 15px var(--f); font-stretch: 106%; letter-spacing: 0; }
.btn-light { background: rgba(236,229,216,.9); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(30,30,30,.08), 0 10px 26px -14px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-light:hover { background: #ece5d8; color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue), 0 10px 26px -14px rgba(0,0,0,.45); }
.btn-dark { background: var(--ink); color: #ece5d8; box-shadow: 0 10px 26px -14px rgba(0,0,0,.5); } .btn-dark:hover { background: #000; color: var(--blue); }
.btn-line { background: rgba(236,229,216,.04); color: #ece5d8; box-shadow: inset 0 0 0 1px rgba(236,229,216,.35); } .btn-line:hover { background: rgba(236,229,216,.1); color: #ece5d8; box-shadow: inset 0 0 0 1px var(--blue); }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(236,229,216,.08); box-shadow: inset 0 0 0 1px rgba(236,229,216,.1); }
.tabs button { height: 38px; padding: 0 20px; border-radius: 999px; box-shadow: none; background: transparent; color: rgba(236,229,216,.75); }
.tabs button[aria-selected="true"] { background: rgba(236,229,216,.92); color: var(--ink); }
.hero-side .btn { width: 100%; }
.pc-btn { border-radius: 999px; }
.bk-time, .bk-go, .bk-confirm, .bk-again { border-radius: 999px; }
.menu-close { border-radius: 999px; }

/* nav: the FNGX bird perched on the end of the bar, then the links in page order; scrolling folds them into the bird */
.nv { right: var(--edge); top: 18px; padding: 4px 4px 4px 6px; overflow: visible; }
.nv-bird { position: relative; display: grid; place-items: center; width: 46px; height: 38px; margin: -14px 2px 0 4px; color: var(--ink); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.nv-bird svg { width: 46px; height: auto; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.nv-bird svg path { fill: var(--ink); stroke: #ece5d8; stroke-width: 22; stroke-linejoin: round; paint-order: stroke; }
.nv-bird svg .bw path { fill: var(--blue); }
.nv-bird svg g:not(.bw) > path:last-of-type { fill: #ece5d8; stroke: none; }
.nv-bird:hover { transform: translateY(-3px) rotate(-6deg); }
.nv-menu { display: none; }
.nv.mini { padding-right: 6px; }
@media (max-width: 760px) {
  .nv { padding: 4px 4px 4px 6px; background: rgba(236,229,216,.9); box-shadow: inset 0 0 0 1px rgba(15,28,29,.08), 0 12px 32px -14px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); right: var(--gut); }
  .nv-menu { display: inline-flex; }
}

/* footer bird: #ece5d8 and still, only the eye moves */
.gf-bird { cursor: default; }
.gf-bird-art path { fill: #ece5d8; stroke: var(--ink); stroke-width: 7; }
.gf-bird-art .bw path { fill: #d8d8d8; }
.gf-bird-art g:not(.bw) > path:last-of-type { fill: var(--ink); stroke: none; }

/* maps: world behind the work, Australia behind the reviews, South East Queensland behind the booking */
.map-world { width: clamp(320px, 42vw, 640px); right: auto; left: 50%; translate: -50% 0; top: 4vh; opacity: .8; }
.map-aus { width: clamp(220px, 24vw, 380px); right: var(--edge); left: auto; top: 6vh; bottom: auto; opacity: .85; }
.map-bg .m-ring { fill: none; stroke: var(--blue); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .6; transform-box: fill-box; transform-origin: center; animation: mring 2.6s ease-out infinite; }
@keyframes mring { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 900px) { .map-world { width: 90vw; } .map-aus { display: block; width: 180px; } }

/* about + FAQ: bigger, two equal halves on the shared edge */
.about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); padding-top: 18vh; padding-bottom: 18vh; min-height: 100vh; }
.ab-card-wrap { top: 110px; }
.pc { max-width: 600px; border-radius: 22px; }
.pc-cover { height: clamp(200px, 17vw, 260px); }
.pc-av { width: 120px; height: 120px; margin-top: -60px; padding: 5px; }
.pc-av img { padding: 18px; }
.pc-head { padding: 18px 30px 22px; }
.pc-head h3 { font-size: clamp(36px, 3vw, 48px); }
.pc-head p { font-size: 16px; }
.pc-tools span { width: 36px; height: 36px; font-size: 13px; }
.pc-stats { margin: 0 30px 24px; }
.pc-stats div { padding: 18px 6px; } .pc-stats dd { font-size: clamp(30px, 2.6vw, 40px); } .pc-stats dt { font-size: 13px; }
.pc-btn { margin: 0 30px; height: 48px; }
.pc { padding-bottom: 30px; }
.ab-text { gap: 34px; align-content: start; }
.ab-lead { font-size: clamp(22px, 2vw, 32px); }
.about .faq-list .qa button { font-size: 17px; padding: 24px 0; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; min-height: 0; } .pc { max-width: none; } }

/* page change: a dark curtain closes, the next page opens behind it */
.pt { position: fixed; inset: 0; z-index: 9999; background: var(--ink); transform: translateY(100%); pointer-events: none; }
.pt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 56px; translate: -50% -50%; background: url("assets/bird-solid.png") center / contain no-repeat; opacity: .9; filter: brightness(0) invert(1); }
.map-world .m-lbl { display: none; }

/* ===================== round 9 ===================== */
/* nav: centred, the bird sits inside the bar, links sit on the same centre line */
.nv { left: 50%; right: auto; translate: -50% 0; top: 18px; padding: 4px; align-items: center; height: 46px; box-sizing: border-box; }
.nv-bird { width: 38px; height: 38px; margin: 0 0 0 4px; flex: none; display: grid; place-items: center; }
.nv-bird svg { width: 30px; height: auto; filter: none; }
.nv-bird svg path { stroke: none; }
.nv-bird svg .bw path, .nv-bird svg path { fill: var(--ink); }
.nv-bird svg g:not(.bw) > path:last-of-type { fill: #ece5d8; }
.nv-bird:hover { transform: rotate(-8deg); }
.nv-links { height: 38px; align-items: center; padding: 0 18px 0 12px; }
.nv-l { height: 38px; padding: 0; display: inline-flex; align-items: center; line-height: 1; }
.nv-l i { line-height: 1; }
.nv-menu { height: 38px; }
.menu { left: 50%; right: auto; translate: -50% 0; top: 72px; }
@media (max-width: 760px) { .nv { left: 50%; right: auto; translate: -50% 0; } .menu { left: 50%; right: auto; translate: -50% 0; } }

/* both birds: the back wing is the same colour as the body */
.gf-bird-art .bw path { fill: #ece5d8; }

/* handwritten words: same size as the capitals, sitting on the same baseline */
.hand { font-size: 1.02em; line-height: 1; rotate: -3deg; vertical-align: baseline; transform-origin: 0 80%; padding: 0 .04em 0 .02em; position: relative; top: -.02em; }

/* maps: the world fills the whole work section, Australia fills the reviews, South East Queensland sits on the right of the booking */
.map-world, .map-aus { inset: 0; width: 100%; height: 100%; left: 0; translate: none; top: 0; right: auto; bottom: auto; opacity: .75; }
.map-world svg, .map-aus svg { width: 100%; height: 100%; }
.map-r2 { right: 0; left: auto; top: 50%; translate: 0 -50%; width: clamp(280px, 32vw, 500px); opacity: .9; }
@media (max-width: 900px) { .map-aus { display: block; width: 100%; } .map-r2 { width: 200px; opacity: .55; } }

/* about: the card stays put */
.ab-card-wrap { position: static; }
.map-aus .m-lbl { display: none; }

/* ===================== round 10 ===================== */
/* nav: even spacing (bird, gap, links, the same gap at the end) and a clean circle when folded */
.nv { padding: 4px; gap: 0; height: 48px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(30,30,30,.08), 0 12px 32px -14px rgba(0,0,0,.45); transition: padding .7s cubic-bezier(.76, 0, .24, 1); }
.nv-bird { width: 40px; height: 40px; margin: 0; border-radius: 50%; }
.nv-bird svg { width: 28px; }
.nv-links { height: 40px; gap: 26px; padding: 0 22px 0 14px; }
.nv.mini { padding: 4px; }
.nv.mini .nv-links { padding: 0; }
.nv:focus-within { outline: none; }

/* the filter switch: a liquid glass lens slides between the options */
.tabs { position: relative; isolation: isolate; padding: 5px; gap: 0; background: rgba(236,229,216,.06); box-shadow: inset 0 0 0 1px rgba(236,229,216,.12), inset 0 1px 0 rgba(236,229,216,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tabs button { position: relative; z-index: 1; height: 40px; padding: 0 24px; background: transparent !important; color: rgba(236,229,216,.7); transition: color .35s; outline: none; }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.tab-glass { position: absolute; z-index: 0; left: 0; top: 5px; height: 40px; width: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(236,229,216,.96), rgba(236,240,241,.88));
  box-shadow: inset 0 1px 1px rgba(236,229,216,1), inset 0 -2px 6px rgba(148,198,209,.35), inset 0 0 0 1px rgba(236,229,216,.6), 0 6px 18px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(148,198,209,.25);
  -webkit-backdrop-filter: blur(6px) saturate(1.8); backdrop-filter: blur(6px) saturate(1.8); transform-origin: 50% 50%; }
.tab-glass::after { content: ""; position: absolute; left: 12%; right: 12%; top: 3px; height: 40%; border-radius: 999px; background: linear-gradient(180deg, rgba(236,229,216,.9), rgba(236,229,216,0)); opacity: .7; }

/* booking: the map sits beside the heading, every place readable */
.ct-head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 380px); gap: 40px; align-items: center; margin-bottom: 6vh; }
.ct-copy .contact-sub { margin-bottom: 0; }
.ct-map { position: relative; inset: auto; width: 100%; translate: none; opacity: 1; top: auto; right: auto; }
.ct-map svg { width: 100%; height: auto; max-height: 64vh; }
.ct-map .m-coast { stroke: rgba(236,229,216,.32); }
.ct-map .m-border { stroke: rgba(236,229,216,.22); }
.ct-map .m-lbl { fill: rgba(236,229,216,.72); font-size: 30px; letter-spacing: .12em; }
.ct-map .m-dot { fill: rgba(236,229,216,.7); }
.ct-map .m-home { fill: var(--blue); }
.ct-map .m-home + .m-lbl { fill: var(--blue); }
@media (max-width: 900px) { .ct-head { grid-template-columns: 1fr; } .ct-map { width: 220px; justify-self: end; } }

/* ===================== round 11 ===================== */
/* booking: South East Queensland fills the whole section like the other maps; the booking box lines up with the text */
.map-seq { inset: 0; width: 100%; height: 100%; opacity: .85; }
.map-seq svg { width: 100%; height: 100%; }
.map-seq .m-lbl { font-size: 17px; letter-spacing: .14em; fill: rgba(236,229,216,.42); }
.map-seq .m-lbl-home { fill: var(--blue); }
.map-seq .m-dot { fill: rgba(236,229,216,.45); }
.map-seq .m-home { fill: var(--blue); }
.contact .book { max-width: none; margin: 0; }
.contact .contact-sub { margin-bottom: 7vh; }
@media (max-width: 900px) { .map-seq { opacity: .55; } }
.contact .book { background: rgba(38,38,38,.72); -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(236,229,216,.1), 0 40px 90px -40px rgba(0,0,0,.7); }
.contact .bk-info, .contact .bk-cal { background: transparent; }

/* ===================== round 12 ===================== */
/* the work slider centres the active project in the frame */
.sl-view { padding: 0; }

/* booking: words on the left, a compact calendar on the right */
.ct-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 70px); align-items: start; }
.ct-left .contact-h { font-size: clamp(48px, 5.6vw, 100px); margin-bottom: 24px; }
.ct-left .contact-sub { margin-bottom: 26px; }
.ct-left .contact-sub .rather { font-size: clamp(20px, 1.7vw, 26px); }
.ct-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-meta li { padding: 8px 14px; border-radius: 999px; background: rgba(236,229,216,.08); box-shadow: inset 0 0 0 1px rgba(236,229,216,.12); font-size: 13px; }
.contact .book { max-width: 640px; width: 100%; justify-self: end; border-radius: 18px; }
.contact .bk { grid-template-columns: minmax(0, 1fr) 210px; min-height: 0; }
.contact .bk-info { display: none; }
.contact .bk-cal { padding: 22px 20px; border-right: 1px solid rgba(236,229,216,.12); }
.contact .bk-cal header { margin-bottom: 14px; }
.contact .bk-month { font-size: 18px; }
.contact .bk-wk, .contact .bk-days { gap: 4px; }
.contact .bk-wk span { font-size: 10px; padding-bottom: 6px; }
.contact .bk-days > * { font-size: 13px; border-radius: 8px; }
.contact .bk-side { padding: 20px 16px; max-height: 360px; }
.contact .bk-side header { margin-bottom: 12px; }
.contact .bk-time { height: 38px; font-size: 13px; }
.contact .bk-slots { gap: 7px; }
@media (max-width: 1000px) { .ct-grid { grid-template-columns: 1fr; } .contact .book { max-width: none; justify-self: stretch; } }
@media (max-width: 600px) { .contact .bk { grid-template-columns: 1fr; } .contact .bk-cal { border-right: 0; border-bottom: 1px solid rgba(236,229,216,.12); } .contact .bk-side { max-height: none; } }

/* the curtain is already closed on the first frame when arriving by a click */
html.pt-on .pt { transform: none; }

/* ===================== round 13 ===================== */
/* SEQ map: smaller, on the right, kept inside the booking section */
.contact { overflow: hidden; }
.map-seq { inset: 6vh 0 6vh auto; width: min(46vw, 700px); height: auto; left: auto; }
.map-seq svg { width: 100%; height: 100%; overflow: hidden; }
@media (max-width: 1000px) { .map-seq { width: 70vw; opacity: .4; } }
.tm-ask { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- round 14: poster wall hero (Design Recap style) + booking form gets the whole box ---------- */
.recap { position: absolute; inset: -4% 0; display: grid; align-content: center; gap: 0; background: var(--ink); }
.recap-row { overflow: hidden; }
.recap-track { display: flex; width: max-content; will-change: transform; }
.recap-track img { position: static; display: block; width: clamp(150px, 19vw, 320px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; flex: none; }
.hero-media { background: var(--ink); }
.hero-shade { background:
  linear-gradient(180deg, rgba(20,20,20,.62) 0%, rgba(20,20,20,.18) 22%, rgba(20,20,20,.28) 48%, rgba(20,20,20,.9) 82%, #1e1e1e 100%),
  rgba(20,20,20,.18); }
.hero-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: var(--blue); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .recap-track img { width: 40vw; } .hero-ink { stroke-width: 2.4; } }

.bk-form input, .bk-form select, .bk-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.bk-side { overflow-x: hidden; }
.contact .bk.is-form { grid-template-columns: 1fr; }
.contact .bk.is-form .bk-cal { display: none; }
.contact .bk.is-form .bk-side { max-height: none; padding: 24px 24px 22px; }
.contact .bk.is-form .bk-form { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.contact .bk.is-form .bk-form > :not(label:nth-of-type(-n+4)) { grid-column: 1 / -1; }
.contact .bk.is-form .bk-confirm { justify-self: start; padding: 0 28px; }
@media (max-width: 600px) { .contact .bk.is-form .bk-form { grid-template-columns: 1fr; } }

/* round 15: poster wall rows sized from JS (full 4:5 posters, nothing cropped) */
.recap { display: flex; flex-direction: column; justify-content: center; inset: 0; }
.recap-row { flex: none; overflow: hidden; }
.recap-track img { width: auto; height: 100%; aspect-ratio: auto; object-fit: fill; }
.recap-track { height: 100%; } .recap-track img { max-width: none; }
.hero-ink { stroke-width: 2.6; }
@media (max-width: 760px) { .hero-ink { stroke-width: 2; } }

/* round 16: curved work carousel */
.cv { position: relative; margin: 0 calc(var(--edge) * -1); outline: none; }
.clubs .cv { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.cv-c { display: block; width: 100%; height: clamp(360px, 62vh, 640px); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cv-c.moving { filter: url(#cv-blur); }
.cv-cap { display: grid; justify-items: center; gap: 6px; margin-top: 18px; text-align: center; }
.cv-arc { width: 64px; height: 10px; fill: none; stroke: rgba(236,229,216,.55); stroke-width: 1.4; }
.cv-name { position: relative; overflow: hidden; height: 1.3em; min-width: 10ch; font: 500 17px/1.3 var(--f); font-stretch: 106%; color: #ece5d8; }
.cv-name span { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; }
.cv-sub { color: var(--mute-d); font-size: 12px; font-family: var(--f); }
.cv-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; }
.cv-list a:focus { outline: none; }
.cv:focus-visible .cv-c { outline: 1px solid var(--blue); outline-offset: -1px; }
.cv-fx { position: absolute; }

/* round 16: the process walk-through on project pages */
.pr { padding: 14vh var(--edge) 12vh; border-top: 1px solid var(--line-d); }
.pr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: 10vh; }
.pr-h { margin: 0; font-size: clamp(40px, 5vw, 84px); }
.pr-head p { margin: 0; color: var(--mute-d); font-size: 14px; }
.pr-body { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.pr-body:has(> .pr-steps:only-child) { grid-template-columns: 1fr; }
.pr-rail { position: sticky; top: 120px; display: grid; grid-template-columns: 2px 1fr; gap: 20px; }
.pr-bar { position: relative; background: rgba(236,229,216,.14); border-radius: 2px; }
.pr-bar i { position: absolute; inset: 0; background: var(--blue); transform-origin: 0 0; border-radius: 2px; }
.pr-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pr-rail a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 8px 0; color: rgba(236,229,216,.4); text-decoration: none; font-size: 14px; line-height: 1.35; transition: color .4s; }
.pr-rail a span { font-variant-numeric: tabular-nums; font-size: 11px; padding-top: 2px; }
.pr-rail a.done { color: rgba(236,229,216,.62); }
.pr-rail a.on { color: #ece5d8; }
.pr-rail a.on span { color: var(--blue); }
.pr-rail a:hover { color: #ece5d8; }
.pr-steps { display: grid; gap: 16vh; }
.pr-step { display: grid; gap: 28px; scroll-margin-top: 20vh; }
.pr-step.pr-text { min-height: 34vh; align-content: center; }
.pr-copy { max-width: 58ch; }
.pr-k { display: block; margin-bottom: 14px; font-size: 12px; color: var(--blue); font-variant-numeric: tabular-nums; }
.pr-copy h3 { margin: 0 0 16px; font: 600 clamp(30px, 3.2vw, 52px)/.95 var(--fd); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.pr-copy p { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: rgba(236,229,216,.82); }
.pr-fig { margin: 0; max-width: 760px; border-radius: 3px; overflow: hidden; background: var(--ink-2); }
.pr-fig img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .pr-head { grid-template-columns: 1fr; margin-bottom: 7vh; }
  .pr-body { grid-template-columns: 1fr; }
  .pr-rail { display: none; }
  .pr-steps { gap: 10vh; }
  .pr-step.pr-text { min-height: 0; }
}
.pr-h { font-family: var(--fd); font-weight: 600; line-height: .9; text-transform: uppercase; }

/* round 17 */
/* the project name under the carousel uses the full width so long names never get cut */
.cv-name { width: 100%; min-width: 0; }
/* the clicked card and the project header are the same picture at the same size */
.pj-hero .cover-img { height: calc(clamp(360px, 62vh, 640px) * .86); width: auto; aspect-ratio: 4 / 5; max-width: none; object-fit: cover; }
@media (max-width: 760px) { .pj-hero .cover-img { height: min(calc(clamp(360px, 62vh, 640px) * .86), 102vw); max-height: none; max-width: none; } }
/* booking times sit in two columns, so the list fits without a scrollbar */
.contact .bk-side { max-height: none; overflow: visible; }
.contact .bk-slots { grid-template-columns: 1fr 1fr; gap: 7px; }
.contact .bk-slot.open { grid-column: 1 / -1; }
.contact .bk-time { min-width: 0; padding: 0 6px; }
@media (max-width: 1180px) { .ct-grid { grid-template-columns: 1fr; } .contact .book { max-width: 640px; justify-self: start; } }
@media (max-width: 700px) { .contact .book { max-width: none; justify-self: stretch; } }

/* one size for the front card in the work carousel and the picture at the top of each project page */
:root { --card-h: calc(clamp(360px, 62vh, 640px) * .86); }
@media (max-width: 760px) { :root { --card-h: min(calc(clamp(360px, 62vh, 640px) * .86), 102vw); } }
.cv-c { height: calc(var(--card-h) / .86); }
.pj-hero .cover-img { height: var(--card-h); }
/* the header picture is never cropped: JS sizes it to the same box as the carousel card */
.pj-hero .cover-img { aspect-ratio: auto; object-fit: contain; max-width: none; max-height: none; }
/* the project header frame: the whole image centred over a blurred copy of itself, same as the carousel card */
.pj-hero .cover-frame { position: absolute; overflow: hidden; border-radius: 3px; background: var(--ink-2); aspect-ratio: auto; }
.cover-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cover-frame .cf-bg { object-fit: cover; filter: blur(28px) brightness(.55); transform: scale(1.15); }
.cover-frame .cf-fg { object-fit: contain; }

/* round 18: case study, tighter. Overview strip, then the process as one panel: steps on the left, one open at a time,
   its picture on the right. Fits on one screen instead of a screen per step. */
.pj-over { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: start; padding: 10vh var(--edge) 8vh; }
.pj-brief { margin: 0; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.4; max-width: 36ch; color: #ece5d8; }
.pj-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.pj-meta dt { font-size: 12px; color: var(--mute-d); margin-bottom: 3px; }
.pj-meta dd { margin: 0; font-size: 15px; }
.pr { padding: 8vh var(--edge) 10vh; border-top: 1px solid var(--line-d); }
.pr-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 24px; margin-bottom: 5vh; }
.pr-h { font-size: clamp(38px, 4.4vw, 72px); }
.pr-ctrl { display: flex; align-items: center; gap: 8px; }
.pr-count { color: var(--mute-d); font-size: 13px; margin-right: 8px; }
.pr-btn { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(236,229,216,.28); background: none; color: #ece5d8; font: 500 14px var(--f); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.pr-btn:hover { border-color: #ece5d8; }
.pr-next { background: #ece5d8; color: var(--ink); border-color: #ece5d8; } .pr-next:hover { background: var(--blue); border-color: var(--blue); }
.pr-panel { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 70px); align-items: start; }
.pr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
.pr-list li { border-bottom: 1px solid var(--line-d); }
.pr-item { width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 6px; padding: 16px 0; background: none; border: 0; text-align: left; color: rgba(236,229,216,.45); font: 500 clamp(16px, 1.25vw, 19px)/1.3 var(--f); cursor: pointer; transition: color .3s; }
.pr-item span { font-size: 12px; padding-top: 4px; color: inherit; transition: color .3s; }
.pr-item:hover, .pr-list li.done .pr-item { color: rgba(236,229,216,.7); }
.pr-list li.on .pr-item { color: #ece5d8; }
.pr-list li.on .pr-item span { color: var(--blue); }
.pr-text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.pr-text > div { overflow: hidden; }
.pr-list li.on .pr-text { grid-template-rows: 1fr; }
.pr-text p { margin: 0 0 18px 44px; font-size: 15px; line-height: 1.6; color: rgba(236,229,216,.8); max-width: 52ch; }
.pr-view { position: sticky; top: 100px; margin: 0; aspect-ratio: 1100 / 673; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.pr-view .pr-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.pr-view .pr-shot.on { opacity: 1; }
.pj-out { padding: 8vh var(--edge); border-top: 1px solid var(--line-d); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 70px); }
.pj-out ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; }
.pj-out li { padding-top: 14px; border-top: 1px solid var(--line-d); font-size: 15px; line-height: 1.55; color: rgba(236,229,216,.85); }
.pj-cta { padding: 12vh var(--gut); }
@media (max-width: 900px) {
  .pj-over, .pr-panel, .pj-out { grid-template-columns: 1fr; }
  .pr-view { position: relative; top: 0; order: -1; }
  .pj-out ul { grid-template-columns: 1fr; }
  .pr-ctrl { width: 100%; }
  .pr-ctrl .pr-count { margin-right: auto; }
}
.bk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-confirm[disabled] { opacity: .6; cursor: default; }
.bk-fine a { color: #ece5d8; }

/* round 19 */
/* carousel caption in the site's own voice: counter, condensed uppercase name, client underneath */
.cv-cap { gap: 4px; margin-top: 22px; }
.cv-count { font-size: 11px; letter-spacing: .14em; color: var(--blue); }
.cv-name { height: 1.05em; font: 600 clamp(28px, 2.8vw, 44px)/1 var(--fd); text-transform: uppercase; letter-spacing: -.005em; font-stretch: normal; }
.cv-sub { font-size: 13px; color: var(--mute-d); }
.cv-arc { display: none; }
/* the one-off drag hint */
.cv-hint { position: absolute; left: 50%; top: calc(var(--card-h) / .86 / 2); translate: -50% -50%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--mist); color: var(--ink); font: 500 14px var(--f); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); opacity: 0; scale: .9; pointer-events: none; }
.cv-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* card growing to full screen on its way into the project */
.cv-zoom { position: fixed; z-index: 200; overflow: hidden; border-radius: 3px; background: var(--ink-2); }

/* project header: the same picture, full screen, words over it */
.pj-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink-2); }
.pj-hero .wash, .pj-hero .cover-img { display: none; }
.pj-frame { position: absolute; inset: 0; }
.pj-frame .cf-fg { padding: 0; }
.pj-hero::after { background: linear-gradient(180deg, rgba(20,20,20,.35) 0%, transparent 30%, transparent 50%, rgba(20,20,20,.88) 100%); z-index: 0; }
.pj-hero-in { z-index: 1; left: var(--edge); right: var(--edge); }
.pj-title { line-height: .9; }
.pj-hero .btns { display: flex; align-items: center; gap: 22px; }
.pj-scroll { display: inline-flex; align-items: flex-end; gap: 4px; color: var(--blue); text-decoration: none; }
.pj-scroll .hand { font-size: 26px; rotate: -6deg; translate: 0 -14px; }
.pj-scroll svg { width: 38px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(9px); } }

/* overview, the rows, outcomes and gallery */
.pj-over { padding: 10vh var(--edge) 6vh; }
.pj-steps { padding: 4vh var(--edge) 6vh; display: grid; gap: 9vh; }
.pj-steps > .pr-h { margin: 0 0 -3vh; }
.pj-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.pj-row.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
.pj-row.flip .pj-row-pic { order: -1; }
.pj-row-text { display: grid; gap: 30px; }
.pj-step h3 { margin: 0 0 12px; font: 600 clamp(26px, 2.6vw, 40px)/.95 var(--fd); text-transform: uppercase; text-wrap: balance; }
.pj-step p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(236,229,216,.8); max-width: 50ch; }
.pj-step .pr-k { display: block; margin-bottom: 10px; font-size: 12px; color: var(--blue); }
.pj-row-pic { margin: 0; display: grid; place-items: center; }
.pj-row-pic img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; border-radius: 3px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.pj-out { padding: 6vh var(--edge); }
.pj-gal { padding: 6vh var(--edge) 4vh; border-top: 1px solid var(--line-d); }
.pj-gal .pr-h { margin: 0 0 4vh; }
.pj-gal-grid { columns: 3 260px; column-gap: 12px; }
.pj-gal-grid figure { margin: 0 0 12px; break-inside: avoid; }
.pj-gal-grid img { display: block; width: 100%; height: auto; border-radius: 3px; }
@media (max-width: 900px) {
  .pj-row, .pj-row.flip { grid-template-columns: 1fr; gap: 22px; }
  .pj-row-pic, .pj-row.flip .pj-row-pic { order: -1; }
  .pj-steps { gap: 7vh; }
  .pj-hero .btns { gap: 14px; }
}
.pj-row-pic img { max-height: 56vh; }
.pj-steps { gap: 7vh; }

/* round 20: stand-in picture while the project page loads, and progress shots under each step */
.pj-shell { left: 0; top: 0; width: 100vw; height: 100vh; height: 100svh; border-radius: 0; }
.pj-shots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pj-shots figure { margin: 0; height: clamp(110px, 13vw, 170px); border-radius: 3px; overflow: hidden; background: var(--ink-2); box-shadow: 0 16px 34px -18px rgba(0,0,0,.7); }
.pj-shots img { display: block; height: 100%; width: auto; transition: transform .6s var(--ease); }
.pj-shots figure:hover img { transform: scale(1.04); }
.pj-row { align-items: center; }

/* round 21: about on warm paper. The world in outline, Wolverhampton to the Gold Coast, framed like the 2026 Design Recap
   post: a light first line, a heavy second line, a hand-drawn ring round the place, and the FNGX marks between rules. */
.about.about-map { --paper-2: #ece5d8; position: relative; display: block; overflow: hidden; background: var(--paper-2); color: var(--ink); padding: 16vh var(--edge) 10vh; }
.ab-map { position: absolute; inset: 4vh 0 auto; height: min(78vh, 52vw); pointer-events: none; }
.ab-map svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ab-map .m-coast { fill: rgba(30,30,30,.035); stroke: rgba(30,30,30,.26); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ab-map .m-border { display: none; }
.ab-route { fill: none; stroke: #2d6c7b; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ab-pin { fill: var(--ink); }
.ab-pin.home { fill: #2d6c7b; }
.ab-pin .ab-ring2 { fill: none; stroke: currentColor; stroke: inherit; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke: rgba(30,30,30,.45); }
.ab-pin.home .ab-ring2 { stroke: #2d6c7b; }
.ab-pin text { font: 600 13px var(--f); letter-spacing: .16em; fill: var(--ink); }
.ab-pin.home text { fill: #2d6c7b; }
.ab-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: end; margin-top: min(40vh, 26vw); }
.ab-h { margin: 0; font-family: var(--f); font-stretch: 100%; text-transform: none; letter-spacing: -.035em; line-height: .95; display: grid; }
.ab-l1 { font-weight: 400; font-size: clamp(30px, 3.6vw, 60px); padding-left: .08em; }
.ab-l2 { font-weight: 800; font-size: clamp(48px, 6.4vw, 112px); }
.ab-ring { position: relative; display: inline-block; white-space: nowrap; }
.ab-ring svg { position: absolute; left: -9%; top: -26%; width: 118%; height: 150%; overflow: visible; pointer-events: none; }
.ab-ring path { fill: none; stroke: #2d6c7b; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ab-copy { display: grid; gap: 16px; max-width: 46ch; }
.ab-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(30,30,30,.8); }
.ab-copy p:first-child { font-size: clamp(18px, 1.4vw, 21px); color: var(--ink); line-height: 1.45; }
.ab-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px !important; color: rgba(30,30,30,.74) !important; }
.ab-facts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ab-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.ab-ig { color: var(--ink); font-size: 14px; text-underline-offset: 4px; }
.ab-marks { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); margin-top: 12vh; }
.ab-marks i { flex: 1; height: 2px; background: var(--ink); border-radius: 2px; }
.ab-marks img { height: clamp(28px, 3.4vw, 46px); width: auto; display: block; }
@media (max-width: 900px) {
  .about.about-map { padding: 12vh var(--edge) 8vh; }
  .ab-map { inset: 6vh -20% auto; height: 60vw; }
  .ab-in { grid-template-columns: 1fr; margin-top: 46vw; gap: 26px; }
  .ab-marks { margin-top: 8vh; gap: 12px; }
  .ab-marks img { height: 24px; }
  .ab-pin text { font-size: 20px; }
}
.ab-map .m-coast { fill: none; }
@media (max-width: 900px) { .ab-map { inset: 9vh 0 auto; height: 52vw; } .ab-in { margin-top: 50vw; } }

/* round 22: client logos in their own colours, all at one height so the sizes between them stay as supplied */
.logos-track img { height: 64px; filter: none; opacity: 1; }
.tm-logos img { height: 60px; filter: none; opacity: .9; }
.tm-logos img:hover { opacity: 1; }

/* round 22: about map edge to edge, Wolverhampton left, Gold Coast right; text sits clear of both */
.about.about-map { display: grid; padding: 0 0 6vh; }
.ab-map { position: relative; grid-area: 1 / 1; inset: auto; width: 100%; height: auto; aspect-ratio: 500 / 322; margin-top: 6vh; }
.ab-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-route { fill: none; stroke: #2d6c7b; stroke-linecap: round; vector-effect: none; }
.ab-pin { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; translate: -11px -50%; white-space: nowrap; }
.ab-pin.left { flex-direction: row-reverse; translate: calc(-100% + 11px) -50%; }
.ab-pin i { width: 22px; height: 22px; border-radius: 50%; border: 1.2px solid rgba(30,30,30,.5); display: grid; place-items: center; flex: none; }
.ab-pin i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.ab-pin b { font: 600 12px var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.ab-pin.home i { border-color: #2d6c7b; } .ab-pin.home i::after { background: #2d6c7b; } .ab-pin.home b { color: #2d6c7b; }
.ab-in { grid-area: 1 / 1; align-self: end; margin: 0; padding: 0 22vw 7vw var(--edge); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.ab-marks { padding: 0 var(--edge); margin-top: 5vh; }
.ab-h { padding-left: .06em; }
.ab-ring svg { left: -5%; top: -18%; width: 110%; height: 136%; }
@media (max-width: 1180px) {
  .about.about-map { display: block; padding-bottom: 6vh; }
  .ab-map { margin-top: 9vh; }
  .ab-in { padding: 5vh var(--edge) 0; grid-template-columns: 1fr; gap: 26px; margin: 0; }
  .ab-pin b { font-size: 10px; letter-spacing: .12em; }
  .ab-pin i { width: 16px; height: 16px; } .ab-pin i::after { width: 6px; height: 6px; }
  .ab-pin { translate: -8px -50%; } .ab-pin.left { translate: calc(-100% + 8px) -50%; }
}
.about.about-map { grid-template-columns: minmax(0, 1fr); } .ab-marks { grid-area: 2 / 1; }
.ab-ring svg { top: -8%; height: 122%; }

/* round 23 */
/* one warm off-white everywhere the site used #ece5d8 or light grey surfaces */
:root { --mist: #ece5d8; --offwhite: #ece5d8; }
.btn-light, .btn-light:hover { background: var(--offwhite); }
.btn-light:hover { background: var(--blue); }
.services, .cta-side { background: var(--offwhite); }

/* the second section: the new photo, darkened so the words read; the orange stays */
.statement-bg { filter: brightness(.48) contrast(1.05); }

/* reviews: gold stars, the card is clickable, and a slider to jump between them */
.tm-stars { color: #f2b636; } .tm-stars i.off { color: rgba(236,229,216,.2); }
.tm-stage { cursor: pointer; }
.tm-ghost { transition: transform .4s var(--ease), background .3s; }
.tm-stage:hover .tm-ghost.g1 { transform: translate(6px, -6px); } .tm-stage:hover .tm-ghost.g2 { transform: translate(-6px, 6px); }
.tm-slide { display: flex; align-items: center; gap: 14px; width: min(320px, 100%); margin: 4px 0 14px; }
.tm-slide[hidden] { display: none; }
.tm-slide span { font-size: 12px; color: var(--mute-d); min-width: 38px; }
.tm-slide input { --p: 0; flex: 1; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #ece5d8 calc(var(--p) * 100%), rgba(236,229,216,.2) 0); cursor: pointer; }
.tm-slide input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--offwhite); box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: transform .2s; }
.tm-slide input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--offwhite); }
.tm-slide input:active::-webkit-slider-thumb { transform: scale(1.2); }

/* project page: title words rise in; images run to the edge of the page, text sits level with them */
.pj-title .tw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.pj-title .tw > span { display: inline-block; }
.pj-steps { padding: 4vh 0 6vh; }
.pj-steps > .pr-h { padding: 0 var(--edge); }
.pj-row { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.pj-row.flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.pj-row-text { padding-left: var(--edge); }
.pj-row.flip .pj-row-text { padding-left: 0; padding-right: var(--edge); }
.pj-row-pic { display: block; }
.pj-row-pic img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; object-position: right center; border-radius: 0; box-shadow: none; }
.pj-row.flip .pj-row-pic img { object-position: left center; }
.pj-gal { padding: 6vh 0 4vh; }
.pj-gal .pr-h { padding: 0 var(--edge); }
.pj-gal-grid { columns: 2 420px; column-gap: 6px; }
.pj-gal-grid figure { margin-bottom: 6px; }
.pj-gal-grid img { border-radius: 0; }
@media (max-width: 900px) {
  .pj-row, .pj-row.flip { grid-template-columns: 1fr; gap: 20px; }
  .pj-row-text, .pj-row.flip .pj-row-text { padding: 0 var(--edge); }
  .pj-row-pic img, .pj-row.flip .pj-row-pic img { object-position: center; max-height: none; }
}

/* about: the words sit in a frosted panel over the middle of the map */
.ab-in { align-self: center; justify-self: center; width: min(780px, 62vw); margin: 0; padding: clamp(28px, 3vw, 44px); grid-template-columns: 1fr; gap: 22px;
  background: rgba(236,229,216,.62); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(30,30,30,.1); border-radius: 22px; box-shadow: 0 30px 80px -40px rgba(30,30,30,.45); }
.ab-l1 { font-size: clamp(26px, 2.6vw, 42px); }
.ab-l2 { font-size: clamp(40px, 4.8vw, 80px); }
.ab-copy { max-width: none; }
.ab-ring svg { position: absolute; overflow: visible; pointer-events: none; }
.ab-ring path { fill: none; stroke: #2d6c7b; stroke-width: 3; stroke-linecap: round; vector-effect: none; }
.ab-marks img { height: clamp(26px, 3vw, 42px); }
@media (max-width: 1180px) {
  .ab-in { width: auto; margin: 4vh var(--edge) 0; }
}
.tm-dots { display: none; }

/* round 24 */
/* the second section keeps the photo's own shape, so the whole picture scales with the page */
.statement { min-height: 0; aspect-ratio: 2048 / 1365; }
.statement-bg { inset: 0; height: 100%; object-fit: cover; filter: brightness(.45) contrast(1.05); }
@media (max-width: 900px) { .statement { aspect-ratio: auto; min-height: 88svh; } .statement-bg { object-position: 40% center; } }

/* portfolio heading: two words, who it is for underneath */
.pf-h { margin-bottom: 12px; font-size: clamp(34px, 3.4vw, 54px); }
.pf-sub { position: relative; margin: 0 0 30px; text-align: center; font-size: 14px; color: var(--mute-d); }

/* footer on phones: one tidy column, contact first, the small print together */
@media (max-width: 700px) {
  .gf-top { grid-template-columns: 1fr; gap: 34px; padding-top: 72px; }
  .gf-top nav ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .gf-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; padding-top: 22px; border-top: 1px solid rgba(236,229,216,.12); }
  .gf-copy h4 { grid-column: 1 / -1; }
  .gf-copy p { margin: 0; font-size: 13px; }
  .gf-copy .gf-up { grid-column: 2; grid-row: 2 / span 2; margin: 0; align-self: end; }
}
@media (max-width: 700px) { :root { --card-h: 53vw; } }

/* round 25: tighter case studies and about */
.pj-over { padding: 7vh var(--edge) 4vh; }
.pj-steps { gap: 2.5vh; padding: 2vh 0 4vh; }
.pj-steps > .pr-h { margin: 0 0 1vh; }
.pj-row-pic img { max-height: 78vh; }
.pj-out { padding: 5vh var(--edge); }
.pj-gal { padding: 5vh 0 3vh; }
.pj-cta { padding: 10vh var(--gut); }
.about.about-map { min-height: 0; align-content: start; padding-bottom: 5vh; }
.ab-map { aspect-ratio: 500 / 304; margin-top: 4vh; }
.ab-marks { margin-top: 2vh; }
.about.about-map { gap: 0; }

/* the project header always fills the whole screen, whatever the window shape: the picture covers it edge to edge
   (the zoom from the carousel and the hand-over picture do the same, so the change stays seamless) */
.pj-frame .cf-fg, .pj-shell .cf-fg, .cv-zoom .cf-fg { object-fit: cover; object-position: center 35%; }

/* project header: darker behind the words (bottom and left) so the title, tags and scroll note read over any picture */
.pj-hero::after { background:
  linear-gradient(90deg, rgba(18,18,18,.62) 0%, rgba(18,18,18,.25) 45%, transparent 70%),
  linear-gradient(180deg, rgba(18,18,18,.4) 0%, transparent 22%, transparent 42%, rgba(18,18,18,.55) 66%, rgba(18,18,18,.94) 100%); }
.pj-hero-in { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.pj-tag { color: rgba(236,229,216,.88); }
.pj-scroll { color: #ece5d8; }

/* page change: a soft fade to the dark screen and back, the bird fading with it */
.pt { transform: none; opacity: 0; visibility: hidden; }
html.pt-on .pt { opacity: 1; visibility: visible; }


/* story case study (Mudgee matchdays) */
.st-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: start; padding: 9vh var(--edge) 6vh; }
.st-intro-text { display: grid; gap: 26px; align-content: start; position: sticky; top: 12vh; }
.st-intro-text .pr-h { margin: 0; }
.st-intro-text .pj-meta { margin-top: 6px; }
.st-media { margin: 0; justify-self: end; width: 100%; max-width: 640px; }
.st-media img { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain; border-radius: 4px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.st-season { padding: 6vh var(--edge); border-top: 1px solid var(--line-d); }
.st-season p { margin: 0; max-width: 62ch; font-size: clamp(20px, 2vw, 30px); line-height: 1.4; color: #ece5d8; }
.st-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 var(--edge) 8vh; gap: 0; }
.st-stat { display: grid; gap: 10px; padding: 28px 24px 0 0; border-top: 1px solid var(--line-d); }
.st-stat b { font: 600 clamp(54px, 6vw, 96px)/.9 var(--fd); color: #ece5d8; }
.st-stat b.tbc { color: rgba(236,229,216,.25); }
.st-stat span { font-size: 14px; color: var(--mute-d); }
.st-build { padding: 8vh var(--edge) 6vh; border-top: 1px solid var(--line-d); }
.st-build-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 30px; margin-bottom: 5vh; }
.st-build-head .pr-h { margin: 0; }
.st-build-head p { margin: 0; max-width: 46ch; color: var(--mute-d); font-size: 15px; }
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.st-steps li { display: grid; gap: 10px; align-content: start; }
.st-steps figure { margin: 0 0 8px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--ink-2); display: grid; place-items: center; }
.st-steps figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-ph { font-size: 12px; color: rgba(236,229,216,.35); border: 1px dashed rgba(236,229,216,.2); border-radius: 4px; position: absolute; inset: 10px; display: grid; place-items: center; }
.st-steps figure { position: relative; }
.st-steps h3 { margin: 0; font: 600 clamp(22px, 1.8vw, 28px)/.95 var(--fd); text-transform: uppercase; }
.st-steps p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(236,229,216,.75); }
@media (max-width: 900px) {
  .st-intro { grid-template-columns: 1fr; }
  .st-intro-text { position: static; }
  .st-media { justify-self: stretch; max-width: none; order: -1; }
  .st-stats { grid-template-columns: 1fr; }
  .st-steps { grid-template-columns: 1fr 1fr; }
}
.st-media video { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain; border-radius: 4px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); background: var(--ink-2); }


/* round 26: nav on project pages slides away on the way down, back on the way up */
body[data-page="project"] .nv { transition: transform .5s cubic-bezier(.76, 0, .24, 1), opacity .35s ease; }
body[data-page="project"].nv-away .nv { transform: translateY(-160%); opacity: 0; }

/* story intro: video flush under the header, filling the right half from the centre to the edge; info on the left */
.st-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; align-items: center; }
.st-intro-text { position: static; padding: 8vh clamp(28px, 4vw, 70px) 8vh var(--edge); }
.st-media { justify-self: stretch; max-width: none; width: 100%; margin: 0; align-self: start; }
.st-media img, .st-media video { width: 100%; max-height: none; border-radius: 0; box-shadow: none; }

/* stats: centred, numbers in the handwriting */
.st-stats { padding: 4vh var(--edge) 8vh; text-align: center; }
.st-stat { justify-items: center; border-top: 0; padding: 20px 10px 0; }
.st-stat b { font: 700 clamp(64px, 7vw, 120px)/.9 var(--hand); color: var(--blue); rotate: -3deg; }

/* the walkthrough: alternating rows, each picture filling half the page from the centre to the edge */
.st-build { padding: 8vh 0 4vh; }
.st-build-head { padding: 0 var(--edge); }
.st-steps { display: grid; grid-template-columns: 1fr; gap: 2.5vh; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; }
.st-row-text { display: grid; gap: 10px; padding: 0 clamp(28px, 4vw, 70px) 0 var(--edge); }
.st-row.flip .st-row-text { order: 2; padding: 0 var(--edge) 0 clamp(28px, 4vw, 70px); }
.st-row-pic { margin: 0; position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 90vh; background: var(--ink-2); display: grid; place-items: center; overflow: hidden; }
.st-row-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-row-text h3 { margin: 0; font: 600 clamp(28px, 2.8vw, 46px)/.95 var(--fd); text-transform: uppercase; }
.st-row-text p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(236,229,216,.78); max-width: 46ch; }
.st-steps li { display: grid; }
.st-steps figure { margin: 0; aspect-ratio: auto; border-radius: 0; }
@media (max-width: 900px) {
  .st-intro { grid-template-columns: 1fr; }
  .st-intro-text { padding: 6vh var(--edge); }
  .st-row, .st-row.flip { grid-template-columns: 1fr; gap: 18px; }
  .st-row .st-row-pic { order: -1; }
  .st-row-text, .st-row.flip .st-row-text { order: 2; padding: 0 var(--edge); }
  .st-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.st-steps .st-row-pic { aspect-ratio: 4 / 5; max-height: 92vh; }

/* posters take a third of the page (to the edge), so on wide screens most of the poster is on screen at once */
@media (min-width: 901px) {
  .st-intro { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .st-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .st-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .st-intro-text, .st-row-text { max-width: 760px; }
  .st-row.flip .st-row-text { justify-self: start; }
}
/* the season paragraph runs the full width of the page, edge to edge between the margins */
.st-season p { max-width: none; font-size: clamp(22px, 2.3vw, 42px); line-height: 1.3; text-align: justify; text-align-last: left; hyphens: none; }

/* round 27 */
/* the summary paragraph widens with the window instead of sitting in a narrow column */
.pj-brief { max-width: none; font-size: clamp(18px, 1.5vw, 26px); }
.pj-over { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
/* text that sits on the right lines up to the right */
.pj-over .pj-meta { text-align: right; }
.st-row.flip .st-row-text, .pj-row.flip .pj-row-text { text-align: right; justify-items: end; }
.st-row.flip .st-row-text p, .pj-row.flip .pj-row-text p { margin-left: auto; }
.st-build-head p, .st-finals-head p { text-align: right; }

/* the finals run: the posters as they went out on Instagram, over the club's own artwork */
.st-finals { position: relative; padding: 9vh var(--edge) 10vh; overflow: hidden; isolation: isolate; }
.st-finals::before { content: ""; position: absolute; inset: -20px; z-index: -2; background: url("assets/hero-mudgee-rebrand.jpg") center / cover; filter: saturate(1.15) contrast(1.05); transform: scale(1.06); }
.st-finals::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,18,18,.55), rgba(18,18,18,.25) 40%, rgba(18,18,18,.55)); }
.st-finals-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 30px; margin-bottom: 5vh; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.st-finals-head .pr-h { margin: 0; }
.st-finals-head p { margin: 0; max-width: 40ch; color: #ece5d8; font-size: 15px; }
.ig-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.ig { background: #ece5d8; color: var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); transition: transform .5s var(--ease); }
.ig:hover { transform: translateY(-6px) rotate(-.6deg); }
.ig header { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.ig header img { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: #111; }
.ig header b { font: 600 13px var(--f); }
.ig-pic { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ig footer { display: grid; gap: 6px; padding: 10px 12px 12px; }
.ig-ico { display: flex; gap: 12px; }
.ig-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.ig-ico .ig-save { margin-left: auto; }
.ig small { font-size: 12px; color: rgba(30,30,30,.7); }

/* round by round: the season in one sideways strip, drag or scroll */
.st-weeks { padding: 8vh 0 6vh; border-top: 1px solid var(--line-d); }
.st-weeks .st-build-head { padding: 0 var(--edge); }
.wk-strip { display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--edge) 18px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--edge); cursor: grab; scrollbar-width: thin; scrollbar-color: rgba(236,229,216,.25) transparent; }
.wk-strip.drag { cursor: grabbing; scroll-snap-type: none; }
.wk-strip figure { flex: none; margin: 0; scroll-snap-align: start; width: min(42vh * .8 * 1.6, 70vw); width: clamp(240px, 26vw, 460px); }
.wk-strip img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; user-select: none; }
.wk-strip figcaption { margin-top: 10px; font-size: 13px; color: var(--mute-d); }
@media (max-width: 900px) {
  .pj-over { grid-template-columns: 1fr; }
  .pj-over .pj-meta, .st-build-head p, .st-finals-head p { text-align: left; }
  .ig-row { grid-template-columns: 1fr 1fr; }
  .wk-strip figure { width: 70vw; }
}

/* round 28 */
.ig-ico svg.ig-liked { fill: #ed4956; stroke: #ed4956; }
.ig small { font-weight: 600; color: var(--ink); font-size: 13px; }
.st-finals::before { filter: blur(18px) saturate(1.2); transform: scale(1.12); }

/* the season deck: one poster in focus, the next few stacked behind */
.st-weeks .wk-strip { display: none; }
.deck { position: relative; display: grid; justify-items: center; gap: 26px; padding: 2vh var(--edge) 0; outline: none; }
.deck-cards { position: relative; width: min(calc(min(76vh, 720px) * .8), 78vw); aspect-ratio: 4 / 5; touch-action: pan-y; cursor: pointer; user-select: none; }
.deck-card { position: absolute; inset: 0; margin: 0; border-radius: 6px; overflow: hidden; background: var(--ink-2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.75); transform-origin: 50% 90%;
  transition: transform .8s cubic-bezier(.76, 0, .24, 1), opacity .6s ease, filter .6s ease; will-change: transform; }
.deck-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.deck-ui { display: flex; align-items: center; gap: 18px; }
.deck-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(236,229,216,.28); background: none; color: #ece5d8; cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.deck-btn:hover { background: #ece5d8; color: var(--ink); border-color: #ece5d8; }
.deck-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deck-count { font-size: 13px; color: var(--mute-d); min-width: 60px; text-align: center; letter-spacing: .08em; }
.deck:focus-visible .deck-cards { outline: 1px solid var(--blue); outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) { .deck-card { transition: none; } }

/* the season: a plain gallery, posters in rows */
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); padding: 0 var(--edge); }
.st-grid figure { margin: 0; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.st-grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease); }
.st-grid figure:hover img { transform: scale(1.03); }
@media (max-width: 900px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the "view the full rebrand" link at the end of a case study: thumbnail and title */
.pj-rel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 70px); padding: 8vh var(--edge); border-top: 1px solid var(--line-d); color: #ece5d8; text-decoration: none; }
.pj-rel figure { margin: 0; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--ink-2); }
.pj-rel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pj-rel:hover img { transform: scale(1.04); }
.pj-rel-text { display: grid; gap: 12px; justify-items: start; }
.pj-rel-text span { font-size: 14px; color: var(--blue); }
.pj-rel-text b { font: 600 clamp(40px, 5vw, 88px)/.9 var(--fd); text-transform: uppercase; }
.pj-rel-text i { font-style: normal; font-size: 30px; transition: transform .5s var(--ease); }
.pj-rel:hover .pj-rel-text i { transform: translateX(10px); }
@media (max-width: 900px) { .pj-rel { grid-template-columns: 1fr; } }

/* the related banner: full width, like a project header, words over the picture */
.pj-rel { position: relative; display: block; padding: 0; gap: 0; border-top: 0; overflow: hidden; height: min(100vh, 62.5vw); min-height: 420px; }
.pj-rel figure { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.pj-rel figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.pj-rel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,18,18,.6) 0%, rgba(18,18,18,.2) 45%, transparent 70%), linear-gradient(180deg, rgba(18,18,18,.3) 0%, transparent 35%, rgba(18,18,18,.85) 100%); pointer-events: none; }
.pj-rel-text { position: absolute; z-index: 1; left: var(--edge); right: var(--edge); bottom: clamp(28px, 7vh, 70px); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.pj-rel-text span { color: #ece5d8; font-size: 15px; }
.pj-rel-text b { font-size: clamp(54px, 7vw, 120px); }
/* the banner uses the thumbnail with words built in, so it is always exactly the picture's shape: nothing gets cropped */
.pj-rel { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.pj-rel figure img { object-fit: contain; object-position: center; }

/* case study rows: the pictures join up, each filling its whole side, edge to edge, with no gaps between rows */
.pj-steps { gap: 0; }
.pj-steps > .pr-h { margin-bottom: 4vh; }
.pj-row-pic img, .pj-row.flip .pj-row-pic img { width: 100%; height: auto; max-height: none; object-fit: fill; object-position: center; display: block; }
.pj-row-pic { line-height: 0; }

/* rebrand: a feed post and a story side by side, overlapped so they read as one brand */
.ig-pair { display: flex; justify-content: center; align-items: center; padding: 2vh 0 1vh; }
.ig-pair .ig { width: min(400px, 46vw); position: relative; z-index: 1; rotate: -2deg; }
.ig-story { position: relative; z-index: 2; width: min(290px, 34vw); aspect-ratio: 9 / 16; margin-left: -46px; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 6px #111; rotate: 3deg; transition: transform .5s var(--ease); }
.ig-story > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-story:hover, .ig-pair .ig:hover { transform: translateY(-6px); }
.ig-story-top { position: absolute; left: 10px; right: 10px; top: 8px; display: flex; align-items: center; gap: 7px; color: #ece5d8; font: 600 11px var(--f); text-shadow: 0 1px 6px rgba(0,0,0,.5); flex-wrap: wrap; }
.ig-story-top i { flex: 0 0 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ece5d8 60%, rgba(236,229,216,.35) 60%); margin-bottom: 6px; }
.ig-story-top img { width: 22px; height: 22px; border-radius: 50%; background: #111; object-fit: contain; }

/* every type of post, labelled */
.pj-types { padding: 8vh var(--edge) 6vh; border-top: 1px solid var(--line-d); }
.pj-types .st-build-head { padding: 0; }
.pj-types-grid { columns: 4 220px; column-gap: 14px; }
.pj-types-grid figure { margin: 0 0 18px; break-inside: avoid; }
.pj-types-grid img { display: block; width: 100%; height: auto; border-radius: 4px; }
.pj-types-grid figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; color: #ece5d8; }
@media (max-width: 700px) { .ig-pair .ig { width: 56vw; } .ig-story { width: 40vw; margin-left: -28px; } }

/* home and away: two post-and-story pairs side by side */
.ig-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 60px); align-items: center; }
.ig-pairs .ig-pair { position: relative; padding-top: 34px; }
.ig-pairs .ig-pair .ig { width: min(330px, 22vw); }
.ig-pairs .ig-story { width: min(230px, 15.5vw); margin-left: -38px; }
.ig-pair-label { position: absolute; top: 0; left: 50%; translate: -50% 0; font-size: clamp(26px, 2.2vw, 36px); color: #ece5d8; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
@media (max-width: 900px) {
  .ig-pairs { grid-template-columns: 1fr; gap: 6vh; }
  .ig-pairs .ig-pair .ig { width: 56vw; } .ig-pairs .ig-story { width: 40vw; margin-left: -28px; }
}

/* post examples: a row of three, then a row of four, all the same shape, no gaps */
.pj-types-grid { columns: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.pj-types-grid figure { margin: 0; grid-column: span 3; }
.pj-types-grid figure:nth-child(-n+3) { grid-column: span 4; }
.pj-types-grid img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 700px) { .pj-types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pj-types-grid figure, .pj-types-grid figure:nth-child(-n+3) { grid-column: auto; } .pj-types-grid figure:first-child { grid-column: 1 / -1; } }

/* round 29 */
/* "what was made": a small coloured label, then the deliverables as a big uppercase list, like the reference */
.pj-made { display: grid; gap: 0; align-content: start; justify-items: start; text-align: left; }
.pj-made-h { margin: 0 0 22px; font: 600 clamp(20px, 1.6vw, 26px)/1 var(--fd); text-transform: uppercase; letter-spacing: .01em; color: var(--blue); }
.pj-made ul { list-style: none; margin: 0; padding: 0; }
.pj-made li { font: 600 clamp(30px, 2.8vw, 46px)/1.02 var(--fd); text-transform: uppercase; color: #ece5d8; }
.pj-made-sub { margin: 18px 0 0; font-size: 13px; color: var(--mute-d); }
.pj-over { align-items: start; }
.st-intro-text { gap: 40px; }

/* section headings: the short line sits under the heading, left aligned, not pushed to the right */
.st-finals-head, .st-build-head { display: grid; justify-content: start; justify-items: start; gap: 10px; text-align: left; }
.st-finals-head p, .st-build-head p, .pj-types .st-build-head p { text-align: left; max-width: 46ch; }

/* home and away labels line up with the left edge of their post */
.ig-pairs .ig-pair { display: flex; flex-direction: column; align-items: flex-start; }
.ig-pairs .ig-pair-label { position: static; translate: none; margin: 0 0 10px; }
.ig-pairs .ig-pair { padding-top: 0; }
.ig-pairs .ig-pair-row { display: flex; align-items: center; }
.ig-tag { color: #00376b; font-weight: 500; }
.ig-pairs .ig-pair { width: fit-content; justify-self: center; }


/* round 31: a row can hold a set of pictures side by side (Olympic NAIDOC), and a plain three-across gallery */
.pj-row-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pj-row-set img { aspect-ratio: 4 / 5; object-fit: cover; }
.pj-types-grid.c3 figure, .pj-types-grid.c3 figure:nth-child(-n+3) { grid-column: span 4; }
@media (max-width: 700px) { .pj-types-grid.c3 figure, .pj-types-grid.c3 figure:first-child { grid-column: auto; } .pj-types-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* round 32: club bands (Poster work), the made-in app tiles, and "What was made" sized to fit its column */
.pj-made li { font-size: clamp(24px, 2.3vw, 42px); }
.pj-brief-wrap { display: grid; gap: 22px; align-content: start; }
.pj-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.pj-tools li { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--mute-d); }
.pj-clubs { padding: 2vh var(--edge) 6vh; display: grid; }
.pj-club { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding: 5vh 0; border-top: 1px solid var(--line-d); }
.pj-club-text { display: grid; gap: 12px; justify-items: start; }
.pj-club-who { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.pj-club-who img { width: 48px; height: 48px; object-fit: contain; padding: 6px; background: var(--paper); border-radius: 10px; }
.pj-club-text h3 { margin: 0; font: 600 clamp(26px, 2.4vw, 40px)/.95 var(--fd); text-transform: uppercase; }
.pj-club-text p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(236,229,216,.78); max-width: 40ch; }
.pj-club-work { display: flex; gap: 12px; justify-content: flex-end; }
.pj-club-work figure { margin: 0; }
.pj-club-work img { display: block; height: clamp(300px, 58vh, 560px); width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.pj-club-work figure:only-child img { height: clamp(340px, 66vh, 640px); }
.pj-club-work:has(figure:nth-child(3)) img { height: auto; width: 100%; }
.pj-club-work:has(figure:nth-child(3)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .pj-club { grid-template-columns: 1fr; }
  .pj-club-work { justify-content: flex-start; }
  .pj-club-work img, .pj-club-work figure:only-child img { height: auto; width: 100%; }
  .pj-club-work figure:only-child { width: 100%; }
}
.pj-club:has(.pj-club-work figure:only-child) { grid-template-columns: minmax(0, 1fr) auto; }
.pj-club-text p { max-width: 48ch; }
@media (max-width: 900px) { .pj-club:has(.pj-club-work figure:only-child) { grid-template-columns: 1fr; } }

/* round 33: real app icons; club bands all built the same way, logo plain, the work right beside the words */
.pj-tools img { width: 30px; height: 30px; display: block; }
.pj-club, .pj-club:has(.pj-club-work figure:only-child) { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr); align-items: center; }
.pj-club-who { display: grid; gap: 14px; justify-items: start; }
.pj-club-who img { width: auto; height: 64px; max-width: 90px; padding: 0; background: none; border-radius: 0; object-fit: contain; }
.pj-club-work { justify-content: flex-start; }
.pj-club-work img, .pj-club-work figure:only-child img { height: clamp(300px, 52vh, 500px); }
.pj-club-work:has(figure:nth-child(3)) { display: flex; }
.pj-club-work:has(figure:nth-child(3)) img { height: clamp(240px, 40vh, 400px); width: auto; }
@media (max-width: 900px) {
  .pj-club, .pj-club:has(.pj-club-work figure:only-child) { grid-template-columns: 1fr; }
  .pj-club-work:has(figure:nth-child(3)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pj-club-work img, .pj-club-work figure:only-child img, .pj-club-work:has(figure:nth-child(3)) img { height: auto; width: 100%; }
}

/* round 34: club text set exactly like the step text on the other projects */
.pj-club-text { display: block; }
.pj-club-logo { display: block; height: 56px; width: auto; max-width: 80px; object-fit: contain; margin-bottom: 18px; }
.pj-club-text h3 { margin: 0 0 12px; font: 600 clamp(26px, 2.6vw, 40px)/.95 var(--fd); }
.pj-club-text p { font-size: 16px; color: rgba(236,229,216,.8); max-width: 50ch; }

/* round 35: poster rows (Poster work) use the standard rows; portrait posters are held to the screen height and sit against the outside edge */
.pj-steps.fit-poster .pj-row-pic { display: flex; justify-content: flex-end; }
.pj-steps.fit-poster .pj-row.flip .pj-row-pic { justify-content: flex-start; }
.pj-steps.fit-poster .pj-row-pic > img { width: auto; max-width: 100%; height: min(82vh, 760px); max-height: none; object-fit: cover; aspect-ratio: 4 / 5; }
.pj-steps.fit-poster .pj-row-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pj-steps.fit-poster .pj-row-set > img { width: 100%; height: auto; }
.pj-step .pj-club-logo { margin-bottom: 18px; }
.pj-row.flip .pj-step .pj-club-logo { margin-left: auto; }
@media (max-width: 900px) { .pj-steps.fit-poster .pj-row-pic > img { width: 100%; height: auto; } }

/* round 36: the club badge sits beside the club name and title, as tall as the two of them together */
.pj-step.has-logo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; }
.pj-step.has-logo .pj-club-logo { grid-column: 1; grid-row: 1 / 3; width: auto; max-width: none; margin: 0; object-fit: contain; }
.pj-step.has-logo .pr-k, .pj-step.has-logo h3 { grid-column: 2; }
.pj-step.has-logo h3 { margin-bottom: 0; }
.pj-step.has-logo p { grid-column: 1 / -1; margin-top: 16px; }
.pj-row.flip .pj-step.has-logo { grid-template-columns: minmax(0, 1fr) auto; }
.pj-row.flip .pj-step.has-logo .pj-club-logo { grid-column: 2; margin: 0; }
.pj-row.flip .pj-step.has-logo .pr-k, .pj-row.flip .pj-step.has-logo h3 { grid-column: 1; }

.pj-step.has-logo p { max-width: 62ch; }
@media (min-width: 901px) { .pj-step.has-logo h3 { white-space: nowrap; } }

/* round 37: a row can play a video (Cruse crest animation); portrait video is held to the screen height against the outside edge */
.pj-row-pic:has(> video) { display: flex; justify-content: flex-end; }
.pj-row.flip .pj-row-pic:has(> video) { justify-content: flex-start; }
.pj-row-pic > video { display: block; height: min(80vh, 720px); width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink-2); }
@media (max-width: 900px) { .pj-row-pic > video { width: 100%; height: auto; } }

/* round 38: a project header can play a video over its still; the big title lines up with the words above it by eye */
.cover-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 35%; }
.pj-title { margin-left: -.045em; }

/* round 39: a short header title on one line, smaller, when the header picture already carries the name (Cruse) */
.pj-title.is-line { font-size: clamp(34px, 4.6vw, 76px); white-space: nowrap; }

/* ---------- round 40: the showcase (Cruse). Edge-to-edge pictures with the thinking between them ---------- */
.sc { display: grid; }
.sc-media { margin: 0; line-height: 0; background: var(--ink-2); }
.sc-media img, .sc-media video { display: block; width: 100%; height: auto; }
.sc-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px clamp(28px, 6vw, 120px); align-items: start; padding: clamp(64px, 11vh, 130px) var(--edge) clamp(40px, 7vh, 90px); }
.sc-h { margin: 0; font: 600 clamp(34px, 3.6vw, 60px)/.95 var(--fd); text-transform: uppercase; text-wrap: balance; }
.sc-text > p { margin: 0; padding-top: clamp(0px, 2.2vw, 30px); font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6; color: rgba(236,229,216,.8); max-width: 46ch; text-wrap: pretty; }
.sc-pillars, .sc-voice { padding: 11vh var(--edge) 9vh; border-top: 1px solid var(--line-d); }
.sc-pillars > .pr-h { margin: 0 0 6vh; }
.sc-pillars ol, .sc-voice ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 54px); }
.sc-pillars li, .sc-voice li { border-top: 1px solid var(--line-d); padding-top: 22px; }
.sc-pillars h3, .sc-voice h3 { margin: 0 0 12px; font: 600 clamp(24px, 2.2vw, 36px)/.95 var(--fd); text-transform: uppercase; }
.sc-pillars p, .sc-voice li p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(236,229,216,.78); }
.sc-voice .sc-text { padding: 0 0 6vh; }
.sc-voice table { width: 100%; margin-top: 7vh; border-collapse: collapse; font-size: clamp(16px, 1.3vw, 21px); }
.sc-voice th { text-align: left; font: 600 12px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); padding: 0 0 14px; }
.sc-voice td { padding: 18px 24px 18px 0; border-top: 1px solid var(--line-d); width: 50%; }
.sc-voice td:first-child { color: var(--mute-d); text-decoration: line-through; text-decoration-color: rgba(236,229,216,.35); }
.sc-voice td:last-child { color: #ece5d8; }
.sc-sliders { padding-bottom: 10vh; border-top: 1px solid var(--line-d); }
.sc .st-stats { padding-top: 10vh; border-top: 1px solid var(--line-d); }
@media (max-width: 900px) {
  .sc-text { grid-template-columns: 1fr; align-items: start; padding: 8vh var(--edge) 5vh; }
  .sc-pillars ol, .sc-voice ol { grid-template-columns: 1fr; }
  .sc-voice td { padding-right: 12px; }
}

/* round 41: Cruse built in code. Concepts, logo panels, the palette, the suite switch and the cards */
.sc-concepts { border-top: 1px solid var(--line-d); padding-bottom: clamp(56px, 10vh, 120px); }
.sc-concepts ol { list-style: none; margin: 0; padding: 0 var(--edge); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.sc-concepts li { display: grid; align-content: start; gap: 10px; }
.sc-panel { margin: 0; display: grid; place-items: center; height: clamp(420px, 82vh, 860px); background: var(--bg); }
.sc-palette { border-top: 1px solid var(--line-d); padding-bottom: clamp(56px, 10vh, 120px); }
.sc-swatches { display: flex; margin: 0 var(--edge); height: clamp(320px, 56vh, 560px); border-radius: 4px; overflow: hidden; }
.sc-sw { flex: var(--w) 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: clamp(14px, 1.6vw, 26px); background: var(--c); color: #ece5d8; overflow: hidden; }
.sc-sw.is-light { color: #0C2340; }
.sc-sw b { font: 600 clamp(18px, 1.7vw, 28px)/1 var(--fd); text-transform: uppercase; white-space: nowrap; }
.sc-sw span, .sc-sw code { font: 500 13px/1.3 var(--f); white-space: nowrap; opacity: .82; }
.sc-suite { border-top: 1px solid var(--line-d); padding-bottom: clamp(56px, 10vh, 120px); }
.sc-sw-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 var(--edge) 22px; }
.sc-sw-btns button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 10px; border: 0; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-d); color: var(--mute-d); font: 500 14px var(--f); cursor: pointer; transition: box-shadow .3s var(--ease), color .3s var(--ease); }
.sc-sw-btns button i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(236,229,216,.25); }
.sc-sw-btns button[aria-pressed="true"], .sc-sw-btns button:hover { box-shadow: inset 0 0 0 1px var(--paper); color: var(--paper); }
.sc-suite-grid { list-style: none; margin: 0 var(--edge); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; border-radius: 4px; overflow: hidden; }
.sc-suite-grid span { position: absolute; left: 14px; bottom: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(236,229,216,.7); mix-blend-mode: difference; }
.sc-cards { margin: 0; display: flex; justify-content: center; align-items: center; gap: clamp(16px, 3vw, 48px); padding: clamp(48px, 12vh, 140px) var(--edge); background: var(--bg); }
.sc-cards img { width: min(40%, 620px); height: auto; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.sc-cards img:first-child { transform: rotate(-3deg); } .sc-cards img:last-child { transform: rotate(2deg) translateY(6%); }
@media (max-width: 900px) {
  .sc-h { max-width: none; }
  .sc-text > p { padding-top: 0; }
  .sc-concepts ol { grid-template-columns: 1fr; gap: 48px; }
  .sc-panel { height: auto; aspect-ratio: 4 / 5; }
  .sc-swatches { flex-direction: column; height: auto; }
  .sc-sw { flex: none; min-height: calc(var(--w) * 5px + 70px); }
  .sc-suite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-cards { flex-direction: column; }
  .sc-cards img { width: 100%; } .sc-cards img:last-child { transform: rotate(2deg); }
}

/* round 42: Space Grotesk Medium for the case studies and all secondary text, matching the case study thumbnails.
   Barlow Condensed stays for the big headings. */
:root { --f: "Space Grotesk", "FNGX Barlow", system-ui, sans-serif; }
body { font-weight: 500; letter-spacing: 0; }

/* round 43: the brief as rulers, the concepts bare on the page, logos centred on their own box */
.sc-h { max-width: 22ch; }
.sc-sliders ul { list-style: none; margin: 0; padding: 0 var(--edge); }
.sc-sliders li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: end; gap: clamp(16px, 2.6vw, 44px); padding: clamp(18px, 2.4vh, 28px) 0; border-top: 1px solid var(--line-d); }
.sc-sliders li:last-child { border-bottom: 1px solid var(--line-d); }
.sc-sliders li > span { font: 600 clamp(20px, 2.3vw, 38px)/.9 var(--fd); text-transform: uppercase; color: rgba(236,229,216,.28); transition: color .6s var(--ease); }
.sc-sliders li > span.is-on { color: var(--paper); }
.sc-sliders li > span:last-child { text-align: right; }
.sc-rule { position: relative; height: 30px; box-shadow: inset 0 -1px rgba(236,229,216,.3);
  background: repeating-linear-gradient(90deg, rgba(236,229,216,.3) 0 1px, transparent 1px 10%) left bottom / 100% 8px no-repeat; border-right: 1px solid rgba(236,229,216,.3); }
.sc-rule::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 16px; background: rgba(236,229,216,.45); }
.sc-rule .was { position: absolute; left: var(--a); bottom: 0; width: 2px; height: 22px; margin-left: -1px; background: rgba(236,229,216,.6); }
.sc-rule b { position: absolute; left: var(--lo); right: calc(100% - var(--hi)); bottom: -1px; height: 3px; background: var(--paper); }
.sc-rule .now { position: absolute; left: var(--z); bottom: -10px; width: 30px; height: auto; transform: translateX(-50%); z-index: 1; }
.sc-rule i.now { width: 14px; height: 14px; bottom: -6px; border-radius: 50%; background: var(--paper); }
.sc-legend { display: flex; align-items: center; gap: 10px; margin: 4vh var(--edge) 0; font-size: 13px; color: var(--mute-d); }
.sc-legend .was { display: inline-block; width: 2px; height: 16px; background: rgba(236,229,216,.6); }
.sc-legend img, .sc-legend .now { width: 20px; height: auto; margin-left: 22px; }
.sc-cl { position: relative; height: clamp(220px, 26vw, 400px); margin-bottom: 26px; border-bottom: 1px solid var(--line-d); }
.sc-cl img { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: auto; height: auto; max-width: 74%; max-height: calc(100% - 28px); }
.sc-concepts h3 { margin: 0 0 10px; font: 500 clamp(18px, 1.4vw, 22px)/1.2 var(--f); }
.sc-concepts h3 small { margin-left: 8px; font-size: .72em; color: var(--blue); }
.sc-concepts li > p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(236,229,216,.72); max-width: 38ch; }
.sc-panel { position: relative; }
.sc-panel img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: 56%; max-width: 70%; }
.sc-panel.is-small img { height: 44%; }
.sc-suite-grid li { position: relative; aspect-ratio: 4 / 3; background: var(--bg); transition: background .5s var(--ease); }
.sc-suite-grid img { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 62%; max-height: 52%; }
@media (max-width: 900px) {
  .sc-sliders li { grid-template-columns: 1fr 1fr; grid-template-areas: "l r" "rule rule"; row-gap: 14px; }
  .sc-sliders li > span:first-child { grid-area: l; } .sc-sliders li > span:last-child { grid-area: r; } .sc-rule { grid-area: rule; }
  .sc-cl { height: 64vw; }
}

/* round 44: the portfolio as a strip (after louismoss.com). Same card size as the carousel's front card. */
.pf-strip { position: relative; width: 100vw; margin-left: calc(50% - 50vw); text-align: left; }
.cv[hidden] { display: none !important; }
.pf-view { overflow: hidden; }
.pf-track { display: flex; gap: clamp(10px, 1.2vw, 18px); width: max-content; padding: 0 var(--edge); will-change: transform; }
.pf-card { flex: none; width: calc(min(var(--card-h) * 1.25, 92vw)); color: var(--paper); text-decoration: none; }
.pf-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-2); }
.pf-frame img, .pf-frame video { transition: transform 1.2s var(--ease), opacity .6s var(--ease); }
.pf-cap { display: grid; grid-template-columns: 1fr; column-gap: 14px; padding-top: 14px; font: 500 12px/1.4 var(--f); letter-spacing: .1em; text-transform: uppercase; }
.pf-cap span { color: var(--mute-d); }
.pf-cap small { grid-column: 1; font-size: 11px; color: var(--mute-d); }
.pf-card:hover .pf-frame .cf-fg { transform: scale(1.03); }
.pf-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: clamp(22px, 4vh, 40px) var(--edge) 0; font: 500 12px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mute-d); }
.pf-line { position: relative; height: 1px; background: var(--line-d); overflow: hidden; }
.pf-line i { position: absolute; inset: 0; background: var(--paper); transform-origin: left; transform: scaleX(.04); }
@media (max-width: 760px) {
  .pf-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pf-view::-webkit-scrollbar { display: none; }
  .pf-card { scroll-snap-align: start; scroll-margin-left: var(--edge); }
  .pf-hint::before { content: "Swipe"; } .pf-hint { font-size: 0; } .pf-hint::before { font-size: 12px; }
}
@media (max-width: 699px) { .pf-card { width: calc(min(var(--card-h) * 1.25, 66vw)); } }

/* round 45: the project title is two lines at most (site.js steps the size down if it would wrap to three) */
.pj-title { max-width: none; }

/* round 46: secondary text in capitals with no tracking (Space Grotesk Medium, as set in Photoshop), one off-white
   everywhere, the brief back to dots, the strip's names on hover, the icon on graph paper */
body { text-transform: uppercase; }
body *:not(svg):not(svg *) { letter-spacing: 0 !important; }
input, textarea, select, input::placeholder, textarea::placeholder { text-transform: none; }
.sc-rule .was { width: 14px; height: 14px; bottom: -7px; margin-left: -7px; border-radius: 50%; border: 2px solid rgba(236,229,216,.6); background: var(--ink); box-sizing: border-box; }
.sc-rule i.now { width: 16px; height: 16px; bottom: -8px; z-index: 1; }
.sc-legend .was { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(236,229,216,.6); background: none; box-sizing: border-box; }
.sc-legend .now { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); margin-left: 22px; }
.pf-cap { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); font-size: 12px; }
.pf-card:hover .pf-cap, .pf-card:focus-visible .pf-cap { opacity: 1; transform: none; }
@media (hover: none) { .pf-cap { opacity: 1; transform: none; } }
.pf-view { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pf-view.is-drag { cursor: grabbing; } .pf-view.is-drag .pf-card { pointer-events: none; }
.pf-card img, .pf-card video { -webkit-user-drag: none; }
@media (max-width: 760px) { .pf-view { overflow: hidden; scroll-snap-type: none; } }
.pj-made { justify-items: end; text-align: right; }
.sc-sw-btns button { font: 500 12px/1 var(--f); text-transform: uppercase; }
.sc-construct { margin: 0; padding: clamp(24px, 5vh, 60px) 0; background: var(--bg); }
.sc-construct svg { display: block; width: 100%; height: clamp(360px, 70vh, 760px); }
.sc-construct .split { stroke: #FFF8F0; stroke-opacity: .3; stroke-width: 1.5; stroke-dasharray: 6 8; }
.sc-construct .half.c { fill: #F3CD50; }
.sc-construct .half.f { fill: #FFF8F0; }
.sc-construct .erm { fill: #F3CD50; fill-opacity: .35; }
.sc-construct .tag line { stroke-width: 2; }
.sc-construct .tag.c line, .sc-construct .tag.c circle { stroke: #F3CD50; fill: #F3CD50; }
.sc-construct .tag.f line, .sc-construct .tag.f circle { stroke: #FFF8F0; fill: #FFF8F0; }
.sc-construct .big { font: 600 300px/1 var(--fd); text-anchor: middle; }
.sc-construct .tag.c .big, .sc-construct .tag.c .lbl { fill: #F3CD50; }
.sc-construct .tag.f .big, .sc-construct .tag.f .lbl { fill: #FFF8F0; }
.sc-construct .lbl { font: 500 24px var(--f); text-anchor: middle; text-transform: uppercase; }

/* round 47: heading and paragraph start level with each other; the kicker sits on its own row above both */
.sc-text { align-items: start; }
.sc-text > .sc-k { grid-column: 1 / -1; margin: 0 0 -6px; }
.sc-text > .sc-h { grid-column: 1; }
.sc-text > p { grid-column: 2; padding-top: .35em; }
@media (max-width: 900px) { .sc-text > .sc-h, .sc-text > p { grid-column: 1; } .sc-text > p { padding-top: 0; } }

/* round 48: only the row of projects follows louismoss.com: it starts at the left edge of the screen with a 10px gap */
.pf-strip .pf-track { padding: 0; gap: 10px; }
.clubs .pf-strip { width: auto; margin-left: 0; margin-right: 0; }
.pf-bar { display: flex; justify-content: center; }

/* round 49: the overview columns centred against each other; the list only sits right when it is beside the brief.
   The strip's drag disc and arrows. */
.pj-over { align-items: center; }
.pj-made { justify-items: start; text-align: left; }
@media (min-width: 901px) { .pj-over .pj-made { justify-items: end; text-align: right; } }
.pf-hint i { font-style: normal; display: inline-block; transition: transform .6s var(--ease); }
.pf-strip:hover .pf-hint i:first-child { transform: translateX(-4px); } .pf-strip:hover .pf-hint i:last-child { transform: translateX(4px); }


/* round 50: the business card shows the Cruse Finance logo on the Gold Coast, above the heading */
.aud-card img.aud-logo { inset: auto; left: 50%; top: 9%; width: auto; height: 30%; max-width: 62%; object-fit: contain; z-index: 1; translate: -50% 0; filter: none; transform: none; opacity: 0; transition: opacity .6s var(--ease); }
.aud-card:hover img.aud-logo { opacity: 1; filter: none; transform: none; transition-delay: .15s; }
@media (hover: none) { .aud-card img.aud-logo { opacity: 1; } }
@media (max-width: 900px) { .aud-card img.aud-logo { opacity: 1; top: 19%; height: 30%; } }

/* round 51: legal links in the footer */
.gf-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bk-fine a { color: inherit; text-decoration: underline; }
.gf-credit { font-size: 11px; opacity: .7; } .gf-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }