:root{
  --paper:#e9e3d5;
  --cream:#f7f2e6;
  --noir:#2b1a2b;
  --soot:#3d3d4d;
  --gold:#b62a7e;
  --gold-d:#8e1f62;
  --rust:#ef4526;
  --sky:#6b6b28;
  --sky-d:#4f5a1f;
  --sand:#e4dcc4;
  --clay:#33421f;
  --mid:#241f24;
  --line:rgba(43,26,43,.2);
  --line-l:rgba(247,242,230,.26);
  --arc:"Archivo",-apple-system,sans-serif;
  --fra:"Fraunces",Georgia,serif;
  --gutter:clamp(18px,4.5vw,72px);
  --maxw:1300px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.12'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--noir);font-family:var(--arc);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;background-image:var(--grain);pointer-events:none;z-index:999;mix-blend-mode:multiply}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative}

/* ---------- type ---------- */
.brut{font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;letter-spacing:-.028em;line-height:.86}
.fra-i{font-family:var(--fra);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 120;font-weight:600;letter-spacing:-.01em;line-height:.95;text-transform:lowercase}
.stroke{-webkit-text-stroke:1.5px var(--cream);color:transparent}

h1{margin:0;font-size:clamp(2.4rem,7.9vw,6.5rem)}
h2{margin:0;font-size:clamp(1.9rem,5vw,3.9rem)}
h3{margin:0;font-family:var(--arc);font-weight:900;font-stretch:82%;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(1.05rem,1.55vw,1.28rem)}
p{margin:0 0 1.05em;max-width:58ch}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1rem,1.3vw,1.13rem);line-height:1.6;max-width:46ch}
.lbl{font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;display:block;color:#6e675c}
.lbl-g{color:var(--gold-d)}
.on-dark .lbl,.lbl-light{color:var(--gold)}

/* ---------- patterns ---------- */
.pat-dots{background-image:radial-gradient(currentColor 1.6px,transparent 1.7px);background-size:9px 9px}
.pat-stripe{background-image:repeating-linear-gradient(-52deg,currentColor 0 3px,transparent 3px 11px)}
.pat-grid{background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:34px 34px}
.pat-check{background-image:repeating-linear-gradient(45deg,currentColor 0 1px,transparent 1px 9px),repeating-linear-gradient(-45deg,currentColor 0 1px,transparent 1px 9px)}
.pat-arc{background-image:repeating-radial-gradient(circle at 50% 100%,transparent 0 9px,currentColor 9px 10.4px);background-size:30px 15px}
.pat-hair{background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 7px)}
.tex{position:relative}
.tex>*{position:relative;z-index:2}
.tex::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.07}
.tex-cross::before{background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:30px 30px}
.tex-hair::before{background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px);opacity:.1}
.tex-dots::before{background-image:radial-gradient(currentColor 1.5px,transparent 1.6px);background-size:14px 14px}
.b-soot.tex::before{opacity:.09}
.b-sand.tex-cross::before{opacity:.08}
.tex-check::before{background-image:repeating-linear-gradient(45deg,currentColor 0 1px,transparent 1px 11px),repeating-linear-gradient(-45deg,currentColor 0 1px,transparent 1px 11px);opacity:.11}
.tex-arc::before{background-image:repeating-radial-gradient(circle at 50% 100%,transparent 0 11px,currentColor 11px 12.6px);background-size:36px 18px;opacity:.09}
.rule-dots{height:14px;color:var(--noir);background-image:radial-gradient(currentColor 1.7px,transparent 1.8px);background-size:9px 9px}
.rule-check{height:14px;color:var(--noir);background-image:repeating-linear-gradient(45deg,currentColor 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,currentColor 0 1px,transparent 1px 8px)}
.rule-arc{height:15px;color:var(--rust);background-image:repeating-radial-gradient(circle at 50% 100%,transparent 0 9px,currentColor 9px 10.6px);background-size:30px 15px}
.field-pat{position:absolute;pointer-events:none}
.reg{position:absolute;width:22px;height:22px;pointer-events:none;opacity:.55}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
.stripe-rule{height:14px;color:var(--noir);background-image:repeating-linear-gradient(-52deg,currentColor 0 3px,transparent 3px 11px)}

/* ---------- header ---------- */
.topbar{background:var(--noir);color:#e7a7c9;font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;padding:9px 0}
.topbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.site-header{background:var(--paper);border-bottom:1.5px solid var(--noir);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px;padding-bottom:15px}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--arc);font-weight:900;font-stretch:78%;font-size:19px;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.wordmark::before{content:"";width:9px;height:9px;background:var(--gold);flex:none}
.site-nav ul{display:flex;align-items:center;gap:clamp(6px,1.2vw,14px);list-style:none;margin:0;padding:0}
.site-nav a{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--mid);padding:10px 6px;border-bottom:2px solid transparent;transition:.16s;white-space:nowrap;display:inline-block}
.site-nav a:hover{color:var(--noir)}
.site-nav a[aria-current="page"]{color:var(--noir);border-bottom-color:var(--gold)}
.nav-cta{background:var(--noir);color:var(--cream)!important;padding:11px 20px!important;border-bottom:0!important;margin-left:8px}
.nav-cta:hover{background:var(--gold);color:var(--cream)!important}

/* ---------- bands ---------- */
.band{padding:clamp(46px,5.2vw,84px) 0;position:relative;overflow:hidden}
.b-cream{background:var(--cream)}
.b-noir{background:var(--noir);color:var(--cream)}
.b-soot{background:var(--soot);color:var(--cream)}
.b-gold{background:var(--gold);color:var(--noir)}
.b-rust{background:var(--rust);color:var(--cream)}
.b-sky{background:var(--sky);color:var(--cream)}
.b-sand{background:var(--sand);color:var(--noir)}
.b-clay{background:var(--clay);color:var(--cream)}
.b-rust .lbl,.b-clay .lbl{color:#ffd9c9}
.b-sky .lbl{color:#dfe0b0}
.b-sand .lbl{color:#6b6357}
.b-sky .pov-i h3{color:var(--cream)}
.b-sky .pov-i p{color:rgba(247,242,230,.82)}
.b-sky .pov,.b-sky .roster{border-color:rgba(247,242,230,.28)}
.b-sky .pov-i{border-color:rgba(247,242,230,.28)}
.b-sky .roster li{border-color:rgba(247,242,230,.28)}
.b-rust .lede,.b-clay .lede{color:rgba(248,244,234,.82)}
.b-rust .step h3,.b-clay .step h3,.b-rust .pov-i h3,.b-clay .pov-i h3{color:var(--cream)}
.b-rust .step p,.b-clay .step p,.b-rust .pov-i p,.b-clay .pov-i p{color:rgba(248,244,234,.8)}
.b-rust .step-n{color:#ffd9c9}
.b-sky .roster li{color:var(--cream)}
.b-sand .roster li{color:var(--noir)}
.b-sky .roster li:hover{background:var(--cream);color:var(--sky)}
.b-sand .roster li:hover{background:var(--noir);color:var(--sand)}
.b-noir .lede,.b-soot .lede{color:rgba(248,244,234,.76)}
.shead{margin-bottom:clamp(26px,3vw,44px)}
.shead .lbl{margin-bottom:18px}
.split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,4.6vw,74px) 0 clamp(34px,3.8vw,56px);position:relative;overflow:hidden}
.hero h1{position:relative;z-index:2}
.hero .l1,.hero .l3{display:block}
.hero .l2{display:block;font-size:1.2em;margin:-.04em 0 -.03em;color:var(--gold-d)}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 32px;margin-bottom:clamp(20px,2.4vw,32px)}
.hero-meta span{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#6e675c}
.hero-meta span:first-child{color:var(--noir)}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,48px);align-items:end;margin-top:clamp(26px,3vw,42px);position:relative;z-index:2}
.hero .dotfield{right:-40px;top:4%;width:230px;height:170px;color:var(--gold-d);opacity:.55}
.hero .reg1{right:6%;top:12%;color:var(--noir)}
.hero .reg2{left:1.5%;bottom:16%;color:var(--gold-d)}
.mark{background:var(--gold);color:var(--cream);display:inline-block;padding:0 .1em}

/* ---------- figures ---------- */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--line-l)}
.fig{padding:clamp(20px,2.2vw,30px) clamp(16px,2vw,28px);border-right:1px solid var(--line-l)}
.fig:last-child{border-right:0}
.fig:first-child{padding-left:0}
.fig-n{font-family:var(--arc);font-weight:900;font-stretch:80%;font-size:clamp(1.15rem,2vw,1.75rem);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;display:block;margin-bottom:11px;color:#e7a7c9}
.fig-l{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,244,234,.62);display:block;line-height:1.5}

/* ---------- what i do ---------- */
.levers{border-top:1.5px solid var(--line)}
.lev{display:grid;grid-template-columns:58px minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(18px,2.6vw,44px);align-items:start;padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--line);transition:.18s}
.lev:hover{background:rgba(227,167,44,.09)}
.lev-n{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold-d);padding-top:5px}
.lev h3{font-size:clamp(1.15rem,1.8vw,1.5rem)}
.lev p{font-size:15.5px;line-height:1.6;color:var(--mid);margin:0 0 12px;max-width:56ch}
.lev-tags{display:flex;flex-wrap:wrap;gap:8px 20px}
.lev-tags span{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--noir)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:17px 30px;background:var(--noir);color:var(--cream);border:0;cursor:pointer;transition:.2s}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.btn:hover{background:var(--gold);color:var(--cream)}
.btn-gold{background:var(--gold);color:var(--cream)}
.btn-gold:hover{background:var(--cream);color:var(--noir)}
.btn-cream{background:var(--cream);color:var(--noir)}
.btn-cream:hover{background:var(--gold);color:var(--cream)}
.btn-out{background:transparent;color:var(--noir);box-shadow:inset 0 0 0 1.5px var(--noir)}
.btn-out:hover{background:var(--noir);color:var(--cream);box-shadow:none}

/* ---------- roster ---------- */
.roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;border-top:1px solid currentColor;border-left:1px solid currentColor}
.roster li{list-style:none;padding:clamp(16px,1.8vw,24px) 12px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--arc);font-weight:900;font-stretch:80%;font-size:clamp(.74rem,.95vw,.88rem);letter-spacing:-.015em;text-transform:uppercase;line-height:1.1;transition:.16s}
.roster li:hover{background:var(--gold);color:var(--cream)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line-l);border-left:1px solid var(--line-l)}
.step{padding:clamp(26px,2.9vw,42px);border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
.step-n{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#e7a7c9;display:block;margin-bottom:16px}
.step h3{margin-bottom:14px;color:var(--cream);font-size:clamp(1.1rem,1.6vw,1.35rem)}
.step p{font-size:15px;line-height:1.62;color:rgba(248,244,234,.72);max-width:44ch}

/* ---------- thumbs ---------- */
.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.thumb-frame{position:relative;aspect-ratio:9/16;background:var(--soot);overflow:hidden;transition:.2s}
.thumb-frame::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(239,69,38,.6) 1.35px,transparent 1.45px);background-size:7px 7px;opacity:.3;pointer-events:none}
.thumb:hover .thumb-frame{outline:2px solid var(--gold);outline-offset:-2px}
.thumb-frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(248,244,234,.4);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.thumb-meta{padding-top:15px;border-top:1px solid var(--line);margin-top:15px}
.thumb-brand{font-family:var(--arc);font-weight:900;font-stretch:80%;font-size:.84rem;line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:6px}
.thumb-sub{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#6e675c}
.b-noir .thumb-meta,.b-soot .thumb-meta{border-top-color:var(--line-l)}
.b-noir .thumb-sub,.b-soot .thumb-sub{color:rgba(248,244,234,.55)}



/* ---------- offers ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.offer{position:relative;padding:clamp(26px,2.9vw,42px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;transition:.2s}
.offer:hover{background:var(--paper)}
.offer h3{margin:14px 0 14px;font-size:clamp(1.2rem,1.9vw,1.55rem)}
.offer p{font-size:14.6px;color:var(--mid);margin-bottom:20px}
.offer ul{list-style:none;margin:0 0 26px;padding:0;flex-grow:1}
.offer li{font-size:14.2px;line-height:1.55;padding:9px 0 9px 18px;border-top:1px solid var(--line);position:relative;color:var(--mid)}
.offer li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:2px;background:var(--gold)}
.price{font-family:var(--arc);font-weight:900;font-stretch:80%;font-size:clamp(1.6rem,2.5vw,2.15rem);line-height:.95;letter-spacing:-.035em;margin-bottom:7px}
.pin{position:absolute;top:0;right:0;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:var(--gold);color:var(--noir);padding:6px 12px}

/* ---------- pov ---------- */
.pov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-l);border-left:1px solid var(--line-l)}
.pov-i{padding:clamp(26px,2.9vw,40px);border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
.pov-i h3{margin-bottom:14px;color:var(--cream)}
.pov-i p{font-size:15px;line-height:1.62;color:rgba(248,244,234,.74)}

/* ---------- posts ---------- */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.post{padding:clamp(24px,2.7vw,38px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;transition:.2s}
.post:hover{background:var(--paper)}
.post h3{margin:14px 0 12px;font-size:1.1rem}
.post p{font-size:14.2px;color:var(--mid);margin-bottom:22px;flex-grow:1}
.post .lbl-g{font-weight:700}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(26px,4vw,70px);align-items:start}
.frame-photo{position:relative;aspect-ratio:4/5;background:var(--soot);display:flex;align-items:center;justify-content:center;color:rgba(248,244,234,.44);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:16px;box-shadow:inset 0 0 0 1px var(--line)}
.frame-photo::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(227,167,44,.55) 1.4px,transparent 1.5px);background-size:8px 8px;opacity:.28}

/* ---------- compact CTA ---------- */
.cta{background:var(--sand);color:var(--noir);border-top:1.5px solid var(--noir);padding:clamp(28px,3.2vw,44px) 0;position:relative;overflow:hidden}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cta .lbl{margin-bottom:8px;color:#6b6357}
.cta-h{font-family:var(--arc);font-weight:900;font-stretch:80%;font-size:clamp(1.2rem,2.2vw,1.85rem);letter-spacing:-.03em;text-transform:uppercase;line-height:1;margin:0}
.cta .stripe-abs{position:absolute;right:-30px;top:-20px;width:230px;height:150px;color:var(--noir);opacity:.13}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr);gap:clamp(30px,4.5vw,74px);align-items:start}
.det{border-top:1.5px solid var(--noir);padding-top:16px;margin-bottom:28px}
.det .lbl{margin-bottom:10px}
.det a,.det span.v{font-family:var(--arc);font-weight:900;font-stretch:80%;font-size:clamp(.98rem,1.5vw,1.25rem);line-height:1.12;letter-spacing:-.025em;text-transform:uppercase;text-decoration:none;word-break:break-word;transition:.16s}
.det a:hover{color:var(--gold-d)}
.field{margin-bottom:22px}
.field label{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#6e675c;display:block;margin-bottom:9px}
.field input,.field textarea{width:100%;font-family:var(--arc);font-size:16px;color:var(--noir);background:transparent;border:0;border-bottom:1.5px solid var(--noir);border-radius:0;padding:11px 2px;transition:.16s}
.field input:focus,.field textarea:focus{border-bottom-color:var(--gold-d)}
.field textarea{min-height:112px;resize:vertical}

/* ---------- footer ---------- */
.site-footer{background:var(--noir);color:rgba(248,244,234,.66);padding:clamp(38px,4.2vw,62px) 0 24px;position:relative;overflow:hidden}
.site-footer .dotfield{left:-40px;bottom:-30px;width:260px;height:180px;color:var(--gold);opacity:.2}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,3.8vw,64px);padding-bottom:40px;border-bottom:1px solid var(--line-l);position:relative;z-index:2}
.fname{display:inline-flex;align-items:center;gap:9px;font-family:var(--arc);font-weight:900;font-stretch:78%;font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:.01em;text-transform:uppercase;color:var(--cream);margin:0 0 14px;line-height:1.05}
.fname::before{content:"";width:9px;height:9px;background:var(--gold);flex:none}
.fblurb{font-size:14.5px;line-height:1.65;color:rgba(248,244,234,.6);max-width:34ch;margin:0}
.fh{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#e7a7c9;display:block;margin-bottom:16px}
.flist{list-style:none;margin:0;padding:0}
.flist li{margin-bottom:11px}
.flist a{font-size:14.5px;color:var(--cream);text-decoration:none;border-bottom:1px solid transparent;transition:.16s}
.flist a:hover{border-bottom-color:var(--gold)}
.ffine{padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,244,234,.42);position:relative;z-index:2}

