/* BUILD 04 / FINAL OPTICAL AND RESPONSIVE PASS
   All previous styles remain available; only scoped adjustments below.
   Keep media files replaceable via media.js.
*/
html{scroll-padding-top:0}
.hero h1{overflow:visible;line-height:1.01;letter-spacing:-.092em;padding:.065em .10em .11em .035em;margin-left:-.035em;max-width:min(100%,1250px)}
.hero h1 em{display:inline-block;padding-inline:.06em;line-height:1.02;vertical-align:baseline}
.hero-stage{position:relative;overflow:visible}
.hero .butterfly-spot{width:clamp(235px,48vw,700px);aspect-ratio:1.4;right:-2vw;top:14%;opacity:.73;transform:none;mix-blend-mode:multiply;z-index:0}
.hero .butterfly-spot img{object-fit:contain;object-position:center;-webkit-mask-image:none;mask-image:none;filter:saturate(1.12) contrast(1.03)}
.hero-stage h1{z-index:2}
.hero-lower{display:grid;grid-template-columns:minmax(100px,1fr) minmax(320px,.85fr);gap:clamp(20px,4vw,64px);align-items:end}
.film-quote{grid-column:2;grid-row:1;margin:0;max-width:590px;justify-self:end}
.film-quote blockquote{margin:0;font-size:clamp(16px,1.65vw,25px);font-weight:500;line-height:1.32;letter-spacing:-.026em}
.film-quote .quote-credit{display:block;margin-top:12px;font:500 11px/1.45 var(--mono);letter-spacing:.035em}
.film-quote cite{font-style:normal;text-decoration:underline;text-underline-offset:2px}
.hero-lower .arrow-link{grid-column:1;grid-row:1;align-self:end;justify-self:start}
.about-heading h2{margin-top:clamp(104px,9vw,145px);line-height:.98}
.about-heading .handwriting{font-size:clamp(90px,10vw,160px);top:-.82em;left:.01em;letter-spacing:0;transform:rotate(-5deg)}
.about-heading .loose-redact:after{height:.31em;top:43%}
.work-title{grid-template-columns:minmax(0,1.25fr) minmax(230px,.65fr);align-items:end;gap:clamp(25px,4vw,70px)}
.work-title h2{font-size:clamp(65px,8.6vw,146px);line-height:.96;padding:.05em .08em .05em 0}
.work-intro{max-width:400px;margin-left:auto}
.work-intro blockquote{font:italic clamp(26px,3vw,48px)/1.04 var(--serif);margin:0}
.work-intro small{display:block;font:500 10px/1.5 var(--mono);letter-spacing:.035em;margin-top:8px}
.work-title .work-intro p{font-size:clamp(16px,1.35vw,20px);max-width:360px;line-height:1.45;margin:23px 0 0}
.tile-systems .tile-visual::before{display:block;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 52%);z-index:2}
.tile-systems .tile-visual>video{object-fit:cover;object-position:center;filter:saturate(1.04)}
.tile-systems .tile-text{font-size:clamp(62px,8vw,142px);color:#fff;max-width:94%}
.tile-systems .tile-text em{color:#fcf1b4}
.method{position:relative;isolation:isolate;overflow:hidden}
.method .kicker,.method h2,.method-bottom{position:relative;z-index:2}
.method-butterflies{position:absolute;top:6%;right:-4%;width:min(66vw,1000px);height:90%;object-fit:contain;object-position:center;mix-blend-mode:multiply;opacity:.34;pointer-events:none;z-index:0}
.method h2{max-width:1300px}
.case-wrap .story-block{padding-block:clamp(50px,6vw,96px)}
.case-wrap .film-mosaic{margin-block:clamp(25px,4vw,65px)}
.case-wrap .media-film figcaption{font-size:clamp(11px,.85vw,13px);line-height:1.45;margin-top:2px}
.model-with-film{grid-template-columns:minmax(250px,.9fr) minmax(0,1.35fr);align-items:start}
.model-with-film .model-visual{min-width:0;display:flex;flex-direction:column;gap:30px}
.model-with-film .model-door{width:100%;max-width:420px;align-items:start;margin:0}
.model-with-film .model-door video{width:100%;height:auto;max-height:460px;object-fit:contain;object-position:center;margin:0;background:transparent}
.model-with-film .model-door figcaption{align-self:start;text-align:left;font-size:12px}
.model-with-film>div:last-child h2{margin-top:0}
.campaign-section{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px;column-gap:clamp(18px,3vw,42px)}
.campaign-title{display:flex;flex-direction:column;gap:0;align-items:center;text-align:center;max-width:100%;width:100%;margin:0 auto clamp(12px,2vw,35px)}
.campaign-title>span{align-self:flex-start;margin:0 0 25px;text-align:left}
.campaign-title h2{font-size:clamp(40px,6.5vw,93px);font-weight:700;letter-spacing:-.077em;line-height:1.12;margin:0 0 18px;max-width:100%;text-wrap:balance;overflow-wrap:normal}
.campaign-title h2.ntwi-title{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.073em;white-space:normal}
.campaign-title p{font-size:clamp(17px,1.5vw,23px);line-height:1.4;grid-column:auto;max-width:820px;margin:0;text-align:center}
.campaign-section>.media-film{width:100%;max-width:none;min-width:0;margin:10px 0}
.campaign-section>.media-film video{width:100%;height:auto;max-height:min(70svh,780px);object-fit:contain}
.campaign-section>.media-film figcaption{text-align:center}
.film-mosaic{align-items:start}
.film-mosaic .media-film{height:auto;align-self:start;justify-content:flex-start}
.film-mosaic .media-film video{max-width:100%;margin-inline:auto}
.film-mosaic .media-film figcaption{width:100%;max-width:100%;text-align:center}
.receipt-case-visual{max-width:min(560px,100%);margin:clamp(35px,5vw,70px) auto;align-items:center}
.receipt-case-visual video{display:block;width:min(100%,420px);height:auto;max-height:min(75svh,680px);object-fit:contain;background:transparent}
.receipt-case-visual figcaption{text-align:center}
@media(max-width:1100px){
.hero .butterfly-spot{right:-5%;width:min(55vw,520px)}
.hero-lower{grid-template-columns:.35fr 1fr}
.film-quote{max-width:510px}
.model-with-film{grid-template-columns:minmax(215px,.72fr) minmax(0,1.25fr);gap:32px}
}
@media(max-width:740px){
.hero h1{font-size:clamp(44px,10.2vw,82px);line-height:1.06;padding:.07em .11em .08em .02em;letter-spacing:-.09em}
.hero .butterfly-spot{width:72vw;right:-12%;top:25%;opacity:.55}
.hero-lower{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.film-quote{max-width:100%;align-self:flex-end}
.film-quote blockquote{font-size:clamp(14px,3.3vw,18px);line-height:1.32}
.hero-lower .arrow-link{align-self:flex-start;margin-top:4px}
.about-heading h2{margin-top:115px;line-height:.97}
.about-heading .handwriting{font-size:clamp(85px,20vw,124px);top:-.83em;left:0}
.work-title{display:block;margin-block:35px 35px}
.work-title h2{font-size:clamp(57px,11.5vw,89px)}
.work-intro{max-width:none;margin:20px 0 0}
.work-title .work-intro p{max-width:440px;margin-top:17px}
.tile-systems .tile-text{font-size:clamp(59px,15.5vw,84px);line-height:.83}
.method-butterflies{width:110vw;top:10%;right:-31%;opacity:.22}
.case-wrap .story-block{padding-block:clamp(42px,9vw,66px)}
.model-with-film{display:flex;flex-direction:column;gap:25px}
.model-with-film .model-visual{width:100%;gap:14px}
.model-with-film .model-door{margin:4px auto 0;max-width:min(90%,430px);align-items:center}
.model-with-film .model-door video{max-height:64svh;width:100%}
.model-with-film .model-door figcaption{align-self:center}
.campaign-section{grid-template-columns:1fr;gap:24px;padding:clamp(40px,9vw,70px) 0}
.campaign-title{grid-column:1;text-align:center}
.campaign-title>span{align-self:flex-start}
.campaign-title h2{font-size:clamp(34px,7.5vw,65px);line-height:1.08;margin:0 0 16px}
.campaign-title h2.ntwi-title{font-size:clamp(30px,7.2vw,60px)}
.campaign-title p{font-size:clamp(15px,4vw,19px)}
.campaign-section>.media-film{grid-column:1;max-width:min(100%,450px);margin:0 auto}
.campaign-section>.media-film video{width:100%;max-height:none}
.film-mosaic.mosaic-2,.film-mosaic.mosaic-3{display:grid;grid-template-columns:1fr!important;gap:clamp(28px,7vw,55px);justify-items:stretch}
.film-mosaic .media-film{width:100%;max-width:min(100%,450px);margin:auto}
.film-mosaic .media-film video{height:auto;max-width:100%;width:100%;max-height:none;object-fit:contain}
.film-mosaic .media-film figcaption{text-align:center;margin-top:8px}
body.welcome-mat .film-mosaic .media-film video{aspect-ratio:1!important;object-fit:cover}
}
@media(max-width:420px){
.hero h1{font-size:clamp(43px,10.1vw,55px);padding-right:.12em}
.hero .butterfly-spot{top:27%;width:73vw}
.film-quote blockquote{font-size:14px}
.about-heading h2{font-size:clamp(58px,14vw,76px)}
.about-heading .handwriting{font-size:clamp(80px,21vw,106px)}
.campaign-title h2.ntwi-title{font-size:clamp(28px,7.1vw,41px)}
}
@media(max-height:650px) and (min-width:741px){
.hero{height:auto;min-height:calc(100svh - var(--header-height))}
.hero-lower{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.method-butterflies{opacity:.23}}

/* Landscape viewport: keep the oversized monarch art inside the hero bounds. */
@media (max-height:540px) and (min-width:741px){.hero .butterfly-spot{right:0;max-width:48vw}.method-butterflies{right:0}}

/* Final editorial refinements / Nov 2026 */
.film-quote blockquote{font-style:italic}
.about-heading h2{margin-top:clamp(150px,11vw,190px)}
.about-heading .handwriting{font-size:clamp(117px,13vw,208px);top:-.71em;left:.01em;right:auto;z-index:2;line-height:1;overflow:visible}
.about-heading .loose-redact{z-index:1}
.work-title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,3vw,46px);text-align:center}
.work-title h2{margin:0;max-width:100%;text-align:center}
.work-intro{margin:0 auto;max-width:min(100%,650px);text-align:center}
.work-intro blockquote{text-align:center;font-size:clamp(30px,3.4vw,54px)}
.work-intro .quote-translation{display:block;margin-top:6px;font:italic clamp(17px,1.8vw,24px)/1.24 var(--serif)}
.work-intro small{display:block;margin:12px auto 0;max-width:430px;font-size:clamp(9px,.86vw,11px);line-height:1.5;letter-spacing:.015em;text-wrap:balance}
.work-title .work-intro p{max-width:580px;margin:clamp(24px,3vw,40px) auto 0;font-size:clamp(16px,1.45vw,21px);line-height:1.45}
.receipt-story{grid-template-columns:minmax(230px,.9fr) minmax(0,1.35fr);align-items:start}
.receipt-story-side{min-width:0;display:flex;flex-direction:column;align-items:center}
.receipt-story-side .kicker{width:100%;margin-top:11px}
.receipt-story .receipt-case-visual{width:100%;max-width:410px;margin:clamp(24px,3vw,44px) auto 0;align-items:center}
.receipt-story .receipt-case-visual video{width:100%;max-width:350px;max-height:min(75svh,690px)}
.receipt-story .receipt-case-visual figcaption{text-align:center;align-self:center}
.receipt-story>div:last-child h2{margin-top:0}
.model-with-film .model-door figcaption{align-self:center;text-align:center;width:100%}
.timeline strong{display:block;line-height:1.35;margin-top:12px;letter-spacing:.012em}
.collab-split h2{overflow-wrap:normal;text-wrap:balance}
@media(max-width:900px){
  .receipt-story{grid-template-columns:minmax(185px,.75fr) minmax(0,1.4fr);gap:clamp(18px,3vw,34px)}
  .receipt-story .receipt-case-visual video{max-width:100%}
}
@media(max-width:740px){
  .about-heading h2{margin-top:clamp(150px,20vw,180px)}
  .about-heading .handwriting{font-size:clamp(110px,26vw,161px);top:-.7em;left:0}
  .work-title{gap:clamp(20px,5vw,38px);margin-block:35px}
  .work-intro{max-width:min(100%,550px)}
  .work-title .work-intro p{max-width:440px}
  .receipt-story{display:flex;flex-direction:column;gap:clamp(22px,5vw,42px)}
  .receipt-story-side{width:100%;gap:16px}
  .receipt-story .receipt-case-visual{max-width:min(100%,350px);margin:0 auto}
  .receipt-story .receipt-case-visual video{max-height:65svh}
  .receipt-story>div:last-child h2{margin-top:0}
}
@media(max-width:420px){
  .about-heading .handwriting{font-size:clamp(104px,27.3vw,138px);top:-.68em;left:0}
  .work-title h2{font-size:clamp(51px,11vw,66px)}
}


/* Final-review composition: only scoped to these deliberately revised modules. */
.work-title{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr) minmax(0,1.02fr);
  align-items:center;
  justify-content:stretch;
  gap:clamp(20px,2.55vw,44px);
  margin:clamp(40px,6vw,90px) auto clamp(42px,5vw,70px);
  text-align:left;
  width:100%;
  max-width:var(--max-width);
}
.work-title>h2{
  min-width:0;
  font-size:clamp(56px,5.5vw,90px);
  line-height:.98;
  text-align:left;
  padding:.06em .02em .08em 0;
  letter-spacing:-.087em;
}
.work-title>.work-intro{width:100%;min-width:0;max-width:none;margin:0;text-align:center;align-self:center}
.work-title>.work-intro blockquote{font-size:clamp(28px,2.65vw,44px);text-align:center;line-height:1.08}
.work-title>.work-intro .quote-translation{font-size:clamp(16px,1.5vw,21px)}
.work-title>.work-intro small{max-width:315px;margin:9px auto 0;font-size:clamp(10px,.74vw,11px);line-height:1.5;text-wrap:balance}
.work-title>.work-pitch{display:flex;align-items:center;min-width:0;justify-content:flex-start}
.work-title>.work-pitch p{
  font-size:clamp(17px,1.45vw,23px);
  line-height:1.42;
  max-width:400px;
  margin:0;
  text-align:left;
  text-wrap:pretty;
}
.hero .butterfly-spot{
  width:clamp(310px,45vw,650px);
  aspect-ratio:1;
  right:0;
  top:9%;
  opacity:.73;
  z-index:0;
  mix-blend-mode:multiply;
  transform:none;
}
.hero .butterfly-spot img{
  object-fit:contain;
  object-position:center;
  filter:none;
  opacity:1;
  -webkit-mask-image:none;
  mask-image:none;
}
.method .method-butterflies{
  width:clamp(175px,27vw,360px);
  height:auto;
  aspect-ratio:1;
  top:14%;
  right:clamp(6px,5vw,90px);
  opacity:.34;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.contact-section{position:relative;isolation:isolate}
.contact-section .contact-butterfly{
  position:absolute;
  width:clamp(85px,9vw,130px);
  height:auto;
  right:clamp(28px,5vw,85px);
  top:clamp(80px,9vw,142px);
  opacity:.55;
  object-fit:contain;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}
.contact-section>.section-titleline,.contact-section>h2,.contact-section>.contact-intro,.contact-section>form{position:relative;z-index:1}
.case-wrap .story-with-feature{
  display:grid;
  grid-template-columns:minmax(225px,.82fr) minmax(0,1.35fr);
  align-items:start;
  gap:clamp(28px,4.5vw,75px);
}
.story-with-feature .story-feature-aside{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  gap:clamp(18px,3vw,32px);
}
.story-feature-aside .kicker{
  display:block;
  margin-top:11px;
}
.story-with-feature>div:last-child h2{margin-top:0}
.story-feature-film{
  display:flex;
  width:100%;
  max-width:410px;
  flex-direction:column;
  margin:0 auto;
  align-items:center;
}
.story-feature-film video{
  display:block;
  width:100%;
  height:auto;
  max-height:min(70svh,720px);
  aspect-ratio:auto!important;
  object-fit:contain;
  background:transparent;
  margin-inline:auto;
}
.story-feature-film figcaption{
  max-width:100%;
  align-self:center;
  text-align:center;
}
.story-feature-illustration{
  display:block;
  width:100%;
  margin:0 auto;
  max-width:440px;
  background:transparent;
}
.story-feature-illustration img{
  display:block;
  width:100%;
  height:auto;
  max-height:530px;
  object-fit:contain;
  object-position:center;
}
@media(max-width:1170px){
  .work-title{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    justify-content:center;
    gap:clamp(18px,3vw,35px);
    margin-block:35px 45px;
  }
  .work-title>h2{
    text-align:center;
    font-size:clamp(65px,8vw,98px);
    align-self:center;
  }
  .work-title>.work-intro{max-width:600px;align-self:center}
  .work-title>.work-intro blockquote{font-size:clamp(31px,4vw,48px)}
  .work-title>.work-pitch{justify-content:center}
  .work-title>.work-pitch p{max-width:570px;text-align:center}
}
@media(max-width:740px){
  .work-title{gap:clamp(22px,5vw,32px);margin-block:36px 42px}
  .work-title>h2{font-size:clamp(56px,11.5vw,85px);text-align:center}
  .work-title>.work-intro{max-width:510px}
  .work-title>.work-pitch p{max-width:450px;font-size:clamp(16px,4vw,19px)}
  .hero .butterfly-spot{
    width:min(65vw,340px);
    right:-1vw;
    top:18%;
    opacity:.65;
  }
  .method .method-butterflies{
    width:clamp(130px,32vw,230px);
    height:auto;
    top:10%;
    right:1.5%;
    opacity:.26;
  }
  .contact-section .contact-butterfly{
    width:clamp(62px,16vw,95px);
    top:clamp(80px,17vw,145px);
    right:var(--edge);
    opacity:.40;
  }
  .case-wrap .story-with-feature{
    display:flex;
    flex-direction:column;
    gap:clamp(19px,5vw,34px);
  }
  .story-with-feature .story-feature-aside{width:100%;gap:clamp(15px,4vw,27px)}
  .story-feature-film{max-width:min(100%,380px);margin-inline:auto}
  .story-feature-film video{max-height:70svh}
  .story-feature-illustration{max-width:min(88%,400px)}
  .story-feature-illustration img{max-height:380px}
}
@media(max-width:420px){
  .work-title>h2{font-size:clamp(50px,11.5vw,64px)}
  .work-title>.work-intro blockquote{font-size:clamp(27px,7.3vw,34px)}
  .hero .butterfly-spot{width:70vw;right:0;top:22%}
}
@media(max-height:540px) and (min-width:741px){
  .hero .butterfly-spot{right:0;width:min(38vw,430px)}
}
@media(prefers-reduced-motion:reduce){
  .hero .butterfly-spot,.method .method-butterflies,.contact-section .contact-butterfly{display:none}
}

/* Final mobile optical correction: keep butterfly away from the headline. */
@media (max-width:740px){
  .hero .butterfly-spot{
    width:min(51vw,230px);
    top:auto;
    bottom:clamp(10px,3vh,25px);
    right:1.5%;
    opacity:.70;
  }
}
@media (max-width:420px){
  .hero .butterfly-spot{
    width:min(49vw,190px);
    top:auto;
    bottom:clamp(8px,2.5vh,20px);
    right:1.5%;
  }
}


/* IAMELLIOTT FINAL ACCENT & OPTICAL FINISH — 10 NOV 2026
   Corazon is homepage-only. The case-study palettes and their hover colours
   are deliberately untouched. Change the colour in just this one variable. */
:root { --accent-corazon: #CC2208; }
body.home {
  --rust: var(--accent-corazon);
  --orange: var(--accent-corazon);
  --accent: var(--accent-corazon);
}
/* The homepage's Corazon contact panel needs readable, light form text. */
body.home .contact-section { color: #FFF4E9; }
body.home .contact-section .contact-intro { border-bottom-color: rgba(255,244,233,.55); }
body.home .contact-section .form-grid input,
body.home .contact-section .form-grid textarea { border-bottom-color: rgba(255,244,233,.65); color:#FFF4E9; }
body.home .contact-section .form-grid input::placeholder,
body.home .contact-section .form-grid textarea::placeholder { color:rgba(255,244,233,.76); }
body.home .contact-section .form-bottom button { background:#171917; color:#FFF4E9; }
body.home .contact-section .contact-link:hover { color:#fff3ae!important; }

/* Hero: same typefaces, but a larger, more decisive ending. */
body.home .hero h1 {
  font-size:clamp(84px,10.65vw,182px);
  line-height:.94;
  letter-spacing:-.095em;
  max-width:100%;
  padding-bottom:.13em;
}
body.home .hero h1 em {
  font-size:1.17em;
  letter-spacing:-.052em;
  padding-inline:.025em .10em;
  line-height:1;
}
body.home .hero-stage { align-items:center; }
body.home .hero .butterfly-spot {
  width:clamp(340px,49.5vw,715px);
  top:-10%;
  right:-1%;
  bottom:auto;
  opacity:.77;
}
/* Clear source attribution, scaled down to behave as a credit. */
body.home .film-quote .quote-credit {
  font-size:9px;
  line-height:1.45;
  letter-spacing:.055em;
}
/* Three true, equally weighted columns on wide desktops. */
body.home .work-title {
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:clamp(22px,2.6vw,46px);
}
body.home .work-title > h2 {
  width:100%;
  text-align:center;
  font-size:clamp(54px,5.2vw,89px);
  line-height:1.04;
}
body.home .work-title > .work-intro {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  text-align:center;
}
body.home .work-title > .work-pitch {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  text-align:center;
}
body.home .work-title > .work-pitch p {
  text-align:center;
  margin:0;
  max-width:365px;
  text-wrap:balance;
}
/* The yellow-on-black lower-third mimics the commercial's TV subtitles. */
body.home .work-title .quote-translation {
  display:table;
  width:max-content;
  max-width:100%;
  margin:9px auto 0;
  padding:5px 10px 6px;
  background:#111;
  color:#F5E646;
  border-radius:0;
  font:700 clamp(15px,1.35vw,20px)/1.12 Arial,Helvetica,sans-serif;
  letter-spacing:0;
  text-align:center;
  box-decoration-break:clone;
}
body.home .work-title > .work-intro small {
  display:block;
  font-size:9px;
  line-height:1.35;
  max-width:290px;
  margin:12px auto 0;
  letter-spacing:.01em;
}
/* About: preserve the handwritten-redaction effect, remove dead air. */
body.home .about-section { padding-block:clamp(48px,5.3vw,85px); }
body.home .about-heading h2 { margin-top:clamp(121px,9vw,155px);margin-bottom:clamp(15px,2vw,32px); }
body.home .portrait-frame { margin:clamp(24px,2.5vw,42px) 0 0 5%; }
body.home .method-bottom, body.home .method-bottom p { text-align:left; }
body.home .method .method-butterflies {
  width:clamp(210px,32.4vw,432px);
  transform:rotate(30deg);
  transform-origin:center;
}
/* On narrower screens, stack in reading order and keep every line legible. */
@media (max-width:1170px) {
  body.home .work-title { display:flex;flex-direction:column;gap:clamp(22px,3.4vw,38px); }
  body.home .work-title > h2 { font-size:clamp(62px,8vw,94px);text-align:center; }
  body.home .work-title > .work-pitch p { max-width:570px;text-align:center; }
}
@media (max-width:740px) {
  body.home .hero h1 {
    font-size:clamp(58px,13.8vw,98px);
    line-height:.96;
    letter-spacing:-.096em;
    padding-bottom:.11em;
  }
  body.home .hero h1 em { font-size:1.17em;letter-spacing:-.065em; }
  body.home .hero .butterfly-spot {
    width:min(60vw,268px);
    right:-1%;
    top:auto;
    bottom:clamp(22px,3.5vh,42px);
    opacity:.77;
  }
  body.home .about-section { padding:clamp(48px,7vw,75px) var(--edge); }
  body.home .about-heading h2 {
    margin-top:clamp(109px,15vw,128px);
    margin-bottom:15px;
  }
  body.home .portrait-frame {
    width:min(78%,440px);
    margin:clamp(40px,5vw,52px) auto clamp(25px,5vw,40px) 7%;
  }
  body.home .method .method-butterflies {
    width:clamp(156px,38.4vw,276px);
    transform:rotate(30deg);
    right:0;
    opacity:.25;
  }
  body.home .work-title > h2 { font-size:clamp(55px,11.6vw,86px); }
  body.home .work-title > .work-intro small { font-size:9px; }
  body.home .work-title > .work-pitch p { font-size:clamp(16px,4vw,19px); }
}
@media (max-width:420px) {
  body.home .hero h1 { font-size:clamp(57px,15.35vw,64px); }
  body.home .hero .butterfly-spot {
    width:min(61vw,235px);
    top:auto;
    bottom:clamp(14px,3vh,28px);
    right:-1%;
  }
  body.home .about-heading h2 { margin-top:112px; }
  body.home .method .method-butterflies { width:clamp(156px,39vw,230px); }
  body.home .work-title > h2 { font-size:clamp(52px,11.35vw,67px); }
}
@media (max-height:540px) and (min-width:741px) {
  body.home .hero h1 { font-size:clamp(58px,7.5vw,106px); }
  body.home .hero .butterfly-spot { top:-5%;width:min(41vw,440px); }
}


/* Build 04 final launch: left-anchored method copy and balanced butterfly. */
@media (min-width:741px) {
  body.home .method-bottom {
    margin-left:0;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(32px,6vw,110px);
    align-items:start;
  }
  body.home .method-bottom p {
    margin:0;
    max-width:560px;
    text-align:left;
  }
  body.home .method-bottom p:nth-child(2) {justify-self:start}
  body.home .method .method-butterflies {
    width:clamp(220px,32vw,470px);
    height:auto;
    top:clamp(130px,15vw,235px);
    right:clamp(0px,4vw,85px);
    transform:rotate(30deg);
    opacity:.24;
  }
}
@media (max-width:740px) {
  body.home .method-bottom {margin-left:0;width:100%;text-align:left;}
  body.home .method-bottom p {max-width:100%;text-align:left}
  body.home .method .method-butterflies {top:9%;right:0;opacity:.20}
}
/* Receipt is a full-width horizontal photographic divider, not an embedded PDF viewer. */
.receipt-divider {
  margin:0;
  width:100%;
  padding:clamp(22px,4vw,62px) 0;
  border-bottom:1px solid var(--line);
}
.receipt-divider img {
  display:block;
  width:100%;
  max-height:clamp(120px,20vw,280px);
  object-fit:contain;
  object-position:center;
}
.receipt-divider figcaption {
  font:500 10px/1.5 var(--mono);
  letter-spacing:.035em;
  text-align:center;
  margin-top:16px;
}
.receipt-followup {border-bottom:1px solid var(--line)}