:root { --ink:#0a1830; --ink-2:#142643; --slate:#516179; --blue:#1767e8; --blue-dark:#0c4fc1; --cyan:#49c7e8; --mist:#eaf2fb; --paper:#f7f8fa; --white:#fff; --line:#d9e0e9; --line-dark:rgba(255,255,255,.17); --max:1200px; --radius:12px; --shadow:0 24px 70px rgba(10,24,48,.12); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font:16px/1.65 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
section[id] { scroll-margin-top:96px; }
img { max-width:100%; display:block; }
a { color:inherit; }
p { margin-top:0; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:10px 14px; color:var(--white); background:var(--ink); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
.shell { width:min(var(--max),calc(100% - 48px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(10,24,48,.1); background:rgba(246,249,252,.95); backdrop-filter:blur(14px); }
.nav { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.wordmark { display:inline-flex; align-items:center; gap:12px; color:var(--ink); font-size:1rem; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.wordmark-mark { width:36px; height:36px; display:grid; place-items:center; color:var(--white); background:var(--ink); font-size:1.05rem; font-weight:900; }
.wordmark-name b { color:var(--slate); font-weight:600; }
nav { display:flex; align-items:center; gap:28px; }
nav > a:not(.button) { color:#394960; font-size:.87rem; font-weight:700; text-decoration:none; }
nav > a:hover { text-decoration:underline; text-underline-offset:5px; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:12px 21px; border:1px solid var(--blue-dark); border-radius:7px; color:var(--white); background:var(--blue-dark); font-weight:800; text-decoration:none; box-shadow:0 8px 24px rgba(12,79,193,.17); }
.button:hover { background:var(--ink); border-color:var(--ink); }
.button-small { min-height:44px; padding:9px 15px; font-size:.84rem; }
.hero { position:relative; overflow:hidden; padding:clamp(82px,9vw,126px) 0; background:linear-gradient(130deg,#f3f6fa 0%,#f5f8fb 58%,#e8f1fa 100%); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(10,24,48,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(10,24,48,.032) 1px,transparent 1px); background-size:40px 40px; mask-image:linear-gradient(to right,transparent,black); }
.hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.32fr) minmax(310px,.68fr); gap:clamp(54px,9vw,126px); align-items:center; }
.eyebrow { margin:0 0 20px; color:var(--blue-dark); font-size:.74rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow-light { color:#78daf2; }
h1,h2 { margin:0; line-height:1.09; letter-spacing:-.035em; text-wrap:balance; }
h1 { max-width:760px; font-size:clamp(2.8rem,5vw,4.55rem); font-weight:750; }
h2 { max-width:780px; font-size:clamp(2rem,3.5vw,3.3rem); font-weight:710; }
h3 { margin:0; font-size:1.25rem; line-height:1.3; }
.lead { max-width:760px; margin:28px 0 0; color:#3f5068; font-size:clamp(1.13rem,1.8vw,1.36rem); line-height:1.58; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:34px; }
.text-link { color:var(--ink); font-weight:800; text-underline-offset:5px; }
.text-link span { margin-left:6px; }
.hero-panel { padding:34px; color:var(--white); background:var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); }
.panel-label { margin:0 0 42px; color:#8edff3; font-size:.72rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.panel-statement { margin-bottom:36px; font-size:clamp(1.45rem,2.3vw,2rem); font-weight:700; line-height:1.28; letter-spacing:-.03em; }
.principle-list { margin:0; }
.principle-list div { display:grid; grid-template-columns:46px 1fr; padding:15px 0; border-top:1px solid var(--line-dark); }
.principle-list dt { color:#78daf2; font-size:.75rem; font-weight:900; }
.principle-list dd { margin:0; color:#dce7f5; font-weight:650; }
.company-strip { border-block:1px solid var(--line); background:var(--paper); }
.company-strip-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.company-strip p { min-height:94px; display:flex; flex-direction:column; justify-content:center; margin:0; padding:20px 32px; border-left:1px solid var(--line); }
.company-strip p:last-child { border-right:1px solid var(--line); }
.company-strip strong { font-size:.94rem; }
.company-strip span { color:var(--slate); font-size:.82rem; }
.section { padding:clamp(82px,9vw,124px) 0; }
.intro-grid { display:grid; grid-template-columns:1fr .82fr; gap:clamp(54px,10vw,140px); align-items:start; }
.intro-copy p { color:var(--slate); }
.intro-copy .intro-lead { color:var(--ink); font-size:clamp(1.26rem,2.1vw,1.75rem); font-weight:650; line-height:1.5; letter-spacing:-.025em; }
.capabilities-section { color:var(--white); background:var(--ink); }
.section-heading { max-width:900px; margin-bottom:58px; }
.section-heading > p:last-child { max-width:700px; margin:24px 0 0; color:#c2d0e3; font-size:1.06rem; }
.capability-list { border-top:1px solid var(--line-dark); }
.capability-list article { display:grid; grid-template-columns:58px minmax(260px,.78fr) 1fr; gap:30px; align-items:start; padding:30px 0; border-bottom:1px solid var(--line-dark); }
.capability-list span { color:#78daf2; font-size:.76rem; font-weight:900; }
.capability-list h3 { font-size:1.32rem; }
.capability-list p { max-width:600px; margin:0; color:#b9c8db; }
.work-section { background:var(--paper); }
.section-heading-dark > p:last-child { color:var(--slate); }
.project-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; }
.project-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
.project-copy { padding:clamp(28px,4vw,46px); }
.project-type { margin-bottom:22px; color:var(--blue-dark); font-size:.7rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.project-card h3 { max-width:570px; margin-bottom:16px; font-size:clamp(1.55rem,2.7vw,2.55rem); letter-spacing:-.035em; }
.project-card p:not(.project-type) { color:var(--slate); }
.project-card-featured { display:grid; grid-template-rows:auto 290px; color:var(--white); background:var(--ink); grid-row:span 2; }
.project-card-featured .project-type { color:#78daf2; }
.project-card-featured p:not(.project-type) { color:#c1cee0; }
.project-visual { position:relative; overflow:hidden; min-height:290px; background:linear-gradient(135deg,#154fbd 0%,#2378e6 50%,#5bd1e8 100%); }
.project-visual::before,.project-visual::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.44); border-radius:50%; }
.project-visual::before { width:420px; height:420px; left:-70px; top:64px; }
.project-visual::after { width:260px; height:260px; right:-30px; top:-84px; }
.project-visual span { position:absolute; height:1px; background:rgba(255,255,255,.42); transform-origin:left center; }
.project-visual span:nth-child(1) { width:38%; left:16%; top:34%; transform:rotate(22deg); }
.project-visual span:nth-child(2) { width:31%; left:47%; top:49%; transform:rotate(-18deg); }
.project-visual span:nth-child(3) { width:27%; left:28%; top:69%; transform:rotate(-34deg); }
.project-visual span:nth-child(4) { width:16px; height:16px; left:48%; top:45%; border-radius:50%; background:#fff; box-shadow:0 0 0 10px rgba(255,255,255,.13); }
.text-link-light { color:var(--white); }
.project-card-journey { position:relative; min-height:430px; background:linear-gradient(145deg,#eaf7fc 0%,#fff 62%); }
.project-card-journey .project-copy { position:relative; z-index:1; }
.project-note { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); font-size:.88rem; }
.journey-symbol { height:112px; position:relative; overflow:hidden; background:linear-gradient(90deg,#1d6ce6,#4dc9e8); }
.journey-symbol span { position:absolute; border:1px solid rgba(255,255,255,.65); border-radius:50%; }
.journey-symbol span:nth-child(1) { width:190px; height:190px; top:22px; left:8%; }
.journey-symbol span:nth-child(2) { width:130px; height:130px; top:-62px; right:22%; }
.journey-symbol span:nth-child(3) { width:36px; height:36px; top:38px; right:9%; background:rgba(255,255,255,.2); }
.project-card-compact { background:var(--mist); }
.examples-section { background:var(--white); }
.split-heading { max-width:none; display:grid; grid-template-columns:1.15fr .65fr; gap:80px; align-items:end; }
.split-heading > p:last-child { color:var(--slate); }
.example-row { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.example-card { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--white); }
.example-card img { width:100%; aspect-ratio:1.18; object-fit:cover; }
.example-card > div { padding:18px; }
.example-card h3 { font-size:1rem; }
.demo-label { margin:0 0 9px; color:var(--blue-dark); font-size:.59rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.values-section { background:var(--mist); }
.values-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(60px,10vw,145px); align-items:start; }
.value-list { border-top:1px solid #cbd7e5; }
.value-list article { display:grid; grid-template-columns:.72fr 1fr; gap:30px; padding:27px 0; border-bottom:1px solid #cbd7e5; }
.value-list h3 { font-size:1.05rem; }
.value-list p { margin:0; color:var(--slate); }
.about-section { color:var(--white); background:var(--ink-2); }
.about-grid { display:grid; grid-template-columns:1fr .86fr; gap:clamp(60px,10vw,145px); align-items:start; }
.about-grid p { color:#c2cee0; }
.about-lead { color:var(--white) !important; font-size:clamp(1.35rem,2.3vw,1.95rem); font-weight:650; line-height:1.48; letter-spacing:-.025em; }
.contact-section { padding:clamp(78px,8vw,110px) 0; color:var(--white); background:var(--blue-dark); }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(60px,10vw,140px); align-items:end; }
.contact-grid p { color:#d9e8fb; }
.contact-link { color:var(--white); font-size:clamp(1.2rem,2.4vw,2rem); font-weight:760; text-underline-offset:8px; overflow-wrap:anywhere; }
.site-footer { padding:58px 0 24px; color:var(--white); background:#06101f; }
.footer-grid { display:flex; justify-content:space-between; gap:40px; padding-bottom:42px; }
.footer-wordmark { color:var(--white); }
.footer-wordmark .wordmark-mark { background:var(--blue); }
.footer-wordmark .wordmark-name b { color:#afbdd1; }
.footer-grid p { margin:12px 0 0; color:#92a3ba; font-size:.82rem; }
.footer-grid nav { align-items:flex-start; flex-wrap:wrap; }
.footer-grid nav a { color:#d5dfed; }
.footer-bottom { display:flex; justify-content:space-between; gap:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.13); color:#8798af; font-size:.76rem; }
.footer-bottom p { margin:0; }
.simple-page { min-height:70vh; padding:clamp(76px,10vw,130px) 0; }
.simple-page .page-copy { max-width:760px; }
.simple-page h1 { font-size:clamp(2.8rem,6vw,5.4rem); }
.simple-page .lead { margin-bottom:32px; }
.notice-card { margin-top:42px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
.notice-card p:last-child { margin-bottom:0; }
@media (max-width:980px) {
  .nav nav > a:not(.button) { display:none; }
  .hero-grid,.intro-grid,.values-grid,.about-grid,.contact-grid { grid-template-columns:1fr; }
  .hero-panel { max-width:640px; }
  .capability-list article { grid-template-columns:46px 1fr; }
  .capability-list article p { grid-column:2; }
  .project-grid { grid-template-columns:1fr; }
  .project-card-featured { grid-row:auto; }
  .split-heading { grid-template-columns:1fr; gap:26px; }
  .example-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  .shell { width:min(100% - 30px,var(--max)); }
  .nav { min-height:70px; }
  .wordmark-name { display:flex; flex-direction:column; line-height:1.02; }
  .wordmark-name b { font-size:.72rem; }
  .nav .button { min-height:44px; padding:8px 11px; font-size:.76rem; white-space:nowrap; }
  .hero { padding:64px 0 74px; }
  h1 { font-size:clamp(2.7rem,13vw,4rem); }
  h2 { font-size:clamp(2rem,10vw,3rem); }
  .actions { align-items:flex-start; flex-direction:column; }
  .actions .button { width:100%; }
  .company-strip-grid { grid-template-columns:1fr; }
  .company-strip p { min-height:74px; border-right:1px solid var(--line); }
  .capability-list article { grid-template-columns:38px 1fr; gap:14px; }
  .project-card-featured { grid-template-rows:auto 220px; }
  .example-row { grid-template-columns:1fr; }
  .value-list article { grid-template-columns:1fr; gap:10px; }
  .footer-grid,.footer-bottom { flex-direction:column; }
  .footer-grid nav { display:grid; grid-template-columns:repeat(2,1fr); gap:18px 24px; }
}
/* Post-launch conversion review */
.nav-service { color:var(--blue-dark); font-weight:850; }
.capability-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.capability-action { width:100%; min-width:0; overflow:hidden; align-self:start; border:1px solid rgba(255,255,255,.16); border-radius:12px; color:var(--white); background:rgba(255,255,255,.055); text-decoration:none; }
.capability-action > summary,.capability-action-featured { min-height:188px; display:grid; grid-template-columns:auto 1fr; gap:20px; padding:28px; cursor:pointer; list-style:none; }
.capability-action > summary::-webkit-details-marker { display:none; }
.capability-action-featured { border-color:#63cfe9; background:linear-gradient(135deg,rgba(51,132,225,.3),rgba(255,255,255,.06)); }
.capability-number { color:#78daf2; font-size:.75rem; font-weight:900; letter-spacing:.09em; }
.capability-action strong { display:block; margin-bottom:10px; color:var(--white); font-size:1.25rem; }
.capability-action small { min-height:50px; display:block; color:#b9c8da; font-size:.88rem; line-height:1.65; }
.capability-action b { display:block; margin-top:18px; color:#8ce5f7; font-size:.78rem; }
.capability-action[open] { border-color:#63cfe9; background:rgba(255,255,255,.09); }
.capability-detail { padding:0 28px 28px 66px; border-top:1px solid rgba(255,255,255,.12); }
.capability-detail p { margin:20px 0 14px; color:#c8d5e5; font-size:.88rem; }
.capability-detail a { color:#8ce5f7; font-weight:800; }
.example-row-clickable .example-card { display:block; color:inherit; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.example-row-clickable .example-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(12,27,51,.14); }
.example-row-clickable .example-card:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
.example-row-clickable .example-card img { height:180px; object-fit:cover; }
.example-row-clickable .example-card span { display:block; margin-top:14px; color:var(--blue-dark); font-size:.78rem; font-weight:850; }
.example-northline { border-top:5px solid #2f526e; }
.example-barber { border-top:5px solid #b44634; }
.example-maker { border-top:5px solid #a05a76; }
.example-sunny { border-top:5px solid #d5a516; }
.journey-note { margin-top:24px; padding:18px 20px; border-left:4px solid #75d9ee; background:rgba(255,255,255,.06); }
.journey-note a { color:#9be8f7; font-weight:800; text-underline-offset:4px; }
.journey-note > a:last-child { display:inline-block; margin-left:5px; white-space:nowrap; }
@media (max-width:800px) { .capability-action-grid { grid-template-columns:1fr; } .capability-action > summary,.capability-action-featured { min-height:0; } }
@media (max-width:680px) { .capability-action > summary,.capability-action-featured { padding:22px; } .capability-detail { padding:0 22px 22px; } .example-row-clickable .example-card img { height:160px; } }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }