:root {
  --turnt-brown: #402f21;
  --turnt-green: #194c35;
  --turnt-paper: #ded2c2;
  --cream: #eee7dc;
  --paper: var(--turnt-paper);
  --ink: #201f1c;
  --brown: var(--turnt-brown);
  --blue: #536f9d;
  --sage: var(--turnt-green);
  --apricot: #c99059;
  --line: rgb(32 31 28 / 28%);
  --serif: var(--display);
  --sans: var(--mono);
  --mono: "Courier New", monospace;
  --hand: var(--mono);
  --display: "Arial Rounded MT Bold", "Arial Black", var(--sans);
  --bubble: var(--display);
  --gutter: clamp(1.25rem, 3.2vw, 3.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: var(--sans); }
a { color: inherit; }
::selection { background: var(--blue); color: var(--cream); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .75rem 1rem; background: var(--ink); color: var(--cream); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.grain { display: none; }
.label { margin: 0; font: 700 .64rem/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.display-heading { font-family: var(--display); font-weight: 900; letter-spacing: -.045em; text-transform: uppercase; }
.meta-label, .mono-copy { margin: 0; font-family: var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.meta-label { font-size: clamp(.7rem, .9vw, .86rem); line-height: 1.4; }
.mono-copy { font-size: clamp(.72rem, .9vw, .9rem); line-height: 1.55; }
.text-cta { display: inline-flex; align-items: center; gap: 1rem; padding: .4rem 0 .55rem; border-bottom: 2px solid currentColor; color: inherit; text-decoration: none; font: 400 clamp(.72rem, .95vw, .95rem)/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.text-cta span { transition: transform .25s ease; }
.text-cta:hover span, .text-cta:focus-visible span { transform: translate(.25rem, -.2rem); }
.arrow-link { display: inline-flex; align-items: center; gap: 2rem; padding-bottom: .35rem; border-bottom: 1px solid var(--ink); text-decoration: none; font: 700 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.arrow-link span { font-size: 1.25rem; font-weight: 400; transition: transform .25s ease; }
.arrow-link:hover span, .arrow-link:focus-visible span { transform: translateX(.35rem); }

.site-header { height: 6.75rem; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: sticky; top: 0; z-index: 40; color: var(--cream); background: var(--brown); border-bottom: 1px solid rgb(238 231 220 / 24%); }
.brand { display: block; width: 13rem; height: 3.8rem; position: relative; overflow: hidden; }
.brand-crop { position: absolute; inset: 0; display: block; overflow: hidden; }
.brand-crop img { width: 18rem; height: 18rem; max-width: none; position: absolute; left: -2.55rem; top: -6.75rem; }
.navigation { display: flex; gap: clamp(1.5rem, 3vw, 3.25rem); }
.navigation a, .header-cta, .menu-toggle { text-decoration: none; font: 700 .86rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.navigation a { padding-block: .65rem; position: relative; }
.navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .3s ease; }
.navigation a:hover::after, .navigation a:focus-visible::after { transform: scaleX(1); }
.header-cta { justify-self: end; }
.menu-toggle { display: none; border: 0; background: none; padding: .75rem; }

.hero { min-height: calc(100svh - 6.75rem); display: grid; grid-template-columns: minmax(30rem, 50%) 1fr; position: relative; background: var(--brown); color: var(--cream); border-bottom: 1px solid rgb(238 231 220 / 35%); }
.hero::before { content: none; }
.hero-copy { z-index: 2; position: relative; padding: clamp(4rem, 6.5vw, 6rem) var(--gutter) 8.5rem; background: var(--brown); }
.hero-copy h1 { margin: clamp(3.25rem, 6vh, 4.5rem) 0 2.75rem; font: 900 clamp(4.2rem, 8vw, 8.2rem)/.9 var(--bubble); letter-spacing: -.045em; text-transform: uppercase; }
.hero-copy h1 em { color: var(--sage); font-weight: 400; }
.hero-intro { max-width: 34rem; margin: 0 0 3.5rem; font: 700 .86rem/1.55 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.hero .label, .hero .arrow-link { font-size: .86rem; }
.hero .arrow-link { border-color: var(--cream); }
.hero-copy.reveal { opacity: 1; transform: none; }
.hero-collage { min-height: calc(100svh - 6.75rem); position: relative; background-color: var(--brown); }
.hero-collage::before { content: none; }
.collage-caption { display: none; }
.hero-location { position: absolute; z-index: 8; right: var(--gutter); bottom: 1.8rem; display: flex; flex-direction: column; text-align: right; font: 700 .8rem/1.55 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ink-crown { width: 5rem; fill: none; stroke: var(--blue); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-7deg); }
.ink-crown--hero { position: absolute; right: 2.5rem; top: 16%; stroke: var(--sage); }
.ink-crown--work { position: absolute; z-index: 3; right: 7%; top: 8%; }

.section { padding: clamp(7rem, 12vw, 12rem) var(--gutter); }
.work, .services, .studio, .contact { position: relative; }
.services::before, .studio::before, .contact::before { content: ""; position: absolute; z-index: 6; pointer-events: none; left: 0; right: 0; top: -1.1rem; height: 1.5rem; background: inherit; clip-path: polygon(0 45%,4% 12%,9% 52%,14% 8%,20% 57%,26% 18%,32% 62%,38% 7%,45% 55%,51% 15%,58% 64%,65% 10%,72% 52%,79% 17%,86% 60%,93% 8%,100% 48%,100% 100%,0 100%); }
.work { background: var(--sage); color: var(--cream); }
.work .section-top, .work .archive-list, .work .archive-row { border-color: rgb(238 231 220 / 34%); }
.work .section-intro p, .work .archive-row span, .work .archive-row small { color: rgb(238 231 220 / 76%); }
.section-top { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.section-intro, .services-heading { display: grid; grid-template-columns: 1fr minmax(16rem, 25rem); align-items: end; gap: 5rem; margin: clamp(4rem, 8vw, 8rem) 0; }
.section-intro h2, .services-heading h2 { margin: 0; font: 400 clamp(4rem, 9vw, 9rem)/.84 var(--serif); letter-spacing: -.07em; }
.section-intro h2 em, .services-heading h2 em { font-weight: 400; }
.section-intro p, .services-heading p { max-width: 22rem; margin: 0; font-size: 1.05rem; line-height: 1.45; }

.featured-issue { min-height: 48rem; display: grid; grid-template-columns: minmax(18rem, 28%) 1fr; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.issue-copy { padding: clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; align-items: flex-start; }
.issue-copy h3 { margin: auto 0 2rem; font: 400 clamp(4rem, 7vw, 7.5rem)/.8 var(--serif); letter-spacing: -.07em; }
.issue-copy p { margin: 0 0 3rem; font: 700 .65rem/1.55 var(--mono); text-transform: uppercase; }
.issue-art { min-height: 48rem; position: relative; background: var(--cream); border-left: 1px solid var(--line); filter: drop-shadow(-.6rem .4rem .6rem rgb(32 31 28 / 14%)); clip-path: polygon(3% 0,12% 2%,20% 0,31% 3%,41% 0,52% 2%,63% 0,73% 3%,84% 0,94% 2%,100% 0,98% 11%,100% 23%,97% 34%,100% 47%,98% 59%,100% 72%,97% 84%,100% 96%,92% 100%,81% 97%,70% 100%,58% 97%,46% 100%,35% 97%,23% 100%,11% 97%,0 100%,3% 88%,0 76%,3% 63%,0 51%,3% 39%,0 27%,4% 15%,1% 6%); }
.issue-art::before { content: none; }
.issue-stamp { width: 8.5rem; aspect-ratio: 1; position: absolute; right: 6%; bottom: 8%; display: grid; place-content: center; border: 2px solid var(--brown); border-radius: 50%; color: var(--brown); text-align: center; font: 700 .56rem/1.35 var(--mono); letter-spacing: .08em; transform: rotate(9deg); }
.issue-stamp b { font-size: 1.25rem; }
.ink-note { position: absolute; left: 6%; top: 8%; color: var(--brown); font: 400 1.25rem var(--hand); transform: rotate(-7deg); }
.archive-list { margin-top: 5rem; border-top: 1px solid var(--line); }
.archive-row { min-height: 8rem; display: grid; grid-template-columns: 5rem 1fr 1fr auto; align-items: center; gap: 2rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.archive-row span, .archive-row small, .archive-row b { font: 700 .62rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.archive-row span, .archive-row small { color: var(--brown); }
.archive-row strong { font: 400 clamp(2rem, 3.7vw, 4rem)/1 var(--serif); letter-spacing: -.05em; }

.services { background: #ece4d8; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.service-card { min-height: 19rem; padding: 1.5rem; border-right: 1px solid var(--line); position: relative; }
.service-card:last-child { border-right: 0; }
.service-card > span { font: 700 .62rem var(--mono); color: var(--brown); }
.service-card h3 { margin: 6rem 0 1.25rem; font: 400 clamp(2rem, 3.3vw, 3.7rem)/.95 var(--serif); letter-spacing: -.055em; }
.service-card p { max-width: 15rem; margin: 0; font-size: .9rem; color: var(--brown); }

.studio { min-height: 52rem; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--brown); color: var(--cream); }
.studio-image { min-height: 52rem; position: relative; background: var(--paper); clip-path: polygon(0 0,95% 0,99% 7%,95% 15%,100% 24%,96% 33%,99% 43%,95% 52%,100% 62%,96% 72%,99% 82%,95% 92%,98% 100%,0 100%); }
.studio-image::before { content: none; }
.studio-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(32 31 28 / 45%); font: 700 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.studio-copy { padding: clamp(4rem, 8vw, 8rem) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.studio-copy h2 { margin: 4rem 0 2.5rem; font: 400 clamp(3.8rem, 6.4vw, 7rem)/.86 var(--serif); letter-spacing: -.065em; }
.studio-copy h2 em { font-weight: 400; }
.studio-copy p { max-width: 26rem; margin: 0 0 1.25rem; font-size: 1.1rem; }
.studio-copy .arrow-link { margin-top: 2rem; border-color: var(--cream); }

.contact { min-height: 48rem; display: grid; grid-template-columns: 1fr 1fr; background: var(--brown); color: var(--cream); }
.contact-copy { padding: clamp(5rem, 9vw, 9rem) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.contact-copy h2 { margin: 4rem 0; font: 400 clamp(4.5rem, 8vw, 8rem)/.82 var(--serif); letter-spacing: -.07em; }
.contact-copy > a { padding-bottom: .45rem; border-bottom: 1px solid var(--cream); text-decoration: none; font: 400 clamp(1.5rem, 2.8vw, 2.8rem) var(--serif); }
.contact-mark { display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--cream); color: var(--brown); }
.contact-mark span { font: 900 clamp(5rem, 11vw, 11rem)/1 var(--display); letter-spacing: -.08em; text-transform: uppercase; }
.contact-mark sup { align-self: center; font: 700 1.2rem var(--mono); }
.site-footer { min-height: 8rem; padding: 2rem var(--gutter); display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; align-items: start; background: var(--cream); color: var(--ink); font: 700 .62rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.site-footer a { text-decoration: none; }

.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (max-width: 850px) {
  .site-header { height: 4.75rem; grid-template-columns: 1fr auto; }
  .brand { width: 10rem; height: 3rem; }
  .brand-crop img { width: 14rem; height: 14rem; left: -2rem; top: -5.3rem; }
  .header-cta { display: none; }
  .menu-toggle { display: block; justify-self: end; }
  .navigation { position: absolute; top: 4.75rem; inset-inline: 0; padding: 1.25rem var(--gutter) 2rem; display: grid; gap: 0; color: var(--cream); background: var(--brown); border-bottom: 1px solid rgb(238 231 220 / 24%); transform: translateY(-130%); opacity: 0; pointer-events: none; transition: transform .3s, opacity .3s; }
  .navigation.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .navigation a { padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 4rem var(--gutter); background: var(--brown); }
  .hero-copy h1 { font-size: clamp(4rem, 18vw, 7rem); }
  .ink-crown--hero { width: 3.75rem; right: 1.25rem; top: 1.5rem; }
  .ink-crown--work { width: 3.75rem; right: 1.25rem; top: 5rem; }
  .hero-collage { min-height: 32rem; background-size: auto 127.4%; background-position: right center; }
  .hero::before { bottom: .85rem; font-size: .56rem; }
  .hero-location { right: var(--gutter); bottom: .85rem; font-size: .56rem; }
  .section-intro, .services-heading { grid-template-columns: 1fr; gap: 2.5rem; }
  .section-intro h2, .services-heading h2 { font-size: clamp(4rem, 17vw, 7rem); }
  .featured-issue { grid-template-columns: 1fr; }
  .issue-copy { min-height: 29rem; }
  .issue-art { min-height: 35rem; border-left: 0; border-top: 1px solid var(--line); }
  .archive-row { grid-template-columns: 3rem 1fr auto; gap: 1rem; padding-block: 1rem; }
  .archive-row small { grid-column: 2; }
  .archive-row b { grid-column: 3; grid-row: 1 / span 2; font-size: 0; }
  .archive-row b::after { content: "↗"; font-size: 1rem; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .service-card { min-height: 16rem; border-bottom: 1px solid var(--line); }
  .service-card:nth-child(2) { border-right: 0; }
  .service-card:nth-child(3), .service-card:nth-child(4) { border-bottom: 0; }
  .service-card h3 { margin-top: 4rem; }
  .studio { grid-template-columns: 1fr; }
  .studio-image { min-height: 36rem; }
  .studio-copy { min-height: 43rem; }
  .contact { grid-template-columns: 1fr; }
  .contact-copy { min-height: 42rem; }
  .contact > img { height: 80vw; min-height: 30rem; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer a { grid-column: 2; justify-self: end; }
}

/* Raster fallbacks keep the extracted strokes visible in every browser. */
.rating i {
  background: url("assets/basquiat-star-brown.png") center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
  flex: 0 0 clamp(2.15rem, 2.85vw, 2.8rem);
}
.work--brown .rating i { background: url("assets/basquiat-star-olive.png") center / contain no-repeat; }
.basquiat-symbol { -webkit-mask-image: none; mask-image: none; background-position: center; background-size: contain; background-repeat: no-repeat; }
.symbol-face.tone-brown { background-image:url("assets/basquiat-face-brown.png"); }
.symbol-eye.tone-olive { background-image:url("assets/basquiat-eye-olive.png"); }
.symbol-cross.tone-brown { background-image:url("assets/basquiat-cross-brown.png"); }
.symbol-heart.tone-olive { background-image:url("assets/basquiat-heart-olive.png"); }
.symbol-ladder.tone-brown { background-image:url("assets/basquiat-ladder-brown.png"); }
.symbol-dollar.tone-olive { background-image:url("assets/basquiat-dollar-olive.png"); }
.symbol-world.tone-olive { background-image:url("assets/basquiat-world-olive.png"); }

/* Final supplied olive artwork — exact transparent crops. */
.rating i { background-image: url("assets/supplied-star-brown.png"); }
.work--brown .rating i { background: transparent url("assets/supplied-star-olive.png") center / contain no-repeat; }
.symbol-face.tone-brown { background-image:url("assets/supplied-face-brown.png"); }
.symbol-eye.tone-olive { background-image:url("assets/supplied-eye-olive.png"); }
.symbol-cross.tone-brown { background-image:url("assets/supplied-cross-brown.png"); }
.symbol-heart.tone-olive { background-image:url("assets/supplied-heart-olive.png"); }
.symbol-ideas.tone-brown { background-image:url("assets/supplied-ideas-brown.png"); }
.studio-image > .symbol-ideas {
  top: 11%;
  right: 8%;
  width: clamp(7rem, 12vw, 12rem);
  height: clamp(5.5rem, 9vw, 9rem);
  transform: rotate(-2deg);
}

.work--brown .rating i { background-color: transparent; }

.services,
.studio,
.contact { font-family: var(--mono); }
.services-heading h2,
.service-card h3,
.studio-copy h2,
.contact-copy h2 {
  font-family: var(--display);
  font-style: normal;
  font-weight: 900;
}
.services-heading h2 em,
.studio-copy h2 em { font: inherit; }
.services-heading p,
.service-card p,
.studio-copy p,
.contact-copy .label { font-family: var(--mono); }

.work--brown .rating i { background-color: transparent; }

/* Final two-font rule: display headings plus mono supporting copy. */
.services,
.studio,
.contact { font-family: var(--mono); }
.services-heading h2,
.service-card h3,
.studio-copy h2,
.contact-copy h2 {
  font-family: var(--display);
  font-style: normal;
  font-weight: 900;
}
.services-heading h2 em,
.studio-copy h2 em { font: inherit; }
.services-heading p,
.service-card p,
.studio-copy p,
.contact-copy .label { font-family: var(--mono); }

/* Requested artwork placement and two-family typography system. */
.work--brown .rating i {
  background-color: transparent;
  background-image: url("assets/supplied-star-olive.png");
}
.work-asset > .asset-doodle {
  top: 66%;
  left: 50%;
  right: auto;
  width: clamp(6.5rem, 10vw, 10rem);
  height: clamp(6.5rem, 10vw, 10rem);
  transform: translateX(-50%);
  opacity: .72;
}
#issue-002 .work-asset > .symbol-eye { width: clamp(8rem, 13vw, 13rem); height: clamp(7rem, 11vw, 11rem); }
#issue-003 .work-asset > .symbol-cross { width: clamp(7rem, 11vw, 11rem); height: clamp(7rem, 11vw, 11rem); }
.services,
.studio,
.contact { font-family: var(--mono); }
.services-heading h2,
.service-card h3,
.studio-copy h2,
.contact-copy h2 {
  font-family: var(--display);
  font-style: normal;
  font-weight: 900;
}
.services-heading h2 em,
.studio-copy h2 em { font: inherit; }
.services-heading p,
.service-card p,
.studio-copy p,
.contact-copy .label { font-family: var(--mono); }

/* Selected hand-drawn marks from the supplied Basquiat graphics sheet. */
.basquiat-mark {
  position: absolute;
  z-index: 7;
  display: block;
  width: clamp(3.5rem, 5.5vw, 5.75rem);
  aspect-ratio: 1 / 1.35;
  background-image: url("assets/basquiat-marks-transparent.png");
  background-size: 400% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: .72;
}
.basquiat-mark--olive-crown { background-position: 0 50%; }
.basquiat-mark--blue-crown { background-position: 33.333% 50%; }
.basquiat-mark--olive-asterisk { background-position: 66.666% 50%; }
.basquiat-mark--blue-star { background-position: 100% 50%; }
#issue-002 > .basquiat-mark { top: 17%; left: 42%; transform: rotate(-7deg); }
#issue-003 > .basquiat-mark { top: 19%; right: 4%; transform: rotate(8deg); }
.services > .basquiat-mark { top: 12%; right: 5%; transform: rotate(5deg); opacity: .55; }
.studio-image > .basquiat-mark { top: 14%; right: 12%; transform: rotate(-6deg); }

@media (max-width: 850px) {
  #issue-002 > .basquiat-mark,
  #issue-003 > .basquiat-mark { top: 9%; right: 5%; left: auto; }
  .services > .basquiat-mark { top: 7%; }
}

/* Exact symbol masks extracted from the supplied graphics sheet. */
.rating {
  display: flex;
  align-items: center;
  gap: clamp(.25rem, .45vw, .45rem);
  width: auto;
  height: clamp(2.2rem, 3vw, 2.9rem);
}
.rating i {
  display: block;
  width: clamp(2.15rem, 2.85vw, 2.8rem);
  height: 100%;
  background: var(--brown);
  -webkit-mask: url("assets/basquiat-star-mask.png") center / contain no-repeat;
  mask: url("assets/basquiat-star-mask.png") center / contain no-repeat;
}
.work--brown .rating i { background-color: transparent; }

.basquiat-symbol {
  position: absolute;
  z-index: 7;
  display: block;
  width: clamp(3.5rem, 5.5vw, 5.75rem);
  height: clamp(3.5rem, 5.5vw, 5.75rem);
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  pointer-events: none;
  opacity: .62;
}
.tone-olive { color: #77785c; }
.tone-brown { color: var(--brown); }
.symbol-cross { -webkit-mask-image:url("assets/basquiat-cross-mask.png"); mask-image:url("assets/basquiat-cross-mask.png"); }
.symbol-eye { -webkit-mask-image:url("assets/basquiat-eye-mask.png"); mask-image:url("assets/basquiat-eye-mask.png"); }
.symbol-heart { -webkit-mask-image:url("assets/basquiat-heart-mask.png"); mask-image:url("assets/basquiat-heart-mask.png"); }
.symbol-dollar { -webkit-mask-image:url("assets/basquiat-dollar-mask.png"); mask-image:url("assets/basquiat-dollar-mask.png"); }
.symbol-world { -webkit-mask-image:url("assets/basquiat-world-mask.png"); mask-image:url("assets/basquiat-world-mask.png"); }
.symbol-face { -webkit-mask-image:url("assets/basquiat-face-mask.png"); mask-image:url("assets/basquiat-face-mask.png"); }
.symbol-ladder { -webkit-mask-image:url("assets/basquiat-ladder-mask.png"); mask-image:url("assets/basquiat-ladder-mask.png"); }
#work > .symbol-face { top: 17%; right: 4%; transform: rotate(6deg); }
#issue-002 > .symbol-eye { top: 15%; left: 43%; transform: rotate(-5deg); }
#issue-003 > .symbol-cross { top: 16%; right: 4%; transform: rotate(5deg); }
.services > .symbol-heart { top: 12%; right: 5%; transform: rotate(7deg); }
.studio-image, .studio-copy, .contact-copy { position: relative; }
.studio-image > .symbol-ladder { top: 12%; right: 10%; transform: rotate(-5deg); }
.studio-copy > .symbol-dollar { top: 10%; right: 8%; transform: rotate(6deg); }
.contact-copy > .symbol-world { top: 10%; right: 8%; transform: rotate(-4deg); }

@media (max-width: 850px) {
  .basquiat-symbol { width: 3.75rem; height: 3.75rem; opacity: .48; }
  #work > .symbol-face,
  #issue-002 > .symbol-eye,
  #issue-003 > .symbol-cross { top: 8%; right: 5%; left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Real hero and Work UI reconstructed from the supplied visual references. */
.site-header {
  position: absolute;
  top: 0;
  width: 100%;
  height: clamp(4.75rem, 7.1vw, 6.85rem);
  padding-inline: var(--gutter);
  color: var(--cream);
  background: transparent;
  border-bottom: 1px solid rgb(238 231 220 / 20%);
}
.brand { width: auto; height: auto; display: inline-flex; align-items: flex-start; gap: .4rem; overflow: visible; text-decoration: none; }
.brand-wordmark { font: 900 clamp(2.1rem, 3.55vw, 3.55rem)/.85 var(--display); letter-spacing: -.08em; text-transform: uppercase; }
.brand sup { font: 700 clamp(.65rem, .9vw, .9rem)/1 var(--mono); }
.navigation a, .header-cta, .menu-toggle { color: var(--cream); font-weight: 400; }
.site-header a:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.hero {
  width: 100%;
  height: max(48rem, 100svh);
  min-height: 0;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--turnt-brown);
  color: var(--cream);
  border: 0;
}
.hero-copy, .hero-copy.reveal, .hero-copy.reveal.is-visible {
  position: relative;
  z-index: 4;
  width: 52%;
  padding: clamp(10rem, 13.25vw, 12.75rem) 0 clamp(10rem, 13vw, 12rem) var(--gutter);
  opacity: 1;
  background: transparent;
  transform: none;
}
.hero-copy .meta-label { display: inline-block; position: relative; }
.hero-copy .meta-label::after { content: ""; position: absolute; left: 0; bottom: -.9rem; width: 7.2rem; height: 2px; background: #77785c; transform: rotate(-1deg); }
.hero-copy h1 {
  margin: clamp(4rem, 5.1vw, 4.9rem) 0 clamp(2rem, 2.75vw, 2.65rem);
  font: 900 clamp(4.5rem, 7.15vw, 7rem)/1.14 var(--display);
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.hero-copy h1 em { color: #74745c; font-style: normal; font-weight: 900; }
.hero-intro { margin-bottom: clamp(2.25rem, 3.6vw, 3.5rem); }
.hero .text-cta { border-color: #77785c; }
.ink-crown--hero { z-index: 5; width: clamp(4.5rem, 7vw, 6.75rem); right: 2%; top: 25%; stroke: #77785c; }

.hero-collage {
  position: absolute;
  z-index: 2;
  inset: 13.8% -1.5% 10.9% 49.5%;
  min-height: 0;
  background: transparent;
}
.torn-paper { width: 100%; height: 100%; display: block; overflow: visible; }
.paper-edge { fill: #c9b8a2; stroke: #eadfce; stroke-width: 15; stroke-linejoin: bevel; }
.paper-face { fill: var(--turnt-paper); stroke: #efe5d6; stroke-width: 4; stroke-linejoin: bevel; }
.asset-placeholder { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--turnt-brown); text-align: center; font: 400 clamp(.75rem, 1.15vw, 1.05rem)/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.asset-plus { margin-bottom: .7rem; font: 300 clamp(1.9rem, 2.25vw, 2.25rem)/1 var(--sans); }
.hero-asset-placeholder { left: 68%; top: 52%; transform: translate(-50%, -50%); }

.hero-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: clamp(5.75rem, 7.2vw, 7rem);
  padding: 1.65rem var(--gutter) 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid rgb(238 231 220 / 20%);
  background: var(--turnt-brown);
}
.hero-footer p { margin: 0; font: 400 clamp(.65rem, .92vw, .9rem)/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.footer-crown { width: clamp(3.2rem, 4.5vw, 4.4rem); fill: none; stroke: #77785c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-4deg); }
.hero-footer .hero-location { position: static; display: flex; flex-direction: column; justify-self: end; text-align: right; }
.hero-footer .hero-location strong { font-weight: 400; }

.work {
  min-height: clamp(52rem, 57.3vw, 58rem);
  padding: clamp(5.75rem, 7.3vw, 7rem) var(--gutter) clamp(4rem, 6vw, 6rem);
  position: relative;
  color: var(--cream);
  background: var(--turnt-green);
}
.torn-transition { position: absolute; z-index: 8; top: -1.55rem; left: 0; width: 100%; height: 2.75rem; overflow: visible; filter: drop-shadow(0 -2px 2px rgb(25 15 9 / 35%)); }
.transition-paper { fill: #d2c2af; }
.transition-green { fill: var(--turnt-green); }
.work-layout { display: grid; grid-template-columns: minmax(0, 59%) minmax(22rem, 1fr); gap: clamp(2.5rem, 3.8vw, 4rem); align-items: center; max-width: 96rem; margin: 0 auto; }
.work-asset { min-width: 0; aspect-ratio: 1.38 / 1; position: relative; }
.work-asset-placeholder { left: 50%; top: 52%; transform: translate(-50%, -50%); color: var(--turnt-brown); }
.issue-copy, .issue-copy.reveal, .issue-copy.reveal.is-visible {
  min-height: 0;
  padding: 0 0 0 clamp(.25rem, .9vw, 1rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 1;
  color: var(--cream);
  transform: scaleY(1.14);
  transform-origin: left top;
}
.reference-crown--hero { right: 8%; top: 25.5%; }
.issue-label { position: relative; margin-bottom: clamp(2.25rem, 3.5vw, 3.2rem); }
.issue-label::after { content: ""; position: absolute; left: 0; bottom: -.9rem; width: 8.2rem; height: 2px; background: #77785c; transform: rotate(-1deg); }
.issue-copy h2 { margin: 0 0 clamp(1.25rem, 2vw, 1.8rem); font: 900 clamp(4.4rem, 6.7vw, 6.45rem)/.97 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.issue-meta { margin-bottom: clamp(1rem, 1.7vw, 1.6rem); }
.rating { width: clamp(12rem, 18vw, 17rem); height: auto; margin-bottom: clamp(1rem, 1.6vw, 1.5rem); fill: none; stroke: #77785c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.issue-copy blockquote { margin: 0 0 clamp(1.4rem, 2vw, 2rem); font-family: var(--mono); font-size: clamp(.72rem, .9vw, .9rem); line-height: 1.55; letter-spacing: .025em; }
.issue-copy blockquote p { margin: 0 0 1rem; font: inherit; text-transform: none; }
.issue-copy cite { font-style: normal; text-transform: uppercase; }
.issue-copy .text-cta { border-color: #77785c; }

@media (max-width: 850px) {
  .site-header { height: 4.75rem; grid-template-columns: 1fr auto; }
  .brand { width: auto; height: auto; }
  .brand-wordmark { font-size: 2.25rem; }
  .header-cta { display: none; }
  .menu-toggle { display: block; justify-self: end; }
  .navigation { top: 4.75rem; color: var(--cream); background: var(--turnt-brown); }
  .hero { height: 61rem; min-height: 61rem; }
  .hero-copy, .hero-copy.reveal, .hero-copy.reveal.is-visible { width: 100%; padding: 8.5rem var(--gutter) 0; }
  .hero-copy h1 { margin-top: 3.5rem; font-size: clamp(3.6rem, 16vw, 6.5rem); line-height: 1.04; }
  .hero-intro br { display: none; }
  .ink-crown--hero { width: 4.5rem; right: 5%; top: 23%; }
  .hero-collage { inset: auto -8% 7rem 14%; height: 29rem; min-height: 0; }
  .hero-asset-placeholder { left: 67%; top: 55%; }
  .hero-footer { min-height: 7rem; grid-template-columns: 1fr auto; gap: 1rem; }
  .footer-crown { display: none; }
  .work { min-height: 0; padding: 5rem var(--gutter) 6rem; }
  .work-layout { grid-template-columns: 1fr; gap: 3.5rem; }
  .work-asset { width: min(100%, 42rem); margin: 0 auto; }
  .issue-copy, .issue-copy.reveal, .issue-copy.reveal.is-visible { padding: 0; }
  .issue-copy h2 { font-size: clamp(4rem, 18vw, 6.25rem); }
  .issue-copy blockquote br { display: none; }
  .contact-mark { min-height: 30rem; }
}

@media (max-width: 520px) {
  .hero { height: 54rem; min-height: 54rem; }
  .hero-copy h1 { font-size: clamp(3.35rem, 17vw, 5.2rem); }
  .hero-collage { height: 23rem; bottom: 7rem; left: 8%; }
  .hero-footer { padding-inline: var(--gutter); }
  .hero-footer p { font-size: .56rem; }
  .work { padding-top: 4.5rem; }
  .issue-label { margin-bottom: 2.5rem; }
}

/* Reference-locked hero finish. Decorative marks are exact crops of the supplied artwork. */
.hero {
  isolation: isolate;
  background: var(--turnt-brown);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("assets/hero-torn-paper.png") calc(50% - 6vw) 3.5vh / cover no-repeat;
  clip-path: polygon(100% 0, 91% 5%, 83% 7%, 76% 12%, 69% 17%, 63% 24%, 59% 37%, 52% 56%, 49% 60%, 54% 68%, 63% 75%, 72% 80%, 82% 85%, 91% 91%, 100% 94%);
  pointer-events: none;
}
.reference-crown { display: block; object-fit: contain; }
.reference-crown--hero {
  position: absolute;
  z-index: 5;
  width: clamp(6.25rem, 9.75vw, 9.35rem);
  height: auto;
  right: 1.7%;
  top: 22.8%;
}
.reference-crown--footer {
  width: clamp(4.25rem, 7.15vw, 6.9rem);
  height: auto;
  transform: translateX(-4.35vw);
}
.hero-footer { background: transparent; }

/* Pixel-exact hero: the supplied 1536×1024 artwork is the visual source of truth. */
.site-header {
  opacity: 0;
}
.hero {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  background: var(--turnt-brown) url("assets/turnt-hero-reference.png") center / 100% 100% no-repeat;
}
.hero::before { content: none; }
.hero-copy,
.hero-collage,
.hero-footer {
  opacity: 0;
}
.hero-copy,
.hero-copy.reveal,
.hero-copy.reveal.is-visible {
  pointer-events: none;
}
.hero .text-cta,
.hero-footer a,
.hero-collage {
  pointer-events: auto;
}

@media (max-width: 850px) {
  .hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
    background-position: center;
    background-size: 100% 100%;
  }
}

@media (max-width: 850px) {
  .hero::before { background-position: 34% center; }
  .reference-crown--hero { right: 4%; top: 22%; }
  .reference-crown--footer { display: none; }
}

/* Exact desktop composition from the supplied Turnt hero reference. */
.hero-copy,
.hero-copy.reveal,
.hero-copy.reveal.is-visible {
  width: 52%;
  padding: clamp(10rem, 13.25vw, 12.75rem) 0 clamp(10rem, 13vw, 12rem) var(--gutter);
}
.hero-copy .meta-label::after { display: block; }
.hero-copy h1 {
  max-width: none;
  margin: clamp(4rem, 5.1vw, 4.9rem) 0 clamp(2rem, 2.75vw, 2.65rem);
  font: 900 clamp(4.5rem, 7.15vw, 7rem)/1.14 var(--display);
  letter-spacing: -.045em;
}
.hero-collage {
  position: absolute;
  z-index: 2;
  inset: 13.8% -1.5% 10.9% 49.5%;
  min-height: 0;
  background: transparent;
  pointer-events: none;
}
.hero-footer {
  grid-template-columns: 1fr auto 1fr;
  background: var(--turnt-brown);
  backdrop-filter: none;
}

@media (max-width: 850px) {
  .hero-copy,
  .hero-copy.reveal,
  .hero-copy.reveal.is-visible { width: 100%; padding: 8.5rem var(--gutter) 30rem; }
  .hero-copy h1 { font-size: clamp(3.6rem, 16vw, 6.5rem); line-height: 1.04; }
  .hero-collage { inset: auto -8% 7rem 14%; height: 29rem; }
}

@media (max-width: 520px) {
  .hero-copy h1 { font-size: clamp(3.35rem, 17vw, 5.2rem); }
  .hero-collage { height: 23rem; bottom: 7rem; left: 8%; }
}

/* Homepage hero — composed over the supplied torn-paper artwork. */
.hero {
  height: max(48rem, 100svh);
  background-color: #4b2d1b;
  background-image: url("assets/hero-torn-paper.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-copy,
.hero-copy.reveal,
.hero-copy.reveal.is-visible {
  width: 52%;
  padding: clamp(10rem, 13.25vw, 12.75rem) 0 clamp(10rem, 13vw, 12rem) var(--gutter);
}

.hero-copy .meta-label::after { display: block; }

.hero-copy h1 {
  max-width: none;
  margin: clamp(4rem, 5.1vw, 4.9rem) 0 clamp(2rem, 2.75vw, 2.65rem);
  font: 900 clamp(4.5rem, 7.15vw, 7rem)/1.14 var(--display);
  letter-spacing: -.045em;
}

.hero-copy h1 em { color: #777562; }
.hero-intro { color: #e9dfcf; font-weight: 400; }
.hero .text-cta { border-bottom-width: 1px; border-color: #777562; }

.hero-footer {
  grid-template-columns: 1fr auto 1fr;
  background: var(--turnt-brown);
  backdrop-filter: none;
}

@media (max-width: 850px) {
  .hero {
    height: auto;
    min-height: 62rem;
    background-position: 43% center;
  }

  .hero-copy,
  .hero-copy.reveal,
  .hero-copy.reveal.is-visible {
    width: 100%;
    padding: 8.5rem var(--gutter) 30rem;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: clamp(3.6rem, 16vw, 6.5rem);
    line-height: 1.04;
  }

  .hero-collage { inset: auto -8% 7rem 14%; height: 29rem; }

}

@media (max-width: 520px) {
  .site-header { padding-inline: var(--gutter); }
  .hero { min-height: 58rem; }
  .hero-copy,
  .hero-copy.reveal,
  .hero-copy.reveal.is-visible { padding-bottom: 25rem; }
  .hero-copy h1 { font-size: clamp(3.35rem, 17vw, 5.2rem); }
  .hero-collage { height: 23rem; bottom: 7rem; left: 8%; }
  .hero-footer { min-height: 7rem; }
}

/* Final visual lock to the exact supplied 1536×1024 reference. */
.hero {
  background-color: var(--turnt-brown);
  background-image: url("assets/turnt-hero-reference.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
}
.hero::before { content: none; }
.hero-copy, .hero-collage, .hero-footer { opacity: 0; }
.hero-footer { background: transparent; }

@media (max-width: 850px) {
  .hero { height: auto; min-height: 0; aspect-ratio: 3 / 2; background-position: center; background-size: 100% 100%; }
}

.site-header,
.hero-copy,
.hero-collage,
.hero-footer {
  opacity: 0 !important;
}

/* Functional reference-led hero. */
.site-header,
.hero-copy,
.hero-collage,
.hero-footer {
  opacity: 1 !important;
}
.site-header { background: transparent; }
.brand-reference {
  display: block;
  width: clamp(10.75rem, 16.95vw, 16.25rem);
  height: auto;
  mix-blend-mode: lighten;
}
.reference-crown { mix-blend-mode: lighten; }
.hero {
  height: max(48rem, 100svh);
  min-height: 0;
  aspect-ratio: auto;
  background-color: var(--turnt-brown);
  background-image: url("assets/hero-torn-paper.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-copy,
.hero-copy.reveal,
.hero-copy.reveal.is-visible {
  pointer-events: auto;
}
.hero-footer { background: transparent; }

@media (max-width: 850px) {
  .hero { height: auto; min-height: 62rem; aspect-ratio: auto; background-size: cover; }
  .brand-reference { width: 10rem; }
}

/* Smooth site brown with the supplied tear isolated above it. */
.hero {
  background: var(--turnt-brown);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("assets/hero-torn-paper-transparent.png") center / cover no-repeat;
  filter: drop-shadow(-.6rem .7rem .65rem rgb(20 10 5 / 42%));
  pointer-events: none;
}
.hero-copy h1 {
  width: max-content;
  font-family: var(--display);
  font-size: clamp(4.8rem, 7.65vw, 7.4rem);
  font-weight: 400;
  line-height: .91;
  letter-spacing: -.045em;
  transform: scaleY(1.14);
  transform-origin: left top;
}
.brand-reference,
.reference-crown { mix-blend-mode: normal; }
.reference-crown--hero { right: 8%; top: 25.5%; }

@media (max-width: 850px) {
  .hero-copy h1 { width: auto; font-size: clamp(3.6rem, 16vw, 6.5rem); transform: none; }
}

/* Requested refinement: previous headline face and supplied tear transitions. */
.hero::before {
  background-size: auto 92%;
  background-position: center;
}
.hero-copy h1 {
  font-family: var(--display);
  font-size: clamp(5.25rem, 8.35vw, 8.2rem);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.045em;
  transform: scaleX(.94);
  transform-origin: left top;
}
.torn-transition { display: none; }
.work::before {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.510417vw;
  background: url("assets/brown-green-transition-matched.png") center / 100% 100% no-repeat;
  filter: none;
  pointer-events: none;
}

@media (max-width: 850px) {
  .hero-copy h1 { font-size: clamp(3.6rem, 16vw, 6.5rem); transform: none; }
  .hero::before { background-size: auto 88%; background-position: center; }
}

/* Alternating project issues and consistent paper boundaries. */
.work { background: var(--cream); color: var(--brown); }
.work .issue-copy { color: inherit; }
.work:not(.work--brown) .issue-copy,
.work:not(.work--brown) .issue-copy p,
.work:not(.work--brown) .issue-copy blockquote { color: var(--brown); }
.work--brown { background: var(--brown); color: var(--cream); }
.work--reverse .work-layout { grid-template-columns: minmax(22rem, 1fr) minmax(0, 59%); }
.work::before { background-image: url("assets/transition-brown-beige.png"); }
.work--brown::before { background-image: url("assets/transition-beige-brown.png"); }
.services { background: var(--brown); color: var(--cream); --line: rgb(238 231 220 / 28%); }
.services .service-card > span, .services .service-card p { color: var(--cream); }
.services::before, .studio::before, .site-footer::before {
  content: "";
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  height: 6.510417vw;
  clip-path: none;
  background: url("assets/transition-beige-brown.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.studio { grid-template-columns: 1fr 1fr; }
.studio::before { background-image: url("assets/transition-studio-entry.png"); }
.studio-image { background: var(--cream); clip-path: none; }
.contact::before { content: none; }
.studio-image, .studio-copy, .contact-copy, .contact-mark { min-width: 0; }
.site-footer { position: relative; padding-top: max(3rem, 8vw); }
.site-footer::before { background-image: url("assets/transition-footer-entry.png"); }

@media (max-width: 850px) {
  .work--reverse .work-layout { grid-template-columns: 1fr; }
  .studio { grid-template-columns: 1fr; }
  .studio::before { background-image: url("assets/transition-brown-beige.png"); }
  .site-footer::before { content:none; }
}

/* Mobile contact/footer boundary: use the supplied torn transition as one
   edge, instead of a clipped cream rectangle followed by a second edge. */
@media (max-width:850px) {
  .site-footer {
    margin-top:0;
    padding-top:4.5rem;
    clip-path:none;
    overflow:visible;
  }
  .site-footer::before {
    content:"";
    position:absolute;
    z-index:6;
    top:-2.75rem;
    left:0;
    right:0;
    height:2.75rem;
    background:url("assets/transition-brown-beige.png") center/100% 100% no-repeat;
    pointer-events:none;
  }
}

/* Final supplied graphics rendering overrides. */
.rating {
  display: flex;
  align-items: center;
  gap: clamp(.25rem, .45vw, .45rem);
  width: auto;
  height: clamp(2.2rem, 3vw, 2.9rem);
}
.rating i {
  display: block;
  flex: 0 0 clamp(2.15rem, 2.85vw, 2.8rem);
  height: 100%;
  background: url("assets/supplied-star-brown.png") center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}
.work--brown .rating i { background-image: url("assets/supplied-star-olive.png"); }
.basquiat-symbol {
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.symbol-face.tone-brown { background-image:url("assets/supplied-face-brown.png"); }
.symbol-eye.tone-olive { background-image:url("assets/supplied-eye-olive.png"); }
.symbol-cross.tone-brown { background-image:url("assets/supplied-cross-brown.png"); }
.symbol-heart.tone-olive { background-image:url("assets/supplied-heart-olive.png"); }
.symbol-ideas.tone-brown { background-image:url("assets/supplied-ideas-brown.png"); }
.studio-image > .symbol-ideas {
  top: 11%;
  right: 8%;
  width: clamp(7rem, 12vw, 12rem);
  height: clamp(5.5rem, 9vw, 9rem);
  transform: rotate(-2deg);
}