/* ==========================================================================
   Content Beast — the Ransom Note design, October 2026.

   One stylesheet for every page built by tools/build-site.mjs, plus the blog,
   legal, thank-you and 404 pages. It replaced four inline stylesheets that had
   drifted apart (see CLAUDE.md, "The two stylesheets had silently drifted").

   The look: a lavender wall, oxblood ink, orange and pink stickers, cream paper.
   Headlines are ransom notes — every word cut out and pasted in its own box,
   built by functions/_lib/copytext.js. Decoration (tilts, tape, pins) is kept
   off text people need to read and off anything they need to tap.

   Every visual change is checked from 1440px down to 360px. Nothing on this
   page may cause horizontal scroll: tilted and overlapping pieces live inside
   sections with overflow: clip.
   ========================================================================== */

@font-face{font-family:'Syne';src:url('/fonts/syne-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Syne';src:url('/fonts/syne-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --lav:#DCCFF8;
  --ox:#3B0B05;
  --ox-deep:#2A0703;
  --or:#FF6B2C;
  --pink:#F2B8C6;
  --peach:#FFC59A;
  --cream:#F6F0E6;
  --paper:#FFFDF8;
  --ink-soft:#5A2A22;
  --display:'Syne',sans-serif;
  --serif:'Instrument Serif',serif;
  --mono:'Space Mono',monospace;
  --body:'Hanken Grotesk',sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --shadow:4px 4px 0 var(--ox);
  --dots:radial-gradient(rgba(59,11,5,.11) 1.2px,transparent 1.7px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--lav);color:var(--ox);font-family:var(--body);font-size:18px;line-height:1.55;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--ox)}
a:hover{color:#7A1A0C}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--or);color:var(--ox-deep);padding:10px 16px;font-family:var(--mono);font-weight:700}
.skip:focus{left:8px}
em{font-family:var(--serif);font-style:italic;font-weight:400}

.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gutter)}
.sec{position:relative;overflow:clip;padding:clamp(64px,9vw,120px) 0}
.wall{background-color:var(--lav);background-image:var(--dots);background-size:26px 26px}
.wall.pink{background-color:var(--pink);background-image:radial-gradient(rgba(59,11,5,.12) 1.2px,transparent 1.7px)}
.paper{background:var(--cream)}
.ox{background:var(--ox);color:var(--lav)}
.ox a{color:var(--lav)}
.ox a:hover{color:#fff}
.rule{border-top:2px solid var(--ox)}

/* Torn paper. A zigzag edge top and bottom; the section underneath shows
   through the teeth, so the band reads as a sheet laid on the wall. */
.torn{
  clip-path:polygon(0 12px,4% 3px,8% 15px,12% 4px,16% 16px,20% 6px,24% 13px,28% 1px,32% 15px,36% 5px,40% 17px,44% 3px,48% 12px,52% 1px,56% 15px,60% 6px,64% 13px,68% 2px,72% 16px,76% 7px,80% 12px,84% 0,88% 15px,92% 4px,96% 14px,100% 3px,100% calc(100% - 10px),96% calc(100% - 1px),92% calc(100% - 15px),88% calc(100% - 4px),84% calc(100% - 13px),80% 100%,76% calc(100% - 16px),72% calc(100% - 5px),68% calc(100% - 12px),64% calc(100% - 2px),60% calc(100% - 15px),56% calc(100% - 6px),52% calc(100% - 13px),48% 100%,44% calc(100% - 14px),40% calc(100% - 3px),36% calc(100% - 16px),32% calc(100% - 7px),28% calc(100% - 12px),24% calc(100% - 1px),20% calc(100% - 15px),16% calc(100% - 4px),12% calc(100% - 13px),8% calc(100% - 2px),4% calc(100% - 14px),0 calc(100% - 3px));
  margin:-18px 0;
  padding-top:calc(clamp(64px,9vw,120px) + 18px);
  padding-bottom:calc(clamp(64px,9vw,120px) + 18px);
  position:relative;
  z-index:1;
}

/* ---- small type --------------------------------------------------------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.kicker.tag{background:var(--cream);border:1px solid var(--ox);padding:8px 14px;transform:rotate(-1.5deg);position:relative;color:var(--ox);align-self:flex-start;max-width:100%}
.center .kicker.tag{align-self:center}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:640px}
.lede.center{margin-left:auto;margin-right:auto;text-align:center}
.h-display{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.88}
.h-serif{font-family:var(--serif);font-style:italic;font-size:clamp(34px,4.4vw,62px);line-height:1.05;letter-spacing:-.01em}
.h-plain{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-.035em}
.h-plain em{font-size:1.08em;letter-spacing:-.01em}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head.center{align-items:center;text-align:center}

/* ---- the ransom note ---------------------------------------------------- */
.ransom{font-size:clamp(44px,6.4vw,96px);line-height:1;font-weight:400}
.ransom.lg{font-size:clamp(56px,9vw,148px)}
.ransom.sm{font-size:clamp(36px,4.6vw,68px)}
.rn{display:flex;flex-wrap:wrap;align-items:center;gap:.14em .26em}
.center .rn,.rn.center{justify-content:center}
.rw{display:inline-flex;white-space:nowrap;align-items:center}
.rp{display:inline-block;padding:.06em .14em .02em;margin:0 .03em;line-height:.95}
.rp.s0{font-family:var(--display);font-weight:800;text-transform:uppercase;background:var(--ox);color:var(--cream)}
.rp.s1{font-family:var(--body);font-weight:700;background:#fff;color:var(--ox);box-shadow:3px 3px 0 rgba(59,11,5,.35)}
.rp.s2{font-family:var(--display);font-weight:800;text-transform:uppercase;background:var(--cream);color:transparent;-webkit-text-stroke:2px var(--ox);border:2px solid var(--ox)}
.rp.s3{font-family:var(--mono);font-weight:700;font-size:.82em;padding:.12em .16em .08em;background:var(--pink);color:var(--ox);border:2px solid var(--ox)}
.rp.s4{font-family:var(--serif);font-style:italic;font-size:1.1em;padding:0 .18em;background:var(--pink);color:var(--ox);box-shadow:3px 3px 0 var(--ox);border:2px solid var(--ox)}
.rp.s5{font-family:var(--display);font-weight:700;background:var(--paper);color:var(--ox);border-bottom:4px solid var(--or)}
.rp.hot{font-family:var(--serif);font-style:italic;font-size:1.22em;padding:0 .2em;background:var(--or);color:var(--ox-deep);box-shadow:5px 5px 0 var(--ox)}
.rp.t0{transform:rotate(-3deg)}.rp.t1{transform:rotate(2deg)}.rp.t2{transform:rotate(-5deg)}.rp.t3{transform:rotate(4deg)}
.rp.t4{transform:rotate(-1.5deg)}.rp.t5{transform:rotate(5.5deg)}.rp.t6{transform:rotate(-4deg)}
.ox .rp.s0{background:var(--lav);color:var(--ox)}
.ox .rp.s2{background:transparent;-webkit-text-stroke-color:var(--lav);border-color:var(--lav)}
.ox .rp.s4{box-shadow:3px 3px 0 var(--lav)}
.ox .rp.hot{box-shadow:5px 5px 0 var(--lav)}
@supports not (-webkit-text-stroke:2px #000){.rp.s2{color:var(--ox)}}

/* ---- buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:0 22px;background:var(--or);color:var(--ox-deep);border:2px solid var(--ox);border-radius:10px;box-shadow:var(--shadow);text-decoration:none;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{color:var(--ox-deep);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ox)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ox)}
.btn.ghost{background:var(--cream);color:var(--ox)}
.btn.ghost:hover{color:var(--ox)}
.ox .btn{border-color:var(--lav);box-shadow:4px 4px 0 var(--lav);color:var(--ox-deep)}
.ox .btn:hover{color:var(--ox-deep)}
.ox .btn.ghost,.ox .btn.ghost:hover{background:transparent;color:var(--lav)}
.btn svg{width:18px;height:18px;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:16px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor}
.link-arrow svg{width:16px;height:16px}

/* ---- stickers, tape and pins -------------------------------------------- */
.sticker{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:6px 14px;border-radius:999px;background:var(--or);color:var(--ox-deep);border:2px solid var(--ox);font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1.2}
.sticker.pink{background:var(--pink);color:var(--ox)}
.sticker.round{width:176px;height:176px;border-radius:0;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpolygon points='70.0,4.0 78.6,15.7 90.4,7.2 95.0,21.0 108.8,16.6 108.9,31.1 123.4,31.2 119.0,45.0 132.8,49.6 124.3,61.4 136.0,70.0 124.3,78.6 132.8,90.4 119.0,95.0 123.4,108.8 108.9,108.9 108.8,123.4 95.0,119.0 90.4,132.8 78.6,124.3 70.0,136.0 61.4,124.3 49.6,132.8 45.0,119.0 31.2,123.4 31.1,108.9 16.6,108.8 21.0,95.0 7.2,90.4 15.7,78.6 4.0,70.0 15.7,61.4 7.2,49.6 21.0,45.0 16.6,31.2 31.1,31.1 31.2,16.6 45.0,21.0 49.6,7.2 61.4,15.7' fill='%23FF6B2C' stroke='%233B0B05' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;color:#fff;text-shadow:2px 2px 0 var(--ox);padding:0 0 2px;font-family:var(--display);font-weight:800;font-size:18px;line-height:.92;letter-spacing:-.02em;text-transform:none;white-space:pre-line}
.tape{position:absolute;width:96px;height:26px;background:rgba(246,240,230,.72);pointer-events:none}
.tape.orange{background:repeating-linear-gradient(45deg,rgba(255,107,44,.75) 0 6px,rgba(255,107,44,.45) 6px 12px)}
.tape.pink{background:repeating-linear-gradient(45deg,rgba(242,184,198,.95) 0 8px,rgba(242,184,198,.6) 8px 16px)}
.pin{position:absolute;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFB08A 0 22%,var(--or) 26%);border:2px solid var(--ox);box-shadow:2px 4px 0 rgba(59,11,5,.3);pointer-events:none;z-index:4}
.pin.dark{background:radial-gradient(circle at 35% 35%,#8A3A2E 0 22%,var(--ox) 26%)}
.pin.pink{background:radial-gradient(circle at 35% 35%,#F8D6DF 0 22%,var(--pink) 26%)}

/* ---- ticker + nav ------------------------------------------------------- */
.ticker{background:var(--ox);color:var(--lav);height:34px;overflow:hidden;display:flex;align-items:center}
.ticker-track{display:flex;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;animation:cbTicker 48s linear infinite}
.ticker-track span{padding-right:.6em}
@keyframes cbTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

.site-head{position:relative;z-index:20;background:var(--lav);border-bottom:2px solid var(--ox)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding-top:14px;padding-bottom:14px}
.nav-logo{display:block;padding:6px 0;line-height:0;flex:none}
.nav-logo img{width:clamp(160px,15vw,214px);height:auto}
.nav-right{display:flex;align-items:center;gap:8px 26px}
.nav-links{display:flex;align-items:center;gap:6px 26px;list-style:none;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nav-links a{display:inline-block;text-decoration:none;padding:12px 0 8px;border-bottom:2px solid transparent}
.nav-links a[aria-current="page"],.nav-links a:hover{border-bottom-color:var(--ox)}
.nav-links a.btn{display:inline-flex;font-size:14px;min-height:46px;padding:0 18px;transform:rotate(-1.5deg);border-bottom:2px solid var(--ox)}
.nav-links a.btn:hover{transform:rotate(-1.5deg) translate(-2px,-2px)}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:14px}
.lang a{text-decoration:none;padding:12px 6px;min-width:36px;text-align:center}
.lang a[aria-current="true"]{font-weight:700;border-bottom:2px solid var(--ox)}
.menu-btn{display:none;align-items:center;gap:10px;min-height:46px;padding:0 16px;background:var(--cream);color:var(--ox);border:2px solid var(--ox);border-radius:10px;box-shadow:3px 3px 0 var(--ox);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.menu-btn i{display:flex;flex-direction:column;gap:4px}
.menu-btn i b{display:block;width:18px;height:2px;background:var(--ox)}

@media (max-width:1060px){
  .menu-btn{display:inline-flex}
  .nav-right{gap:8px 12px}
  .nav-links{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 10px);flex-direction:column;align-items:stretch;gap:0;padding:12px 18px 18px;background:var(--cream);border:2px solid var(--ox);box-shadow:6px 6px 0 var(--ox);z-index:30}
  .nav-links.open{display:flex}
  .nav-links li{border-bottom:1px solid rgba(59,11,5,.15)}
  .nav-links li:last-child{border-bottom:0;padding-top:14px}
  .nav-links a{display:block;padding:14px 0}
  .nav-links a.btn{display:flex;transform:none;padding:0 18px}
  .site-head .wrap{position:relative}
}
@media (max-width:420px){.lang a{padding:12px 4px;min-width:30px}.menu-btn{padding:0 12px}}

/* ---- hero: the moodboard wall (home) ------------------------------------ */
.board{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(56px,6vw,88px)}
.board-string{position:absolute;height:1px;background:var(--ox);transform-origin:left center;z-index:1;pointer-events:none}
.cards{position:relative;z-index:2;display:flex;flex-direction:column}
.card{position:relative;display:block;padding:22px 30px 26px;box-shadow:0 12px 26px rgba(59,11,5,.2);max-width:620px}
.card .mono{display:block;margin-bottom:8px}
.card.c1{background-color:var(--cream);background-image:repeating-linear-gradient(transparent 0 33px,rgba(59,11,5,.1) 33px 34px);border-top:6px solid var(--ox);transform:rotate(-2deg);margin-top:28px}
.card.c2{background:var(--pink);border:1px solid var(--ox);transform:rotate(1.8deg);margin:-6px 0 0 clamp(0px,7vw,110px);z-index:2}
.card.c3{background-color:var(--cream);background-image:repeating-linear-gradient(transparent 0 33px,rgba(59,11,5,.1) 33px 34px);border-left:6px solid var(--or);transform:rotate(-1deg);margin:-4px 0 0 clamp(0px,3vw,40px);z-index:3}
.card .big{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,5.4vw,82px);line-height:.88;letter-spacing:-.04em}
.card.c2 .big{color:transparent;-webkit-text-stroke:2px var(--ox)}
.card .say{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(40px,5.2vw,78px);line-height:1.02;letter-spacing:-.01em}
.card .say em{font-size:1em;background:linear-gradient(transparent 52%,var(--pink) 52%,var(--pink) 92%,transparent 92%);padding:0 6px}
.card.c1 .pin{top:-14px;left:50%;margin-left:-11px}
.card.c2 .tape{top:-12px}
.card.c2 .tape.a{left:24px;transform:rotate(-6deg)}
.card.c2 .tape.b{right:24px;transform:rotate(7deg)}
.card.c3 .pin{top:-11px;right:40px}
.board-foot{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px;margin-top:40px}
.board-foot .lede{flex:1 1 320px;max-width:480px;background:rgba(246,240,230,.88);padding:16px 20px;border-left:2px solid var(--ox);font-size:18px}
.board-foot .btns{flex:0 1 270px;flex-direction:column}
.photo-board{position:relative;z-index:2;min-height:clamp(620px,62vw,900px)}
.photo-board .backing{position:absolute;left:50%;top:8%;width:min(400px,86%);height:72%;transform:translateX(-50%) rotate(-3.5deg);background:var(--cream);border:1px solid var(--ox);box-shadow:0 16px 34px rgba(59,11,5,.22)}
.photo-board .backing .tape{width:110px;height:28px;transform:rotate(-32deg)}
.photo-board .backing .tape.a{top:-14px;left:-22px}
.photo-board .backing .tape.b{bottom:-10px;right:-22px}
.photo-board .backing .mono{position:absolute;bottom:18px;left:20px;font-size:11px}
.photo-board .cutout{position:absolute;left:50%;top:0;width:min(400px,84%);transform:translateX(-48%) rotate(2.5deg);z-index:3;filter:drop-shadow(0 18px 22px rgba(59,11,5,.28))}
.photo-board > .pin{top:6px;left:50%;margin-left:-14px;width:28px;height:28px;z-index:5}
.photo-board .sticker.round{position:absolute;top:13%;left:0;transform:rotate(-12deg);z-index:6}
.photo-board .loc{position:absolute;bottom:13%;right:0;padding:12px 20px 14px;background:var(--cream);border:1px solid var(--ox);transform:rotate(6deg);z-index:6;box-shadow:0 8px 18px rgba(59,11,5,.2)}
.photo-board .loc .pin{top:-9px;left:50%;margin-left:-9px;width:18px;height:18px}
.photo-board .loc .mono{display:block;font-size:11px}
.photo-board .loc b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:28px;line-height:1.05}
.photo-board .fig{position:absolute;bottom:4%;left:24px;z-index:6}

@media (max-width:980px){
  .board{grid-template-columns:minmax(0,1fr)}
  .board-string{display:none}
  .photo-board{min-height:clamp(520px,120vw,760px);max-width:520px;width:100%;margin:0 auto}
}
@media (max-width:560px){
  .card{padding:18px 20px 22px}
  .card.c2,.card.c3{margin-left:0}
  .photo-board .sticker.round{width:128px;height:128px;font-size:13.5px}
  .photo-board .loc b{font-size:22px}
}

/* ---- page heroes (ransom) ---------------------------------------------- */
.page-hero{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(56px,8vw,104px)}
.page-hero .inner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.page-hero .copy{display:flex;flex-direction:column;gap:26px}
.page-hero .side{position:relative;min-height:340px}
@media (max-width:900px){.page-hero .inner{grid-template-columns:minmax(0,1fr)}.page-hero .side{min-height:300px;max-width:460px;width:100%;margin:0 auto}}

/* ---- polaroids ---------------------------------------------------------- */
.polaroid{position:relative;display:block;background:var(--cream);padding:12px 12px 16px;border:1px solid rgba(59,11,5,.25);box-shadow:0 12px 26px rgba(59,11,5,.2)}
.polaroid img{width:100%;aspect-ratio:9/16;object-fit:cover}
.polaroid .cap{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.15}
.polaroid .tape{top:-12px;left:50%;margin-left:-48px;transform:rotate(-4deg)}
.side .polaroid{position:absolute;width:min(230px,48%)}
.side .polaroid.p1{left:4%;top:4%;transform:rotate(-6deg)}
.side .polaroid.p2{right:4%;top:14%;transform:rotate(5deg)}
.side .sticker.round{position:absolute;left:38%;bottom:-2%;transform:rotate(-10deg);z-index:5;font-size:18px}
.side .about-photo{position:relative;width:min(380px,92%);margin:0 auto;transform:rotate(-3deg)}
.side .about-photo img{aspect-ratio:4/5}

/* ---- service cards ------------------------------------------------------ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:30px 24px}
.svc-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 22px 18px;min-height:240px;border:2px solid var(--ox);text-decoration:none;color:var(--ox);background:var(--paper);transition:transform .15s;container-type:inline-size}
.svc-card:hover{color:var(--ox);transform:rotate(0deg) translateY(-3px)!important}
.svc-card:nth-child(4n+1){background:var(--lav);box-shadow:5px 5px 0 var(--ox);transform:rotate(-1deg)}
.svc-card:nth-child(4n+2){transform:rotate(1.2deg);box-shadow:0 8px 18px rgba(59,11,5,.12)}
.svc-card:nth-child(4n+3){background:var(--pink);transform:rotate(-.6deg)}
.svc-card:nth-child(4n){box-shadow:5px 5px 0 var(--ox);transform:rotate(1.4deg)}
.svc-card .n{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--ox)}
.svc-card h3{font-family:var(--display);font-weight:800;font-size:clamp(11px,6cqi,22px);line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:normal;hyphens:manual}
.svc-card p{font-size:16px;line-height:1.5}
.svc-card .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.svc-card .go svg{width:16px;height:16px}
.svc-card .sticker{position:absolute;top:-14px;right:16px;transform:rotate(6deg)}
.svc-card.all{background:var(--ox);color:var(--lav);justify-content:center;align-items:flex-start}
.svc-card.all:hover{color:#fff}
.svc-card.all .h-plain{color:var(--lav);font-size:clamp(16px,8cqi,34px);overflow-wrap:normal;hyphens:manual}

/* ---- past clients ------------------------------------------------------- */
.clients{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;list-style:none;margin-top:8px}
.clients li{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,34px);letter-spacing:-.02em;line-height:1;padding:.3em .5em .26em;background:var(--paper);border:2px solid var(--ox)}
.clients li:nth-child(5n+1){transform:rotate(-2deg);background:var(--cream)}
.clients li:nth-child(5n+2){transform:rotate(1.5deg);background:var(--pink)}
.clients li:nth-child(5n+3){transform:rotate(-1deg);font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,2.8vw,40px)}
.clients li:nth-child(5n+4){transform:rotate(2.5deg);background:var(--ox);color:var(--cream)}
.clients li:nth-child(5n){transform:rotate(-2.5deg);background:var(--lav);box-shadow:4px 4px 0 var(--ox)}

/* ---- the portfolio grid (cards are written by functions/_lib/render.js) - */
.port-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.port-filters:empty{display:none}
.fbtn{min-height:44px;padding:0 18px;background:var(--cream);border:2px solid var(--ox);border-radius:999px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.fbtn:nth-child(2n){transform:rotate(-2deg)}
.fbtn:nth-child(3n){transform:rotate(1.5deg)}
.fbtn.active{background:var(--ox);color:var(--lav)}
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:40px 28px;align-items:start}
.port-item{position:relative;display:block;width:100%;padding:12px 12px 16px;background:var(--cream);border:1px solid rgba(59,11,5,.25);box-shadow:0 12px 26px rgba(59,11,5,.2);text-align:left;cursor:pointer;transition:transform .2s}
.port-item:nth-child(5n+1){transform:rotate(-3deg)}
.port-item:nth-child(5n+2){transform:rotate(2.5deg);margin-top:28px}
.port-item:nth-child(5n+3){transform:rotate(-1.5deg)}
.port-item:nth-child(5n+4){transform:rotate(3.5deg);margin-top:18px}
.port-item:nth-child(5n){transform:rotate(-2.5deg)}
.port-item::before{content:'';position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(246,240,230,.72);border:1px solid rgba(59,11,5,.08);transform:rotate(-4deg);z-index:2}
.port-item:nth-child(3n+2)::before{background:repeating-linear-gradient(45deg,rgba(242,184,198,.95) 0 8px,rgba(242,184,198,.6) 8px 16px);transform:rotate(5deg)}
.port-item:nth-child(3n)::before{background:repeating-linear-gradient(45deg,rgba(255,107,44,.7) 0 6px,rgba(255,107,44,.42) 6px 12px)}
.port-item:hover{transform:rotate(0) translateY(-4px);z-index:3}
.port-shot{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#d8cdbf}
.port-thumb{width:100%;height:100%;object-fit:cover}
.port-play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:var(--or);border:2px solid var(--ox);box-shadow:3px 3px 0 var(--ox)}
.port-play::after{content:'';position:absolute;left:23px;top:17px;border-left:18px solid var(--ox-deep);border-top:12px solid transparent;border-bottom:12px solid transparent}
.port-info{display:flex;flex-direction:column;gap:3px;margin-top:12px}
.port-brand{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.port-title{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.12}
.port-type{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft)}
.port-next{display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:100%;aspect-ratio:9/16;padding:24px;background:var(--pink);border:2px dashed var(--ox);text-decoration:none;color:var(--ox);transform:rotate(2deg)}
.port-next:hover{color:var(--ox)}
.port-next .h-plain{font-size:clamp(28px,2.6vw,38px)}
@media (max-width:560px){
  .port-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .port-item{padding:8px 8px 12px}
  .port-item:nth-child(n){margin-top:0}
  .port-title{font-size:16px}
  .port-play{width:46px;height:46px;margin:-23px 0 0 -23px}
  .port-play::after{left:17px;top:12px;border-left-width:14px;border-top-width:10px;border-bottom-width:10px}
  .port-next{padding:14px}
}

/* ---- video lightbox (driven by playVid / closeVid in /js/site.js) -------- */
.vmodal{display:none;position:fixed;inset:0;z-index:200;background:rgba(42,7,3,.92);align-items:center;justify-content:center;padding:1.5rem}
.vmodal.on{display:flex}
.vmodal-inner{position:relative;display:flex;flex-direction:column;align-items:center;max-width:92vw}
.vmodal video{display:block;height:min(78vh,880px);width:auto;aspect-ratio:9/16;max-width:92vw;object-fit:contain;background:#000;border:2px solid var(--lav)}
.vmodal-x{position:absolute;top:-3rem;right:0;width:44px;height:44px;background:var(--or);border:2px solid var(--lav);border-radius:50%;color:var(--ox-deep);font-size:26px;line-height:1;cursor:pointer}
.vmodal-cap{color:var(--cream);margin:.9rem 0 0;max-width:min(430px,92vw);text-align:center}
.vmodal-cap b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;margin-bottom:.25rem}
.vmodal-cap span{display:block;font-size:15px;opacity:.8;line-height:1.55}
@media (max-width:560px){.vmodal{padding:1rem .8rem}.vmodal video{height:min(72vh,780px)}}

/* ---- meet cata ---------------------------------------------------------- */
.meet{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,80px);align-items:center}
.meet .polaroid{max-width:360px;transform:rotate(-3deg);margin:0 auto}
.meet .polaroid img{aspect-ratio:4/5}
.meet .polaroid .cap{color:var(--ox)}
.meet-copy{display:flex;flex-direction:column;gap:20px}
.meet-copy .h-plain{color:var(--lav);font-size:clamp(30px,3.3vw,48px)}
.meet-copy p{max-width:620px}
.stats{display:flex;flex-wrap:wrap;gap:16px;margin:10px 0 6px}
.stat{min-width:120px;padding:14px 18px;background:var(--cream);color:var(--ox);border:2px solid var(--ox);transform:rotate(-2deg)}
.stat:nth-child(2n){transform:rotate(1.8deg);background:var(--pink)}
.stat:nth-child(3n){background:var(--lav)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em}
.stat span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
@media (max-width:860px){.meet{grid-template-columns:minmax(0,1fr)}}

/* ---- bilingual ---------------------------------------------------------- */
.bi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.bi-copy{display:flex;flex-direction:column;gap:22px}
.takes{position:relative;display:flex;flex-direction:column;gap:22px;padding:12px 0}
.take{position:relative;padding:22px 26px;background:var(--paper);border:2px solid var(--ox);box-shadow:var(--shadow);max-width:440px}
.take:first-child{transform:rotate(-2deg)}
.take:nth-child(2){transform:rotate(1.6deg);margin-left:auto;background:var(--ox);color:var(--lav);box-shadow:4px 4px 0 var(--or)}
.take .mono{display:block;margin-bottom:10px}
.take q{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.6vw,36px);line-height:1.1;quotes:none}
.takes .note{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
@media (max-width:860px){.bi{grid-template-columns:minmax(0,1fr)}}

/* ---- steps -------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:24px;counter-reset:step;list-style:none}
.steps li{position:relative;padding:22px 22px 24px;background:var(--paper);border:2px solid var(--ox)}
.steps li:nth-child(odd){transform:rotate(-1.2deg)}
.steps li:nth-child(even){transform:rotate(1.2deg);background:var(--pink)}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-family:var(--display);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--ox);margin-bottom:12px}
.steps h3{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.05;letter-spacing:-.02em;margin-bottom:8px}
.steps p{font-size:16px;line-height:1.5}
.ox .steps li{color:var(--ox)}

/* ---- brief form --------------------------------------------------------- */
.hire{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.hire-copy{display:flex;flex-direction:column;gap:22px;position:sticky;top:24px}
.hire-copy .note{font-size:16px;line-height:1.55;padding:14px 18px;border-left:3px solid var(--ox);background:rgba(246,240,230,.6)}
.form-card{position:relative;background:var(--paper);border:2px solid var(--ox);border-top-width:8px;padding:clamp(22px,3vw,36px);box-shadow:0 18px 40px rgba(59,11,5,.18)}
.form-card .tape.a{top:-16px;left:30px;transform:rotate(-5deg)}
.form-card .tape.b{top:-16px;right:30px;transform:rotate(6deg)}
@media (max-width:960px){.hire{grid-template-columns:minmax(0,1fr)}.hire-copy{position:static}}
#briefForm{display:block}
.bf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.bf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.bf-row{display:flex;flex-direction:column;gap:7px;min-width:0}
.bf-row.full{grid-column:1/-1}
.bf-row label{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ox)}
.bf-row input[type=text],.bf-row input[type=email],.bf-row select,.bf-row textarea{width:100%;min-height:52px;padding:12px 14px;background:#fff;color:var(--ox);border:2px solid var(--ox);border-radius:8px;font-family:var(--body);font-size:17px;line-height:1.4}
.bf-row select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,var(--ox) 50%),linear-gradient(135deg,var(--ox) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.bf-row textarea{min-height:150px;resize:vertical}
.bf-row input:focus,.bf-row select:focus,.bf-row textarea:focus{outline:3px solid var(--or);outline-offset:1px}
.bf-file input{width:100%;min-height:52px;padding:12px;background:var(--cream);border:2px dashed var(--ox);border-radius:8px;font-family:var(--body);font-size:15px}
.bf-note{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.bf-err{display:none;font-size:15px;font-weight:700;color:#9A1B0E}
.bf-err.on{display:block}
.bf-check{display:flex;align-items:center;gap:12px;min-height:44px;font-family:var(--body);font-size:16px;font-weight:500;letter-spacing:0;cursor:pointer}
.bf-check input{width:22px;height:22px;accent-color:var(--ox);flex:none}
.bf-ts{margin-top:22px}
.bf-ts-note{display:none;margin-top:10px;font-size:15px;line-height:1.5;padding:10px 14px;background:var(--pink);border:2px solid var(--ox)}
.bf-ts-note.on{display:block}
.bf-send{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:22px}
.bf-send .btn{min-width:220px}
.bf-legal{flex:1 1 220px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.bf-alt{margin-top:18px;font-size:15px}
.bf-alt a{font-weight:700}
@media (max-width:620px){.bf-grid{grid-template-columns:minmax(0,1fr)}.bf-send .btn{width:100%}}

/* ---- formats, offers ---------------------------------------------------- */
.fmt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:28px 24px}
.fmt{position:relative;padding:22px;background:var(--paper);border:2px solid var(--ox)}
.fmt:nth-child(odd){transform:rotate(-1deg)}
.fmt:nth-child(even){transform:rotate(1deg)}
.fmt .ratio{display:flex;align-items:flex-end;height:96px;margin-bottom:16px}
.fmt .ratio i{display:block;height:96px;background:var(--lav);border:2px solid var(--ox);box-shadow:3px 3px 0 var(--ox)}
.fmt .ratio i.r916{width:54px}.fmt .ratio i.r11{width:96px}.fmt .ratio i.r45{width:77px}
.fmt .mono{display:block;margin-bottom:6px}
.fmt h3{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.05;margin-bottom:8px;letter-spacing:-.02em}
.fmt p{font-size:16px;line-height:1.5}
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px}
.offer{display:flex;flex-direction:column;gap:12px;padding:26px 24px;background:var(--cream);color:var(--ox);border:2px solid var(--lav)}
.offer:nth-child(2){background:var(--or);transform:rotate(-1deg)}
.offer:nth-child(3){background:var(--pink);transform:rotate(1deg)}
.offer h3{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.offer .s{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.2}
.ticks{list-style:none;display:flex;flex-direction:column;gap:8px}
.ticks li{position:relative;padding-left:26px;font-size:16px;line-height:1.45}
.ticks li::before{content:'';position:absolute;left:2px;top:.42em;width:12px;height:12px;background:var(--or);border:2px solid var(--ox);transform:rotate(12deg)}
.offer .ticks li::before{background:var(--ox)}
.offer .mono{margin-top:auto;padding-top:10px;border-top:2px dashed currentColor}

/* ---- rights table ------------------------------------------------------- */
.table-box{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--paper);border:2px solid var(--ox);box-shadow:6px 6px 0 var(--ox)}
.rights{width:100%;min-width:640px;border-collapse:collapse;font-size:16px;line-height:1.5}
.rights th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:14px 18px;background:var(--ox);color:var(--lav)}
.rights td{padding:16px 18px;border-top:1px solid rgba(59,11,5,.18);vertical-align:top}
.rights td:first-child{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.rights-note{margin-top:22px;font-size:16px;max-width:760px}

/* ---- faq ---------------------------------------------------------------- */
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:920px}
.faq-item{background:var(--paper);border:2px solid var(--ox)}
.faq-item:nth-child(odd){transform:rotate(-.4deg)}
.faq-item:nth-child(even){transform:rotate(.4deg)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:60px;padding:16px 22px;background:none;border:0;text-align:left;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,22px);letter-spacing:-.01em;cursor:pointer}
.faq-q::after{content:'+';flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:2px solid var(--ox);border-radius:50%;background:var(--or);font-family:var(--mono);font-weight:700;font-size:20px;line-height:1}
.faq-item.open .faq-q::after{content:'–';background:var(--lav)}
.faq-a{display:none;padding:0 22px 20px;font-size:17px;line-height:1.6;max-width:760px}
.faq-item.open .faq-a{display:block}

/* ---- services page ------------------------------------------------------ */
.jump{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.jump .mono{margin-right:6px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--cream);border:2px solid var(--ox);border-radius:999px;text-decoration:none;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.jump a:nth-child(2n){transform:rotate(-1.5deg)}
.svc-feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(26px,4vw,48px);background:var(--or);border:2px solid var(--ox);box-shadow:8px 8px 0 var(--ox);position:relative}
.svc-feature .h-display{font-size:clamp(64px,9vw,140px)}
.svc-feature p{font-size:19px;max-width:560px}
.svc-feature .stills{position:relative;min-height:340px}
.svc-feature .sticker{position:absolute;top:-16px;right:24px;transform:rotate(5deg);background:var(--lav)}
@media (max-width:860px){.svc-feature{grid-template-columns:minmax(0,1fr)}.svc-feature .stills{min-height:300px;max-width:420px;width:100%;margin:0 auto}}
.svc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:40px 32px}
.svc-block{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 26px 26px;background:var(--paper);border:2px solid var(--ox);scroll-margin-top:24px;container-type:inline-size}
.svc-block:nth-child(3n+1){transform:rotate(-.8deg);box-shadow:6px 6px 0 var(--ox)}
.svc-block:nth-child(3n+2){transform:rotate(.7deg);background:var(--lav)}
.svc-block:nth-child(3n){transform:rotate(-.4deg);background:var(--cream)}
.svc-block .n{font-family:var(--display);font-weight:800;font-size:52px;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--ox)}
.svc-block h3{font-family:var(--display);font-weight:800;font-size:clamp(14px,5.8cqi,27px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:normal;hyphens:manual}
.svc-block .get{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding-top:10px;border-top:2px dashed rgba(59,11,5,.35)}
.svc-block .tape{top:-13px;right:36px;transform:rotate(4deg)}
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;list-style:none}
.process li{position:relative;padding:30px 24px 26px;background:var(--cream);color:var(--ox);border:2px solid var(--lav)}
.process li:nth-child(1){transform:rotate(-1.5deg)}
.process li:nth-child(2){transform:rotate(1deg);background:var(--pink)}
.process li:nth-child(3){transform:rotate(-.6deg);background:var(--or)}
.process .tape{top:-13px;left:50%;margin-left:-48px;transform:rotate(-3deg)}
.process .mono{display:block;margin-bottom:8px}
.process h3{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.03em;margin-bottom:10px;text-transform:uppercase}
.process p{font-size:16px;line-height:1.5}
.bundles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:34px 26px;align-items:start}
.bundle{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;background:var(--paper);border:2px solid var(--ox)}
.bundle:nth-child(1){transform:rotate(-1.2deg)}
.bundle:nth-child(2){background:var(--ox);color:var(--lav);box-shadow:6px 6px 0 var(--or)}
.bundle:nth-child(2) .ticks li::before{border-color:var(--lav)}
.bundle:nth-child(3){transform:rotate(1.2deg);background:var(--pink)}
.bundle h3{font-family:var(--serif);font-style:italic;font-size:32px;line-height:1.05}
.bundle .sticker{position:absolute;top:-16px;right:18px;transform:rotate(6deg)}
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:40px 32px}
.ba-pair{position:relative;padding:20px;background:var(--paper);border:2px solid var(--ox);box-shadow:6px 6px 0 var(--ox)}
.ba-pair:nth-child(2){transform:rotate(.8deg)}
.ba-pair h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;margin-bottom:14px}
.ba-pair .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ba-pair figure{margin:0}
.ba-pair figure img{width:100%;border:1px solid rgba(59,11,5,.25)}
.ba-pair figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px}