/* homepage leans blue rather than gold */
#p-home .hero .l2{color:var(--sky-d)}
#p-home .hero .mark{background:var(--gold);color:var(--cream)}
#p-home .hero .dotfield{color:var(--sky-d);opacity:.6}
#p-home .hero .reg2{color:var(--sky-d)}
#p-home .figs{border-top-color:rgba(247,242,230,.32)}
#p-home .fig{border-right-color:rgba(247,242,230,.24)}
#p-home .fig-n{color:var(--cream)}
#p-home .fig-l{color:rgba(247,242,230,.72)}
#p-home .lev-n{color:var(--sky-d)}
#p-home .lev:hover{background:rgba(107,107,40,.13)}
#p-home .lev-tags span{color:var(--sky-d)}
#p-home .shead .lbl{color:var(--sky-d)}
#p-home .cta .lbl{color:var(--sky-d)}
#p-home .cta .btn-gold{background:var(--noir);color:var(--cream)}
#p-home .cta .btn-gold:hover{background:var(--gold);color:var(--cream)}
#p-home .cta .stripe-abs{color:var(--sky-d)}
#p-home .btn:hover{background:var(--gold);color:var(--cream)}
#p-home .wordmark::before{background:var(--gold)}

.page{display:none}
.page.on{display:block}

