/* ONEUL Group — rebuilt from the Framer site (values measured from www.oneul.com.au, 2026-11-02) */
@font-face { font-family: "Anton SC"; src: url(/assets/fonts/anton-sc.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Clash Grotesk"; src: url(/assets/fonts/clash-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Clash Grotesk"; src: url(/assets/fonts/clash-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Clash Grotesk"; src: url(/assets/fonts/clash-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/assets/fonts/satoshi-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/assets/fonts/satoshi-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/assets/fonts/satoshi-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url(/assets/fonts/urbanist-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url(/assets/fonts/urbanist-900.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/assets/fonts/inter-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/assets/fonts/inter-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/assets/fonts/inter-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Oswald"; src: url(/assets/fonts/oswald-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Apfel Grotezk"; src: url(/assets/fonts/apfel-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #141414; --bg-1: #111; --bg-2: #1a1a1a; --ink: #fff; --cream: #f5f5f3;
  --muted: #8a837b; --accent: #b65a2b; --field: #f4f0ea;
  --display: "Anton SC", Impact, sans-serif; --clash: "Clash Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pad: 40px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--clash); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- header + menu ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 42px 42px 0; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.site-logo img { width: 138px; height: 35px; object-fit: contain; object-position: left center; }
.header-right { display: flex; align-items: center; gap: 30px; position: relative; z-index: 3; }
.sydney-time { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 16px; letter-spacing: .05em; }
.sydney-time strong { font-weight: 500; letter-spacing: 0; min-width: 94px; }
.menu-btn { border: 2px solid #fff; border-radius: 8px; background: #fff; padding: 0; }
.menu-btn span { display: block; background: var(--bg-1); border-radius: 6px; padding: 7px 8px; font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; min-width: 66px; text-align: center; }
.menu-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(20,20,20,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.site-menu { position: absolute; z-index: 2; top: 84px; right: 42px; display: flex; gap: 2px; padding: 2px; background: #fff; border-radius: 12px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .35s, transform .35s, visibility .35s; }
.menu-open .menu-scrim, .menu-open .site-menu { opacity: 1; visibility: visible; transform: none; }
.menu-links { width: 420px; background: var(--bg-1); border-radius: 10px; padding: 16px 20px 20px; display: flex; flex-direction: column; }
.menu-links a { display: flex; justify-content: space-between; align-items: center; height: 48px; font-family: var(--display); font-size: 20px; line-height: 22px; letter-spacing: .04em; text-transform: uppercase; padding: 0 10px; border-radius: 6px; transition: background .2s; }
.menu-links a img { opacity: 0; transition: opacity .2s; }
.menu-links a:hover { background: rgba(255,255,255,.06); }
.menu-links a:hover img { opacity: 1; }
.menu-card { position: relative; width: 271px; height: 356px; border-radius: 10px; overflow: hidden; background: var(--bg-1); display: flex; flex-direction: column; justify-content: space-between; padding: 30px 30px 26px; }
.menu-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.menu-card-logo, .menu-card p { position: relative; }
.menu-card-logo { width: 121px; height: 31px; object-fit: contain; object-position: left; }
.menu-card p { font-size: 18px; line-height: 1.2; letter-spacing: .04em; display: flex; flex-direction: column; }
.menu-card p a { font-weight: 600; }

/* ---------- home slider ---------- */
.page-home { overflow: hidden; height: 100svh; }
.hero-slider { position: relative; height: 100svh; background: var(--bg-1); overflow: hidden; touch-action: pan-x; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,20,.55); }
.slide-text { position: absolute; z-index: 1; left: 24px; top: 50%; transform: translateY(-50%); max-width: 620px; font-family: "Urbanist", sans-serif; }
.slide-text h1, .slide-text h2 { font-size: 70px; line-height: 1.21; font-weight: 900; letter-spacing: -.03em; white-space: nowrap; }
.slide-cat { font-size: 30px; line-height: 1; letter-spacing: .04em; color: rgba(255,255,255,.8); margin-top: 5px; }
.slide-desc { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); max-width: 420px; margin-top: 12px; }
.slide.is-active .slide-text > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.slide.is-active .slide-cat { animation-delay: .08s; }
.slide.is-active .slide-desc { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.slide-dots { position: absolute; z-index: 2; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.slide-dots button { width: 28px; height: 24px; display: flex; align-items: center; justify-content: flex-end; }
.slide-dots button::before { content: ""; width: 20px; height: 1.5px; background: rgba(255,255,255,.3); transition: width .4s, background .4s; }
.slide-dots button.is-active::before { width: 28px; background: rgba(255,255,255,.95); }
.sound-btn { position: absolute; z-index: 2; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sound-btn .ic-on, .sound-btn[aria-pressed="true"] .ic-off { display: none; }
.sound-btn[aria-pressed="true"] .ic-on { display: block; }

/* ---------- about: hero ---------- */
.about-hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: var(--cream); border-bottom: 2px solid #fff; }
.about-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%); }
.about-hero-text { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 40px; color: var(--cream); }
.about-hero h1 { font-family: var(--display); font-weight: 400; font-size: 110px; line-height: 1.05; letter-spacing: -.005em; }
.about-hero p { font-size: 26px; line-height: 1.2; max-width: 800px; margin-top: 12px; }

/* ---------- shared section bits ---------- */
.sec { position: relative; background: var(--bg-1); padding: 200px var(--pad) 200px; }
.sec-alt { background: var(--bg-2); padding-top: 100px; }
.sec-num { font-family: var(--display); font-size: 16px; line-height: 1; letter-spacing: .05em; }
.sec-rule { display: flex; align-items: center; gap: 19px; font-family: var(--display); font-size: 16px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.sec-rule i { flex: 1; height: 1px; background: rgba(255,255,255,.2); }
.big-title { font-family: var(--display); font-weight: 400; font-size: 120px; line-height: 1.1; text-transform: uppercase; }
.big-title.mid { font-size: 80px; }
.big-title.center { text-align: center; margin-top: 70px; }
.split-title { display: flex; justify-content: center; gap: 40px; font-family: var(--display); font-weight: 400; font-size: 120px; line-height: 1.1; text-transform: uppercase; margin-top: 70px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 70px; }
.col-text { padding: 0 25px 0 0; display: flex; flex-direction: column; gap: 20px; font-size: 20px; line-height: 1.2; max-width: 590px; }
.btn-outline { display: inline-flex; align-items: center; gap: 13px; padding: 15px 28px; border-radius: 12px; background: var(--bg-1); box-shadow: 0 0 0 2px #fff; font-size: 18px; line-height: 1.2; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; transition: background .25s; }
.btn-outline:hover { background: #222; }
.btn-outline img { transform: translateX(-4px); transition: transform .3s var(--ease); }
.btn-outline:hover img { transform: none; }
/* ---- motion (measured from the Framer original) ----
   html.js is set in <head>, so without JS nothing is hidden. data-a = how it enters, --d = delay. */
:root { --ease: cubic-bezier(.25,1,.5,1); }
.js [data-a] { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s); }
.js [data-a="title"] { transform: translateY(60px); }
.js [data-a="up20"] { transform: translateY(20px); }
.js [data-a="up27"] { transform: translateY(27px); }
.js [data-a="up50"] { transform: translateY(50px); transition-duration: 1.2s; }
.js [data-a="side"] { transform: translateX(50px); transition-duration: 1.2s; }
.js [data-a].is-in { opacity: 1; transform: none; }
/* photo settles from 120% to 100% inside its frame */
.js [data-a="zoom"] { opacity: 1; transform: none; overflow: hidden; }
.js [data-a="zoom"] > img { transform: scale(1.2); transition: transform 1s var(--ease); }
.js [data-a="zoom"].is-in > img { transform: none; }
/* "About / ONEUL": the two words start side by side and slide apart */
.js [data-a="spread"] { opacity: 1; transform: none; }
.js [data-a="spread"] > span { transition: transform 1s var(--ease); }
.js [data-a="spread"].is-in > span:first-child { transform: translateX(-267px); }
.js [data-a="spread"].is-in > span:last-child { transform: translateX(267px); }
/* letters come out of a blur one after another (hero + FAQ title) */
.split-ch { display: inline-block; white-space: pre; }
.js [data-split] .split-ch { opacity: 0; filter: blur(10px); transform: translateY(10px); transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .03s + var(--d,0s)); }
.js [data-split].is-in .split-ch { opacity: 1; filter: none; transform: none; }
/* section rule: the line draws from the left */
.js .sec-rule i { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.js .sec-rule.is-in i { transform: none; }
/* about hero photo settles on load */
.about-hero > img { animation: hero-zoom 1.5s var(--ease) both; }
@keyframes hero-zoom { from { transform: scale(1.2); } }
/* "Our / Brands" opens to the sides once it sticks, then lifts away after the last card */
.brands-title > span { transition: transform .9s var(--ease); }
/* both split titles open to the same spot: 100px from each edge (set per word by JS as --dx) */
.brands-title.is-open > span { transform: translateX(var(--dx, 0px)); }
.brands-title { transition: transform .9s var(--ease), opacity .6s; }
.brands-title.is-gone { transform: translateY(-380px); opacity: 0; }

/* about */
.sec-about { padding-bottom: 200px; }
/* "About / ONEUL": scrolls up, sticks 400px from the top and the two words slide apart over the next ~400px of scroll (measured on the Framer original), the body passes over it */
.about-title { position: sticky; top: 400px; z-index: 0; }
.about-title > span { transform: translateX(calc(var(--dx, 0px) * var(--sp, 0))); }
.about-body { position: relative; z-index: 1; width: 494px; margin: 140px auto 0; }
.about-cheers { height: 450px; }
.about-cheers img { width: 100%; height: 100%; object-fit: cover; }
.about-body > p { font-size: 20px; line-height: 1.2; margin-top: 30px; }
.about-strip { display: flex; gap: 2px; margin-top: 70px; }
.about-strip a { position: relative; flex: 1; height: 105px; overflow: hidden; outline: 1px solid rgba(255,255,255,.9); }
.about-strip a > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.about-strip a:hover > img { transform: scale(1.08); }
.strip-icons { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; transition: opacity .3s; background: rgba(0,0,0,.25); }
.strip-icons img { width: 24px; height: 24px; }
.about-strip a:hover .strip-icons { opacity: 1; }
.strip-label { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; font-size: 16px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }

/* expanding cards (who we are / how we build) */
.exp-cards { display: flex; gap: 2px; padding: 2px; background: #fff; margin-top: 150px; height: 506px; }
.exp-cards.tall { height: 554px; }
.exp-card { position: relative; flex: 1 1 0; min-width: 0; background: var(--bg-1); border-radius: 20px; padding: 30px; overflow: hidden; cursor: pointer; transition: flex-grow .6s cubic-bezier(.4,0,.2,1); }
.exp-card.is-open { flex-grow: 3; cursor: default; }
.exp-icon { width: 50px; height: 50px; }
.exp-body { position: absolute; left: 30px; right: 30px; bottom: 30px; }
.exp-img { width: 100%; height: 225px; object-fit: cover; border-radius: 12px; margin-bottom: 30px; transition: opacity .4s; }
.exp-row { display: flex; gap: 31px; font-size: 18px; line-height: 1.2; letter-spacing: .045em; }
.exp-num { flex: none; width: 18px; }
.exp-row h3 { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.exp-row p { margin-top: 20px; max-width: 454px; }
.exp-row .exp-tags { margin-top: 30px; font-family: "Satoshi", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.exp-card:not(.is-open) .exp-img, .exp-card:not(.is-open) .exp-row > div { opacity: 0; visibility: hidden; }
.exp-card:not(.is-open) .exp-row > div { position: absolute; }
.exp-card.is-open .exp-row > div { transition: opacity .5s .25s; }

/* brands — cards stack while scrolling, title stays behind */
.sec-brands { padding-bottom: 160px; }
.brands-title { gap: 24px; position: sticky; top: calc(50vh - 66px); z-index: 0; margin-top: 70px; }
/* the stack needs real content below the last card, or sticky can never hold it in the stacked spot (a sticky box is kept inside its parent's content box, margins and padding give no room) */
.brand-stack { position: relative; z-index: 1; margin-top: 100px; display: flex; flex-direction: column; gap: 200px; }
.brand-stack::after { content: ""; display: block; height: 100px; flex: none; }
.brand-card { position: sticky; top: calc(50vh - 260px); display: flex; gap: 2px; padding: 2px; background: #fff; width: 850px; height: 520px; flex: none; margin: 0 auto; transform-origin: center top; transform: perspective(1400px) scale(var(--s,1)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .25s ease-out; }
.brand-img { position: relative; width: 507px; flex: none; border-radius: 20px; overflow: hidden; background: var(--bg-1); }
.brand-img img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py,0)) scale(var(--ps,1.12)); transition: transform .6s var(--ease); }
a.brand-card:hover .brand-img img { --ps: 1.18; }
.brand-info { flex: 1; background: var(--bg-1); border-radius: 20px; padding: 30px 30px 30px 30px; display: flex; flex-direction: column; justify-content: space-between; }
.brand-info h3 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.brand-info dl { font-size: 18px; letter-spacing: .045em; }
.brand-info dt { text-transform: uppercase; line-height: 1; }
.brand-info dd { font-weight: 600; line-height: 1.1; margin: 6px 0 0; }
.brand-info dd + dt { margin-top: 42px; }
.portfolio { display: flex; align-items: center; gap: 40px; width: 1014px; max-width: 100%; margin: 0 auto; }
.portfolio > p { flex: none; font-size: 16px; font-weight: 500; text-transform: uppercase; padding-right: 40px; border-right: 1px solid rgba(255,255,255,.15); line-height: 50px; }
.marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee-track { display: flex; gap: 30px; width: max-content; animation: marquee 30s linear infinite; }
.marquee-track img { width: 80px; height: 50px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }
.sec-brands > .btn-outline { display: flex; width: max-content; margin: 30px auto 0; padding: 15px 30px; }

/* brand card: restaurant chips + site link */
.brand-locs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.brand-locs a, .brand-locs span { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 100px; font-size: 15px; font-weight: 500; letter-spacing: .02em; line-height: 1; transition: background .25s, color .25s, border-color .25s; }
.brand-locs a:hover { background: #fff; color: var(--bg-1); border-color: #fff; }
.brand-site { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); transition: text-decoration-color .25s; }
.brand-site:hover { text-decoration-color: #fff; }
.faq details p a { text-decoration: underline; text-underline-offset: 2px; }
.slide-link { font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 22px; }
.slide.is-active .slide-link { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .24s; }

/* how we build */
.sec-how { padding-top: 200px; padding-bottom: 200px; }
.sec-how .two-col { align-items: start; }
.sec-how .exp-cards { margin-top: 150px; }

/* why partner */
.sec-why { padding-top: 200px; padding-bottom: 200px; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; padding: 2px; background: #fff; margin-top: 60px; height: 636px; }
.why-card { position: relative; background: var(--bg-1); border-radius: 20px; overflow: hidden; }
.why-photo > img, .why-photo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0) 0%, #111 80%); opacity: .9; pointer-events: none; }
.why-photo:nth-child(2)::after { background: linear-gradient(180deg, rgba(17,17,17,0) 40%, rgba(17,17,17,.85) 100%); }
.why-photo > div { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 30px; text-align: center; }
.why-photo:nth-child(2) > div { text-align: left; }
.why-photo:nth-child(2) h3 { text-align: center; }
.why-card h3 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.why-card p { font-size: 18px; line-height: 1.2; margin-top: 10px; }
.why-list { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 2px; }
.why-list .why-card { padding: 30px 32px; display: flex; flex-direction: column; justify-content: flex-end; }
.why-list img { width: 44px; height: 44px; margin-bottom: 30px; }
.why-list h3 { font-size: 20px; }
.why-list p { letter-spacing: .045em; }

/* grow with oneul */
.sec-grow { padding-top: 200px; padding-bottom: 200px; overflow: hidden; }
.sec-grow .big-title { margin-top: 140px; }
.grow-intro { max-width: 900px; margin-top: 50px; display: flex; flex-direction: column; gap: 20px; font-size: 20px; line-height: 1.2; letter-spacing: .04em; }
.grow { display: flex; justify-content: space-between; gap: 40px; margin-top: 150px; }
.grow-list { display: flex; flex-direction: column; align-items: flex-start; }
.grow-list button { display: flex; gap: 31px; align-items: flex-start; text-align: left; font-family: var(--display); font-size: 120px; line-height: 1.1; text-transform: uppercase; color: rgba(255,255,255,.4); transition: color .35s; white-space: nowrap; }
.grow-list button span { font-family: var(--clash); font-size: 18px; line-height: 1; letter-spacing: .045em; color: #fff; padding-top: 12px; width: 36px; }
.grow-list button.is-active { color: #fff; }
.grow-list button + button { margin-top: 12px; }
.grow-list .btn-outline { margin-top: 56px; }
.grow-panels { position: relative; width: 316px; flex: none; }
.grow-panel { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.grow-panel.is-active { position: relative; opacity: 1; visibility: visible; }
.grow-panel img { width: 100%; height: 239px; object-fit: cover; border: 2px solid #fff; border-radius: 12px; }
.grow-panel ul { margin-top: 32px; padding-left: 14px; font-size: 18px; line-height: 1.2; letter-spacing: .045em; display: flex; flex-direction: column; gap: 8px; }

/* faq */
.sec-faq { background: #fff; color: #121212; padding: 200px 72px 100px; }
.sec-faq .sec-num { color: #1a1a1a; }
.sec-faq .big-title { margin-top: 40px; }
.faq { display: grid; grid-template-columns: 500px 1fr; gap: 70px; margin-top: 40px; }
.faq > img { width: 500px; height: 568px; object-fit: cover; }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq details { border: 1px solid rgba(18,18,18,.15); border-radius: 16px; padding: 0 28px; transition: box-shadow .3s; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 36px 0; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; text-transform: uppercase; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #121212; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 9px; right: 9px; top: 15px; height: 2px; background: #fff; transition: transform .3s; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.4; padding: 0 60px 36px 0; margin-top: -16px; }

/* contact */
.sec-contact { background: var(--bg-2); padding: 200px 120px; }
.contact-inner { display: grid; grid-template-columns: 576px 576px; justify-content: space-between; gap: 48px; max-width: 1200px; margin: 0 auto; }
.contact-form-col h2 { font-family: var(--display); font-weight: 400; font-size: 80px; line-height: 1.1; text-transform: uppercase; }
.contact-lead { font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.6; color: #e1e1e1; max-width: 420px; margin-top: 64px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 40px; font-family: "Inter", sans-serif; }
.contact-form label { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; height: 40px; border: 0; border-radius: 10px; background: var(--field); color: #211b16; font: 400 14px/1.4 "Inter", sans-serif; padding: 0 12px; }
.contact-form textarea { height: 100px; padding: 12px; resize: vertical; }
.contact-form ::placeholder { color: var(--muted); }
.contact-form select { appearance: none; -webkit-appearance: none; color: var(--muted); }
.contact-form select:valid { color: #211b16; }
.select { position: relative; display: block; }
.select::after { content: ""; position: absolute; right: 14px; top: 15px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.contact-form button { height: 40px; border-radius: 10px; background: var(--accent); color: #fbf8f3; font: 500 15px/1.4 "Satoshi", sans-serif; letter-spacing: -.02em; text-transform: uppercase; transition: filter .2s; }
.contact-form button:hover { filter: brightness(1.08); }
.contact-form button[disabled] { opacity: .6; cursor: wait; }
.form-status { font-size: 14px; min-height: 1em; }
.form-status.ok { color: #9fd49a; } .form-status.err { color: #ff9b85; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-img { width: 576px; height: 667px; object-fit: cover; border-radius: 20px; }

/* ---------- footer ---------- */
.site-footer { background: #000; padding: 64px 120px 40px; font-family: "Inter", sans-serif; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; max-width: 1200px; margin: 0 auto; }
.footer-brand img { width: 213px; height: 61px; object-fit: cover; }
.footer-brand p { font-family: var(--clash); color: var(--muted); font-size: 18px; line-height: 1.5; max-width: 343px; margin-top: 16px; }
.footer-insta { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--accent); margin-top: 24px; transition: background .2s; }
.footer-insta:hover { background: rgba(255,255,255,.06); }
.footer-cols { display: flex; gap: 56px; padding-right: 26px; }
.footer-cols div { display: flex; flex-direction: column; gap: 16px; }
.footer-cols h3 { color: var(--accent); font-size: 16px; line-height: 1.5; font-weight: 400; margin-bottom: 0; }
.footer-cols a, .footer-cols span, .footer-bottom a { color: var(--muted); font-size: 16px; line-height: 1.4; font-weight: 500; letter-spacing: -.05em; transition: color .2s; }
.footer-cols a:hover, .footer-bottom a:hover { color: #b65a2b; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 72px auto 0; padding-top: 32px; border-top: 1px solid rgba(0,0,0,.08); }
.footer-bottom p { color: var(--muted); font-size: 14px; }
.footer-bottom nav { display: flex; gap: 24px; align-items: center; color: var(--muted); }

/* ---------- legal ---------- */
.legal { padding: 108px 24px 200px; width: 528px; max-width: 100%; margin: 0 auto; }
.legal-label { font-family: "Satoshi", sans-serif; font-size: 12px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.32); display: flex; align-items: center; gap: 16px; }
.legal-label::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.legal-body { margin-top: 34px; font-family: "Satoshi", sans-serif; font-size: 20px; line-height: 28px; letter-spacing: -.03em; }
.legal-body > p:first-child strong { font-family: "Inter", sans-serif; font-weight: 700; }
.legal-body p { margin: 0 0 20px; }
.legal-body h2 { font-family: "Apfel Grotezk", sans-serif; font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: 0; margin: 40px 0 16px; }
.legal-body h3 { font-family: "Inter", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: 0; color: rgba(255,255,255,.55); margin: 8px 0 12px; }
.legal-body ul { margin: -12px 0 20px; padding-left: 27px; }
.legal-body a { text-decoration: underline; }

/* ---------- 404 ---------- */
.page-404 .notfound { height: 100vh; min-height: 640px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.notfound-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Satoshi", sans-serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.32); }
.notfound-line { width: 1px; height: 80px; background: rgba(255,255,255,.12); margin: 24px 0 40px; }
.notfound-btn { padding: 17px 20px; border-radius: 24px; background: rgba(20,20,20,.16); backdrop-filter: blur(5px); box-shadow: 0 0 0 1px rgba(255,255,255,.06); font-family: "Satoshi", sans-serif; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- tablet ---------- */
/* ---- motion v2 (2026-11-03): card sections and text get more life. All of it is CSS + a few lines of JS, off under reduced motion. ---- */
/* words lift out of their own mask one after another (paragraphs + big titles) */
.has-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.has-words .w > span { display: inline-block; }
.js .has-words .w > span { transform: translateY(115%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * .022s + var(--d,0s)); }
.js .has-words.is-in .w > span { transform: none; }
.js [data-a="title"].has-words { opacity: 1; transform: none; }
.js [data-a="title"].has-words .w > span { transition-duration: 1s; transition-delay: calc(var(--i) * .09s + var(--d,0s)); }
.js [data-words]:not([data-a]) { opacity: 1; transform: none; }
/* about hero line: quicker than the body text, it is the first thing read */
.js .about-hero .has-words .w > span { transition-duration: .6s; transition-delay: calc(var(--i) * .012s + var(--d,0s)); }
/* groups: children arrive one after another, slightly smaller and lower */
.js [data-stagger] > * { opacity: 0; transform: translateY(var(--ty,44px)) scale(var(--sc,.96)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: opacity .9s var(--ease) calc(var(--i) * .11s), transform 1s var(--ease) calc(var(--i) * .11s), background .4s; }
.js .why-list[data-stagger]:not(.is-in) > * { --ty: 44px; --sc: .96; }
/* once a group has arrived (JS adds .settled) hover and tilt answer at once */
.js [data-stagger].settled > *, .js .exp-cards[data-stagger].settled > .exp-card { transition-delay: 0s; transition-duration: .5s; }
.js .grow-list[data-stagger].is-in > button { transition: color .35s, transform .5s var(--ease), opacity .9s var(--ease) calc(var(--i) * .11s); }
.js [data-stagger].is-in > * { --ty: 0px; --sc: 1; opacity: 1; }
.js .exp-cards[data-stagger] > .exp-card { transition: flex-grow .6s cubic-bezier(.4,0,.2,1), opacity .9s var(--ease) calc(var(--i) * .11s), transform 1s var(--ease) calc(var(--i) * .11s); }
.js .exp-cards[data-stagger].is-in > .exp-card:hover { transition: flex-grow .6s cubic-bezier(.4,0,.2,1), transform .2s ease-out; }
.js [data-stagger].is-in > [data-tilt]:hover { transition: transform .2s ease-out; }
.exp-cards, .why-grid, .why-list { perspective: 1400px; }
/* the white frame behind a group only appears once its cards have arrived */
.js .exp-cards[data-stagger], .js .why-grid[data-stagger] { transition: background .6s .4s; }
.js .exp-cards[data-stagger]:not(.is-in), .js .why-grid[data-stagger]:not(.is-in) { background: transparent; }
/* a soft light follows the pointer across a card */
:where([data-tilt]) { position: relative; }
[data-tilt]::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 60%); }
[data-tilt]:hover::before { opacity: 1; }
.brand-card::before { display: none; }
.brand-card .brand-info { position: relative; overflow: hidden; }
.brand-card .brand-info::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.1), transparent 60%); }
.brand-card:hover .brand-info::before { opacity: 1; }
.brand-card:hover .brand-info h3 { letter-spacing: .08em; }
.brand-info h3 { transition: letter-spacing .5s var(--ease); }
/* expanding cards: the opened title slides up and the photo settles */
.exp-row > div { transform: translateY(16px); }
.exp-card.is-open .exp-row > div { transform: none; transition: opacity .5s .25s, transform .6s var(--ease) .2s; }
.exp-img { transform: scale(1.04); transition: opacity .4s, transform .8s var(--ease); }
.exp-card.is-open .exp-img { transform: none; }
.exp-icon { transition: transform .6s var(--ease); }
.exp-card:hover .exp-icon, .exp-card.is-open .exp-icon { transform: rotate(-8deg) scale(1.08); }
/* why cards: photo breathes and text lifts on hover; icon cards glow */
.why-photo > img, .why-photo > video { transition: transform 1s var(--ease); }
.why-photo:hover > img, .why-photo:hover > video { transform: scale(1.06); }
.why-photo > div { transition: transform .6s var(--ease); }
.why-photo:hover > div { transform: translateY(-8px); }
.why-list .why-card:hover { background: #161616; }
.why-list .why-card img { transition: transform .6s var(--ease); }
.why-list .why-card:hover img { transform: translateY(-6px) rotate(-6deg); }
/* grow: the panel photo wipes in, list lines follow */
.grow-panel.is-active img { animation: panel-in .7s var(--ease) both; }
@keyframes panel-in { from { clip-path: inset(0 0 100% 0); transform: scale(1.08); } to { clip-path: inset(0); transform: none; } }
.grow-panel.is-active li { animation: rise .6s var(--ease) both; }
.grow-panel.is-active li:nth-child(2) { animation-delay: .08s; } .grow-panel.is-active li:nth-child(3) { animation-delay: .16s; } .grow-panel.is-active li:nth-child(4) { animation-delay: .24s; }
.grow-list button { transition: color .35s, transform .5s var(--ease); }
.grow-list button.is-active { transform: translateX(14px); }
/* hero: the headline letters blur in per slide, the video drifts closer */
.js .slide:not(.is-active) [data-split] .split-ch { opacity: 0; filter: blur(10px); transform: translateY(12px); transition: opacity .3s; transition-delay: 0s; }
.js .slide.is-active [data-split] .split-ch { opacity: 1; filter: none; transform: none; transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * .035s + .15s); }
.slide.is-active .slide-text > [data-split] { animation: none; }
.slide.is-active video { animation: drift 14s linear both; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.1); } }
/* marquee pauses under the pointer; logos light up */
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { opacity: .55; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.marquee-track img:hover { opacity: 1; filter: none; }
/* buttons: a light sweeps across on hover */
.btn-outline, .contact-form button { position: relative; overflow: hidden; }
.btn-outline::after, .contact-form button::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none; }
.btn-outline:hover::after, .contact-form button:hover::after { left: 120%; }
/* faq: answers fade up when opened; questions warm on hover */
.faq details[open] p { animation: rise .5s var(--ease) both; }
.faq summary { transition: color .3s; }
.faq details:hover summary { color: var(--accent); }
.faq details:hover summary i { background: var(--accent); }
.faq summary i { transition: background .3s, transform .3s; }
.faq details[open] summary i { transform: rotate(180deg); }
/* footer + menu links: an underline draws in from the left */
.footer-cols a, .footer-bottom a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: color .2s, background-size .4s var(--ease); }
.footer-cols a:hover, .footer-bottom a:hover { background-size: 100% 1px; }
.menu-links a { transition: background .2s, padding-left .3s var(--ease); }
.menu-links a:hover { padding-left: 18px; }
/* form fields: focus ring in the brand colour */
.contact-form input, .contact-form select, .contact-form textarea { transition: box-shadow .25s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.about-strip a { transition: flex .5s var(--ease); }
.about-strip a:hover { flex: 1.6; }

@media (max-width: 1199px) {
  :root { --pad: 30px; }
  .big-title, .split-title, .grow-list button { font-size: 90px; }
  .big-title.mid, .contact-form-col h2 { font-size: 64px; }
  .about-hero h1 { font-size: 90px; }
  .exp-row h3 { font-size: 32px; }
  .brand-card { width: min(850px, 100%); }
  .brand-img { width: 58%; }
  .sec-contact { padding: 160px 40px; }
  .contact-inner { grid-template-columns: 1fr 1fr; }
  .contact-img { width: 100%; }
  .faq { grid-template-columns: 1fr 1.3fr; gap: 40px; }
  .faq > img { width: 100%; }
  .site-footer { padding: 64px 40px 40px; }
  .grow-list button { font-size: 72px; }
}

/* ---------- mobile (values measured from the live site at 375px) ---------- */
@media (max-width: 809px) {
  :root { --pad: 20px; }
  .site-header { padding: 20px 16px 0 22px; }
  .site-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 55px; background: linear-gradient(rgba(17,17,17,.7), rgba(0,0,0,0)); pointer-events: none; }
  .sydney-time { display: none; }
  .site-menu { top: 64px; right: 16px; left: 16px; }
  .menu-links { width: auto; flex: 1; padding: 6px 6px 12px; }
  .menu-links a { height: 46px; font-size: 18px; line-height: 1.1; padding: 0 10px 0 29px; }
  .menu-card { width: 148px; height: 372px; padding: 20px 12px 24px; }
  .menu-card p { font-size: 15px; word-break: break-all; }

  .slide-text { left: 24px; right: 70px; }
  .slide-dots button { width: 44px; height: 40px; }
  .slide-text h1, .slide-text h2 { font-size: 26px; white-space: normal; }
  .slide-cat { font-size: 14px; margin-top: 6px; }
  .slide-desc { font-size: 14px; margin-top: 18px; }

  .about-hero { height: 100svh; min-height: 600px; }
  .about-hero-text { left: 24px; right: 24px; bottom: 40px; }
  .about-hero h1 { font-size: 32px; line-height: 1.08; }
  .about-hero p { font-size: 20px; line-height: 1.25; max-width: 218px; margin-top: 12px; }

  .sec { padding: 120px var(--pad) 200px; }
  .sec-alt { padding-top: 70px; }
  .sec-about { padding-bottom: 120px; }
  .sec-rule { gap: 19px; }
  .split-title { font-size: 40px; gap: 10px; margin-top: 50px; }
  .js [data-a="spread"].is-in > span:first-child, .js [data-a="spread"].is-in > span:last-child { transform: none; }
  .js [data-a="title"] { transform: translateY(20px); }
  .js [data-a="side"] { transform: translateY(60px); }
  .big-title, .big-title.mid { font-size: 40px; }
  .big-title.center { margin-top: 50px; }
  .two-col { grid-template-columns: 1fr; gap: 50px; margin-top: 50px; }
  .col-text { font-size: 20px; padding: 0; max-width: 302px; }
  .about-title { position: static; } .about-title > span { transform: none; }
  .about-body { width: auto; margin-top: 20px; }
  .about-cheers { height: 339px; }
  .about-body > p { font-size: 20px; line-height: 1.2; margin: 20px 14px 0; }
  .about-strip { display: none; }

  .exp-cards, .exp-cards.tall { flex-direction: column; height: auto; margin-top: 150px; }
  .exp-card, .exp-card.is-open { flex: none; padding: 20px 20px 20px; cursor: default; }
  .exp-icon { width: 40px; height: 40px; margin-bottom: 30px; }
  .exp-body { position: static; }
  .exp-img { height: 106px; margin-bottom: 30px; }
  .exp-card:not(.is-open) .exp-img, .exp-card:not(.is-open) .exp-row > div { opacity: 1; visibility: visible; position: static; }
  .exp-row { flex-direction: column; gap: 20px; }
  .exp-row h3 { font-size: 40px; white-space: normal; }
  .exp-row p { margin-top: 20px; max-width: 261px; }
  .exp-row .exp-tags { font-size: 14px; line-height: 16px; margin-top: 20px; }

  .brands-title { position: static; font-size: 55px; gap: 12px; margin-top: 50px; }
  .brand-stack { margin-top: 21px; gap: 52px; }
  .brand-stack::after { height: 0; }
  .brand-card { position: relative; top: auto; flex-direction: column; width: 100%; height: auto; }
  .brand-img { width: 100%; height: 269px; }
  .brand-info { padding: 20px; gap: 30px; }
  .brand-info dd + dt { margin-top: 24px; }
  .portfolio { flex-direction: column; align-items: stretch; gap: 0; margin-top: 30px; }
  .portfolio > p { font-size: 14px; border: 0; padding: 0; line-height: 1; }
  .marquee { margin: -10px -20px 0; }
  .sec-brands > .btn-outline { font-size: 16px; padding: 12px 22px; margin-top: 0; }

  .sec-how { padding-top: 70px; }
  .sec-why { padding-top: 320px; }
  .why-grid { grid-template-columns: 1fr 1fr; height: auto; margin-top: 29px; }
  .why-photo { height: 318px; }
  .why-photo > div, .why-photo:nth-child(2) > div { left: 20px; right: 20px; bottom: 22px; text-align: center; }
  .why-card h3 { font-size: 20px; }
  .why-list { grid-column: 1 / -1; grid-template-rows: none; }
  .why-list .why-card { padding: 20px; }
  .why-list img { width: 40px; height: 40px; margin-bottom: 30px; }

  .sec-grow { padding-top: 120px; padding-bottom: 112px; }
  .sec-grow .big-title { margin-top: 40px; }
  .grow-intro { font-size: 20px; letter-spacing: 0; margin-top: 50px; max-width: 302px; }
  .grow { flex-direction: column; gap: 40px; margin-top: 46px; }
  .grow-list button { font-size: 30px; gap: 10px; }
  .grow-list button + button { margin-top: 12px; }
  .grow-list button span { font-size: 18px; padding-top: 4px; width: 36px; }
  .grow-list .btn-outline { font-size: 16px; padding: 12px 22px; margin-top: 30px; }
  .grow-panels { width: auto; margin: 0 2px; }
  .grow-panel img { height: 250px; }
  .grow-panel ul { font-size: 16px; margin-top: 22px; gap: 6px; }

  .sec-faq { padding: 60px 20px 60px; }
  .sec-faq .big-title { font-size: 28px; margin-top: 50px; letter-spacing: -.01em; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
  .faq > img { width: 100%; height: 381px; }
  .faq details { padding: 0 20px; }
  .faq summary { padding: 24px 0; }
  .faq details p { padding: 0 0 24px; margin-top: -8px; }

  .sec-contact { padding: 48px 16px 49px; }
  .contact-inner { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-col h2 { font-size: 40px; }
  .contact-lead { font-size: 16px; margin-top: 16px; }
  .contact-form { gap: 20px 16px; margin-top: 43px; }
  .contact-form input, .contact-form select, .contact-form textarea { font-size: 16px; }
  .contact-img { width: 100%; height: 397px; }

  .site-footer { padding: 48px 16px 40px; }
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-brand p { font-size: 18px; }
  .footer-cols { flex-direction: column; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 40px; }

  .js [data-stagger] > * { --ty: 28px; --sc: 1; }
  .grow-list button.is-active { transform: none; }
  .brand-img img { --ps: 1; }

  .legal { padding: 108px 16px 120px; }
  .legal-body { font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .legal-body h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js [data-a], .js [data-a] > *, .js [data-split] .split-ch, .js .sec-rule i, .brands-title > span, .brands-title, .js .has-words .w > span, .js [data-stagger] > *, .js .slide .split-ch, .brand-img img { opacity: 1 !important; transform: none !important; filter: none !important; }
  .slide.is-active video, .grow-panel.is-active img, .grow-panel.is-active li, .faq details[open] p { animation: none; }
  .about-title { position: static; } .about-title > span { transform: none !important; }
  .about-hero > img { animation: none; }
}