/* ---- about page --------------------------------------------------------- */
.story{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:34px 28px;list-style:none}
.story li{position:relative;padding:30px 26px 26px;background-color:var(--cream);background-image:repeating-linear-gradient(transparent 0 33px,rgba(59,11,5,.08) 33px 34px);border-top:6px solid var(--ox);box-shadow:0 12px 26px rgba(59,11,5,.16)}
.story li:nth-child(1){transform:rotate(-1.5deg)}
.story li:nth-child(2){transform:rotate(1.2deg);border-top-color:var(--or)}
.story li:nth-child(3){transform:rotate(-.6deg)}
.story li .pin{top:-12px;left:50%;margin-left:-11px}
.story .mono{display:block;margin-bottom:8px}
.story h3{font-family:var(--serif);font-style:italic;font-size:34px;line-height:1.05;margin-bottom:12px}
.story p{font-size:17px;line-height:1.6}
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px}
.bignum{padding:20px;border:2px solid var(--lav)}
.bignum{min-width:0;overflow:hidden}
.bignum b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(60px,6.4vw,104px);line-height:.9;letter-spacing:-.05em}
.bignum:nth-child(2n) b{color:transparent;-webkit-text-stroke:2px var(--lav)}
.bignum span{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
.quote{position:relative;max-width:980px;margin:0 auto;text-align:center}
.quote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.6vw,50px);line-height:1.14;letter-spacing:-.01em}
.quote cite{display:inline-block;margin-top:22px;font-style:normal}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:26px}
.value{padding:22px;background:var(--paper);border:2px solid var(--ox)}
.value:nth-child(odd){transform:rotate(-1deg);box-shadow:4px 4px 0 var(--ox)}
.value:nth-child(even){transform:rotate(1deg);background:var(--pink)}
.value .mono{display:block;margin-bottom:8px}
.value h3{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.08;letter-spacing:-.02em;margin-bottom:8px}
.value p{font-size:16px;line-height:1.5}
.checks{display:flex;flex-wrap:wrap;gap:14px;list-style:none}
.checks a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;background:var(--paper);border:2px solid var(--ox);box-shadow:var(--shadow);text-decoration:none;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em}
.checks li:nth-child(2n) a{transform:rotate(-1.2deg)}
.checks a svg{width:16px;height:16px}