@media(max-width:1080px){.thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}.roster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){
  .cgrid,.about,.hero-bottom{grid-template-columns:minmax(0,1fr)}
  .grid2,
  .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .roster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig{border-right:0;padding-left:0}
  .lev{grid-template-columns:52px minmax(0,1fr)}
  .lev>div:last-child{grid-column:2/-1}
  .hero .dotfield,.hero .reg1,.hero .reg2{display:none}
  .frame-photo{max-width:220px}
}
@media(max-width:620px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .site-header{position:static}
  .site-nav ul{flex-wrap:wrap;gap:4px 12px}
  .nav-cta{margin-left:0}
  .grid2,.steps,.posts,.pov,.fgrid,.figs{grid-template-columns:minmax(0,1fr)}
  .thumbs,
  .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lev{grid-template-columns:minmax(0,1fr)}
  .lev>div:last-child{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}

/* ================= SPECIMEN GRID ================= */
:root{
  --cream:#efe7d8;
  --cream-2:#f6f0e4;
  --blk:#121212;
  --mustard:#e8b93c;
  --sky:#6ba8dc;
  --tomato:#e8563a;
  --grass:#4ca562;
}
body{background:var(--cream);color:var(--blk)}
body::after{mix-blend-mode:multiply;opacity:.14}

/* surfaces, straight off the tile grid */
.site-header{background:var(--cream);border-bottom:2px solid var(--blk)}
.wordmark{color:var(--blk)}
.wordmark::before{background:var(--tomato)}
.site-nav a{color:rgba(18,18,18,.62)}
.site-nav a:hover{color:var(--blk)}
.site-nav a[aria-current="page"]{color:var(--blk);border-bottom-color:var(--tomato)}
.nav-cta{background:var(--blk)!important;color:var(--cream)!important;border-bottom:0!important}
.nav-cta:hover{background:var(--tomato)!important;color:#fff!important}
.topbar{background:var(--blk);color:var(--mustard)}

.b-cream{background:var(--cream-2);color:var(--blk)}
.b-sand{background:var(--mustard);color:var(--blk)}
.b-noir{background:var(--blk);color:var(--cream)}
.b-soot{background:var(--grass);color:var(--blk)}
.b-sky{background:var(--sky);color:var(--blk)}
.b-rust{background:var(--tomato);color:var(--cream)}
.b-gold{background:var(--mustard);color:var(--blk)}

/* type */
.lbl{color:rgba(18,18,18,.58)}
.lbl-g{color:var(--tomato)}
.b-noir .lbl,.b-rust .lbl{color:rgba(239,231,216,.72)}
.hero-meta span{color:rgba(18,18,18,.58)}
.hero-meta span:first-child{color:var(--blk)}
.lev p,.offer p,.offer li,.post p,.pov-i p{color:rgba(18,18,18,.78)}
.b-noir .step p,.b-noir .pov-i p,.b-rust .step p{color:rgba(239,231,216,.82)}
.b-noir .step h3,.b-noir .pov-i h3{color:var(--cream)}
.thumb-sub,.still,.field label{color:rgba(18,18,18,.58)}
.hero .l2{color:var(--tomato)}
.mark{background:var(--mustard);color:var(--blk)}

/* the grid itself: heavier rules, like the specimen tiles */
.lev,.offer,.post,.pov-i,.grid2,.posts,.pov,.thumb-meta,.offer li,.figs,.fig{border-color:rgba(18,18,18,.22)!important}
.b-noir .lev,.b-noir .figs,.b-noir .fig,.b-noir .pov,.b-noir .pov-i,.b-rust .steps,.b-rust .step{border-color:rgba(239,231,216,.28)!important}
.roster{border-top:2px solid currentColor;border-left:2px solid currentColor}
.roster li{border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.roster li:hover{background:var(--mustard);color:var(--blk)}
.b-rust .roster li:hover,.b-sky .roster li:hover{background:var(--blk);color:var(--cream)}
.stripe-rule,.rule-dots,.rule-check{color:var(--blk)}
.rule-arc{color:var(--tomato)}


/* buttons, flat and blocky */
.btn{background:var(--blk);color:var(--cream);border:0}
.btn:hover{background:var(--tomato);color:#fff}
.btn-gold{background:var(--mustard);color:var(--blk)}
.btn-gold:hover{background:var(--blk);color:var(--cream)}
.btn-out{background:transparent;color:var(--blk);box-shadow:inset 0 0 0 2px var(--blk)}
.btn-out:hover{background:var(--blk);color:var(--cream);box-shadow:none}
.btn-cream{background:var(--cream);color:var(--blk)}
.btn-cream:hover{background:var(--mustard);color:var(--blk)}
.pin{background:var(--tomato);color:#fff}

/* form */
.field input,.field textarea{color:var(--blk);background:var(--cream-2);border:2px solid var(--blk);border-radius:0;padding:12px 13px}
.field input:focus,.field textarea:focus{box-shadow:4px 4px 0 var(--tomato);border-color:var(--blk)}

/* closing strip */
.cta{background:var(--sky);color:var(--blk);border-top:0;padding-top:clamp(48px,4.6vw,68px)}
.cta .lbl{color:rgba(18,18,18,.62)}
.cta .stripe-abs{color:var(--blk);opacity:.14}
.cta .btn{background:var(--blk);color:var(--cream)}
.cta .btn:hover{background:var(--tomato);color:#fff}

/* imagery */
.thumb-frame{background:var(--blk);box-shadow:0 0 0 2px var(--blk)}
.thumb-frame::after{background-image:radial-gradient(rgba(232,86,58,.6) 1.35px,transparent 1.45px);opacity:.3}
.thumb:hover .thumb-frame{outline-color:var(--mustard)}
.frame-photo{background:var(--blk);box-shadow:0 0 0 2px var(--blk)}

/* footer */
.site-footer{background:var(--blk);color:rgba(239,231,216,.7);padding-top:clamp(60px,5.2vw,90px)}
.fh{color:var(--mustard)}
.fname{color:var(--cream)}
.flist a{color:var(--cream)}
.flist a:hover{border-bottom-color:var(--mustard)}
.site-footer .dotfield{color:var(--mustard);opacity:.22}
.ffine{color:rgba(239,231,216,.45)}

/* homepage tile order: sky, cream, tomato, mustard */
#p-home .hero .mark{background:var(--mustard);color:var(--blk)}
#p-home .hero .l2{color:var(--sky)}
#p-home .hero .dotfield{color:var(--sky);opacity:.75}
#p-home .hero .reg1{color:var(--blk)}
#p-home .hero .reg2{color:var(--tomato)}
#p-home .b-sky{background:var(--grass)}
#p-home .figs{border-top-color:rgba(18,18,18,.3)}
#p-home .fig{border-right-color:rgba(18,18,18,.22)}
#p-home .fig-n,#p-home .fig-l{color:var(--blk)}
#p-home .fig-l{color:rgba(18,18,18,.66)}
#p-home .lev-n,#p-home .lev-tags span{color:var(--tomato)}
#p-home .lev:hover{background:rgba(232,185,60,.28)}
#p-home .shead .lbl{color:rgba(18,18,18,.58)}
#p-home .cta .lbl{color:rgba(18,18,18,.62)}
#p-home .btn:hover{background:var(--tomato);color:#fff}
#p-home .wordmark::before{background:var(--tomato)}


/* ================= HAND TEXTURES ================= */
.tex-ink::before{
  background-image:
    radial-gradient(currentColor 1.7px,transparent 2px),
    radial-gradient(currentColor 1.15px,transparent 1.5px),
    radial-gradient(currentColor 2.1px,transparent 2.4px);
  background-size:17px 21px,23px 19px,31px 27px;
  background-position:0 0,8px 11px,15px 4px;
  opacity:.13
}
.tex-paint::before{
  background-image:
    repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 11px),
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 17px),
    repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 27px);
  opacity:.1
}
.tex-wave::before{
  background-image:
    repeating-radial-gradient(circle at 24% 118%,transparent 0 13px,currentColor 13px 15px),
    repeating-radial-gradient(circle at 78% 124%,transparent 0 17px,currentColor 17px 19px);
  opacity:.1
}
.wv{position:relative}
.wv::after{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(22px,3vw,44px);z-index:4;background-repeat:repeat-x;background-size:1200px 100%;pointer-events:none}
.wv-cream::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,20 C1080,44 980,6 860,24 C740,42 660,10 540,26 C430,40 350,8 236,24 C150,36 80,12 0,28 Z' fill='%23efe7d8'/%3E%3C/svg%3E")}
.wv-cream2::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,20 C1080,44 980,6 860,24 C740,42 660,10 540,26 C430,40 350,8 236,24 C150,36 80,12 0,28 Z' fill='%23f6f0e4'/%3E%3C/svg%3E")}
.wv-green::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,20 C1080,44 980,6 860,24 C740,42 660,10 540,26 C430,40 350,8 236,24 C150,36 80,12 0,28 Z' fill='%234ca562'/%3E%3C/svg%3E")}
.wv-tomato::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,20 C1080,44 980,6 860,24 C740,42 660,10 540,26 C430,40 350,8 236,24 C150,36 80,12 0,28 Z' fill='%23e8563a'/%3E%3C/svg%3E")}
.wv-sky::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,20 C1080,44 980,6 860,24 C740,42 660,10 540,26 C430,40 350,8 236,24 C150,36 80,12 0,28 Z' fill='%236ba8dc'/%3E%3C/svg%3E")}
.rule-dots{
  height:20px;color:var(--blk);
  background-image:
    radial-gradient(currentColor 1.9px,transparent 2.2px),
    radial-gradient(currentColor 1.3px,transparent 1.6px);
  background-size:19px 20px,26px 20px;
  background-position:0 4px,11px 9px
}


/* ================= LEGIBILITY + IDENTITY ================= */
/* headlines: let the letters and words breathe */
.brut{letter-spacing:.004em;word-spacing:.08em;line-height:.94}
h1.brut,.hero h1 .brut,.hero h1 span{line-height:.96}
.hero h1{line-height:1}
.hero .l2{line-height:1.02;padding-bottom:.06em}
.fig-n,.stat-n,.thumb-brand,.price,.cta-h,.fname,.roster li{letter-spacing:.006em;word-spacing:.1em}
h2 .brut,h2.brut{line-height:.96}
.wordmark{letter-spacing:.02em;word-spacing:.08em}

/* body text: a warmer, plainer face than the display sans */
body,.lev p,.offer p,.offer li,.post p,.step p,.pov-i p,.body-l,.field input,.field textarea{
  font-family:"DM Sans",-apple-system,sans-serif}
.lede{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 40;
  font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.42rem);
  line-height:1.5;
  letter-spacing:-.005em;
  max-width:34ch}
.lev p,.offer p,.post p,.step p,.pov-i p{line-height:1.68}

/* tags were thin red on cream */
.lev-tags span{color:var(--blk);font-weight:700}
#p-home .lev-tags span{color:var(--blk)}
#p-home .lev-n{color:var(--tomato)}

/* wordmark: set in the serif so it reads as a mark, not another headline */
.wordmark{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
  font-weight:600;font-stretch:100%;font-size:20px;text-transform:none;letter-spacing:-.01em;
  display:inline-flex;align-items:baseline;gap:0}
.wordmark::before{display:none}
.wordmark span{font-style:italic;margin-right:.22em}
#p-home .wordmark::before{display:none}

/* the bar holding the nav is its own surface, not the same sheet as the page */
.site-header{background:#f7f2e7;border-bottom:1.5px solid rgba(18,18,18,.28);
  box-shadow:0 1px 0 rgba(18,18,18,.06),0 10px 22px -18px rgba(18,18,18,.5)}
.header-inner{padding-top:20px;padding-bottom:18px}
.site-nav a{font-family:"DM Sans",sans-serif;font-size:12.5px;letter-spacing:.1em}
.nav-cta{font-weight:600}


/* ================= ROUND TWO OF FIXES ================= */
/* name: original mark, black, lighter weight */
.wordmark{font-family:var(--arc);font-variation-settings:normal;font-weight:700;font-stretch:82%;
  font-size:18px;text-transform:uppercase;letter-spacing:.03em;word-spacing:.08em;color:#121212;
  display:inline-flex;align-items:center;gap:9px}
.wordmark span{font-style:normal;margin-right:0}
.wordmark::before{display:inline-block;content:"";width:8px;height:8px;background:#121212;flex:none}
#p-home .wordmark::before{display:inline-block;background:#121212}

/* the intro sentence: plain, not curved */
.lede,.fblurb{font-family:"DM Sans",-apple-system,sans-serif;font-variation-settings:normal;
  font-weight:400;letter-spacing:0}
.lede{font-size:clamp(1.05rem,1.45vw,1.24rem);line-height:1.62;max-width:38ch}

/* blue sections: black type reads, cream did not */
.b-sky,.b-sky .roster li,.b-sky .pov-i h3,.b-sky .thumb-brand{color:#121212}
.b-sky .lbl{color:rgba(18,18,18,.62)}
.b-sky .pov-i p,.b-sky .body-l{color:rgba(18,18,18,.84)}
.b-sky .roster,.b-sky .roster li,.b-sky .pov,.b-sky .pov-i{border-color:rgba(18,18,18,.32)!important}
.b-sky .roster li:hover{background:#121212;color:var(--cream)}
.b-sky .thumb-sub{color:rgba(18,18,18,.66)}

/* orange section: same treatment */
.b-rust,.b-rust .roster li,.b-rust .step h3,.b-rust .thumb-brand{color:#121212}
.b-rust .lbl{color:rgba(18,18,18,.68)}
.b-rust .step p,.b-rust .body-l{color:rgba(18,18,18,.86)}
.b-rust .roster,.b-rust .roster li,.b-rust .steps,.b-rust .step{border-color:rgba(18,18,18,.3)!important}
.b-rust .roster li:hover{background:#121212;color:var(--cream)}

/* roster cells: more air, stronger type */
.roster li{padding:clamp(18px,2vw,26px) 14px;font-weight:800;font-stretch:84%;letter-spacing:.01em}

/* about: copy sits beside the photo and holds a readable measure */
.about{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.about > div:last-child p{max-width:62ch;line-height:1.72}
@media(max-width:820px){.about{grid-template-columns:minmax(0,1fr)}}

/* steps and beliefs: looser leading */
.step p,.pov-i p{line-height:1.7;max-width:46ch}


/* ================= ROUND THREE ================= */
/* headings everywhere: stop the words running together */
h3,.step h3,.pov-i h3,.offer h3,.lev h3,.thumb-brand,.cta-h,.fname,.price{
  letter-spacing:.008em!important;word-spacing:.12em!important}
.step h3,.pov-i h3{line-height:1.14;font-size:clamp(1.1rem,1.5vw,1.28rem)}
.lev h3{line-height:1.06}

/* the numbers matter, so make them carry */
.figs{gap:clamp(26px,3vw,44px) clamp(20px,2.6vw,40px)}
.fig{padding:clamp(24px,2.6vw,36px) clamp(16px,2vw,28px)}
.fig-n{font-size:clamp(1.6rem,3.1vw,2.6rem)!important;font-weight:900;line-height:1;margin-bottom:14px}
.fig-l{font-size:10.5px!important;font-weight:700!important;letter-spacing:.2em;opacity:1}
#p-home .fig-l{color:rgba(18,18,18,.8)}

/* What I Do reads as the section it is */
#p-home .shead h2,.band .shead h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
#p-home .shead .lbl{font-size:11px;font-weight:700;color:var(--tomato);letter-spacing:.24em}
#p-home .shead{padding-bottom:22px;border-bottom:2px solid rgba(18,18,18,.85);margin-bottom:0}
#p-home .levers{border-top:0}
#p-home .lev-n{font-size:12px;font-weight:700}

/* process cells: room to breathe, cleaner frame */
.steps{border-top:0;border-left:0;gap:clamp(24px,3vw,44px)}
.step{border:0!important;padding:0 0 0 clamp(18px,2vw,26px);border-left:3px solid rgba(18,18,18,.85)!important}
.step-n{font-weight:700;letter-spacing:.22em}
.b-rust .step-n{color:rgba(18,18,18,.72)}

/* beliefs: three across, no empty cell, no boxes */
.pov{grid-template-columns:repeat(3,minmax(0,1fr));border:0!important;gap:clamp(26px,3.2vw,52px)}
.pov-i{border:0!important;border-top:3px solid rgba(18,18,18,.85)!important;padding:20px 0 0}
.b-sky .pov-i{border-top-color:rgba(18,18,18,.85)!important}
@media(max-width:900px){.pov{grid-template-columns:minmax(0,1fr)}}

/* About: copy sits to the right of the photo well below desktop width */
@media(min-width:700px){
  .about{display:grid!important;grid-template-columns:minmax(0,240px) minmax(0,1fr)!important;
    gap:clamp(26px,3.6vw,58px)!important;align-items:start!important}
}
.about > div:last-child p{max-width:60ch;line-height:1.74;margin-bottom:1.3em}
.frame-photo{max-width:240px}

/* footer: quieter and squared up */
.site-footer{padding-top:clamp(64px,5.4vw,92px)}
.fgrid{gap:clamp(30px,4vw,72px);padding-bottom:44px}
.fname{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:700;font-stretch:82%}
.fname::before{width:8px;height:8px;background:var(--mustard)}
.fblurb{max-width:30ch;line-height:1.7}
.fh{font-size:10px;font-weight:700;letter-spacing:.26em;color:var(--mustard)}
.flist li{margin-bottom:12px}
.ffine{padding-top:26px;border-top:1px solid rgba(239,231,216,.22);font-size:10px;letter-spacing:.22em}


/* ================= SITEWIDE SPACING PASS ================= */
/* one vertical scale, used everywhere */
:root{--s1:8px;--s2:16px;--s3:26px;--s4:38px;--s5:58px;--s6:88px}

/* --- hero headline: even leading between three different faces --- */
.hero h1{line-height:1;margin:0}
.hero h1 > span{display:block}
.hero .l1{line-height:.94;margin-bottom:.05em}
.hero .l2{line-height:.9;margin:0 0 .07em -.015em;padding-bottom:.1em}
.hero .l3{line-height:.94;margin-bottom:0}
.mark{padding:0 .13em;line-height:inherit}

/* --- hero block rhythm --- */
.hero{padding-top:clamp(40px,4.6vw,72px);padding-bottom:clamp(44px,5vw,78px)}
.hero-meta{margin-bottom:clamp(12px,1.4vw,20px)}
.hero h1{margin-bottom:clamp(16px,1.9vw,26px)}
.hero .lede{margin-bottom:clamp(26px,3vw,40px);max-width:40ch}
.hero-btns,.hero .hero-btns{gap:14px}

/* --- sections --- */
.band{padding:clamp(34px,3.8vw,62px) 0}
.band-sm{padding:clamp(38px,4.2vw,64px) 0}
.shead{margin-bottom:clamp(28px,3.2vw,50px)}
.shead .lbl{margin-bottom:16px}
.shead h2{margin-top:14px}
.head-split,.split{gap:22px}

/* --- paragraphs --- */
p{margin-bottom:1.25em}
.lev p,.offer p,.post p,.step p,.pov-i p,.body-l{margin-bottom:1.2em;line-height:1.72}
.lede{line-height:1.62}

/* --- what i do --- */
.levers{margin-top:0}
.lev{padding:clamp(26px,2.8vw,40px) 0;gap:clamp(18px,2.4vw,44px)}
.lev h3{margin-bottom:0}
.lev p{margin-bottom:16px}
.lev-tags{gap:10px 22px;margin-top:0}

/* --- figures --- */
.figs{gap:clamp(28px,3vw,46px) clamp(22px,2.6vw,42px)}
.fig{padding:clamp(22px,2.4vw,32px) clamp(16px,2vw,28px)}
.fig-n{margin-bottom:12px}

/* --- grids --- */
.cols,.grid2,.posts,.pov,.steps{gap:clamp(26px,3vw,48px)}
.thumbs{gap:clamp(16px,1.8vw,26px)}

.thumb-meta{padding-top:14px;margin-top:14px}

/* --- roster --- */
.roster li{padding:clamp(17px,1.9vw,25px) 14px}

/* --- offers --- */
.offer{padding:clamp(26px,2.8vw,42px)}
.offer h3{margin:14px 0 14px}
.offer p{margin-bottom:18px}
.offer ul{margin:0 0 26px}
.offer li{padding:10px 0}
.price{margin-bottom:8px}

/* --- process --- */
.step{padding-left:clamp(18px,2vw,26px)}
.step-n{margin-bottom:14px}
.step h3{margin-bottom:14px}

/* --- beliefs --- */
.pov-i{padding-top:20px}
.pov-i h3{margin-bottom:14px}

/* --- contact --- */
.cgrid{gap:clamp(32px,4.4vw,76px)}
.det{padding-top:15px;margin-bottom:26px}
.det .lbl{margin-bottom:10px}
.field{margin-bottom:24px}
.field label{margin-bottom:9px}

/* --- closing strip --- */
.cta{padding:clamp(34px,3.6vw,54px) 0}
.cta .wrap{gap:24px}
.cta .lbl{margin-bottom:10px}

/* --- footer --- */
.site-footer{padding:clamp(58px,5.2vw,88px) 0 26px}
.fgrid{gap:clamp(30px,3.8vw,68px);padding-bottom:42px}
.fname{margin-bottom:14px}
.fh{margin-bottom:18px}
.flist li{margin-bottom:12px}
.ffine{padding-top:24px}

/* --- header --- */
.header-inner{padding-top:20px;padding-bottom:18px}
.site-nav ul{gap:clamp(10px,1.6vw,22px)}


/* ================= HEADLINE METRICS ================= */
/* every line gets a tight box, then one deliberate gap between boxes.
   margins in em were scaling differently per face, which is why it read uneven. */
.hero h1{display:block;line-height:1;margin:0 0 clamp(16px,1.9vw,26px)}
.hero h1 > span{display:block;line-height:.9;margin:0;padding:0}
.hero .l1{margin-bottom:clamp(7px,.75vw,15px)}
.hero .l2{font-size:1.06em;line-height:.9;margin:0 0 clamp(11px,1.15vw,23px) -.012em}
.hero .l3{margin-bottom:0}
.mark{line-height:.9;padding:0 .13em;vertical-align:baseline}

/* section headings use the same logic */
h2{line-height:.92}
.shead h2{margin-top:15px!important}
.shead .lbl{margin-bottom:15px}
.shead{margin-bottom:clamp(30px,3.4vw,52px)}

/* uniform band padding now that inline overrides are gone */
.band,section.b-sky,section.b-rust,section.b-cream,section.b-sand,section.b-noir,section.b-soot{
  padding-top:clamp(56px,6.2vw,106px);padding-bottom:clamp(56px,6.2vw,106px)}
.hero{padding-top:clamp(24px,2.6vw,40px);padding-bottom:clamp(20px,2.2vw,34px)}
.cta{padding-top:clamp(30px,3.2vw,46px);padding-bottom:clamp(16px,1.8vw,26px)}


/* ================= HEADLINE: ABSOLUTE LINE BOXES ================= */
/* A unitless line-height multiplies each line's own font-size, so the serif line
   (larger em) always produced a taller box and an unequal gap. Locking the line
   box to a fixed height makes every gap identical regardless of face or size. */
.hero h1{
  font-size:clamp(2.9rem,9.4vw,7.8rem);
  line-height:clamp(2.61rem,8.46vw,7.02rem);   /* 0.90 of the font-size */
  margin:0 0 clamp(28px,3.2vw,46px);
  display:block}
.hero h1 > span{
  display:block;
  font-size:1em;
  line-height:inherit;      /* absolute, so every line box is the same height */
  margin:0;
  padding:0}
.hero .l2{font-size:1.05em;margin-left:-.012em}
.hero .l1,.hero .l3{margin:0}
.mark{line-height:inherit;padding:0 .13em;vertical-align:baseline}

/* section headings: two lines, one leading, no per-line margins */
h2,.shead h2{line-height:.94;margin-top:0}
.shead h2{margin-top:15px!important}
.oversize,.big{line-height:.94}


/* ================= INTRO SENTENCE MATCHES THE NAV ================= */
.lede,.fblurb,.hero .lede{
  font-family:"DM Sans",-apple-system,sans-serif!important;
  font-variation-settings:normal!important;
  font-weight:500!important;
  letter-spacing:.004em!important;
  font-style:normal!important}
.lede{font-size:clamp(1.05rem,1.45vw,1.24rem);line-height:1.6}


/* hero intro: one block */
.hero .lede{max-width:62ch;font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.72;font-weight:400!important}


/* ================= BY THE NUMBERS: RULED STRIP ================= */
.numbers{padding-top:clamp(34px,3.6vw,54px)!important;padding-bottom:clamp(34px,3.6vw,54px)!important}
.num-head{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,2.2vw,38px);
  padding-bottom:clamp(16px,1.9vw,28px)}
.num-eyebrow{font-family:var(--arc);font-size:10.5px;font-weight:700;letter-spacing:.36em;
  text-transform:uppercase;color:#121212}
.num-vr{width:1px;height:24px;background:rgba(18,18,18,.45);display:block}
.num-note{margin:0;font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24;
  font-weight:400;font-style:normal;font-size:clamp(15px,1.15vw,17.5px);line-height:1.5;color:#121212;
  letter-spacing:0;text-transform:none}

.num-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(18,18,18,.75);border-bottom:1px solid rgba(18,18,18,.75);
  padding:clamp(20px,2.4vw,34px) 0}
.num{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px);
  padding-left:clamp(16px,2.6vw,44px);border-left:1px solid rgba(18,18,18,.42)}
.num:first-child{border-left:0;padding-left:0}
.num-n{font-family:var(--arc);font-weight:900;font-stretch:76%;text-transform:uppercase;
  font-size:clamp(1.7rem,3.3vw,2.85rem);line-height:.9;letter-spacing:-.022em;word-spacing:.07em;
  color:#121212;white-space:nowrap}
.num-l{font-family:var(--arc);font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.75;color:rgba(18,18,18,.78)}

.tex-paint::before{opacity:.05}

@media(max-width:900px){
  .num-row{grid-template-columns:minmax(0,1fr);padding:clamp(16px,3vw,24px) 0}
  .num{border-left:0;padding-left:0;padding:14px 0;border-top:1px solid rgba(18,18,18,.28)}
  .num:first-child{border-top:0}
  .num-note{font-size:15px}
  .num-vr{display:none}
}


/* header sits on a single line, as in the reference */
.num-head{flex-wrap:nowrap;align-items:center}
.num-eyebrow{white-space:nowrap;flex:none}
.num-vr{flex:none}
.num-note{white-space:nowrap;font-size:clamp(13px,1.05vw,16.5px);flex:1 1 auto;min-width:0}
.num-l{white-space:nowrap}
@media(max-width:1000px){
  .num-note{white-space:normal;font-size:14px}
}
@media(max-width:900px){
  .num-head{flex-wrap:wrap}
}


/* three figures hold one row; the type scales instead of stacking */
.num-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.num{gap:clamp(8px,1.4vw,28px);padding-left:clamp(10px,2.2vw,44px);
  border-left:1px solid rgba(18,18,18,.42)!important;border-top:0!important;padding-top:0;padding-bottom:0}
.num:first-child{border-left:0!important;padding-left:0}
.num-n{font-size:clamp(1.05rem,2.7vw,2.85rem)!important;white-space:nowrap}
.num-l{font-size:clamp(7.5px,.78vw,10.5px)!important;letter-spacing:.18em;line-height:1.7;white-space:nowrap}
@media(max-width:900px){
  .num-row{padding:clamp(18px,2.4vw,34px) 0}
}
@media(max-width:560px){
  .num-row{grid-template-columns:minmax(0,1fr)!important}
  .num{border-left:0!important;padding-left:0;padding:13px 0;border-top:1px solid rgba(18,18,18,.28)!important}
  .num:first-child{border-top:0!important}
  .num-n{font-size:clamp(1.5rem,7vw,2rem)!important}
  .num-l{font-size:9.5px!important}
}


/* larger throughout the strip */
.num-n{font-size:clamp(1.35rem,3.5vw,3.5rem)!important}
.num-l{font-size:clamp(9px,.95vw,12.5px)!important;letter-spacing:.2em}
.num-eyebrow{font-size:clamp(10px,.92vw,12.5px)}
.num-note{font-size:clamp(14px,1.3vw,20px)}
.num{gap:clamp(9px,1.5vw,30px)}
.num-row{padding:clamp(24px,2.8vw,42px) 0}
@media(max-width:560px){
  .num-n{font-size:clamp(1.7rem,8vw,2.4rem)!important}
  .num-l{font-size:11px!important}
}


/* What I Do: oversized, in the accent used by the levers below */
#p-home .b-cream .shead{align-items:flex-end}
#p-home .b-cream .shead h2.brut{
  color:var(--tomato);
  font-size:clamp(3.6rem,11.5vw,10.2rem)!important;
  line-height:.84;
  letter-spacing:-.03em;
  margin-top:0!important}
#p-home .b-cream .shead .lede{
  max-width:26ch!important;
  font-size:clamp(16px,1.25vw,18.5px)!important;
  line-height:1.6!important;
  margin-left:auto!important;
  padding-bottom:clamp(6px,.9vw,16px)}
@media(max-width:820px){
  #p-home .b-cream .shead h2.brut{font-size:clamp(2.8rem,14vw,4.6rem)!important}
  #p-home .b-cream .shead .lede{margin-left:0!important;max-width:34ch!important}
}




/* the line beside WHAT I DO: further right, larger, distinct from body copy */
#p-home .b-cream .shead .lede{
  max-width:21ch!important;
  font-size:clamp(19px,1.85vw,28px)!important;
  line-height:1.38!important;
  font-weight:500!important;
  color:#121212!important;
  margin-left:auto!important;
  margin-right:0!important;
  padding-bottom:clamp(8px,1vw,18px)}
@media(max-width:820px){
  #p-home .b-cream .shead .lede{
    max-width:32ch!important;margin-left:0!important;font-size:19px!important;padding-top:18px}
}


/* close the gap when the heading and its line stack */
@media(max-width:820px){
  #p-home .b-cream .shead{display:block!important;padding-bottom:20px}
  #p-home .b-cream .shead h2.brut{margin:0 0 14px!important;line-height:.82}
  #p-home .b-cream .shead .lede{
    padding-top:0!important;padding-bottom:0!important;margin:0!important;
    font-size:18px!important;line-height:1.5!important;max-width:38ch!important}
}


/* the supporting line breaks where it is written to break */
#p-home .b-cream .shead .lede{max-width:none!important;white-space:normal}
#p-home .b-cream .shead .lede br{display:inline}
@media(max-width:820px){
  #p-home .b-cream .shead .lede{max-width:none!important}
}
@media(max-width:560px){
  #p-home .b-cream .shead .lede br{display:none}
  #p-home .b-cream .shead .lede{max-width:34ch!important}
}


/* the italic hero line takes a deeper version of the site blue */
:root{--sky-deep:#3a7ba4}
#p-home .hero .l2{color:var(--sky)!important}


/* slimmer header bar */
.header-inner{padding-top:10px!important;padding-bottom:9px!important}
.wordmark{font-size:15px}
.wordmark::before{width:6px;height:6px}
.site-nav a{font-size:11px;padding:6px 4px}
.nav-cta{padding:8px 15px!important}
.site-header{box-shadow:0 8px 16px -18px rgba(18,18,18,.5)}
@media(max-width:620px){
  .header-inner{padding-top:10px!important;padding-bottom:10px!important;gap:8px}
  .site-nav a{font-size:10.5px}
}


/* wordmark: no square, larger, last name heavier */
.wordmark::before{display:none!important;content:none!important}
#p-home .wordmark::before{display:none!important}
.wordmark{font-size:30px!important;gap:0!important;letter-spacing:.015em;line-height:1}
.wm-first{font-weight:600;font-stretch:84%}
.wm-last{font-weight:900;font-stretch:80%;margin-left:.22em}
@media(max-width:620px){
  .wordmark{font-size:23px!important}
}


/* ================= CURSOR REVEAL ================= */
#p-home .hero{position:relative;overflow:hidden}
#p-home .hero > .wrap{position:relative;z-index:3}
.reveal{
  position:absolute;left:0;right:0;top:0;height:0;z-index:1;pointer-events:none;overflow:hidden;
  --mx:-999px;--my:-999px;--r:190px;
  opacity:0;transition:opacity .45s ease;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,#000 42%,rgba(0,0,0,.35) 62%,transparent 78%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,#000 42%,rgba(0,0,0,.35) 62%,transparent 78%)}
.reveal.on{opacity:1}
.reveal-field{
  position:absolute;inset:-40px;
  background-image:
    radial-gradient(var(--tomato) 1.6px,transparent 1.9px),
    repeating-linear-gradient(90deg,rgba(18,18,18,.5) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(18,18,18,.5) 0 1px,transparent 1px 84px);
  background-size:26px 26px,auto,auto;
  opacity:.5}
.reveal-tag{
  position:absolute;font-family:var(--arc);font-size:9.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tomato);white-space:nowrap;transform:translate(-50%,-50%)}
@media(hover:none),(prefers-reduced-motion:reduce){.reveal{display:none}}


/* notes live in the clear strips above and below the headline */
.reveal-tag{font-size:10px;letter-spacing:.24em}


/* keep the notes from ever stacking on each other */
.reveal-tag{white-space:nowrap;line-height:1}
@media(max-width:1200px){
  .reveal-tag:nth-of-type(3),.reveal-tag:nth-of-type(6){display:none}
}
@media(max-width:1000px){
  .reveal-tag:nth-of-type(5),.reveal-tag:nth-of-type(8){display:none}
}


/* tighten the base of the hero */
#p-home .hero{padding-bottom:clamp(20px,2vw,32px)!important}
#p-home .hero .lede{margin-bottom:clamp(16px,1.8vw,26px)!important}
#p-home .hero-bottom{margin-top:clamp(14px,1.6vw,24px)!important;gap:clamp(16px,2vw,32px)!important;
  align-items:center}
#p-home .hero-btns{gap:10px}
#p-home .hero .btn{padding:13px 22px}
.rule-dots{height:14px}


/* the line beside BY THE NUMBERS */
.num-note{font-size:clamp(16px,1.75vw,26px)!important;line-height:1.4!important}
@media(max-width:1000px){.num-note{font-size:17px!important}}


/* levers: bigger numerals, titles on one line */
#p-home .lev{grid-template-columns:82px minmax(0,.72fr) minmax(0,1.28fr)!important}
#p-home .lev-n{
  font-size:clamp(20px,1.9vw,26px)!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  line-height:1!important;
  padding-top:2px}
#p-home .lev h3{
  white-space:nowrap;
  font-size:clamp(1.1rem,1.65vw,1.42rem);
  line-height:1.05}
