/* ============================================================
   WAVE CREATIVE — Design System
   Toowoomba · Brisbane · Gold Coast
   ------------------------------------------------------------
   Palette sampled directly from the Wave Creative logo gradient:
     #1AA7EC azure · #0E74A6 ocean · #03354E deep · #000 black
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Syne+Mono&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* --- Brand (sampled from logo) ---------------------------- */
  --azure:       #1AA7EC;
  --ocean:       #0E74A6;
  --deep:        #03354E;
  --accent:      var(--azure);
  --accent-glow: rgba(26,167,236,.15);

  /* --- Ground ----------------------------------------------- */
  --bg:          #050607;
  --bg-raised:   #0B0E11;
  --bg-card:     #101519;
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.22);

  /* --- Ink -------------------------------------------------- */
  --ink:         #F4F6F7;
  --ink-soft:    #A3ABB0;
  --ink-faint:   #676F74;

  /* --- Type ------------------------------------------------- */
  --display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'Syne Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-hero:  clamp(2.6rem, 8vw, 8.5rem);
  --t-h1:    clamp(2.5rem, 7vw, 6rem);
  --t-h2:    clamp(1.9rem, 4.6vw, 3.9rem);
  --t-h3:    clamp(1.3rem, 2.2vw, 1.9rem);
  --t-lead:  clamp(1.05rem, 1.5vw, 1.35rem);
  --t-label: .72rem;

  /* --- Space ------------------------------------------------ */
  --gut:     clamp(1.25rem, 4vw, 4.5rem);
  /* Top and bottom stack when two sections meet, so this is HALF the gap.
     ~53px at 1330 gives a ~106px rhythm, matching the 100px the reference
     site uses. It was 11vw (296px gap) — a blank screen, not rhythm. */
  --section: clamp(2.25rem, 4vw, 4.5rem);
  --radius:  2px;

  /* --- Motion ----------------------------------------------- */
  --ease:  cubic-bezier(.22,.61,.36,1);
  --swift: 240ms var(--ease);
  --slow:  720ms var(--ease);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.03em}
p{margin:0 0 1.1em}
::selection{background:var(--azure);color:#02121C}

/* Focus is never removed — WCAG 2.4.7 */
:focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:var(--radius)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--azure);color:#02121C;padding:.85rem 1.4rem;
  font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase;
}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--section)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.eyebrow{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:.85rem;margin:0 0 2.4rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.eyebrow--accent{color:var(--azure)}

/* ============================================================
   INTRO CURTAIN
   Shows once per visit (a script in <head> stamps .no-intro on
   repeat views before paint, so there is no flash).
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  background:
    radial-gradient(125% 90% at 50% 18%, rgba(26,167,236,.38) 0%, transparent 62%),
    linear-gradient(180deg,#0A2B3D 0%,#05161F 55%,#030B10 100%);
  animation:intro-lift 680ms cubic-bezier(.76,0,.24,1) 980ms forwards;
  will-change:transform;
}
/* Resting state is VISIBLE and the animation runs `backwards` from hidden.
   If animations never fire, the logo still shows instead of a blank panel. */
.intro__mark{
  width:min(34vw,170px);height:auto;
  opacity:1;transform:none;
  animation:intro-mark 640ms cubic-bezier(.22,.61,.36,1) 100ms backwards;
}
.intro__word{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  opacity:1;animation:intro-fade 620ms cubic-bezier(.22,.61,.36,1) 330ms backwards;
}
@keyframes intro-mark{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
@keyframes intro-lift{to{transform:translateY(-101%);visibility:hidden}}

/* Repeat visit, or anyone who asked for less motion — never show it. */
.no-intro .intro{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem var(--gut);border-bottom:1px solid transparent;
  transition:background var(--swift),backdrop-filter var(--swift),border-color var(--swift);
}
.nav.is-stuck{background:rgba(5,6,7,.84);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav__logo{display:flex;align-items:center;gap:.65rem;padding:.35rem 0}
.nav__logo img{height:48px;width:auto}
.nav__logo span{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase}
/* The phone nav is already the taller of the two, because the wordmark wraps
   to two lines beside the mark. So the mark grows less here, and the wordmark
   not at all - otherwise the bar eats more of a much shorter screen. */
@media (max-width:860px){
  .nav__logo img{height:44px}
  .nav__logo span{font-size:1rem}
}
.nav__links{display:flex;align-items:center;gap:2.1rem}
/* Just above the mobile breakpoint the bar is at its limit: the logo is
   already being squeezed and its wordmark wraps. Larger links would push it
   into overflow, so the gap gives the width back instead. */
@media (min-width:861px) and (max-width:1050px){ .nav__links{gap:1.35rem} }
.nav__link{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);
  position:relative;padding:.55rem .1rem;transition:color var(--swift);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:.25rem;width:100%;height:1px;
  background:var(--azure);transform:scaleX(0);transform-origin:right;
  transition:transform var(--swift);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.nav__toggle{display:none;background:none;border:0;color:var(--ink);width:46px;height:46px;align-items:center;justify-content:center}
.nav__toggle span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background var(--swift)}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform var(--swift)}
.nav__toggle span::before{top:-7px}
.nav__toggle span::after{top:7px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  padding:1.05rem 1.9rem;min-height:48px;
  border:1px solid var(--line-strong);color:var(--ink);background:transparent;
  border-radius:var(--radius);touch-action:manipulation;
  transition:background var(--swift),color var(--swift),border-color var(--swift),transform var(--swift);
}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--azure);color:#02121C;border-color:var(--azure);font-weight:700}
.btn--accent:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn__arrow{transition:transform var(--swift)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) clamp(2.5rem,6vw,5rem);overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--deep)}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,6,7,.74) 0%,rgba(5,6,7,.28) 42%,rgba(5,6,7,.95) 100%),
    linear-gradient(115deg,rgba(3,53,78,.42) 0%,transparent 55%);
}
.hero__type{
  font-family:var(--display);font-weight:800;font-size:var(--t-hero);
  line-height:.83;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 1.8rem;
}
.hero__type em{font-style:normal;color:var(--azure);display:block}
.hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:2.2rem;border-top:1px solid var(--line);padding-top:1.9rem;
}
.hero__lead{max-width:46ch;color:var(--ink-soft);font-size:var(--t-lead);margin:0}
.hero__meta{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);text-align:right;line-height:2;
}
.hero__meta strong{color:var(--azure);font-weight:400}

