/* ==========================================================
   Silver Wolf Art Studio
   Palette pulled from the wolf logo: coral sun, deep teal ink,
   cream fur, on a near-black canvas.
   ========================================================== */
:root {
  --bg: #0a0e0f;
  --frame: #151b1d;
  --panel: #050708;
  --surface: #161d1f;
  --surface-2: #1d2729;
  --line: #2a3437;
  --teal: #124a54;
  --teal-bright: #2f7f8b;
  --coral: #ee5a4a;
  --coral-hover: #ff7062;
  --cream: #efeae0;
  --muted: #a3aaa8;
  --dim: #7d8684;

  --serif: "DM Serif Display", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --script: "Ms Madi", "Brush Script MT", cursive;

  --gutter: clamp(16px, 4vw, 56px);
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
/* The pinned opening section and replaying fade-ins confuse the browser's
   scroll anchoring, which then nudges the page on its own; switch it off */
html, body { overflow-anchor: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--coral); color: var(--panel); padding: 10px 16px; font-weight: 600;
  text-decoration: none; border-radius: 4px;
}
.skip:focus { top: 16px; }

/* ---------- shared type ---------- */
.script {
  font-family: var(--script);
  color: var(--coral);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.h-caps {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  position: relative;
}
.h-caps .script { margin-left: .2em; white-space: nowrap; vertical-align: -.25em; }
.body-caps {
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .02em;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.btn {
  display: inline-flex; align-items: center; gap: .7em;
  background: var(--coral); color: #140807;
  font: 600 .78rem/1 var(--sans);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 14px 18px; min-height: 44px;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { font-size: 1.1em; stroke-width: 2; transition: transform .25s var(--ease); }
.btn:hover { background: var(--coral-hover); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-lg { padding: 18px 26px; font-size: .85rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter) 14px;
  background: linear-gradient(to bottom, rgba(10,14,15,.92), rgba(10,14,15,.75));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  font: 400 1rem/1 var(--serif);
  letter-spacing: .01em;
}
.brand img { width: 46px; height: auto; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; }
.brand-name {
  font-family: var(--script);
  font-size: 2.1rem;
  line-height: .8;
  color: var(--cream);
  white-space: nowrap;
}
.brand-sub {
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 4px 0 0 .3em;
}
.nav {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
  width: min(60vw, 820px);
}
.nav a {
  border-top: 1px solid var(--muted);
  padding-top: 10px;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  min-height: 44px;
  transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a.active { color: var(--coral); border-color: var(--coral); }

/* Menu button: phones only */
.menu-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; cursor: pointer; color: var(--cream);
  position: relative;
}
.menu-toggle span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 26px; }
.site-header.open .menu-toggle span:first-child { top: 21px; transform: rotate(45deg); }
.site-header.open .menu-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(80px, 10vw, 140px);
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.05fr) 1fr;
  grid-template-rows: auto auto;
}
/* Desktop: the opening section fills the whole screen below the header,
   so nothing of the next section shows until you scroll, with its
   content centred in that space (equal room above and below) */
@media (min-width: 721px) {
  .hero {
    min-height: calc(100vh - 76px);
    min-height: calc(100svh - 76px);
    align-content: center;
    padding-top: clamp(20px, 3vw, 48px);
    padding-bottom: clamp(20px, 3vw, 48px);
  }

  /* "Pull up like a page": the opening section stays pinned while the rest
     of the site slides up over it. --cover (0 to 1) is set from script.js
     as the next section rises, easing the opening back and into shadow. */
  .hero {
    position: sticky; top: 76px; z-index: 0;
    transform-origin: 50% 30%;
    transform: scale(calc(1 - var(--cover, 0) * .07));
    opacity: calc(1 - var(--cover, 0) * .75);
    filter: blur(calc(var(--cover, 0) * 3px));
  }
  main > section:not(.hero) { position: relative; z-index: 1; background: var(--bg); }
  .hero + section {
    border-radius: 28px 28px 0 0;
    overflow: hidden;
    box-shadow: 0 -24px 60px rgba(0,0,0,.55);
  }
}
.wordmark {
  grid-column: 1 / -1; grid-row: 1;
  position: relative; z-index: 1;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4.2rem, 16.4vw, 17rem);
  line-height: .9;
  letter-spacing: -.035em;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

