/* ===================================================================
   Studio9Art — CONCEPT V2, "the real site, rebuilt".

   This one deliberately keeps the shape of studio9art.net.au: the black
   ground, the thin utility bar above the nav, the all caps menu, the full
   width photographic slider, the ABOUT block with the mark on the right,
   and the three column footer closing on the Acknowledgement of Country.

   What it adds is our layer: a real moulding treatment on anything that
   holds an image, motion that reveals rather than decorates, a theme the
   visitor controls, a framed enquiry form, and the chat that answers.
   =================================================================== */

:root{
  --ink:      #0b0b0b;   /* their ground, near black */
  --ink-2:    #111111;   /* alternate band */
  --ink-3:    #161616;   /* card ground */
  --bone:     #ffffff;
  --bone-2:   #f3f1ec;
  --grey:     #a8a49d;
  --grey-2:   #8d8a83;
  --mat:      #fbf9f4;
  --mat-well: #141314;
  --line:     rgba(255,255,255,.14);
  --line-2:   rgba(255,255,255,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
  --pad-y: clamp(72px, 8vw, 128px);
  --gut: clamp(20px, 5vw, 68px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Satoshi",system-ui,sans-serif;
  background:var(--ink); color:var(--bone);
  font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
.wrap{ max-width:1360px; margin:0 auto; padding-inline:var(--gut); }
.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; }

h1,h2,h3,.h{ font-family:"Clash Display","Satoshi",system-ui,sans-serif; font-weight:600; line-height:1.08; letter-spacing:.005em; }

/* ============================ UTILITY BAR ============================ */
/* their site opens on a slim black strip: phone on the left, socials on the
   right. Kept, because it is the first thing a returning customer looks for. */
.util{
  position:relative; z-index:60;
  background:var(--ink); border-bottom:1px solid var(--line);
  font-size:12.5px; letter-spacing:.06em;
}
.util__inner{
  max-width:1360px; margin:0 auto; padding:9px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.util a{ display:inline-flex; align-items:center; gap:8px; color:var(--bone); }
.util a:hover{ color:var(--grey); }
.util svg{ width:14px; height:14px; }
.util__social{ display:flex; align-items:center; gap:10px; }
.util__social a{
  width:28px; height:28px; border-radius:50%; justify-content:center;
  border:1px solid var(--line-2);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.util__social a:hover{ background:var(--bone); color:var(--ink); }

/* ============================ NAV ============================ */
/* the ground is carried from the very top, never faded in on scroll */
.nav{
  position:sticky; top:0; z-index:55;
  background:rgba(11,11,11,.97);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
  transition:padding .25s var(--ease);
}
.nav__inner{
  max-width:1360px; margin:0 auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:clamp(14px,2vw,30px);
}
.nav__logo img{ height:64px; width:auto; transition:height .25s var(--ease); }
.nav--slim .nav__logo img{ height:44px; }
.nav__links{ display:flex; align-items:center; gap:clamp(6px,1vw,14px); margin-left:auto; }
.nav__links a{
  font-size:12.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  padding:10px 13px; color:var(--bone); white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__links a:hover{ background:rgba(255,255,255,.09); }
.nav__links a[aria-current="page"]{ background:rgba(255,255,255,.14); }
.nav__cta{
  border:1px solid var(--line-2); padding:11px 20px;
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__cta:hover{ background:var(--bone); color:var(--ink); }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; width:44px; height:30px; position:relative; margin-left:auto; }
.nav__burger span{ position:absolute; left:6px; right:6px; height:1.6px; background:var(--bone); transition:.25s var(--ease); }
.nav__burger span:nth-child(1){ top:8px; } .nav__burger span:nth-child(2){ bottom:8px; }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:70; background:#080808;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.menu.open{ opacity:1; visibility:visible; }
.menu a{ font-family:"Clash Display","Satoshi",sans-serif; font-size:clamp(1.4rem,6vw,2rem); padding:12px 18px; letter-spacing:.02em; }
.menu__close{ position:absolute; top:18px; right:18px; width:48px; height:48px; background:none; border:0; color:var(--bone); cursor:pointer; font-size:26px; }
.menu__logo{ margin-bottom:26px; height:66px; }

/* ============================ HERO SLIDER ============================ */
/* their homepage opens on a full width photographic slider. Same idea, but
   the slides crossfade and drift instead of sliding, so the work is never
   yanked across the screen. */
.hero{ position:relative; height:clamp(440px, 78vh, 760px); overflow:hidden; background:#000; }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06); transition:opacity 1.4s var(--ease);
}
.hero__slide.is-on{ opacity:1; animation:heroDrift 9s linear forwards; }
@keyframes heroDrift{ from{ transform:scale(1.06); } to{ transform:scale(1.13); } }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.86) 100%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 52%, rgba(0,0,0,0) 100%);
}
.hero__dots{ left:0; right:0; }
/* v3, 25 Aug 2026: the buttons are centred. The lockup used to sit low and left to stay
   clear of the Studio9Art wordmark watermarked into the middle of their slide
   photography, but once Scott had the hero text removed there is only the button pair
   left, and it sits low enough that the watermark is well above it. */
.hero__copy{
  position:relative; z-index:2; height:100%;
  max-width:1360px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  padding:0 var(--gut) clamp(64px,9vh,104px);
}
/* hero copy sits on photographs, so it stays light in both themes */
.hero__kicker{ font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:#fff; opacity:.85; margin-bottom:16px; }
.hero h1{ font-size:clamp(1.85rem,4.4vw,3.5rem); max-width:17ch; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.55); }
.hero__sub{ margin-top:18px; max-width:46ch; color:#eceae5; font-size:clamp(.96rem,1.1vw,1.08rem);
  text-shadow:0 1px 14px rgba(0,0,0,.6); }
.hero__btns{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero .btn{ border-color:#fff; }
.hero .btn--solid{ background:#fff; color:#0b0b0b; }
.hero .btn--solid:hover{ background:transparent; color:#fff; }
.hero .btn--ghost{ color:#fff; }
.hero .btn--ghost:hover{ background:#fff; color:#0b0b0b; }
.hero__dots{ position:absolute; bottom:22px; left:0; right:0; z-index:3; display:flex; gap:9px; justify-content:center; }
.hero__dots button{
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.35); border:0; transition:background .25s var(--ease), transform .25s var(--ease);
}
.hero__dots button.is-on{ background:var(--bone); transform:scale(1.35); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--bone); transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn--solid{ background:var(--bone); color:var(--ink); }
.btn--solid:hover{ background:transparent; color:var(--bone); }
.btn--ghost{ background:transparent; color:var(--bone); }
.btn--ghost:hover{ background:var(--bone); color:var(--ink); }
.btn--full{ width:100%; }

/* ============================ PAGE HEADER ============================ */
.phead{ padding:clamp(48px,6vw,86px) 0 clamp(34px,4vw,56px); border-bottom:1px solid var(--line); }
.crumbs{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); margin-bottom:20px; }
.crumbs a:hover{ color:var(--bone); }
.phead h1{ font-size:clamp(1.9rem,4.4vw,3.2rem); text-transform:uppercase; }
.phead p{ margin-top:18px; max-width:66ch; color:var(--grey); }

/* ============================ SECTIONS ============================ */
.sec{ padding:var(--pad-y) 0; }
.sec--band{ background:var(--ink-2); border-block:1px solid var(--line); }
.sec__head{ margin-bottom:clamp(34px,4vw,58px); }
.sec__head h2{ font-size:clamp(1.5rem,3.1vw,2.35rem); text-transform:uppercase; }
.sec__head p{ margin-top:16px; max-width:64ch; color:var(--grey); }
.kicker{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-2); margin-bottom:14px; }

/* ABOUT: their two column block, copy left and the mark right */
.about{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(36px,6vw,92px); align-items:center; }
.about__copy p{ color:#d8d5cf; margin-bottom:18px; max-width:62ch; }
.about__copy p:last-child{ margin-bottom:0; }
.about__mark{ display:flex; justify-content:center; }
.about__mark img{ width:min(430px,100%); }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(44px,5vw,72px); }
.stat{ background:var(--ink); padding:28px 22px; text-align:center; }
.stat b{ display:block; font-family:"Clash Display","Satoshi",sans-serif; font-size:clamp(1.5rem,2.6vw,2.1rem); }
.stat span{ display:block; margin-top:8px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); }

/* ============================ FRAME COMPONENTS ============================ */
/* anything holding an image is built as a real frame: moulding, mat, window */
.artframe{
  position:relative; display:block; background:linear-gradient(145deg,#232227,#111014 60%,#191820);
  padding:clamp(9px,1.3vw,15px); border-radius:1px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 3px rgba(255,255,255,.06),
    inset 0 -2px 4px rgba(0,0,0,.5),
    0 30px 60px -28px rgba(0,0,0,.85),
    0 6px 14px -8px rgba(0,0,0,.6);
}
.artframe--oak{ background:linear-gradient(150deg,#d9ab6d,#b07f45 55%,#c79a5c);
  box-shadow:inset 0 0 0 1px rgba(80,50,15,.5), inset 0 2px 3px rgba(255,240,215,.35),
             inset 0 -3px 5px rgba(70,45,15,.45), 0 30px 60px -28px rgba(0,0,0,.8); }
.artframe--walnut{ background:linear-gradient(150deg,#5e4230,#3a281b 55%,#4c3626);
  box-shadow:inset 0 0 0 1px rgba(20,10,4,.6), inset 0 2px 3px rgba(210,175,140,.22),
             inset 0 -3px 5px rgba(20,10,4,.5), 0 30px 60px -28px rgba(0,0,0,.82); }
.artframe__mat{ background:var(--mat); padding:clamp(11px,2.2vw,26px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10), inset 0 1px 2px rgba(0,0,0,.06); }
.artframe__win{ position:relative; padding:2px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.22), 2px 2px 3px -1px rgba(0,0,0,.18) inset; }
.artframe__win img{ width:100%; height:auto; background:#f4f2ec; }

/* ============================ CARD GRIDS ============================ */
.grid{ display:grid; gap:clamp(20px,2.6vw,34px); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.card{ background:var(--ink-3); border:1px solid var(--line); padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:12px;
  transition:border-color .25s var(--ease), transform .25s var(--ease); }
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.card__n{ font-size:11px; letter-spacing:.2em; color:var(--grey-2); }
.card h3{ font-size:clamp(1.05rem,1.5vw,1.28rem); text-transform:uppercase; }
.card p{ color:var(--grey); font-size:.95rem; }

/* Product card. These photographs are already pictures OF frames, so they
   are shown on a plain plate. Putting a frame around a frame reads as a
   mistake, and the moulding treatment is kept for the artworks. */
.prod{ display:flex; flex-direction:column; gap:16px; }
.prod__shot{ background:#fff; border:1px solid var(--line); padding:10px; }
.prod__shot img{ width:100%; height:auto; }
.prod__body h3{ font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; }
.prod__meta{ margin-top:7px; font-size:.9rem; color:var(--grey); }
.prod__price{ margin-top:10px; font-size:.95rem; color:var(--bone); }

/* gallery masonry: their art gallery, shown as hung work */
.hang{ columns:3; column-gap:clamp(20px,2.6vw,34px); }
.hang > *{ break-inside:avoid; margin-bottom:clamp(20px,2.6vw,34px); }
.hang figcaption{ margin-top:12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); text-align:center; }

/* artists line, as on their gallery page */
.artists{ display:flex; flex-wrap:wrap; gap:10px 0; align-items:center; justify-content:center; margin-top:26px; }
.artists span{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); padding:0 16px; border-right:1px solid var(--line); }
.artists span:last-child{ border-right:0; }

/* partners */
.partners{ display:flex; flex-wrap:wrap; gap:14px; }
.partners li{ list-style:none; border:1px solid var(--line); padding:14px 22px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); }

/* detail rows */
.rows{ border-top:1px solid var(--line); }
.rows > div{ display:flex; flex-wrap:wrap; gap:8px 26px; padding:18px 0; border-bottom:1px solid var(--line); }
.rows dt{ flex:0 0 200px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); }
.rows dd{ flex:1 1 260px; color:#dedbd5; }
.rows dd a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ============================ ENQUIRY FORM, FRAMED ============================ */
.enq{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(34px,5vw,80px); align-items:start; }
.enq__lead p{ color:var(--grey); margin-top:16px; max-width:46ch; }
.formframe{ padding:clamp(11px,1.4vw,18px); }
.formframe__mat{ background:var(--mat-well); padding:clamp(24px,3.2vw,44px); }
.qform{ display:flex; flex-direction:column; gap:22px; }
.formlogo{ display:flex; justify-content:center; padding:4px 0 16px; }
.formlogo img{ height:88px; width:auto; }
/* the mark supplied is black artwork, so on the dark mat it is inverted
   rather than shipped as a black shape on a black ground */
html[data-theme="dark"] .formlogo img{ filter:invert(1); }
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); }
.field input, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line-2);
  color:var(--bone); font-family:"Satoshi",sans-serif; font-size:1rem; padding:10px 0; resize:none;
  transition:border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--bone); }
.qform__hint{ font-size:12px; color:var(--grey-2); margin-top:-4px; }
.qform__done{ font-family:"Clash Display","Satoshi",sans-serif; font-size:1.05rem; padding-top:6px; }
.qcard{ display:flex; flex-direction:column; gap:22px; }
.qcard__line{ color:var(--grey); text-align:center; max-width:34ch; margin:0 auto; }
.qcard__acts{ display:flex; flex-direction:column; gap:12px; }
.qcard__note{ font-size:12.5px; color:var(--grey-2); text-align:center; }
.qcard__note a{ text-decoration:underline; text-underline-offset:4px; }
.qform__after{ font-size:12.5px; line-height:1.7; color:var(--grey-2); margin-top:20px; padding:0 clamp(4px,1vw,10px); }

/* A supplied photograph shown on its own, with no frame and mat treatment. */
.plainshot{ display:block; width:100%; height:auto; }

/* ==================== PRODUCT SLIDESHOW ==================== */
/* The supplied rail renders are tall portraits on solid black, so the stage
   keeps a fixed height and letterboxes with contain. On this dark theme the
   letterbox is invisible, and the light theme gets the same black stage so
   the renders never sit on a pale ground they were not shot against. */
.pslide{ position:relative; background:#000; border:1px solid var(--line); overflow:hidden; }
.pslide__stage{ position:relative; height:clamp(360px,52vh,560px); }
.pslide__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:0; transition:opacity .6s ease;
}
.pslide__img.is-on{ opacity:1; }
.pslide__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; min-width:44px; min-height:44px; padding:0;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.45); color:#fff;
  border-radius:50%; transition:background .2s ease, border-color .2s ease;
}
.pslide__nav:hover{ background:rgba(0,0,0,.85); border-color:#fff; }
.pslide__nav:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.pslide__nav--prev{ left:14px; }
.pslide__nav--next{ right:14px; }
.pslide__nav svg{ width:18px; height:18px; }
.pslide__dots{ display:flex; gap:4px; justify-content:center; padding:10px 0 12px; background:#000; }
/* The visible dot is 8px, but the hit area is padded out to 24px square so the
   control still meets the minimum target size. background-clip keeps the paint
   on the content box, so padding enlarges the target without enlarging the dot. */
.pslide__dots button{
  width:8px; height:8px; padding:8px; border:0; box-sizing:content-box; cursor:pointer;
  background:rgba(255,255,255,.34); background-clip:content-box;
  border-radius:50%; transition:background .2s ease;
}
.pslide__dots button.is-on{ background:#fff; background-clip:content-box; }
.pslide__dots button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .pslide__img{ transition:none; } }

/* ============================ FOOTER ============================ */
.foot{ background:#070707; border-top:1px solid var(--line); padding:clamp(52px,6vw,84px) 0 34px; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,4vw,58px); align-items:start; }
.foot h3{ font-size:1.35rem; margin-bottom:20px; }
.foot__mark{ display:flex; justify-content:center; }
.foot__mark img{ width:min(300px,100%); }
.foot__links{ display:flex; flex-direction:column; gap:9px; align-items:flex-end; text-align:right; }
.foot__links a{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#d8d5cf; }
.foot__links a:hover{ color:var(--bone); }
.foot__nap{ display:flex; flex-direction:column; gap:11px; color:#d8d5cf; font-size:.94rem; }
.foot__nap a:hover{ text-decoration:underline; text-underline-offset:4px; }
.foot__social{ display:flex; gap:11px; margin-bottom:22px; }
.foot__social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease), color .2s var(--ease); }
.foot__social a:hover{ background:var(--bone); color:var(--ink); }
.foot__social svg{ width:16px; height:16px; }
.ack{ margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid var(--line); font-size:12px; line-height:1.75; color:var(--grey-2); text-align:center; }
.foot__base{ margin-top:22px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; font-size:11.5px; color:var(--grey-2); text-align:center; }
.foot__base a{ border-bottom:1px solid rgba(255,255,255,.3); }

/* ============================ MOTION ============================ */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hero__slide.is-on{ animation:none; }
}

/* ============================ THEME SWITCH ============================ */
.themetog{
  position:relative; flex:0 0 auto; width:62px; height:32px; border:0; padding:0; cursor:pointer; border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.6), rgba(243,245,250,.28));
  backdrop-filter:blur(18px) saturate(190%); -webkit-backdrop-filter:blur(18px) saturate(190%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 2px rgba(17,16,17,.1),
             inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -12px rgba(0,0,0,.5);
  -webkit-tap-highlight-color:transparent;
}
.themetog__knob{
  position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(160deg,#fff,#e6e6e6); box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .35s var(--ease);
}
.themetog[aria-checked="true"] .themetog__knob{ transform:translateX(30px); }
.themetog svg{ position:absolute; top:9px; width:14px; height:14px; color:#3a3a3a; }
.themetog .i-sun{ left:8px; } .themetog .i-moon{ right:8px; }

/* ============================ LIGHT THEME ============================ */
/* the same site on paper rather than on a gallery wall */
html:not([data-theme="dark"]) body{ background:#f5f3ef; color:#141414; }
html:not([data-theme="dark"]) .util,
html:not([data-theme="dark"]) .nav{ background:rgba(245,243,239,.97); border-bottom-color:rgba(0,0,0,.12); }
html:not([data-theme="dark"]) .util a,
html:not([data-theme="dark"]) .nav__links a,
html:not([data-theme="dark"]) .nav__cta{ color:#141414; }
html:not([data-theme="dark"]) .util__social a,
html:not([data-theme="dark"]) .nav__cta{ border-color:rgba(0,0,0,.28); }
html:not([data-theme="dark"]) .util__social a:hover,
html:not([data-theme="dark"]) .nav__cta:hover{ background:#141414; color:#f5f3ef; }
html:not([data-theme="dark"]) .nav__links a:hover{ background:rgba(0,0,0,.07); }
html:not([data-theme="dark"]) .nav__links a[aria-current="page"]{ background:rgba(0,0,0,.11); }
html:not([data-theme="dark"]) .nav__logo img,
html:not([data-theme="dark"]) .menu__logo,
html:not([data-theme="dark"]) .about__mark img,
html:not([data-theme="dark"]) .foot__mark img{ filter:invert(1); }
html:not([data-theme="dark"]) .nav__burger span{ background:#141414; }
html:not([data-theme="dark"]) .menu{ background:#f5f3ef; }
html:not([data-theme="dark"]) .menu__close{ color:#141414; }
html:not([data-theme="dark"]) .sec--band{ background:#eceae4; border-block-color:rgba(0,0,0,.1); }
html:not([data-theme="dark"]) .phead{ border-bottom-color:rgba(0,0,0,.12); }
html:not([data-theme="dark"]) .crumbs,
html:not([data-theme="dark"]) .kicker,
html:not([data-theme="dark"]) .sec__head p,
html:not([data-theme="dark"]) .card p,
html:not([data-theme="dark"]) .phead p,
html:not([data-theme="dark"]) .prod__meta,
html:not([data-theme="dark"]) .artists span,
html:not([data-theme="dark"]) .hang figcaption,
html:not([data-theme="dark"]) .stat span,
html:not([data-theme="dark"]) .enq__lead p,
html:not([data-theme="dark"]) .ack,
html:not([data-theme="dark"]) .foot__base{ color:#5d5a54; }
html:not([data-theme="dark"]) .about__copy p,
html:not([data-theme="dark"]) .rows dd,
html:not([data-theme="dark"]) .foot__nap,
html:not([data-theme="dark"]) .foot__links a{ color:#33312e; }
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .stat{ background:#ffffff; border-color:rgba(0,0,0,.1); }
html:not([data-theme="dark"]) .stats{ background:rgba(0,0,0,.1); border-color:rgba(0,0,0,.1); }
html:not([data-theme="dark"]) .partners li,
html:not([data-theme="dark"]) .rows,
html:not([data-theme="dark"]) .rows > div,
html:not([data-theme="dark"]) .ack{ border-color:rgba(0,0,0,.12); }
html:not([data-theme="dark"]) .partners li{ color:#141414; }
html:not([data-theme="dark"]) .btn{ border-color:#141414; }
html:not([data-theme="dark"]) .btn--solid{ background:#141414; color:#f5f3ef; }
html:not([data-theme="dark"]) .btn--solid:hover{ background:transparent; color:#141414; }
html:not([data-theme="dark"]) .btn--ghost{ color:#141414; }
html:not([data-theme="dark"]) .btn--ghost:hover{ background:#141414; color:#f5f3ef; }
html:not([data-theme="dark"]) .foot{ background:#eceae4; border-top-color:rgba(0,0,0,.12); }
html:not([data-theme="dark"]) .foot__social a{ border-color:rgba(0,0,0,.28); }
html:not([data-theme="dark"]) .foot__social a:hover{ background:#141414; color:#f5f3ef; }
html:not([data-theme="dark"]) .formframe__mat{ background:#fcfbf8; }
html:not([data-theme="dark"]) .field label,
html:not([data-theme="dark"]) .qform__hint{ color:#5d5a54; }
html:not([data-theme="dark"]) .qcard__line,
html:not([data-theme="dark"]) .qcard__note{ color:#5d5a54; }
/* The dark theme grey drops to 3.33:1 on the light form mat, so the footnote
   takes the same darker grey the hint already uses. */
html:not([data-theme="dark"]) .qform__after{ color:#5d5a54; }
html:not([data-theme="dark"]) .field input,
html:not([data-theme="dark"]) .field textarea{ color:#141414; border-bottom-color:rgba(0,0,0,.24); }
html:not([data-theme="dark"]) .field input:focus,
html:not([data-theme="dark"]) .field textarea:focus{ border-bottom-color:#141414; }
html:not([data-theme="dark"]) .qform__done{ color:#141414; }
/* The hero sits on photographs in both themes, so its buttons stay light.
   These have to be stated at light theme specificity, otherwise the generic
   light theme button rules further up win and put dark on dark. */
html:not([data-theme="dark"]) .hero .btn{ border-color:#fff; }
html:not([data-theme="dark"]) .hero .btn--solid{ background:#fff; color:#0b0b0b; }
html:not([data-theme="dark"]) .hero .btn--solid:hover{ background:transparent; color:#fff; }
html:not([data-theme="dark"]) .hero .btn--ghost{ background:transparent; color:#fff; }
html:not([data-theme="dark"]) .hero .btn--ghost:hover{ background:#fff; color:#0b0b0b; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1100px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__inner .themetog{ margin-left:auto; }
  .nav__cta{ display:none; }
  .hang{ columns:2; }
}
@media (max-width:820px){
  .about{ grid-template-columns:1fr; }
  .about__mark{ order:-1; }
  .about__mark img{ width:min(280px,70%); }
  .grid--3, .grid--2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .enq{ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:1fr; text-align:center; }
  .foot__links{ align-items:center; text-align:center; }
  .foot__nap{ align-items:center; }
  .foot__social{ justify-content:center; }
  .util__inner{ font-size:11.5px; }
  .hang{ columns:1; }
}
@media (max-width:520px){
  .nav__logo img{ height:48px; }
  .stats{ grid-template-columns:1fr; }
  .hero{ height:clamp(400px,68vh,560px); }
  .rows dt{ flex-basis:100%; }
}
/* touch targets stay honest on phones */
@media (hover:none){
  .menu a{ padding:14px 20px; }
  .foot__links a{ display:inline-block; padding:7px 0; }
}