@media(max-width:820px){
  #p-home .lev{grid-template-columns:66px minmax(0,1fr)!important}
  #p-home .lev h3{white-space:normal}
  #p-home .lev-n{font-size:20px!important}
}


/* numerals own the left column */
#p-home .lev{grid-template-columns:clamp(88px,11vw,158px) minmax(0,.82fr) minmax(0,1.18fr)!important}
#p-home .lev-n{
  font-size:clamp(30px,3.6vw,54px)!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  line-height:.9!important;
  padding-top:0!important}
#p-home .lev h3{white-space:nowrap;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.05}
@media(max-width:900px){
  #p-home .lev{grid-template-columns:74px minmax(0,1fr)!important}
  #p-home .lev-n{font-size:30px!important}
  #p-home .lev h3{white-space:normal}
}


/* levers, styled to the reference */
#p-home .lev{
  display:grid!important;
  grid-template-columns:clamp(96px,11vw,168px) minmax(0,1fr)!important;
  grid-template-rows:auto auto;
  column-gap:clamp(20px,2.6vw,44px)!important;
  row-gap:clamp(12px,1.4vw,20px);
  align-items:start;
  padding:clamp(30px,3.2vw,46px) 0!important}
#p-home .lev-n{
  grid-column:1;grid-row:1 / 3;
  font-size:clamp(56px,8vw,116px)!important;
  font-weight:900!important;
  font-stretch:78%;
  line-height:.78!important;
  letter-spacing:-.03em!important;
  color:var(--tomato)!important;
  padding-top:0!important}
#p-home .lev h3{
  grid-column:2;grid-row:1;
  white-space:normal!important;
  max-width:11ch;
  font-size:clamp(1.5rem,2.9vw,2.5rem)!important;
  line-height:.94!important;
  letter-spacing:-.02em}
#p-home .lev > div:last-child{grid-column:2;grid-row:2}
#p-home .lev p{
  font-size:15px!important;
  line-height:1.68!important;
  max-width:40ch;
  margin-bottom:clamp(18px,2vw,26px)!important}
#p-home .lev-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:0!important;
  padding-bottom:14px;border-bottom:1px solid rgba(18,18,18,.28)}
#p-home .lev-tags span{font-size:10px;font-weight:700;letter-spacing:.2em}
#p-home .lev-tags span:not(:last-child)::after{
  content:"\00B7";margin:0 14px;color:rgba(18,18,18,.45);font-weight:400;letter-spacing:0}
@media(max-width:820px){
  #p-home .lev{grid-template-columns:76px minmax(0,1fr)!important}
  #p-home .lev-n{font-size:52px!important}
  #p-home .lev h3{font-size:1.5rem!important;max-width:none}
}


/* the line beside WHAT I DO takes the serif used in the numbers strip */
#p-home .b-cream .shead .lede{
  font-family:"Fraunces",Georgia,serif!important;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:0!important;
  text-transform:none!important;
  line-height:1.42!important}


/* lever tags read bolder */
#p-home .lev-tags span{
  font-size:11px!important;
  font-weight:900!important;
  font-stretch:88%;
  letter-spacing:.18em!important;
  color:#121212!important}
#p-home .lev-tags span:not(:last-child)::after{font-weight:400!important;color:rgba(18,18,18,.4)}


/* lever tags, heavier still */
#p-home .lev-tags span{
  font-family:var(--arc)!important;
  font-size:12.5px!important;
  font-weight:900!important;
  font-stretch:100%!important;
  letter-spacing:.13em!important;
  color:#121212!important;
  -webkit-text-stroke:.35px #121212}


/* longer supporting line needs a readable measure */
#p-home .b-cream .shead .lede{
  font-size:clamp(15px,1.25vw,19px)!important;
  line-height:1.55!important;
  max-width:46ch!important}
@media(max-width:820px){
  #p-home .b-cream .shead .lede{font-size:16px!important;max-width:none!important}
}


/* longer lever copy, wider measure */
#p-home .lev p{max-width:56ch!important;font-size:15px!important;line-height:1.7!important}


/* closing block */
.cta-lead{
  margin:0 0 10px;
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24;
  font-weight:400;font-style:normal;
  font-size:clamp(15px,1.3vw,19px);
  line-height:1.4;
  color:rgba(18,18,18,.72);
  text-transform:none;letter-spacing:0}
.cta-h{font-size:clamp(1.35rem,2.4vw,2.05rem);line-height:1.06}


/* tags hold one line */
#p-home .lev-tags{flex-wrap:nowrap!important;overflow:visible}
#p-home .lev-tags span{
  font-size:clamp(9px,.82vw,11px)!important;
  letter-spacing:.1em!important;
  white-space:nowrap}
#p-home .lev-tags span:not(:last-child)::after{margin:0 clamp(7px,.8vw,12px)!important}
@media(max-width:820px){
  #p-home .lev-tags{flex-wrap:wrap!important}
  #p-home .lev-tags span{font-size:10px!important}
}


/* work hero: no label, tighter */
#p-work .hero{padding-top:clamp(34px,3.8vw,58px)!important;padding-bottom:clamp(26px,2.8vw,42px)!important}
#p-work .hero h1{margin-bottom:0!important}
#p-work .hero .lede{margin-top:10px!important}
#p-work .hero .lede{margin-top:0!important;margin-bottom:0!important}


/* roster head: label removed, spacing closed up */
#p-work .b-sky .shead{margin-bottom:clamp(16px,1.8vw,26px)!important}
#p-work .b-sky .shead h2{margin-top:0!important}
#p-work .b-sky{padding-top:clamp(40px,4.4vw,68px)!important}
#p-work .band.b-cream{padding-top:clamp(36px,3.6vw,58px)!important;padding-bottom:clamp(36px,3.6vw,58px)!important}

/* ---------- methodology: how it works ---------- */
#p-together .method-h2{line-height:.9;letter-spacing:-.03em}
#p-together .method-h2 .fra-i{display:inline-block;text-transform:none;font-size:1.04em;letter-spacing:-.012em}
:is(#p-together,#p-about) .steps.method{
  grid-template-columns:repeat(12,minmax(0,1fr));
  border:0!important;
  column-gap:clamp(14px,1.8vw,24px);
  row-gap:clamp(14px,1.8vw,24px)}
