html{scroll-behavior:smooth;background:#FAF8F5}
body{margin:0;background:#FAF8F5}
a{color:#1A4FB5}a:hover{color:#123C8C}
[hidden]{display:none !important}
.md{--paper:#FAF8F5;--paper-2:#F2EEE8;--ink:#14203D;--ink-2:#4D5669;--rule:#E3DED6;--cobalt:#1A4FB5;--cobalt-d:#123C8C;--violet:#7A45C8;--coral:#F28A4F;--coral-text:#A8461A;--navy:#14203D;--on-navy:#E8ECF4;--on-navy-2:#A9B3C7;
width:100%;background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
.md *{box-sizing:border-box}
.md h1,.md h2,.md h3{font-family:"Bricolage Grotesque","Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;font-weight:600;margin:0;letter-spacing:-0.02em;text-wrap:balance}
.md p{margin:0;text-wrap:pretty}
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.eyebrow .num{color:var(--coral-text)}
.md a:focus-visible,.md button:focus-visible,.md input:focus-visible,.md select:focus-visible,.md textarea:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.navy a:focus-visible,.navy button:focus-visible{outline-color:#9DB8FF}
/* skip link */
.skip{position:absolute;left:16px;top:-80px;z-index:10;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;font-size:16px;text-decoration:none}
.skip:focus{top:12px;color:#fff}
/* nav */
.nav{position:sticky;top:0;z-index:5;background:rgba(250,248,245,0.94);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.logo{display:inline-flex;align-items:center;padding:6px 0}
.logo img{height:43px;width:auto;display:block}
.links{display:flex;align-items:center;gap:32px}
.links a{white-space:nowrap;color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;padding:10px 0;background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;background-repeat:no-repeat;background-position:0 85%;transition:background-size .2s ease}
.links a:hover{background-size:100% 1.5px;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:600 16px/1 "Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cobalt-d);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:#8C8478}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(3px)}
.menu-btn{display:none;width:48px;height:48px;border-radius:12px;border:1.5px solid var(--rule);background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.mobile-panel{display:none}
/* brand bar */
.bar{display:block;height:6px;border-radius:3px;overflow:hidden;background:linear-gradient(90deg,#1450B3 0%,#1450B3 8%,#8B5AD8 38%,#F28A4F 58%,#14203D 80%,#14203D 100%)}
/* hero */
.hero{padding:112px 0 120px}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
.h1{font-size:76px;line-height:1.02;font-weight:600}
.grad-mayd{color:#5E5AC8}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.grad-mayd{background-image:linear-gradient(90deg,#0D4DB1 0%,#4F57C3 27%,#8C62D4 52%,#C66FE6 77%,#9A5AE9 79%,#E38279 93%,#F88D59 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:0.04em}}
@media (forced-colors: active){.grad-mayd{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
.reel{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#E3DED6;aspect-ratio:21 / 9}
.reel-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.reel-btn{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border-radius:999px;border:0;background:rgba(20,32,61,0.82);color:#fff;font:600 14px/1 "Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:background-color .18s ease}
.reel-btn:hover{background:#14203D}
.reel-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #1A4FB5}
.lede{font-size:21px;line-height:1.55;color:var(--ink-2);max-width:620px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.flag-card{display:flex;flex-direction:column;gap:20px;padding:32px;border-radius:20px;background:#fff;border:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.flag-card:hover{border-color:var(--ink);color:var(--ink)}
/* sections */
.section{padding:128px 0;border-top:1px solid var(--rule);scroll-margin-top:96px}
.h2{font-size:52px;line-height:1.06}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.shot{position:relative;border-radius:20px;border:1px solid var(--rule);background-color:var(--paper-2);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:32px 32px;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px}
.shot-label{background:var(--paper);border:1px dashed #B9B1A5;border-radius:12px;padding:16px 20px;font-size:15px;line-height:1.45;color:var(--ink-2);max-width:340px}
.shots{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:stretch}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink)}
.step{display:flex;flex-direction:column;gap:12px;padding:24px 24px 8px 0;border-right:1px solid var(--rule);margin-right:24px}
.step:last-child{border-right:0;margin-right:0}
.step h3{font-size:22px;line-height:1.2}
.step p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;line-height:1.2}
.chip-verify{border:1px dashed var(--coral-text);color:#8A3A12;background:#FFF6F0}
html:not([data-draft="true"]) .chip-verify{display:none}
.chip-dev{background:#E6EEFB;color:#163F91}
.chip-exp{background:#EFE8FB;color:#5B2E9E}
/* approach */
.navy{background:var(--navy);color:var(--on-navy);border-top:0}
.navy .eyebrow{color:var(--on-navy-2)}.navy .eyebrow .num{color:#F6A77A}
/* brand pattern: dot wave (Mayd colour run), one artwork per breakpoint */
#approach{background-image:url(assets/approach-pattern-desktop.png);background-size:cover;background-position:center;background-repeat:no-repeat}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.principle{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid rgba(232,236,244,0.24)}
.principle h3{font-size:26px;line-height:1.2;color:#fff}
.principle p{color:var(--on-navy-2);font-size:17px}
/* next */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--rule);background:#fff;color:var(--ink);font:500 15px/1 "Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}
.tab:hover{border-color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.next-list{display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
.next-item{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.3fr);gap:32px;padding:32px 0;border-bottom:1px solid var(--rule);align-items:start}
.next-item h3{font-size:26px;line-height:1.2}
.next-item p{color:var(--ink-2)}
/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
/* Maydock pattern B (pastel), supplied artwork; fades out behind the text column */
#contact{background:linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 34%,rgba(255,255,255,0.6) 52%,rgba(255,255,255,0) 72%) no-repeat,url(assets/contact-pattern.jpg) right -140px center / 1150px auto no-repeat,#FFFFFF}
.form{display:block;padding:40px;background:#fff;border:1px solid var(--rule);border-radius:20px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:15px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{font:400 17px/1.4 "Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:var(--paper);border:1.5px solid #8C8478;border-radius:12px;padding:12px 14px;min-height:48px;width:100%}
.field textarea{min-height:132px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#14203D}
.note{font-size:14px;color:var(--ink-2)}
.sent{display:flex;flex-direction:column;gap:12px;padding:8px 0}
/* footer */
.footer{padding:72px 0 48px;border-top:1px solid var(--rule)}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,2fr));gap:48px;align-items:start}
.foot-grid h3{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.foot-links{display:flex;flex-direction:column;gap:6px}
.foot-links a{color:var(--ink);text-decoration:none;font-size:16px;padding:6px 0}
.foot-links a:hover{text-decoration:underline;color:var(--ink)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-2)}
/* tablet (design: container query on the page root; here the same values as media queries) */
@media (max-width: 1119px){
#approach{background-image:url(assets/approach-pattern-tablet.png)}
.wrap{padding:0 40px}
.links{gap:28px;margin-left:auto}
.links a{white-space:nowrap;font-size:16px}
.nav-cta{display:none}
.hero{padding:88px 0 96px}
.hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}
.reel{aspect-ratio:16 / 9}
.h1{font-size:60px}
.section{padding:96px 0}
.h2{font-size:44px}
.sec-head,.contact-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.flow{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-top:0}
.step{border-right:0;margin-right:0;border-top:1.5px solid var(--ink);padding:20px 0 24px}
.shots{grid-template-columns:minmax(0,1fr) 200px}
.principles{grid-template-columns:minmax(0,1fr);gap:32px}
.next-item{grid-template-columns:minmax(0,1fr);gap:12px}
.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-brand{grid-column:1/-1}
}
/* phone */
@media (max-width: 719px){
#approach{background-image:url(assets/approach-pattern-phone.png)}
#contact{background:linear-gradient(180deg,rgba(255,255,255,0.25) 0%,#FFFFFF 46%) no-repeat,url(assets/contact-pattern.jpg) center top / 760px auto no-repeat,#FFFFFF}
.md{font-size:17px}
.wrap{padding:0 20px}
.nav-in{height:68px}
.logo img{height:35px}
.links,.nav-cta{display:none}
.menu-btn{display:inline-flex}
.mobile-panel{display:flex;flex-direction:column;gap:4px;padding:8px 20px 24px;border-top:1px solid var(--rule)}
.mobile-panel a.m-link{color:var(--ink);text-decoration:none;font-size:20px;font-weight:500;padding:12px 0;border-bottom:1px solid var(--rule)}
.hero{padding:56px 0 72px}
.h1{font-size:42px;line-height:1.05}
.lede{font-size:18px}
.cta-row .btn{width:100%}
.reel{border-radius:16px}
.reel-btn{right:12px;bottom:12px}
.reel-btn-label{display:none}
.reel-btn{padding:0;width:44px;justify-content:center}
.flag-card{padding:24px}
.section{padding:72px 0}
.h2{font-size:34px}
.flow{grid-template-columns:minmax(0,1fr)}
.shots{grid-template-columns:minmax(0,1fr)}
.shot-phone{display:none}
.form{padding:24px}
.form-grid{grid-template-columns:minmax(0,1fr)}
.form .btn{width:100%}
.foot-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.legal{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.md *{transition:none !important;animation:none !important}
}