.hero-art {
  grid-column: 2; grid-row: 1 / 3;
  margin: clamp(80px, 9.4vw, 165px) 0 0;
  position: relative; z-index: 2;
  justify-self: center;
  width: min(100%, 470px);
}
.hero-art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 30px 80px rgba(0,0,0,.55); }

.hero-meta {
  grid-column: 1; grid-row: 2;
  align-self: start;
  margin-top: clamp(24px, 5vw, 80px);
}
.hero-meta dl {
  display: grid; grid-template-columns: 90px 1fr; gap: 10px 20px;
  margin: 0 0 40px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1.6;
}
.hero-meta dt { color: var(--dim); }
.hero-meta dd { margin: 0; }

.hero-script {
  grid-column: 3; grid-row: 2;
  align-self: end;
  margin: 0 0 8% -14%;
  position: relative; z-index: 3;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.15;
  rotate: -8deg;
  max-width: 11ch;
}

/* ---------- panels over blurred art ---------- */
.statement, .services { position: relative; padding: clamp(40px, 6vw, 90px) var(--gutter); isolation: isolate; }
.panel-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
}
.panel-bg::before {
  content: ""; position: absolute; inset: -60px;
  background: var(--bg-img) center / cover no-repeat;
  filter: blur(38px) saturate(1.15) brightness(.6);
}
.panel {
  background: var(--panel);
  border-radius: var(--radius);
  max-width: 1280px; margin: 0 auto;
  position: relative;
}

/* ---------- about: statement ---------- */
.statement-panel {
  padding: clamp(70px, 10vw, 140px) clamp(20px, 6vw, 90px);
  text-align: center;
}
.statement-text {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4.3vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 17ch; margin: 0 auto;
  position: relative; z-index: 1;
}
.statement-text .dim { color: var(--dim); }
.polaroid {
  position: absolute; z-index: 2;
  width: clamp(70px, 9vw, 120px);
  aspect-ratio: 3 / 4; object-fit: cover;
  border: 3px solid var(--cream);
  box-shadow: 0 14px 30px rgba(0,0,0,.6);
}
.p1 { top: 14%; right: 15%; rotate: 9deg; }
.p2 { top: 38%; left: 13%; rotate: -8deg; }
.statement-sub { margin: clamp(48px, 6vw, 80px) auto 0; max-width: 560px; position: relative; }
.statement-sub .script { margin-bottom: .05em; transform: rotate(-4deg); position: relative; z-index: 1; }
.statement-sub p:not(.script) {
  text-transform: uppercase; font-size: .8rem; letter-spacing: .02em; line-height: 1.6; color: var(--muted);
}

/* ---------- about: "museum hanging" ----------
   Desktop and phones share the label, statement, paragraph and link.
   Desktop adds the hanging photo wall; phones leave it out. */
.statement-panel { display: none; }
.about3 {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(30px, 4vw, 60px) 0 clamp(20px, 3vw, 40px);
}
.a3-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cream);
}
.a3-eyebrow::before, .a3-eyebrow::after { content: ""; width: 48px; height: 1px; background: var(--coral); }
.a3-title {
  margin-top: 24px; max-width: 25ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  line-height: 1.05; letter-spacing: -.015em; color: var(--cream);
  text-shadow: 0 4px 30px rgba(0,0,0,.45);
}
/* "Silver Wolf" in the same cream script as the header logo */
.a3-brand { font-family: var(--script); font-size: 1.45em; line-height: 0; color: var(--cream); margin-right: .04em; }
.nowrap { white-space: nowrap; }
.a3-title .script { font-style: normal; font-size: 1.45em; line-height: 0; color: var(--coral); margin-left: .06em; }
.a3-body {
  margin-top: clamp(40px, 4vw, 60px); max-width: 60ch;
  font-size: 1.02rem; line-height: 1.75; color: var(--muted);
}
.about-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; padding-bottom: 6px;
  color: var(--coral); text-decoration: none;
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600;
  border-bottom: 1px solid currentColor;
  min-height: 44px;
}
.about-link svg { font-size: 1.1em; stroke-width: 2; transition: transform .25s var(--ease); }
.about-link:hover svg { transform: translateX(4px); }