:is(#p-together,#p-about) .steps.method .step:nth-of-type(1),
:is(#p-together,#p-about) .steps.method .step:nth-of-type(2),
:is(#p-together,#p-about) .steps.method .step:nth-of-type(3),
:is(#p-together,#p-about) .steps.method .step:nth-of-type(4){grid-column:span 3}
:is(#p-together,#p-about) .steps.method .step:nth-of-type(5){
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(200px,.34fr) minmax(0,1fr);
  grid-template-rows:auto auto auto 1fr;
  grid-template-areas:"n c" "d c" "h c" "x c";
  column-gap:clamp(24px,4vw,72px)}
:is(#p-together,#p-about) .steps.method .step:nth-of-type(5) .step-n{grid-area:n}
:is(#p-together,#p-about) .steps.method .step:nth-of-type(5) .step-dots{grid-area:d}
:is(#p-together,#p-about) .steps.method .step:nth-of-type(5) h3{grid-area:h}
:is(#p-together,#p-about) .steps.method .step:nth-of-type(5) p{grid-area:c;align-self:start;max-width:64ch}
:is(#p-together,#p-about) .steps.method .step{
  border:0!important;border-top:3px solid currentColor!important;
  padding:clamp(22px,2.4vw,32px) 0 0 0!important}
:is(#p-together,#p-about) .steps.method .step-n{
  font-family:var(--arc);font-weight:900;font-stretch:80%;
  font-size:clamp(2rem,3vw,2.9rem);line-height:.86;letter-spacing:-.035em;
  color:currentColor!important;opacity:.32;margin:0 0 12px;display:block}
:is(#p-together,#p-about) .steps.method .step-dots{display:flex;gap:5px;margin:0 0 18px}
:is(#p-together,#p-about) .steps.method .step-dots i{width:18px;height:3px;background:currentColor;opacity:.22;display:block}
:is(#p-together,#p-about) .steps.method .step-dots i.on{opacity:1}
:is(#p-together,#p-about) .steps.method .step h3{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  letter-spacing:-.024em;line-height:1.04;
  font-size:clamp(1.05rem,1.35vw,1.28rem);margin:0 0 14px}
:is(#p-together,#p-about) .steps.method .step p{font-size:14px;line-height:1.68;max-width:none;margin:0}
:is(#p-together,#p-about) .steps.method .step p + p{margin-top:11px}
/* two-line heroes: the italic phrase runs inline on line one */
.hero h1.h1-two .l1,.hero h1.h1-two .l3{display:block!important;margin:0!important;line-height:1.08!important}
.hero h1.h1-two .fra-i{
  display:inline;text-transform:none;font-size:1.04em;letter-spacing:-.012em}
#p-work .hero h1.h1-two{font-size:clamp(2.1rem,7.2vw,5.7rem);letter-spacing:-.034em}
#p-work .hero h1.h1-two .fra-i{color:var(--tomato)}

#p-together .hero h1.h1-one{
  font-size:clamp(2rem,6.6vw,5.2rem);line-height:1;letter-spacing:-.035em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .19em}
#p-together .hero h1.h1-one .l1,
#p-together .hero h1.h1-one .l2,
#p-together .hero h1.h1-one .l3{
  display:inline-block;margin:0;padding:0;line-height:1.04}
#p-together .hero h1.h1-one .l2{font-size:1.06em;line-height:1;padding-bottom:.04em}
#p-together .hero h1.h1-one .l1{flex:0 0 100%}
/* tighten the work-with-me rhythm */
#p-together .hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(18px,2vw,30px)!important;padding-bottom:clamp(10px,1.2vw,18px)!important}
#p-together .hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 50% 100%,
      transparent 0 44px, rgba(232,86,58,.5) 44px 46.5px, transparent 46.5px 47px),
    radial-gradient(rgba(232,185,60,.7) 2px, transparent 2.2px);
  background-size:150px 75px, 50px 50px;
  background-position:0 0, 25px 25px;
  opacity:.16}
#p-together .hero > .wrap{position:relative;z-index:2}
#p-together .cta{
  background:var(--cream-2);color:var(--blk);border-top:0;
  padding-top:clamp(26px,3vw,46px)!important;padding-bottom:clamp(26px,3vw,46px)!important}
#p-together .cta .wrap{display:block;background:none;border:0;box-shadow:none;
  padding:0 var(--gutter)}
#p-together .cta .stripe-abs{color:var(--blk);opacity:.1}
#p-together .cx-lbl{
  display:inline-block;font-family:var(--arc);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(18,18,18,.55);
  padding-bottom:7px;border-bottom:2px solid var(--mustard);margin-bottom:clamp(12px,1.4vw,18px)}
#p-together .cta-h{
  font-size:clamp(1.6rem,4.1vw,3.05rem)!important;line-height:.96!important;
  letter-spacing:-.034em;max-width:none;margin:0}
#p-together .cta-h .mark{background:var(--mustard);color:var(--blk);padding:0 .1em}
#p-together .cx-rule{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  margin:clamp(11px,1.3vw,16px) 0 clamp(12px,1.4vw,18px)}
#p-together .cx-star{flex:none;width:clamp(18px,1.8vw,24px);height:clamp(18px,1.8vw,24px);
  display:block;color:var(--mustard)}
#p-together .cx-rule i{flex:1 1 auto;height:1px;background:var(--mustard);opacity:.85}
#p-together .cx-hr{height:1px;background:var(--mustard);opacity:.85;
  margin:clamp(15px,1.8vw,22px) 0 clamp(14px,1.6vw,20px)}
#p-together .cta .btn{font-size:11.5px;padding:15px 26px;flex:none;
  background:var(--blk);color:var(--cream)}
#p-together .cta .btn:hover{background:var(--tomato);color:#fff}
@media(max-width:620px){
  #p-together .cx-cta .btn{width:100%;justify-content:center}
}
#p-together .wm-kick{
  font-family:var(--fra);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36;
  font-weight:400;font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.3;
  letter-spacing:-.008em;color:var(--blk);max-width:34ch;
  margin:clamp(14px,1.6vw,22px) 0 clamp(10px,1.2vw,16px)}
#p-together .pk-head-slim{max-width:none;margin-bottom:clamp(18px,2vw,28px)}
#p-together .pk-head-slim .pk-promise{margin-top:0}
#p-together .wm-symptoms{
  font-family:var(--arc);font-weight:600;font-stretch:100%;text-transform:none;
  font-size:clamp(1rem,1.32vw,1.16rem);line-height:1.6;letter-spacing:-.004em;
  color:var(--blk);max-width:58ch;margin:clamp(14px,1.7vw,22px) 0 0;
  padding-left:clamp(12px,1.4vw,18px);border-left:3px solid var(--tomato)}
#p-together .hero h1{margin-bottom:0!important}
#p-together .hero .lede{margin-top:0!important;max-width:58ch!important;
  font-size:clamp(.95rem,1.18vw,1.04rem);line-height:1.6}
:is(#p-together,#p-about) .b-rust{padding-top:clamp(38px,4.2vw,62px)!important}
:is(#p-together,#p-about) .b-rust .shead{margin-bottom:clamp(18px,2.2vw,30px)!important}
:is(#p-together,#p-about) .b-rust .shead .lbl{margin-bottom:0!important}
:is(#p-together,#p-about) .b-rust .shead h2{margin-top:0;line-height:.94;letter-spacing:-.03em}

/* bold palette pattern behind My Creative System */
:is(#p-together,#p-about) .wm-pat{position:relative;overflow:hidden;isolation:isolate}
:is(#p-together,#p-about) .wm-pat::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 50% 100%,
      transparent 0 30px, rgba(232,185,60,.85) 30px 35px, transparent 35px 36px),
    radial-gradient(rgba(107,168,220,.85) 3px, transparent 3.2px),
    repeating-linear-gradient(45deg,
      rgba(18,18,18,.16) 0 2px, transparent 2px 18px);
  background-size:96px 48px, 48px 48px, auto;
  background-position:0 0, 24px 24px, 0 0;
  opacity:.42}
:is(#p-together,#p-about) .wm-pat > .wrap{position:relative;z-index:2}
:is(#p-together,#p-about) .wm-pat .wm-shell{
  background:rgba(232,86,58,.86);
  backdrop-filter:blur(2px);
  border-color:rgba(18,18,18,.24)}

/* about: longer bio needs sticky photo + comfortable measure */
#p-about .hero h1{font-size:clamp(1.95rem,5.8vw,4.5rem);line-height:1.12}
#p-about .hero h1 .l1,#p-about .hero h1 .l3{margin:0;padding:0;line-height:1.14}
#p-about .hero h1 .fra-i{
  display:inline;text-transform:none;font-size:1.04em;
  letter-spacing:-.012em;color:var(--tomato)}
#p-about .hero{padding-top:clamp(20px,2.2vw,34px)!important;padding-bottom:clamp(12px,1.4vw,22px)!important}
#p-about .band.b-cream{padding-top:clamp(34px,3.6vw,56px)!important}
/* about: floated portrait, copy wraps around it */
#p-about .ab-copy{max-width:none;width:100%;margin:0}
#p-about .ab-fig{
  float:left;box-sizing:border-box;
  width:clamp(250px,40%,430px);
  /* padding reserves room for the offset frame layers so text can never sit on them */
  padding:0 34px 34px 0;
  margin:4px clamp(22px,2.8vw,44px) 14px 0}
#p-about .frame-photo{
  position:relative;width:100%!important;max-width:none!important;
  aspect-ratio:3/4;margin:0;
  border:4px solid var(--blk);
  box-shadow:14px 14px 0 var(--mustard), 28px 28px 0 var(--tomato);
  transform:rotate(-1.4deg);transition:transform .35s ease, box-shadow .35s ease}
#p-about .frame-photo:hover{
  transform:rotate(0deg);
  box-shadow:10px 10px 0 var(--sky), 20px 20px 0 var(--grass)}
#p-about .frame-photo.has-photo{color:transparent;background:var(--cream)}
#p-about .frame-photo.has-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain!important;display:block;z-index:1}
#p-about .frame-photo.has-photo::after{z-index:2;opacity:.16}
#p-about .ab-copy p{max-width:none;font-size:14.5px;line-height:1.62;letter-spacing:.002em}
#p-about .ab-copy p + p{margin-top:14px}
#p-about .ab-copy::after{content:"";display:block;clear:both}
@media(max-width:640px){
  #p-about .ab-fig{float:none;width:min(320px,80%);margin:0 0 26px}
}
#p-contact .cgrid{grid-template-columns:minmax(0,1fr)}
#p-contact .cgrid form{max-width:660px}
#p-contact .hero h1{font-size:clamp(2.15rem,7.2vw,5.65rem);line-height:1.04}
#p-contact .hero h1 .fra-i{
  display:inline;text-transform:none;font-size:1.04em;
  letter-spacing:-.012em;color:var(--tomato)}
#p-contact .ct-reply{
  font-family:var(--fra);font-style:normal;font-weight:400;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24;
  font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.62;letter-spacing:-.006em;
  color:var(--blk);max-width:56ch;margin:clamp(16px,1.9vw,24px) 0 0;
  padding-left:clamp(12px,1.4vw,18px);border-left:3px solid var(--tomato)}
#p-contact .ct-reply b{
  font-family:var(--arc);font-weight:900;font-stretch:84%;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.18em;color:rgba(18,18,18,.55);
  display:block;margin-bottom:6px}
#p-contact .hero{padding-bottom:clamp(14px,1.6vw,24px)!important}
#p-contact .band.b-cream{padding-top:clamp(26px,2.8vw,44px)!important}
#p-about .about > div:last-child p + p{margin-top:20px}