/* Page header (interior pages) */
/* padding-block only — a padding shorthand here would clobber .wrap's gutter.
   Top has to clear the fixed nav (~70px desktop, ~95px mobile). */
.phead{padding-block:clamp(6.5rem,10vw,8.5rem) clamp(2.25rem,4vw,3.5rem);border-bottom:1px solid var(--line)}
.phead h1{font-size:var(--t-h1);text-transform:uppercase;margin-bottom:1.5rem}
.phead p{color:var(--ink-soft);font-size:var(--t-lead);max-width:62ch;margin:0}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);padding-block:1.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;gap:4.5rem;width:max-content;animation:slide 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;display:flex;align-items:center;gap:4.5rem;
}
.marquee__item::after{content:"◆";color:var(--azure);font-size:.55em}
.marquee--display .marquee__track{animation-duration:28s;gap:2.5rem}
.marquee--display .marquee__item{
  font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,7vw,5.5rem);
  letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px var(--line-strong);gap:2.5rem;
}
.marquee--display .marquee__item::after{-webkit-text-stroke:0;color:var(--azure)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   WORK GRID
   ============================================================ */
/* Masonry. Each photo keeps its own proportions — roughly half the
   library is portrait, and a fixed grid crops the top and bottom off
   every one of them. Column layout lets each frame set its own height. */
.work{
  column-count:3;
  column-gap:clamp(1rem,2.4vw,2.2rem);
}
.work__item{
  position:relative;display:block;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 clamp(1rem,2.4vw,2.2rem);
}
.work__item[hidden]{display:none}

/* aspect-ratio is set inline per item from the file's real pixel size */
.work__frame{position:relative;overflow:hidden;background:var(--bg-card);aspect-ratio:4/3;border-radius:var(--radius)}
.work__frame img{
  width:100%;height:100%;object-fit:cover;filter:saturate(.85);
  transition:transform 900ms var(--ease),filter var(--slow);
}
.work__item:hover .work__frame img{transform:scale(1.05);filter:saturate(1.05)}
.work__frame::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--slow);
  background:linear-gradient(180deg,transparent 45%,rgba(3,53,78,.55),rgba(5,6,7,.8));
}
.work__item:hover .work__frame::after{opacity:1}