@media (min-width: 721px) {
  /* Same format as the phone: the statement, paragraph and link centred on
     a full screen of the blurred tree texture, with a soft dark wash so the
     words read clearly. No photo wall. */
  main .statement {
    min-height: calc(100vh - 76px);
    min-height: calc(100svh - 76px);
    display: flex; flex-direction: column; justify-content: center;
  }
  main .statement .panel-bg::before { filter: blur(30px) saturate(1.4) brightness(.85); }
  main .statement .panel-bg::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(70% 70% at 50% 50%, rgba(10,14,15,.82) 0%, rgba(10,14,15,.55) 70%, rgba(10,14,15,.35) 100%);
  }
  .about3 { max-width: 980px; padding: 40px 0; }
  .a3-body { margin-top: 32px; color: var(--cream); opacity: .85; }

  /* The hanging photo wall is switched off; its styles stay below in case
     it comes back. Two matching landscape frames either side, the square
     mural larger in the middle, labels lined up underneath. */
  .a3-wall {
    display: none;
    grid-template-columns: 1fr 1.3fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(28px, 3.6vw, 56px);
    row-gap: 18px;
    align-items: center;
    position: relative;
    width: 100%; max-width: 1000px; margin-top: clamp(44px, 4.5vw, 64px);
    padding-top: 34px;
  }
  /* Hanging rail along the top, each frame on its own wire with a coral pin.
     --wire (the distance from the rail to the frame) is measured in script.js */
  .a3-wall::before {
    content: ""; position: absolute; left: 2%; right: 2%; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239,234,224,.35) 12%, rgba(239,234,224,.35) 88%, transparent);
  }
  .a3-frame { position: relative; }
  .a3-frame::before {
    content: ""; position: absolute; left: 50%; bottom: 100%;
    width: 1px; height: var(--wire, 34px);
    background: rgba(239,234,224,.35);
  }
  .a3-frame::after {
    content: ""; position: absolute; left: calc(50% - 3px);
    bottom: calc(100% + var(--wire, 34px) - 3.5px);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--coral);
  }
  .a3-work { display: contents; text-align: left; }
  .a3-fineart > * { grid-column: 1; }
  .a3-feature > * { grid-column: 2; }
  .a3-portrait > * { grid-column: 3; }
  .a3-frame {
    grid-row: 1;
    border: clamp(6px, .6vw, 10px) solid #050708;
    padding: clamp(10px, 1.1vw, 16px);
    background: var(--cream);
    box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  }
  .a3-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .a3-feature .a3-frame img { aspect-ratio: 1 / 1; }
  .a3-fineart .a3-frame img { object-position: 55% 45%; }
  .a3-portrait .a3-frame img { object-position: 50% 35%; }
  .a3-label {
    grid-row: 2; align-self: start; text-align: left;
    margin-top: 6px; display: grid; gap: 4px;
    font-size: .8rem; color: var(--dim); line-height: 1.45;
  }
  .a3-label span { color: var(--coral); font-size: .72rem; letter-spacing: .12em; }
  .a3-label strong { color: var(--cream); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .88rem; }
}

/* Phones: the same statement layout without the photo wall, over a dark wash
   so the words read clearly on the lightly blurred tree texture */
@media (max-width: 720px) {
  .a3-wall { display: none; }
  .about3 { padding: 24px 4px; }
  .a3-title { font-size: 2.15rem; line-height: 1.12; margin-top: 20px; }
  .a3-body { margin-top: 26px; font-size: .98rem; line-height: 1.7; color: var(--cream); opacity: .82; }
  main .statement .panel-bg::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 70% at 50% 50%, rgba(10,14,15,.82) 0%, rgba(10,14,15,.6) 70%, rgba(10,14,15,.45) 100%);
  }
}

/* ---------- about: artist ---------- */
.artist { padding: clamp(20px, 4vw, 60px) var(--gutter); }
.artist-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(28px, 5vw, 70px);
  background: var(--panel);
  border: 1px solid var(--line);
}
.artist-img { margin: 0; }
.artist-img img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: 54% center; }
.artist-copy { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-top: auto; padding-top: 30px;
}
.tile {
  aspect-ratio: 1;
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; text-transform: uppercase; font-size: .66rem; letter-spacing: .05em; line-height: 1.35;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.tile svg { font-size: 30px; stroke-width: 1.3; color: var(--cream); }
.tile:hover { background: var(--teal); transform: translateY(-3px); }
.tile:nth-child(1) { grid-column: 1; grid-row: 1; }
.tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.tile:nth-child(4) { grid-column: 3; grid-row: 2; }

/* ---------- services ---------- */
.services-panel { padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px) clamp(30px, 4vw, 60px); }
.services-head {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: start;
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.services-head .body-caps { padding-top: 6px; }
.service-list { border-bottom: 1px solid var(--line); }
.service {
  display: grid;
  grid-template-columns: 56px 80px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 24px;
  padding: clamp(22px, 3vw, 34px) 10px;
  transition: background-color .3s var(--ease);
}
.service + .service { border-top: 1px solid rgba(42,52,55,.5); }
.service:hover { background: rgba(18,74,84,.22); }
.service-icon {
  width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--surface); color: var(--coral);
}
.service-icon svg { font-size: 22px; }
.service-num { font-size: 1.15rem; padding-left: 14px; }
.service h3 { font-weight: 400; text-transform: uppercase; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.1; }
.service p { text-transform: uppercase; font-size: .76rem; letter-spacing: .02em; line-height: 1.6; color: var(--muted); }