@media(max-width:1080px){
  :is(#p-together,#p-about) .steps.method .step:nth-of-type(1),
  :is(#p-together,#p-about) .steps.method .step:nth-of-type(2),
  :is(#p-together,#p-about) .steps.method .step:nth-of-type(3),
  :is(#p-together,#p-about) .steps.method .step:nth-of-type(4){grid-column:span 6}
  :is(#p-together,#p-about) .steps.method .step p{font-size:15px}
}
@media(max-width:620px){
  :is(#p-together,#p-about) .steps.method .step:nth-of-type(n){grid-column:span 12}
  :is(#p-together,#p-about) .steps.method .step:nth-of-type(5){
    display:flex;flex-direction:column;grid-template-columns:none}
  :is(#p-together,#p-about) .steps.method .step:nth-of-type(5) h3{margin-bottom:14px}
}
/* ---------- work with me: modular cards ---------- */
:is(#p-together,#p-about) .wm-shell{
  background:rgba(18,18,18,.075);
  border:1px solid rgba(18,18,18,.16);
  border-radius:clamp(22px,2.6vw,30px);
  padding:clamp(16px,2vw,26px)}
:is(#p-together,#p-about) .steps.method{
  column-gap:clamp(14px,1.6vw,22px);
  row-gap:clamp(14px,1.6vw,22px);
  align-items:stretch}
:is(#p-together,#p-about) .steps.method .step{
  background:var(--cream-2);
  border:1px solid rgba(18,18,18,.1)!important;
  border-radius:clamp(16px,1.9vw,22px)!important;
  padding:clamp(24px,2.5vw,34px)!important;
  box-shadow:0 2px 0 rgba(18,18,18,.07);
  display:flex;flex-direction:column;height:100%}
:is(#p-together,#p-about) .steps.method .step-n{opacity:.26;margin:0 0 10px}
:is(#p-together,#p-about) .steps.method .step-dots i{opacity:.2}
:is(#p-together,#p-about) .steps.method .step-dots i.on{opacity:1;background:var(--tomato)}
:is(#p-together,#p-about) .steps.method .step h3{color:#121212}
:is(#p-together,#p-about) .steps.method .step p{color:rgba(18,18,18,.76)}

/* packages become discrete tiles with varying widths */
#p-together .grid2{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);
  border:0!important;align-items:stretch}
#p-together .offer{
  background:var(--cream-2);
  border:1px solid rgba(18,18,18,.13)!important;
  border-radius:clamp(20px,2.3vw,28px)!important;
  padding:clamp(28px,3vw,40px)!important;
  box-shadow:0 2px 0 rgba(18,18,18,.07);
  overflow:hidden;height:100%}
#p-together .offer:nth-of-type(1){grid-column:span 5}
#p-together .offer:nth-of-type(2){grid-column:span 7;background:#fbf7ee}
#p-together .offer:nth-of-type(3){grid-column:span 7}
#p-together .offer:nth-of-type(4){grid-column:span 5}
#p-together .offer:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(18,18,18,.09)}
#p-together .offer .pin{border-radius:0 0 0 14px;padding:7px 14px}
#p-together .offer h3{font-size:clamp(1.3rem,2.1vw,1.75rem);margin:12px 0 14px}
#p-together .offer ul{margin:0 0 24px}
#p-together .offer li{border-top-color:rgba(18,18,18,.14)}
#p-together .wm-obtn{margin-top:18px;align-self:flex-start;border-radius:100px}

@media(max-width:900px){
  #p-together .offer:nth-of-type(1),#p-together .offer:nth-of-type(2),
  #p-together .offer:nth-of-type(3),#p-together .offer:nth-of-type(4){grid-column:span 12}
}



/* roster cells sit in a thicker white grid */
.b-sky .roster{
  border-top:4px solid var(--cream)!important;
  border-left:4px solid var(--cream)!important}
.b-sky .roster li{
  border-right:4px solid var(--cream)!important;
  border-bottom:4px solid var(--cream)!important}
.b-sky .roster li:hover{background:var(--cream);color:var(--sky)}


/* tiles sit a shade darker than the band */
.b-sky .roster li{background:#5a97cd}
.b-sky .roster li:hover{background:var(--cream);color:#3f7cb1}


/* texture on the blue field, tiles stay clean */
#p-work .b-sky{position:relative;isolation:isolate}
#p-work .b-sky::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;
  background-image:
    radial-gradient(#0f2c45 1.5px,transparent 1.8px),
    radial-gradient(#0f2c45 1.1px,transparent 1.4px);
  background-size:19px 23px,27px 21px;
  background-position:0 0,9px 12px}
#p-work .b-sky > .wrap{position:relative;z-index:1}
.b-sky .roster li{background:#5a97cd;position:relative;z-index:1}


/* deep field, pale tiles */
#p-work .b-sky{background:#2f6390!important}
#p-work .b-sky .shead h2,#p-work .b-sky .lbl{color:var(--cream)!important}
#p-work .b-sky::before{opacity:.2;background-image:
  radial-gradient(#122f47 1.5px,transparent 1.8px),
  radial-gradient(#122f47 1.1px,transparent 1.4px)}
.b-sky .roster li{background:#b9d5ee!important;color:#16324a!important}
.b-sky .roster li:hover{background:var(--cream)!important;color:#2f6390!important}


/* faint grain inside the italic line */
#p-home .hero .l2{
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E"),
    linear-gradient(var(--sky),var(--sky));
  background-size:120px 120px,auto;
  -webkit-background-clip:text;
  background-clip:text}
@supports not (-webkit-background-clip:text){
  #p-home .hero .l2{color:var(--sky)!important;-webkit-text-fill-color:currentColor;background:none}
}


/* the fill is painted in the element's box, so the descender needs room */
#p-home .hero .l2{
  padding-bottom:.26em!important;
  margin-bottom:-.26em!important;
  overflow:visible}


/* brand tiles are links */
.b-sky .roster li{padding:0!important}
.b-sky .roster li a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;height:100%;padding:clamp(17px,1.9vw,25px) 14px;
  text-decoration:none;color:inherit;transition:.16s}
.b-sky .roster li a[data-needs-url]{cursor:default}
.b-sky .roster li:hover a{color:inherit}


/* real reels in the work grid */
.thumb-frame .reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.sound-cue{position:absolute;right:8px;bottom:8px;z-index:3;background:rgba(18,18,18,.82);color:var(--cream);
  font-family:var(--arc);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 8px;pointer-events:none;opacity:0;transition:opacity .2s}
.thumb-frame:hover .sound-cue{opacity:1}


/* no dot screen over the reels */
.thumb-frame::after{display:none!important;content:none!important}


/* brand name only under each reel */
.thumb-meta{padding-top:12px;margin-top:12px}
.thumb-brand{margin-bottom:0}


/* click a reel to open it large */
.thumb-frame{cursor:pointer}
.thumb-frame::before{
  content:"Play";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:var(--arc);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);background:rgba(18,18,18,.72);padding:8px 14px;opacity:0;transition:opacity .2s;
  pointer-events:none}
.thumb-frame:hover::before{opacity:1}

.lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(14,14,13,.94);padding:clamp(20px,4vw,56px)}
.lb.open{display:flex}
.lb-stage{max-width:min(420px,92vw);width:100%}
.lb-stage video{width:100%;height:auto;max-height:82vh;display:block;background:#000}
.lb-close{position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);
  background:none;border:0;color:var(--cream);font-size:20px;line-height:1;cursor:pointer;padding:10px}
.lb-close:hover{color:var(--mustard)}
.lb-cap{position:absolute;left:50%;bottom:clamp(16px,3vw,34px);transform:translateX(-50%);
  font-family:var(--arc);font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(239,231,216,.7)}


/* poster fills the tile before playback */
.thumb-frame video{object-fit:cover;background:#141312}


/* vimeo embeds fill their tile */
.thumb-frame .vim{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}



.thumb-frame .vim{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:2}
.vim-fallback{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:1;
  font-family:var(--arc);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(239,231,216,.7);text-decoration:none;white-space:nowrap}
.vim-fallback:hover{color:var(--cream)}


.thumb-talent{display:block;font-family:var(--arc);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(239,231,216,.62);margin-top:7px}


/* celebrity row: four across, held at narrower widths */
.b-soot .thumbs{grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(10px,1.4vw,20px)!important}
@media(max-width:600px){
  .b-soot .thumbs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* the p and y tails were being painted over by the highlight block below */
#p-home .hero h1{position:relative}
/* balanced hero: headline left, supporting copy + buttons right */
@media(min-width:960px){
  /* the dot field lives where the right column now sits */
  #p-home .hero .dotfield,#p-home .hero .reg2{display:none}
  #p-home .hero-bottom{
    justify-content:flex-start;padding-top:.28em;
    padding-left:clamp(20px,2.6vw,42px);
    border-left:1px solid rgba(18,18,18,.22)}
  #p-home .hero > .wrap{
    display:grid;
    grid-template-columns:minmax(0,1.75fr) minmax(268px,1fr);
    column-gap:clamp(20px,2.6vw,42px);
    align-items:stretch}
  #p-home .hero > .wrap > h1{grid-column:1;grid-row:1;margin:0!important}
  #p-home .hero-bottom{
    grid-column:2;grid-row:1;
    display:flex!important;flex-direction:column;align-items:flex-start;
    gap:clamp(12px,1.3vw,18px)!important;margin:0!important}
  #p-home .hero-bottom .lede{max-width:none!important}
  #p-home .hero h1{font-size:clamp(2.5rem,6.3vw,5.9rem)}
}
/* numbers band: flush left, eyebrow over a single rule */
.numbers .num-head{justify-content:flex-start;text-align:left}
.numbers .num-vr,.numbers .num-note{display:none}
.num-row{justify-items:start}
.num{justify-content:flex-start;text-align:left}

#p-home .hero .l2{position:relative;z-index:3;margin-bottom:.07em!important}
#p-home .hero .l3{position:relative;z-index:1}
#p-home .hero .mark{position:relative;z-index:0}


/* still ads keep the 9:16 ad shape */





@media(max-width:820px){}


/* stills keep their own aspect ratio, no cropping */





@media(max-width:900px){}


/* ---- STATIC ADS (single source of truth) ---- */





@media(max-width:900px){}


/* ---- STATIC ADS: uniform contact sheet ---- */





@media(max-width:640px){}


/* ---- STATIC ADS: gallery, uncropped, three across ---- */





@media(max-width:560px){}


/* preview cannot render embedded images; real files live in the site folder */
.ph-still{aspect-ratio:4/5;display:flex!important;align-items:center;justify-content:center;
  text-align:center;padding:14px;background:rgba(18,18,18,.07);
  border:1px dashed rgba(18,18,18,.35);font-size:10px;line-height:1.5;
  font-family:var(--arc);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(18,18,18,.6)}




/* celebrity tiles open on Vimeo, since embeds cannot render in a preview */
.vimeo-tile{text-decoration:none;display:block}
.vimeo-tile .thumb-frame{display:flex;align-items:center;justify-content:center;
  background:#141312;transition:.2s}
.vimeo-tile:hover .thumb-frame{outline:2px solid var(--mustard);outline-offset:-2px}
.vimeo-cue{font-family:var(--arc);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(239,231,216,.75);text-align:center;padding:12px}
.vimeo-tile .thumb-frame::before{display:none}


/* ---- STATIC ADS: even tiles, coloured frames ---- */





@media(max-width:520px){}


/* ---- STATIC ADS: masonry, uncropped, no borders ---- */
.stills{display:block;column-count:4;column-gap:clamp(12px,1.5vw,22px)}
.still-item{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:block;margin:0 0 clamp(12px,1.5vw,22px)}
.still{display:block;aspect-ratio:auto;height:auto;padding:0;overflow:hidden;
  background:transparent;box-shadow:none;border:0;font-size:0;line-height:0;
  transition:opacity .25s}
.still img{display:block;width:100%;height:auto;position:static;object-fit:fill}
.still-item:hover .still{opacity:.88}
@media(max-width:1000px){.stills{column-count:3}}
@media(max-width:760px){.stills{column-count:2}}
@media(max-width:480px){.stills{column-count:1}}


.thumb-frame .vim{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:2}
.thumb-frame:has(.vim)::before{display:none}

/* tiles that open a Vimeo player in the lightbox */
.play-cue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:var(--arc);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);background:rgba(18,18,18,.72);padding:8px 14px;pointer-events:none;
  opacity:.85;transition:opacity .2s}
.thumb:hover .play-cue{opacity:1}
.lb-stage iframe{width:100%;aspect-ratio:9/16;max-height:82vh;border:0;display:block;background:#000}


.thumb-frame .reel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.thumb-frame .reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  z-index:2;opacity:0;transition:opacity .25s}
.thumb-frame.playing .reel{opacity:1}




/* thoughts: holding state until articles are published */
#p-thoughts .posts-empty{display:block;border:0}
#p-thoughts .posts-soon{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.5rem);letter-spacing:-.02em;
  color:rgba(18,18,18,.42);margin:0;padding:clamp(28px,4vw,64px) 0;
  border-top:3px solid var(--blk);border-bottom:3px solid var(--blk)}

/* header wordmark + section wordmark set in the logo register */
.wordmark{
  font-family:"Montserrat",var(--arc),sans-serif!important;
  font-variation-settings:normal!important;
  font-weight:200!important;font-stretch:100%!important;font-style:normal!important;
  letter-spacing:.26em!important;text-transform:uppercase;
  font-size:clamp(13px,1.4vw,18px)!important;line-height:1;
  display:inline-flex;align-items:center}
.wordmark span{font-style:normal!important;margin-right:0!important}
.wm-first{display:inline-flex;align-items:baseline}
.wm-last{margin-left:.52em!important}
/* the name, wherever it appears, set in the logo register */
.nm{
  font-family:"Montserrat",var(--arc),sans-serif;
  font-variation-settings:normal;font-weight:300;font-stretch:100%;font-style:normal;
  letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:baseline}
.nm-a{
  height:.74em;width:auto;display:inline-block;
  margin:0 .16em 0 .05em;filter:brightness(0);opacity:.85;position:relative;top:.02em}
.on-dark .nm-a,.km .nm-a,footer .nm-a{filter:none;opacity:.85}
/* the logo's crossbar-less A, dropped into the name */
.wm-a{
  height:.78em;width:auto;display:inline-block;
  margin:0 .2em 0 .06em;filter:brightness(0);position:relative;top:.02em}
#p-home .km-wordmark{display:block;height:auto;width:clamp(210px,26vw,380px)}

/* footer logo */
.flogo{display:block;width:clamp(118px,9.5vw,148px);height:auto;margin:0}
/* compact footer: link columns run horizontally instead of stacking */
.site-footer{padding:clamp(20px,1.9vw,30px) 0 12px!important}
.fgrid{
  grid-template-columns:auto minmax(0,1fr) minmax(0,auto)!important;
  gap:clamp(18px,2.4vw,42px)!important;
  padding-bottom:13px!important;align-items:center}
.fh{margin-bottom:7px!important;font-size:9px!important;letter-spacing:.2em!important}
.flist{display:flex!important;flex-wrap:wrap;gap:5px 18px!important}
.flist li{margin-bottom:0!important}
.flist a{font-size:13px!important}
.ffine{padding-top:11px!important;font-size:9px!important}
@media(max-width:760px){
  .fgrid{grid-template-columns:minmax(0,1fr)!important;align-items:start}
}

/* contact form status + honeypot */
.fs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#p-contact .fs-note{
  margin:16px 0 0;font-size:14px;line-height:1.6;max-width:52ch;min-height:1px}
#p-contact .fs-note.ok{color:var(--grass);font-weight:600}
#p-contact .fs-note.err{color:var(--tomato);font-weight:600}
#p-contact #fsBtn[disabled]{opacity:.6;cursor:default}


/* ================= MEET KAIT ================= */
#p-about .mk-facts{
  list-style:none;margin:0 auto;padding:clamp(16px,2vw,26px) 0;max-width:var(--maxw);
  width:100%;padding-left:var(--gutter);padding-right:var(--gutter);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,32px);
  border-top:1px solid rgba(18,18,18,.2);border-bottom:1px solid rgba(18,18,18,.2)}
#p-about .mk-facts b{
  display:block;font-family:var(--arc);font-weight:900;font-stretch:80%;
  text-transform:uppercase;letter-spacing:-.022em;line-height:1.05;
  font-size:clamp(.95rem,1.45vw,1.25rem);color:var(--blk);margin-bottom:6px}
#p-about .mk-facts span{
  display:block;font-family:var(--arc);font-size:9px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(18,18,18,.55)}

#p-about .mk-set h2{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:.94;letter-spacing:-.032em;margin:8px 0 14px}
#p-about .mk-set-p{
  font-size:15px;line-height:1.62;max-width:56ch;margin:0 0 clamp(22px,2.6vw,36px);
  color:rgba(18,18,18,.78)}
#p-about .mk-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
#p-about .mk-grid figure{margin:0}
#p-about .mk-grid img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:3px solid var(--blk);border-radius:clamp(12px,1.5vw,18px);
  box-shadow:0 2px 0 rgba(18,18,18,.08);transition:transform .2s ease,box-shadow .2s ease}
#p-about .mk-grid figure:hover img{transform:translateY(-3px);box-shadow:0 8px 0 rgba(18,18,18,.1)}
#p-about .mk-grid figcaption{
  margin-top:10px;font-size:12px;line-height:1.5;color:rgba(18,18,18,.62)}
@media(max-width:820px){
  #p-about .mk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  #p-about .mk-grid{grid-template-columns:minmax(0,1fr);max-width:460px}
}

/* meet kait: personal pull quote */
#p-about .mk-quote{
  position:relative;overflow:hidden;background:var(--blk);color:var(--cream);
  padding:clamp(26px,3vw,44px) 0}
#p-about .mk-quote > .wrap{position:relative;z-index:2;max-width:1040px}
#p-about .mk-mark{
  display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(2.4rem,5vw,4rem);line-height:.5;color:var(--mustard);
  margin:0 0 clamp(10px,1.2vw,16px)}
#p-about .mk-quote blockquote{margin:0}
#p-about .mk-quote p{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 48;
  font-weight:300;font-style:normal;
  font-size:clamp(1.1rem,1.95vw,1.62rem);line-height:1.4;letter-spacing:-.01em;
  margin:0;max-width:62ch;color:var(--cream)}
#p-about .mk-quote p + p{margin-top:clamp(10px,1.1vw,15px);color:rgba(239,231,216,.82)}
#p-about .mk-quote footer{
  margin-top:clamp(14px,1.6vw,22px);padding-top:clamp(11px,1.2vw,15px);
  border-top:1px solid rgba(239,231,216,.24);
  font-family:var(--arc);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(239,231,216,.62);display:flex;align-items:center;gap:6px}
#p-about .mk-quote footer .nm{font-size:11px;letter-spacing:.2em;color:var(--cream)}
#p-about .mk-quote footer .nm-a{filter:none;opacity:.9}
#p-about .mk-quote .dotfield{opacity:.5}

/* ================= CASE STUDY: the system, visualised ================= */
#p-work .cs{
  position:relative;overflow:hidden;background:var(--blk);color:var(--cream);
  padding:clamp(40px,4.6vw,76px) 0 clamp(34px,3.8vw,58px)}
#p-work .cs .lbl{color:var(--mustard)}
#p-work .cs > .wrap{position:relative;z-index:2}

/* header */
#p-work .cs-hd{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,56px);
  align-items:end;padding-bottom:clamp(20px,2.4vw,32px);
  border-bottom:1px solid rgba(239,231,216,.22)}
#p-work .cs-hd h2{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:.9;letter-spacing:-.035em;
  color:var(--cream);margin:8px 0 0}
#p-work .cs-facts{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,2.6vw,44px)}
#p-work .cs-facts span{
  display:block;font-family:var(--arc);font-size:9px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(239,231,216,.5);margin-bottom:6px}
#p-work .cs-facts b{
  font-family:var(--arc);font-weight:900;font-stretch:84%;text-transform:uppercase;
  font-size:clamp(.8rem,1.1vw,.95rem);letter-spacing:-.01em;color:var(--cream);white-space:nowrap}

/* section labels */
#p-work .cs-lbl{
  display:block;font-family:var(--arc);font-size:9.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px}
#p-work .cs-lbl-t{color:var(--tomato)}
#p-work .cs-lbl-m{color:var(--mustard)}
#p-work .cs-lbl-m{margin-top:clamp(30px,3.6vw,52px)}

/* challenge */
#p-work .cs-chal{margin-top:clamp(22px,2.6vw,34px)}
#p-work .cs-chal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
#p-work .cs-chal li{
  font-family:var(--arc);font-weight:900;font-stretch:84%;text-transform:uppercase;
  font-size:clamp(.86rem,1.25vw,1.05rem);letter-spacing:-.012em;line-height:1;
  padding:12px 16px;border-radius:100px;
  border:1px solid rgba(232,86,58,.55);color:var(--cream);background:rgba(232,86,58,.1)}

/* the flow */
#p-work .cs-flow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.1vw,16px)}
#p-work .cs-flow li{
  position:relative;padding:clamp(16px,1.8vw,22px) clamp(12px,1.3vw,18px);
  border:1px solid rgba(239,231,216,.2);border-radius:clamp(12px,1.5vw,18px);
  background:rgba(239,231,216,.04);transition:background .2s ease,border-color .2s ease}