/* Play badge for video pieces */
.work__play{
  position:absolute;left:1.2rem;bottom:1.2rem;z-index:2;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(5,6,7,.42);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
  transition:background var(--swift),border-color var(--swift),transform var(--swift);
}
.work__item:hover .work__play{background:var(--azure);border-color:var(--azure);transform:scale(1.06)}
.work__play svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.work__item:hover .work__play svg{fill:#02121C}

.work__meta{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding-top:1.1rem}
.work__title{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em}
.work__tag{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--azure);white-space:nowrap}
.work__desc{color:var(--ink-soft);font-size:.95rem;margin:.5rem 0 0;max-width:52ch}

.filters{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:3.2rem}
.filter{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  padding:.85rem 1.5rem;min-height:44px;border:1px solid var(--line);
  background:transparent;color:var(--ink-soft);border-radius:var(--radius);
  transition:all var(--swift);touch-action:manipulation;
}
.filter:hover{border-color:var(--line-strong);color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--azure);border-color:var(--azure);color:#02121C;font-weight:700}

/* ============================================================
   FILMS — vertical social rail + landscape cards
   Most Wave Creative client work is 9:16, so it is shown at
   9:16 rather than cropped into a landscape frame.
   ============================================================ */
.rail{
  display:flex;gap:clamp(.8rem,1.6vw,1.4rem);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* scroll-padding is what keeps snap points clear of the gutter — without it
     the first card snaps to the container edge and cancels padding-inline. */
  scroll-padding-inline:var(--gut);
  padding-bottom:1.2rem;margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-track{background:var(--line);border-radius:99px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.rail::-webkit-scrollbar-thumb:hover{background:var(--azure)}

.film{
  flex:0 0 auto;scroll-snap-align:start;
  width:clamp(190px,23vw,268px);
  background:none;border:0;padding:0;margin:0;
  color:inherit;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:.9rem;
  touch-action:manipulation;
}
.film--wide{width:clamp(280px,44vw,560px)}

.film__frame{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--bg-card);aspect-ratio:9/16;
  border:1px solid var(--line);
  transition:border-color var(--swift),transform var(--swift);
}
.film--wide .film__frame{aspect-ratio:16/9}
.film:hover .film__frame,.film:focus-visible .film__frame{border-color:var(--azure);transform:translateY(-4px)}

.film__frame img,.film__frame video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.film__frame video{opacity:0;transition:opacity 420ms var(--ease)}
.film.is-playing .film__frame video{opacity:1}

/* Gradient wash keeps white UI legible over any frame */
.film__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,53,78,.10) 0%,transparent 40%,rgba(5,6,7,.72) 100%);
}
.film__badge{
  position:absolute;left:.85rem;bottom:.85rem;z-index:2;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(5,6,7,.45);
  backdrop-filter:blur(6px);display:grid;place-items:center;
  transition:background var(--swift),border-color var(--swift),transform var(--swift);
}
.film:hover .film__badge,.film:focus-visible .film__badge{background:var(--azure);border-color:var(--azure);transform:scale(1.08)}
.film__badge svg{width:13px;height:13px;fill:#fff;margin-left:2px}
.film:hover .film__badge svg,.film:focus-visible .film__badge svg{fill:#02121C}

.film__dur{
  position:absolute;right:.85rem;bottom:.85rem;z-index:2;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--ink);background:rgba(5,6,7,.55);backdrop-filter:blur(6px);
  padding:.25rem .5rem;border-radius:2px;
}
.film__name{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.film__tag{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azure);margin-top:.3rem;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  border:0;padding:0;background:transparent;
  width:min(94vw,1180px);max-width:none;max-height:94vh;
  overflow:visible;color:var(--ink);
}
.lightbox::backdrop{background:rgba(2,5,8,.9);backdrop-filter:blur(6px)}
.lightbox__stage{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;border-radius:var(--radius);overflow:hidden;
}
.lightbox--vertical{width:min(94vw,420px)}
.lightbox--vertical .lightbox__stage{aspect-ratio:9/16;max-height:84vh}
.lightbox__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox__bar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-top:1rem;
}
.lightbox__title{font-family:var(--display);font-weight:700;font-size:1.15rem}
.lightbox__close{
  background:none;border:1px solid var(--line-strong);color:var(--ink);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;padding:.7rem 1.1rem;min-height:44px;
  border-radius:var(--radius);transition:all var(--swift);
}
.lightbox__close:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .film__frame video{display:none}
}