/* the whole row clicks through to Get in touch */
.service.is-link { position: relative; cursor: pointer; }
.service-link { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
.service-link::after { content: ""; position: absolute; inset: 0; } /* stretches the link over the row */
.service-go {
  display: inline-flex; vertical-align: middle; margin-left: .35em;
  color: var(--coral); opacity: .7;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.service-go svg { width: .95em; height: .95em; stroke-width: 2; }
.service.is-link:hover .service-link,
.service-link:focus-visible { color: var(--coral); }
.service.is-link:hover .service-go { opacity: 1; transform: translateX(4px); }
.service-link:focus-visible { outline: none; }
.service.is-link:has(.service-link:focus-visible) { outline: 2px solid var(--coral); outline-offset: -2px; }

/* ---------- works ---------- */
.works { padding: clamp(40px, 6vw, 90px) var(--gutter); }
.works-panel { padding: clamp(36px, 5vw, 70px) clamp(20px, 3vw, 40px); border: 1px solid var(--line); }
.works-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 48px); }
.works-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.work-label { display: flex; justify-content: space-between; gap: 10px; min-height: 48px; margin-bottom: 12px; }
.work-label h3 { font-weight: 400; text-transform: uppercase; font-size: .78rem; line-height: 1.3; letter-spacing: .02em; }
.work-label p { font-size: .6rem; text-transform: uppercase; line-height: 1.45; color: var(--dim); text-align: right; max-width: 18ch; letter-spacing: .02em; }

.work-img {
  display: block; width: 100%; padding: 0; border: 0; background: var(--surface);
  cursor: zoom-in; overflow: hidden; position: relative;
}
.work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s var(--ease); }
.work-img:hover img { transform: scale(1.04); }
.works-cols .work-img { aspect-ratio: 3 / 3.1; }
.works-cols .work-img.tall { aspect-ratio: 3 / 4.15; }
.works-cols .work-col:nth-child(even) .work-img img { filter: saturate(.85) brightness(.9); }
.works-cols .work-col:nth-child(even) .work-img:hover img { filter: none; }

/* ---------- murals bento ---------- */
.murals { padding: clamp(20px, 4vw, 60px) var(--gutter) clamp(60px, 8vw, 110px); }
.murals-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr 1.05fr;
  grid-template-areas:
    "intro a b ."
    "intro c title copy";
  gap: 14px;
}
.m-intro { grid-area: intro; padding-right: 10px; }
.m-intro .script { margin: .1em 0 .9em 1.2em; transform: rotate(-5deg); }
.m-a { grid-area: a; aspect-ratio: 1 / 1; }
.m-b { grid-area: b; aspect-ratio: 1 / 1; }
.m-c { grid-area: c; aspect-ratio: 4 / 3; }
.m-a img { object-position: center 30%; }
.m-c img { object-position: center 70%; }
.m-title { grid-area: title; align-self: center; font-size: clamp(1.1rem, 1.6vw, 1.4rem); padding-left: 10px; }
.m-copy { grid-area: copy; align-self: end; display: flex; flex-direction: column; gap: 28px; }
.m-row { display: flex; justify-content: space-between; gap: 12px; font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.4; }
.m-row span:last-child { color: var(--dim); text-align: right; }