#p-work .cs-flow li:hover{background:rgba(239,231,216,.08);border-color:rgba(239,231,216,.4)}
#p-work .cs-flow li::after{
  content:"";position:absolute;top:50%;right:calc(-1 * clamp(8px,1.1vw,16px));
  width:clamp(8px,1.1vw,16px);height:1px;background:rgba(232,185,60,.5)}
#p-work .cs-flow li:last-child::after{display:none}
#p-work .cs-n{
  display:block;font-family:var(--arc);font-size:9px;font-weight:700;letter-spacing:.2em;
  color:var(--mustard);margin-bottom:12px}
#p-work .cs-g{
  display:block;width:clamp(22px,2.4vw,30px);height:auto;margin-bottom:12px;
  fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#p-work .cs-flow b{
  display:block;font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(.88rem,1.2vw,1.06rem);letter-spacing:-.02em;line-height:1;
  color:var(--cream);margin-bottom:8px}
#p-work .cs-mt{
  display:block;font-size:11.5px;line-height:1.45;color:rgba(239,231,216,.62)}

/* breakthrough */
#p-work .cs-break{
  border-left:3px solid var(--mustard);padding-left:clamp(14px,1.8vw,24px)}
#p-work .cs-break .cs-lbl-m{margin-top:0}
#p-work .cs-break p{
  margin:0;font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36;font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.95rem);line-height:1.32;letter-spacing:-.012em;
  max-width:40ch;color:var(--cream)}

/* outcome */
#p-work .cs-out{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,26px);align-items:center}
#p-work .cs-out li{display:flex;align-items:center;gap:10px}
#p-work .cs-out-hero{
  padding-right:clamp(14px,2vw,30px);border-right:1px solid rgba(239,231,216,.22)}
#p-work .cs-out-hero b{
  font-family:var(--arc);font-weight:900;font-stretch:80%;
  font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:.84;letter-spacing:-.05em;color:var(--mustard)}
#p-work .cs-out-hero span{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(.9rem,1.3vw,1.1rem);letter-spacing:.05em;color:var(--cream)}
#p-work .cs-a{
  width:clamp(17px,1.8vw,22px);height:auto;flex:0 0 auto;
  fill:none;stroke:var(--mustard);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#p-work .cs-a-d{stroke:var(--grass)}
#p-work .cs-out li span{
  font-family:var(--arc);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.3;color:rgba(239,231,216,.84)}



@media(max-width:1040px){
  #p-work .cs-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
  #p-work .cs-flow li:nth-child(3)::after{display:none}
  #p-work .cs-out{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(16px,2.4vw,34px)}
  #p-work .cs-out-hero{
    grid-column:1 / -1;border-right:0;border-bottom:1px solid rgba(239,231,216,.22);
    padding:0 0 14px;margin-bottom:4px}
}
@media(max-width:760px){
  #p-work .cs-hd{grid-template-columns:minmax(0,1fr);align-items:start}
  #p-work .cs-facts{flex-wrap:wrap;gap:16px 28px}
}
@media(max-width:560px){
  #p-work .cs-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  #p-work .cs-flow li::after{display:none}
  #p-work .cs-out{grid-template-columns:minmax(0,1fr)}
  #p-work .cs-out-hero{border-right:0;border-bottom:1px solid rgba(239,231,216,.22);
    padding:0 0 14px;margin-bottom:6px}
}

/* ================= BRAND LOGO WALL ================= */
#p-work .logowall{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(5px,.9vw,16px);align-items:center;
  padding:clamp(6px,1vw,14px) 0 clamp(18px,2.2vw,32px);
  border-bottom:1px solid rgba(18,18,18,.22)}
#p-work .lw{display:flex;align-items:center;justify-content:center;padding:clamp(4px,.6vw,10px)}
#p-work .lw img{
  display:block;width:100%;height:auto;
  opacity:.82;transition:opacity .2s ease, transform .2s ease}
#p-work .lw:hover img{opacity:1;transform:scale(1.05)}
#p-work .lw-more{margin-top:clamp(18px,2.2vw,30px)}
#p-work .lw-more .lbl{display:block;margin-bottom:clamp(10px,1.2vw,16px);color:rgba(18,18,18,.62)}
#p-work .lw-more .roster{border:0}
@media(max-width:1100px){
  #p-work .logowall{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:820px){
  #p-work .logowall{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:560px){
  #p-work .logowall{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================= THE KAIT METHOD ================= */
:is(#p-together,#p-about,#p-home) .km{
  position:relative;overflow:hidden;background:var(--blk);color:var(--cream);
  padding:clamp(38px,4.2vw,70px) 0 clamp(46px,5vw,88px)}
:is(#p-together,#p-about,#p-home) .km .lbl{color:var(--mustard)}
:is(#p-together,#p-about,#p-home) .km-head{
  max-width:none;margin-bottom:clamp(24px,2.8vw,42px);position:relative;z-index:2;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:clamp(26px,4.6vw,84px);row-gap:6px;align-items:center}
:is(#p-together,#p-about,#p-home) .km-head .lbl{grid-column:1;grid-row:1;align-self:end;margin-bottom:0}
#p-home .km-wordmark{grid-column:1;grid-row:2;margin:0}
:is(#p-together,#p-about,#p-home) .km-lede{grid-column:2;grid-row:1 / span 2;align-self:center}
@media(max-width:900px){
  :is(#p-together,#p-about,#p-home) .km-head{column-gap:clamp(18px,2.6vw,34px)}
  #p-home .km-wordmark{width:clamp(150px,22vw,230px)}
  :is(#p-together,#p-about,#p-home) .km-lede{font-size:clamp(.98rem,1.5vw,1.2rem);max-width:none}
}
@media(max-width:600px){
  :is(#p-together,#p-about,#p-home) .km-head{grid-template-columns:minmax(0,1fr);row-gap:14px}
  :is(#p-together,#p-about,#p-home) .km-lede,#p-home .km-wordmark{grid-column:1;grid-row:auto}
}
#p-about .band.b-cream{padding-bottom:clamp(28px,3vw,48px)!important}
:is(#p-together,#p-about,#p-home) .km-head h2{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(3rem,10.8vw,9.2rem);line-height:.84;letter-spacing:-.045em;
  color:var(--cream);margin:12px 0 20px}
:is(#p-together,#p-about,#p-home) .km-head .mark{background:var(--mustard);color:var(--blk);padding:0 .12em}
:is(#p-together,#p-about,#p-home) .km-lede{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36;
  font-weight:300;font-style:normal;
  font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.5;letter-spacing:-.003em;
  max-width:52ch;margin:0;text-transform:none;
  color:rgba(239,231,216,.86)}
/* built-across strip between the wordmark and the first move */
:is(#p-together,#p-about,#p-home) .km-strip{
  position:relative;z-index:2;
  margin:clamp(18px,2.2vw,32px) 0 clamp(20px,2.4vw,34px);text-align:center}
:is(#p-together,#p-about,#p-home) .km-strip-h{
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  font-family:var(--arc);font-size:10px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mustard)}
:is(#p-together,#p-about,#p-home) .km-strip-h::before,
:is(#p-together,#p-about,#p-home) .km-strip-h::after{
  content:"";height:1px;flex:1;background:rgba(232,185,60,.42)}
:is(#p-together,#p-about,#p-home) .km-strip-l{
  list-style:none;margin:clamp(12px,1.4vw,18px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px clamp(14px,2vw,26px)}
:is(#p-together,#p-about,#p-home) .km-strip-l li{
  font-family:var(--arc);font-size:clamp(10.5px,1.05vw,13px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(239,231,216,.9);
  display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
:is(#p-together,#p-about,#p-home) .km-strip-l li + li::before{
  content:"\2022";color:var(--mustard);font-size:1.1em;line-height:1}

:is(#p-together,#p-about,#p-home) .km-rows{
  list-style:none;margin:0;padding:0;position:relative;z-index:2;
  border-top:1px solid rgba(239,231,216,.24)}
:is(#p-together,#p-about,#p-home) .km-rows li{
  display:grid;grid-template-columns:clamp(92px,11.5vw,200px) minmax(0,1fr);
  gap:clamp(16px,3vw,56px);align-items:start;
  padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid rgba(239,231,216,.24)}
:is(#p-together,#p-about,#p-home) .km-i{
  display:flex;align-items:flex-start;justify-content:center;
  line-height:0;width:100%}
:is(#p-together,#p-about,#p-home) .km-i img{
  display:block;height:clamp(64px,9.2vw,142px);width:auto;
  opacity:.94;filter:none}
:is(#p-together,#p-about,#p-home) .km-body{display:block;padding-top:clamp(4px,.8vw,12px)}
:is(#p-together,#p-about,#p-home) .km-step{
  display:block;font-family:var(--arc);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(239,231,216,.6);margin-bottom:11px}
:is(#p-together,#p-about,#p-home) .km-body b{
  display:block;font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.5rem,3.05vw,2.7rem);line-height:1;letter-spacing:-.03em;
  color:var(--cream);margin-bottom:13px}
:is(#p-together,#p-about,#p-home) .km-t{
  display:block;font-size:16.5px;line-height:1.72;max-width:58ch;color:rgba(239,231,216,.82)}
:is(#p-together,#p-about,#p-home) .km-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
:is(#p-together,#p-about,#p-home) .km-tags span{
  font-family:var(--arc);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;line-height:1;padding:7px 10px;border-radius:7px;
  background:rgba(239,231,216,.1);color:rgba(239,231,216,.72)}
/* pair "What I Do" and "How I Work" as a light/dark diptych */
#p-home .km{padding-top:clamp(40px,4.6vw,80px)}
#p-home .km-head h2{font-size:clamp(2.4rem,7.6vw,6.4rem)}
#p-home .km-step{color:var(--mustard);opacity:.9}
#p-home .km-body b{font-size:clamp(1.5rem,3.05vw,2.7rem)}
#p-home .km-t{font-size:16.5px;line-height:1.72;max-width:58ch}
/* What I Do: three cards instead of stacked rows */
#p-home .levers{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(16px,2vw,26px)!important;border:0!important;margin-top:clamp(22px,2.6vw,36px)!important}
#p-home .lev{display:flex!important;flex-direction:column!important;
  grid-template-columns:none!important;gap:0!important;
  background:var(--cream-2);border:1px solid rgba(18,18,18,.14)!important;
  border-radius:clamp(16px,2vw,24px);padding:clamp(24px,2.6vw,36px)!important;
  box-shadow:0 2px 0 rgba(18,18,18,.07);transition:transform .18s ease, box-shadow .18s ease}
#p-home .lev:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(18,18,18,.09)}
#p-home .lev-n{font-size:clamp(2.6rem,4.4vw,3.6rem)!important;line-height:.82;
  letter-spacing:-.045em;opacity:.3;margin-bottom:clamp(10px,1.2vw,16px)}
#p-home .lev h3{font-size:clamp(1.1rem,1.6vw,1.42rem)!important;line-height:1.04;
  letter-spacing:-.026em;margin:0 0 12px!important;max-width:none}
#p-home .lev > div{display:flex;flex-direction:column;flex:1}
#p-home .lev p{max-width:none!important;font-size:14px!important;line-height:1.68!important;margin:0}
#p-home .lev-tags{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:6px}
#p-home .lev-tags span{font-size:10.5px!important;padding:6px 9px;border-radius:7px;
  background:rgba(18,18,18,.055);color:rgba(18,18,18,.76);border:0}
#p-home .cta-lead{
  font-size:clamp(1.15rem,2.4vw,2.05rem);line-height:1.24;margin:0 0 14px;
  color:rgba(18,18,18,.8);max-width:none;white-space:nowrap}
@media(max-width:520px){#p-home .cta-lead{white-space:normal}}
/* keep 01-03 on one line; tighten rather than reflow */
@media(max-width:900px){
  #p-home .lev{padding:clamp(16px,2.4vw,26px)!important}
  #p-home .lev-n{font-size:clamp(1.9rem,3.6vw,2.6rem)!important}
  #p-home .lev h3{font-size:clamp(.92rem,1.7vw,1.15rem)!important}
  #p-home .lev p{font-size:13px!important;line-height:1.6!important}
  #p-home .lev-tags span{font-size:9.5px!important;padding:5px 7px}
}
@media(max-width:560px){#p-home .levers{grid-template-columns:1fr!important}}
@media(max-width:620px){
  :is(#p-together,#p-about,#p-home) .km-rows li{grid-template-columns:1fr;gap:6px}
}

/* ================= WORK WITH ME: package catalogue ================= */
#p-together .band.b-sky{padding-top:clamp(22px,2.4vw,38px)!important;padding-bottom:clamp(28px,3.2vw,50px)!important}
#p-together .pk-head{max-width:60ch;margin-bottom:clamp(20px,2.2vw,32px)}
#p-together .pk-head h2{margin:6px 0 12px}
#p-together .pk-kicker{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36;
  font-weight:400;font-size:clamp(1.15rem,1.9vw,1.62rem);line-height:1.3;
  letter-spacing:-.008em;margin:0 0 clamp(10px,1.2vw,16px);max-width:34ch;color:var(--blk)}
#p-together .pk-lede{
  font-size:clamp(.96rem,1.18vw,1.04rem);line-height:1.6;letter-spacing:-.002em;
  max-width:60ch;margin:0;color:rgba(18,18,18,.82)}
#p-together .pk-promise{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#p-together .pk-promise span{
  font-family:var(--arc);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:1.5px solid var(--blk);border-radius:100px;padding:7px 14px}

#p-together .pk-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}

#p-together .pk{
  position:relative;display:flex;flex-direction:column;
  background:var(--cream-2);border:1px solid rgba(18,18,18,.14);
  border-radius:clamp(16px,1.9vw,22px);padding:clamp(20px,2.1vw,28px);
  box-shadow:0 2px 0 rgba(18,18,18,.07);transition:transform .18s ease, box-shadow .18s ease}
#p-together .pk:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(18,18,18,.09)}

#p-together .pk-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
#p-together .pk-n{
  font-family:var(--arc);font-weight:900;font-stretch:80%;font-size:1.5rem;
  letter-spacing:-.04em;line-height:1;opacity:.3}
#p-together .pk-kind{
  font-family:var(--arc);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tomato)}
#p-together .pk-hook{
  font-family:var(--arc);font-weight:700;font-size:clamp(.95rem,1.14vw,1.04rem);
  line-height:1.4;letter-spacing:-.008em;color:var(--blk);margin:0 0 15px}
#p-together .pk-vs{
  font-size:12px;line-height:1.55;margin:0 0 16px;color:rgba(18,18,18,.62);
  padding-left:11px;border-left:2px solid rgba(232,86,58,.5)}
#p-together .pk-name{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.02rem,1.28vw,1.22rem);line-height:1.04;letter-spacing:-.024em;margin:0 0 14px}
#p-together .pk-money{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(18,18,18,.16)}
#p-together .pk-price{
  font-family:var(--arc);font-weight:900;font-stretch:80%;
  font-size:clamp(1.85rem,2.3vw,2.25rem);line-height:.9;letter-spacing:-.04em}
#p-together .pk-time{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(18,18,18,.55)}
#p-together .pk-for{
  font-size:14px;line-height:1.62;margin:0 0 18px;color:rgba(18,18,18,.78)}
#p-together .pk-for b{
  font-family:var(--arc);font-weight:900;font-stretch:84%;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.18em;color:var(--blk);display:block;margin-bottom:5px}