/* ============================================================
   NUMBERED SERVICES
   ============================================================ */
.svc{border-top:1px solid var(--line)}
.svc__row{
  display:grid;grid-template-columns:auto 1.05fr 1fr;gap:clamp(1.5rem,4vw,4.5rem);
  padding-block:clamp(3rem,6vw,5.5rem);border-bottom:1px solid var(--line);
  transition:background var(--slow);
}
.svc__row:hover{background:var(--bg-raised)}
.svc__num{font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--azure);padding-top:.4rem;font-variant-numeric:tabular-nums}
/* "PHOTOGRAPHY" is 11 wide characters — at --t-h2 it measured 800px inside a
   542px column, so this column gets its own scale. */
.svc__head h2,.svc__head h3{font-size:clamp(1.4rem,2.9vw,2.8rem);text-transform:uppercase;margin-bottom:1.1rem;letter-spacing:-.03em}
.svc__head p{color:var(--ink-soft);max-width:42ch;font-size:var(--t-lead)}
.svc__aside{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start}
.svc__chips{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;padding:0;margin:0}
.svc__chips li{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;
}

/* ============================================================
   CARDS
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1rem,2.2vw,2rem)}
.card{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.8rem,3vw,2.8rem);background:var(--bg-raised);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color var(--swift),background var(--swift),transform var(--swift);
}
.card:hover{border-color:var(--azure);background:var(--bg-card);transform:translateY(-3px)}
/* Card headings sit in a narrow padded box — "TOOWOOMBA" and "PHOTOGRAPHY"
   both overran --t-h3 there. */
.card h2,.card h3{font-size:clamp(1.05rem,1.7vw,1.55rem);text-transform:uppercase;letter-spacing:-.02em}

/* Big section statements ("Photography, answered.") */
.statement{
  font-size:var(--t-h1);text-transform:uppercase;
  margin-bottom:3rem;max-width:20ch;letter-spacing:-.035em;
}
@media (min-width:701px) and (max-width:1430px){
  .statement{font-size:clamp(2rem,6.5vw,5rem)}
}
@media (max-width:700px){
  .statement{font-size:var(--t-h1);max-width:none}
}
.card p{color:var(--ink-soft);font-size:.95rem;margin:0}
.card__link{
  margin-top:auto;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--azure);display:inline-flex;align-items:center;gap:.5rem;
  padding-top:.8rem;min-height:44px;
}

/* Card with a photo across the top */
.card--photo{padding:0;overflow:hidden}
.card__frame{display:block;position:relative;overflow:hidden;background:var(--bg-card);aspect-ratio:16/10}
.card__frame img{
  width:100%;height:100%;object-fit:cover;filter:saturate(.9);
  transition:transform 900ms var(--ease),filter var(--slow);
}
.card--photo:hover .card__frame img,
.card--photo:focus-visible .card__frame img{transform:scale(1.05);filter:saturate(1.05)}
.card__frame::after{                     /* keeps the card edge from glowing */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(5,6,7,.55));
}
.card__body{
  display:flex;flex-direction:column;gap:1rem;flex:1;
  padding:clamp(1.4rem,2.4vw,2rem);
}

/* A card that isn't a link — no hover affordance, nothing to click. */
.card--static{margin:0}
.card--static:hover{border-color:var(--line);background:var(--bg-raised);transform:none}
.card--static:hover .card__frame img{transform:none;filter:saturate(.9)}

/* ============================================================
   SPLIT / STEPS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
/* Landscape source — 4/5 would crop the frame to pieces */
.split__media--wide img{aspect-ratio:4/3}

/* Cut-out portrait on the brand gradient — the logo's azure-to-black,
   so a transparent PNG reads as designed rather than as a missing background. */
.portrait{
  position:relative;aspect-ratio:4/5;border-radius:var(--radius);
  border:1px solid var(--line);overflow:hidden;
  display:grid;place-items:end center;
  background:
    radial-gradient(115% 75% at 50% 0%, rgba(26,167,236,.30) 0%, transparent 62%),
    linear-gradient(180deg, #0A2B3D 0%, #05161F 52%, #041016 100%);
}
.portrait::after{                      /* grounds the figure so it isn't floating */
  content:"";position:absolute;left:8%;right:8%;bottom:0;height:34%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(0,0,0,.55), transparent 70%);
  pointer-events:none;
}
.portrait img{
  position:relative;z-index:1;
  height:100%;width:auto;max-width:100%;
  object-fit:contain;object-position:bottom;
  aspect-ratio:auto;border-radius:0;
}
@media (max-width:860px){
  .portrait{aspect-ratio:1/1;max-height:78vh}
}
/* Sized for a half-width column, not a full-width page. At --t-h1 the word
   "standards." measured 777px inside a 571px column. */
