@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/81f3fc9d8d4e307e.ttf) format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/f8a90c01bc4c31aa.ttf) format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/b5d3fe714f8283b0.ttf) format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/88aad0bfccf47bc6.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/a936de73165607d7.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/df4d738c79a22bfa.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/a24daa060144f263.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/2f93a2dacd279c22.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/8741b7c7a72e82dd.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/5f1d348b9e122d2c.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/a7fdc993f9f0387c.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/4fc14a73ca53ba9d.ttf) format('truetype');
}

:root{--paper:#F5F3EE;--sand:#EDEAE1;--white:#FFFFFF;--ink:#16191E;--muted:#57606C;--line:#D6D1C2;--orange:#F26A0D;--soft:#FDEEDF;--navy:#0F1B2A;--navy2:#1B2D45;--blue:#1273C8;--pale:#E8F1FA;--bone:#F2F4F6;--dim:#9AA3AE;--display:Gabarito,"Arial Black",sans-serif;--body:Figtree,Arial,sans-serif;--mono:"IBM Plex Mono",monospace;--radius:20px;--pill:999px;--pad:clamp(22px,5.3vw,90px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--body)}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);line-height:1.03;letter-spacing:-.045em;text-wrap:balance}h1{font-size:clamp(64px,7.4vw,116px);font-weight:600}h2{font-size:clamp(43px,5.1vw,76px);font-weight:500}h3{font-size:30px;font-weight:500}p{max-width:58ch}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.wrap{max-width:1540px;margin:auto;padding:0 var(--pad)}.section{padding-top:100px;padding-bottom:100px}.eyebrow{font:11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:24px}.muted{color:var(--muted)}.lead{font-size:20px;line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:54px;padding:14px 24px;border:1px solid transparent;border-radius:var(--pill);font-size:15px;font-weight:600;background:var(--orange);color:var(--white)}.btn:after{content:"↗";font-size:20px}.btn:hover{background:var(--ink);color:var(--white)}.btn.dark{background:var(--ink);color:var(--white)}.btn.dark:hover{background:var(--blue)}.text-link{border-bottom:1px solid currentColor;padding-bottom:5px;font-size:15px}.row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.section-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:45px}.section-head p{max-width:31ch}.note{display:none;background:var(--pale);border:1px solid var(--blue);color:var(--navy);font:12px/1.6 var(--mono);padding:14px 18px;margin:20px 0}.show-notes .note{display:block}.placeholder{font:10px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}.pill{display:inline-block;border:1px solid currentColor;border-radius:var(--pill);padding:6px 12px;font:10px var(--mono);letter-spacing:.04em}.toolbar{background:var(--navy);color:var(--bone);padding:9px 18px;display:flex;gap:12px;justify-content:space-between;align-items:center;font:10px/1.5 var(--mono);letter-spacing:.03em}.toolbar button{color:var(--bone);border:1px solid var(--dim);background:transparent;padding:6px 10px;border-radius:var(--pill);font-size:10px}.toolbar button[aria-pressed=true]{background:var(--bone);color:var(--navy)}header{border-bottom:1px solid var(--line)}nav{min-height:96px;display:flex;justify-content:space-between;align-items:center;gap:32px}.wordmark{width:218px;height:auto}nav .navlinks{display:flex;align-items:center;gap:30px;font-size:14px}nav .btn{min-height:46px;padding:10px 19px;font-size:13px}
.hero{padding-top:72px;padding-bottom:48px}.hero-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:5%;align-items:center}.hero h1 span{color:var(--blue)}.hero .lead{margin:30px 0;max-width:42ch;font-size:18px}.hero .eyebrow{color:var(--muted);margin-bottom:24px}.hero small{font-size:12px;display:block;margin-top:22px;color:var(--muted)}.hero-art{min-height:550px;position:relative;isolation:isolate}.hero-art:before{content:"";position:absolute;inset:5% 2% 2% 2%;background:var(--soft);border-radius:50% 50% 45% 50%;z-index:-1}.hero-board{position:absolute;background:var(--navy);color:var(--bone);width:74%;height:350px;top:30px;left:8%;transform:rotate(-6deg);border-radius:var(--radius);padding:28px;overflow:hidden}.hero-board .huge{font:600 48px/.96 var(--display);letter-spacing:-.04em;max-width:6ch}.hero-board .circle{position:absolute;right:-46px;bottom:-90px;width:280px;height:280px;border:60px solid var(--blue);border-radius:50%}.hero-product{position:absolute;right:3%;top:85px;width:61%;transform:rotate(9deg);filter:drop-shadow(0 25px 20px color-mix(in srgb,var(--navy) 18%,transparent))}.mini-board{position:absolute;left:0;bottom:44px;width:64%;padding:23px;background:var(--white);border:1px solid var(--line);transform:rotate(3deg);border-radius:14px}.mini-board b{font:500 25px/1.1 var(--display);letter-spacing:-.03em}.mini-board .bars{display:flex;gap:7px;height:38px;align-items:end;margin-top:20px}.mini-board .bars i{flex:1;background:var(--blue);border-radius:3px 3px 0 0}.mini-board .bars i:nth-child(even){background:var(--orange)}.art-label{position:absolute;right:0;bottom:0;font:10px var(--mono);color:var(--muted)}.trust{border-top:1px solid var(--line);padding:34px 0 48px}.trust .eyebrow{text-align:center;margin-bottom:30px;font-size:10px;color:var(--muted)}.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:36px;align-items:center}.logos img{width:100%;height:42px;object-fit:contain;filter:grayscale(1);mix-blend-mode:multiply}
.work{background:var(--navy);color:var(--bone)}.work .muted{color:var(--dim)}.feature{display:grid;grid-template-columns:1.14fr 1fr;background:var(--navy2);border-radius:var(--radius);overflow:hidden}.case-art{min-height:420px;background:var(--pale);color:var(--ink);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.case-art:before{content:"";position:absolute;width:300px;height:300px;border:70px solid var(--blue);border-radius:50%;left:-150px;top:-80px}.case-art img{width:68%;transform:rotate(-10deg)}.case-art .placeholder{position:absolute;bottom:20px;left:25px;color:var(--muted)}.case-copy{padding:45px;display:flex;flex-direction:column;align-items:start;justify-content:center}.case-copy h3{font-size:40px;max-width:15ch;margin:20px 0}.case-copy p{color:var(--dim);font-size:16px;margin-bottom:25px}.result-slot{border-top:1px solid color-mix(in srgb,var(--bone) 20%,transparent);border-bottom:1px solid color-mix(in srgb,var(--bone) 20%,transparent);width:100%;padding:16px 0;margin-bottom:25px;display:flex;gap:24px}.result-slot b{font:500 22px var(--display)}.result-slot small{display:block;font:10px var(--mono);color:var(--dim)}.outline-btn{background:none;border:0;padding:8px 0;color:inherit;border-bottom:1px solid currentColor;font-size:14px}.case-minis{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:30px}.case-mini{border-top:1px solid color-mix(in srgb,var(--bone) 30%,transparent);padding-top:24px;display:flex;justify-content:space-between;align-items:start;gap:20px}.case-mini h3{font-size:28px;max-width:22ch;margin:12px 0}.case-mini .outline-btn{white-space:nowrap}.proof-note{font-size:11px;color:var(--dim);margin-top:26px;max-width:none}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0}.filter{background:none;color:var(--muted);border:1px solid var(--line);padding:9px 18px;border-radius:var(--pill);font-size:13px}.filter.active{background:var(--ink);border-color:var(--ink);color:var(--white)}.creative-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.creative-item{border:0;background:transparent;color:inherit;text-align:left;padding:0}.creative-item[hidden]{display:none}.board{height:350px;overflow:hidden;border-radius:var(--radius);position:relative;background:var(--pale);color:var(--navy);display:flex;align-items:center;padding:36px}.board h3{font-size:48px;max-width:7ch;position:relative;z-index:1}.board img{position:absolute;right:-3%;width:62%;transform:rotate(12deg)}.board .stamp{position:absolute;bottom:20px;left:25px;font:10px var(--mono)}.board-b{background:var(--soft)}.board-b img{width:48%;right:2%;transform:rotate(-9deg)}.board-b h3{font-size:42px;max-width:8ch}.board-c{background:var(--navy);color:var(--bone)}.board-c h3{font-size:43px;max-width:8ch}.board-c img{width:55%;right:-4%}.board-d{background:var(--sand)}.board-d .store{position:absolute;top:40px;left:36px;right:36px;bottom:40px;background:var(--white);padding:18px;border-radius:10px;overflow:hidden}.store .storebar{font:11px var(--mono);border-bottom:1px solid var(--line);padding-bottom:12px}.store h3{font-size:34px;margin-top:24px;max-width:8ch}.board-d img{right:4%;width:50%;top:35px;transform:rotate(0)}.creative-caption{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;font-size:14px}.creative-caption small{color:var(--muted);font:10px var(--mono)}.gallery-note{font-size:12px;color:var(--muted);margin-top:24px}
.testimonials{background:var(--sand)}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.video-card{background:transparent;border:0;text-align:left;color:inherit;padding:0}.video-thumb{aspect-ratio:4/3;border-radius:var(--radius);background:var(--navy);color:var(--bone);padding:28px;position:relative;overflow:hidden;display:flex;align-items:end}.video-card:nth-child(2) .video-thumb{background:var(--blue)}.video-card:nth-child(3) .video-thumb{background:var(--navy2)}.video-thumb:before{content:"";position:absolute;right:-50px;top:-40px;width:230px;height:230px;border:1px solid color-mix(in srgb,var(--bone) 28%,transparent);border-radius:50%}.video-thumb p{font:500 28px/1.06 var(--display);max-width:10ch;letter-spacing:-.03em}.play{position:absolute;right:20px;bottom:20px;border:1px solid var(--bone);border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:16px}.video-card h3{font-size:22px;margin-top:20px}.video-card small{font-size:12px;color:var(--muted)}.video-slot{position:absolute;top:22px;left:25px;font:9px var(--mono);letter-spacing:.08em}
.ownership-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:10%;align-items:start}.ownership-grid .lead{margin-top:28px}.services{display:grid;grid-template-columns:1fr 1fr;gap:30px}.service{border-top:1px solid var(--line);padding-top:20px}.service span{font:11px var(--mono);color:var(--blue)}.service h3{font-size:25px;margin:14px 0}.service p{font-size:15px;color:var(--muted)}.comparison{padding-top:0}.table-shell{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line)}table{width:100%;border-collapse:collapse;font-size:14px;background:var(--white)}th,td{padding:21px 23px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}thead th{font-size:20px;font-family:var(--display);font-weight:500}thead th:first-child{font:10px var(--mono);color:var(--muted)}th:last-child,td:last-child{background:var(--pale)}tbody th{font-weight:500}tr:last-child th,tr:last-child td{border-bottom:0}
.founder{background:var(--navy);color:var(--bone)}.founder-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%;align-items:center}.founder h2{font-size:clamp(40px,4.5vw,66px)}.founder .lead{color:var(--dim);margin:27px 0}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:50px}.step{border-top:1px solid var(--line);padding-top:22px}.step>span{font:12px var(--mono);color:var(--blue)}.step h3{font-size:27px;margin:25px 0 14px}.step p{font-size:16px;color:var(--muted)}.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:10%;padding-top:0}.faq h2{font-size:48px}.faq details{border-top:1px solid var(--line);padding:22px 0}.faq details:last-child{border-bottom:1px solid var(--line)}summary{font-size:17px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}summary:after{content:"+"}details[open] summary:after{content:"−"}details p{padding-top:16px;color:var(--muted);font-size:15px}.final{background:var(--soft);text-align:center}.final h2{max-width:14ch;margin:0 auto 28px;font-size:clamp(54px,6.5vw,94px)}.final p{margin:0 auto 28px;max-width:48ch}.final small{display:block;margin-top:19px;color:var(--muted);font-size:12px}footer{background:var(--navy);color:var(--bone);padding:55px 0 22px}.footer-row{display:flex;justify-content:space-between;align-items:center;gap:25px}.footer-wordmark{width:300px}.footer-bottom{margin-top:50px;border-top:1px solid color-mix(in srgb,var(--bone) 20%,transparent);padding-top:20px;display:flex;gap:20px;justify-content:space-between;color:var(--dim);font-size:10px}
dialog{border:0;border-radius:var(--radius);background:var(--paper);color:var(--ink);width:min(690px,calc(100% - 32px));padding:38px;max-height:90vh;overflow:auto}dialog::backdrop{background:color-mix(in srgb,var(--navy) 78%,transparent)}.close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:var(--ink);font-size:29px;width:40px;height:40px}.modal-eyebrow{padding-right:25px}dialog h2{font-size:43px;margin-bottom:22px}dialog p{color:var(--muted);font-size:16px;margin-bottom:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-grid label{font-size:12px;font-weight:500;display:block}.form-grid input,.form-grid select,.form-grid textarea{display:block;width:100%;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:7px;font-size:14px}.span2{grid-column:1/-1}.form-grid textarea{resize:vertical;min-height:75px}.demo-notice{font-size:12px!important;background:var(--pale);padding:12px;margin-top:18px!important}.submit-row{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:15px}.submit-row small{font-size:11px;color:var(--muted)}#modal-art .board{margin-bottom:22px;height:360px}#modal-art .board img{width:55%}.modal-list{padding:0;list-style:none}.modal-list li{padding:13px 0;border-top:1px solid var(--line);font-size:15px}.modal-list b{display:block;margin-bottom:4px}.modal-list span{color:var(--muted)}
@media(min-width:1500px){.hero-art{min-height:620px}.hero-product{top:70px}.hero-board{height:390px}.mini-board{bottom:65px}}
@media(max-width:1000px){nav .navlinks>a:not(.btn){display:none}.hero-grid{gap:20px}.hero-art{min-height:480px}.hero-board{height:300px;padding:22px}.hero-board .huge{font-size:40px}.hero-product{top:100px}.mini-board b{font-size:22px}.hero h1{font-size:72px}.section{padding-top:75px;padding-bottom:75px}.case-copy{padding:30px}.case-copy h3{font-size:32px}.case-art{min-height:390px}.board h3{font-size:38px}.board{height:300px;padding:25px}.board-b h3,.board-c h3{font-size:34px}.logos{gap:25px}.video-thumb{padding:20px}.video-thumb p{font-size:24px}.ownership-grid{gap:6%}.video-grid{gap:20px}.table-shell th,.table-shell td{padding:17px}.comparison,.faq{padding-top:0}}
@media(max-width:700px){.toolbar{font-size:9px;padding:9px 12px;gap:8px}.toolbar .toolbar-extra{display:none}.toolbar button{font-size:9px;white-space:nowrap}.wordmark{width:154px}nav{min-height:80px;gap:15px}nav .navlinks{gap:0}nav .btn{font-size:10px;padding:9px 13px;min-height:41px;gap:8px}nav .btn:after{font-size:16px}.hero{padding-top:45px;padding-bottom:30px}.hero-grid{grid-template-columns:1fr;gap:20px}.hero h1{font-size:clamp(59px,13.8vw,80px);max-width:10ch}.hero .lead{font-size:17px;margin:24px 0}.hero .row{gap:22px}.btn{font-size:14px;padding:14px 20px}.hero-art{min-height:400px;width:min(100%,430px);margin:0 auto}.hero-board{height:270px;top:25px;left:9%;padding:25px}.hero-board .huge{font-size:38px}.hero-product{top:60px;width:62%}.mini-board{bottom:28px;padding:18px}.mini-board b{font-size:21px}.mini-board .bars{height:22px;margin-top:12px}.art-label{font-size:8px}.trust{padding:28px 0 35px}.logos{grid-template-columns:repeat(3,1fr);gap:25px 24px}.logos img{height:31px}.trust .eyebrow{font-size:8px;margin-bottom:25px}.section{padding-top:62px;padding-bottom:62px}.section-head{display:block;margin-bottom:30px}.section-head p{margin-top:22px;font-size:16px;max-width:38ch}.section-head .text-link{display:inline-block;margin-top:22px}h2{font-size:45px}.eyebrow{font-size:10px;margin-bottom:20px}.feature{grid-template-columns:1fr}.case-art{min-height:280px}.case-art img{width:67%}.case-copy{padding:28px}.case-copy h3{font-size:34px;max-width:16ch}.case-minis{grid-template-columns:1fr;gap:22px}.case-mini h3{font-size:25px}.case-mini .outline-btn{font-size:11px}.creative-grid{grid-template-columns:1fr;gap:20px}.board{height:310px;padding:28px}.board h3{font-size:43px}.board-b h3{font-size:38px}.creative-caption{font-size:13px}.creative-caption small{font-size:9px}.filter{font-size:12px;padding:8px 15px}.video-grid{grid-template-columns:1fr;gap:32px}.video-thumb{aspect-ratio:16/10;padding:25px}.video-thumb p{font-size:34px;max-width:12ch}.video-card h3{font-size:23px;margin-top:15px}.ownership-grid,.founder-grid,.faq{grid-template-columns:1fr;gap:36px}.ownership-grid .lead{font-size:17px}.services{gap:25px}.service h3{font-size:23px}.service p{font-size:14px}.comparison,.faq{padding-top:0}.table-shell{border:0;border-radius:0;overflow:visible}table,thead,tbody,tr,th,td{display:block;background:none}thead{display:none}tbody tr{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}tbody th{font:500 20px var(--display);background:var(--sand)}tbody td{border-bottom:1px solid var(--line);font-size:13px;display:grid;grid-template-columns:100px 1fr;gap:12px}tbody td:before{content:attr(data-label);font-weight:600}th:last-child,td:last-child{background:var(--pale)}.table-shell th,.table-shell td{padding:15px 18px}.founder h2{font-size:43px}.founder .lead{font-size:17px}.process-grid{grid-template-columns:1fr;gap:30px;margin-top:30px}.step h3{margin:13px 0}.faq h2{font-size:43px}.final h2{font-size:57px}.final p{font-size:17px}.footer-row{align-items:start;flex-direction:column}.footer-wordmark{width:230px}.footer-bottom{flex-direction:column;gap:10px;margin-top:30px}dialog{padding:28px 23px}dialog h2{font-size:35px}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.submit-row{align-items:start;flex-direction:column}#modal-art .board{height:300px}.placeholder{font-size:9px}.proof-note{font-size:10px}}
[hidden]{display:none!important}.filter{min-height:44px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Concept 02: editorial scale, harder contrasts, expressive composition. */
html{scroll-padding-top:35px}
.toolbar{background:var(--ink)}
header{background:var(--navy);color:var(--bone);border-color:color-mix(in srgb,var(--bone) 20%,transparent)}
nav{min-height:90px}nav .btn{background:var(--orange);color:var(--ink);font-weight:700}
.btn{border-radius:6px;color:var(--ink);font-weight:700;min-height:56px}
.btn.dark{color:var(--bone)}
.hero-v2{background:var(--navy);color:var(--bone);padding-top:50px;padding-bottom:50px;overflow:hidden}
.hero-v2 .hero-grid{grid-template-columns:1.24fr 1fr;gap:2%;align-items:center}
.hero-v2 h1{font-size:clamp(75px,8.7vw,138px);font-weight:900;line-height:.87;letter-spacing:-.065em;text-transform:uppercase}
.hero-v2 h1 span{color:var(--orange);display:inline-block;transform:rotate(-3deg);margin:6px 0 5px}
.hero-v2 .eyebrow{color:var(--bone);font-size:10px}
.hero-v2 .lead{font-size:18px;max-width:45ch;color:var(--bone);margin:30px 0}
.hero-v2 small{color:var(--dim)}
.hero-v2 .hero-art{min-height:550px}
.hero-v2 .hero-art:before{background:var(--blue);border-radius:var(--radius);inset:18px -100px 20px 20px;transform:rotate(5deg)}
.hero-v2 .hero-board{width:76%;height:345px;top:40px;left:7%;background:var(--orange);color:var(--ink);border-radius:6px;transform:rotate(-9deg);padding:25px}
.hero-v2 .hero-board .huge{font-size:58px;font-weight:900;text-transform:uppercase;line-height:.92}
.hero-v2 .hero-board .circle{border-color:var(--soft)}
.hero-v2 .hero-product{width:68%;right:-3%;top:83px;transform:rotate(14deg)}
.hero-v2 .mini-board{left:-3%;bottom:38px;background:var(--paper);color:var(--ink);border:0;border-radius:6px;transform:rotate(-4deg);width:71%;padding:22px}
.hero-v2 .mini-board .eyebrow{color:var(--muted);font-size:9px}
.hero-v2 .mini-board b{font-size:28px;font-weight:700}
.hero-v2 .art-label{color:var(--bone);font-size:8px;right:0}
.hero-v2 .note{margin-top:30px}
.hero-strip{background:var(--orange);color:var(--ink);padding:16px 0;font:800 clamp(13px,1.7vw,25px)/1.2 var(--display);letter-spacing:-.02em}
.hero-strip .wrap{display:flex;justify-content:space-between;gap:15px;align-items:center}
.trust{padding:38px 0 45px;border:0}.trust .eyebrow{font-size:10px}
h2{font-weight:800;line-height:.97;letter-spacing:-.055em}
.section-head h2{font-size:clamp(46px,5.7vw,85px)}
.section{padding-top:90px;padding-bottom:90px}
.capabilities{padding-top:40px}
.capabilities .section-head{margin-bottom:35px}
.capabilities .section-head p{max-width:39ch}
.cap-intro{font-size:16px;margin-bottom:35px;color:var(--muted);max-width:65ch}
.cap-row{display:grid;grid-template-columns:50px .95fr 1.05fr;gap:25px;border-top:2px solid var(--ink);padding:35px 0;align-items:start}
.cap-row .cap-num{font:12px var(--mono);margin-top:7px}
.cap-row h3{font-size:clamp(36px,4vw,59px);font-weight:800;line-height:.99;letter-spacing:-.05em}
.cap-row h3 span{color:var(--blue)}
.cap-row p{font-size:17px;max-width:43ch;margin-bottom:17px}
.cap-tags{font:10px/1.9 var(--mono);text-transform:uppercase;max-width:60ch;color:var(--muted);margin-bottom:20px}
.cap-row .text-link{display:inline-block;font-weight:600;font-size:14px}
.cap-footer{background:var(--blue);color:var(--bone);padding:24px 30px;border-radius:6px;display:flex;justify-content:space-between;gap:25px;align-items:center}
.cap-footer b{font:700 26px/1.05 var(--display);letter-spacing:-.03em}
.cap-footer p{font-size:14px;max-width:45ch}
.work{background:var(--blue)}.work .muted,.work .proof-note{color:var(--bone)}
.feature{border-radius:6px;background:var(--navy)}
.case-art{background:var(--soft)}
.case-art:before{border-color:var(--orange)}
.case-copy h3{font-weight:800;font-size:43px}
.case-minis{gap:40px}
.case-mini h3{font-weight:700}
.pill{border-radius:4px}
.creative-grid{gap:28px}
.board{border-radius:6px;height:390px}
.board h3{font-size:64px;font-weight:900;text-transform:uppercase;line-height:.9;max-width:6ch}
.board-b h3,.board-c h3{font-size:55px}
.board-b{background:var(--orange);color:var(--ink)}
.board-c{background:var(--blue)}
.board-d .store{border-radius:0}
.board-d .store h3{font-size:38px;line-height:.97}
.filter{border-radius:4px}
.testimonials{background:var(--orange);color:var(--ink)}
.testimonials .muted{color:var(--ink)}
.video-thumb{border-radius:6px;background:var(--navy)}
.video-thumb p{font-size:34px;font-weight:800;text-transform:uppercase}
.video-card h3{font-weight:700}
.video-card small{color:var(--ink)}
.comparison h2{max-width:15ch}
.table-shell{border-radius:6px}
.founder{background:var(--navy)}
.founder h2{font-weight:800;line-height:.97}
.final{background:var(--blue);color:var(--bone);text-align:left}
.final .eyebrow{color:var(--bone)}
.final h2{font-size:clamp(65px,9vw,140px);font-weight:900;line-height:.88;text-transform:uppercase;max-width:11ch;margin:0 0 35px;letter-spacing:-.06em}
.final p{margin:0 0 30px;max-width:45ch}
.final .btn{background:var(--orange);color:var(--ink)}
.final small{color:var(--bone)}
.final-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:7%;align-items:end}
.final .final-aside{padding-bottom:10px}
.step h3,.faq h2{font-weight:700}
.service-page{background:var(--paper)}
.service-page .detail-hero{background:var(--blue);color:var(--bone);padding:55px 0 70px}
.back-link{display:inline-block;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:12px var(--body);padding:0 0 5px;margin-bottom:45px}
.detail-hero h1{font-size:clamp(60px,7.3vw,112px);line-height:.94;font-weight:900;max-width:15ch;text-transform:uppercase}
.detail-hero .lead{margin:28px 0;max-width:60ch;font-size:22px}
.detail-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:10%}
.detail-grid h2{font-size:52px}
.detail-list{margin:0;padding:0;list-style:none}
.detail-list li{border-top:1px solid var(--line);padding:23px 0}
.detail-list h3{font-size:28px;font-weight:700;margin-bottom:12px}
.detail-list p{color:var(--muted);font-size:16px}
.detail-fit{background:var(--sand)}
.detail-fit h2{font-size:55px;margin-bottom:25px}
.detail-fit .lead{max-width:60ch}
.service-subnav{display:flex;gap:20px;flex-wrap:wrap;margin-top:35px}
.service-subnav a{font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:7px}
@media(max-width:1000px){
.hero-v2 h1{font-size:82px}.hero-v2 .hero-art{min-height:480px}.hero-v2 .hero-board{height:300px}.hero-v2 .hero-board .huge{font-size:43px}
.hero-v2 .hero-product{top:120px}.hero-v2 .mini-board b{font-size:24px}.hero-v2 .mini-board{bottom:12px}
.board h3{font-size:48px}.board-b h3,.board-c h3{font-size:44px}.cap-row{grid-template-columns:35px 1fr 1fr;gap:20px}
}
@media(max-width:700px){
nav{min-height:80px}.hero-v2{padding-top:38px;padding-bottom:35px}
.hero-v2 .hero-grid{grid-template-columns:1fr;gap:20px}.hero-v2 h1{font-size:clamp(65px,15.7vw,94px);max-width:none;line-height:.9}
.hero-v2 .eyebrow{font-size:8px}.hero-v2 .lead{font-size:17px;margin:25px 0}.hero-v2 .hero-art{min-height:390px}
.hero-v2 .hero-board{height:250px;top:30px;left:9%;padding:22px}.hero-v2 .hero-board .huge{font-size:42px}
.hero-v2 .hero-product{top:55px;width:65%;right:-2%}.hero-v2 .mini-board{left:1%;bottom:25px;width:70%;padding:19px}
.hero-v2 .mini-board b{font-size:23px}.hero-v2 .art-label{font-size:7px;left:0;right:auto}
.hero-strip{padding:14px 0}.hero-strip .wrap{flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px}
.hero-strip .divider{display:none}.section{padding-top:60px;padding-bottom:60px}
.capabilities{padding-top:20px}.cap-row{grid-template-columns:30px 1fr;gap:15px;padding:28px 0}
.cap-row h3{font-size:43px}.cap-row .cap-copy{grid-column:2}.cap-row p{font-size:16px}.cap-tags{font-size:9px}
.cap-footer{padding:25px;display:block}.cap-footer p{margin-top:15px}.cap-footer b{font-size:27px}
.section-head h2{font-size:48px}.case-copy h3{font-size:35px}.board{height:330px}.board h3{font-size:54px}
.board-b h3,.board-c h3{font-size:47px}.board-d .store h3{font-size:34px}
.video-thumb p{font-size:37px}.comparison{padding-top:0}.faq{padding-top:0}
.final-inner{grid-template-columns:1fr;gap:20px}.final h2{font-size:clamp(61px,15.4vw,90px);margin:0 0 10px}.final p{font-size:17px}
.detail-hero h1{font-size:60px}.detail-hero .lead{font-size:19px}.detail-grid{grid-template-columns:1fr;gap:30px}
.detail-grid h2,.detail-fit h2{font-size:43px}.service-subnav{gap:15px}.back-link{margin-bottom:35px}
}


/* Only new palette usage: three 6px service markers and one 3px rule.
   Concept 02's orange/blue/navy surfaces and all type scales stay untouched. */
:root{--accent-lime:#C6F432;--accent-sky:#38BDF8}
.cap-num:after{content:"";display:block;width:6px;height:6px;
border-radius:50%;background:var(--accent-sky);margin-top:12px}
.cap-row:nth-of-type(odd) .cap-num:after{background:var(--accent-lime)}
.hero-v2 .mini-board{border-left:3px solid var(--accent-sky)}


/* V2 palette/type retained. Creativewise informs scale, work-first order,
   quiet captions, a human presence and scan-friendly services, not identity. */
/* Primary V2 tokens are inherited unchanged. Only secondary detail tokens
   are muted. Never override --blue or --orange to soften small accents. */
:root{
 --accent-orange:#E5A06A;
 --accent-lime:#CBD79C;--accent-sky:#9BC7D5;
 --hero-emphasis:#C6F431;
}
.cap-row:nth-of-type(1) .cap-num:after{background:var(--accent-orange)}
.cap-row:nth-of-type(2) .cap-num:after{background:var(--accent-sky)}
.cap-row:nth-of-type(3) .cap-num:after{background:var(--accent-lime)}
.hero-cw{padding-top:48px;padding-bottom:40px}
.hero-cw .hero-grid{grid-template-columns:1.65fr 1fr;gap:6%;align-items:end}
.hero-cw h1{font-size:clamp(60px,6.3vw,96px);max-width:none;line-height:.94;letter-spacing:-.055em}
.hero-cw h1 span{color:var(--hero-emphasis);transform:none}
.btn{font-size:18px}
nav .btn{font-size:16px;min-height:52px}
footer .footer-contact{display:inline-block;font-size:18px;border-bottom:1px solid var(--dim);padding-bottom:4px}
footer .footer-contact-row{margin-top:26px}
footer .website-disclaimer{border-top:1px solid var(--navy2);padding-top:20px;margin-top:24px;color:var(--dim);font-size:13px;line-height:1.6}
footer .website-disclaimer h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
footer .website-disclaimer p{max-width:none;width:100%;margin:0}
footer .website-disclaimer strong{color:var(--bone);font-weight:500}
footer .website-disclaimer + .footer-bottom{margin-top:22px;padding-top:16px}
/* Compact, balanced closing invitation and a finished navigation footer. */
main > .final{padding-top:72px;padding-bottom:72px}
main > .final .final-inner{grid-template-columns:1.25fr 1fr;gap:6%;align-items:center}
main > .final h2{font-size:clamp(46px,4.7vw,68px);line-height:.98;max-width:none;margin:0;letter-spacing:-.045em}
main > .final .eyebrow{margin-bottom:28px}
main > .final .final-aside{padding:0}
main > .final .lead{font-size:20px;max-width:38ch;margin-bottom:24px}
footer .footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:7%;padding-bottom:12px}
footer .footer-wordmark{width:270px;max-width:100%}
footer .footer-brand-copy{font-size:15px;max-width:29ch;color:var(--dim);margin-top:20px}
footer .footer-contact-row{margin-top:22px}
footer .footer-contact{font-size:16px}
footer .footer-menu-title{font:500 16px/1.4 var(--body);letter-spacing:0;margin-bottom:18px}
footer .footer-menu{display:grid;gap:10px;font-size:14px}
footer .footer-menu a{width:fit-content}
footer .footer-menu a:hover{color:var(--accent-sky)}
footer .footer-legal-note{font-size:12px;color:var(--dim);margin-top:16px;max-width:25ch}
footer .footer-placeholder{color:var(--dim)}
footer .footer-bottom{align-items:center;font-size:12px}
footer .footer-preview-note{font-size:10px;color:var(--dim);margin-top:14px}
@media(max-width:700px){
 main > .final{padding-top:48px;padding-bottom:48px}
 main > .final .final-inner{grid-template-columns:1fr;gap:26px}
 main > .final h2{font-size:clamp(36px,9vw,54px)}
 main > .final .lead{font-size:18px;margin-bottom:22px}
 main > .final .eyebrow{font-size:9px;margin-bottom:22px}
 footer .footer-main{grid-template-columns:1fr 1fr;gap:34px 24px}
 footer .footer-brand{grid-column:1/-1}
 footer .footer-wordmark{width:230px}
 footer .footer-bottom{align-items:start}
}
.hero-cw .eyebrow{margin-bottom:25px}
.hero-cw .hero-aside{padding-bottom:5px}
.hero-cw .lead{font-size:20px;max-width:33ch;margin:0 0 17px}
.hero-cw .cw-scope{font-size:13px;line-height:1.6;color:var(--dim);margin-bottom:25px;max-width:36ch}
.hero-cw .row{gap:18px}
.hero-cw small{display:block;font-size:11px;margin-top:14px;max-width:42ch}
.cw-stage{margin-top:48px}
.cw-scene{position:relative;min-height:420px;background:var(--blue);overflow:hidden;border-radius:6px}
.cw-scene:before{content:"";position:absolute;inset:0 38% 0 0;background:var(--orange)}
.cw-art-copy{position:relative;z-index:1;padding:40px;width:60%;color:var(--ink)}
.cw-art-copy .eyebrow{font-size:10px;margin-bottom:26px}
.cw-art-copy b{font:900 clamp(60px,7.2vw,110px)/.89 var(--display);letter-spacing:-.055em;display:block}
.cw-art-copy p{font-size:14px;margin-top:24px}
.cw-product{position:absolute;z-index:2;right:7%;top:6%;height:89%;width:35%;object-fit:contain;transform:rotate(8deg)}
.cw-stage-caption{display:flex;justify-content:space-between;gap:20px;padding:15px 0 0;color:var(--bone);font-size:12px}
.cw-stage-caption span{color:var(--dim);font-size:10px}
.cw-stage-caption a{border-bottom:1px solid var(--dim);padding-bottom:3px}
.hero-strip{background:var(--navy);color:var(--dim);border-top:1px solid var(--navy2);padding:15px 0}
.hero-strip .wrap{justify-content:center;font:11px var(--mono);gap:35px}
.hero-strip .divider{color:var(--orange)}
.trust{padding-top:35px;padding-bottom:35px}
.logos img{filter:grayscale(1) brightness(0);opacity:.72}
.trust .brand-section-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.trust .brand-section-head h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.035em}
.trust .brand-motion-toggle{background:transparent;border:1px solid var(--line);border-radius:var(--pill);padding:8px 14px;color:var(--muted);font-size:12px;flex-shrink:0}
.trust .brand-motion{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,var(--ink) 4%,var(--ink) 96%,transparent)}
.trust .brand-track{display:flex;width:max-content;animation:brand-drift 90s linear infinite}
.trust .brand-track:nth-child(2){animation-duration:96s;animation-direction:reverse;margin-top:12px}
.trust .brand-group{display:flex;gap:32px;padding-right:32px;flex-shrink:0;align-items:center}
.trust .brand-item{width:160px;height:98px;flex:0 0 160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.trust .brand-item img{width:auto;max-width:142px;height:43px;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.75}
.trust .brand-item img.keep-grayscale{filter:grayscale(1)}
.trust .brand-item .brand-label{font-size:11px;color:var(--muted)}
.trust .brand-name-only{font:600 23px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.trust .brand-attribution{font-size:12px;color:var(--muted);margin-top:20px;max-width:none}
.trust[data-paused="true"] .brand-track,.trust .brand-motion:hover .brand-track,.trust .brand-motion:focus-within .brand-track{animation-play-state:paused}
@keyframes brand-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){
 .trust .brand-section-head{gap:12px;align-items:flex-start}
 .trust .brand-section-head h2{font-size:28px;max-width:12ch}
 .trust .brand-motion-toggle{font-size:11px;padding:8px 10px}
 .trust .brand-item{width:140px;flex-basis:140px}
 .trust .brand-group{gap:20px;padding-right:20px}
 .trust .brand-item img{max-width:125px}
}
@media(prefers-reduced-motion:reduce){
 .trust .brand-motion{overflow:visible;mask-image:none}
 .trust .brand-track{display:block;width:100%;animation:none;transform:none}
 .trust .brand-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;padding:0}
 .trust .brand-item{width:100%;min-width:0}
 .trust .brand-motion-toggle,.trust .brand-group[aria-hidden="true"]{display:none}
}
/* A recognisable feature-by-provider matrix at every breakpoint. */
.comparison .section-head{display:block;max-width:none}
.comparison h2{max-width:20ch}
.comparison .section-head .muted{max-width:65ch;margin-top:22px}
.comparison .table-shell{overflow-x:auto;border:0;border-radius:0;padding-bottom:2px}
.comparison table{display:table;table-layout:fixed;width:100%;min-width:800px;border-collapse:separate;border-spacing:0;background:transparent}
.comparison thead{display:table-header-group}
.comparison tbody{display:table-row-group}
.comparison tr{display:table-row}
.comparison th,.comparison td{display:table-cell;vertical-align:middle;padding:22px 20px;border-bottom:1px solid var(--line);background:var(--white);line-height:1.4}
.comparison thead th{height:112px;text-align:center;font:500 21px/1.2 var(--display);border-bottom:0;background:transparent}
.comparison thead th:first-child{width:27%;text-align:left;font:500 16px var(--body);color:var(--ink)}
.comparison tbody th{font:500 17px/1.35 var(--body);text-align:left;background:var(--paper)}
.comparison tbody td{text-align:center;font-size:14px;color:var(--muted)}
.comparison tbody td:before{content:none}
.comparison th.ftr-column,.comparison td.ftr-column{background:var(--navy);color:var(--bone);border-bottom-color:var(--navy2)}
.comparison thead th.ftr-column{border-bottom-color:var(--navy2)}
.comparison thead th.ftr-column{border-radius:24px 24px 0 0}
.comparison tbody tr:last-child td.ftr-column{border-radius:0 0 24px 24px}
.comparison tbody tr:first-child th{border-radius:16px 0 0 0}
.comparison tbody tr:last-child th{border-radius:0 0 0 16px}
.comparison tbody tr:first-child td:last-child{border-radius:0 16px 0 0}
.comparison tbody tr:last-child td:last-child{border-radius:0 0 16px 0}
.comparison .compare-logo{display:block;width:170px;max-width:100%;height:auto;margin:0 auto}
.comparison .compare-check{display:block;color:#C6F430;font-size:24px;line-height:1;margin-bottom:7px}
.comparison .ftr-column .cell-copy{font-weight:500}
.comparison tr:last-child>*{border-bottom:0}
.comparison .comparison-scroll-hint{display:none}
@media(max-width:700px){
 .comparison .table-shell{overflow-x:auto;overscroll-behavior-x:contain}
 .comparison table{min-width:800px}
 .comparison th,.comparison td{padding:18px 12px}
 .comparison thead th{font-size:18px;height:85px}
 .comparison thead th:first-child{width:148px;font-size:14px}
 .comparison tbody th{font-size:15px}
 .comparison tbody td{font-size:13px}
 .comparison .compare-logo{width:130px}
 .comparison tr>th:first-child{position:sticky;left:0;z-index:1;border-right:1px solid var(--line)}
 .comparison thead tr>th:first-child{background:var(--paper)}
 .comparison .comparison-scroll-hint{display:block;font-size:13px;color:var(--muted);margin:0 0 12px}
}
.work .section-head h2{font-size:clamp(52px,6.4vw,95px)}
#creative .creative-grid{grid-template-columns:1.22fr 1fr;gap:48px 32px;align-items:start}
#creative .creative-item:nth-child(even){padding-top:65px}
#creative .board{height:450px}
#creative .creative-item:nth-child(even) .board{height:370px}
#creative .board{padding:28px}
#creative .board h3{font-size:clamp(40px,4.3vw,62px);max-width:53%}
#creative .board img{width:43%;right:2%;top:50%;transform:translateY(-50%) rotate(7deg)}
#creative .board-b h3{font-size:clamp(36px,3.4vw,49px)}
#creative .board-d .store h3{font-size:clamp(28px,2.8vw,40px);max-width:58%}
#creative .board-d .store img{width:34%;right:3%;top:56%;transform:translateY(-50%)}
#creative .creative-caption{padding-top:16px;font-size:16px}
.capabilities{padding-top:85px}
.cap-row h3{font-size:clamp(34px,3.8vw,56px)}
.cap-row .cap-tags{color:var(--muted);font-size:10px}
.cap-footer{background:var(--navy)}
.founder .founder-grid{grid-template-columns:1fr 1.15fr;gap:7%;align-items:center}
.founder h2{font-size:clamp(45px,5.1vw,75px);margin-bottom:28px}
.founder .lead{max-width:43ch}
/* Requested original-dev testimonial pattern; scoped to this section only. */
.testimonials{background:var(--soft);color:var(--ink)}
.testimonials .section-head{display:block;margin-bottom:34px}
.testimonials .eyebrow{color:var(--orange)}
.testimonials h2{font-size:clamp(44px,5.1vw,76px);line-height:1;font-weight:800;text-transform:uppercase;max-width:none}
.testimonials h2 span{color:var(--orange)}
.testimonials .section-head .muted{color:var(--muted);max-width:64ch;margin-top:18px}
.testimonials .video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.testimonials .video-card{border-radius:14px;overflow:hidden;background:var(--white);border:1px solid var(--line);display:block;width:100%}
.testimonials .video-thumb,.testimonials .video-card:nth-child(2) .video-thumb,.testimonials .video-card:nth-child(3) .video-thumb{aspect-ratio:16/10;background:var(--navy);padding:20px;border-radius:0;display:block}
.testimonials .video-thumb:before{content:none}
.testimonials .video-slot{top:18px;left:18px;font-size:8px;color:var(--dim)}
.testimonials .play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:var(--white);font-size:18px;padding-left:3px}
.testimonials .video-meta{display:block;padding:18px 20px 20px}
.testimonials .video-card h3{font-size:20px;margin:0 0 6px}
.testimonials .video-card small{color:var(--muted);font-size:12px}
.testimonials .video-status{position:absolute;right:12px;bottom:12px;color:var(--bone);font-size:10px;background:var(--ink);padding:3px 6px;border-radius:3px}
.testimonials .video-footnote{font-size:12px;color:var(--muted);margin-top:22px;max-width:75ch}
.testimonials .video-card:hover .play{background:var(--blue)}
@media(min-width:701px) and (max-width:1000px){.testimonials .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .testimonials .video-grid{grid-template-columns:1fr;gap:20px}
 .testimonials h2{font-size:clamp(38px,10vw,64px)}
 .testimonials .video-card h3{font-size:20px}
}
@media(max-width:1050px){
 .hero-cw .hero-grid{grid-template-columns:1.55fr 1fr;gap:4%}
 .hero-cw h1{font-size:clamp(58px,7.7vw,80px)}
 .hero-cw .lead{font-size:18px}
 .hero-cw .row{align-items:start;flex-direction:column;gap:14px}
 .cw-scene{min-height:350px}.cw-art-copy{padding:32px}.cw-art-copy b{font-size:82px}
 #creative .board{height:380px}#creative .creative-item:nth-child(even) .board{height:330px}
 #creative .board h3{font-size:45px}#creative .board-b h3{font-size:38px}

}
@media(max-width:700px){
 .hero-cw{padding-top:32px;padding-bottom:26px}
 .hero-cw .hero-grid{grid-template-columns:1fr;gap:27px}
 .hero-cw h1{font-size:clamp(40px,10.8vw,72px);max-width:none;line-height:.96}
 .hero-cw .eyebrow{font-size:8px;margin-bottom:20px}
 .hero-cw .lead{font-size:18px;max-width:35ch;margin:0 0 14px}
 .hero-cw .cw-scope{max-width:38ch;margin-bottom:22px}
 .hero-cw .row{flex-direction:row;align-items:center;gap:20px}
 .hero-cw .row .text-link{font-size:16px}
 nav{display:grid;grid-template-columns:minmax(90px,1fr) auto;gap:12px}
 nav .wordmark{width:154px;max-width:100%}
 nav .btn{font-size:16px;padding:10px 12px;gap:10px}
 .btn{font-size:18px}
 .cw-stage{margin-top:30px}.cw-scene{min-height:300px}
 .cw-scene:before{right:37%}.cw-art-copy{padding:25px 17px;width:64%}
 .cw-art-copy .eyebrow{font-size:7px;margin-bottom:25px}
 .cw-art-copy b{font-size:clamp(42px,10vw,64px)}
 .cw-art-copy p{font-size:10px;max-width:17ch;margin-top:23px}
 .cw-product{right:0;top:19%;height:70%;width:42%}
 .cw-stage-caption{flex-direction:column;gap:8px;font-size:12px}
 .cw-stage-caption span{font-size:9px}
 .cw-stage-caption a{align-self:start}
 .hero-strip .wrap{font-size:8px;gap:8px 17px}
 .trust{padding-top:30px;padding-bottom:30px}
 .work .section-head h2{font-size:51px}
 #creative .creative-grid{grid-template-columns:1fr;gap:30px}
 #creative .creative-item:nth-child(even){padding-top:0}
 #creative .board,#creative .creative-item:nth-child(even) .board{height:340px}
 #creative .board h3{font-size:48px}#creative .board-b h3{font-size:42px}
 #creative .board-d .store h3{font-size:30px}
 .capabilities{padding-top:60px}
 .founder .founder-grid{grid-template-columns:1fr;gap:35px}

 .founder h2{font-size:48px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Production-only fixes. Primary approved tokens remain unchanged. */
.skip-link{position:fixed;top:8px;left:8px;z-index:9999;background:var(--bone);color:var(--navy);padding:14px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--accent-sky);outline-offset:5px}
body{padding-top:0}
.real-work{text-decoration:none;display:block;color:inherit}
#creative .real-work .board{height:440px!important;background:#fff;border-radius:12px;overflow:hidden;display:block}
#creative .real-work .board img{position:static!important;width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important;max-width:none!important}
#creative .real-work[data-kind=aplus] .board img,#creative .real-work[data-kind=store] .board img{object-fit:cover!important;object-position:top!important}
.cw-product{background:white;border-radius:14px;object-fit:contain!important;transform:rotate(5deg)!important;box-shadow:0 24px 60px #0003}
.brand-motion{overflow-x:auto}.production-brand-track{width:100%!important;animation:brand-enter 1.2s ease-out both!important}
.production-brand-track:nth-child(2){animation-delay:.15s!important}
.production-brand-track .brand-group{flex-wrap:nowrap!important;min-width:max-content!important}
@keyframes brand-enter{from{opacity:.4;transform:translateX(20px)}to{opacity:1;transform:none}}
.production-brand-track .brand-item{flex:0 0 155px}
.contact-page{min-height:65vh;padding-top:70px;padding-bottom:80px;max-width:1000px}
.contact-page h1,.legal-page h1{font-family:var(--display);font-size:clamp(44px,6vw,78px);line-height:1;letter-spacing:-.045em;margin-bottom:25px}
.contact-page .lead{max-width:650px}.contact-panel{border:1px solid var(--line);padding:30px;border-radius:18px;margin-top:36px}
.contact-panel label{display:block;font-weight:600;margin-bottom:16px}
.contact-panel input,.contact-panel textarea,.contact-panel select{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:white;color:var(--navy)}
.contact-panel textarea{min-height:120px;resize:vertical}.contact-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:25px}
.contact-notice{font-size:14px;color:var(--muted);margin-top:20px}.contact-panel .error{color:#9a3212;font-weight:600}
.legal-page{max-width:920px;min-height:70vh;padding-top:60px;padding-bottom:80px}
.legal-page h2{font-size:25px;margin-top:32px;margin-bottom:12px}.legal-page p{margin:15px 0}
.legal-page a{color:var(--blue);text-decoration:underline}
@media(max-width:700px){#creative .real-work .board{height:360px!important}.contact-panel{padding:20px}.contact-page{padding-top:40px}}
@media(prefers-reduced-motion:reduce){.production-brand-track{animation:none!important}.production-brand-track .brand-group{min-width:0!important;flex-wrap:wrap!important}}

#creative .real-work.wide-work .board img{object-fit:contain!important;object-position:center!important}

/* Mobile pass: legible minimum sizes, comfortable tap targets, no empty gallery boxes. */
footer .footer-menu a{padding:6px 0;margin:-6px 0}
.text-link,.cw-founder-link,.cw-stage-caption a{padding-top:6px}
@media(max-width:700px){
 .hero-cw .eyebrow{font-size:10px}
 .cw-art-copy .eyebrow{font-size:9px}
 .cw-art-copy p{font-size:12px}
 .hero-strip .wrap{font-size:10px}
 .cw-stage-caption span,.creative-caption small{font-size:11px}
 .back-link{font-size:13px;margin-bottom:28px}
 .footer-bottom a{padding:8px 0}
 #creative .real-work.wide-work .board{height:auto!important;aspect-ratio:1462/624}
 #creative .real-work[data-kind=listing] .board{height:auto!important;aspect-ratio:1/1}
}
.contact-actions button.text-link{background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;color:inherit;padding:6px 0 5px;font-size:15px}
@media(max-width:700px){#creative .real-work.wide-work .board,#creative .real-work[data-kind=listing] .board{padding:0}}
footer .footer-contact-title{margin-bottom:8px}
/* Mobile preview: centered hero, brand heading and founder stat. Body copy stays left-aligned. */
@media(max-width:700px){
 .hero-cw .hero-grid>div:first-child,.hero-cw .hero-aside{text-align:center}
 .hero-cw h1,.hero-cw .lead{margin-left:auto;margin-right:auto}
 .hero-cw .row{justify-content:center}
 .hero-cw .row .btn{width:100%}
 .trust .brand-section-head{text-align:center}


 .founder .cw-founder-link{display:block;text-align:center;width:fit-content;margin-left:auto;margin-right:auto}
}
@media(max-width:700px){.trust .brand-section-head h2{margin-left:auto;margin-right:auto}}
/* Mobile: one primary CTA above the fold. The hero button is the call; the nav keeps only the wordmark. */
@media(max-width:700px){nav .btn{display:none}nav{grid-template-columns:1fr}}
@media(max-width:700px){nav{justify-items:center;min-height:72px}nav .wordmark{width:220px}}
@media(max-width:700px){nav{align-items:center;align-content:center;padding-top:0;padding-bottom:0}nav>a{display:flex}}
@media(max-width:700px){nav .navlinks{display:none}}
/* Buttons: brand orange pill (FTR Brand Guidelines V1.0), subtle lift and arrow nudge on hover. */
.btn{background:#F67A1C;color:#181B1F;border-radius:999px;transition:transform .15s ease,background .15s ease,color .15s ease}
.btn:after{transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:hover:after{transform:translate(2px,-2px)}
.btn:active{transform:translateY(0)}
@media(max-width:700px){.hero-cw .cw-stage{margin-top:44px}}
@media(prefers-reduced-motion:reduce){.btn,.btn:after{transition:none}.btn:hover{transform:none}.btn:hover:after{transform:none}}
/* Logo wall: dark proof band, two continuous rows, all logos in bone. */
.logo-wall{background:var(--navy);color:var(--bone);padding:64px 0 56px;border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.logo-wall-head{text-align:center;margin-bottom:40px}
.logo-wall-head .eyebrow{color:var(--dim);margin-bottom:14px}
.logo-wall-head h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.035em;margin:0 auto}
.logo-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-row{display:flex;width:max-content}
.logo-row+.logo-row{margin-top:22px}
.logo-set{display:flex;align-items:center;gap:64px;padding:0 32px;margin:0;list-style:none;animation:logo-scroll 70s linear infinite}
.logo-row-reverse .logo-set{animation-direction:reverse;animation-duration:78s}
.logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:56px}
.logo img{width:auto;height:34px;max-width:150px;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.78;transition:opacity .2s}
.logo-marquee:hover .logo-set{animation-play-state:paused}
.logo-marquee:hover .logo img{opacity:1}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(max-width:700px){
 .logo-wall{padding:48px 0 40px}
 .logo-wall-head{margin-bottom:28px}
 .logo-wall-head h2{font-size:30px}
 .logo-set{gap:40px;padding:0 20px;animation-duration:48s}
 .logo-row-reverse .logo-set{animation-duration:54s}
 .logo{height:44px}
 .logo img{height:26px;max-width:120px}
}
@media(prefers-reduced-motion:reduce){
 .logo-marquee{mask-image:none;-webkit-mask-image:none}
 .logo-row{width:auto;justify-content:center}
 .logo-set{animation:none;flex-wrap:wrap;justify-content:center;gap:28px 40px}
 .logo-set[aria-hidden="true"]{display:none}
}
.logo img.logo-tone{filter:grayscale(1) brightness(1.6)}
/* Very wide wordmarks (aspect > 5:1) get more width so they stay legible at marquee height. */
.logo img.logo-wide{max-width:230px}
@media(max-width:700px){.logo img.logo-wide{max-width:175px}}
/* Square or stacked marks (aspect < 1.8:1) get extra height so they read at marquee size. */
.logo img.logo-tall{height:44px}
@media(max-width:700px){.logo img.logo-tall{height:34px}}
/* Logo wall edge fade as overlays instead of a mask: WebKit drops repaints of masked, transform-animated content. */
.logo-marquee{mask-image:none;-webkit-mask-image:none;position:relative}
.logo-marquee:before,.logo-marquee:after{content:"";position:absolute;top:0;bottom:0;width:12%;max-width:160px;z-index:1;pointer-events:none}
.logo-marquee:before{left:0;background:linear-gradient(90deg,var(--navy),transparent)}
.logo-marquee:after{right:0;background:linear-gradient(270deg,var(--navy),transparent)}
.logo-set{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){.logo-marquee:before,.logo-marquee:after{display:none}.logo-set{will-change:auto;transform:none}}
.legal-page .legal-meta{font:12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 28px}
/* Contact form: optional label, consent row, honeypot, confirmation state. */
.contact-panel .optional{font-weight:400;color:var(--muted)}
.contact-panel label.check{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--muted);margin-top:4px}
.contact-panel label.check input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;display:inline-block}
.contact-panel .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-panel{position:relative}
.contact-done{border:1px solid var(--line);padding:30px;border-radius:18px;margin-top:36px}
.contact-done h2{font-size:clamp(34px,4vw,48px);margin-bottom:14px}
.contact-done .lead{max-width:60ch}
footer .footer-contact-link{display:block;margin-top:12px;font-size:14px;color:var(--dim)}
footer .footer-contact-link:hover{color:var(--accent-sky)}
/* Creative wall: dark band, three staggered columns, fade + "See more", hover captions, in-page lightbox. */
.wall{position:relative;background:var(--navy);color:var(--bone);padding:96px 0 72px;overflow:hidden;isolation:isolate}
.wall:before,.wall:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none}
.wall:before{width:620px;height:620px;left:-160px;top:520px;background:#F67A1C}
.wall:after{width:560px;height:560px;right:-140px;top:120px;background:#1273C8}
.wall-head{text-align:center;margin-bottom:48px}
.wall-head .eyebrow{color:var(--dim)}
.wall-head h2{margin:0 auto 18px;max-width:14ch}
.wall-head p{margin:0 auto;max-width:44ch;color:var(--dim)}
.wall-stage{position:relative;max-height:820px;overflow:hidden;transition:max-height .7s ease}
.wall-stage.is-open{max-height:none}
.wall-more{position:absolute;left:0;right:0;bottom:0;height:300px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:40px;background:linear-gradient(0deg,var(--navy) 30%,transparent);z-index:2}
.wall-stage.is-open .wall-more{display:none}
.btn-outline{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:12px 30px;border:1.5px solid var(--bone);border-radius:999px;background:transparent;color:var(--bone);font:600 16px var(--body);cursor:pointer;transition:background .2s ease,color .2s ease,transform .15s ease}
.btn-outline:after{content:"↓";font-size:18px;display:inline-block;animation:wall-nudge 1.8s ease-in-out infinite}
/* Affordance: the arrow dips and a thin ring breathes outward every few seconds, so the button reads as
   "there is more below" without copy. Both stop on hover and under prefers-reduced-motion (global rule). */
.btn-outline{position:relative}
.btn-outline:before{content:"";position:absolute;inset:-1.5px;border-radius:999px;border:1.5px solid var(--bone);opacity:0;animation:wall-ring 2.8s ease-out infinite;pointer-events:none}
.btn-outline:hover:before,.btn-outline:hover:after,.btn-outline:focus-visible:before{animation:none}
@keyframes wall-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes wall-ring{0%{transform:scale(1);opacity:.5}65%,100%{transform:scale(1.22,1.45);opacity:0}}
.btn-outline:hover{background:var(--bone);color:var(--navy);transform:translateY(-1px)}
.btn-outline:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.wall-grid{display:grid;grid-template-columns:repeat(3,min(360px,28vw));gap:24px;justify-content:center;padding-top:120px}
.wall-col{display:flex;flex-direction:column;gap:24px}
.wall-col:nth-child(2){margin-top:-120px}
.wall-card{position:relative;display:block;width:100%;padding:0;border:0;background:var(--navy2,#162434);border-radius:16px;overflow:hidden;cursor:zoom-in;color:var(--bone);aspect-ratio:1/1;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.wall-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wall-card:hover img,.wall-card:focus-visible img{transform:scale(1.03)}
.wall-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.wall-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(0deg,rgba(15,27,42,.9),transparent);display:flex;justify-content:space-between;align-items:end;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;text-align:left}
.wall-cap b{font:600 16px/1.2 var(--body)}
.wall-cap small{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.wall-card:hover .wall-cap,.wall-card:focus-visible .wall-cap{opacity:1;transform:none}
.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;color:var(--bone)}
.lightbox::backdrop{background:rgba(8,14,22,.92)}
.lightbox[open]{display:grid;place-items:center}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(92vw,980px)}
.lightbox img{max-width:min(92vw,980px);max-height:78vh;border-radius:14px;background:#fff;object-fit:contain}
.lightbox figcaption{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.lightbox-close,.lightbox-nav{position:fixed;border:1px solid color-mix(in srgb,var(--bone) 30%,transparent);background:rgba(15,27,42,.7);color:var(--bone);width:48px;height:48px;border-radius:50%;font-size:28px;line-height:1;display:grid;place-items:center;cursor:pointer}
.lightbox-close{top:20px;right:20px}
.lightbox-nav{top:50%;transform:translateY(-50%)}
.lightbox-prev{left:20px}.lightbox-next{right:20px}
.lightbox-close:hover,.lightbox-nav:hover{background:var(--bone);color:var(--navy)}
@media(max-width:1000px){.wall-grid{grid-template-columns:repeat(3,30vw)}.wall-stage{max-height:700px}}
@media(max-width:700px){
 .wall{padding:64px 0 48px}
 .wall-head{margin-bottom:28px}
 .wall-stage{max-height:600px}
 .wall:before,.wall:after{width:360px;height:360px}
 .wall-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 20px}
 .wall-col{display:contents}
 .wall-col:nth-child(2){margin-top:0}
 .wall-card{box-shadow:0 16px 40px rgba(0,0,0,.35)}
 .wall-cap{display:none}
 .wall-more{height:220px;padding-bottom:24px}
 .btn-outline{font-size:15px;min-height:48px;padding:10px 24px}
 .lightbox-nav{width:42px;height:42px;top:auto;bottom:24px;transform:none}
 .lightbox-prev{left:24px}.lightbox-next{right:24px}

}
@media(prefers-reduced-motion:reduce){.wall-stage{transition:none}.wall-card img{transition:none}.wall-cap{transition:none}.btn-outline{transition:none}}
/* Hero record line (proof ledger) and the two-problems section. */
.hero-cw .record-line{display:flex;gap:56px;margin-top:56px;padding-top:32px;border-top:1px solid color-mix(in srgb,var(--bone) 18%,transparent)}
.record-stat b{display:block;font:600 clamp(36px,3.4vw,48px)/1 var(--display);letter-spacing:-.04em;color:var(--bone)}
.record-stat:first-child b{color:#F67A1C}
.record-stat small{display:block;margin-top:10px;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.hero-cw .hero-grid{align-items:center}
.problems{background:var(--paper)}
/* Problems: head like the services section (claim left, lead right), then one white stage holding a
   fork flowchart. Two shared steps (the shopper, the brand search) split into two columns, "your
   current agency" and "For The Record", the same numbered moments with different outcomes. On
   scroll-in the chart draws itself once, top to bottom (--i orders the pieces), then it is still;
   hovering a step lights its twin across the fork. Under 820px the columns interleave: each moment
   shows agency then FTR stacked, with a side label in the box, so nothing needs a click. */
.problems-head{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:40px}
.problems-head h2{font-size:clamp(36px,4.4vw,60px);margin:0;max-width:none}
.problems-head h2{max-width:21ch}.problems-head .beat{color:var(--blue)}
.problems-head>p{max-width:40ch;font-size:17px;margin:0 0 8px}
@media(max-width:1100px){.problems-head{display:block}.problems-head>p{margin:18px 0 0}}
.fork-panel{position:relative;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:36px clamp(20px,4vw,56px) 44px;--fork-gap:clamp(24px,4vw,64px);--t:.24s}
.fork-trunk,.fork-col ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center}
.fork-trunk{max-width:480px;margin:0 auto}
/* The two shared steps are the journey, not a column: pale blue with a blue number, under a mono preheader. */
.fork-pre{display:block;text-align:center;font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.fork-trunk .fork-step{background:var(--pale);border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.fork-trunk .fork-n{color:var(--blue)}
.fork-trunk .fork-step b{color:var(--navy)}
.fork-step{position:relative;width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:16px 22px 16px 60px;transition:border-color .25s,box-shadow .25s}
.fork-n{position:absolute;left:20px;top:21px;font:600 11px/1.4 var(--mono);letter-spacing:.12em;color:var(--muted)}
.fork-step b{display:block;font:600 18px/1.25 var(--body);color:var(--ink);text-wrap:balance}
.fork-step small{display:block;margin-top:6px;font:15px/1.4 var(--body);color:var(--muted)}
.fork-side{display:none}
.fork-link{display:block;position:relative;width:2px;height:36px;background:var(--line);transform-origin:top}
.fork-link:after{content:"";position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--navy);opacity:0}
.col-agency .fork-link:after{background:var(--muted)}.col-ftr .fork-link:after{background:var(--orange)}
@keyframes fork-run{0%{top:-4px;opacity:1}100%{top:calc(100% - 4px);opacity:0}}
.fork-runner{fill:var(--navy);opacity:0;offset-distance:0%}.run-f{fill:var(--orange)}
@keyframes fork-curve{0%{offset-distance:0%;opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes fork-land{0%{box-shadow:0 0 0 0 rgba(246,122,28,.6)}100%{box-shadow:0 0 0 22px rgba(246,122,28,0)}}
.fork-split{height:100px;width:calc(100% + var(--fork-gap));margin:0 calc(-.5*var(--fork-gap))}
.fork-split svg{width:100%;height:100%;display:block;overflow:visible}
.fork-split path{fill:none;stroke:var(--line);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.fork-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--fork-gap)}
.fork-col{min-width:0}
/* Column heads: mono kicker over a display-face name. The right one is the brand's signature line,
   "For The Record:" with the orange colon; the left name sits muted. */
.fork-head{display:block;text-align:center;margin:-6px 0 0;font:inherit;letter-spacing:0}
.fork-head small{display:block;font:600 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fork-head span{display:block;font:600 24px/1.1 var(--display);letter-spacing:-.03em;color:var(--muted)}
.col-ftr .fork-head small{color:var(--orange)}
.col-ftr .fork-head span{color:var(--ink)}
.col-ftr .fork-head span i{font-style:normal;color:var(--orange)}
.fork-head+ol:before{content:"";display:block;width:2px;height:28px;background:var(--line)}
.col-ftr .fork-step{background:var(--navy);border-color:var(--navy)}
.col-ftr .fork-step b{color:var(--bone)}.col-ftr .fork-step small{color:var(--dim)}.col-ftr .fork-n{color:var(--orange)}
.col-agency .fork-end{border-color:var(--ink);border-width:2px}
.col-ftr .fork-end{background:var(--orange);border-color:var(--orange)}
.col-ftr .fork-end b,.col-ftr .fork-end .fork-n{color:var(--ink)}.col-ftr .fork-end small{color:color-mix(in srgb,var(--ink) 72%,transparent)}
/* Twin highlight: hovering 03 on one side lights 03 on the other (site.js toggles is-pair on both and
   is-hover on the panel): the rest dims, both twins get their ring, and a dashed bridge joins them. */
.fork-panel.is-js.is-in.is-done .fork-step{transition:opacity .25s,border-color .25s,box-shadow .25s,transform .25s}
.fork-panel.is-hover .fork-step[data-k]:not(.is-pair){opacity:.38}
.col-agency .fork-step.is-pair{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.col-ftr .fork-step.is-pair{box-shadow:0 0 0 3px var(--orange)}
.col-agency .fork-step.is-pair:after{content:"";position:absolute;left:100%;top:50%;width:var(--fork-gap);margin-top:-1px;border-top:2px dashed var(--navy);pointer-events:none}
/* One-shot draw on scroll-in: under is-js the pieces snap hidden (no transition), and once is-in lands
   they appear in --i order; the transition lives on the shown state so only the reveal animates. A runner
   dot leads each connector and the fork curves as they draw; the FTR ending lands with one soft pulse. */
.fork-panel.is-js:not(.is-in) .fork-step,.fork-panel.is-js:not(.is-in) .fork-head,.fork-panel.is-js:not(.is-in) .fork-pre{opacity:0;transform:translateY(12px) scale(.97);transition:none}
.fork-panel.is-js:not(.is-in) .fork-link{transform:scaleY(0);transition:none}
.fork-panel.is-js:not(.is-in) .fork-split path{stroke-dashoffset:1;transition:none}
.fork-panel.is-js.is-in .fork-pre{transition:opacity .6s ease,transform .6s ease}
.fork-panel.is-js.is-in .fork-step,.fork-panel.is-js.is-in .fork-head{transition:opacity .6s ease calc(var(--i)*var(--t)),transform .6s cubic-bezier(.2,.7,.3,1) calc(var(--i)*var(--t)),border-color .25s,box-shadow .25s}
.fork-panel.is-js.is-in .fork-link{transition:transform .5s ease calc(var(--i)*var(--t))}
.fork-panel.is-js.is-in .fork-split path{transition:stroke-dashoffset .9s ease calc(var(--i)*var(--t))}
.fork-panel.is-js.is-in .fork-link:after{animation:fork-run .55s linear calc(var(--i)*var(--t)) 1 forwards}
.fork-panel.is-js.is-in .fork-runner{animation:fork-curve .9s ease calc(3*var(--t)) 1 forwards}
.fork-panel.is-js.is-in .col-ftr .fork-end{animation:fork-land 1.1s ease-out calc(12*var(--t)) 1}
/* Under 820px the two columns stay side by side, narrower: column pills as headers, numbers and side
   labels dropped (the pills carry them), type a step smaller. The fork and the connectors stay, so the
   journey still draws top to bottom; twins and their connectors share grid rows (li order inside each
   column: step, link, step, link, ... placed by nth-of-type). */
@media(max-width:820px){
 .fork-panel{--fork-gap:8px}
 .fork-trunk{max-width:none}
 .fork-split{height:64px}
 .fork-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--fork-gap);row-gap:0;margin-top:-6px}
 .fork-col,.fork-col ol{display:contents}
 .fork-head{margin:0}.fork-head small{font-size:9px;margin-bottom:4px}.fork-head span{font-size:17px}
 .col-agency .fork-head,.col-agency ol:before,.col-agency ol>li{grid-column:1}
 .col-ftr .fork-head,.col-ftr ol:before,.col-ftr ol>li{grid-column:2}
 .fork-head{grid-row:1}.fork-head+ol:before{grid-row:2;height:22px;justify-self:center}
 .fork-col ol>li:nth-of-type(1){grid-row:3}.fork-col ol>li:nth-of-type(2){grid-row:4}.fork-col ol>li:nth-of-type(3){grid-row:5}.fork-col ol>li:nth-of-type(4){grid-row:6}.fork-col ol>li:nth-of-type(5){grid-row:7}.fork-col ol>li:nth-of-type(6){grid-row:8}.fork-col ol>li:nth-of-type(7){grid-row:9}
 .fork-col .fork-link{justify-self:center;height:26px}
 .fork-col .fork-step{padding:12px 10px}.fork-col .fork-n,.fork-side{display:none}
 .fork-col .fork-step b{font-size:13px}.fork-col .fork-step small{font-size:12px;margin-top:4px;line-height:1.35}
 .fork-trunk .fork-step{padding:14px 16px 14px 48px;border-radius:12px}.fork-trunk .fork-n{left:16px;top:17px}.fork-trunk .fork-step b{font-size:15px}
 .fork-trunk .fork-link{height:28px}
 .col-agency .fork-step.is-pair:after{display:none}
}
/* After the draw-in, one dot ripples down the whole journey every 8s: trunk, fork, then each column.
   Sparse on purpose; a constant stream read as noise. */
.fork-link:before{content:"";position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:inherit;opacity:0}
.fork-trunk .fork-link:before{background:var(--navy)}.col-agency .fork-link:before{background:var(--muted)}.col-ftr .fork-link:before{background:var(--orange)}
@keyframes fork-ripple{0%{top:-4px;opacity:0}2%{opacity:.9}7%{top:calc(100% - 4px);opacity:0}100%{top:calc(100% - 4px);opacity:0}}
@keyframes fork-ripple-curve{0%{offset-distance:0%;opacity:0}2%{opacity:.9}9%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
.fork-panel.is-js.is-in.is-done .fork-trunk .fork-link:before{animation:fork-ripple 8s linear .2s infinite}
.fork-panel.is-js.is-in.is-done .fork-runner{animation:fork-ripple-curve 8s linear .75s infinite}
.fork-panel.is-js.is-in.is-done .fork-col .fork-link:before{animation:fork-ripple 8s linear calc(1.5s + (var(--i) - 6)*.3s) infinite}
@media(prefers-reduced-motion:reduce){.fork-panel.is-js:not(.is-in) .fork-pre,.fork-panel.is-js:not(.is-in) .fork-step,.fork-panel.is-js:not(.is-in) .fork-head,.fork-panel.is-js:not(.is-in) .fork-link,.fork-panel.is-js:not(.is-in) .fork-split path{opacity:1;transform:none;stroke-dashoffset:0}.fork-panel.is-js.is-in .fork-step,.fork-panel.is-js.is-in .fork-head,.fork-panel.is-js.is-in .fork-link,.fork-panel.is-js.is-in .fork-split path{transition:none}.fork-panel.is-js.is-in .fork-link:after,.fork-panel.is-js.is-in .fork-link:before,.fork-panel.is-js.is-in .fork-runner,.fork-panel.is-js.is-in .col-ftr .fork-end{animation:none!important}}
.problems-note{display:none}
@media(max-width:1000px){.hero-cw .record-line{gap:36px}}
@media(max-width:700px){
 .hero-cw .record-line{justify-content:center;gap:24px;margin-top:40px;padding-top:24px}
 .record-stat b{font-size:30px}
 .record-stat small{font-size:10px;margin-top:8px;max-width:11ch;margin-left:auto;margin-right:auto}
 .problems-head{display:block;margin-bottom:28px}
 .problems-head h2{font-size:34px}
 .problems-head .beat{display:inline}
 .problems-head>p{margin:18px 0 0;font-size:16px}
 .fork-panel{padding:22px 16px 26px;border-radius:16px}
}
@media(max-width:700px){.record-stat{text-align:center}.record-stat small{max-width:12ch}}

/* Team web (replaces the founder portrait). Nodes are absolutely positioned on a 1000x860 canvas
   from scripts/team-prep.py; the SVG lines use the same canvas. Disc colours are CSS, not baked into
   the cut-outs, so pods can be recoloured here. Under 700px the web becomes a grid grouped by pod. */
.team .team-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:5%;align-items:center}
.team-copy .lead+.lead{margin-top:0}
/* "experts": a hand-drawn lime stroke under the word, the hero emphasis colour, no change to the letters. */
.team-mark{position:relative;display:inline-block;padding:0 .02em}
.team-mark:after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.06em;height:.2em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 40 6, 90 4, 197 10 M6 20 C 60 13, 120 12, 190 17' fill='none' stroke='%23C6F431' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none}
.team{position:relative;overflow:hidden}
/* Colour fields like the creative wall's, but painted as radial gradients on the section itself rather
   than blurred pseudo-elements: iOS Safari composites the web (transformed, animating children) as its
   own layer and does not blend filter:blur() layers beneath it, which left a flat navy rectangle. */
.team{background-color:var(--navy);background-image:
 radial-gradient(400px circle at calc(100% - 190px) 170px,rgba(18,115,200,.42),rgba(18,115,200,.3) 45%,rgba(18,115,200,0) 100%),
 radial-gradient(360px circle at calc(66% - 280px) calc(100% - 60px),rgba(246,122,28,.42),rgba(246,122,28,.3) 45%,rgba(246,122,28,0) 100%),
 radial-gradient(280px circle at 30px calc(36% + 210px),rgba(198,244,49,.22),rgba(198,244,49,.14) 45%,rgba(198,244,49,0) 100%);
 background-repeat:no-repeat}
.team-web{position:relative;aspect-ratio:1000/860;width:100%}
.team-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Entrance state is driven by site.js: --o fades nodes in, lines fade once the mark has appeared. */
.team-node,.team-pod-label{opacity:var(--o,1)}
.team-web.is-js .team-lines{transition:opacity 1.4s ease}
.team-web.is-js .team-lines{opacity:0}
.team-web.is-js.is-live .team-lines{opacity:1}
.team-lines line{stroke:var(--bone);stroke-opacity:.22;stroke-width:1.5;vector-effect:non-scaling-stroke}
.team-lines line.cross{stroke-opacity:.1;stroke-dasharray:3 5}
.team-lines circle{fill:var(--bone);fill-opacity:.5}
.team-pod{display:contents;margin:0;padding:0;list-style:none}
.team-pod-label{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,14px);font:10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;pointer-events:none}
.team-node{position:absolute;--k:1;left:calc(var(--x) - var(--s)*var(--k)/2);top:calc(var(--y) - var(--s)*var(--k)*.65);width:calc(var(--s)*var(--k));--c:var(--bone);outline:0}
.team-disc{display:block;position:relative;width:100%;aspect-ratio:400/460;transition:transform .25s}
.team-disc:before{content:"";position:absolute;left:0;right:0;bottom:0;aspect-ratio:1;border-radius:50%;background:var(--c)}
.team-disc img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.team-node:hover .team-disc,.team-node:focus-visible .team-disc{transform:scale(1.08)}
.team-node:focus-visible .team-disc:before{box-shadow:0 0 0 3px var(--navy),0 0 0 5px var(--bone)}
.team-role{position:absolute;left:50%;top:calc(100% + 8px);transform:translate(-50%,-4px);background:var(--paper);color:var(--ink);font:500 11px/1.2 var(--body);padding:7px 11px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3}
.team-node:hover,.team-node:focus-within{z-index:4}
.team-node:hover .team-role,.team-node:focus-within .team-role,.team-node.is-peek .team-role{opacity:1;transform:translate(-50%,0)}
.team-node.is-peek{z-index:4}
/* Centre mark: a char-surface disc with a faint rim and a second, wider halo ring, the monogram in bone. */
.team-brand{--c:#21252B;pointer-events:none}
.team-brand .team-disc:before{box-shadow:0 0 0 1px color-mix(in srgb,var(--bone) 30%,transparent),0 0 0 14px var(--navy),0 0 0 15px color-mix(in srgb,var(--bone) 14%,transparent)}
/* The node box is disc + 13% head-room above it; pin the mark to the disc area and nudge the letters
   so the F-T-R block (not the block plus the hanging colon) sits on the disc centre. */
.team-brand .team-disc img{position:absolute;top:13.04%;left:0;height:86.96%;padding:0 10% 0 22%;object-fit:contain}
/* Interactive graph: drag a face, hover to light up its pod. */
.team-node{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.team-node.is-drag{cursor:grabbing;z-index:5}
.team-node.is-drag .team-disc{transition:none}
.team-node .team-disc img{-webkit-user-drag:none;pointer-events:none}
.team-pod-label,.team-node .team-disc,.team-lines line,.team-lines circle{transition:opacity .25s,stroke-opacity .25s,fill-opacity .25s}
.team-web.is-focus .team-node:not(.is-hot):not(.is-near) .team-disc,.team-web.is-focus .team-pod-label:not(.is-near){opacity:.3}
.team-web.is-focus .team-lines line:not(.is-hot){stroke-opacity:.07}
.team-web.is-focus .team-lines line.is-hot{stroke-opacity:.75}
.team-web.is-focus .team-lines line.cross.is-hot{stroke-opacity:.45}
.team-web.is-focus .team-lines circle:not(.is-near){fill-opacity:.15}
.team-node.is-near .team-disc{transform:scale(1.03)}
.team-pod[data-pod=founder] .team-node{--c:var(--orange)}
.team-pod[data-pod=accounts] .team-node{--c:var(--blue)}
.team-pod[data-pod=ads] .team-node{--c:var(--accent-orange)}
.team-pod[data-pod=seo] .team-node{--c:var(--accent-lime)}
.team-pod[data-pod=creative] .team-node{--c:var(--accent-sky)}
.team-pod[data-pod=ops] .team-node{--c:var(--dim)}
@media(max-width:1000px){.team .team-grid{grid-template-columns:1fr;gap:40px}.team-web{max-width:720px;margin:0 auto;order:-1}}
@media(max-width:700px){
.team-web{width:calc(100% + 2*var(--pad));margin-left:calc(-1*var(--pad));max-width:none}
.team{background-image:radial-gradient(240px circle at calc(100% - 80px) 120px,rgba(18,115,200,.42),rgba(18,115,200,.3) 45%,rgba(18,115,200,0) 100%),radial-gradient(220px circle at 40% 100%,rgba(246,122,28,.42),rgba(246,122,28,.3) 45%,rgba(246,122,28,0) 100%),radial-gradient(180px circle at 0 55%,rgba(198,244,49,.22),rgba(198,244,49,.14) 45%,rgba(198,244,49,0) 100%)}
.team-web{aspect-ratio:1000/900}
.team-pod-label{display:none}
.team-node{--k:1.45}
.team-brand{--k:1.2}
/* Phones: faces are denser, so the lines get a little more weight than on desktop. */
.team-lines line{stroke-width:1.25;stroke-opacity:.3}
.team-lines line.cross{stroke-opacity:.14;stroke-dasharray:4 6}
.team-lines circle{fill-opacity:.6}
.team-role{font-size:10px;padding:6px 9px;top:auto;bottom:calc(100% + 6px)}
.team-node:hover .team-role,.team-node:focus-within .team-role,.team-node.is-peek .team-role{transform:translate(-50%,0)}
}

/* Section bridges: elements straddle the dark/light boundaries so the page reads as one continuous
   surface instead of stacked colour blocks. Each bridge is a real content element pulled across the edge. */
:root{--bridge:96px}
@media(max-width:1000px){:root{--bridge:72px}}
@media(max-width:700px){:root{--bridge:56px}}

/* 1. Problems -> creative wall: the two problem cards sit half on cream, half on navy.
   The section is transparent (body is already cream) and pulls the wall up underneath it, so the
   cards, which end at the section's bottom edge, hang over the navy by --bridge. */
.problems{position:relative;z-index:2;background:transparent;padding-bottom:0;margin-bottom:calc(-1*var(--bridge))}
.fork-panel{box-shadow:0 28px 64px rgba(15,27,42,.18)}
.wall{padding-top:calc(72px + var(--bridge))}

/* 2. Closing CTA: a blue card on the cream page, sitting clear of the footer. */
main>.final{background:var(--paper);padding-left:var(--pad);padding-right:var(--pad);position:relative}
.final>.wrap{max-width:calc(1540px - 2*var(--pad));background:var(--blue);border-radius:var(--radius);padding:72px clamp(28px,5vw,80px);box-shadow:0 28px 64px rgba(15,27,42,.25)}
@media(max-width:700px){.final>.wrap{padding:44px 24px;border-radius:16px}}