/* ---- blog teaser -------------------------------------------------------- */
.teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:28px;background:var(--paper);border:2px solid var(--ox);box-shadow:6px 6px 0 var(--ox);transform:rotate(-.6deg)}
.teaser .h-serif{font-size:clamp(28px,3vw,42px)}

/* ---- centred closing call ---------------------------------------------- */
.closer{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.closer .btns{justify-content:center}

/* ---- footer ------------------------------------------------------------- */
.site-foot{background:var(--cream);color:var(--ox);border-top:2px solid var(--ox);overflow:clip}
.foot-call{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:56px;padding-bottom:44px;border-bottom:2px solid var(--ox)}
.foot-call .h-plain{font-size:clamp(30px,4vw,58px);max-width:820px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:36px;padding-top:44px;padding-bottom:36px}
.foot-grid p{font-size:16px;line-height:1.55;max-width:460px}
.foot-grid .mono{display:block;margin-bottom:12px;font-weight:700}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.foot-grid ul a{display:inline-block;padding:8px 0;font-size:16px;text-decoration:none;border-bottom:1px solid transparent}
.foot-grid ul a:hover{border-bottom-color:currentColor}
.foot-grid .foot-line{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.2;margin-bottom:12px}
.foot-word{display:block;margin:12px auto 0;padding:0 var(--gutter);width:100%;max-width:1360px}
.foot-word img{width:100%;height:auto;opacity:.92}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:22px;padding-bottom:30px;font-size:14px}
.legal-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.legal-links a{display:inline-block;padding:10px 0;color:inherit}
.legal-links button{background:none;border:0;padding:10px 0;color:inherit;text-decoration:underline;cursor:pointer;font-size:14px}
@media (max-width:860px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-grid > div:first-child{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- decoration that only makes sense with room for it ----------------- */
@media (max-width:900px){.desk{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- blog index --------------------------------------------------------- */
.post-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0;background:var(--paper);border:2px solid var(--ox);box-shadow:8px 8px 0 var(--ox);text-decoration:none;color:var(--ox);transform:rotate(-.5deg);transition:transform .15s}
.post-card:hover{color:var(--ox);transform:rotate(0) translateY(-3px)}
.post-tile{display:flex;align-items:center;justify-content:center;min-height:280px;background:var(--lav);background-image:var(--dots);background-size:26px 26px;border-right:2px solid var(--ox);font-size:clamp(64px,8vw,120px)}
.post-body{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,40px)}
.post-blurb{font-size:18px;line-height:1.55}
.post-card .link-arrow{align-self:flex-start}
@media (max-width:760px){.post-card{grid-template-columns:minmax(0,1fr)}.post-tile{border-right:0;border-bottom:2px solid var(--ox);min-height:200px}}
hr.split{border:0;border-top:2px dashed var(--ox);margin:56px auto;max-width:520px}

/* ---- language buttons (the blog article switches language in place) ---- */
.lang .ltbtn{background:none;border:0;border-bottom:2px solid transparent;padding:12px 6px;min-width:36px;font-family:var(--mono);font-size:14px;cursor:pointer;color:var(--ox)}
.lang .ltbtn.active{font-weight:700;border-bottom-color:var(--ox)}

/* ---- the blog article (hand-written markup, restyled) ------------------- */
.progress-bar{position:fixed;top:0;left:0;height:4px;width:0;background:var(--or);z-index:200}
.article-wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.article-header{display:flex;flex-direction:column;gap:20px;padding:clamp(48px,7vw,88px) 0 40px}
.article-cat{align-self:flex-start;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;background:var(--or);border:2px solid var(--ox);transform:rotate(-2deg)}
.article-header h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.035em}
.article-header .lede{max-width:720px;font-size:clamp(18px,1.7vw,22px)}
.article-meta{display:flex;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.article-hero{display:flex;align-items:center;justify-content:center;aspect-ratio:21/8;background:var(--pink);background-image:radial-gradient(rgba(59,11,5,.12) 1.2px,transparent 1.7px);background-size:26px 26px;border:2px solid var(--ox);box-shadow:8px 8px 0 var(--ox)}
.tile-word{font-family:var(--display);font-weight:800;font-size:clamp(56px,10vw,150px);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--ox)}
.article-body-wrap{padding:56px 0 80px}
.article-body{max-width:720px;margin:0 auto;background:var(--paper);border:2px solid var(--ox);padding:clamp(24px,4vw,56px)}
.article-body h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.03em;margin:48px 0 16px}
.article-body h3{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.15;margin:32px 0 10px}
.article-body h4{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.article-body p{font-size:18px;line-height:1.75;margin:0 0 20px}
.article-body ul,.article-body ol{margin:0 0 22px 22px}
.article-body li{font-size:18px;line-height:1.7;margin-bottom:8px}
.article-body a{color:var(--ox);font-weight:700}
.article-body blockquote{margin:32px 0;padding:20px 24px;background:var(--lav);border-left:6px solid var(--or)}
.article-body blockquote p{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.3;margin:0}
.article-body .highlight-box{margin:32px 0;padding:22px 24px;background:var(--pink);border:2px solid var(--ox);transform:rotate(-.5deg)}
.article-body .highlight-box p{margin:0;font-size:17px}
.article-body .step{display:flex;gap:18px;align-items:flex-start;margin-bottom:28px}
.article-body .step-num{flex:none;width:52px;font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:transparent;-webkit-text-stroke:2px var(--ox)}
.article-body .step-content h3{margin-top:0}
.article-body hr{border:0;border-top:2px dashed var(--ox);margin:40px 0}
.article-body .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.article-body .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:6px 12px;background:var(--cream);border:2px solid var(--ox);border-radius:999px}
.article-cta{margin:40px 0;padding:clamp(24px,4vw,48px);background:var(--ox);color:var(--lav);text-align:center}
.article-cta h3{font-family:var(--display);font-style:normal;font-weight:800;font-size:clamp(28px,3vw,42px);color:var(--lav);margin:0 0 12px}
.article-cta p{color:var(--lav)}
.article-cta a{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;background:var(--or);color:var(--ox-deep);border:2px solid var(--lav);border-radius:10px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

/* ---- legal pages (privacy, terms, refunds) ---- */
.legal-main{background:var(--paper);padding:clamp(40px,7vw,96px) 0}
.legal-main .wrap{max-width:780px}
.legal-main .eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ox);margin-bottom:14px}
.legal-main h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-.02em;margin-bottom:14px;overflow-wrap:anywhere}
.legal-main .updated{font-family:var(--mono);font-size:13px;opacity:.7;margin-bottom:40px}
.legal-main h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.6vw,28px);line-height:1.1;margin:44px 0 12px}
.legal-main p,.legal-main li{font-size:17px;line-height:1.65;margin-bottom:14px;max-width:none}
.legal-main ul{margin:0 0 18px 1.2em;padding:0}
.legal-main a{color:var(--ox);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-main .lede{font-size:19px;max-width:none}
.legal-main .note{border-left:4px solid var(--orange);padding:4px 0 4px 18px;margin:26px 0}
.legal-main .also{margin-top:56px;padding-top:20px;border-top:2px dashed var(--ox);font-size:15px}
.legal-main .also a{margin-right:18px;display:inline-block;padding:6px 0}

/* small phones: keep logo + language + menu on one row at 360 */
@media (max-width:420px){
  .nav-logo img{width:128px}
  .menu-btn{padding:0 10px;gap:6px;font-size:12px}
  .nav-right{gap:4px 4px}
  .lang a,.lang .ltbtn{min-width:28px;padding:12px 3px}
}
@media (max-width:600px){.card .big{font-size:clamp(26px,8.2vw,40px);letter-spacing:-.03em;overflow-wrap:anywhere}}

/* header: white logo on oxblood */
.site-head{background:var(--ox);color:var(--cream);border-bottom-color:var(--ox-deep)}
.site-head .nav-links>li>a:not(.btn),.site-head .lang a{color:var(--cream)}
.site-head .nav-links>li>a:not(.btn):hover,.site-head .nav-links>li>a[aria-current="page"]:not(.btn),.site-head .lang a[aria-current="true"]{border-bottom-color:var(--or)}
@media (max-width:1060px){.site-head .nav-links a:not(.btn){color:var(--ox)}}

/* Syne's lowercase g, y, p and q end in a flat tail that reads as cropped.
   Headlines set in Syne are capitals, which have no descenders. The italic
   serif words inside them stay lowercase. */
.h-plain,.clients li:not(:nth-child(5n+3)),.steps h3,.fmt h3,.offer h3,.value h3,.ba-pair h3,.article-header h1,.article-body h2,.article-cta h3,.legal-main h1,.legal-main h2,.faq-q,.rights td:first-child{text-transform:uppercase}
.h-plain em,.article-header h1 em{text-transform:none}
.h-plain{letter-spacing:-.025em;line-height:1.02}
.fmt h3{font-size:17px}
@media (max-width:600px){.meet-copy .h-plain{font-size:clamp(20px,6.6vw,34px)}.article-body h2{font-size:21px}}
.rp.s5{text-transform:uppercase}
.sticker.round{text-transform:uppercase;font-size:16px;letter-spacing:-.01em}
.photo-board .sticker.round{font-size:15px}
@media (max-width:700px){.photo-board .sticker.round{font-size:11.5px}}
.side .sticker.round{font-size:16px}
@media (max-width:480px){.rp.s5{font-size:.8em}}
/* On the dark header the button's oxblood border and hard shadow disappear; give it light ones. */
@media (min-width:1061px){
  .site-head .nav-links a.btn{border-color:var(--cream);box-shadow:4px 4px 0 var(--lav)}
  .site-head .nav-links a.btn:hover{box-shadow:6px 6px 0 var(--lav)}
}
.site-head .menu-btn{border-color:var(--cream);box-shadow:3px 3px 0 var(--lav)}

/* Peach joins the palette so pink is an accent, not the default. Big bands and about half the coloured cards use it. */
.wall.peach{background-color:var(--peach);background-image:radial-gradient(rgba(59,11,5,.12) 1.2px,transparent 1.7px)}
.svc-card:nth-child(4n+3){background:var(--peach)}
.steps li:nth-child(even),.process li:nth-child(2),.value:nth-child(even){background:var(--peach)}
.offer:nth-child(3),.port-next{background:var(--peach)}
.clients li:nth-child(10n+7){background:var(--peach)}
/* The pink sticky notes become peach. */
.card.c2,.stat:nth-child(2n),.bf-ts-note,.article-body .highlight-box,.sticker.pink{background:var(--peach)}
.card .say em{background:linear-gradient(transparent 52%,var(--peach) 52%,var(--peach) 92%,transparent 92%)}


/* Services hero headline: one line, smaller. */
.ransom.lg.one-line{font-size:clamp(34px,5.2vw,80px)}
.ransom.lg.one-line .rn{flex-wrap:nowrap}
@media (min-width:901px){.page-hero .side{min-height:500px}}
/* Orange UGC feature block: white lettering. */
.svc-feature .mono,.svc-feature .h-display,.svc-feature p{color:#fff}

/* UGC + Content Production: long name, whole words, never cropped */
.svc-feature .h-display{font-size:clamp(34px,5.2vw,76px);line-height:.98;overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-width:860px){.svc-feature .h-display{font-size:clamp(34px,10.5vw,72px)}}
.svc-feature > div:first-of-type{container-type:inline-size;min-width:0}
.svc-feature .h-display{font-size:min(8.2cqi,76px)}
@media (max-width:860px){.svc-feature .h-display{font-size:min(8.2cqi,72px)}}

/* red location pin beside "Miami, Florida" on the About photo */
.sticker .geo-pin{display:inline-block;vertical-align:-3px;margin-right:6px;flex:none}

/* About hero: headline a little smaller, photo a little bigger */
.page-hero:has(.about-photo) .ransom.lg{font-size:clamp(44px,6.6vw,108px)}
.side .about-photo{width:min(450px,96%)}
@media (min-width:901px){.page-hero:has(.about-photo) .side{min-height:580px}}


.page-hero:has(.about-photo){overflow-x:clip}

/* Blog article: readable header controls, calmer title, aligned column, solid cover and step numbers */
.site-head .lang .ltbtn{color:var(--cream)}
.site-head .lang .ltbtn.active{border-bottom-color:var(--or)}
.article-wrap{max-width:900px}
.article-header h1{font-size:clamp(30px,3.6vw,50px);line-height:1.04}
.article-body{max-width:none}
.article-hero{background-color:var(--peach);aspect-ratio:21/7}
.tile-word{color:var(--ox);-webkit-text-stroke:0;font-size:clamp(64px,12vw,160px)}
.article-body .step{gap:16px}
.article-body .step-num{width:56px;font-size:34px;color:var(--or);-webkit-text-stroke:0;text-shadow:2px 2px 0 var(--ox);padding-top:4px}
.article-body .step-content{min-width:0}
@media (max-width:600px){.article-body .step-num{width:40px;font-size:26px}}
.article-header h1{font-size:clamp(28px,3.1vw,42px)}
.article-body .step-num{width:60px;font-size:24px;letter-spacing:0;padding-top:8px}


/* About quote: a taped paper note on the wall */
.quote{text-align:left;display:flex;justify-content:center}
.note-card{position:relative;margin:0;background:var(--paper);border:1.5px solid var(--ox);box-shadow:8px 8px 0 var(--ox);padding:clamp(28px,4.5vw,56px);max-width:760px;transform:rotate(-1.2deg)}
.note-card .tape{position:absolute;top:-14px;left:50%;width:110px;height:28px;margin-left:-55px;transform:rotate(-3deg);background:repeating-linear-gradient(45deg,rgba(255,197,154,.95) 0 8px,rgba(255,197,154,.65) 8px 16px)}
.note-card blockquote{font-size:clamp(22px,2.8vw,34px);line-height:1.24;letter-spacing:0}
.note-card blockquote em{font-style:italic;background:linear-gradient(transparent 55%,var(--peach) 55%,var(--peach) 92%,transparent 92%)}
.note-card figcaption{margin-top:24px}
.note-card .who-tag{display:inline-block;border:2px solid var(--ox);border-radius:999px;padding:5px 14px;background:var(--or);transform:rotate(-3deg)}
.note-card cite{margin:0;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}

/* "The work." headline, smaller */
.sec-head .ransom.lg{font-size:clamp(40px,5.6vw,88px)}

/* Footer: the index card. One footer on every page. */
.site-foot{background:var(--cream)}
.foot-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(28px,4vw,44px)}
.foot-card{position:relative;background:var(--paper);border:1.5px solid var(--ox);box-shadow:8px 8px 0 var(--ox);padding:clamp(24px,3.5vw,44px);transform:rotate(-1.2deg);background-image:repeating-linear-gradient(transparent 0 33px,rgba(59,11,5,.12) 33px 34px);display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.foot-card .tape{position:absolute;top:-14px;left:40px;width:100px;height:26px;transform:rotate(-4deg);background:repeating-linear-gradient(45deg,rgba(255,197,154,.95) 0 8px,rgba(255,197,154,.65) 8px 16px)}
.foot-card .h-plain{font-size:clamp(28px,3.8vw,46px);max-width:none;margin:0 0 6px}
.foot-mail{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,32px);color:var(--ox);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.foot-card .foot-line{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.2;margin:6px 0 8px}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;min-width:0}
.foot-cols .mono{display:block;margin-bottom:12px;font-weight:700}
.foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.foot-cols ul a{display:inline-block;padding:8px 0;font-size:16px;text-decoration:none;border-bottom:1px solid transparent}
.foot-cols ul a:hover{border-bottom-color:currentColor}
.foot-about{font-size:14px;line-height:1.5;margin-top:18px}
@media (max-width:860px){.foot-main{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.foot-cols{grid-template-columns:minmax(0,1fr)}}
.foot-base{border-top:2px solid var(--ox);margin-top:18px}
.foot-base .credit a{color:inherit;font-weight:700;text-underline-offset:3px}

/* The cut-out sets the board's height, so the Fig. 1 caption always lands below the shoe */
.photo-board{min-height:0}
.photo-board .cutout{position:relative;left:auto;top:auto;display:block;margin:0 auto;height:auto;transform:translateX(2%) rotate(2.5deg)}
.photo-board .fig{position:relative;bottom:auto;left:auto;display:block;margin:28px 0 0 24px}

/* --- small-phone and touch fixes (Oct 2026) --- */
@media (max-width:340px){
  .nav-logo img{width:104px}
  .menu-btn{font-size:0;gap:0;padding:0 12px;min-width:46px;justify-content:center}
  .lang a,.lang .ltbtn{min-width:26px;padding:12px 2px}
  .nav-right{gap:2px}
}
.foot-base .credit a{display:inline-block;padding:13px 4px;margin:-13px -4px}
.legal-main .also a,.foot-cols a{min-height:44px;display:inline-flex;align-items:center}
@media (pointer:coarse){.site-head .nav-links a:not(.btn){min-height:44px;display:inline-flex;align-items:center}}
@media (max-width:320px){html,body{overflow-x:clip}.legal-main,.article-body{overflow-wrap:anywhere}}

/* Passport stamps on the Meet Cata photo. Light inks on the wine band; a thin dark edge keeps them legible where they cross the cream print. */
.meet-photo{position:relative;max-width:360px;margin:0 auto;width:100%}
.stamp{position:absolute;z-index:6;display:block;pointer-events:none;filter:drop-shadow(0 0 .6px #3B0B05) drop-shadow(0 0 .6px #3B0B05)}
.stamp svg{display:block;width:100%;height:auto;overflow:visible}
.stamp .d{font-family:var(--display);font-weight:800}
.stamp .m{font-family:var(--mono);font-weight:700}
.stamp .bt{fill:#3B0B05}
.stamp.s-fl{width:46%;top:-7%;left:-17%;transform:rotate(-9deg);color:#FFC59A}
.stamp.s-uk{width:44%;top:-6%;right:-17%;transform:rotate(7deg);color:#DCCFF8}
.stamp.s-it{width:33%;top:30%;left:-19%;transform:rotate(-12deg);color:#FF9A5C}
.stamp.s-co{width:42%;top:48%;right:-19%;transform:rotate(6deg);color:#F2B8C6}
.stamp.s-fr{width:42%;bottom:-2%;left:-16%;transform:rotate(-6deg);color:#DCCFF8}
@media (max-width:860px){.meet-photo{max-width:min(340px,82%)}}
.stamp{filter:none;background:#3B0B05;padding:5px 6px;border-radius:5px;box-sizing:border-box;box-shadow:0 0 0 1.5px currentColor}
.stamp.s-fr{bottom:-12%}
.meet-photo{margin-bottom:34px}
.stamp.s-fr{left:auto;right:-14%;bottom:-13%;transform:rotate(5deg)}
@media (max-width:860px){.stamp.s-fr{right:-4%}}
/* Stamps are ink: no plate behind them. Mid-tone inks that read on both the wine band and the cream print. */
.stamp{background:none;padding:0;border-radius:0;box-shadow:none;filter:none}
.stamp.s-fl{color:#FF6B2C;top:-9%;left:-22%}
.stamp.s-uk{color:#B79CFF;top:-8%;right:-22%}
.stamp.s-it{color:#FF8FB0;left:-24%}
.stamp.s-co{color:#FF6B2C;right:-24%}
.stamp.s-fr{color:#B79CFF;right:-18%}
@media (max-width:1100px){.stamp.s-fl{left:-12%}.stamp.s-uk{right:-12%}.stamp.s-it{left:-12%}.stamp.s-co{right:-12%}.stamp.s-fr{right:-8%}}

/* Ways to partner: four taped index cards, each with a button to the place itself */
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}
.way{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:34px 20px 22px;border:2px solid var(--ox);color:var(--ox);box-shadow:6px 6px 0 var(--ox);
 background:var(--paper) repeating-linear-gradient(transparent 0 27px,rgba(59,11,5,.13) 27px 28px)}
.way:nth-child(1){transform:rotate(-1.4deg)}.way:nth-child(2){transform:rotate(1deg);background-color:var(--peach)}.way:nth-child(3){transform:rotate(-.6deg)}.way:nth-child(4){transform:rotate(1.3deg);background-color:var(--pink)}
.way .tape{position:absolute;top:-13px;left:50%;width:76px;height:22px;margin-left:-38px;background:rgba(242,184,198,.85);transform:rotate(-3deg)}
.way:nth-child(4) .tape{background:rgba(255,197,154,.9)}
.way h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(19px,1.7vw,23px);line-height:1.02;margin:0;overflow-wrap:anywhere}
.way p{margin:0;font-size:16px;line-height:1.45;max-width:none}
.way .tagline{align-self:flex-start;margin-top:auto;border:1.5px solid var(--ox);background:var(--peach);padding:4px 8px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.way:nth-child(2) .tagline,.way:nth-child(4) .tagline{background:var(--paper)}
.way-go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:46px;padding:0 14px;background:var(--or);color:var(--ox);border:2px solid var(--ox);border-radius:10px;box-shadow:3px 3px 0 var(--ox);font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.way-go:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ox)}
.way-go:focus-visible{outline:3px solid var(--ox);outline-offset:3px}
@media (max-width:1100px){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ways{grid-template-columns:minmax(0,1fr);gap:34px}.way{transform:none!important}.way:nth-child(odd){transform:rotate(-.6deg)!important}.way:nth-child(even){transform:rotate(.6deg)!important}}
.way-go svg{width:18px;height:18px;flex:none}
.way-go span,.way-go{white-space:normal}

/* Meet Cata on a sunset gradient, with the original passport stamps: ink that multiplies into the paper. */
.sunset{background:linear-gradient(135deg,#FFD9B0 0%,#FFC59A 30%,#F7AFA6 62%,#F2B8C6 100%);color:var(--ox)}
.sunset::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.sunset .wrap{position:relative}
.sunset a{color:var(--ox)}
.sunset .meet-copy .h-plain{color:var(--ox)}
.sunset .meet-copy .h-plain em{color:#7A2410}
.stamp{mix-blend-mode:multiply;opacity:1}
.stamp .bt{fill:#FFFDF8}
.stamp.s-fl{color:#3B0B05}.stamp.s-uk{color:#6B3FA0}.stamp.s-it{color:#E0501A}.stamp.s-co{color:#3B0B05}.stamp.s-fr{color:#6B3FA0}

/* Video popup: near-black ink with the page blurred behind it. The video is the only bright thing. */
.vmodal{background:rgba(14,10,10,.78);-webkit-backdrop-filter:blur(18px) brightness(.6);backdrop-filter:blur(18px) brightness(.6)}
.vmodal video{border:2px solid rgba(255,255,255,.22);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.vmodal-x{border-color:var(--ox);color:var(--ox)}
.vmodal-cap{color:#F4EEE6}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vmodal{background:rgba(14,10,10,.94)}}

#about.sunset{padding-top:calc(clamp(44px,5.5vw,76px) + 18px);padding-bottom:calc(clamp(44px,5.5vw,76px) + 18px)}

/* Phones: the homepage shows the first six videos. The full set is on the portfolio page. */
@media (max-width:700px){#work .port-grid .port-item:nth-child(n+7){display:none}}

/* Phone menu: the panel is cream, so its links are oxblood. (The wine header rule was winning on specificity and made them cream on cream.) */
@media (max-width:1060px){
  .site-head .nav-links>li>a:not(.btn){color:var(--ox);display:flex;align-items:center;min-height:48px}
  .site-head .nav-links>li>a:not(.btn):hover,.site-head .nav-links>li>a[aria-current="page"]:not(.btn){border-bottom-color:var(--ox)}
}

/* UGC hero on phones: the two polaroids are ~0.85 x width tall plus captions; the old 300px box let the torn edge crop them */
@media (max-width:900px){
  .page-hero .side:not(:has(.about-photo)){min-height:min(580px,calc(100vw * 1.3 + 20px));margin-bottom:14px}
  .side .polaroid.p2{top:24%;right:2%}
  .side .polaroid.p1{left:2%}
  .side .polaroid .cap{font-size:17px}
  .side .sticker.round{left:4%;right:auto;bottom:-3%}
}
@media (max-width:900px){.side .sticker.round{bottom:-9%}}
@media (max-width:440px){
  .page-hero .side:not(:has(.about-photo)){min-height:calc(100vw * 1.62 + 20px)}
  .side .sticker.round{bottom:-4%;left:6%;font-size:14px}
}
@media (max-width:360px){.side .sticker.round{left:0;bottom:-8%;width:118px;height:118px}}

/* s4 tile was lavender: invisible on lavender pages. Pink, and lavender back on pink bands. */
.pink .rp.s4,.sec.pink .rp.s4{background:var(--lav)}
@media (min-width:1101px){.way h3{font-size:clamp(16px,1.38vw,23px);overflow-wrap:break-word;hyphens:none}}

/* Usage rights: the table on wide screens, tap-to-open rows on phones */
.rights-acc{display:none}
@media (max-width:700px){
  #rights .table-box{display:none}
  .rights-acc{display:block;border:2px solid var(--ox);background:var(--paper);box-shadow:5px 5px 0 var(--ox)}
  .rights-acc .acc + .acc{border-top:2px solid var(--ox)}
  .rights-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;cursor:pointer;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:15px;line-height:1.1;letter-spacing:-.01em;color:var(--ox)}
  .rights-acc summary::-webkit-details-marker{display:none}
  .rights-acc summary:focus-visible{outline:3px solid var(--or);outline-offset:-3px}
  .rights-acc .pl{position:relative;flex:none;width:22px;height:22px}
  .rights-acc .pl::before,.rights-acc .pl::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:2px;background:var(--ox)}
  .rights-acc .pl::after{transform:rotate(90deg);transition:transform .2s}
  .rights-acc details[open] .pl::after{transform:rotate(0)}
  .rights-acc .acc-body{padding:0 16px 16px;color:var(--ox)}
  .rights-acc .acc-body p{margin:0 0 10px;font-size:15px;line-height:1.5}
  .rights-acc .tag-term{display:inline-block;font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;padding:7px 9px;border:1.5px solid var(--ox);background:var(--lav)}
}

/* video cards sit on cream paper even when the band is wine */
.ox .port-item,.ox .port-item .port-meta,.ox .port-item *{color:var(--ox)}
.ox .port-item .play,.ox .port-item .play *{color:inherit}