.split h2{font-size:clamp(1.6rem,3.7vw,3.3rem);text-transform:uppercase;margin-bottom:1.6rem;letter-spacing:-.035em}
.split p{color:var(--ink-soft);font-size:var(--t-lead)}

/* Document-weighted split: prose column leads, sidebar supports.
   Used on location pages where the copy carries the SEO. */
.split--doc{grid-template-columns:1.35fr .65fr;align-items:start}
.split--doc h2{font-size:clamp(1.55rem,2.9vw,2.5rem);letter-spacing:-.02em}
.split--doc p{font-size:1rem;max-width:64ch}
@media (max-width:1024px){.split--doc{grid-template-columns:1fr}}

.steps{list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{counter-increment:step;border-top:1px solid var(--line);padding:1.8rem 0 1.8rem 4.2rem;position:relative}
.steps li::before{content:"0" counter(step);position:absolute;left:0;top:1.8rem;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;color:var(--azure)}
.steps h3{font-size:var(--t-h3);margin-bottom:.5rem;text-transform:uppercase}
.steps p{color:var(--ink-soft);margin:0;font-size:.95rem;max-width:56ch}

/* ============================================================
   Locations dropdown
   The panel is driven only by .is-open, which JS sets in step with
   aria-expanded - so the attribute can never contradict what is on
   screen. visibility:hidden keeps the links out of the tab order
   while closed. Hover, focus and click all route through that flag.
   ============================================================ */
.nav__has-sub{position:relative;display:flex;align-items:center}
.nav__sub-toggle{
  /* Declare no type or colour here. The button already carries .nav__link,
     and this rule sits after it at equal specificity - so `font:inherit`
     beat it and pulled 16px Inter off the parent div instead. Resetting
     only the button chrome lets .nav__link supply the typography, on
     desktop and in the mobile menu alike. */
  background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;
}
.nav__caret{
  width:.4em;height:.4em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-.12em) rotate(45deg);transition:transform var(--swift);
}
.nav__sub{
  position:absolute;top:calc(100% + .85rem);left:50%;
  transform:translateX(-50%) translateY(-8px);
  display:flex;flex-direction:column;min-width:13.5rem;
  background:var(--bg-raised);border:1px solid var(--line);
  padding:.45rem;opacity:0;visibility:hidden;
  transition:opacity var(--swift),transform var(--swift);z-index:70;
}
/* bridges the gap between button and panel so the pointer can cross it */
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem}
.nav__has-sub.is-open .nav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__has-sub.is-open .nav__caret{transform:translateY(.06em) rotate(-135deg)}
.nav__sub-link{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);padding:.8rem .9rem;white-space:nowrap;
  transition:color var(--swift),background var(--swift);
}
.nav__sub-link:hover,.nav__sub-link:focus-visible{color:var(--ink);background:rgba(255,255,255,.07)}

@media (max-width:860px){
  /* In the full-screen menu it becomes a plain accordion: no absolute
     positioning, and the three links sit as chips under the label. */
  .nav__has-sub{flex-direction:column;gap:1rem}
  .nav__caret{width:.34em;height:.34em}
  .nav__sub{
    position:static;transform:none;min-width:0;padding:0;border:0;background:none;
    flex-flow:row wrap;justify-content:center;gap:.5rem;
    display:none;opacity:1;visibility:visible;
  }
  .nav__sub::before{display:none}
  .nav__has-sub.is-open .nav__sub{display:flex;transform:none}
  .nav__sub-link{
    font-size:.8rem;letter-spacing:.1em;padding:.7rem .85rem;
    border:1px solid var(--line);
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  background:none;border:0;color:var(--ink);text-align:left;padding:1.7rem 0;min-height:48px;
  font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;
  transition:color var(--swift);
}
.faq__q:hover{color:var(--azure)}
.faq__icon{flex:none;width:20px;height:20px;position:relative}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--azure);transition:transform var(--swift)}
.faq__icon::before{top:9.5px;left:0;width:20px;height:1.5px}
.faq__icon::after{left:9.5px;top:0;width:1.5px;height:20px}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:scaleY(0)}
.faq__a{overflow:hidden;max-height:0;transition:max-height 420ms var(--ease)}
.faq__a p{color:var(--ink-soft);padding-bottom:1.7rem;margin:0;max-width:72ch}