/* ---------- contact CTA ---------- */
.cta { position: relative; padding: clamp(60px, 9vw, 120px) var(--gutter) clamp(60px, 8vw, 110px); }
.cta-collage {
  position: relative; max-width: 820px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start;
}
.cta-script {
  position: absolute; z-index: 3; left: 50%; top: clamp(30px, 5vw, 60px);
  translate: -50% 0;
  rotate: -5deg;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  white-space: nowrap;
}
.cta-left { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-top: 50px; }
.cta-right { width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; filter: blur(3px) saturate(1.1); transform: scale(1); }
.cta-card {
  position: absolute; left: 50%; top: 45%;
  /* Centred with `translate` so the fade-in's transform can't knock it off-centre */
  translate: -50% -50%;
  background: var(--panel);
  padding: clamp(22px, 3vw, 34px);
  width: min(300px, 70%);
  z-index: 2;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.cta-card h2 { font-weight: 400; text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.05; margin-bottom: 22px; }
.cta-note { grid-column: 2; max-width: 40ch; }

/* ---------- enquiry form ---------- */
.enquire { position: relative; isolation: isolate; padding: clamp(40px, 6vw, 90px) var(--gutter); }
/* Let the tree texture's blues and oranges glow around the About card */
.statement .panel-bg::before { filter: blur(30px) saturate(1.4) brightness(1); }
/* Phones show the tree texture only very slightly blurred */
@media (max-width: 720px) {
  .statement .panel-bg::before { filter: blur(4px) saturate(1.2) brightness(.9); }
}
/* This painting is darker than the others, so lift it to keep the pink gown visible */
.enquire .panel-bg::before { filter: blur(34px) saturate(1.5) brightness(1.05); }
.enquire-panel {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 70px);
  padding: clamp(32px, 5vw, 70px);
  border: 1px solid var(--line);
}
.enquire-copy { display: flex; flex-direction: column; gap: 20px; }
.contact-list { margin-top: 14px; display: grid; gap: 14px; font-size: .9rem; }
.contact-list li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.contact-list span { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.contact-list a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.contact-list a:hover { color: var(--coral); border-color: var(--coral); }
.email-list { display: grid; justify-items: start; gap: 6px; overflow-wrap: anywhere; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.field label span { color: var(--coral); }
.field small { text-transform: none; letter-spacing: 0; color: var(--dim); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 var(--sans);
  color: var(--cream);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 14px; min-height: 48px;
  transition: border-color .2s, background-color .2s;
  width: 100%;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aaa8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #3c4a4e; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--coral); background: var(--surface-2); }

/* photo upload: the real file input is hidden behind a tappable box */
.photo-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.honey { display: none; } /* spam trap: only bots fill it in */
.photo-field { position: relative; }
.field .photo-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.field .photo-drop {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; min-height: 64px;
  background: var(--surface); border: 1px dashed #3c4a4e;
  font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--cream);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.photo-drop:hover, .photo-drop.is-over { border-color: var(--coral); background: var(--surface-2); }
.photo-input:focus-visible + .photo-drop { border-style: solid; border-color: var(--coral); }
.photo-icon {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--bg); color: var(--coral);
}
.photo-icon svg { font-size: 20px; }
.photo-text { display: flex; flex-direction: column; gap: 3px; }
.photo-text strong { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.photo-text small { font-size: .8rem; color: var(--dim); }
.photo-plus { margin-left: auto; font-size: 1.5rem; line-height: 1; color: var(--coral); padding-right: 4px; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-thumbs:empty { display: none; }
.photo-thumbs li { position: relative; width: 72px; height: 72px; }
.photo-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid var(--line); }
.photo-thumbs button {
  position: absolute; top: -8px; right: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: var(--coral); color: #140807;
  font: 600 .95rem/1 var(--sans); cursor: pointer;
}
.photo-thumbs button:hover { background: var(--coral-hover); }
.field [aria-invalid="true"] { border-color: var(--coral); }
.err { color: var(--coral-hover); font-size: .78rem; min-height: 0; }
.err:empty { display: none; }
.form-status { margin-top: 12px; font-size: .85rem; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px;
  padding: clamp(50px, 6vw, 80px) var(--gutter) 30px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.f-col { display: flex; flex-direction: column; gap: 8px; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.f-col h2 { font-size: .78rem; font-weight: 500; margin-bottom: 10px; letter-spacing: .06em; }
.f-col a { color: var(--muted); text-decoration: none; transition: color .2s; padding: 4px 0; }
.f-col a:hover { color: var(--coral); }
.f-right { align-items: flex-end; text-align: right; }
.f-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.f-center img { width: 74px; }
.f-center p { text-transform: uppercase; font-size: .9rem; line-height: 1.3; letter-spacing: .01em; }
.socials { display: flex; gap: 6px; margin-top: 10px; }
.socials a { width: 46px; height: 46px; display: grid; place-items: center; background: var(--surface); transition: background-color .2s, color .2s; }
.socials a:hover { background: var(--coral); color: #140807; }
.socials svg { font-size: 17px; }
.f-legal { grid-column: 1 / -1; text-align: center; color: var(--dim); font-size: .7rem; padding-top: 34px; border-top: 1px solid var(--line); margin-top: 20px; }

/* ---------- viewer ---------- */
.viewer {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
  display: none; align-items: center; justify-content: center;
}
.viewer[open] { display: flex; }
.viewer::backdrop { background: rgba(5,7,8,.92); backdrop-filter: blur(6px); }
.viewer img { max-width: min(88vw, 1100px); max-height: 86vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,.7); animation: pop .3s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.v-close, .v-nav {
  position: fixed; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--cream); color: var(--panel);
  transition: background-color .2s, transform .2s;
}
.v-close svg, .v-nav svg { font-size: 20px; stroke-width: 2; }
.v-close:hover, .v-nav:hover { background: var(--coral); }
.v-close { top: 20px; right: 20px; }
.v-prev { left: 20px; top: 50%; translate: 0 -50%; }
.v-next { right: 20px; top: 50%; translate: 0 -50%; }

/* ---------- reveal motion ---------- */
/* Text rises out of a soft blur; photos settle in from a gentle zoom.
   Replays each time a section comes back into view (see script.js). */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition:
    opacity 1.1s var(--ease) var(--d, 0ms),
    transform 1.2s var(--ease) var(--d, 0ms),
    filter 1.1s var(--ease) var(--d, 0ms);
}
.reveal:is(figure, img, .work-img, .polaroid) { transform: scale(1.06); filter: blur(12px); }
.reveal.in { opacity: 1; transform: none; filter: none; }
/* This photo stays softly blurred once it has phased in */
.cta-right.reveal.in { filter: blur(3px) saturate(1.1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal:is(figure, img, .work-img, .polaroid) { opacity: 1; transform: none; filter: none; transition: none; }
  .work-img img, .tile, .btn svg { transition: none; }
  main > section { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero-art { grid-column: 2; grid-row: 2; margin-top: 30px; }
  .hero-meta { grid-column: 1; grid-row: 2; }
  .hero-script { grid-column: 1 / -1; grid-row: 3; margin: 30px 0 0; justify-self: end; max-width: 16ch; }
  .artist-panel { grid-template-columns: 1fr; }
  .artist-img img { aspect-ratio: 4 / 3; }
  .service { grid-template-columns: 56px 50px 1fr; }
  .service p { grid-column: 3; }
  .works-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .murals-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro intro"
      "a b"
      "c title"
      "c copy";
  }
  .m-intro { margin-bottom: 20px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 64px; }

  /* Every section fills at least one screen below the header, with its
     content centred, so a swipe shows one section and nothing of the next */
  main > section {
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    display: flex; flex-direction: column; justify-content: center;
  }
  main > section.hero { display: grid; align-content: center; }
  /* Keep centred content at full width instead of shrinking to fit */
  main > section:not(.hero) > :not(.panel-bg):not(.cta-script) { width: 100%; }
  .cta-script {
    position: relative; left: auto; top: auto;
    align-self: center; text-align: center;
    margin-bottom: -14px;
    translate: none;
  }

  /* Slower, more deliberate phase-ins on phones */
  .reveal {
    transition:
      opacity 1.3s var(--ease) var(--d, 0ms),
      transform 1.3s var(--ease) var(--d, 0ms),
      filter 1.3s var(--ease) var(--d, 0ms);
  }

  /* Sections brighten softly as they reach the middle of the screen. They
     darken under a veil rather than turn see-through, so the pinned opening
     section never shows through, and only the veil's opacity animates so
     phones don't redraw the whole section every frame. */
  .js main > section:not(.hero)::after {
    content: ""; position: absolute; inset: 0; z-index: 5;
    background: #000; opacity: 0; pointer-events: none;
    transition: opacity 1.2s var(--ease);
  }
  .js main > section:not(.hero):not(.is-current)::after { opacity: .45; }

  /* Page flip, as on desktop: the opening section stays pinned under the
     header while the About section slides up over it. --cover (0 to 1) is
     set from script.js and eases the opening back and into shadow. Phones
     skip the blur: redrawing it on every scroll frame makes them stutter. */
  .hero {
    position: sticky; top: 64px; z-index: 0;
    transform-origin: 50% 30%;
    transform: scale(calc(1 - var(--cover, 0) * .07));
    opacity: calc(1 - var(--cover, 0) * .75);
    filter: none;
    will-change: transform, opacity;
  }
  main > section:not(.hero) { position: relative; z-index: 1; background: var(--bg); }
  .hero + section {
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    box-shadow: 0 -20px 50px rgba(0,0,0,.6);
  }

  .site-header { align-items: center; padding-top: 10px; padding-bottom: 10px; }
  .brand img { width: 34px; }
  .brand-name { font-size: 1.75rem; }
  .brand-sub { font-size: .52rem; }
  .menu-toggle { display: block; margin-right: -10px; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    width: auto;
    display: flex; flex-direction: column; gap: 0;
    padding: 6px var(--gutter) 22px;
    background: rgba(10,14,15,.97);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .site-header.open .nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav a {
    min-height: 52px; padding-top: 0;
    display: flex; align-items: center;
    font-size: .85rem; letter-spacing: .08em;
  }
  /* Phone hero, editorial stack: small "In", oversized "Harmony" pushed right,
     crisp painting offset right, black details card overlapping its
     lower-left corner, script caption tilted on the right. */
  .hero { grid-template-columns: 1fr; padding-bottom: 14px; }
  .wordmark {
    font-size: inherit; text-align: left;
    z-index: 4;
    text-shadow: 0 6px 30px rgba(0,0,0,.55);
  }
  .wm-line { display: flex; flex-direction: column; width: 100%; line-height: .82; }
  .wm-in { font-size: 13vw; margin-left: 1vw; }
  .wm-har { font-size: 23.5vw; align-self: flex-end; letter-spacing: -.045em; margin-right: -1vw; }
  .hero-art {
    grid-column: 1; grid-row: 2; justify-self: end;
    width: 80%; margin-top: -10vw;
  }
  .hero-art img { box-shadow: 0 24px 60px rgba(0,0,0,.6); }
  .hero-meta {
    grid-column: 1; grid-row: 3; z-index: 3;
    justify-self: start; align-self: start;
    width: 86%;
    margin: -72px 0 0;
    padding: 24px 20px 22px;
    background: var(--panel);
    border-left: 2px solid var(--coral);
    box-shadow: 0 24px 50px rgba(0,0,0,.55);
  }
  .hero-meta dl { grid-template-columns: 78px 1fr; margin-bottom: 22px; }
  .hero-script {
    grid-row: 4; justify-self: end;
    margin: 26px 2px 0 0;
    font-size: 2.3rem; text-align: right;
    color: var(--cream);
    rotate: -7deg;
  }
  .services-head { grid-template-columns: 1fr; }
  .service { grid-template-columns: 48px 1fr; gap: 14px 16px; padding-inline: 0; }
  .service-icon { width: 48px; height: 48px; }
  .service-num { display: none; }
  .service h3 { grid-column: 2; }
  .service p { grid-column: 1 / -1; }
  .works-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  .work-label { min-height: 0; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .work-label h3 { font-size: .74rem; }
  .work-label p { text-align: left; max-width: none; font-size: .62rem; }
  .works-cols .work-img, .works-cols .work-img.tall { aspect-ratio: 3 / 4; }
  .murals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro intro"
      "a b"
      "c c"
      "title title"
      "copy copy";
    gap: 10px;
  }
  .m-a, .m-b { aspect-ratio: 3 / 4; }
  .m-title { padding: 14px 0 0; }

  /* About: tilted photos tucked into the top corners, clear of the statement */
  .statement-panel { padding-top: 128px; }
  .polaroid { width: 66px; }
  .p1 { top: 22px; right: 18px; bottom: auto; left: auto; }
  .p2 { top: 30px; left: 18px; bottom: auto; right: auto; }

  /* Tiles: tidy 2 x 2 grid */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 18px; }
  .tile { aspect-ratio: 1.35 / 1; grid-column: auto !important; grid-row: auto !important; }
  .cta-collage { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cta-card { position: relative; left: auto; top: auto; translate: none; grid-column: 1 / -1; width: 100%; margin-top: -40px; }
  .cta-note { grid-column: 1 / -1; }
  .enquire-panel { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .f-col, .f-right { align-items: center; text-align: center; }
  .f-center { order: -1; }
}