:root{--cream:#f7f5ef;--black:#0c0c0c;--lime:#C7DA2C;--coral:#ff525e;--blue:#68c9ec;--ink:#111}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#121212;color:var(--cream);font-family:"IBM Plex Sans",Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}
.micro{font-family:"IBM Plex Mono",Menlo,Monaco,"Courier New",monospace;text-transform:uppercase;letter-spacing:.075em;font-size:12px;line-height:1.35}
.topbar,.footer{background:var(--cream);color:var(--black);position:relative;z-index:5}.topbar{height:88px;display:grid;grid-template-columns:180px 1fr 250px;align-items:center;padding:8px 4vw;border-bottom:1px solid rgba(0,0,0,.15)}.logo img{width:105px;height:auto;display:block}.nav{display:flex;justify-content:center;gap:44px;font-family:"IBM Plex Mono",Menlo,monospace;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.035em}.nav a:hover{color:#C7DA2C}.topmeta{text-align:right}.topmeta span{font-size:10px}
.black-texture{position:relative;background-color:#0b0b0b;background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp');background-size:920px auto,760px auto;background-position:center top,center center;background-repeat:repeat,repeat;background-blend-mode:screen,soft-light}
.cream-texture{position:relative;background-color:var(--cream);background-image:linear-gradient(rgba(247,245,239,.88),rgba(247,245,239,.88)),url('assets/texture-scratch.webp');background-size:auto,1000px auto;background-repeat:repeat;background-blend-mode:normal,multiply}
.torn-bottom{clip-path:polygon(0 0,100% 0,100% 98.5%,94% 99.2%,88% 98.4%,80% 99.4%,72% 98.8%,65% 99.6%,58% 98.7%,50% 99.3%,42% 98.5%,34% 99.5%,27% 98.6%,19% 99.4%,12% 98.7%,5% 99.4%,0 98.8%)}
.hero{min-height:430px;padding:38px 4vw 42px 5.5vw;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:32px;overflow:hidden}.hero-copy{position:relative;z-index:2}.hero h1,.about h2,.featured h2,.testimonial h2,.process h2,.cta h2{font-family:"Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;font-weight:800;letter-spacing:.005em;margin:0;line-height:.9}.hero h1{font-size:clamp(64px,8.4vw,146px);max-width:1180px}.lime{color:var(--lime)}.hero-micro{margin:30px 0 0 24px;font-size:14px}.hero-side{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding-top:12px}.service-stack{font-size:15px}.sticker{background:var(--coral);color:#050505;font-family:"Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.04em;line-height:.9;font-size:28px;padding:20px 22px;transform:rotate(-4deg);box-shadow:7px 9px 0 rgba(0,0,0,.35);transition:.2s}.sticker:hover{transform:rotate(-1deg) translateY(-3px)}
.checker{position:absolute;background-image:url('assets/checker.webp');filter:grayscale(1) contrast(1.25);opacity:.9;background-repeat:repeat-y;background-position:center top;mix-blend-mode:screen;}
.checker-left{left:-24px;top:0;width:78px;height:100%;background-size:420px auto;transform:rotate(-.4deg);}
.checker-right{right:-26px;top:0;width:74px;height:100%;background-size:400px auto;transform:rotate(.35deg);}
.desk-band{width:100%;height:auto;overflow:hidden;background:#0b0b0b;line-height:0;margin:0;padding:0;border:0}.desk-band img{width:100%;height:auto;display:block;object-fit:contain;object-position:center center;filter:saturate(.75) contrast(1.05);margin:0;border:0}
.about{min-height:590px;padding:48px 5vw 58px 4vw;display:grid;grid-template-columns:minmax(240px,.8fr) minmax(280px,410px) minmax(180px,.55fr) minmax(180px,.55fr);gap:26px;align-items:center;overflow:hidden}.about-copy{align-self:start}.about h2{font-size:72px;color:var(--cream);margin-bottom:18px}.about-copy p{font-size:18px;line-height:1.45;max-width:355px}.text-link{display:inline-flex;gap:14px;align-items:center;margin-top:12px}.text-link span{color:var(--lime);font-size:20px}.text-link:hover{color:var(--lime)}.portrait-wrap{position:relative;justify-self:center;width:min(100%,365px);padding:8px 9px 10px;background:rgba(247,245,239,.90);box-shadow:0 0 0 1px rgba(255,255,255,.12);transform:rotate(-1.6deg)}.portrait{width:100%;height:430px;object-fit:cover;object-position:center 25%;display:block;filter:grayscale(1) contrast(1.08)}.tape{display:none}.idea-note{font-family:"IBM Plex Mono",Menlo,Monaco,"Courier New",monospace;text-transform:uppercase;font-weight:500;font-size:22px;letter-spacing:.035em;line-height:1.18;color:#111;background:rgba(247,245,239,.96);padding:32px 22px;transform:rotate(-1deg);border:1px solid rgba(0,0,0,.10)}.service-list{display:flex;flex-direction:column;align-self:center}.service-list a{font-family:"IBM Plex Mono",Menlo,Monaco,monospace;text-transform:uppercase;letter-spacing:.05em;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.25)}.service-list a:hover{color:var(--lime)}
.featured{padding:30px 4vw 36px;color:var(--black);display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:start}.featured h2{font-size:54px;line-height:.86}.dark{color:var(--black)}.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.project{border:0;min-height:190px;padding:18px;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;text-transform:uppercase;background:#191919;color:#f7f5ef;transition:.2s;position:relative;overflow:hidden}.project::after{content:"";position:absolute;inset:0;background:url('assets/texture-scratch.webp') center/600px auto;opacity:.13;mix-blend-mode:screen}.project span{position:relative;z-index:1;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:34px;letter-spacing:.04em;text-align:center}.project small{position:relative;z-index:1;font-family:"IBM Plex Mono",Menlo,monospace;font-size:10px;margin-top:5px}.p1 span{color:#f7f5ef;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-style:normal}.p1,.p2,.p3,.p4{background:#151515;color:#f7f5ef}.project:hover{transform:translateY(-5px)}
.testimonial{background-color:var(--coral);color:#0b0b0b;position:relative;padding:36px 4vw;display:grid;grid-template-columns:300px 1fr 220px;gap:35px;align-items:center;overflow:hidden}.testimonial::before{content:"";position:absolute;inset:0;background:url('assets/texture-scratch.webp') center/1100px auto;opacity:.18;mix-blend-mode:multiply;pointer-events:none}.testimonial>*{position:relative}.testimonial h2{font-size:76px}.quote-wrap blockquote{font-size:26px;line-height:1.15;margin:0 0 18px;font-weight:700;max-width:720px}.testimonial-controls{border-left:1px solid rgba(0,0,0,.45);padding-left:30px}.testimonial-controls button{width:54px;height:54px;border:1.5px solid #111;border-radius:50%;background:transparent;margin:0 7px 26px 0;cursor:pointer;font-size:24px}.testimonial-controls button:hover{background:#111;color:var(--coral)}
.process{padding:38px 4vw 0}.process-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.process h2{font-size:72px}.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 230px;gap:18px;align-items:start}.paper-card{background:rgba(247,245,239,.96);color:#111;padding:24px 20px 26px;min-height:250px;position:relative;border:1px solid rgba(255,255,255,.08);background-image:linear-gradient(rgba(247,245,239,.88),rgba(247,245,239,.88)),url('assets/texture-wall.webp');background-size:auto,520px auto;background-blend-mode:normal,multiply;box-shadow:0 10px 22px rgba(0,0,0,.18)}.paper-card:nth-child(2){transform:rotate(.35deg)}.paper-card:nth-child(3){transform:rotate(-.35deg)}.paper-card:nth-child(4){transform:rotate(.25deg)}.paper-card b{display:inline-block;background:var(--lime);padding:7px 10px;font-family:"IBM Plex Mono",Menlo,monospace}.paper-card h3{font-family:"Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.035em;font-size:34px;margin:24px 0 10px}.paper-card p{font-size:15px;line-height:1.35}.kc-card{margin:0;background:var(--cream);color:#111;padding:10px 10px 18px;transform:rotate(2deg);box-shadow:0 4px 12px rgba(0,0,0,.35)}.kc-card img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) contrast(1.1);display:block}.kc-card figcaption{font-family:"IBM Plex Mono",Menlo,Monaco,"Courier New",monospace;text-transform:uppercase;font-weight:500;letter-spacing:.035em;font-size:20px;line-height:1.12;padding:11px 4px 0}.cta{display:grid;grid-template-columns:160px 1fr 260px;gap:30px;align-items:center;padding:52px 0 44px}.cta-side{border-right:1px solid rgba(255,255,255,.4);padding-right:24px}.cta h2{font-size:clamp(56px,6vw,100px);color:var(--lime)}.button{border:2px solid var(--cream);border-radius:999px;padding:17px 26px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:"IBM Plex Mono",Menlo,monospace;text-transform:uppercase;letter-spacing:.06em}.button span{color:var(--lime);font-size:24px}.button:hover{background:var(--cream);color:#111}
.footer{padding:22px 4vw 26px;display:grid;grid-template-columns:140px 1fr 260px 120px;align-items:center;gap:25px}.footer-logo img{width:92px}.footer nav{display:flex;gap:28px}.footer nav a:hover{color:#6f9200}.rule{display:inline-block;width:44px;border-top:1px solid #111;margin:0 6px 3px}.social{display:flex;gap:14px;justify-content:flex-end;font-size:22px}
dialog{border:0;max-width:520px;width:calc(100% - 40px);background:var(--cream);color:#111;padding:36px;box-shadow:0 18px 80px rgba(0,0,0,.55)}dialog::backdrop{background:rgba(0,0,0,.72)}dialog h2{font-family:"Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;font-size:52px;letter-spacing:.035em;margin:0 0 10px}.close{position:absolute;right:14px;top:8px;border:0;background:transparent;font-size:34px;cursor:pointer}
@media(max-width:900px){.topbar{grid-template-columns:120px 1fr}.topmeta{display:none}.nav{justify-content:flex-end;gap:20px}.hero{grid-template-columns:1fr;min-height:0}.hero-side{flex-direction:row;align-items:flex-end}.about{grid-template-columns:1fr 1fr}.idea-note{display:none}.service-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px}.featured{padding:30px 4vw 36px;color:var(--black);display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:start}.featured-title{display:flex;justify-content:space-between;align-items:end}.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.testimonial{grid-template-columns:1fr}.testimonial-controls{border-left:0;border-top:1px solid rgba(0,0,0,.35);padding:20px 0 0}.process-grid{grid-template-columns:repeat(2,1fr)}.kc-card{grid-column:2}.cta{grid-template-columns:1fr}.cta-side{display:none}.footer{grid-template-columns:100px 1fr}.footer>div:nth-of-type(1){display:none}.social{justify-content:flex-end}}
@media(max-width:600px){.topbar{height:auto;padding:12px 18px;grid-template-columns:84px 1fr}.logo img{width:74px}.nav{gap:12px;font-size:10px}.hero{padding:28px 18px 34px 52px}.hero h1{font-size:clamp(50px,16vw,84px);line-height:.9}.hero-side{margin-top:18px}.service-stack{font-size:11px}.sticker{font-size:20px;padding:14px 16px}.checker-left{left:-24px;top:0;width:78px;height:100%;background-size:420px auto;transform:rotate(-.4deg);}.desk-band{width:100%;height:auto;overflow:hidden;background:#0b0b0b;line-height:0;margin:0;padding:0;border:0}.about{padding:34px 32px 45px 18px;grid-template-columns:1fr}.about h2{font-size:58px}.about-copy p{font-size:16px}.portrait-wrap{width:72%;max-width:300px}.portrait{height:300px}.service-list{grid-template-columns:1fr 1fr;grid-column:auto}.checker-right{right:-26px;top:0;width:74px;height:100%;background-size:400px auto;transform:rotate(.35deg);}.featured{padding:30px 4vw 36px;color:var(--black);display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:start}.featured h2{font-size:46px}.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.project{min-height:145px}.project span{font-size:26px}.testimonial{padding:30px 18px}.testimonial h2{font-size:58px}.quote-wrap blockquote{font-size:20px}.process{padding:30px 18px 0}.process-head{display:block}.process h2{font-size:57px}.process-head .micro{margin-top:10px}.process-grid{grid-template-columns:1fr}.paper-card{min-height:0}.kc-card{grid-column:auto;width:66%;justify-self:end}.cta{padding:36px 0}.cta h2{font-size:64px}.footer{grid-template-columns:70px 1fr;padding:18px}.footer nav{gap:14px;font-size:9px}.social{display:none}}

@media (max-width:760px){
  .hero{min-height:auto}
  .hero-image{height:46vw;max-height:auto;display:block;object-fit:contain;object-position:center center;}
  .checker-left{left:-18px;width:58px;background-size:320px auto}
  .checker-right{right:-18px;width:56px;background-size:300px auto}
}

.desk-band + .about{margin-top:0;border-top:0;}
.hero + .desk-band{margin-top:0;border-top:0;}

@media (max-width:760px){
  .hero-image{height:auto!important;min-height:0!important;aspect-ratio:auto!important}
  .hero-image img{width:100%;height:auto!important;object-fit:contain!important;object-position:center center!important}
}

/* v11: top navigation hover uses the same Studio42 lime */
.site-header nav a:hover,
.site-header nav a:focus,
header nav a:hover,
header nav a:focus,
.nav a:hover,
.nav a:focus {
  color: #C7DA2C !important;
}

/* v14 exact Studio42 coral */
.testimonials,
.testimonial-section,
.word-on-the-street,
.word-street,
section.testimonials {
  background-color: #ff525e !important;
}

/* Footer navigation hover/focus uses coral */
footer a:hover,
footer a:focus,
.site-footer a:hover,
.site-footer a:focus,
.footer a:hover,
.footer a:focus {
  color: #ff525e !important;
}

/* v15 refinements */

/* WHAT I DO — pull the whole composition inward and center it more intentionally */
.what-i-do,
.what-section,
.services-intro {
  max-width: 1640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.what-i-do .inner,
.what-i-do .content,
.what-section .inner,
.what-section .content,
.services-intro .inner,
.services-intro .content {
  max-width: 1540px;
  margin: 0 auto !important;
}

.what-i-do-grid,
.what-grid,
.services-grid {
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 0.95fr) minmax(300px, 0.85fr) !important;
  column-gap: clamp(38px, 4vw, 72px) !important;
  align-items: center !important;
  max-width: 1500px;
  margin: 0 auto !important;
}

.what-i-do .services-list,
.what-section .services-list,
.services-intro .services-list {
  justify-self: start !important;
  max-width: 420px;
}

/* If the section is using direct children instead of the named grid, reduce the outer spread */
.what-i-do > *,
.what-section > *,
.services-intro > * {
  box-sizing: border-box;
}

/* WORD ON THE STREET — keep the brand coral, but let it actually read as #FF525E */
.testimonials,
.testimonial-section,
.word-on-the-street,
.word-street,
section.testimonials {
  background-color: #ff525e !important;
  background-blend-mode: normal !important;
  filter: none !important;
}

/* soften any dark texture/overlay sitting above the coral */
.testimonials::before,
.testimonial-section::before,
.word-on-the-street::before,
.word-street::before,
section.testimonials::before,
.testimonials::after,
.testimonial-section::after,
.word-on-the-street::after,
.word-street::after,
section.testimonials::after {
  opacity: 0.10 !important;
  mix-blend-mode: multiply !important;
}

/* keep the coral band bright even if an inner wrapper had its own tinted background */
.testimonials .inner,
.testimonial-section .inner,
.word-on-the-street .inner,
.word-street .inner {
  background-color: transparent !important;
}

/* Mobile keeps the What I Do content centered and stacked cleanly */
@media (max-width: 900px) {
  .what-i-do-grid,
  .what-grid,
  .services-grid {
    grid-template-columns: 1fr !important;
    row-gap: 28px !important;
    max-width: 680px;
  }

  .what-i-do .services-list,
  .what-section .services-list,
  .services-intro .services-list {
    max-width: none;
    width: 100%;
  }
}

/* v16 — exact coral match */
.testimonials,
.testimonial-section,
.word-on-the-street,
.word-street,
section.testimonials {
  background: #ff525e !important;
  background-image: none !important;
  background-color: #ff525e !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.testimonials::before,
.testimonial-section::before,
.word-on-the-street::before,
.word-street::before,
section.testimonials::before,
.testimonials::after,
.testimonial-section::after,
.word-on-the-street::after,
.word-street::after,
section.testimonials::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

.testimonials .inner,
.testimonial-section .inner,
.word-on-the-street .inner,
.word-street .inner {
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
}

/* v17 — testimonial is intentionally FLAT coral, no texture/overlay */
.testimonial.coral-texture {
  background: #ff525e !important;
  background-color: #ff525e !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}
.testimonial.coral-texture::before,
.testimonial.coral-texture::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  filter: none !important;
}

/* v18 — subtle edge grunge on testimonial, clean coral center */
.testimonial.coral-texture {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  background: #ff525e !important;
  background-image: none !important;
}

/* Fine distressed speckle/edge wear. Deliberately kept away from the center. */
.testimonial.coral-texture::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .17 !important;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0,0,0,.62) 0 1px, transparent 1.5px) 0 0/17px 19px,
    radial-gradient(ellipse at 100% 10%, rgba(0,0,0,.5) 0 1px, transparent 1.5px) 5px 8px/23px 21px,
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 7%, transparent 93%, rgba(0,0,0,.22)),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 9%, transparent 91%, rgba(0,0,0,.10)) !important;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 3%, transparent 10%, transparent 90%, rgba(0,0,0,.7) 97%, #000 100%),
    linear-gradient(180deg, #000 0%, transparent 12%, transparent 88%, #000 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 3%, transparent 10%, transparent 90%, rgba(0,0,0,.7) 97%, #000 100%),
    linear-gradient(180deg, #000 0%, transparent 12%, transparent 88%, #000 100%);
  mix-blend-mode: multiply !important;
}

/* irregular little chips at the extreme corners/edges */
.testimonial.coral-texture::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .20 !important;
  background:
    radial-gradient(circle at 1% 5%, #000 0 2px, transparent 3px),
    radial-gradient(circle at 2.5% 92%, #000 0 1px, transparent 2px),
    radial-gradient(circle at 98% 8%, #000 0 2px, transparent 3px),
    radial-gradient(circle at 99% 90%, #000 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 6% 1%, #000 0 1px, transparent 2px),
    radial-gradient(circle at 94% 99%, #000 0 1px, transparent 2px) !important;
}

.testimonial.coral-texture > * {
  position: relative;
  z-index: 1;
}

/* v19 — visible side grunge using the supplied texture image */
.testimonial.coral-texture {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #ff525e !important;
  background-image: none !important;
}

.testimonial.coral-texture::before,
.testimonial.coral-texture::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: clamp(110px, 9vw, 185px) !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .42 !important;
  background-image: url('assets/coral-edge-grunge.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  mix-blend-mode: multiply !important;
  filter: contrast(1.15) !important;
}

.testimonial.coral-texture::before {
  left: 0 !important;
  background-position: left center !important;
}

.testimonial.coral-texture::after {
  right: 0 !important;
  background-position: right center !important;
  transform: scaleX(-1) !important;
  transform-origin: center !important;
}

.testimonial.coral-texture > * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 760px) {
  .testimonial.coral-texture::before,
  .testimonial.coral-texture::after {
    width: 74px !important;
    opacity: .34 !important;
  }
}

/* v20 homepage refinements */

/* Keep Word on the Street flat coral, no edge grunge */
.testimonial.coral-texture {
  background: #ff525e !important;
  background-image: none !important;
}
.testimonial.coral-texture::before,
.testimonial.coral-texture::after {
  content: none !important;
  display: none !important;
}

/* WHAT I DO — center portrait + note as a pair in the middle of the section */
.what-i-do-grid,
.what-grid,
.services-grid {
  grid-template-columns: minmax(280px, .9fr) minmax(720px, 1.5fr) minmax(300px, .8fr) !important;
  column-gap: clamp(28px, 3vw, 56px) !important;
  align-items: center !important;
}

.what-i-do .portrait-note-wrap,
.what-section .portrait-note-wrap,
.services-intro .portrait-note-wrap,
.portrait-note-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(28px, 3vw, 54px) !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  transform: translateX(-10px);
}

/* fallback if the image and note are direct siblings in the middle grid column */
.what-i-do .portrait,
.what-section .portrait,
.services-intro .portrait {
  justify-self: end !important;
}
.what-i-do .note,
.what-section .note,
.services-intro .note,
.what-i-do .sticky-note,
.what-section .sticky-note,
.services-intro .sticky-note {
  justify-self: start !important;
}

/* services list stays right, but not pushed to the edge */
.what-i-do .services-list,
.what-section .services-list,
.services-intro .services-list {
  justify-self: start !important;
  max-width: 390px !important;
}

@media (max-width: 900px) {
  .what-i-do-grid,
  .what-grid,
  .services-grid {
    grid-template-columns: 1fr !important;
  }
  .portrait-note-wrap {
    flex-direction: column !important;
    max-width: 620px !important;
    transform: none !important;
  }
}

/* v21 — tighter Featured Work proportions */
.featured,
.featured-work,
.work-strip {
  padding-top: clamp(34px, 3.2vw, 58px) !important;
  padding-bottom: clamp(34px, 3.2vw, 58px) !important;
}

.featured-grid,
.featured-work-grid,
.work-grid {
  grid-template-columns: minmax(190px, .72fr) repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(18px, 1.5vw, 30px) !important;
  align-items: center !important;
}

.work-card,
.featured-card,
.project-card {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: clamp(150px, 10.2vw, 205px) !important;
}

.featured-heading,
.featured-title,
.work-heading {
  align-self: center !important;
  padding-right: clamp(18px, 1.8vw, 34px) !important;
}

@media (max-width: 900px) {
  .featured-grid,
  .featured-work-grid,
  .work-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .featured-heading,
  .featured-title,
  .work-heading {
    grid-column: 1 / -1 !important;
    padding-right: 0 !important;
  }
  .work-card,
  .featured-card,
  .project-card {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* v22 — more breathing room between Featured Work label and project tiles */
.featured-grid,
.featured-work-grid,
.work-grid {
  grid-template-columns: minmax(240px, .86fr) repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(34px, 2.6vw, 58px) !important;
}

.featured-heading,
.featured-title,
.work-heading {
  padding-right: clamp(28px, 2.4vw, 48px) !important;
}

@media (min-width: 901px) {
  .featured-grid > :nth-child(2),
  .featured-work-grid > :nth-child(2),
  .work-grid > :nth-child(2) {
    margin-left: clamp(24px, 2vw, 42px) !important;
  }
}

@media (max-width: 900px) {
  .featured-grid,
  .featured-work-grid,
  .work-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 18px !important;
  }
  .featured-grid > :nth-child(2),
  .featured-work-grid > :nth-child(2),
  .work-grid > :nth-child(2) {
    margin-left: 0 !important;
  }
}

/* v23 — final homepage spacing + process accent */

/* Featured Work: shorter tiles + substantially more breathing room after left label */
.featured,
.featured-work,
.work-strip {
  padding-top: clamp(30px, 2.8vw, 48px) !important;
  padding-bottom: clamp(30px, 2.8vw, 48px) !important;
}

.featured-grid,
.featured-work-grid,
.work-grid {
  grid-template-columns: minmax(250px, .9fr) repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(42px, 3vw, 68px) !important;
  align-items: center !important;
}

.work-card,
.featured-card,
.project-card {
  height: clamp(132px, 8.4vw, 168px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.featured-heading,
.featured-title,
.work-heading {
  padding-right: clamp(36px, 3vw, 60px) !important;
}

/* push first tile away from Featured Work copy */
@media (min-width: 901px) {
  .featured-grid > :nth-child(2),
  .featured-work-grid > :nth-child(2),
  .work-grid > :nth-child(2) {
    margin-left: clamp(34px, 2.7vw, 56px) !important;
  }
}

/* Process number chips: Studio42 light blue instead of lime */
.process-step .step-number,
.process-step .number,
.process-card .step-number,
.process-card .number,
.process .step-number,
.process .number,
.process-number,
.step-number {
  background:#f7f5ef !important;
  background-color:#f7f5ef !important;
  color: #000 !important;
}

/* Mobile: keep cards compact and readable */
@media (max-width: 900px) {
  .featured-grid,
  .featured-work-grid,
  .work-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
  }

  .work-card,
  .featured-card,
  .project-card {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .featured-grid > :nth-child(2),
  .featured-work-grid > :nth-child(2),
  .work-grid > :nth-child(2) {
    margin-left: 0 !important;
  }
}

/* v24 — FIX HERO COLOR / REMOVE DULLING */
.hero-image,
.hero-media,
.hero-visual,
.hero-photo,
.hero-image-wrap,
.hero-media-wrap,
.hero-image img,
.hero-media img,
.hero-visual img,
.hero-photo img,
.hero img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-filter: none !important;
}

.hero-image::before,
.hero-image::after,
.hero-media::before,
.hero-media::after,
.hero-visual::before,
.hero-visual::after,
.hero-photo::before,
.hero-photo::after,
.hero-image-wrap::before,
.hero-image-wrap::after,
.hero-media-wrap::before,
.hero-media-wrap::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}

/* keep the actual hero image crisp and undimmed */
.hero img,
.hero-image img,
.hero-media img,
.hero-visual img,
.hero-photo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  image-rendering: auto !important;
}

/* 2) WHAT I DO — center photo + note together as the visual group */
.what-i-do,
.what-section,
.services-intro {
  position: relative;
}

.what-i-do-grid,
.what-grid,
.services-grid {
  grid-template-columns: minmax(280px, .82fr) minmax(760px, 1.55fr) minmax(310px, .78fr) !important;
  column-gap: clamp(24px, 2.4vw, 48px) !important;
  align-items: center !important;
}

.portrait-note-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(32px, 3.2vw, 58px) !important;
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
  transform: translateX(-40px) !important;
}

/* if photo/note were not wrapped, force the middle visual elements inward */
.what-i-do .portrait,
.what-section .portrait,
.services-intro .portrait {
  justify-self: end !important;
  margin-right: 12px !important;
}
.what-i-do .note,
.what-section .note,
.services-intro .note,
.what-i-do .sticky-note,
.what-section .sticky-note,
.services-intro .sticky-note {
  justify-self: start !important;
  margin-left: 12px !important;
}

/* 3) FEATURED WORK — create a real gutter after the left label */
.featured-grid,
.featured-work-grid,
.work-grid {
  grid-template-columns: minmax(290px, .95fr) repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(48px, 3.6vw, 76px) !important;
  align-items: center !important;
}

.featured-heading,
.featured-title,
.work-heading {
  padding-right: clamp(42px, 3.4vw, 72px) !important;
}

@media (min-width: 901px) {
  .featured-grid > :nth-child(2),
  .featured-work-grid > :nth-child(2),
  .work-grid > :nth-child(2) {
    margin-left: clamp(46px, 3vw, 68px) !important;
  }
}

/* keep the project cards shorter */
.work-card,
.featured-card,
.project-card {
  height: clamp(126px, 8vw, 158px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

@media (max-width: 900px) {
  .portrait-note-wrap {
    transform: none !important;
    flex-direction: column !important;
  }

  .featured-grid,
  .featured-work-grid,
  .work-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
  }

  .featured-grid > :nth-child(2),
  .featured-work-grid > :nth-child(2),
  .work-grid > :nth-child(2) {
    margin-left: 0 !important;
  }
}

/* v25 — exact class corrections */

/* HERO IMAGE: absolutely no dimming or overlays */
.studio-image {
  background: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.studio-image::before,
.studio-image::after {
  content: none !important;
  display: none !important;
}
.studio-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ABOUT: center portrait + note as a visual pair in the middle of the section */
.about {
  display: grid !important;
  grid-template-columns: minmax(300px,.72fr) minmax(720px,1.6fr) minmax(300px,.72fr) !important;
  column-gap: clamp(30px, 3vw, 58px) !important;
  align-items: center !important;
}
.about-copy {
  grid-column: 1 !important;
}
.portrait-wrap {
  grid-column: 2 !important;
  justify-self: end !important;
  margin: 0 22px 0 0 !important;
  transform: translateX(-36px) !important;
}
.idea-note {
  grid-column: 2 !important;
  justify-self: start !important;
  align-self: center !important;
  margin-left: calc(50% + 36px) !important;
  margin-top: 0 !important;
  transform: translateX(-36px) !important;
}
.service-list {
  grid-column: 3 !important;
  justify-self: stretch !important;
}

/* FEATURED: real breathing room after the label */
.featured {
  display: grid !important;
  grid-template-columns: 250px minmax(0,1fr) !important;
  column-gap: clamp(70px, 5vw, 110px) !important;
  align-items: center !important;
  padding-left: clamp(48px, 4.5vw, 86px) !important;
  padding-right: clamp(48px, 4.5vw, 86px) !important;
}
.featured-title {
  width: 250px !important;
  padding-right: 0 !important;
  align-self: center !important;
}
.project-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: clamp(18px, 1.5vw, 28px) !important;
  margin-left: 0 !important;
  width: 100% !important;
}
.project {
  height: clamp(128px, 8vw, 158px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

/* PROCESS chips: light blue */
.process .num,
.process .step-num,
.process .process-num,
.process .number,
.process-card .num,
.process-card .number {
  background:#f7f5ef !important;
  color: #000 !important;
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr !important;
  }
  .about-copy,.portrait-wrap,.idea-note,.service-list {
    grid-column: 1 !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .portrait-wrap,.idea-note {
    justify-self: center !important;
  }
  .featured {
    grid-template-columns: 1fr !important;
    row-gap: 26px !important;
  }
  .featured-title {
    width: auto !important;
  }
  .project-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* v26 — exact homepage corrections */

/* Studio hero photo: absolutely no overlays, opacity, filters or blending */
.studio-image,
.studio-image img {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}
.studio-image::before,
.studio-image::after {
  content: none !important;
  display: none !important;
}

/* ABOUT: photo + note centered as one visual composition */
.about {
  grid-template-columns: minmax(280px,.78fr) minmax(820px,1.7fr) minmax(290px,.72fr) !important;
  column-gap: clamp(34px, 3.2vw, 62px) !important;
}
.portrait-wrap {
  grid-column: 2 !important;
  justify-self: start !important;
  width: 350px !important;
  margin-left: calc(50% - 390px) !important;
  margin-right: 0 !important;
  transform: rotate(-1.6deg) !important;
}
.idea-note {
  grid-column: 2 !important;
  justify-self: start !important;
  width: 310px !important;
  margin-left: calc(50% + 10px) !important;
  margin-top: 0 !important;
  transform: rotate(-1deg) !important;
}
.service-list {
  grid-column: 3 !important;
}

/* FEATURED WORK: much larger gutter, shorter project boxes */
.featured {
  grid-template-columns: 265px minmax(0,1fr) !important;
  column-gap: clamp(90px, 6vw, 130px) !important;
}
.project-grid {
  gap: clamp(18px,1.6vw,30px) !important;
}
.project {
  min-height: 0 !important;
  height: clamp(118px, 7.2vw, 148px) !important;
}

/* PROCESS number chips: exact site light blue */
.process .num,
.process .step-num,
.process .process-num,
.process .number,
.process .step-number,
.process article > span:first-child,
.process .process-card > span:first-child {
  background:#f7f5ef !important;
  color: #000 !important;
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr !important;
  }
  .portrait-wrap,
  .idea-note {
    grid-column: 1 !important;
    justify-self: center !important;
    margin-left: 0 !important;
  }
  .featured {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
}

/* v27 — exact process chip selector */
.process-grid .paper-card > b {
  display: inline-block !important;
  background:#f7f5ef !important;
  color: #000 !important;
}

/* v28 — surgical corrections after v27 */

/* PROCESS: restore lime number chips */
.process-grid .paper-card > b {
  background: #C7DA2C !important;
  background-color: #C7DA2C !important;
  color: #000 !important;
}

/* ABOUT: restore the compact layout proportions */
.about {
  display: grid !important;
  grid-template-columns: minmax(260px, .86fr) minmax(330px, .95fr) minmax(280px, .84fr) minmax(260px, .82fr) !important;
  column-gap: clamp(28px, 2.5vw, 52px) !important;
  align-items: center !important;
  padding-top: clamp(44px, 4vw, 70px) !important;
  padding-bottom: clamp(44px, 4vw, 70px) !important;
}

.about-copy {
  grid-column: 1 !important;
}

.portrait-wrap {
  grid-column: 2 !important;
  justify-self: center !important;
  width: min(100%, 365px) !important;
  margin: 0 !important;
  transform: translateX(-34px) rotate(-1.6deg) !important;
}

.idea-note {
  grid-column: 3 !important;
  justify-self: start !important;
  width: auto !important;
  margin: 0 !important;
  transform: translateX(-34px) rotate(-1deg) !important;
}

.service-list {
  grid-column: 4 !important;
  justify-self: stretch !important;
}

/* keep portrait at its original size */
.portrait {
  height: 430px !important;
}

/* HERO: keep restored image clean with no CSS dimming */
.studio-image,
.studio-image img {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}
.studio-image::before,
.studio-image::after {
  content: none !important;
  display: none !important;
}

/* Mobile: stack normally */
@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr !important;
  }
  .about-copy,
  .portrait-wrap,
  .idea-note,
  .service-list {
    grid-column: 1 !important;
  }
  .portrait-wrap,
  .idea-note {
    transform: none !important;
    justify-self: center !important;
  }
}

/* ABOUT PAGE v29 */
.about-page{background:#050505;color:#f5f4ef}.about-hero{min-height:430px;padding:80px 5vw 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:end}.about-hero h1{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:900;font-size:clamp(78px,10vw,170px);line-height:.78;margin:0;letter-spacing:-.025em}.about-hero .intro{max-width:610px;font-size:clamp(20px,1.7vw,30px);line-height:1.35;margin:0 0 8px}.about-story{background:#f4f3ee;color:#0a0a0a;padding:85px 5vw;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:7vw;align-items:center}.about-story-copy{max-width:720px}.about-story h2,.about-experience h2,.about-close h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:clamp(56px,6vw,105px);line-height:.86;margin:0 0 32px}.about-story p{font-size:18px;line-height:1.65;margin:0 0 20px}.about-image{position:relative}.about-image img{display:block;width:100%;max-height:720px;object-fit:cover}.about-image:after{content:'KANSAS CITY • DESIGN • PRINT • APPAREL';position:absolute;right:-22px;bottom:28px;background:#ff525e;color:#050505;padding:13px 18px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.08em;transform:rotate(-2deg)}.about-experience{padding:90px 5vw 105px;background:#050505;color:#f5f4ef}.about-experience-top{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}.about-experience-copy{font-size:19px;line-height:1.6;max-width:720px}.about-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:65px;border-top:1px solid #555;border-bottom:1px solid #555}.about-stat{padding:28px 20px 30px 0;border-right:1px solid #555}.about-stat:last-child{border-right:0;padding-left:30px}.about-stat:nth-child(2){padding-left:30px}.about-stat strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:52px;line-height:1;text-transform:uppercase}.about-stat span{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:12px;letter-spacing:.08em}.about-close{background:#C7DA2C;color:#050505;padding:80px 5vw;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}.about-close h2{font-size:clamp(76px,10vw,170px);margin:0}.about-close p{font-family:'IBM Plex Mono',monospace;font-size:16px;margin:15px 0 0}.about-close .button{border-color:#050505;color:#050505;white-space:nowrap}.about-close .button:hover{background:#050505;color:#C7DA2C}@media(max-width:900px){.about-hero,.about-story,.about-experience-top,.about-close{grid-template-columns:1fr}.about-story{gap:45px}.about-image img{max-height:none}.about-stats{grid-template-columns:1fr}.about-stat,.about-stat:nth-child(2),.about-stat:last-child{border-right:0;border-bottom:1px solid #555;padding:24px 0}.about-stat:last-child{border-bottom:0}.about-close{align-items:start}}

/* About page refinements v30 */
.about-hero h1{line-height:.88;}
.about-hero .intro{font-family:'IBM Plex Mono',Menlo,Monaco,'Courier New',monospace;font-size:clamp(18px,1.45vw,26px);line-height:1.5;}

/* v31 — footer uses the same light off-white as the site */
.footer,
.footer.cream-texture {
  background: #f7f5ef !important;
  background-color: #f7f5ef !important;
  background-image: none !important;
}

/* v32 — slightly more open About hero headline */
.about-page .about-hero h1{letter-spacing:-.005em;word-spacing:.025em}

/* v33 — Services */
.services-hero{min-height:420px;padding:72px 5vw 64px;display:grid;grid-template-columns:1.25fr .75fr;gap:7vw;align-items:end;color:#f5f4ef}
.services-hero h1,.services-board h2,.services-fit h2,.services-cta h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:900}
.services-hero h1{font-size:clamp(76px,9vw,155px);line-height:.82;letter-spacing:.005em;margin:18px 0 0}
.services-hero p{font-family:'IBM Plex Mono',monospace;font-size:clamp(17px,1.5vw,24px);line-height:1.55;max-width:620px;margin:0 0 8px}
.services-board{padding:86px 5vw 95px;display:grid;grid-template-columns:minmax(260px,.7fr) minmax(620px,1.5fr);gap:7vw;color:#080808}
.services-intro h2{font-size:clamp(58px,6vw,104px);line-height:.86;margin:20px 0 28px}
.services-intro p{font-size:18px;line-height:1.6;max-width:430px}
.services-list-big{border-top:2px solid #0a0a0a}
.services-list-big article{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.42)}
.services-list-big article>span{font-family:'IBM Plex Mono',monospace;font-weight:600;background:#C7DA2C;width:42px;height:42px;display:grid;place-items:center}
.services-list-big h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:clamp(38px,3.2vw,58px);line-height:.9;margin:0 0 7px}
.services-list-big p{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:12px;letter-spacing:.025em;margin:0;line-height:1.5}
.services-checker{display:grid;grid-template-columns:minmax(380px,.9fr) minmax(0,1.1fr);background:#050505;color:#f5f4ef;min-height:540px}
.checker-panel{background-color:#050505;background-image:linear-gradient(45deg,#f4f3ee 25%,transparent 25%),linear-gradient(-45deg,#f4f3ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f4f3ee 75%),linear-gradient(-45deg,transparent 75%,#f4f3ee 75%);background-size:92px 92px;background-position:0 0,0 46px,46px -46px,-46px 0;opacity:.96}
.services-fit{padding:78px 8vw 78px 7vw;align-self:center}
.services-fit h2{font-size:clamp(64px,7vw,118px);line-height:.84;margin:20px 0 30px}
.services-fit p{font-size:19px;line-height:1.6;max-width:720px}
.services-fit .mono-note{font-family:'IBM Plex Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:.03em;border-top:1px solid #555;padding-top:24px;margin-top:34px}
.services-cta{background:#ff525e;color:#f4f1e9;padding:70px 5vw;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.services-cta h2{font-size:clamp(72px,9vw,150px);line-height:.82;margin:15px 0 0;color:#f4f1e9}.services-cta h2 span{color:#f4f1e9}
.services-cta .button{border-color:#050505;color:#050505}
@media(max-width:900px){.services-hero,.services-board,.services-checker,.services-cta{grid-template-columns:1fr}.services-hero{min-height:0;gap:38px}.services-board{gap:55px}.checker-panel{min-height:300px}.services-cta{align-items:start}.services-list-big article{grid-template-columns:52px 1fr}}

/* v34 — exact supplied checkerboard artwork */
.checker-panel{
  background-image:url('assets/checkerboard-grunge.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
}

/* v35 — services polish */
.services-board{
  background:#f7f5ef !important;
  background-color:#f7f5ef !important;
  background-image:none !important;
}

/* v37 — Contact */
.contact-hero{min-height:440px;padding:72px 5vw 68px;display:grid;grid-template-columns:1.18fr .82fr;gap:7vw;align-items:end;color:#f7f5ef}
.contact-hero h1,.contact-form-intro h2,.contact-bottom h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:900}
.contact-hero h1{font-size:clamp(78px,9.5vw,164px);line-height:.8;letter-spacing:.005em;margin:18px 0 0}
.contact-hero-copy{padding-bottom:10px}
.contact-hero-copy>p{font-family:'IBM Plex Mono',monospace;font-size:clamp(17px,1.45vw,23px);line-height:1.55;max-width:620px;margin:0 0 42px}
.contact-direct{border-top:1px solid rgba(255,255,255,.35);padding-top:18px;display:flex;flex-direction:column;gap:8px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase}
.contact-direct span{font-size:11px;letter-spacing:.06em}
.contact-direct a{font-size:15px;font-weight:600}.contact-direct a:hover{color:#C7DA2C}

.contact-form-section{background:#f7f5ef;color:#050505;padding:86px 5vw 92px;display:grid;grid-template-columns:minmax(260px,.68fr) minmax(600px,1.32fr);gap:8vw;align-items:start}
.contact-form-intro h2{font-size:clamp(66px,7vw,118px);line-height:.84;margin:20px 0 28px}
.contact-form-intro p{font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.65;max-width:440px}
.contact-form{display:flex;flex-direction:column;gap:25px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact-form label{display:flex;flex-direction:column;gap:9px}
.contact-form label>span{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-weight:600;font-size:11px;letter-spacing:.055em}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;box-sizing:border-box;border:0;border-bottom:2px solid #050505;background:rgba(247,245,239,.94);color:#050505;border-radius:0;padding:14px 14px;font:500 14px 'IBM Plex Mono',monospace;outline:none}
.contact-form textarea{border:2px solid #050505;resize:vertical;min-height:160px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{background:#f7f5ef;box-shadow:4px 4px 0 #050505}
.contact-submit{align-self:flex-start;border:2px solid #050505;background:#C7DA2C;color:#050505;padding:15px 20px;font:700 13px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;display:flex;gap:28px;align-items:center}
.contact-submit:hover{background:#ff525e}
.form-note{font:500 11px/1.5 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.035em;margin:0}

.contact-bottom{background:#ff525e;color:#050505;padding:72px 5vw;display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end}
.contact-bottom h2{font-size:clamp(66px,8vw,135px);line-height:.82;margin:16px 0 0}
.contact-bottom h2 span{color:#f7f5ef}
.contact-bottom-note{font:600 11px/1.6 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.05em;max-width:280px;text-align:right}

@media(max-width:900px){
.contact-hero,.contact-form-section,.contact-bottom{grid-template-columns:1fr}
.contact-hero{min-height:0;gap:42px;padding-top:56px}
.contact-form-section{gap:52px}
.form-row{grid-template-columns:1fr}
.contact-bottom{align-items:start}
.contact-bottom-note{text-align:left}
}
@media(max-width:560px){
.contact-hero,.contact-form-section,.contact-bottom{padding-left:7vw;padding-right:7vw}
.contact-hero h1{font-size:clamp(68px,22vw,104px)}
.contact-form-intro h2,.contact-bottom h2{font-size:clamp(58px,18vw,88px)}
}

/* v38 — cleaner tape-style contact form */
.contact-form{gap:30px}
.contact-form label{position:relative;gap:10px}
.contact-form label>span{padding-left:8px}

.contact-form input,
.contact-form select,
.contact-form textarea{
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  background:#f7f5ef !important;
  color:#050505;
  border-radius:1px;
  padding:17px 20px;
  min-height:54px;
  clip-path:polygon(.6% 3%,99.4% 0,100% 95%,.3% 100%);
  transform:rotate(-0.18deg);
  transition:transform .15s ease, background .15s ease;
}
.contact-form .form-row label:nth-child(2) input,
.contact-form .form-row label:nth-child(2) select{
  clip-path:polygon(.2% 0,99.7% 3%,99.4% 100%,.5% 96%);
  transform:rotate(.16deg);
}
.contact-form .form-row:nth-of-type(2) label:first-child input{
  transform:rotate(.12deg);
}
.contact-form textarea{
  min-height:135px;
  clip-path:polygon(.25% 1%,99.7% 0,99.4% 98%,.5% 100%);
  transform:rotate(.08deg);
  resize:vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  background:#fffdf7 !important;
  box-shadow:none !important;
  transform:rotate(0deg);
}
.contact-form select{
  appearance:auto;
}
.contact-submit{
  margin-top:2px;
}
@media(max-width:900px){
  .contact-form input,.contact-form select,.contact-form textarea{transform:none}
}

/* Contact polish v39 */
.contact-submit{border:0 !important;background:#050505 !important;color:#C7DA2C !important;box-shadow:none !important}
.contact-submit:hover{background:#050505 !important;color:#f7f5ef !important}
.contact-bottom{background:#050505 !important;color:#f7f5ef !important}
.contact-bottom h2 span{color:#ff525e !important}
.contact-bottom .micro,.contact-bottom-note{color:#f7f5ef !important}
.contact-bottom-note{max-width:none !important;white-space:nowrap !important}
@media(max-width:700px){.contact-bottom-note{white-space:normal !important}}

/* Contact polish v40 */
.contact-form-intro p{
  font-family:"IBM Plex Sans",Arial,Helvetica,sans-serif !important;
  font-size:17px;
  line-height:1.55;
  max-width:440px;
}
.contact-bottom{
  background-color:#0b0b0b !important;
  background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp') !important;
  background-size:920px auto,760px auto !important;
  background-position:center top,center center !important;
  background-repeat:repeat,repeat !important;
  background-blend-mode:screen,soft-light !important;
}

/* Contact final polish v41 */
.contact-hero-line2{white-space:nowrap}
.contact-hero-copy>p{font-size:clamp(16px,1.25vw,20px) !important;max-width:590px}
.contact-bottom h2 span{color:#C7DA2C !important}
@media(max-width:700px){.contact-hero-line2{white-space:normal}}

/* v43: bottom CTA panels use solid-color typography; accent colors stay in page headers/details */
.contact-cta h2,.contact-cta h2 span{color:#f4f1e9!important}

/* v45 — simplified palette: black / off-white / coral / #C7DA2C */
:root{--lime:#C7DA2C;--blue:#f7f5ef}
.contact-form-section{background:#f7f5ef !important;background-color:#f7f5ef !important}
.process .num,.process-grid .num,.process-number,.number-chip,.step-number{background:#C7DA2C !important;background-color:#C7DA2C !important}

/* v46 — bring the tactile tape treatment back to the contact form */
.contact-form-section{background:#f7f5ef!important;background-color:#f7f5ef!important}

/* Fields read as neutral masking-tape pieces, without black outlines */
.contact-form input:not([type="submit"]),
.contact-form select,
.contact-form textarea{
  background:#fffdf7!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:0 5px 9px rgba(5,5,5,.08)!important;
  outline:none;
  color:#050505;
  position:relative;
  clip-path:polygon(1% 2%,99% 0,100% 94%,98% 100%,1% 98%,0 5%);
  transform-origin:center;
}
.contact-form input:not([type="submit"]){transform:rotate(-.18deg)}
.contact-form select{transform:rotate(.14deg)}
.contact-form textarea{
  transform:rotate(-.10deg);
  clip-path:polygon(.5% 1%,99.4% 0,100% 97%,99% 100%,.6% 99%,0 2%);
}

/* Small variation across the pieces so they do not feel computer-perfect */
.contact-form .field:nth-of-type(even) input,
.contact-form .field:nth-of-type(even) select{transform:rotate(.22deg)}
.contact-form .field:nth-of-type(3n) input,
.contact-form .field:nth-of-type(3n) select{transform:rotate(-.28deg)}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  box-shadow:0 7px 13px rgba(5,5,5,.12)!important;
}

/* Keep the CTA crisp and graphic rather than taped */
.contact-form button,
.contact-form input[type="submit"]{
  background:#050505!important;
  color:#C7DA2C!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  clip-path:none!important;
}

/* v47 — Work / selected projects */
.work-hero{background:#050505;color:#f7f5ef;padding:72px 5vw 70px;display:grid;grid-template-columns:1fr .42fr;column-gap:6vw;align-items:end}
.work-hero>.micro{grid-column:1/-1;margin-bottom:22px}
.work-hero h1,.work-project h2,.work-cta h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:900}
.work-hero h1{font-size:clamp(78px,9.3vw,158px);line-height:.81;margin:0;letter-spacing:.005em}
.work-hero p{font-family:'IBM Plex Mono',monospace;font-size:15px;line-height:1.6;max-width:470px;margin:0 0 8px}
.work-hero .lime{color:#C7DA2C}

.work-project{min-height:650px;display:grid;grid-template-columns:minmax(0,1.38fr) minmax(340px,.62fr);align-items:stretch}
.work-project.reverse{grid-template-columns:minmax(340px,.62fr) minmax(0,1.38fr)}
.work-project.reverse .work-visual{order:2}.work-project.reverse .work-copy{order:1}
.work-project-light{background:#f7f5ef;color:#050505}
.work-project-dark{background-color:#050505;color:#f7f5ef;background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp')}
.work-visual{min-height:650px;padding:4.2vw;display:flex;align-items:stretch}
.work-placeholder{width:100%;min-height:520px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;box-sizing:border-box;overflow:hidden}
.work-placeholder:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05),rgba(0,0,0,.17))}
.work-placeholder>*{position:relative;z-index:1}
.work-placeholder>span:not(.work-placeholder-mark){font:700 clamp(26px,2.6vw,46px)/.95 'Barlow Condensed',sans-serif;text-transform:uppercase}
.work-placeholder small{font:500 10px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;margin-top:10px}
.work-placeholder-mark{position:absolute;top:25px;right:28px;font:900 clamp(80px,10vw,160px)/1 'Barlow Condensed',sans-serif;opacity:.18}
.visual-flair .work-placeholder{background:#171717;color:#f7f5ef}
.visual-goose .work-placeholder{background:#C7DA2C;color:#050505}
.visual-sauced .work-placeholder{background:#ff525e;color:#050505}
.visual-mossback .work-placeholder{background:#242424;color:#f7f5ef}

.work-copy{padding:72px 5vw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.work-num{width:44px;height:44px;background:#C7DA2C;color:#050505;display:grid;place-items:center;font:600 12px 'IBM Plex Mono',monospace;margin-bottom:28px}
.work-project h2{font-size:clamp(66px,6.8vw,116px);line-height:.82;margin:18px 0 28px}
.work-copy p{font-size:17px;line-height:1.55;max-width:430px;margin:0 0 32px}
.work-link{font:600 11px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.06em;display:flex;gap:25px;align-items:center}
.work-project-light .work-link:hover{color:#ff525e}.work-project-dark .work-link:hover{color:#C7DA2C}

.work-cta{background:#C7DA2C;color:#050505;padding:72px 5vw}
.work-cta-row{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.work-cta h2{font-size:clamp(72px,9vw,150px);line-height:.82;margin:16px 0 0}
.work-cta-button{border-color:#050505!important;background:#050505!important;color:#f7f5ef!important}
.work-cta-button:hover{color:#C7DA2C!important}

@media(max-width:900px){
.work-hero{grid-template-columns:1fr;gap:38px}
.work-project,.work-project.reverse{grid-template-columns:1fr;min-height:0}
.work-project.reverse .work-visual,.work-project.reverse .work-copy{order:initial}
.work-visual{min-height:420px}.work-placeholder{min-height:390px}
.work-copy{padding:58px 7vw 68px}
.work-cta-row{grid-template-columns:1fr;align-items:start}
}

.work-hero.black-texture{background-color:#050505;}

/* v50 refinements */
.visual-sauced .work-placeholder{background:#ff525e;color:#050505}

/* v51 — force the established black texture onto the Work hero */
.work-hero.black-texture{
  background-color:#050505 !important;
  background-image:url('assets/texture-shabby-hires.webp') !important;
  background-repeat:repeat !important;
  background-size:auto !important;
}

/* v52 — Work hero exactly matches About hero black texture */
.work-hero.black-texture{
  background-color:#0b0b0b !important;
  background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp') !important;
  background-size:920px auto,760px auto !important;
  background-position:center top,center center !important;
  background-repeat:repeat,repeat !important;
  background-blend-mode:screen,soft-light !important;
}

/* v53 — heavier display typography to match About/CTA reference */
.work-hero h1,
.work-card h2,
.project-card h2,
.project-title,
.work-title {
  font-weight: 900 !important;
  font-stretch: normal !important;
  letter-spacing: -0.025em !important;
}

/* v54 — match Work display type to the About page */
.work-hero h1{
  font-family:'Barlow Condensed',sans-serif !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  font-size:clamp(78px,10vw,170px) !important;
  line-height:.88 !important;
  letter-spacing:-.005em !important;
  word-spacing:.025em !important;
}

.work-project h2{
  font-family:'Barlow Condensed',sans-serif !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  font-size:clamp(56px,6vw,105px) !important;
  line-height:.86 !important;
  letter-spacing:0 !important;
}

/* Keep image labels smaller but use the same clear, heavy family */
.work-placeholder>span:not(.work-placeholder-mark){
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:800 !important;
  font-size:clamp(24px,2.35vw,42px) !important;
  line-height:.95 !important;
  letter-spacing:0 !important;
}

/* Bottom CTA panels stay one-color typography — no accent word treatments */
.about-close h2,
.about-close h2 span{
  color:#050505 !important;
}
.services-cta h2,
.services-cta h2 span{
  color:#f4f1e9 !important;
}
.contact-bottom h2,
.contact-bottom h2 span{
  color:#f7f5ef !important;
}
.work-cta h2,
.work-cta h2 span{
  color:#050505 !important;
}

/* Work CTA typography matches the About closing-panel weight/scale */
.work-cta h2{
  font-family:'Barlow Condensed',sans-serif !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  font-size:clamp(76px,10vw,170px) !important;
  line-height:.86 !important;
  letter-spacing:0 !important;
}

/* v55 — keep hero display type heavy; return secondary display headers to the thinner About-page treatment */
.about-story h2,
.about-experience h2,
.services-intro h2,
.services-board h2,
.services-fit h2,
.contact-form-intro h2,
.work-project h2,
.work-card h2,
.project-card h2,
.project-title,
.work-title {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

/* Top/hero statements remain heavy */
.about-hero h1,
.services-hero h1,
.contact-hero h1,
.work-hero h1 {
  font-weight:900 !important;
}

/* v56 — Homepage follows the same hierarchy: hero stays heavy, secondary display headers are lighter */
.home-hero h1,
.hero h1 {
  font-weight:900 !important;
}

.home-intro h2,
.home-about h2,
.home-services h2,
.home-work h2,
.home-section h2,
.home-projects h2,
.home-testimonials h2,
.home-contact h2,
.home-cta h2,
main.home h2,
body.home h2 {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

/* v57 — Homepage hierarchy:
   ONLY the very top hero and very bottom closing statement stay heavy.
   All display headings between them use the thinner secondary weight. */
body.home main h2,
body.home .featured-heading,
body.home .featured-work h2,
body.home .testimonials h2,
body.home .testimonial-heading,
body.home .process h2,
body.home .process-heading,
body.home .home-intro h2,
body.home .home-about h2,
body.home .home-services h2,
body.home .home-work h2,
body.home .home-projects h2,
body.home .home-testimonials h2 {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

/* Bookends remain heavy */
body.home .home-hero h1,
body.home .hero h1,
body.home .home-cta h2:last-of-type,
body.home .closing-cta h2,
body.home footer h2 {
  font-weight:900 !important;
}

/* v58 — Homepage display hierarchy. Match the Services "BIG IDEAS" secondary weight exactly. */
.about h2,
.featured h2,
.testimonial h2,
.process h2 {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

/* Keep only the homepage bookends heavy. */
.hero h1,
.cta h2 {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:900 !important;
}

/* v59 — Homepage secondary section titles: one consistent larger size */
.featured h2,
.testimonial h2,
.process h2 {
  font-size:72px !important;
  line-height:.9 !important;
}

@media(max-width:600px){
  .featured h2,
  .testimonial h2,
  .process h2 {
    font-size:57px !important;
  }
}

/* v61 — homepage hero: show image at full original color with no dulling overlay */
.home-hero,
.hero-image,
.hero-media,
.hero-photo,
.hero-visual {
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background-blend-mode:normal !important;
}
.home-hero::before,
.home-hero::after,
.hero-image::before,
.hero-image::after,
.hero-media::before,
.hero-media::after,
.hero-photo::before,
.hero-photo::after,
.hero-visual::before,
.hero-visual::after {
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}
.home-hero img,
.hero-image img,
.hero-media img,
.hero-photo img,
.hero-visual img {
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* v62 — thinner project names over Work page imagery */
.work-placeholder>span:not(.work-placeholder-mark){font-weight:400!important;}

/* v63 — About experience uses the established black texture */
.about-experience.black-texture{
  background-color:#0b0b0b !important;
  background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp') !important;
  background-size:920px auto,760px auto !important;
  background-position:center top,center center !important;
  background-repeat:repeat,repeat !important;
  background-blend-mode:screen,soft-light !important;
}

/* v63 — Work image/project names use the thinner secondary display weight */
.work-placeholder>span:not(.work-placeholder-mark){
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

/* v64 — navigation/footer refinement + mobile typography pass */
/* One weight down for persistent site chrome */
.topbar,
.topbar a,
.nav,
.nav a,
.footer,
.footer a,
.footer .micro,
.footer nav {
  font-weight:700 !important;
}

/* Keep logo artwork itself untouched */
.topbar .logo,
.footer .logo { font-weight:inherit; }

/* Mobile: preserve the hierarchy without letting the chrome or giant display type crowd the viewport */
@media (max-width: 700px) {
  .topbar {
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .nav {
    gap:14px !important;
  }
  .nav a,
  .topbar .micro,
  .footer .micro,
  .footer a {
    font-weight:700 !important;
  }

  /* Main page heroes remain the boldest type, but scale cleanly on phones */
  .home-hero h1,
  .hero h1,
  .about-hero h1,
  .services-hero h1,
  .contact-hero h1,
  .work-hero h1 {
    font-size:clamp(54px,16vw,82px) !important;
    line-height:.88 !important;
    overflow-wrap:normal;
    word-break:normal;
  }

  /* Secondary display headers retain their thinner hierarchy */
  main h2:not(.home-cta h2):not(.closing-cta h2):not(.work-cta h2) {
    font-size:clamp(46px,13vw,68px);
    line-height:.9;
  }

  .footer {
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* v65 — homepage hero cleanup */
body.home .hero-checker,
body.home .home-hero .checker,
body.home .home-hero .checkerboard,
body.home .home-hero::before {
  display:none !important;
  content:none !important;
}

/* Slightly quieter body copy across the site */
body p,
main p,
.section-copy,
.body-copy,
.about-copy,
.services-copy,
.contact-copy,
.work-copy p {
  font-size:21px;
  line-height:1.5;
}

/* Keep small mono/meta text untouched */
.micro,
.eyebrow,
.meta,
.kicker,
small {
  font-size:inherit;
}

/* Mobile body copy */
@media (max-width:700px){
  body p,
  main p,
  .section-copy,
  .body-copy,
  .about-copy,
  .services-copy,
  .contact-copy,
  .work-copy p {
    font-size:18px !important;
    line-height:1.5 !important;
  }

  /* Hero mono intro copy can stay a touch larger than standard body copy */
  .home-hero p,
  .about-hero p,
  .services-hero p,
  .contact-hero p,
  .work-hero p {
    font-size:19px !important;
    line-height:1.5 !important;
  }
}


/* v66 — quieter sans-serif body copy only.
   Mono/supporting copy and display headlines remain unchanged. */
body p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
main p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
.section-copy:not(.mono),
.body-copy:not(.mono),
.about-copy:not(.mono),
.services-copy:not(.mono),
.contact-copy:not(.mono),
.work-copy p:not(.mono) {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

@media (max-width:700px) {
  body p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
  main p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
  .section-copy:not(.mono),
  .body-copy:not(.mono),
  .about-copy:not(.mono),
  .services-copy:not(.mono),
  .contact-copy:not(.mono),
  .work-copy p:not(.mono) {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }
}


/* v67 — mobile refinement: lighter sans body copy + compact Work projects */
@media (max-width:700px) {

  /* Sans body copy only: lighter, quieter, easier to scan */
  body p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
  main p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
  .section-copy:not(.mono),
  .body-copy:not(.mono),
  .about-copy:not(.mono),
  .services-copy:not(.mono),
  .contact-copy:not(.mono),
  .work-copy p:not(.mono) {
    font-size:16px !important;
    font-weight:300 !important;
    line-height:1.5 !important;
  }

  /* Work page: make each project feel like one compact unit */
  .work-project,
  .work-project.reverse {
    min-height:0 !important;
  }

  .work-visual {
    min-height:0 !important;
    padding:18px !important;
  }

  .work-placeholder {
    min-height:0 !important;
    aspect-ratio:4 / 3 !important;
    padding:22px !important;
  }

  .work-placeholder-mark {
    top:16px !important;
    right:18px !important;
    font-size:76px !important;
  }

  .work-placeholder > span:not(.work-placeholder-mark) {
    font-size:26px !important;
    line-height:.95 !important;
    font-weight:600 !important;
  }

  .work-placeholder small {
    font-size:9px !important;
    margin-top:6px !important;
  }

  .work-copy {
    padding:30px 22px 38px !important;
  }

  .work-num {
    width:36px !important;
    height:36px !important;
    margin-bottom:18px !important;
    font-size:10px !important;
  }

  .work-copy .micro {
    margin-bottom:8px !important;
  }

  .work-project h2 {
    font-size:52px !important;
    line-height:.88 !important;
    margin:10px 0 18px !important;
  }

  .work-copy p {
    margin-bottom:20px !important;
  }

  .work-link {
    margin-top:0 !important;
  }
}


/* v68 — tighter mobile project titles + genuinely lighter/smaller sans copy */
@media (max-width:700px) {

  /* Project names: keep short names such as FLAIR SPIRITS on one line */
  .work-project h2 {
    font-size:40px !important;
    line-height:.92 !important;
    letter-spacing:-0.02em !important;
    white-space:nowrap !important;
    margin:8px 0 14px !important;
  }

  /* Reduce the whole project copy block a little more */
  .work-copy {
    padding:26px 22px 32px !important;
  }

  .work-copy .micro {
    font-size:10px !important;
    line-height:1.35 !important;
  }

  /* Main sans paragraph copy */
  body p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
  main p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
  .section-copy:not(.mono),
  .body-copy:not(.mono),
  .about-copy:not(.mono),
  .services-copy:not(.mono),
  .contact-copy:not(.mono),
  .work-copy p:not(.mono) {
    font-size:14px !important;
    font-weight:300 !important;
    line-height:1.55 !important;
  }

  .work-copy p:not(.mono) {
    margin-bottom:16px !important;
  }
}

/* Desktop/tablet sans paragraph copy: slightly smaller and lighter too */
@media (min-width:701px) {
  body p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
  main p:not(.mono):not(.micro):not(.eyebrow):not(.meta):not(.kicker),
  .section-copy:not(.mono),
  .body-copy:not(.mono),
  .about-copy:not(.mono),
  .services-copy:not(.mono),
  .contact-copy:not(.mono),
  .work-copy p:not(.mono) {
    font-size:17px !important;
    font-weight:300 !important;
    line-height:1.55 !important;
  }
}


/* v69 — mobile composition cleanup + About story desktop trim */

/* ABOUT PAGE desktop: smaller image so it ends closer to the text block */
@media (min-width: 901px) {
  .about-story {
    grid-template-columns: minmax(0, .95fr) minmax(360px, .85fr) !important;
    gap: 5vw !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .about-story-copy {
    max-width: 760px !important;
  }
  .about-image {
    justify-self: end !important;
    width: min(100%, 660px) !important;
  }
  .about-image img {
    width: 100% !important;
    max-height: 560px !important;
    object-fit: cover !important;
  }
}

/* MOBILE */
@media (max-width: 700px) {

  /* Homepage hero: no checker strip; compact the composition so it doesn't feel like a whole page */
  body.home .hero .checker-left,
  body.home .hero .checker,
  body.home .checker-left {
    display: none !important;
  }

  body.home .hero {
    padding: 34px 22px 30px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.home .hero-copy {
    padding-left: 0 !important;
    margin: 0 !important;
  }

  body.home .hero h1 {
    font-size: clamp(56px, 15vw, 72px) !important;
    line-height: .86 !important;
    margin: 0 !important;
  }

  body.home .hero-micro {
    margin-top: 20px !important;
  }

  body.home .hero-side {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: end !important;
    margin: 0 !important;
  }

  body.home .service-stack {
    margin: 0 !important;
  }

  body.home .sticker {
    margin: 0 !important;
    transform: rotate(-4deg) !important;
  }

  /* Homepage "What I Do" area: remove the mobile checker stripe and shrink Jess photo */
  body.home .about .checker-right,
  body.home .about .checker,
  body.home .checker-right {
    display: none !important;
  }

  body.home .about {
    padding: 34px 22px 38px !important;
    gap: 26px !important;
    min-height: 0 !important;
  }

  body.home .portrait-wrap {
    width: min(78vw, 260px) !important;
    max-width: 260px !important;
    justify-self: start !important;
    padding: 6px !important;
  }

  body.home .portrait {
    height: 300px !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }

  body.home .idea-note {
    display: none !important;
  }

  body.home .service-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 18px !important;
  }

  /* Work page project titles: one line and compact */
  .work-project h2 {
    white-space: nowrap !important;
    font-size: 34px !important;
    line-height: .95 !important;
    letter-spacing: -.01em !important;
    margin: 8px 0 12px !important;
  }

  .work-copy {
    padding: 24px 20px 28px !important;
  }

  .work-visual {
    padding: 16px !important;
  }

  .work-placeholder {
    aspect-ratio: 4 / 3 !important;
    padding: 18px !important;
  }
}


/* v70 — mobile vertical rhythm + unified off-white */
:root{
  --cream:#f7f5ef;
}

/* Use one off-white everywhere it is meant to be cream/light */
.cream-texture,
.footer,
.footer.cream-texture,
.work-project-light,
.about-story,
.services-board,
.contact-form-section,
.contact-form-wrap,
.contact-form,
.home .featured,
.home .featured.cream-texture {
  background-color:#f7f5ef !important;
}

/* Avoid slightly different legacy cream values */
.about-story,
.services-board,
.contact-form-section,
.contact-form-wrap,
.work-project-light,
.footer {
  color:#050505;
}

@media (max-width:700px){

  /* Services checkerboard: two rows only */
  .services-checker,
  .checker-band,
  .checkerboard-band,
  .services-board + .checker,
  .services-page .checker-full,
  .services-page .checkerboard {
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    background-size:auto 120px !important;
    overflow:hidden !important;
  }

  /* If the checker is an image rather than a CSS background */
  .services-checker img,
  .checker-band img,
  .checkerboard-band img,
  .services-page .checker-full img,
  .services-page .checkerboard img {
    width:100% !important;
    height:120px !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }

  /* Cut transitional whitespace roughly in half between dark/light sections */
  .about-story,
  .services-board,
  .services-fit,
  .contact-form-section,
  .contact-form-wrap,
  .contact-bottom,
  .work-cta,
  .home .featured,
  .home .testimonial,
  .home .process,
  .home .about {
    padding-top:28px !important;
    padding-bottom:28px !important;
  }

  /* Preserve enough space for content-heavy sections while removing the oversized top gap */
  .about-story {
    padding-top:38px !important;
    padding-bottom:38px !important;
  }

  .contact-form-section,
  .contact-form-wrap {
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  .services-board {
    padding-top:36px !important;
    padding-bottom:38px !important;
  }

  /* Reduce empty hand-off space at section boundaries */
  .about-hero,
  .services-hero,
  .contact-hero,
  .work-hero {
    padding-bottom:36px !important;
  }

  .about-story h2,
  .services-intro h2,
  .contact-form-intro h2 {
    margin-bottom:20px !important;
  }
}

@media (max-width:700px){
  .services-checker-img{
    width:100% !important;
    height:120px !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }
}


/* v70 corrective — only the checker artwork is two rows; keep the How I Work content intact */
@media (max-width:700px){
  .services-checker{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    background:none !important;
  }
  .services-checker .checker-panel{
    height:116px !important;
    min-height:116px !important;
    max-height:116px !important;
    background-size:auto 116px !important;
    background-position:center !important;
    overflow:hidden !important;
  }

  /* Halve the excess breathing room where major black/light sections meet */
  .about-hero + .about-story,
  .contact-hero + .contact-form-section,
  .services-hero + .services-board,
  .work-hero + .work-project,
  .home .desk-band + .about,
  .home .about + .featured,
  .home .featured + .testimonial,
  .home .testimonial + .process {
    margin-top:0 !important;
  }

  .about-story,
  .contact-form-section,
  .services-board,
  .services-fit,
  .home .about,
  .home .featured,
  .home .testimonial,
  .home .process {
    scroll-margin-top:0;
  }
}


/* v71 — mobile homepage: remove vertical checker stripes + compact hero composition */
@media (max-width:700px){

  /* Kill the vertical checkerboard rails on the homepage entirely */
  body.home .checker-left,
  body.home .checker-right,
  body.home .hero .checker,
  body.home .about .checker {
    display:none !important;
  }

  /* HERO: tighter, more editorial composition */
  body.home .hero {
    min-height:0 !important;
    padding:28px 22px 26px !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "headline headline"
      "micro sticker"
      "services sticker" !important;
    column-gap:18px !important;
    row-gap:14px !important;
    align-items:start !important;
  }

  body.home .hero-copy {
    display:contents !important;
  }

  body.home .hero h1 {
    grid-area:headline !important;
    font-size:clamp(54px,14.5vw,70px) !important;
    line-height:.84 !important;
    margin:0 !important;
    max-width:100% !important;
  }

  body.home .hero-micro {
    grid-area:micro !important;
    margin:0 !important;
    font-size:12px !important;
    line-height:1.45 !important;
  }

  body.home .hero-side {
    display:contents !important;
  }

  body.home .service-stack {
    grid-area:services !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:1.45 !important;
  }

  body.home .sticker {
    grid-area:sticker !important;
    align-self:end !important;
    justify-self:end !important;
    margin:0 0 2px 0 !important;
    padding:14px 13px !important;
    font-size:13px !important;
    line-height:.95 !important;
    transform:rotate(-3deg) !important;
    width:auto !important;
    min-width:104px !important;
  }

  /* WHAT I DO section: no checker rail and reduce vertical footprint */
  body.home .about {
    padding:30px 22px 32px !important;
    gap:20px !important;
  }

  body.home .portrait-wrap {
    width:min(70vw,230px) !important;
    max-width:230px !important;
    justify-self:start !important;
  }

  body.home .portrait {
    height:265px !important;
  }

  body.home .service-list {
    margin-top:4px !important;
  }

  /* Featured section starts cleanly without a dangling checker edge */
  body.home .featured {
    padding-top:30px !important;
  }
}


/* v72 — align mobile interior-page hero starts */
@media (max-width:700px){
  .about-hero,
  .work-hero,
  .contact-hero,
  .services-hero {
    padding-top:34px !important;
  }

  /* Remove page-specific spacing that was pushing some eyebrow labels lower */
  .about-hero > :first-child,
  .work-hero > :first-child,
  .contact-hero > :first-child,
  .services-hero > :first-child {
    margin-top:0 !important;
  }

  .about-hero .micro,
  .work-hero > .micro,
  .contact-hero .micro,
  .services-hero .micro {
    margin-top:0 !important;
  }
}


/* v73 — REAL mobile fixes
   The homepage body has no .home class, so previous .home selectors never matched. */
@media (max-width:700px){

  /* HOMEPAGE: remove both vertical checker rails for real */
  main#top > .hero > .checker-left,
  main#top > .about > .checker-right {
    display:none !important;
    width:0 !important;
    height:0 !important;
    background:none !important;
  }

  /* HOMEPAGE HERO: compact the layout */
  main#top > .hero {
    min-height:0 !important;
    height:auto !important;
    padding:30px 22px 28px !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "copy copy"
      "services sticker" !important;
    gap:18px 16px !important;
    align-items:end !important;
  }

  main#top > .hero > .hero-copy {
    grid-area:copy !important;
    margin:0 !important;
    padding:0 !important;
  }

  main#top > .hero .hero-copy h1 {
    margin:0 !important;
    font-size:clamp(54px,14vw,70px) !important;
    line-height:.84 !important;
  }

  main#top > .hero .hero-micro {
    margin:18px 0 0 !important;
    font-size:11px !important;
    line-height:1.45 !important;
  }

  main#top > .hero > .hero-side {
    display:contents !important;
  }

  main#top > .hero .service-stack {
    grid-area:services !important;
    margin:0 !important;
    font-size:10px !important;
    line-height:1.45 !important;
  }

  main#top > .hero .sticker {
    grid-area:sticker !important;
    justify-self:end !important;
    align-self:end !important;
    margin:0 !important;
    padding:13px 12px !important;
    min-width:96px !important;
    font-size:12px !important;
    line-height:.95 !important;
    transform:rotate(-3deg) !important;
  }

  /* HOMEPAGE WHAT I DO: remove rail and keep photo compact */
  main#top > .about {
    min-height:0 !important;
    padding:30px 22px 32px !important;
    gap:20px !important;
  }

  main#top > .about .portrait-wrap {
    width:min(68vw,225px) !important;
    max-width:225px !important;
    justify-self:start !important;
    padding:6px !important;
  }

  main#top > .about .portrait {
    height:260px !important;
  }

  main#top > .about .idea-note {
    display:none !important;
  }

  /* INTERIOR PAGE HEROES:
     same starting position, same top padding, no min-height pushing About lower */
  body.about-page .about-hero,
  body.services-page .services-hero,
  body.work-page .work-hero,
  body.contact-page .contact-hero {
    min-height:0 !important;
    height:auto !important;
    display:block !important;
    padding:34px 22px 38px !important;
    margin:0 !important;
  }

  body.about-page .about-hero > :first-child,
  body.services-page .services-hero > :first-child,
  body.work-page .work-hero > :first-child,
  body.contact-page .contact-hero > :first-child {
    margin-top:0 !important;
  }

  body.about-page .about-hero .micro,
  body.services-page .services-hero .micro,
  body.work-page .work-hero > .micro,
  body.contact-page .contact-hero .micro {
    margin:0 0 18px !important;
  }

  body.about-page .about-hero h1,
  body.services-page .services-hero h1,
  body.work-page .work-hero h1,
  body.contact-page .contact-hero h1 {
    margin-top:0 !important;
  }

  /* About intro was also adding visual height below the headline */
  body.about-page .about-hero .intro {
    margin-top:24px !important;
    margin-bottom:0 !important;
  }
}


/* v74 — mobile homepage hero: single-line headline + larger coral note */
@media (max-width:700px){

  /* Keep desktop line breaks, but flatten them on mobile */
  main#top > .hero .hero-copy h1 br {
    display:none !important;
  }

  main#top > .hero .hero-copy h1 {
    white-space:nowrap !important;
    font-size:clamp(29px,7.7vw,38px) !important;
    line-height:.92 !important;
    letter-spacing:-.025em !important;
    width:100% !important;
    max-width:none !important;
  }

  /* Give the lower hero row a little more room for the larger sticky note */
  main#top > .hero {
    grid-template-columns:minmax(0,1fr) 138px !important;
    column-gap:18px !important;
  }

  main#top > .hero .sticker {
    width:138px !important;
    min-width:138px !important;
    min-height:138px !important;
    padding:18px 16px !important;
    font-size:15px !important;
    line-height:.92 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:left !important;
    transform:rotate(-3deg) !important;
  }
}

/* v75 — mobile hero: two-line headline + one-line mono tagline */
@media (max-width:900px){
  main#top > .hero .hero-copy h1 br {
    display:block !important;
  }

  main#top > .hero .hero-copy h1 {
    white-space:normal !important;
    font-size:clamp(38px,8.7vw,66px) !important;
    line-height:.90 !important;
    letter-spacing:-.025em !important;
    max-width:none !important;
  }

  /* Keep “For RAD Brands.” together as the second line */
  main#top > .hero .hero-copy h1 br + * {
    white-space:nowrap;
  }

  main#top > .hero .hero-micro {
    margin:24px 0 0 0 !important;
    font-size:clamp(10px,2.35vw,13px) !important;
    line-height:1.15 !important;
    letter-spacing:.08em !important;
    white-space:nowrap !important;
  }

  main#top > .hero .hero-micro br {
    display:none !important;
  }

  main#top > .hero .hero-micro br::after {
    content:"  ";
  }
}


/* v76 — mobile homepage typography cleanup + consistent mono eyebrow size */
@media (max-width:700px){

  /* HOMEPAGE main tagline: use full width and stay two lines, larger */
  main#top > .hero {
    grid-template-columns: 1fr 150px !important;
  }

  main#top > .hero .hero-copy h1 {
    font-size: clamp(34px, 9.4vw, 46px) !important;
    line-height: .9 !important;
    letter-spacing: -.02em !important;
    white-space: normal !important;
    width: 100% !important;
  }

  /* Force the intended two-line structure */
  main#top > .hero .hero-copy h1 br {
    display: block !important;
  }

  /* Make first line span cleanly */
  main#top > .hero .hero-copy h1 {
    max-width: 100% !important;
  }

  /* Supporting tagline: add visual separators and keep on one line */
  main#top > .hero .hero-micro {
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Service list a little larger */
  main#top > .hero .service-stack {
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .08em !important;
  }

  /* Make interior-page mono eyebrow headers smaller so they fit one line */
  body.about-page .about-hero .micro,
  body.services-page .services-hero .micro,
  body.work-page .work-hero > .micro,
  body.contact-page .contact-hero .micro {
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: .11em !important;
    white-space: nowrap !important;
  }
}


/* v77 — remove the left checkerboard strip from the homepage hero */
body.home-page main#top > .hero::before,
body.home-page main#top > .hero .checker-left,
body.home-page main#top > .hero .checker-strip,
body.home-page main#top > .hero .hero-checker,
body.home-page .hero::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

/* Reclaim the space if the strip was contributing to hero inset */
body.home-page main#top > .hero {
  padding-left: clamp(56px, 5.8vw, 112px) !important;
}
@media (max-width:700px){
  body.home-page main#top > .hero {
    padding-left: 32px !important;
  }
}


/* v78 — mobile homepage hero headline: scale back up while preserving 2 lines */
@media (max-width:700px){
  main#top > .hero .hero-copy h1 {
    font-size: clamp(42px, 11.6vw, 58px) !important;
    line-height: .88 !important;
    letter-spacing: -.022em !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Keep the exact two-line break from the HTML */
  main#top > .hero .hero-copy h1 br {
    display: block !important;
  }
}


/* v79 — mobile hero consistency */
@media (max-width:700px){

  /* Homepage headline: return to a stronger 3-line composition */
  main#top > .hero .hero-copy h1 {
    font-size: clamp(50px, 13.4vw, 67px) !important;
    line-height: .86 !important;
    letter-spacing: -.025em !important;
    max-width: 100% !important;
  }

  /* Homepage mono copy below headline gets the same breathing room
     as the About page intro copy below "HI, I'M JESS." */
  main#top > .hero .hero-copy .hero-tagline,
  main#top > .hero .hero-copy .tagline,
  main#top > .hero .hero-copy .hero-kicker + h1 + *,
  .services-hero .hero-sub,
  .services-hero .hero-copy > p,
  .work-hero .hero-sub,
  .work-hero .hero-copy > p,
  .contact-hero .hero-sub,
  .contact-hero .hero-copy > p {
    margin-top: 42px !important;
  }
}

@media (max-width:700px){
  main#top > .hero .hero-copy h1 .hero-line {
    display:block !important;
    white-space:nowrap !important;
  }
}


/* v80 — mobile hierarchy refinements */
@media (max-width:700px){
  main#top > .hero .service-stack {
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: .07em !important;
  }

  body.work-page .work-hero h1 + p,
  body.work-page .work-hero h1 + .hero-sub,
  body.services-page .services-hero h1 + p,
  body.services-page .services-hero h1 + .hero-sub,
  body.contact-page .contact-hero h1 + p,
  body.contact-page .contact-hero h1 + .hero-sub {
    margin-top: 34px !important;
  }

  body.work-page .work-hero .hero-sub,
  body.services-page .services-hero .hero-sub,
  body.contact-page .contact-hero .hero-sub {
    margin-top: 34px !important;
  }
}


/* v81 — mobile polish: coral note, homepage headline tracking, mono spacing */
@media (max-width:700px){

  /* Homepage headline: open the letterspacing slightly so it doesn't feel cramped */
  main#top > .hero .hero-copy h1 {
    letter-spacing: -0.01em !important;
  }

  /* Coral sticky note: slightly smaller overall, much stronger internal type */
  main#top > .hero .sticker {
    width: 124px !important;
    min-width: 124px !important;
    min-height: 124px !important;
    padding: 14px !important;
    font-size: 16px !important;
    line-height: .92 !important;
  }

  /* Match the generous About-page spacing after big headers */
  body.work-page .work-hero h1 + p,
  body.work-page .work-hero h1 + .hero-sub,
  body.services-page .services-hero h1 + p,
  body.services-page .services-hero h1 + .hero-sub,
  body.contact-page .contact-hero h1 + p,
  body.contact-page .contact-hero h1 + .hero-sub {
    margin-top: 48px !important;
  }

  body.work-page .work-hero .hero-sub,
  body.services-page .services-hero .hero-sub,
  body.contact-page .contact-hero .hero-sub {
    margin-top: 48px !important;
  }
}


/* v82 — corrected mobile selectors (based on actual page markup) */
@media (max-width:700px){

  /* HOME: open up the condensed headline tracking */
  body.home-page main#top > .hero .hero-copy h1 {
    letter-spacing: 0.006em !important;
    word-spacing: 0.015em !important;
  }

  /* HOME: slightly smaller coral card, stronger lettering */
  body.home-page main#top > .hero .sticker {
    width: 116px !important;
    min-width: 116px !important;
    min-height: 116px !important;
    padding: 12px !important;
    font-size: 17px !important;
    line-height: .90 !important;
  }

  /*
   * Match the About-page breathing room after the large display headline.
   * These selectors match the REAL markup:
   * Work: h1 + p
   * Services: the paragraph is a direct child of .services-hero
   * Contact: copy is wrapped in .contact-hero-copy
   * About: .intro
   */
  body.about-page .about-hero .intro,
  body.work-page .work-hero > p,
  body.services-page .services-hero > p,
  body.contact-page .contact-hero > .contact-hero-copy {
    margin-top: 46px !important;
  }

  /* Make sure older rules cannot collapse these back upward */
  body.work-page .work-hero h1 + p,
  body.services-page .services-hero > div + p,
  body.contact-page .contact-hero > div + .contact-hero-copy {
    margin-top: 46px !important;
  }
}


/* v83 — compact mobile sections + horizontal checkerboard */
@media (max-width:700px){

  /* ABOUT: reduce the long vertical gaps without making the page feel cramped */
  body.about-page .about-experience {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  body.about-page .about-experience h2 {
    margin-bottom: 28px !important;
  }

  body.about-page .about-experience p {
    margin-bottom: 16px !important;
  }

  body.about-page .about-stats {
    margin-top: 34px !important;
  }

  body.about-page .about-stat {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body.about-page .about-close {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Tighten the space immediately before the lime CTA */
  body.about-page .about-experience + .about-close,
  body.about-page .about-stats + .about-close {
    margin-top: 0 !important;
  }

  /* ABOUT CTA: less oversized vertical padding on phones */
  body.about-page .about-cta,
  body.about-page .about-close {
    min-height: 0 !important;
  }

  /* SERVICES: remove the tall checkerboard block on mobile */
  body.services-page .services-checker,
  body.services-page .checker-band,
  body.services-page .checkerboard,
  body.services-page .checker-section {
    min-height: 0 !important;
    height: 74px !important;
    padding: 0 !important;
    background-image: url("assets/checkerboard-3-lines.webp") !important;
    background-repeat: repeat-x !important;
    background-position: center !important;
    background-size: auto 74px !important;
  }

  body.services-page .services-checker img,
  body.services-page .checker-band img,
  body.services-page .checkerboard img,
  body.services-page .checker-section img {
    width: 100% !important;
    height: 74px !important;
    object-fit: cover !important;
    object-position: center !important;
    content: url("assets/checkerboard-3-lines.webp") !important;
  }

  /* HOW I WORK: bring the content upward after the checker strip */
  body.services-page .services-process,
  body.services-page .how-i-work {
    padding-top: 38px !important;
    padding-bottom: 44px !important;
  }

  /* General mobile section rhythm on About/Services */
  body.about-page section,
  body.services-page section {
    scroll-margin-top: 0;
  }
}

@media (max-width:700px){
  body.services-page img.mobile-horizontal-checker {
    display:block !important;
    width:100% !important;
    height:74px !important;
    object-fit:cover !important;
    object-position:center !important;
    content:url("assets/checkerboard-3-lines.webp") !important;
  }
}


/* v84 — keep THE PROCESS tagline on one line on mobile */
@media (max-width:700px){
  body.services-page .process-tagline,
  body.services-page .services-process .mono,
  body.services-page .how-i-work .mono,
  body.services-page .services-process h2 + p,
  body.services-page .how-i-work h2 + p {
    white-space: nowrap !important;
    font-size: clamp(13px, 3.25vw, 18px) !important;
    letter-spacing: 0.08em !important;
    word-spacing: 0.08em !important;
  }
}


/* v85 — final mobile Services fixes */
@media (max-width:700px){

  /* Keep the checker treatment as a SHORT horizontal strip only */
  body.services-page .checker-panel,
  body.services-page .services-checker .checker-panel,
  body.services-page .checker-band,
  body.services-page .checkerboard {
    display:block !important;
    width:100% !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    margin:0 !important;
    padding:0 !important;
    background-image:url("assets/checkerboard-3-lines.webp") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:cover !important;
    overflow:hidden !important;
  }

  /* Do NOT collapse the parent section around the checker */
  body.services-page .services-checker,
  body.services-page .services-fit,
  body.services-page .services-process,
  body.services-page .how-i-work {
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* Pull the divider line upward by reducing dead space above it */
  body.services-page .services-fit p:last-of-type,
  body.services-page .services-fit .fit-copy:last-child {
    margin-bottom:18px !important;
  }

  body.services-page .services-fit hr,
  body.services-page .services-fit .rule,
  body.services-page .services-fit .divider {
    margin-top:18px !important;
    margin-bottom:24px !important;
  }

  /* Tighten the whole How I Work block */
  body.services-page .services-fit {
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  /* THE PROCESS tagline: force one line */
  body.services-page .process-tagline,
  body.services-page .services-process .mono,
  body.services-page .services-process .process-sub,
  body.services-page .services-process h2 + p,
  body.services-page .how-i-work .mono,
  body.services-page .how-i-work h2 + p {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    white-space:nowrap !important;
    font-size:11px !important;
    line-height:1.15 !important;
    letter-spacing:.06em !important;
    word-spacing:.04em !important;
    margin-top:14px !important;
  }

  /* Coral CTA: restore clean stacking and prevent overlapping text */
  body.services-page .services-cta,
  body.services-page .cta-section,
  body.services-page .contact-cta {
    position:relative !important;
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    padding:42px 28px !important;
    overflow:hidden !important;
  }

  body.services-page .services-cta > *,
  body.services-page .cta-section > *,
  body.services-page .contact-cta > * {
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:100% !important;
  }

  body.services-page .services-cta h2,
  body.services-page .cta-section h2,
  body.services-page .contact-cta h2 {
    margin:10px 0 22px !important;
    line-height:.9 !important;
  }

  body.services-page .services-cta p,
  body.services-page .cta-section p,
  body.services-page .contact-cta p {
    margin:0 0 24px !important;
  }

  body.services-page .services-cta .button,
  body.services-page .cta-section .button,
  body.services-page .contact-cta .button {
    margin-top:18px !important;
  }
}


/* v86 — mobile Services: ONE checker strip only */
@media (max-width:700px){

  /* Parent must be plain black. This removes the accidental second checker band. */
  body.services-page .services-checker {
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    background:#050505 !important;
    background-image:none !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* The ONLY checkerboard on this section */
  body.services-page .services-checker > .checker-panel {
    display:block !important;
    flex:0 0 72px !important;
    width:100% !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    margin:0 !important;
    padding:0 !important;
    background-color:#050505 !important;
    background-image:url("assets/checkerboard-3-lines.webp") !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;
    overflow:hidden !important;
  }

  /* How I Work content stays completely clean beneath it */
  body.services-page .services-checker > .services-fit {
    display:block !important;
    flex:none !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:34px 28px 38px !important;
    background:#111 !important;
    background-image:none !important;
    overflow:visible !important;
  }

  body.services-page .services-fit::before,
  body.services-page .services-fit::after {
    background-image:none !important;
  }
}


/* v87 — Work archive/category gallery */
.work-archive{background:#f7f5ef;color:#050505}
.work-archive-head{padding:86px 5vw 70px;max-width:1200px}
.work-archive-head h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(72px,9vw,145px);font-weight:900;line-height:.82;letter-spacing:-.02em;text-transform:uppercase;margin:22px 0 34px}
.work-archive-intro{max-width:670px;font-size:17px;line-height:1.55;font-weight:300;margin:0 0 38px}
.work-jump{display:flex;flex-wrap:wrap;gap:10px}
.work-jump a{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.07em;text-decoration:none;color:#050505;border:1px solid #050505;padding:10px 13px}
.work-jump a:hover{background:#050505;color:#f7f5ef}
.work-category{padding:70px 5vw 82px;border-top:1px solid rgba(5,5,5,.25)}
.work-category-dark{background:#111;color:#f7f5ef;border-top-color:#444}
.work-category-title{display:flex;align-items:flex-start;gap:24px;margin-bottom:44px}
.work-category-num{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-top:10px}
.work-category-title h3{font-family:'Barlow Condensed',sans-serif;font-size:clamp(62px,7vw,112px);font-weight:900;line-height:.82;letter-spacing:-.015em;text-transform:uppercase;margin:0}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.archive-placeholder{min-height:310px;background:#ebe9e1;border:1px solid rgba(5,5,5,.18);display:flex;align-items:center;justify-content:center;padding:20px}
.archive-placeholder span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-align:center}
.archive-wide{grid-column:span 2}
.archive-tall{grid-row:span 2;min-height:636px}
.archive-dark{background:#050505;color:#f7f5ef;border-color:#333}
.archive-coral{background:#ff525e;color:#050505}
.archive-lime{background:#C7DA2C;color:#050505}
.work-category-dark .archive-placeholder:not(.archive-coral):not(.archive-lime):not(.archive-dark){background:#f7f5ef;color:#050505}

@media(max-width:700px){
  .work-archive-head{padding:48px 22px 44px}
  .work-archive-head h2{font-size:64px;line-height:.84;margin:18px 0 26px}
  .work-archive-intro{font-size:14px;margin-bottom:28px}
  .work-jump{gap:7px}
  .work-jump a{font-size:9px;padding:8px 9px}
  .work-category{padding:42px 22px 48px}
  .work-category-title{gap:14px;margin-bottom:26px}
  .work-category-title h3{font-size:58px}
  .work-category-num{font-size:9px;margin-top:6px}
  .archive-grid{grid-template-columns:1fr 1fr;gap:9px}
  .archive-placeholder{min-height:170px;padding:12px}
  .archive-wide{grid-column:span 2}
  .archive-tall{grid-row:span 2;min-height:349px}
  .archive-placeholder span{font-size:8px}
}


/* v88 — finalized Work category controls + lighter one-line category headers */
.work-jump a{
  background:#C7DA2C !important;
  color:#050505 !important;
  border:0 !important;
  border-radius:0 !important;
  padding:12px 16px !important;
  transition:background .15s ease,color .15s ease !important;
}
.work-jump a:hover,
.work-jump a:focus,
.work-jump a:active{
  background:#050505 !important;
  color:#C7DA2C !important;
  outline:none !important;
}

.work-category-title{
  align-items:center !important;
  gap:18px !important;
  margin-bottom:36px !important;
}
.work-category-title h3{
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;
  font-size:clamp(48px,5.2vw,84px) !important;
  line-height:.9 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  margin:0 !important;
}
.work-category-num{
  margin-top:0 !important;
  flex:0 0 auto !important;
}

/* Square-first gallery */
.archive-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
}
.archive-placeholder,
.archive-wide,
.archive-tall{
  grid-column:auto !important;
  grid-row:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  width:100% !important;
}
.work-category{
  padding-top:56px !important;
  padding-bottom:66px !important;
}

@media(max-width:700px){
  .work-jump{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .work-jump a{
    text-align:center !important;
    padding:10px 8px !important;
    font-size:8.5px !important;
  }

  .work-category-title{
    gap:10px !important;
    margin-bottom:22px !important;
  }
  .work-category-title h3{
    font-size:38px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }
  .work-category-num{
    font-size:8px !important;
  }

  .archive-grid{
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }
  .archive-placeholder,
  .archive-wide,
  .archive-tall{
    aspect-ratio:1 / 1 !important;
    min-height:0 !important;
  }
}


/* v89 — mobile mono labels stay on one line + even six-tile galleries */
@media(max-width:700px){
  /* Short mono eyebrow/tagline/service strings only — body copy remains free to wrap */
  .eyebrow,
  .hero-kicker,
  .work-hero-kicker,
  .work-hero-tags,
  .section-kicker,
  .process-kicker,
  .process-subtitle,
  .contact-kicker,
  .about-kicker,
  .service-kicker,
  .archive-label,
  .work-category-kicker{
    white-space:nowrap !important;
    overflow:visible !important;
    max-width:none !important;
    letter-spacing:.12em !important;
    font-size:clamp(8px,2.25vw,11px) !important;
  }

  .archive-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* v90 — textured Work category sections */
.work-category-dark{
  background-color:#0b0b0b !important;
  background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp') !important;
  background-size:920px auto,760px auto !important;
  background-position:center top,center center !important;
  background-repeat:repeat,repeat !important;
  background-blend-mode:screen,soft-light !important;
}


/* v93 — Work category intro: black textured field */
.work-more{
  background-color:#0b0b0b !important;
  background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp') !important;
  background-size:920px auto,760px auto !important;
  background-position:center top,center center !important;
  background-repeat:repeat,repeat !important;
  background-blend-mode:screen,soft-light !important;
  color:#f4f1ea !important;
}

.work-more .eyebrow,
.work-more .work-more-title,
.work-more .work-more-copy{
  color:#f4f1ea !important;
}

.work-more .category-nav a{
  background:#C7DA2C !important;
  color:#090909 !important;
  border:none !important;
}

.work-more .category-nav a:hover,
.work-more .category-nav a:focus,
.work-more .category-nav a.active{
  background:#090909 !important;
  color:#C7DA2C !important;
  box-shadow:inset 0 0 0 1px #C7DA2C !important;
}


/* v94 — ACTUAL More Work intro section treatment */
.work-archive-head{
  max-width:none !important;
  background-color:#0b0b0b !important;
  background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp') !important;
  background-size:920px auto,760px auto !important;
  background-position:center top,center center !important;
  background-repeat:repeat,repeat !important;
  background-blend-mode:screen,soft-light !important;
  color:#f4f1ea !important;
}

.work-archive-head .micro,
.work-archive-head h2,
.work-archive-head .work-archive-intro{
  color:#f4f1ea !important;
}

.work-archive-head .work-jump a{
  background:#C7DA2C !important;
  color:#090909 !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-archive-head .work-jump a:hover,
.work-archive-head .work-jump a:focus,
.work-archive-head .work-jump a:active{
  background:#090909 !important;
  color:#C7DA2C !important;
  box-shadow:inset 0 0 0 1px #C7DA2C !important;
}


/* v95 — homepage corrections from final review */

/* Give the desktop hero headline a real word space between DESIGNS and FOR. */
body.home-page main#top > .hero .hero-copy h1 .hero-line:first-child{
  margin-right:.12em;
}

/* Featured Work: three primary projects only. */
body.home-page .featured .project-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Tablet / iPad: rebuild What I Do into a clean two-column layout.
   Remove the note/checker rail before they can collide with the portrait or copy. */
@media (max-width:1100px){
  body.home-page main#top > .about{
    min-height:0 !important;
    padding:44px 5vw 46px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(260px,340px) !important;
    grid-template-areas:
      "copy portrait"
      "services services" !important;
    gap:34px 42px !important;
    align-items:start !important;
    overflow:hidden !important;
  }

  body.home-page main#top > .about .about-copy{
    grid-area:copy !important;
    align-self:start !important;
    min-width:0 !important;
  }

  body.home-page main#top > .about .portrait-wrap{
    grid-area:portrait !important;
    width:100% !important;
    max-width:320px !important;
    justify-self:end !important;
    margin:0 !important;
  }

  body.home-page main#top > .about .portrait{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4/5 !important;
    object-fit:cover !important;
    object-position:center 25% !important;
  }

  body.home-page main#top > .about .idea-note,
  body.home-page main#top > .about .checker-right,
  body.home-page main#top > .about > .checker{
    display:none !important;
  }

  body.home-page main#top > .about .service-list{
    grid-area:services !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    column-gap:30px !important;
    margin:0 !important;
    width:100% !important;
  }

  body.home-page main#top > .about .about-copy p{
    max-width:520px !important;
  }
}

/* Phone: stack What I Do cleanly and stack Featured Work vertically. */
@media (max-width:700px){
  body.home-page main#top > .hero .hero-copy h1 .hero-line:first-child{
    margin-right:0 !important;
  }

  body.home-page main#top > .about{
    padding:30px 22px 34px !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "copy"
      "portrait"
      "services" !important;
    gap:24px !important;
  }

  body.home-page main#top > .about .portrait-wrap{
    width:min(78vw,280px) !important;
    max-width:280px !important;
    justify-self:start !important;
    padding:7px !important;
  }

  body.home-page main#top > .about .portrait{
    height:auto !important;
    aspect-ratio:4/5 !important;
  }

  body.home-page main#top > .about .service-list{
    grid-template-columns:1fr 1fr !important;
    gap:0 28px !important;
    width:100% !important;
  }

  body.home-page .featured{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  body.home-page .featured .featured-title{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
  }

  body.home-page .featured .project-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  body.home-page .featured .project{
    min-height:150px !important;
  }
}

/* Tablet featured tiles: keep the three evenly across. */
@media (min-width:701px) and (max-width:1100px){
  body.home-page .featured{
    grid-template-columns:170px 1fr !important;
    gap:24px !important;
  }
  body.home-page .featured .project-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* v96 — final homepage/about refinements */

/* Desktop homepage: pull the service list away from the checker rail. */
@media (min-width:1101px){
  body.home-page main#top > .about .service-list{
    transform:translateX(-34px) !important;
    padding-right:18px !important;
  }
}

/* Keep tablet list comfortably clear of the edge/checker treatment. */
@media (min-width:701px) and (max-width:1100px){
  body.home-page main#top > .about .service-list{
    padding-right:22px !important;
  }
}

/* Mobile process: center the Kansas City shuttlecock card instead of pushing it right. */
@media (max-width:700px){
  body.home-page .process-grid .kc-card{
    grid-column:auto !important;
    width:min(76vw,320px) !important;
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.home-page .process-grid .kc-card img{
    width:100% !important;
    height:auto !important;
    display:block !important;
    margin:0 auto !important;
  }

  body.home-page .process-grid .kc-card figcaption{
    text-align:left !important;
  }
}

/* v99 — Work page mobile project imagery: restore substantial image area */
@media (max-width:700px){
  .work-page .work-visual{
    width:100% !important;
    padding:18px !important;
    box-sizing:border-box !important;
  }
  .work-page .work-placeholder{
    display:block !important;
    width:100% !important;
    height:62vw !important;
    min-height:240px !important;
    max-height:430px !important;
    aspect-ratio:auto !important;
    box-sizing:border-box !important;
  }
}

/* v101 — Word on the Street quote refinement */
.quote-wrap blockquote {
  font-size: 23px !important;
  line-height: 1.28 !important;
  font-weight: 500 !important;
  max-width: 760px;
}

@media (max-width: 600px) {
  .quote-wrap blockquote {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
  }
}

/* v102 — Sauced & Tossed case study */
.case-page{background:#0a0a0a;color:#f7f5ef}.case-page main{overflow:hidden}
.case-hero{min-height:720px;background:#0a0a0a;display:grid;grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);align-items:stretch}
.case-hero-copy{padding:7vw 4vw 6vw 5vw;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.case-hero h1,.case-section h2,.case-close h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:900;letter-spacing:-.01em}
.case-hero h1{font-size:clamp(84px,8vw,150px);line-height:.76;margin:26px 0 28px}.case-hero h1 span{color:#28a8ae}
.case-tags{margin-bottom:24px}.case-intro{font-size:20px;line-height:1.5;max-width:520px;margin:0}
.case-hero-art{min-height:720px;background:#181818;display:flex;align-items:center;justify-content:center;overflow:hidden}
.case-hero-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.case-section{padding:90px 5vw}.case-section-head{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(280px,.65fr);column-gap:9vw;align-items:end;margin-bottom:55px}.case-section-head .micro{grid-column:1/-1;margin-bottom:18px}.case-section-head h2{font-size:clamp(70px,7.5vw,132px);line-height:.79;margin:0}.case-section-head>p:last-child{font-size:18px;line-height:1.6;max-width:560px;margin:0 0 8px}
.case-brand{background:#f4f1e9;color:#0a0a0a}.brand-pair{display:grid;grid-template-columns:1fr 1.25fr;gap:22px}.brand-pair figure,.poster-grid figure{margin:0;overflow:hidden}.brand-pair img{width:100%;height:100%;display:block;object-fit:cover}.brand-logo-panel{background:#278f98;aspect-ratio:1/1}.brand-pattern-panel{background:white;aspect-ratio:1.25/1}
.case-events{background:#101010;color:#f7f5ef;background-image:url('assets/texture-shabby-hires.webp');background-size:cover;background-blend-mode:soft-light}.light-head h2{color:#f7f5ef}.poster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}.poster-grid figure{background:#111}.poster-grid img{width:100%;display:block;height:auto}
.case-collateral{background:#efede5;color:#0a0a0a}.card-stage{position:relative;min-height:620px;background:#278f98;overflow:hidden;padding:7vw;display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}.card-pattern{position:absolute;inset:0;background-image:url('assets/sauced/pattern.webp');background-size:700px auto;background-repeat:repeat;opacity:.08;mix-blend-mode:multiply}.business-card{position:relative;z-index:1;margin:0;filter:drop-shadow(0 18px 22px rgba(0,0,0,.25))}.business-card.front{transform:rotate(-3deg) translateY(-18px)}.business-card.back{transform:rotate(3deg) translateY(18px)}.business-card img{width:100%;height:auto;display:block}
.case-close{background:#ff525e;color:#0a0a0a;padding:80px 5vw;display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end}.case-close h2{font-size:clamp(78px,9vw,150px);line-height:.8;margin:18px 0 0}.case-next{border-color:#0a0a0a!important;background:#0a0a0a!important;color:#f7f5ef!important;white-space:nowrap}.case-next:hover{color:#C7DA2C!important}
.work-page .visual-sauced .work-placeholder{background-image:url('assets/sauced/shirt-mockup.webp');background-size:cover;background-position:center}.work-page .visual-sauced .work-placeholder:before{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12))}
@media(max-width:900px){.case-hero{grid-template-columns:1fr;min-height:0}.case-hero-copy{padding:70px 7vw 55px}.case-hero-art{min-height:0;aspect-ratio:16/10}.case-section{padding:65px 7vw}.case-section-head{grid-template-columns:1fr;gap:22px;margin-bottom:40px}.case-section-head .micro{margin-bottom:0}.brand-pair{grid-template-columns:1fr}.brand-logo-panel,.brand-pattern-panel{aspect-ratio:4/3}.poster-grid{gap:15px}.card-stage{min-height:0;padding:10vw 6vw;grid-template-columns:1fr;gap:25px}.business-card.front,.business-card.back{transform:none}.case-close{grid-template-columns:1fr;align-items:start}}
@media(max-width:600px){.case-hero-copy{padding:48px 22px 42px}.case-hero h1{font-size:76px;line-height:.78;margin:18px 0 22px}.case-intro{font-size:17px}.case-hero-art{aspect-ratio:4/3}.case-section{padding:48px 22px}.case-section-head h2{font-size:62px}.case-section-head>p:last-child{font-size:16px}.brand-logo-panel,.brand-pattern-panel{aspect-ratio:1/1}.poster-grid{grid-template-columns:1fr;gap:14px}.card-stage{padding:42px 18px}.case-close{padding:58px 22px}.case-close h2{font-size:72px}.case-next{width:100%;justify-content:space-between}}


/* v103 — Sauced & Tossed project page refinements */
.sauced-case .case-hero h1,
.sauced-case .case-section h2,
.sauced-case .case-close h2{
  font-weight:700 !important;
  letter-spacing:.01em !important;
}

/* Keep the project intro section black + white only. */
.sauced-case .case-hero h1 span{
  color:#f7f5ef !important;
}

/* Make the project page feel tighter and less oversized. */
.sauced-case .case-hero{
  min-height:560px !important;
  grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr) !important;
}
.sauced-case .case-hero-copy{
  padding:5vw 4vw 5vw 5vw !important;
}
.sauced-case .case-hero h1{
  font-size:clamp(70px,6.7vw,118px) !important;
  line-height:.82 !important;
  margin:22px 0 24px !important;
}
.sauced-case .case-hero-art{
  min-height:560px !important;
  padding:34px !important;
}
.sauced-case .case-hero-art img{
  width:92% !important;
  height:auto !important;
  max-height:510px !important;
  object-fit:contain !important;
}

.sauced-case .case-section{
  padding:62px 5vw !important;
}
.sauced-case .case-section-head{
  max-width:1280px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:34px !important;
  column-gap:6vw !important;
}
.sauced-case .case-section-head h2{
  font-size:clamp(52px,5.2vw,92px) !important;
  line-height:.88 !important;
}
.sauced-case .case-section-head>p:last-child{
  font-size:17px !important;
  line-height:1.55 !important;
  max-width:520px !important;
}

.sauced-case .brand-pair,
.sauced-case .poster-grid,
.sauced-case .card-stage{
  max-width:1280px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.sauced-case .brand-pair{
  gap:16px !important;
  grid-template-columns:.88fr 1.12fr !important;
}
.sauced-case .poster-grid{
  gap:16px !important;
}
.sauced-case .poster-grid figure{
  max-width:620px !important;
  justify-self:center !important;
  width:100% !important;
}

/* Business card area: remove teal pattern and bring it back into Studio42's black/cream world. */
.sauced-case .card-stage{
  min-height:480px !important;
  background:#111 !important;
  background-image:
    linear-gradient(rgba(17,17,17,.90),rgba(17,17,17,.90)),
    url('assets/texture-scratch.webp') !important;
  background-size:auto,700px auto !important;
  background-position:center !important;
  padding:5vw !important;
  gap:3vw !important;
}
.sauced-case .card-pattern{
  display:none !important;
}
.sauced-case .business-card{
  max-width:520px !important;
  justify-self:center !important;
}

.sauced-case .case-close{
  padding:60px 5vw !important;
}
.sauced-case .case-close h2{
  font-size:clamp(68px,7vw,118px) !important;
}

/* Tablet */
@media(max-width:900px){
  .sauced-case .case-hero-copy{
    padding:58px 7vw 42px !important;
  }
  .sauced-case .case-hero-art{
    padding:24px 7vw 38px !important;
    aspect-ratio:auto !important;
  }
  .sauced-case .case-hero-art img{
    width:min(88%,760px) !important;
    max-height:none !important;
  }
  .sauced-case .case-section{
    padding:50px 7vw !important;
  }
  .sauced-case .case-section-head{
    margin-bottom:30px !important;
  }
  .sauced-case .brand-pair{
    gap:14px !important;
  }
  .sauced-case .card-stage{
    padding:44px 7vw !important;
  }
}

/* Mobile */
@media(max-width:600px){
  .sauced-case .case-hero-copy{
    padding:42px 22px 32px !important;
  }
  .sauced-case .case-hero h1{
    font-size:66px !important;
    line-height:.82 !important;
  }
  .sauced-case .case-hero-art{
    padding:16px 22px 30px !important;
  }
  .sauced-case .case-hero-art img{
    width:100% !important;
  }
  .sauced-case .case-section{
    padding:42px 22px !important;
  }
  .sauced-case .case-section-head h2{
    font-size:52px !important;
  }
  .sauced-case .brand-logo-panel,
  .sauced-case .brand-pattern-panel{
    aspect-ratio:4/3 !important;
  }
  .sauced-case .poster-grid{
    gap:12px !important;
  }
  .sauced-case .card-stage{
    padding:30px 18px !important;
    gap:18px !important;
  }
  .sauced-case .business-card{
    max-width:100% !important;
  }
  .sauced-case .case-close{
    padding:50px 22px !important;
  }
  .sauced-case .case-close h2{
    font-size:64px !important;
  }
}


/* v104 — coral, project CTA buttons, and header tracking */
:root{
  --coral:#ff525e;
  --lime:#C7DA2C;
}

/* Force the correct Studio42 coral everywhere the coral utility/background is used. */
.bg-coral,
.coral,
.work-cta,
.case-next,
.testimonials,
.testimonial-section{
  background-color:var(--coral) !important;
}

/* Project entry CTAs: make them clearly clickable. */
.work-card .view-project,
.project-row .view-project,
a.view-project,
.case-link,
.project-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:18px !important;
  background:var(--coral) !important;
  color:#000 !important;
  padding:14px 20px !important;
  text-decoration:none !important;
  line-height:1 !important;
  transition:background-color .18s ease,color .18s ease,transform .18s ease !important;
}

.work-card .view-project:hover,
.project-row .view-project:hover,
a.view-project:hover,
.case-link:hover,
.project-link:hover{
  background:#000 !important;
  color:var(--coral) !important;
  transform:translateY(-1px);
}

/* Keep CTA arrows inheriting the button text color. */
.work-card .view-project *,
.project-row .view-project *,
a.view-project *,
.case-link *,
.project-link *{
  color:inherit !important;
}

/* Open up the large display headers slightly so the letters do not crowd each other. */
.hero h1,
.page-hero h1,
.work-hero h1,
.about-hero h1,
.services-hero h1,
.contact-hero h1,
.case-hero h1,
.case-section h2,
.case-close h2,
.featured h2,
.more-work h2,
.work-section h2,
.display,
.display-heading{
  letter-spacing:.018em !important;
}

/* Slightly more tracking on very large mobile display text too. */
@media(max-width:700px){
  .hero h1,
  .page-hero h1,
  .work-hero h1,
  .about-hero h1,
  .services-hero h1,
  .contact-hero h1,
  .case-hero h1,
  .case-section h2,
  .case-close h2,
  .featured h2,
  .more-work h2,
  .work-section h2,
  .display,
  .display-heading{
    letter-spacing:.022em !important;
  }
}


/* v105 — canonical Studio42 coral
   Sampled from WORD ON THE STREET: RGB 255 82 94 / #FF525E */
:root{
  --coral:#ff525e !important;
}

/* Coral surfaces */
.bg-coral,
.coral,
.archive-coral,
.work-cta,
.case-close,
.services-cta,
.contact-bottom,
.testimonials,
.testimonial-section{
  background-color:var(--coral) !important;
}

/* Coral project/action buttons */
.work-card .view-project,
.project-row .view-project,
a.view-project,
.case-link,
.project-link{
  background-color:var(--coral) !important;
}


/* v106 — lock Studio42 coral + make project links unmistakable */

/* Contact bottom CTA must use the SAME solid coral as WORD ON THE STREET.
   Remove the old red/texture treatment that was still showing through. */
.contact-bottom{
  background:#ff525e !important;
  background-color:#ff525e !important;
  background-image:none !important;
  background-blend-mode:normal !important;
}

/* VIEW PROJECT buttons on the main work page */
.work-project .work-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:34px !important;
  width:max-content !important;
  margin-top:8px !important;
  padding:14px 18px !important;
  background:#C7DA2C !important;
  color:#050505 !important;
  border:0 !important;
  text-decoration:none !important;
  line-height:1 !important;
}

.work-project .work-link span{
  color:#050505 !important;
}

.work-project .work-link:hover{
  background:#050505 !important;
  color:#C7DA2C !important;
}

.work-project .work-link:hover span{
  color:#C7DA2C !important;
}

@media(max-width:700px){
  .work-project .work-link{
    padding:13px 16px !important;
    gap:28px !important;
  }
}


/* v107 — unify all bottom CTA typography */
.cta h2,
.about-close h2,
.services-cta h2,
.work-cta h2,
.contact-bottom h2,
.case-close h2,
.sauced-case .case-close h2{
  font-family:"Barlow Condensed","Arial Narrow",sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.018em !important;
  line-height:.88 !important;
  font-size:clamp(54px,6.2vw,104px) !important;
  margin-top:14px !important;
}

/* Keep spans from changing the typography weight inside these CTA headlines. */
.cta h2 span,
.about-close h2 span,
.services-cta h2 span,
.work-cta h2 span,
.contact-bottom h2 span,
.case-close h2 span,
.sauced-case .case-close h2 span{
  font:inherit !important;
  letter-spacing:inherit !important;
}

/* Slightly tighten the vertical footprint so these closers don't overpower the page. */
.about-close,
.services-cta,
.work-cta,
.contact-bottom,
.case-close{
  padding-top:58px !important;
  padding-bottom:58px !important;
}

@media(max-width:700px){
  .cta h2,
  .about-close h2,
  .services-cta h2,
  .work-cta h2,
  .contact-bottom h2,
  .case-close h2,
  .sauced-case .case-close h2{
    font-size:clamp(48px,14vw,68px) !important;
    line-height:.9 !important;
    letter-spacing:.02em !important;
  }

  .about-close,
  .services-cta,
  .work-cta,
  .contact-bottom,
  .case-close{
    padding-top:44px !important;
    padding-bottom:44px !important;
  }
}

/* v108 — real artwork test in Branding; existing six-tile layout stays intact */
.work-category img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.branding-real-preview{padding:0 5vw 70px;background:#f5f1e8}
.branding-real-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.branding-real-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
@media(max-width:800px){.branding-real-grid{grid-template-columns:repeat(2,1fr)}}


/* v109 — Sauced & Tossed case study: equal brand panels + realistic card mockup */
.sauced-case .brand-pair{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:stretch !important;
}
.sauced-case .brand-logo-panel,
.sauced-case .brand-pattern-panel{
  aspect-ratio:1/1 !important;
  min-width:0 !important;
}
.sauced-case .brand-logo-panel img,
.sauced-case .brand-pattern-panel img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.sauced-case .card-mockup-stage{
  display:block !important;
  min-height:0 !important;
  padding:0 !important;
  background:#111 !important;
  overflow:hidden !important;
}
.sauced-case .business-card-mockup{
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
}
.sauced-case .business-card-mockup img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}
@media(max-width:900px){
  .sauced-case .brand-pair{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:600px){
  .sauced-case .brand-pair{grid-template-columns:1fr !important;}
  .sauced-case .brand-logo-panel,
  .sauced-case .brand-pattern-panel{aspect-ratio:1/1 !important;}
}

/* v110 — Mossback becomes featured project No. 01 */
.work-feature-image{width:100%;height:100%;min-height:520px;object-fit:cover;display:block;}
.visual-mossback{background:#050505;}
.visual-mossback .work-feature-image{object-position:center 48%;}
@media(max-width:900px){.work-feature-image{min-height:390px;}}

/* v111 — tighter featured Work crops + Mossback case study */
.work-page .work-project{min-height:0;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr)}
.work-page .work-project.reverse{grid-template-columns:minmax(330px,.75fr) minmax(0,1.25fr)}
.work-page .work-visual{min-height:0;height:clamp(430px,48vw,610px);padding:3vw;overflow:hidden}
.work-page .work-feature-image{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.work-page .visual-mossback .work-feature-image{object-position:center 55%}
.work-page .visual-flair .work-feature-image{object-position:center 43%;background:#111}
.work-page .visual-sauced .work-feature-image{object-position:center center}
.work-page .work-copy{padding:clamp(46px,5vw,86px)}
@media(max-width:900px){.work-page .work-project,.work-page .work-project.reverse{grid-template-columns:1fr}.work-page .work-visual{height:62vw;min-height:330px;padding:24px}.work-page .work-feature-image{min-height:0}}

.mossback-case{background:#f5f1e8;color:#050505}.mossback-case .topbar{background:#050505;color:#f7f5ef}
.moss-hero{display:grid;grid-template-columns:.72fr 1.28fr;min-height:720px;background:#050505;color:#f7f5ef}.moss-hero-copy{padding:8vw 5vw 6vw;align-self:end}.moss-hero-copy h1,.moss-intro h2,.moss-raakh h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;line-height:.82;margin:18px 0 26px}.moss-hero-copy h1{font-size:clamp(76px,8vw,145px)}.moss-hero-copy p,.moss-intro p,.moss-raakh p{font-size:18px;line-height:1.55;max-width:560px}.moss-hero-image{overflow:hidden;min-height:720px}.moss-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 56%;display:block}
.moss-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;padding:8vw 5vw;align-items:end}.moss-intro h2{font-size:clamp(70px,7vw,124px)}
.moss-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 5vw 8vw}.moss-pair figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:#e8e1d4}.moss-pair img{width:100%;height:100%;object-fit:cover;display:block}
.moss-raakh{display:grid;grid-template-columns:.68fr 1.32fr;background:#050505;color:#f7f5ef}.moss-raakh-copy{padding:7vw 5vw;align-self:center}.moss-raakh h2{font-size:clamp(70px,7vw,124px)}.moss-raakh-image{height:680px;overflow:hidden}.moss-raakh-image img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block}.mossback-case .case-close{background:#C7DA2C;color:#050505;display:flex;justify-content:space-between;align-items:end;padding:6vw 5vw}.mossback-case .case-close h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(70px,7vw,120px);line-height:.82;margin:18px 0 0}
@media(max-width:800px){.moss-hero,.moss-intro,.moss-raakh{grid-template-columns:1fr}.moss-hero{min-height:0}.moss-hero-copy{padding:90px 6vw 50px}.moss-hero-image{min-height:0;height:72vw}.moss-intro{padding:70px 6vw;gap:20px}.moss-pair{padding:0 6vw 70px;gap:10px}.moss-raakh-image{height:75vw}.mossback-case .case-close{padding:60px 6vw;align-items:flex-start;gap:35px;flex-direction:column}}

/* Mossback case study v112 */
.mossback-case{background:#f4f0e7;color:#080808}.mossback-case .topbar{background:#050505;color:#f7f5ef}
.mossback-case .moss-hero{grid-template-columns:.78fr 1.22fr;min-height:680px}.mossback-case .moss-hero-image{min-height:680px}.mossback-case .moss-hero-image img{object-position:center center}
.moss-brand-head{display:grid;grid-template-columns:.34fr 1.1fr .75fr;gap:4vw;padding:7vw 5vw;align-items:end}.moss-brand-head h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:clamp(78px,8.3vw,150px);line-height:.78;margin:0}.moss-brand-head p{font-size:17px;line-height:1.6;margin:0;max-width:520px}.moss-dark{background:#050505;color:#f7f5ef}.moss-light{background:#f4f0e7;color:#080808}
.moss-wide-image{width:100%;background:#050505;overflow:hidden}.moss-wide-image img{display:block;width:100%;height:auto}.mossy-lead{padding:0 5vw 6vw;background:#f4f0e7}.mossy-lead img{width:100%}
.moss-detail-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px;padding:0 5vw 18px;background:#f4f0e7}.moss-detail-grid figure{margin:0;overflow:hidden;background:#17120d;height:620px}.moss-detail-grid img{width:100%;height:100%;display:block;object-fit:cover}.moss-detail-tall img{object-position:center center}.mossy-back{padding:0 5vw 7vw;background:#f4f0e7}.mossy-back img{width:100%}
@media(max-width:800px){.moss-brand-head{grid-template-columns:1fr;padding:65px 6vw;gap:18px}.moss-brand-head h2{font-size:clamp(64px,20vw,100px)}.moss-detail-grid{grid-template-columns:1fr;padding:0 6vw 10px;gap:10px}.moss-detail-grid figure{height:auto;aspect-ratio:1.35/1}.mossy-lead,.mossy-back{padding-left:6vw;padding-right:6vw}.mossback-case .moss-hero{grid-template-columns:1fr;min-height:0}.mossback-case .moss-hero-image{min-height:0;height:auto}.mossback-case .moss-hero-image img{height:auto;object-fit:contain}}

/* v113 — Mossback refinements: match the tighter Sauced & Tossed case-study rhythm */
.mossback-case .moss-hero{
  min-height:560px !important;
  grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr) !important;
}
.mossback-case .moss-hero-copy{
  padding:5vw 4vw 5vw 5vw !important;
}
.mossback-case .moss-hero-copy h1{
  font-size:clamp(70px,6.7vw,118px) !important;
  line-height:.82 !important;
  margin:22px 0 24px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}
.mossback-case .moss-hero-image{
  min-height:560px !important;
  padding:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#111 !important;
}
.mossback-case .moss-hero-image img{
  width:92% !important;
  height:auto !important;
  max-height:510px !important;
  object-fit:contain !important;
}
.mossback-case .moss-intro{
  max-width:1380px !important;
  margin:0 auto !important;
  padding:62px 5vw !important;
  gap:6vw !important;
}
.mossback-case .moss-intro h2{
  font-size:clamp(52px,5.2vw,92px) !important;
  line-height:.88 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}
.mossback-case .moss-intro p{
  font-size:17px !important;
  line-height:1.55 !important;
  max-width:520px !important;
}
.mossback-case .moss-brand-head{
  grid-template-columns:minmax(280px,.75fr) minmax(280px,.65fr) !important;
  column-gap:6vw !important;
  row-gap:0 !important;
  padding:62px 5vw !important;
  align-items:end !important;
}
.mossback-case .moss-brand-head .micro{
  grid-column:1/-1 !important;
  margin-bottom:18px !important;
}
.mossback-case .moss-brand-head h2{
  font-size:clamp(52px,5.2vw,92px) !important;
  line-height:.88 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}
.mossback-case .moss-brand-head p{
  font-size:17px !important;
  line-height:1.55 !important;
  max-width:520px !important;
  margin:0 0 8px !important;
}
.mossback-case .moss-wide-image,
.mossback-case .moss-detail-grid{
  max-width:1280px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.mossback-case .moss-wide-image{
  width:auto !important;
}
.mossback-case .moss-wide-image:not(.mossy-lead):not(.mossy-back){
  margin-top:0 !important;
  margin-bottom:62px !important;
  background:#050505 !important;
}
.mossback-case .moss-wide-image:not(.mossy-lead):not(.mossy-back) img{
  width:100% !important;
}
.mossback-case .mossy-lead,
.mossback-case .mossy-back{
  padding:0 !important;
  background:#f4f0e7 !important;
}
.mossback-case .mossy-lead{margin-bottom:16px !important;}
.mossback-case .moss-detail-grid{
  padding:0 !important;
  gap:16px !important;
  background:#f4f0e7 !important;
}
.mossback-case .moss-detail-grid figure{
  height:500px !important;
}
.mossback-case .mossy-back{
  margin-top:16px !important;
  margin-bottom:62px !important;
}

@media(max-width:900px){
  .mossback-case .moss-hero{grid-template-columns:1fr !important;min-height:0 !important;}
  .mossback-case .moss-hero-copy{padding:58px 7vw 42px !important;}
  .mossback-case .moss-hero-image{min-height:0 !important;padding:24px 7vw 38px !important;}
  .mossback-case .moss-hero-image img{width:min(88%,760px) !important;max-height:none !important;}
  .mossback-case .moss-intro{grid-template-columns:1fr !important;padding:50px 7vw !important;gap:22px !important;}
  .mossback-case .moss-brand-head{grid-template-columns:1fr !important;padding:50px 7vw !important;gap:22px !important;}
  .mossback-case .moss-brand-head .micro{margin-bottom:0 !important;}
  .mossback-case .moss-wide-image,.mossback-case .moss-detail-grid{max-width:86% !important;}
  .mossback-case .moss-detail-grid{grid-template-columns:1fr !important;}
  .mossback-case .moss-detail-grid figure{height:auto !important;aspect-ratio:1.35/1 !important;}
}
@media(max-width:600px){
  .mossback-case .moss-hero-copy{padding:42px 22px 32px !important;}
  .mossback-case .moss-hero-copy h1{font-size:66px !important;}
  .mossback-case .moss-hero-image{padding:16px 22px 30px !important;}
  .mossback-case .moss-hero-image img{width:100% !important;}
  .mossback-case .moss-intro,.mossback-case .moss-brand-head{padding:42px 22px !important;}
  .mossback-case .moss-intro h2,.mossback-case .moss-brand-head h2{font-size:52px !important;}
  .mossback-case .moss-wide-image,.mossback-case .moss-detail-grid{max-width:calc(100% - 44px) !important;}
}

/* v114 — Mossback compact case-study pass */
/* Restore normal Studio42 header so the black logo stays visible. */
.mossback-case .topbar{
  background:var(--cream) !important;
  color:var(--black) !important;
}

/* Hero: remove framed/boxed image treatment and shorten the opening screen. */
.mossback-case .moss-hero{
  min-height:480px !important;
  grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr) !important;
}
.mossback-case .moss-hero-copy{
  padding:46px 4vw 46px 5vw !important;
}
.mossback-case .moss-hero-copy h1{
  font-size:clamp(64px,5.7vw,100px) !important;
  margin:18px 0 20px !important;
}
.mossback-case .moss-hero-copy p{
  font-size:16px !important;
  line-height:1.5 !important;
}
.mossback-case .moss-hero-image{
  min-height:480px !important;
  padding:0 !important;
  background:#050505 !important;
  display:block !important;
}
.mossback-case .moss-hero-image img{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Compress text sections to the same quick rhythm as Sauced & Tossed. */
.mossback-case .moss-intro{
  max-width:1120px !important;
  padding:44px 5vw !important;
  gap:5vw !important;
}
.mossback-case .moss-intro h2,
.mossback-case .moss-brand-head h2{
  font-size:clamp(44px,4.3vw,72px) !important;
  line-height:.9 !important;
}
.mossback-case .moss-intro p,
.mossback-case .moss-brand-head p{
  font-size:15px !important;
  line-height:1.5 !important;
}
.mossback-case .moss-brand-head{
  grid-template-columns:minmax(260px,.75fr) minmax(280px,.65fr) !important;
  max-width:1120px !important;
  margin:0 auto !important;
  padding:44px 5vw !important;
  column-gap:5vw !important;
}
.mossback-case .moss-dark,
.mossback-case .moss-light{
  max-width:none !important;
}
.mossback-case .moss-brand-head .micro{margin-bottom:12px !important;}

/* Supporting visuals should not dominate the page. */
.mossback-case .moss-wide-image,
.mossback-case .moss-detail-grid{
  max-width:1040px !important;
}
.mossback-case .moss-wide-image:not(.mossy-lead):not(.mossy-back){
  margin-bottom:40px !important;
}
.mossback-case .mossy-lead{margin-bottom:12px !important;}
.mossback-case .moss-detail-grid{gap:12px !important;}
.mossback-case .moss-detail-grid figure{height:390px !important;}
.mossback-case .mossy-back{
  margin-top:12px !important;
  margin-bottom:44px !important;
}
.mossback-case .case-close{padding:44px 5vw !important;}
.mossback-case .case-close h2{font-size:clamp(58px,5.8vw,92px) !important;}

@media(max-width:900px){
  .mossback-case .moss-hero{grid-template-columns:1fr !important;min-height:0 !important;}
  .mossback-case .moss-hero-copy{padding:44px 7vw 34px !important;}
  .mossback-case .moss-hero-image{height:auto !important;min-height:0 !important;}
  .mossback-case .moss-hero-image img{height:auto !important;object-fit:contain !important;}
  .mossback-case .moss-intro,.mossback-case .moss-brand-head{padding:40px 7vw !important;}
  .mossback-case .moss-wide-image,.mossback-case .moss-detail-grid{max-width:84% !important;}
  .mossback-case .moss-detail-grid figure{height:auto !important;aspect-ratio:1.45/1 !important;}
}
@media(max-width:600px){
  .mossback-case .moss-hero-copy{padding:36px 22px 28px !important;}
  .mossback-case .moss-hero-copy h1{font-size:60px !important;}
  .mossback-case .moss-intro,.mossback-case .moss-brand-head{padding:34px 22px !important;}
  .mossback-case .moss-intro h2,.mossback-case .moss-brand-head h2{font-size:46px !important;}
  .mossback-case .moss-wide-image,.mossback-case .moss-detail-grid{max-width:calc(100% - 44px) !important;}
}

/* v115 — tighter work cards + intentional image crops */
.work-page .work-project,
.work-page .work-project.reverse{
  min-height:0 !important;
  height:520px !important;
  grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr) !important;
}
.work-page .work-project.reverse{
  grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr) !important;
}
.work-page .work-visual{
  height:520px !important;
  min-height:0 !important;
  padding:34px !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ece9e1 !important;
}
.work-page .work-copy{
  padding:58px 5vw !important;
  align-self:center !important;
}
.work-page .work-project h2{
  font-size:clamp(58px,5.5vw,94px) !important;
  margin:16px 0 22px !important;
}
.work-page .work-project p{max-width:560px !important;}

/* Mossback: use the horizontal lifestyle photograph instead of cropping the vertical bottle art. */
.work-page .visual-mossback{
  background:#ece9e1 !important;
}
.work-page .visual-mossback .work-feature-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:transparent !important;
}

/* Flair: no black-on-black panel. Show the complete vertical banner as an object. */
.work-page .work-project-flair{
  background:#f7f5ef !important;
  color:#050505 !important;
}
.work-page .work-project-flair .work-copy{
  background:#f7f5ef !important;
  color:#050505 !important;
}
.work-page .work-project-flair .work-link{color:#050505 !important;}
.work-page .visual-flair{
  background:#dedbd2 !important;
  padding:28px 8vw !important;
}
.work-page .visual-flair .work-feature-image{
  width:auto !important;
  max-width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
}

@media(max-width:900px){
  .work-page .work-project,.work-page .work-project.reverse{
    height:auto !important;
    grid-template-columns:1fr !important;
  }
  .work-page .work-visual{height:390px !important;padding:22px !important;}
  .work-page .work-copy{padding:42px 7vw 48px !important;}
  .work-page .visual-flair{padding:24px 20vw !important;}
}
@media(max-width:560px){
  .work-page .work-visual{height:300px !important;padding:16px !important;}
  .work-page .visual-flair{height:360px !important;padding:18px 18vw !important;}
  .work-page .work-project h2{font-size:58px !important;}
}

/* v116 — Mossback editorial horizontal rebuild */
.mossback-case{background:#080808;color:#f7f4ec;}
.mossback-case main{overflow:hidden;}
.mossback-case .moss-hero{
  min-height:0 !important;height:auto !important;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr) !important;
  background:#080808 !important;
}
.mossback-case .moss-hero-copy{padding:48px 4vw 48px 5vw !important;align-self:center;}
.mossback-case .moss-hero-copy h1{font-size:clamp(60px,5.2vw,88px) !important;line-height:.86 !important;margin:14px 0 18px !important;}
.mossback-case .moss-hero-copy p{max-width:430px !important;margin:0 !important;color:#d9d6ce !important;}
.mossback-case .moss-hero-image{height:430px !important;min-height:0 !important;background:#080808 !important;}
.mossback-case .moss-hero-image img{display:block;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center 54% !important;}

/* tiny editorial labels replace giant interstitial text blocks */
.mossback-case .moss-strip{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 5vw;background:#f4f0e7;color:#080808;border-bottom:1px solid rgba(0,0,0,.12);
}
.mossback-case .moss-strip.dark{background:#111;color:#f4f0e7;border-color:#2b2b2b;}
.mossback-case .moss-strip h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,3vw,46px);line-height:.92;text-transform:uppercase;margin:0;letter-spacing:.01em;}
.mossback-case .moss-strip p{font-size:14px;line-height:1.45;max-width:520px;margin:0;}

.mossback-case .moss-gallery{padding:18px 5vw 24px;background:#f4f0e7;}
.mossback-case .moss-gallery.dark{background:#080808;}
.mossback-case .moss-gallery img{display:block;width:100%;height:100%;object-fit:cover;}
.mossback-case .raakh-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;height:430px;}
.mossback-case .raakh-grid figure,.mossback-case .mossy-grid figure{margin:0;overflow:hidden;}
.mossback-case .raakh-grid figure:first-child img{object-position:center 48%;}
.mossback-case .raakh-grid figure:last-child img{object-position:center center;}

/* Mossy Creek: one landscape lead plus three compact details on the same screen rhythm */
.mossback-case .mossy-grid{display:grid;grid-template-columns:1.18fr .82fr;grid-template-rows:250px 250px;gap:14px;}
.mossback-case .mossy-grid .mossy-pair-card{grid-row:1 / 3;}
.mossback-case .mossy-grid .mossy-pair-card img{object-position:center 52%;}
.mossback-case .mossy-grid .white-card img{object-position:center 54%;}
.mossback-case .mossy-grid .detail-card img{object-position:center 50%;}
.mossback-case .mossy-label-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;height:270px;}
.mossback-case .mossy-label-row figure{margin:0;overflow:hidden;}
.mossback-case .mossy-label-row img{object-position:center center;}

.mossback-case .case-close{background:#111 !important;color:#f4f0e7 !important;padding:42px 5vw !important;}
.mossback-case .case-close h2{font-size:clamp(52px,5vw,78px) !important;}

@media(max-width:900px){
 .mossback-case .moss-hero{grid-template-columns:1fr !important;}
 .mossback-case .moss-hero-copy{padding:38px 7vw 30px !important;}
 .mossback-case .moss-hero-image{height:auto !important;}
 .mossback-case .moss-hero-image img{height:auto !important;}
 .mossback-case .moss-strip{align-items:flex-start;flex-direction:column;padding:26px 7vw;gap:10px;}
 .mossback-case .moss-gallery{padding:14px 7vw 20px;}
 .mossback-case .raakh-grid{height:auto;grid-template-columns:1fr;}
 .mossback-case .raakh-grid figure{aspect-ratio:16/9;}
 .mossback-case .mossy-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;}
 .mossback-case .mossy-grid .mossy-pair-card{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9;}
 .mossback-case .mossy-grid .white-card,.mossback-case .mossy-grid .detail-card{aspect-ratio:1.25/1;}
 .mossback-case .mossy-label-row{height:auto;}
 .mossback-case .mossy-label-row figure{aspect-ratio:1.35/1;}
}
@media(max-width:600px){
 .mossback-case .moss-hero-copy{padding:32px 22px 26px !important;}
 .mossback-case .moss-hero-copy h1{font-size:56px !important;}
 .mossback-case .moss-strip{padding:24px 22px;}
 .mossback-case .moss-gallery{padding:12px 22px 18px;}
 .mossback-case .mossy-grid,.mossback-case .mossy-label-row{grid-template-columns:1fr;}
 .mossback-case .mossy-grid .white-card,.mossback-case .mossy-grid .detail-card,.mossback-case .mossy-label-row figure{aspect-ratio:16/10;}
}

/* v117 — texture + compact portfolio polish */
/* Mossback: separate the dark photography from the page with the Studio42 texture. */
.mossback-case,
.mossback-case .moss-hero,
.mossback-case .moss-gallery.dark{
  background-color:#171717 !important;
  background-image:linear-gradient(rgba(20,20,20,.84),rgba(20,20,20,.84)),url('assets/texture-scratch.webp') !important;
  background-size:auto,900px auto !important;
  background-repeat:repeat !important;
}
.mossback-case .moss-hero-image{background:transparent !important;}
.mossback-case .moss-hero-image img{position:relative;z-index:1;}
.mossback-case .moss-strip.dark{
  background-color:#222 !important;
  background-image:linear-gradient(rgba(28,28,28,.88),rgba(28,28,28,.88)),url('assets/texture-scratch.webp') !important;
  background-size:auto,800px auto !important;
  color:#f4f0e7 !important;
}
.mossback-case .raakh-grid{gap:18px !important;}
.mossback-case .raakh-grid figure{
  background:#0b0b0b;
  outline:1px solid rgba(255,255,255,.08);
}

/* Work page: shorter editorial project rows instead of oversized split screens. */
.work-page main{background:#f4f0e7;}
.work-page .work-project,
.work-page .work-project.reverse{
  height:390px !important;
  min-height:0 !important;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr) !important;
  border-bottom:1px solid rgba(0,0,0,.14);
  background:#f4f0e7 !important;
  color:#080808 !important;
}
.work-page .work-project.reverse{
  grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr) !important;
}
.work-page .work-visual{
  height:390px !important;
  min-height:0 !important;
  padding:24px !important;
  background-color:#dedbd2 !important;
  background-image:linear-gradient(rgba(222,219,210,.88),rgba(222,219,210,.88)),url('assets/texture-scratch.webp') !important;
  background-size:auto,800px auto !important;
}
.work-page .work-copy,
.work-page .work-project-flair .work-copy{
  padding:42px 5vw !important;
  background:#f4f0e7 !important;
  color:#080808 !important;
}
.work-page .work-project h2{
  font-size:clamp(52px,4.5vw,76px) !important;
  line-height:.88 !important;
  margin:12px 0 14px !important;
}
.work-page .work-project p{
  font-size:14px !important;
  line-height:1.45 !important;
  max-width:500px !important;
  margin-bottom:20px !important;
}
.work-page .work-num{width:40px !important;height:40px !important;}
.work-page .work-link{margin-top:4px !important;}

/* Mossback preview: wide image, clean inset, no fake black frame. */
.work-page .visual-mossback{padding:24px !important;}
.work-page .visual-mossback .work-feature-image{
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:center 52% !important;
}

/* Flair preview: let the vertical art feel intentionally mounted, not lost in empty beige. */
.work-page .visual-flair{
  padding:22px !important;
  background-color:#c9c6bd !important;
  background-image:linear-gradient(rgba(201,198,189,.86),rgba(201,198,189,.86)),url('assets/texture-scratch.webp') !important;
  background-size:auto,760px auto !important;
}
.work-page .visual-flair .work-feature-image{
  width:auto !important;height:100% !important;max-width:72% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.12));
}

@media(max-width:900px){
  .work-page .work-project,.work-page .work-project.reverse{height:auto !important;grid-template-columns:1fr !important;}
  .work-page .work-visual{height:340px !important;}
  .work-page .work-copy{padding:36px 7vw 42px !important;}
}
@media(max-width:560px){
  .work-page .work-visual{height:270px !important;padding:14px !important;}
  .work-page .visual-flair{height:330px !important;}
  .work-page .work-project h2{font-size:52px !important;}
}

/* v118 — less modular, more editorial */
.work-page .work-visual{padding:0 !important;}
.work-page .work-feature-image{display:block;width:100% !important;height:100% !important;object-fit:cover !important;}
.work-page .visual-mossback{padding:0 !important;}
.work-page .visual-flair{padding:0 !important;}
.work-page .visual-flair .work-feature-image{width:100% !important;height:100% !important;max-width:none !important;object-fit:contain !important;filter:none !important;padding:20px 0;box-sizing:border-box;}

/* break the repeated cream-card rhythm */
.work-page .work-project-mossback .work-copy{
  background-color:#202020 !important;
  background-image:linear-gradient(rgba(24,24,24,.84),rgba(24,24,24,.84)),url('assets/texture-scratch.webp') !important;
  background-size:auto,820px auto !important;color:#f4f0e7 !important;
}
.work-page .work-project-mossback .work-link{background:#C7DA2C !important;color:#080808 !important;}
.work-page .work-project-flair .work-copy{background:#f4f0e7 !important;}
.work-page .work-project-goose .work-copy{background:#C7DA2C !important;color:#080808 !important;}
.work-page .work-project-goose .work-link{background:#080808 !important;color:#f4f0e7 !important;}
.work-page .work-project-goose .visual-goose{
  background-color:#171717 !important;
  background-image:linear-gradient(rgba(18,18,18,.78),rgba(18,18,18,.78)),url('assets/texture-scratch.webp') !important;
  background-size:auto,800px auto !important;
}
.work-page .work-project-goose .work-placeholder{width:100%;height:100%;background:#C7DA2C !important;border:0 !important;}
.work-page .work-project-sauced .work-copy{background:#f4f0e7 !important;color:#080808 !important;}
.work-page .visual-sauced{background:#1c1c1c !important;}

/* Mossback: remove frames and turn Mossy Creek into a compact horizontal editorial spread. */
.mossback-case .raakh-grid figure{outline:0 !important;background:transparent !important;}
.mossback-case .moss-gallery{padding-left:0 !important;padding-right:0 !important;}
.mossback-case .raakh-grid{gap:0 !important;}
.mossback-case .mossy-editorial{padding:0 !important;background:#d9d4c8 !important;}
.mossback-case .mossy-top-grid{display:grid;grid-template-columns:1.45fr .55fr;height:430px;gap:0;}
.mossback-case .mossy-top-grid figure,.mossback-case .mossy-detail-band figure{margin:0;overflow:hidden;}
.mossback-case .mossy-top-grid img,.mossback-case .mossy-detail-band img{display:block;width:100%;height:100%;object-fit:cover;}
.mossback-case .mossy-top-grid .mossy-pair-card img{object-position:center 51%;}
.mossback-case .mossy-top-grid .white-card img{object-position:center 53%;}
.mossback-case .mossy-detail-band{display:grid;grid-template-columns:.62fr 1.15fr 1.23fr;height:270px;gap:0;background:#eee9df;}
.mossback-case .mossy-monogram{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#efe8d9;color:#33451d;border:0;overflow:hidden;}
.mossback-case .mossy-monogram span{font-family:Georgia,serif;font-weight:700;font-style:italic;font-size:clamp(90px,10vw,170px);line-height:.75;letter-spacing:-.12em;transform:translateX(-.06em);opacity:.95;}
.mossback-case .mossy-monogram small{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;margin-top:28px;color:#9d7622;}
.mossback-case .mossy-detail-band .detail-card img{object-position:center 48%;}
.mossback-case .mossy-detail-band .back-card img{object-position:center 47%;}
.mossback-case .mossy-strip{background:#f4f0e7 !important;}

@media(max-width:900px){
 .mossback-case .mossy-top-grid{height:auto;grid-template-columns:1fr;}
 .mossback-case .mossy-top-grid figure{aspect-ratio:16/9;}
 .mossback-case .mossy-detail-band{height:auto;grid-template-columns:1fr 1fr;}
 .mossback-case .mossy-monogram{grid-column:1/-1;min-height:220px;}
 .mossback-case .mossy-detail-band figure{aspect-ratio:16/10;}
}

/* v120 — compact featured row + Mossy Creek collage refinements */
@media (min-width:701px){
  body.home-page .featured{grid-template-columns:180px 1fr !important;gap:22px !important;padding-top:28px !important;padding-bottom:30px !important;}
  body.home-page .featured .project-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important;}
  body.home-page .featured .project{min-height:148px !important;padding:14px 12px !important;}
  body.home-page .featured .project span{font-size:29px !important;line-height:1.02 !important;}
  body.home-page .featured .project small{font-size:9px !important;}
}
@media (min-width:701px) and (max-width:1100px){
  body.home-page .featured .project-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  body.home-page .featured .project{min-height:128px !important;}
  body.home-page .featured .project span{font-size:24px !important;}
}

.mossback-case .mossy-detail-band{grid-template-columns:.72fr .72fr 1.18fr 1.18fr !important;height:285px !important;background:#d9d4c8 !important;}
.mossback-case .mossy-detail-band .monogram-card,
.mossback-case .mossy-detail-band .full-label-card{background:#eee8d9 !important;}
.mossback-case .mossy-detail-band .monogram-card img{object-fit:cover !important;object-position:center center !important;}
.mossback-case .mossy-detail-band .full-label-card img{object-fit:contain !important;object-position:center center !important;padding:12px;box-sizing:border-box;background:#eee8d9;}
@media(max-width:900px){
  .mossback-case .mossy-detail-band{height:auto !important;grid-template-columns:1fr 1fr !important;}
  .mossback-case .mossy-detail-band figure{aspect-ratio:1/1 !important;}
}

/* v121 — remove stray light seams + show Mossy Creek artwork at full composition */
.work-page .work-project,
.work-page .work-project.reverse{
  border:0 !important;
  margin:0 !important;
  outline:0 !important;
}
.work-page .work-project-mossback,
.work-page .work-project-mossback > *{
  border-top:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
}

.mossback-case .mossy-editorial{background:#111 !important;}
.mossback-case .mossy-editorial figure{margin:0 !important;overflow:hidden;background:#111;}
.mossback-case .mossy-editorial img{display:block;width:100%;}
.mossback-case .mossy-feature-row{display:grid;grid-template-columns:1.55fr .45fr;gap:0;align-items:stretch;background:#111;}
.mossback-case .mossy-pair-full img{height:auto !important;object-fit:contain !important;}
.mossback-case .white-bottle-crop{min-height:100%;}
.mossback-case .white-bottle-crop img{height:100% !important;object-fit:cover !important;object-position:center center !important;}
.mossback-case .mossy-detail-row{display:grid;grid-template-columns:.42fr 1.58fr;gap:0;align-items:stretch;background:#111;}
.mossback-case .mossy-detail-row .monogram-card{background:#efe8d9 !important;}
.mossback-case .mossy-detail-row .monogram-card img{height:100% !important;object-fit:cover !important;object-position:center center !important;}
.mossback-case .mossy-detail-row .front-full img,
.mossback-case .mossy-wide-full img{height:auto !important;object-fit:contain !important;}
.mossback-case .mossy-wide-full{background:#111;}
@media(max-width:900px){
  .mossback-case .mossy-feature-row{grid-template-columns:1fr;}
  .mossback-case .white-bottle-crop{height:520px;}
  .mossback-case .mossy-detail-row{grid-template-columns:1fr;}
  .mossback-case .mossy-detail-row .monogram-card{height:300px;}
}

/* v122 — tighter Mossy Creek presentation + seamless work rows */
.work-page main,
.work-page .work-project,
.work-page .work-project.reverse,
.work-page .work-project > *,
.work-page .work-copy,
.work-page .work-visual{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.work-page .work-project,
.work-page .work-project.reverse{margin:-1px 0 0 !important;}
.work-page .work-project:first-child{margin-top:0 !important;}

/* Keep the supplied artwork intact, but stop the collage from taking over the page. */
.mossback-case .mossy-editorial{
  width:min(100%,1460px) !important;
  margin:0 auto !important;
  background:#111 !important;
}
.mossback-case .mossy-feature-row,
.mossback-case .mossy-detail-row,
.mossback-case .mossy-wide-full{gap:0 !important;border:0 !important;outline:0 !important;}
.mossback-case .mossy-feature-row figure,
.mossback-case .mossy-detail-row figure,
.mossback-case .mossy-wide-full figure{border:0 !important;outline:0 !important;box-shadow:none !important;}
.mossback-case .mossy-pair-full img,
.mossback-case .mossy-detail-row .front-full img,
.mossback-case .mossy-wide-full img{width:100% !important;height:auto !important;object-fit:contain !important;}
/* Only the single-bottle image is intentionally cropped. */
.mossback-case .white-bottle-crop{overflow:hidden !important;}
.mossback-case .white-bottle-crop img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center 48% !important;}

@media(min-width:901px){
  .mossback-case .mossy-feature-row{grid-template-columns:1.62fr .38fr !important;}
  .mossback-case .mossy-detail-row{grid-template-columns:.34fr 1.66fr !important;}
}
@media(max-width:900px){
  .mossback-case .mossy-editorial{width:100% !important;}
}

/* v124 — Featured Work: protect the heading and trim excess card width */
@media (min-width:901px){
  body.home-page .featured{
    grid-template-columns:220px minmax(0,1fr) !important;
    column-gap:28px !important;
  }
  body.home-page .featured-title{
    width:220px !important;
    min-width:220px !important;
  }
  body.home-page .featured .project-grid{
    width:100% !important;
    max-width:1420px !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    justify-self:start !important;
  }
  body.home-page .featured .project{
    width:100% !important;
    min-width:0 !important;
  }
}

/* v125 — Featured Work: narrower cards + clear title gutter */
@media (min-width:901px){
  body.home-page .featured{
    grid-template-columns:250px minmax(0,1fr) !important;
    column-gap:40px !important;
  }
  body.home-page .featured-title{
    width:250px !important;
    min-width:250px !important;
    overflow:visible !important;
  }
  body.home-page .featured .project-grid{
    width:100% !important;
    max-width:1300px !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    justify-self:start !important;
  }
  body.home-page .featured .project{
    width:100% !important;
    min-width:0 !important;
  }
}

/* v127 — remove light seams around Work page text panels */
.work-page .work-project .work-copy,
.work-page .work-project.reverse .work-copy{
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  margin:-2px 0 !important;
  min-height:calc(100% + 4px) !important;
  background-clip:border-box !important;
  position:relative;
  z-index:2;
}
.work-page .work-project .work-copy::before,
.work-page .work-project .work-copy::after{
  content:none !important;
  display:none !important;
}
.work-page .work-project,
.work-page .work-project.reverse{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  gap:0 !important;
  overflow:hidden !important;
}


/* v128 — Work page row alignment + blank Flair art placeholder */
@media (min-width:901px){
  .work-page .work-project,
  .work-page .work-project.reverse{
    height:390px !important;
    min-height:390px !important;
    align-items:stretch !important;
  }
  .work-page .work-project .work-copy,
  .work-page .work-project.reverse .work-copy{
    height:390px !important;
    min-height:390px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    align-self:stretch !important;
  }
  .work-page .visual-mossback{
    height:390px !important;
    padding:0 !important;
    margin:0 !important;
  }
  .work-page .visual-mossback .work-feature-image{
    display:block !important;
    width:100% !important;
    height:390px !important;
    object-fit:cover !important;
    margin:0 !important;
  }
}

/* Flair: clean neutral placeholder until replacement artwork is supplied */
.work-page .visual-flair{
  background:#d8d6cf !important;
  background-image:none !important;
  padding:0 !important;
}
.work-page .visual-flair .work-feature-image{
  display:none !important;
}

/* v129 — lock project-row geometry + keep Mossback title on one line */
@media (min-width:901px){
  .work-page .work-project,
  .work-page .work-project.reverse{
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;
    align-items:stretch !important;
    grid-auto-rows:390px !important;
  }
  .work-page .work-project > .work-visual,
  .work-page .work-project > .work-copy{
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    align-self:stretch !important;
  }
  .work-page .work-project > .work-visual img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
  }
  .work-page .work-project-mossback .work-copy h2{
    white-space:nowrap !important;
    font-size:clamp(42px,3.35vw,64px) !important;
    letter-spacing:-.015em !important;
  }
}
@media (min-width:901px) and (max-width:1300px){
  .work-page .work-project-mossback .work-copy{padding-left:4vw !important;padding-right:3vw !important;}
  .work-page .work-project-mossback .work-copy h2{font-size:42px !important;}
}

/* v130 — exact Work row alignment + consistent project headlines */
@media (min-width:901px){
  .work-page .work-project,
  .work-page .work-project.reverse{
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;
    grid-auto-rows:390px !important;
    align-items:stretch !important;
    gap:0 !important;
    margin:0 !important;
  }
  .work-page .work-project > .work-visual,
  .work-page .work-project > .work-copy{
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;
    margin:0 !important;
    padding-top:42px !important;
    padding-bottom:42px !important;
    box-sizing:border-box !important;
    align-self:stretch !important;
  }
  .work-page .work-project > .work-visual{
    padding:0 !important;
    overflow:hidden !important;
  }
  .work-page .work-project h2,
  .work-page .work-project-mossback .work-copy h2{
    font-size:56px !important;
    line-height:.88 !important;
    letter-spacing:0 !important;
    margin:12px 0 14px !important;
  }
  .work-page .work-project-mossback .work-copy h2{
    white-space:nowrap !important;
  }
  .work-page .visual-mossback .work-feature-image{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    display:block !important;
    object-fit:cover !important;
  }
}

/* Flair artwork intentionally blank until replacement is supplied. */
.work-page .visual-flair{
  background:#d8d6cf !important;
  background-image:none !important;
}
.work-page .visual-flair .work-feature-image{display:none !important;}


/* v132 — compact Mossy Creek editorial collage */
@media (min-width:901px){
  .mossback-case .mossy-editorial{
    width:min(100%,1320px) !important;
    margin:0 auto !important;
    background:#111 !important;
  }
  .mossback-case .mossy-feature-row{
    display:grid !important;
    grid-template-columns:1.72fr .48fr !important;
    height:410px !important;
    overflow:hidden !important;
  }
  .mossback-case .mossy-feature-row figure{height:410px !important;}
  .mossback-case .mossy-pair-full img{
    width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important;
  }
  .mossback-case .white-bottle-crop img{
    width:100% !important; height:100% !important; object-fit:cover !important; object-position:center 48% !important;
  }
  .mossback-case .mossy-detail-row{
    display:grid !important;
    grid-template-columns:.62fr 1.19fr 1.19fr !important;
    height:255px !important;
    overflow:hidden !important;
    background:#111 !important;
  }
  .mossback-case .mossy-detail-row figure{height:255px !important;margin:0 !important;overflow:hidden !important;}
  .mossback-case .mossy-detail-row img{
    width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
  }
  .mossback-case .mossy-detail-row .monogram-card img{object-position:center 25% !important;}
  .mossback-case .mossy-detail-row .front-full img{object-position:center 46% !important;}
  .mossback-case .mossy-detail-row .back-full img{object-position:center 50% !important;}
  .mossback-case .mossy-wide-full{display:none !important;}
}
@media(max-width:900px){
  .mossback-case .mossy-detail-row .back-full{display:block !important;}
}


/* v133 — Mossy Creek: three-photo editorial hierarchy */
@media (min-width:901px){
  .mossback-case .mossy-editorial{
    width:min(calc(100% - 10vw),1180px) !important;
    margin:0 auto 54px !important;
    background:transparent !important;
  }
  .mossback-case .mossy-photo-hero{
    width:100% !important;
    height:390px !important;
    overflow:hidden !important;
    margin:0 0 12px !important;
    background:#111 !important;
  }
  .mossback-case .mossy-photo-hero figure,
  .mossback-case .mossy-photo-pair figure{margin:0 !important;overflow:hidden !important;}
  .mossback-case .mossy-photo-hero figure{height:390px !important;}
  .mossback-case .mossy-photo-hero img{
    display:block !important;width:100% !important;height:100% !important;
    object-fit:cover !important;object-position:center 52% !important;
  }
  .mossback-case .mossy-photo-pair{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    height:285px !important;
  }
  .mossback-case .mossy-photo-pair figure{height:285px !important;background:#111 !important;}
  .mossback-case .mossy-photo-pair img{
    display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;
  }
  .mossback-case .mossy-photo-pair .white-bottle-crop img{object-position:center 49% !important;}
  .mossback-case .mossy-photo-pair .spiced-detail-crop img{object-position:center 48% !important;}
}
@media(max-width:900px){
  .mossback-case .mossy-photo-hero,
  .mossback-case .mossy-photo-pair{width:calc(100% - 44px) !important;margin-left:auto !important;margin-right:auto !important;}
  .mossback-case .mossy-photo-hero{margin-bottom:10px !important;}
  .mossback-case .mossy-photo-hero figure{margin:0 !important;}
  .mossback-case .mossy-photo-hero img{display:block !important;width:100% !important;height:auto !important;}
  .mossback-case .mossy-photo-pair{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;}
  .mossback-case .mossy-photo-pair figure{margin:0 !important;aspect-ratio:1.35/1 !important;overflow:hidden !important;}
  .mossback-case .mossy-photo-pair img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}
}


/* v134 — Mossy Creek single horizontal photographic strip */
@media (min-width:901px){
  .mossback-case .mossy-horizontal-strip{
    width:100% !important;
    max-width:none !important;
    margin:0 0 48px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1.18fr 1.46fr .64fr !important;
    gap:8px !important;
    height:365px !important;
    background:#111 !important;
    overflow:hidden !important;
  }
  .mossback-case .mossy-horizontal-strip figure{
    margin:0 !important;
    height:365px !important;
    overflow:hidden !important;
    background:#111 !important;
  }
  .mossback-case .mossy-horizontal-strip img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .mossback-case .mossy-strip-pair img{object-position:center 51% !important;}
  .mossback-case .mossy-strip-detail img{object-position:center 48% !important;}
  .mossback-case .mossy-strip-white img{object-position:center 50% !important;}
}
@media(max-width:900px){
  .mossback-case .mossy-horizontal-strip{
    width:calc(100% - 44px) !important;
    margin:0 auto 34px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    background:#111 !important;
  }
  .mossback-case .mossy-horizontal-strip figure{margin:0 !important;overflow:hidden !important;aspect-ratio:16/10 !important;}
  .mossback-case .mossy-horizontal-strip img{display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;}
}

/* v135 — hard fix: Mossy Creek is one desktop row, never stacked */
@media (min-width:901px){
  body.mossback-case section.moss-gallery.mossy-editorial.mossy-horizontal-strip{
    display:grid !important;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1.5fr) minmax(0,.72fr) !important;
    grid-template-rows:320px !important;
    width:min(calc(100% - 8vw),1440px) !important;
    height:320px !important;
    min-height:320px !important;
    max-height:320px !important;
    margin:0 auto 44px !important;
    padding:0 !important;
    gap:8px !important;
    overflow:hidden !important;
    background:#111 !important;
  }
  body.mossback-case section.moss-gallery.mossy-editorial.mossy-horizontal-strip > figure{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    height:320px !important;
    min-height:0 !important;
    max-height:320px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  body.mossback-case section.moss-gallery.mossy-editorial.mossy-horizontal-strip > figure > img{
    display:block !important;
    width:100% !important;
    height:320px !important;
    max-width:none !important;
    max-height:320px !important;
    object-fit:cover !important;
    margin:0 !important;
  }
  body.mossback-case .mossy-strip-pair img{object-position:center 52% !important;}
  body.mossback-case .mossy-strip-detail img{object-position:center 49% !important;}
  body.mossback-case .mossy-strip-white img{object-position:center 50% !important;}
}

/* v136 — Mossy Creek strip full bleed to viewport edges */
@media (min-width:901px){
  body.mossback-case section.moss-gallery.mossy-editorial.mossy-horizontal-strip{
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-bottom:44px !important;
    gap:6px !important;
  }
}

/* v140: Logo + Branding gallery trial. Artwork kept exactly as supplied. */
.archive-piece{margin:0;min-width:0}
.archive-art{aspect-ratio:1/1;overflow:hidden;background:#050505;border:1px solid rgba(5,5,5,.15)}
.archive-art img{display:block;width:100%;height:100%;object-fit:contain}
.archive-piece figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:13px 1px 0;color:#050505}
.archive-piece figcaption strong{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(17px,1.45vw,23px);line-height:1;letter-spacing:.02em}
.archive-piece figcaption span{font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.5;letter-spacing:.06em}
@media(max-width:700px){.archive-piece figcaption{padding-top:9px;gap:4px}.archive-piece figcaption strong{font-size:17px}.archive-piece figcaption span{font-size:9px}}
@media(max-width:520px){.archive-grid-logos{grid-template-columns:1fr !important}.archive-piece figcaption strong{font-size:21px}}

/* Apparel gallery: consistent square crops and captions on dark section */
.archive-grid-apparel .archive-art img{object-fit:cover}
.archive-grid-apparel .archive-piece:nth-child(2) .archive-art{background:#ffac9a}
.archive-grid-apparel .archive-piece:nth-child(2) .archive-art img{object-fit:cover;object-position:center 52%}
.work-category-dark .archive-piece figcaption{color:#f5f3ed}
@media(max-width:520px){.archive-grid-apparel{grid-template-columns:1fr !important}}

/* Print + Promo portfolio: square viewport, original image assets retained */
.archive-grid-print .archive-art img { width:100%; height:100%; object-fit:cover; object-position:center; }

/* Packaging: three square product images */
.archive-grid-packaging .archive-art img{object-fit:cover;object-position:center}
@media(max-width:520px){.archive-grid-packaging{grid-template-columns:1fr !important}}

/* v147: square packaging image canvases with additional bottle breathing room; no site layout changes. */

/* v149: edge-to-edge square packaging thumbnails */
.archive-grid-packaging .archive-art{aspect-ratio:1/1;overflow:hidden;border:0;background:transparent}
.archive-grid-packaging .archive-art img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.015);transform-origin:center}

/* Silly Goose Golf Co. case study */
.goose-case{background:#f4f1e8;color:#0a2515}.goose-case .topbar{background:#111;color:#fff}.sg-hero{display:grid;grid-template-columns:1fr 43%;min-height:620px;background:#0a2515;color:#fff}.sg-hero-inner{padding:clamp(42px,7vw,112px) clamp(24px,6vw,100px)}.sg-kicker{font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.07em;color:#faa61a;margin:35px 0 20px}.sg-hero h1,.sg-section-head h2,.sg-intro h2,.sg-end h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;line-height:.87;letter-spacing:-.025em}.sg-hero h1{font-size:clamp(72px,9vw,158px);margin:0 0 30px}.sg-hero h1 em{font-style:normal;color:#faa61a}.sg-hero p{max-width:450px;line-height:1.65;font-size:16px}.sg-hero-logo{display:flex;align-items:center;justify-content:center;padding:50px;background:#faa61a}.sg-hero-logo img{width:100%;max-width:550px;height:auto;object-fit:contain}.sg-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;padding:95px 7%;align-items:end}.sg-intro h2,.sg-section-head h2{font-size:clamp(60px,7vw,110px);margin:22px 0 0}.sg-intro p{max-width:560px;font-size:19px;line-height:1.6}.sg-identity{background:#f4f1e8;padding:35px 7% 85px}.sg-section-head{margin:0 0 42px}.sg-section-head p{max-width:560px;line-height:1.6}.sg-logo-stage{min-height:400px;background:#fff;display:flex;align-items:center;justify-content:center;padding:50px}.sg-logo-stage img{width:min(100%,750px);max-height:320px;object-fit:contain}.sg-logo-variations{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}.sg-logo-variations>div{height:230px;background:#fff;display:flex;align-items:center;justify-content:center;padding:25px}.sg-logo-variations img{max-width:100%;max-height:100%;object-fit:contain}.sg-logo-variations .sg-dark-logo{background:#0a2515}.sg-palette{display:grid;grid-template-columns:2fr 1.4fr 1.2fr .7fr .7fr;height:115px;margin-top:24px;border:1px solid #ddd}.sg-palette-caption{margin-top:14px}.sg-character{background:#faa61a;padding:90px 7%}.sg-hats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.sg-hats figure,.sg-tees figure,.sg-merch figure{margin:0}.sg-hats img{width:100%;display:block;background:white;aspect-ratio:1.15;object-fit:contain}.sg-hats figcaption,.sg-tees figcaption{font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.09em;padding:15px 0 22px}.sg-apparel{background:#111;color:#fff;padding:95px 7%}.sg-tees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}.sg-tees img{width:100%;display:block;aspect-ratio:1.25;object-fit:contain;background:#000}.sg-merch{padding:90px 7%;background:#f4f1e8}.sg-merch-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.sg-merch img{width:100%;display:block;aspect-ratio:1.4;object-fit:contain;background:#fff}.sg-end{position:relative;min-height:490px;background:#0a2515;color:#faa61a;padding:90px 7%;overflow:hidden}.sg-end h2{font-size:clamp(72px,10vw,160px);margin:24px 0 0;position:relative;z-index:1}.sg-end img{position:absolute;right:5%;bottom:12%;width:35%;max-height:280px;object-fit:contain;opacity:.9}.goose-case .case-close{background:#171717;color:#fff}@media(max-width:800px){.sg-hero{grid-template-columns:1fr}.sg-hero-logo{min-height:300px}.sg-intro{grid-template-columns:1fr;gap:18px;padding:70px 6%}.sg-identity,.sg-character,.sg-apparel,.sg-merch{padding:65px 6%}.sg-logo-variations{grid-template-columns:1fr 1fr}.sg-logo-variations>div{height:170px}.sg-logo-variations>div:last-child{grid-column:span 2}.sg-hats,.sg-tees,.sg-merch-grid{grid-template-columns:1fr}.sg-end img{opacity:.2;width:75%;right:-12%}.sg-end{min-height:420px}}
/* Silly Goose refinement 152: readable type, balanced split hero, visible studio mark */
.goose-case .topbar{background:var(--cream);color:var(--black);border-bottom:1px solid rgba(0,0,0,.14)}
.goose-case .topbar a{color:inherit}
.goose-case .nav{letter-spacing:.085em}
.goose-case .micro{letter-spacing:.11em}
.goose-case .sg-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:520px}
.goose-case .sg-hero-inner{padding:clamp(40px,5vw,80px) clamp(28px,5vw,82px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.goose-case .sg-kicker{margin:28px 0 20px;letter-spacing:.105em;line-height:1.6}
.goose-case .sg-hero h1{font-size:clamp(62px,6.3vw,116px);line-height:.97;letter-spacing:.012em;margin:0 0 26px}
.goose-case .sg-hero-logo{background:#faa61a;padding:clamp(25px,4vw,65px)}
.goose-case .sg-hero-logo img{max-width:540px}
.goose-case .sg-intro h2,.goose-case .sg-section-head h2,.goose-case .sg-end h2{letter-spacing:.005em;line-height:.95}
.goose-case .sg-hats figcaption,.goose-case .sg-tees figcaption,.goose-case .sg-palette-caption{letter-spacing:.13em}
@media(max-width:800px){.goose-case .sg-hero{grid-template-columns:1fr;min-height:0}.goose-case .sg-hero-inner{padding:52px 6%}.goose-case .sg-hero h1{font-size:clamp(62px,12vw,110px)}.goose-case .sg-hero-logo{min-height:280px}}

/* Silly Goose v153 layout updates */
.goose-case .sg-logo-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0;min-height:0;background:transparent}
.goose-case .sg-brand-panel{min-height:300px;background:#e8e4d9;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,60px)}
.goose-case .sg-brand-panel:nth-child(2){background:#faa61a}
.goose-case .sg-brand-panel img{width:100%;max-height:270px;object-fit:contain}
.goose-case .sg-logo-variations>div{background:#e8e4d9}
.goose-case .sg-logo-variations .sg-dark-logo{background:#0a2515}
.goose-case .sg-hats img{background:transparent;mix-blend-mode:multiply}
.goose-case .sg-merch img{background:#e8e4d9}
@media(max-width:650px){.goose-case .sg-logo-stage{grid-template-columns:1fr;gap:12px}.goose-case .sg-brand-panel{min-height:230px}}

/* Silly Goose v154 */
.goose-case .sg-hats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.goose-case .sg-hats figure{min-width:0}
.goose-case .sg-hats img{width:100%;height:auto;aspect-ratio:1.15;object-fit:contain}
.goose-case .sg-brand-panel:first-child{background:#0a2515}
.goose-case .sg-brand-panel:nth-child(2){background:#f4f0e7}
.goose-case .sg-logo-variations>div{background:#f4f0e7}
.goose-case .sg-logo-variations .sg-dark-logo{background:#0a2515}
@media(max-width:800px){.goose-case .sg-hats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.goose-case .sg-hats{gap:10px}}

/* Silly Goose: single wide hat lifestyle image */
.sg-hats-lifestyle{width:100%;margin-top:2.5rem}.sg-hats-lifestyle img{display:block;width:100%;height:auto;object-fit:cover}

/* v156: restore white logo presentation and clean closing mark */
.goose-case .sg-logo-variations>div:nth-child(1),
.goose-case .sg-logo-variations>div:nth-child(2){background:#fff;}
.goose-case .sg-end img{width:32%;max-height:260px;object-fit:contain;}

/* v157: match Silly Goose section heading scale to Mossback case study */
.goose-case .sg-intro h2,
.goose-case .sg-section-head h2{
  font-size:clamp(30px,3vw,46px);
  line-height:.92;
  letter-spacing:.01em;
  margin:8px 0 0;
}
.goose-case .sg-intro{padding-top:48px;padding-bottom:48px;}
.goose-case .sg-section-head{margin-bottom:28px;}
@media(max-width:800px){
  .goose-case .sg-intro{padding-top:35px;padding-bottom:35px;}
}

/* v158: consistent single-line section headings and corrected logo panels */
@media(min-width:801px){
 .goose-case .sg-section-head h2{font-size:clamp(36px,5.1vw,86px);white-space:nowrap;letter-spacing:-.015em;}
}
.goose-case .sg-brand-panel:first-child{background:#fff;}
.goose-case .sg-brand-panel:nth-child(2){background:#0a2515;}
@media(max-width:800px){.goose-case .sg-section-head h2{font-size:clamp(34px,7vw,64px);line-height:1.02;}}

/* Silly Goose: wide lifestyle towel photograph */
.sg-merch-lifestyle figure{margin:0}.sg-merch-lifestyle img{display:block;width:100%;height:auto;aspect-ratio:2.4;object-fit:cover;background:transparent}

/* Silly Goose closing section refinement */
.goose-case .sg-end{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);column-gap:5%;align-items:center;min-height:420px;padding:76px 7%}
.goose-case .sg-end>.micro{grid-column:1/-1;align-self:end}
.goose-case .sg-end h2{font-size:clamp(56px,7vw,108px);line-height:.95;margin:20px 0 0;max-width:780px}
.goose-case .sg-end .sg-end-logo-panel{position:relative;display:flex;align-items:center;justify-content:center;background:#fff;padding:32px;min-height:285px;z-index:2}
.goose-case .sg-end .sg-end-logo-panel img{position:static;width:100%;max-width:390px;max-height:280px;opacity:1;object-fit:contain}
@media(max-width:800px){.goose-case .sg-end{grid-template-columns:1fr;gap:28px;padding:65px 6%}.goose-case .sg-end>.micro{grid-column:1}.goose-case .sg-end h2{font-size:clamp(54px,10vw,82px)}.goose-case .sg-end .sg-end-logo-panel{min-height:220px}.goose-case .sg-end .sg-end-logo-panel img{width:100%;max-width:340px;opacity:1}}

/* v163: tighten About experience to process transition */
body.about-page .about-experience{padding-bottom:36px !important;}
body.about-page .process{padding-top:12px !important;}
@media(max-width:700px){body.about-page .about-experience{padding-bottom:26px !important;}body.about-page .process{padding-top:12px !important;}}

/* v165 About page headline and process spacing */
body.about-page .about-coral-word{color:#ff525e !important;}
body.about-page .about-experience h2{font-size:clamp(48px,5.2vw,92px) !important;line-height:.9 !important;}
body.about-page .about-experience{padding-bottom:18px !important;}
body.about-page .process{padding-top:0 !important;padding-bottom:46px !important;position:relative;}
body.about-page .process-grid{padding-bottom:12px;}
@media(max-width:900px){body.about-page .process{padding-bottom:54px !important;}body.about-page .about-experience{padding-bottom:24px !important;}}
@media(max-width:600px){body.about-page .about-experience h2{font-size:clamp(46px,11vw,72px) !important;}body.about-page .process{padding-bottom:55px !important;}}

/* About page: coral process heading */
body.about .process-head h2, .process-head h2 { color: #FF525E; }

/* v177 — mobile readability, project heading wrapping, single-column print gallery */
@media (max-width: 760px) {
  .about-experience-copy { font-size: 16px !important; line-height: 1.58 !important; }
  .about-experience-copy p { font-size: inherit !important; line-height: inherit !important; }
  .work-page .work-project .work-copy,
  .work-project .work-copy { min-width: 0 !important; max-width: 100% !important; }
  .work-page .work-project .work-copy h2,
  .work-page .work-project-mossback .work-copy h2,
  .work-project h2, .work-copy h2 {
    font-size: clamp(35px, 10vw, 48px) !important;
    line-height: .96 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  .work-project .work-copy p { font-size: 16px !important; line-height: 1.55 !important; max-width: 100% !important; }
  .work-page .archive-grid-print,
  .archive-grid.archive-grid-print {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }
  .archive-grid-print > .archive-piece {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .archive-grid-print .archive-art { width: 100% !important; }
}

/* v178: IBM Plex Sans for body text; condensed headlines and mono accents retained. */
body{font-family:"IBM Plex Sans",Arial,Helvetica,sans-serif;font-size:16px;font-weight:400}
@media(max-width:760px){.about-experience p,.work-project p,.work-project-copy p,.featured p,.about-page p,.case-page p{font-size:16px;line-height:1.55}}

/* v179 — consistent, slightly smaller Studio42 display typography.
   Applies to site headings, not artwork, logos, or client brand graphics. */
:root { --studio-display-tracking: .012em; }
body:not(.goose-case):not(.mossback-case):not(.sauced-case) :is(.hero h1,.page-hero h1,.work-hero h1,.about-hero h1,.services-hero h1,.contact-hero h1,.work-archive-head h2,.work-category-title h3,.featured h2,.more-work h2,.process-head h2) {
  letter-spacing:var(--studio-display-tracking) !important;
  line-height:.91 !important;
}
/* The oversized More Work / Less Talk heading was the most crowded. */
.work-page .work-archive-head h2,
.work-archive-head h2 {
  font-size:clamp(58px,7.6vw,122px) !important;
  letter-spacing:.015em !important;
  line-height:.96 !important;
  margin-bottom:40px !important;
}
/* Reduce other main page-level hero headlines gently, without changing their weights. */
body:not(.goose-case):not(.mossback-case):not(.sauced-case) :is(.hero h1,.page-hero h1,.work-hero h1,.about-hero h1,.services-hero h1,.contact-hero h1) {
  font-size:clamp(64px,7.2vw,124px) !important;
}
@media(max-width:760px){
  .work-page .work-archive-head h2,.work-archive-head h2 {
    font-size:clamp(44px,12vw,74px) !important;
    line-height:.97 !important;
    margin-bottom:26px !important;
  }
  body:not(.goose-case):not(.mossback-case):not(.sauced-case) :is(.hero h1,.page-hero h1,.work-hero h1,.about-hero h1,.services-hero h1,.contact-hero h1) {
    font-size:clamp(48px,11.5vw,76px) !important;
    letter-spacing:.012em !important;
    overflow-wrap:normal;
  }
}

/* v180: deliberate two-line desktop hero and a slightly smaller Plex Sans body. */
@media (min-width: 761px) {
  body.home-page main#top > .hero .hero-copy h1 .hero-line { display:block !important; white-space:nowrap; margin-right:0 !important; }
  body.home-page main#top > .hero .hero-copy h1 { font-size:clamp(58px,6.2vw,112px) !important; }
}
@media (max-width:760px) {
  body.home-page main#top > .hero .hero-copy h1 .hero-line { display:block; white-space:normal; }
}
body { font-size:15px; }
/* Adjust reading copy without shrinking the mono labels or display headings. */
body:not(.goose-case):not(.mossback-case):not(.sauced-case) :is(.hero-copy p:not(.micro),.about-experience p,.work-project p,.work-project-copy p,.featured p,.about-page p,.services-page p,.contact-page p,.work-archive-head > p:not(.micro)) { font-size:15px; line-height:1.6; }

/* v181 — compact desktop homepage hero; mobile layout remains unchanged. */
@media (min-width: 901px) {
  body.home-page main#top > .hero {
    min-height: 350px !important;
    padding-top: 54px !important;
    padding-bottom: 24px !important;
  }
  body.home-page main#top > .hero .hero-micro {
    margin-top: 27px !important;
  }
}
/* Smaller IBM Plex Sans reading text, without changing display or mono labels. */
body { font-size: 14px; }
body:not(.goose-case):not(.mossback-case):not(.sauced-case) :is(
 .hero-copy p:not(.micro), .about-experience p, .work-project p,
 .work-project-copy p, .featured p, .about-page p,
 .services-page p, .contact-page p, .work-archive-head > p:not(.micro)
) { font-size: 14px !important; line-height: 1.65 !important; }
@media (max-width:760px) {
  body:not(.goose-case):not(.mossback-case):not(.sauced-case) :is(
    .about-experience-copy, .about-experience-copy p,
    .work-project .work-copy p
  ) { font-size:14px !important; line-height:1.65 !important; }
}

/* v182: lighter IBM Plex Sans reading text, 15px; retain display and mono labels. */
body {font-family:"IBM Plex Sans",Arial,Helvetica,sans-serif; font-size:15px; font-weight:300;}
body :is(p,li):not(.micro):not(.eyebrow):not(.form-note):not(.hero-micro) {font-weight:300;}
body :is(p,li) strong {font-weight:500;}
body:not(.goose-case):not(.mossback-case):not(.sauced-case) :is(
 .hero-copy p:not(.micro), .about-experience p, .work-project p,
 .work-project-copy p, .featured p, .about-page p,
 .services-page p, .contact-page p, .work-archive-head > p:not(.micro)
) {font-size:15px !important;line-height:1.6 !important;font-weight:300 !important;}
@media(max-width:760px) {
 body:not(.goose-case):not(.mossback-case):not(.sauced-case) :is(
  .about-experience-copy,.about-experience-copy p,.work-project .work-copy p
 ) {font-size:15px !important;line-height:1.6 !important;font-weight:300 !important;}
}

/* v183 — intentional mobile headline wrapping only. Desktop remains unchanged. */
@media (max-width:760px) {
  body.home-page main#top > .hero .hero-copy h1 {
    font-size:clamp(39px,10vw,58px) !important;
    max-width:100% !important;
    overflow-wrap:normal !important;
  }
  body.home-page main#top > .hero .hero-copy h1 .hero-line {
    display:block !important;
    white-space:normal !important;
  }
  body.home-page main#top > .hero .hero-copy h1 .hero-mobile-for {
    display:block !important;
  }
  .work-project-mossback .work-copy h2 .mossback-name-first,
  .work-project-mossback .work-copy h2 .mossback-name-second {
    display:block;
    white-space:nowrap;
  }
  .work-project-mossback .work-copy h2 {
    font-size:clamp(40px,10.4vw,65px) !important;
    line-height:.98 !important;
    max-width:100% !important;
  }
}

/* v184 — mobile hero: intentional two-line layout, with open tracking.
   Desktop hero and all other site sections remain unchanged. */
@media (max-width:760px) {
  body.home-page main#top > .hero .hero-copy h1 {
    max-width:100% !important;
    letter-spacing:.018em !important;
    line-height:1.03 !important;
  }
  body.home-page main#top > .hero .hero-copy h1 .hero-line {
    display:block !important;
    white-space:nowrap !important;
    letter-spacing:.018em !important;
    line-height:1.03 !important;
  }
  body.home-page main#top > .hero .hero-copy h1 .hero-line:first-child {
    font-size:clamp(25px,7.3vw,45px) !important;
    margin-right:0 !important;
  }
  body.home-page main#top > .hero .hero-copy h1 .hero-line:last-child {
    font-size:clamp(40px,11vw,66px) !important;
  }
  body.home-page main#top > .hero .hero-copy h1 .hero-mobile-for {
    display:inline !important;
  }
}

/* v185 — matching headline size and tracking on both mobile lines. */
@media (max-width:760px) {
  body.home-page main#top > .hero .hero-copy h1,
  body.home-page main#top > .hero .hero-copy h1 .hero-line,
  body.home-page main#top > .hero .hero-copy h1 .hero-line:first-child,
  body.home-page main#top > .hero .hero-copy h1 .hero-line:last-child {
    font-size:clamp(30px,8.6vw,46px) !important;
    letter-spacing:.022em !important;
    line-height:1.06 !important;
  }
  body.home-page main#top > .hero .hero-copy h1 .hero-line {
    display:block !important;
    white-space:nowrap !important;
  }
  body.home-page main#top > .hero .hero-copy h1 .hero-mobile-for {
    display:inline !important;
  }
}

/* v186 — slightly larger equal-size two-line homepage hero on mobile only. */
@media (max-width:760px) {
  body.home-page main#top > .hero .hero-copy h1,
  body.home-page main#top > .hero .hero-copy h1 .hero-line,
  body.home-page main#top > .hero .hero-copy h1 .hero-line:first-child,
  body.home-page main#top > .hero .hero-copy h1 .hero-line:last-child {
    font-size:clamp(33px,9.4vw,51px) !important;
    letter-spacing:.022em !important;
    line-height:1.06 !important;
  }
}

/* v187 — About page spacing and mobile process refinement */
body.about-page .process-head h2{font-size:clamp(44px,5vw,62px) !important;line-height:1.02 !important;letter-spacing:.012em !important;}
body.about-page .process-head{margin-bottom:20px !important;}
body.about-page .about-experience{padding-bottom:20px !important;}
body.about-page .about-experience h2{margin-bottom:20px !important;}
body.about-page .process-grid .paper-card{padding:20px 19px 22px !important;min-height:0 !important;}
body.about-page .process-grid .paper-card h3{margin:17px 0 8px !important;}
body.about-page .process-grid .paper-card p{margin-bottom:0 !important;}
@media(max-width:900px){
 body.about-page .about-hero{row-gap:20px !important;}
 body.about-page .about-hero .intro{margin-top:0 !important;}
 body.about-page .about-experience-top{row-gap:20px !important;}
 body.about-page .process-grid{gap:16px !important;}
 body.about-page .process-grid .kc-card{grid-column:1/-1 !important;justify-self:center !important;width:min(68%,310px) !important;margin:16px auto 0 !important;}
}
@media(max-width:600px){
 body.about-page .process-head h2{font-size:clamp(39px,9vw,54px) !important;white-space:nowrap !important;}
 body.about-page .process-head .micro{margin-top:8px !important;}
 body.about-page .process-grid .paper-card{padding:18px 18px 20px !important;}
 body.about-page .process-grid .paper-card h3{margin:15px 0 7px !important;}
 body.about-page .about-experience-copy p+p{margin-top:14px !important;}
}

/* v188: compact desktop About hero and restore mobile title-to-copy breathing room. */
@media(min-width:901px){body.about-page .about-hero{min-height:350px!important;padding-top:56px!important;padding-bottom:52px!important;gap:5vw!important;}}
@media(max-width:900px){body.about-page .about-hero .intro{margin-top:30px!important;}}

/* v189: Desktop-only hero side elements arranged as one balanced horizontal group. */
@media (min-width: 901px) {
  body.home-page main#top > .hero {
    grid-template-columns: minmax(0,1fr) minmax(310px, 23vw) !important;
    column-gap: clamp(20px, 2.5vw, 54px) !important;
    align-items:center !important;
  }
  body.home-page main#top > .hero > .hero-side {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:clamp(24px,2.3vw,48px) !important;
    padding:0 !important;
    align-self:center !important;
  }
  body.home-page main#top > .hero .service-stack {
    flex:0 0 auto !important;
    margin:0 !important;
    line-height:1.5 !important;
  }
  body.home-page main#top > .hero .sticker {
    flex:0 0 auto !important;
    margin:0 !important;
    transform:rotate(-4deg) translateY(12px) !important;
  }
}

.sg-lifestyle-hero{width:100%;background:#10271d;overflow:hidden}.sg-lifestyle-hero img{display:block;width:100%;height:auto}

/* Launch: three featured projects, with Flair temporarily hidden. */
@media (min-width:701px){body.home-page .featured .project-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}

/* v195: editorial featured-work composition: Mossback hero + paired project cards */
@media (min-width: 901px) {
 .work-page .work-project-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:#0b0b0b;}
 .work-page .work-project-pair .work-project,
 .work-page .work-project-pair .work-project.reverse {display:flex !important;flex-direction:column !important;height:auto !important;min-height:0 !important;max-height:none !important;grid-auto-rows:auto !important;overflow:hidden !important;}
 .work-page .work-project-pair .work-project > .work-visual {order:0 !important;width:100% !important;height:clamp(300px,30vw,470px) !important;min-height:0 !important;max-height:none !important;padding:0 !important;margin:0 !important;}
 .work-page .work-project-pair .work-project > .work-visual img {width:100% !important;height:100% !important;object-fit:cover !important;}
 .work-page .work-project-pair .work-project > .work-copy {order:1 !important;flex:1 !important;width:100% !important;height:auto !important;min-height:345px !important;max-height:none !important;margin:0 !important;padding:42px clamp(26px,3.4vw,66px) 48px !important;display:flex !important;flex-direction:column !important;align-items:flex-start !important;}
 .work-page .work-project-pair .work-project h2 {font-size:clamp(45px,4vw,72px) !important;line-height:.9 !important;white-space:normal !important;margin:14px 0 16px !important;}
 .work-page .work-project-pair .work-project p {margin:0 0 24px !important;max-width:520px !important;}
 .work-page .work-project-pair .work-project .work-link {margin-top:auto !important;}
 .work-page .work-project-pair .work-project-goose .work-copy {background:#C7DA2C !important;color:#080808 !important;}
 .work-page .work-project-pair .work-project-sauced .work-copy {background:#f4f0e7 !important;color:#080808 !important;}
 .work-page .work-project-pair .work-project-goose .work-link {background:#080808 !important;color:#f4f0e7 !important;}
 .work-page .work-project-pair .work-project-goose .work-link span {color:#f4f0e7 !important;}
 .work-page .work-project-pair .work-project-goose .work-link:hover {background:#f4f0e7 !important;color:#080808 !important;}
 .work-page .work-project-pair .work-project-goose .work-link:hover span {color:#080808 !important;}
 .work-page .work-project-pair .work-project-sauced .work-link {background:#080808 !important;color:#f4f0e7 !important;}
 .work-page .work-project-pair .work-project-sauced .work-link span {color:#f4f0e7 !important;}
}
@media (max-width:900px) { .work-page .work-project-pair {display:block;} }

/* v196: consistent 8px gutters and seamless Mossback split */
.work-page .work-project-mossback > .work-visual,
.work-page .work-project-mossback > .work-copy {border:0 !important;outline:0 !important;box-shadow:none !important;}
.work-page .work-project-mossback > .work-copy {border-left:0 !important;}
.work-page .work-project-pair {margin-top:8px !important;gap:8px !important;}
@media(max-width:900px){.work-page .work-project-pair{margin-top:8px !important;}}

/* v197: all three featured cards float over the same textured black canvas. */
.work-page .work-featured-grid {
  padding:8px !important;
  background-color:#0b0b0b !important;
  background-image:url('assets/texture-retro.webp'),url('assets/texture-shabby-hires.webp') !important;
  background-size:920px auto,760px auto !important;
  background-position:center top,center center !important;
  background-repeat:repeat !important;
}
.work-page .work-featured-grid > .work-project-mossback {margin:0 !important;border:0 !important;}
.work-page .work-featured-grid > .work-project-pair {margin-top:8px !important;gap:8px !important;background:transparent !important;}
.work-page .work-featured-grid .work-project {border:0 !important;outline:0 !important;box-shadow:none !important;}
.work-page .work-featured-grid .work-project > .work-visual,
.work-page .work-featured-grid .work-project > .work-copy {border:0 !important;outline:0 !important;box-shadow:none !important;}
@media(max-width:900px){
  .work-page .work-featured-grid > .work-project-pair {margin-top:8px !important;}
  .work-page .work-featured-grid .work-project-pair .work-project + .work-project {margin-top:8px !important;}
}


/* v198 — Sauced & Tossed: correct mobile hero layout only.
   Override the desktop two-column rule that used !important. */
@media (max-width: 900px) {
  .sauced-case .case-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }
  .sauced-case .case-hero-copy {
    min-width: 0 !important;
  }
  .sauced-case .case-hero-art {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    padding: 18px 7vw 44px !important;
    background: #0a0a0a !important;
  }
  .sauced-case .case-hero-art img {
    display: block !important;
    width: min(100%, 680px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}
@media (max-width: 600px) {
  .sauced-case .case-hero-art {
    padding: 8px 22px 34px !important;
  }
}


/* v199 — Sauced & Tossed Event Series: compact 2 x 2 mobile gallery.
   Keep desktop untouched and preserve each poster's natural proportions. */
@media (max-width: 600px) {
  .sauced-case .case-events .poster-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  .sauced-case .case-events .poster-grid figure {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .sauced-case .case-events .poster-grid img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}/* Keep testimonial navigation arrows black on mobile */
@media (max-width: 768px) {
  .testimonial-prev,
  .testimonial-next,
  .testimonial-arrows button,
  .testimonial-controls button {
    color: #000 !important;
  }

  .testimonial-prev svg,
  .testimonial-next svg,
  .testimonial-arrows svg,
  .testimonial-controls svg {
    color: #000 !important;
    stroke: #000 !important;
  }
}


/* v200 — Studio42 testimonial arrows: override iOS Safari blue links/icons. */
.testimonial .testimonial-controls button,
.testimonial .testimonial-controls button *,
.testimonial .testimonial-controls a,
.testimonial .testimonial-controls a:link,
.testimonial .testimonial-controls a:visited,
.testimonial .testimonial-controls a:hover,
.testimonial .testimonial-controls a:active,
.testimonial .testimonial-controls a *,
.testimonial .testimonial-controls svg,
.testimonial .testimonial-controls svg * {
  color: #0b0b0b !important;
  -webkit-text-fill-color: #0b0b0b !important;
  stroke: #0b0b0b !important;
  text-decoration-color: #0b0b0b !important;
}
.testimonial .testimonial-controls button {
  -webkit-appearance: none;
  appearance: none;
}
.testimonial .testimonial-controls button:hover {
  background: #111;
  color: #ff525e !important;
  -webkit-text-fill-color: #ff525e !important;
}
.testimonial .testimonial-controls button:hover *,
.testimonial .testimonial-controls button:hover svg,
.testimonial .testimonial-controls button:hover svg * {
  color: #ff525e !important;
  -webkit-text-fill-color: #ff525e !important;
  stroke: #ff525e !important;
}

/* v201: iOS Safari testimonial controls, including focus/active states */
.testimonial .testimonial-controls #prev,
.testimonial .testimonial-controls #next { color:#0b0b0b !important; -webkit-text-fill-color:#0b0b0b !important; -webkit-appearance:none; appearance:none; }
.testimonial .testimonial-controls #prev:focus,
.testimonial .testimonial-controls #next:focus,
.testimonial .testimonial-controls #prev:active,
.testimonial .testimonial-controls #next:active { color:#0b0b0b !important; -webkit-text-fill-color:#0b0b0b !important; }
@media (hover:hover) {
 .testimonial .testimonial-controls #prev:hover,
 .testimonial .testimonial-controls #next:hover {color:#ff525e !important; -webkit-text-fill-color:#ff525e !important;}
}


/* Mobile header navigation: larger labels, same single-row layout */
@media (max-width: 600px) {
  .topbar { grid-template-columns: 84px minmax(0, 1fr); }
  .topbar .nav {
    font-size: 12px !important;
    gap: clamp(7px, 2.2vw, 12px) !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    min-width: 0;
  }
  .topbar .nav a { font-size: inherit !important; }
}

/* Mobile navigation: a touch more room between the four links */
@media (min-width: 390px) and (max-width: 600px) {
  .topbar .nav { gap: 14px !important; }
}