/* ============================================================
   FORM
   ============================================================ */
.form{display:grid;gap:1.5rem;max-width:640px}
.field{display:flex;flex-direction:column;gap:.55rem}
.field label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.field .req{color:var(--azure)}
.field input,.field textarea,.field select{
  background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);font-family:var(--body);font-size:1rem;padding:1rem 1.1rem;min-height:48px;
  transition:border-color var(--swift),background var(--swift);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--azure);background:var(--bg-card);outline:none}
.field textarea{resize:vertical;min-height:150px}
.field__help{font-size:.82rem;color:var(--ink-faint);margin:0}
.field__error{font-size:.82rem;color:#FF6B6B;margin:0;display:none}
.field.is-invalid input,.field.is-invalid textarea{border-color:#FF6B6B}
.field.is-invalid .field__error{display:block}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.form__note{font-size:.85rem;color:var(--ink-faint)}

.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.contact-detail{border-top:1px solid var(--line);padding:1.4rem 0}
.contact-detail dt{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5rem}
.contact-detail dd{margin:0;font-size:1.05rem}
.contact-detail dd a:hover{color:var(--azure)}

/* ============================================================
   CLOSER + FOOTER
   ============================================================ */
.closer{padding-block:var(--section);border-top:1px solid var(--line)}
/* Sized so the longest line ("worth watching.") stays inside the gutter.
   10vw overflowed at desktop widths. */
.closer__type{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,6.2vw,5.4rem);
  line-height:.94;letter-spacing:-.035em;text-transform:uppercase;
  margin:0 0 2.5rem;text-wrap:balance;
}
/* block, or it runs on to the previous word and overflows the gutter */
.closer__type em{display:block;font-style:normal;color:var(--azure)}

.footer{border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) 0 2.5rem}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:4rem}
.footer h3{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.3rem}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem}
.footer a{color:var(--ink-soft);font-size:.93rem;transition:color var(--swift);display:inline-block;padding:.15rem 0}
.footer a:hover{color:var(--azure)}
.footer__brand img{height:52px;width:auto;margin-bottom:1.2rem}
.footer__brand p{color:var(--ink-soft);max-width:34ch;font-size:.93rem}
.footer__credit{
  margin:1.1rem 0 0;font-size:.74rem;color:var(--ink-faint);line-height:1.6;
}
.footer__credit a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px}
.footer__credit a:hover{color:var(--azure)}
.footer__base{
  display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:2rem;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ============================================================
   FOOTER - phone condense
   Stacked, the four blocks ran 1.5 screens. Two columns for the
   short link lists, and the contact column spans full width so
   the four social links pair up instead of forming a long tail.
   Link padding stays >=24px of target height (WCAG 2.2 AA 2.5.8).
   ============================================================ */
@media (max-width:600px){
  .footer{padding:2.5rem 0 1.75rem}
  .footer__grid{grid-template-columns:1fr 1fr;gap:1.7rem 1.25rem;margin-bottom:1.9rem}
  .footer__brand{grid-column:1/-1}
  .footer__brand img{height:40px;margin-bottom:.75rem}
  .footer__brand p{font-size:.86rem;max-width:none}
  .footer h4{margin-bottom:.6rem}
  .footer ul{gap:.15rem}
  .footer a{font-size:.88rem;padding:.36rem 0}
  /* Contact block: phone + email full width, socials two-up beneath */
  .footer__grid > div:last-child{grid-column:1/-1}
  .footer__grid > div:last-child ul{display:grid;grid-template-columns:1fr 1fr;gap:.15rem 1.25rem}
  .footer__grid > div:last-child li:nth-child(-n+2){grid-column:1/-1}
  .footer__base{flex-direction:column;gap:.45rem;padding-top:1.35rem}
  .footer__credit{margin-top:.85rem;font-size:.68rem}
}


/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--slow),transform var(--slow)}
.reveal.is-in{opacity:1;transform:none}