#p-together .pk-lbl{
  display:block;font-family:var(--arc);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(18,18,18,.55);margin-bottom:13px}
#p-together .pk-block{margin-bottom:18px}
#p-together .pk-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
#p-together .pk-tags li{
  font-size:11.5px;font-weight:500;line-height:1;padding:7px 10px;
  background:rgba(18,18,18,.055);border-radius:7px;color:rgba(18,18,18,.78)}

#p-together .pk-deliver{
  margin-top:auto;padding-top:18px;border-top:1px solid rgba(18,18,18,.16)}
#p-together .pk-stats{display:flex;flex-direction:column;gap:14px}
#p-together .pk-stats > div{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;column-gap:clamp(10px,1.1vw,15px)}
#p-together .pk-stats b{
  font-family:var(--arc);font-weight:900;font-stretch:80%;
  font-size:clamp(1.9rem,2.6vw,2.5rem);
  line-height:.9;letter-spacing:-.04em;color:var(--tomato);
  min-width:1.15em;text-align:right;font-variant-numeric:tabular-nums}
#p-together .pk-stats span{font-size:13px;line-height:1.45;color:rgba(18,18,18,.82);align-self:baseline}
#p-together .pk-note{
  font-size:11.5px;line-height:1.55;margin:14px 0 0;color:rgba(18,18,18,.58)}
#p-together .pk-note b{
  font-family:var(--arc);font-weight:900;font-stretch:84%;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.16em;color:var(--blk);display:block;margin-bottom:4px}
#p-together .pk-deliver{margin-top:auto}
#p-together .pk-add .pk-tags{margin-bottom:0}
/* select styled to match the text fields */
#p-contact .field select{
  width:100%;font-family:var(--arc);font-size:16px;color:var(--blk);
  background:var(--cream-2);border:2px solid var(--blk);border-radius:0;
  padding:12px 13px;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--blk) 50%),linear-gradient(135deg,var(--blk) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#p-contact .field select:focus{outline:0;box-shadow:4px 4px 0 var(--tomato)}

/* flagship */
#p-together .pk-hero{
  grid-column:span 3;flex-direction:row;gap:clamp(24px,3.4vw,60px);
  background:var(--blk);color:var(--cream);border-color:var(--blk);
  padding:clamp(28px,3.2vw,44px)}
#p-together .pk-hero:hover{box-shadow:0 8px 0 rgba(18,18,18,.28)}
#p-together .pk-hero-l{flex:1 1 58%;display:flex;flex-direction:column}
#p-together .pk-hero-r{
  flex:0 1 38%;background:rgba(239,231,216,.07);border:1px solid rgba(239,231,216,.2);
  border-radius:18px;padding:clamp(20px,2.4vw,30px);align-self:flex-start}
#p-together .pk-hero .pk-n{opacity:.4;color:var(--cream)}
#p-together .pk-hero .pk-kind{color:var(--mustard)}
#p-together .pk-hero .pk-name,#p-together .pk-hero .pk-price{color:var(--cream)}
#p-together .pk-hero .pk-money{border-bottom-color:rgba(239,231,216,.22)}
#p-together .pk-hero .pk-time{color:rgba(239,231,216,.62)}
#p-together .pk-hero .pk-for{color:rgba(239,231,216,.8)}
#p-together .pk-hero .pk-for b{color:var(--cream)}
#p-together .pk-hero .pk-lbl{color:rgba(239,231,216,.55)}
#p-together .pk-hero .pk-tags li{background:rgba(239,231,216,.1);color:rgba(239,231,216,.86)}
#p-together .pk-hero .pk-stats b{color:var(--mustard)}
#p-together .pk-hero .pk-stats span{color:rgba(239,231,216,.84)}
#p-together .pk-hero .pk-note{color:rgba(239,231,216,.6)}
#p-together .pk-stats-big b{font-size:clamp(2.8rem,4.6vw,4.2rem)}
#p-together .pk-stats-big > div{align-items:baseline;column-gap:clamp(12px,1.3vw,18px)}
#p-together .pk-stats-big span{font-size:13.5px;line-height:1.4}
#p-together .pk-pin{
  position:absolute;top:0;right:clamp(20px,3vw,40px);transform:translateY(-50%);
  font-family:var(--arc);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  background:var(--mustard);color:var(--blk);padding:7px 14px;border-radius:100px}

/* add-ons */
#p-together .pk-addhead{margin:clamp(46px,5.4vw,86px) 0 clamp(20px,2.4vw,32px);max-width:56ch}
#p-together .pk-addhead h3{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:.96;letter-spacing:-.028em;margin:6px 0 14px}
#p-together .pk-adds{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,290px) minmax(0,1fr);
  gap:clamp(16px,2vw,26px);align-items:stretch}
/* sample reel sitting between the two add-ons */
#p-together .pk-reel{margin:0;display:flex;flex-direction:column;justify-content:center}
#p-together .pk-reel-lbl{
  display:block;font-family:var(--arc);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(18,18,18,.55);margin-bottom:10px}
#p-together .pk-reel-frame{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  background:var(--blk);border:3px solid var(--blk);
  border-radius:clamp(14px,1.8vw,20px);box-shadow:0 2px 0 rgba(18,18,18,.07)}
#p-together .pk-reel-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
#p-together .pk-reel figcaption{
  margin-top:11px;font-size:11.5px;line-height:1.55;color:rgba(18,18,18,.66)}
@media(max-width:900px){
  #p-together .pk-adds{grid-template-columns:repeat(2,minmax(0,1fr))}
  #p-together .pk-reel{grid-column:1 / -1;max-width:320px;margin:0 auto}
}
@media(max-width:620px){
  #p-together .pk-adds{grid-template-columns:minmax(0,1fr)}
  #p-together .pk-reel{grid-column:auto}
}
#p-together .pk-add .pk-stats{margin-bottom:16px}
#p-together .pk-add .pk-money{padding-bottom:14px;margin-bottom:14px}

@media(max-width:1180px){
  #p-together .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  #p-together .pk-grid,#p-together .pk-adds{grid-template-columns:minmax(0,1fr)}
}

/* ================= WORK WITH ME: fractional retainer ================= */
#p-together .fx-band{padding:clamp(40px,4.6vw,74px) 0}
#p-together .fx{
  background:var(--cream-2);border:1px solid rgba(18,18,18,.14);
  border-radius:clamp(18px,2.2vw,26px);padding:clamp(26px,3vw,44px);
  box-shadow:0 2px 0 rgba(18,18,18,.07);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(24px,3vw,52px);row-gap:0;align-items:start}
#p-together .fx-lead{grid-column:1 / -1;
  padding-bottom:clamp(20px,2.4vw,32px);margin-bottom:clamp(2px,.4vw,6px);
  border-bottom:1px solid rgba(18,18,18,.16)}
#p-together .fx-ask{
  font-family:var(--arc);font-style:normal;font-weight:700;
  font-size:clamp(1.32rem,2.5vw,2.05rem);line-height:1.22;
  letter-spacing:-.018em;margin:0;color:var(--blk);max-width:30ch}
#p-together .fx-ask em{font-style:normal;font-weight:800;color:var(--tomato)}
#p-together .fx-name{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.7rem,3.1vw,2.6rem);line-height:.96;letter-spacing:-.03em;
  margin:0 0 18px;color:var(--blk)}
#p-together .fx-money{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgba(18,18,18,.16)}
#p-together .fx-price{
  font-family:var(--arc);font-weight:900;font-stretch:80%;
  font-size:clamp(2.3rem,3.8vw,3.1rem);line-height:.9;letter-spacing:-.04em;color:var(--blk)}
#p-together .fx-per{
  font-family:var(--arc);font-weight:900;font-stretch:84%;font-size:1rem;
  letter-spacing:-.02em;color:rgba(18,18,18,.6)}
#p-together .fx-term{
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tomato);margin-left:auto}
#p-together .fx-sub{
  font-family:var(--fra);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36;
  font-weight:400;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.28;
  letter-spacing:-.008em;margin:0 0 14px;color:var(--blk);max-width:26ch}
#p-together .fx-body{
  font-size:14.5px;line-height:1.65;margin:0 0 26px;
  color:rgba(18,18,18,.78);max-width:52ch}
#p-together .fx-qs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
#p-together .fx-qs li{
  font-family:var(--arc);font-style:normal;font-weight:600;
  font-size:clamp(.98rem,1.24vw,1.1rem);line-height:1.5;letter-spacing:-.004em;
  color:var(--blk);
  padding-left:14px;border-left:2px solid var(--tomato)}
#p-together .fx-r{
  background:rgba(18,18,18,.04);border:1px solid rgba(18,18,18,.13);
  border-radius:clamp(14px,1.8vw,20px);padding:clamp(20px,2.4vw,30px)}
#p-together .fx-note{
  font-size:13px;line-height:1.6;margin:20px 0 24px;color:rgba(18,18,18,.75);
  padding-top:18px;border-top:1px solid rgba(18,18,18,.16)}
#p-together .fx-note b{
  font-family:var(--arc);font-weight:900;font-stretch:84%;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.18em;color:var(--blk);display:block;margin-bottom:5px}
#p-together .fx-kicker{
  grid-column:1 / -1;
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.6rem);line-height:1.06;letter-spacing:-.028em;
  margin:0;padding-top:clamp(20px,2.1vw,26px);
  border-top:1px solid rgba(18,18,18,.16);color:var(--blk);max-width:46ch}
#p-together .fx-kicker em{font-style:normal;color:var(--tomato)}
@media(max-width:900px){
  #p-together .fx{grid-template-columns:minmax(0,1fr)}
  #p-together .fx-term{margin-left:0}
}

/* together CTA: custom-scope block */
#p-together .cta-txt{max-width:none}
#p-together .cta-sub{
  font-family:var(--fra);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36;
  font-weight:400;font-size:clamp(1.08rem,1.7vw,1.44rem);line-height:1.28;
  letter-spacing:-.01em;margin:0 0 clamp(9px,1.1vw,13px);color:var(--blk);max-width:40ch}
#p-together .cta-body{
  font-size:clamp(.93rem,1.1vw,1.01rem);line-height:1.62;margin:0;
  color:rgba(18,18,18,.82);max-width:66ch}

/* ================= PLAY: creative strategy quest ================= */
#p-play .pl-band{padding:clamp(26px,3vw,44px) 0 clamp(28px,3.2vw,50px)}
#p-play .pl-head{margin-bottom:clamp(16px,1.9vw,26px);max-width:62ch}
#p-play .pl-h1{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,4.2rem);line-height:.94;letter-spacing:-.03em;margin:8px 0 14px}
#p-play .pl-sub{font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.62;max-width:56ch;color:rgba(18,18,18,.74)}

#p-play .pl-stage{
  position:relative;width:100%;max-width:1000px;aspect-ratio:1000/520;
  border:3px solid var(--blk);border-radius:18px;overflow:hidden;
  background:#efe7d8;box-shadow:10px 10px 0 var(--blk);touch-action:none}
#p-play canvas{display:block;width:100%;height:100%;image-rendering:auto}

#p-play .pl-hud{
  position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  gap:10px;padding:12px 14px;pointer-events:none;z-index:3}
#p-play .pl-hud-l,#p-play .pl-hud-r{display:flex;gap:8px;align-items:center}
#p-play .pl-chip{
  font-family:var(--arc);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--blk);color:var(--cream);padding:7px 11px;border-radius:100px;white-space:nowrap}
#p-play .pl-chip-p{background:var(--gold);color:#fff;display:none}
#p-play .pl-chip-p.on{display:inline-block}

#p-play .pl-stage{container-type:inline-size}
#p-play .pl-overlay{
  position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;
  padding:2.2cqw;overflow-y:auto;background:rgba(18,18,18,.88);backdrop-filter:blur(3px)}
#p-play .pl-overlay.pl-on{display:flex}
#p-play .pl-card{
  background:var(--cream);border:0.3cqw solid var(--blk);border-radius:1.6cqw;
  padding:3cqw 3.4cqw;max-width:58cqw;width:100%;text-align:left;max-height:100%;
  box-shadow:0.8cqw 0.8cqw 0 var(--tomato)}
#p-play .pl-card-end{box-shadow:0.8cqw 0.8cqw 0 var(--grass);max-width:62cqw}
#p-play .pl-eyebrow{
  font-family:var(--arc);font-size:1.05cqw;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tomato);display:block;margin-bottom:.8cqw}
#p-play .pl-card h2{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:3.1cqw;line-height:.92;letter-spacing:-.03em;margin:0 0 1.4cqw;color:var(--blk)}
#p-play .pl-card p{font-size:1.5cqw;line-height:1.6;margin:0 0 1.8cqw;color:rgba(18,18,18,.8)}
#p-play .pl-keys{display:flex;flex-wrap:wrap;gap:.8cqw 1.8cqw;margin-bottom:2.2cqw}
#p-play .pl-keys span{
  font-size:1.05cqw;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(18,18,18,.62)}
#p-play .pl-keys b{
  font-family:var(--arc);background:var(--blk);color:var(--cream);
  padding:.4cqw .8cqw;border-radius:.5cqw;margin-right:.6cqw;letter-spacing:.06em}
#p-play .pl-btn{border:0;font-size:1.25cqw;padding:1cqw 1.8cqw}

#p-play .pl-results{margin:0 0 1.2cqw;border-top:1px solid rgba(18,18,18,.2)}
#p-play .pl-results > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.6cqw;
  padding:.9cqw 0;border-bottom:1px solid rgba(18,18,18,.2)}
#p-play .pl-results dt{
  font-size:1.05cqw;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(18,18,18,.62)}
#p-play .pl-results dd{
  margin:0;font-family:var(--arc);font-weight:900;font-stretch:80%;
  font-size:2.1cqw;letter-spacing:-.02em;color:var(--blk);line-height:1}
#p-play .pl-stars{font-size:2cqw;letter-spacing:.12em;color:var(--mustard);margin:1.1cqw 0 .3cqw;line-height:1}
#p-play .pl-rank{
  font-family:var(--arc);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:1.6cqw;letter-spacing:-.02em;margin-bottom:1.8cqw;color:var(--blk)}
#p-play .pl-end-btns{display:flex;flex-wrap:wrap;gap:.9cqw}
#p-play .pl-end-btns .btn{font-size:1.2cqw;padding:.95cqw 1.7cqw}
@supports not (width:1cqw){
  #p-play .pl-card{padding:22px;max-width:480px;border:3px solid var(--blk);border-radius:14px}
  #p-play .pl-card h2{font-size:1.5rem}
  #p-play .pl-card p{font-size:13px}
  #p-play .pl-results dd{font-size:1.1rem}
  #p-play .pl-stars{font-size:1.2rem}
  #p-play .pl-rank{font-size:.95rem}
  #p-play .pl-eyebrow,#p-play .pl-results dt,#p-play .pl-keys span{font-size:9px}
}

#p-play .pl-touch{position:absolute;inset:auto 0 0 0;z-index:4;display:none;justify-content:space-between;padding:14px}
#p-play .pl-t{
  width:60px;height:60px;border-radius:50%;border:3px solid var(--blk);
  background:rgba(239,231,216,.9);color:var(--blk);font-size:18px;cursor:pointer}
#p-play .pl-t-jump{background:var(--mustard)}


@media(hover:none),(max-width:760px){
  #p-play .pl-touch{display:flex}
  #p-play .pl-stage{box-shadow:6px 6px 0 var(--blk)}
}