/* ------------------------------------------------------------
   Scroll-in motion.

   Only the STARTING state lives in CSS. The finished state is written
   as an inline style by JavaScript, so if the transition engine ever
   stalls the element simply snaps visible instead of being stranded at
   opacity 0. An inline style also outranks every rule here, so nothing
   can leave content invisible.

   All scoped to .js, stamped in <head> before first paint — with
   JavaScript off, nothing is hidden in the first place.
   ------------------------------------------------------------ */
.js .anim{
  opacity:0;
  transition:opacity 780ms var(--ease),transform 780ms var(--ease);
  will-change:opacity,transform;
}
.js .anim--up   {transform:translateY(30px)}
.js .anim--left {transform:translateX(-44px)}
.js .anim--right{transform:translateX(44px)}
.js .anim--zoom {transform:translateY(28px) scale(1.03)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .svc__row{grid-template-columns:auto 1fr;gap:1.5rem 2rem}
  .svc__aside{grid-column:2}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* backdrop-filter turns .nav into a containing block for its
     position:fixed child, which collapses the full-screen menu down to the
     height of the bar — so translateY(-100%) no longer hides it and the
     links sit over the page once the nav goes sticky. Solid bar instead. */
  .nav.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,6,7,.95)}
  .nav__toggle{display:flex}
  .nav__links{
    position:fixed;inset:0;background:var(--bg);flex-direction:column;
    justify-content:center;gap:2rem;transform:translateY(-100%);
    transition:transform 480ms var(--ease);
  }
  .nav__links.is-open{transform:none}
  .nav__link{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;text-transform:uppercase}
  .split{grid-template-columns:1fr}
  .work{column-count:2}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .hero__meta{text-align:left}
  .row-2{grid-template-columns:1fr}
}
@media (max-width:1200px){
  .work{column-count:2}
}
@media (max-width:560px){
  /* footer columns are set in the phone-condense block above */
  .marquee--display .marquee__item{font-size:2.2rem}
  .work{column-count:1}
}

/* ============================================================
   SMALL SCREENS — text fitting
   Grid and flex children default to min-width:auto, so a single
   unbreakable word ("Photography") can push a column wider than the
   phone. These two rules cost desktop nothing.
   ============================================================ */
.split > *,.split--doc > *,.svc__row > *,.contact-grid > *,.card > *,.work__item > *{min-width:0}

/* Deliberately NOT overflow-wrap:break-word on display type — it snaps words
   mid-letter ("REGIO / NAL"). Headings are sized to fit their column instead. */
h1,h2,h3,h4,.closer__type,.hero__type{overflow-wrap:normal;word-break:normal}

/* Display type is sized by clamp() whose *minimum* was larger than a
   phone can hold. Overridden only below 700px — the desktop scale in
   :root is untouched. */
/* "PHOTOGRAPHY" as a page H1 just outgrows its gutter between 700 and 1250px.
   Above 1250 there is room, so the desktop scale is left alone. */
@media (min-width:701px) and (max-width:1430px){
  .phead h1{font-size:clamp(2rem,6.5vw,5rem)}
}

@media (max-width:700px){
  :root{
    --t-hero:clamp(2rem,10vw,4.4rem);
    --t-h1:clamp(1.35rem,6.2vw,2.7rem);
    --t-h2:clamp(1.15rem,5.2vw,2.2rem);
    --t-h3:clamp(.95rem,4.3vw,1.6rem);
  }
  .closer__type{font-size:clamp(1.45rem,6.6vw,2.9rem)}
  .svc__row{grid-template-columns:auto 1fr}
  .svc__head h2,.svc__head h3{font-size:clamp(1.05rem,4.8vw,2rem)}
  .split h2{font-size:clamp(1.3rem,5.6vw,2.3rem)}
}

/* Very small handsets (320px). "PHOTOGRAPHY" and "MANAGEMENT" still ran long. */
@media (max-width:400px){
  :root{--t-h1:clamp(1.1rem,6.1vw,2.7rem);--t-h3:clamp(.85rem,4vw,1.5rem)}
  .svc__head h2,.svc__head h3{font-size:clamp(.9rem,4.2vw,1.9rem)}
  .card h2,.card h3{font-size:clamp(.9rem,4.1vw,1.5rem)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .marquee__track{animation:none}
  /* Nothing may stay hidden for someone who asked for less motion. */
  .reveal,
  .js .anim{opacity:1!important;transform:none!important;transition:none!important}
}

@media print{
  .nav,.marquee,.hero__media,.closer{display:none}
  body{background:#fff;color:#000}
}