/* Layout: an introduction followed by a full-width AI analyst showreel (the one bold element);
   below it a quiet single-column reading layout on graph-paper grey, sections separated by space, not boxes. */
:root{
  --paper:#EEF1EC;      /* graph-paper grey-green */
  --sheet:#FBFCFA;      /* raised surfaces */
  --ink:#16193A;        /* deep indigo ink */
  --ink-2:#4B5068;
  --ink-3:#7A7F94;
  --line:#D5DAD2;
  --cobalt:#2443D6;     /* primary accent */
  --cobalt-soft:#DDE3FB;
  --marigold:#E9A92B;   /* data highlight */
  --grid:rgba(22,25,58,.06);
  --font:"Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --code:ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#12142A; --sheet:#1A1D38; --ink:#ECEEF6; --ink-2:#B4B8CC; --ink-3:#868BA4; --line:#2B2F52;
  --cobalt:#7F95FF; --cobalt-soft:#262E66; --marigold:#F2BE58; --grid:rgba(236,238,246,.05); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#12142A; --sheet:#1A1D38; --ink:#ECEEF6; --ink-2:#B4B8CC; --ink-3:#868BA4; --line:#2B2F52;
  --cobalt:#7F95FF; --cobalt-soft:#262E66; --marigold:#F2BE58; --grid:rgba(236,238,246,.05); color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px))}
.read{max-width:38em}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}

/* top bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--paper)}
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:32px;height:64px}
.name{font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.top nav{display:flex;gap:26px;margin-left:auto;font-size:15.5px}
.top nav a{text-decoration:none;color:var(--ink-2)}
.top nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.mail{font-size:15px;font-weight:600;color:var(--cobalt);text-decoration:none}
@media (max-width:760px){.top nav{display:none}.mail{margin-left:auto}}

/* hero */
.hero{padding-block:72px 96px}
.hero h1{font-size:clamp(38px,5vw,62px);font-weight:800;max-width:15em}
.hero h1 .role{display:block;font-weight:500;color:var(--ink-2);margin-top:8px;font-size:.62em;letter-spacing:-.015em}
.hero .intro{margin-top:28px;display:grid;gap:16px;max-width:40em;font-size:19px;color:var(--ink-2)}
.hero .links{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.btn{display:inline-block;background:var(--cobalt);color:var(--sheet);font-weight:600;font-size:16px;padding:14px 24px;border-radius:10px;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.quiet{font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
.quiet:hover{text-decoration-color:var(--cobalt)}
.showreel{margin:56px 0 0;display:grid;gap:14px}
.vid.big{border-radius:16px;box-shadow:0 30px 70px -30px rgba(22,25,58,.55)}
.showreel figcaption{font-size:15.5px;color:var(--ink-3);max-width:46em}

/* sections */
section{padding-block:96px;border-top:1px solid var(--line)}
.sh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;margin-bottom:48px}
.sh h2{font-size:clamp(32px,4vw,48px);font-weight:800}
.sh p{color:var(--ink-2)}
@media (max-width:860px){.sh{grid-template-columns:1fr;gap:14px}}

/* case study */
.case .meta{color:var(--ink-3);font-size:15.5px;margin-top:12px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps > li{counter-increment:s;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;padding-block:36px;border-top:1px solid var(--line)}
.steps > li > div:first-child::before{content:counter(s);display:block;font-size:56px;font-weight:800;line-height:1;color:var(--cobalt);letter-spacing:-.04em;margin-bottom:10px;font-variant-numeric:tabular-nums}
.steps h3{font-size:24px;font-weight:700}
.steps .body{min-width:0;display:grid;gap:14px}
.steps .body > p{color:var(--ink-2)}
@media (max-width:860px){.steps > li{grid-template-columns:1fr;gap:12px}}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
.tbl th{text-align:left;font-weight:600;font-size:14.5px;color:var(--ink-3);padding:0 18px 10px 0;border-bottom:2px solid var(--ink)}
.tbl td{padding:12px 18px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
.tbl td.n{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.schema{max-width:620px}
.pages{display:flex;flex-wrap:wrap;gap:8px}
.pages button{font:500 15px var(--font);padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--sheet);color:var(--ink-2);cursor:pointer}
.pages button[aria-selected="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 -3px 0 var(--marigold)}
.frame{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0B1220;cursor:zoom-in}
.frame img{width:100%;aspect-ratio:16/9;object-fit:cover}
.vid{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#081428;aspect-ratio:16/9;max-width:100%}
.vid video{width:100%;height:100%}
.found{display:grid;gap:18px}
.found p{padding-left:18px;border-left:4px solid var(--marigold);color:var(--ink)}
.found b{font-weight:800}
.stack{color:var(--ink-3);font-size:15.5px}

/* gallery: one lead piece, then pairs */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
.gal figure{margin:0;display:grid;gap:14px;align-content:start}
.gal .lead{grid-column:1/-1}
.gal .shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;background:var(--line)}
.gal .shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gal figcaption{display:grid;gap:6px}
.gal h3{font-size:22px;font-weight:700}
.gal p{color:var(--ink-2);font-size:16.5px;max-width:36em}
.src{font-size:14px;color:var(--ink-3)}
.src i{font-style:normal;display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.metric{display:flex;flex-wrap:wrap;gap:6px}
.metric button{font:500 14px var(--font);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer}
.metric button[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:var(--sheet)}
@media (max-width:860px){.gal{grid-template-columns:1fr;gap:44px}}

/* services as a question list */
.svc{display:grid;gap:0}
.svc div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;padding-block:24px;border-top:1px solid var(--line)}
.svc dt{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.svc dd{margin:0;color:var(--ink-2)}
.svc dd span{display:block;margin-top:8px;font-size:15px;color:var(--ink-3)}
@media (max-width:860px){.svc div{grid-template-columns:1fr;gap:8px}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
.about .copy{display:grid;gap:18px;color:var(--ink-2)}
.about .copy p:first-child{color:var(--ink);font-size:21px;line-height:1.5}
.tools{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;font-size:16px}
.tools h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.tools p{color:var(--ink-2)}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:16px}.tools{grid-template-columns:1fr}}

/* contact */
.contact{background:var(--ink);color:var(--paper);border-top:0}
.contact h2{font-size:clamp(36px,5vw,60px);font-weight:800;max-width:14em}
.contact .lede{margin-top:18px;max-width:34em;opacity:.8;font-size:19px}
.rows{margin-top:40px;display:grid;max-width:720px}
.row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:16px;align-items:center;padding-block:16px;border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent)}
.row span:first-child{opacity:.65;font-size:15px}
.row .v{font-size:22px;font-weight:700;word-break:break-all;user-select:all}
.row button,.row a.go{font:600 14px var(--font);padding:8px 16px;border-radius:8px;border:1.5px solid color-mix(in srgb, var(--paper) 55%, transparent);background:transparent;color:var(--paper);cursor:pointer;text-decoration:none;white-space:nowrap}
.row button:hover,.row a.go:hover{border-color:var(--paper)}
@media (max-width:600px){.row{grid-template-columns:minmax(0,1fr) auto}.row span:first-child{grid-column:1/-1}}
footer{padding-block:26px;font-size:14px;color:var(--ink-3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}

/* image viewer */
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,12,30,.92);display:flex;align-items:center;justify-content:center;
  padding:max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.lb[hidden]{display:none}
.lb img{max-height:100%;border-radius:8px}
.lb button{position:absolute;top:calc(14px + env(safe-area-inset-top, 0px));right:calc(16px + env(safe-area-inset-right, 0px));font:600 15px var(--font);color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:8px;padding:8px 14px;cursor:pointer}

/* mobile menu: a button in the header opens a full-width list of sections */
.menu-btn{display:none;align-items:center;gap:10px;margin-left:auto;font:600 16px var(--font);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:10px;padding:0 14px;height:44px;cursor:pointer}
.menu-btn .bars{width:18px;height:12px;position:relative;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor;transition:opacity .15s}
.menu-btn[aria-expanded="true"] .bars{border-color:transparent}
.menu-btn[aria-expanded="true"] .bars::before,.menu-btn[aria-expanded="true"] .bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.menu-btn[aria-expanded="true"] .bars::before{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{transform:rotate(-45deg)}
.top .mobile-menu{display:none}
@media (max-width:760px){
  .top .mail{display:none}
  .menu-btn{display:inline-flex}
  .top .mobile-menu:not([hidden]){display:grid;padding:8px 24px 20px;border-top:1px solid var(--line);background:var(--paper)}
  .mobile-menu a{display:block;padding:14px 4px;font-size:19px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .mobile-menu a.cta{margin-top:16px;border:0;border-radius:10px;text-align:center;background:var(--cobalt);color:var(--sheet)}
  /* contact values: smaller on phones so the email address never breaks mid-word */
  .row .v{font-size:18px;word-break:normal;overflow-wrap:anywhere}
}
/* contact values are links (tap to email or call) */
.row a.v{color:inherit;text-decoration:none}
.row a.v:hover{text-decoration:underline;text-underline-offset:5px}

/* work teaser on the home page: four projects, two per row */
.teaser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
.teaser a.card{display:grid;gap:14px;text-decoration:none;align-content:start}
.teaser .shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--line)}
.teaser .shot img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s ease}
.teaser a.card:hover .shot img{transform:scale(1.02)}
.teaser h3{font-size:22px;font-weight:700}
.teaser p{color:var(--ink-2);font-size:16.5px;max-width:34em}
.teaser .go2{font-weight:600;font-size:15.5px;color:var(--cobalt)}
.allwork{margin-top:48px}
@media (max-width:860px){.teaser{grid-template-columns:1fr;gap:40px}}
@media (prefers-reduced-motion:reduce){.teaser .shot img{transition:none}}

/* projects page */
.phead{padding-block:64px 24px}
.phead h1{font-size:clamp(38px,5vw,60px);font-weight:800}
.phead p{margin-top:18px;max-width:40em;color:var(--ink-2);font-size:19px}
.jump{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.jump a{font-size:15px;font-weight:600;text-decoration:none;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--sheet);color:var(--ink-2)}
.jump a:hover{color:var(--ink);border-color:var(--ink-3)}
.proj{padding-block:80px}
.proj .top2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;margin-bottom:36px}
.proj h2{font-size:clamp(30px,3.6vw,44px);font-weight:800}
.proj .kind{margin-top:10px;color:var(--ink-3);font-size:15.5px}
.proj .q{font-size:21px;line-height:1.45;color:var(--ink)}
.proj .value{margin-top:22px;display:grid;gap:14px}
.proj .value p{padding-left:18px;border-left:4px solid var(--marigold);color:var(--ink-2)}
.proj .value b{color:var(--ink);font-weight:700}
.proj .viewer{display:grid;gap:12px}
.proj .foot{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14.5px;color:var(--ink-3)}
.proj .foot a{color:var(--ink-3)}
.proj .vidlink{margin-top:18px}

/* services: four areas in tabs, then how a project runs, then ways to work together */
.svc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.svc-tabs button{font:600 15.5px var(--font);padding:10px 16px;border-radius:9px;border:1px solid var(--line);background:var(--sheet);color:var(--ink-2);cursor:pointer}
.svc-tabs button[aria-selected="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 -3px 0 var(--marigold)}
.svc-panel[hidden]{display:none}
.svc-panel .intro2{color:var(--ink-3);font-size:16px;margin:18px 0 6px}
.svc dd a{color:var(--cobalt);font-weight:600;text-decoration:none;white-space:nowrap}
.svc dd a:hover{text-decoration:underline}
.sub{margin-top:72px}
.sub h3.t{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:24px}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:f}
.flow li{counter-increment:f;border-top:2px solid var(--ink);padding-top:16px}
.flow li::before{content:counter(f);display:block;font-size:40px;font-weight:800;line-height:1;color:var(--cobalt);margin-bottom:10px;font-variant-numeric:tabular-nums}
.flow h4{margin:0;font-size:18px;font-weight:700}
.flow p{margin-top:6px;color:var(--ink-2);font-size:16px}
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.models div{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:24px}
.models h4{margin:0;font-size:19px;font-weight:700}
.models .len{margin-top:4px;font-size:14.5px;color:var(--ink-3)}
.models p{margin-top:12px;color:var(--ink-2);font-size:16px}
@media (max-width:860px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.models{grid-template-columns:1fr}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}

/* about: the user's own text, with an expertise list and a closing sub-heading */
.about .copy ul{margin:0;padding-left:20px;display:grid;gap:12px}
.about .copy li{padding-left:4px}
.about .copy li b{color:var(--ink);font-weight:700}
.about .copy h3{margin:14px 0 0;font-size:21px;font-weight:700;color:var(--ink)}

/* skills: grouped lists, two columns on wide screens */
.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.skills div{padding-block:20px;border-top:1px solid var(--line)}
.skills h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.skills p{margin-top:6px;color:var(--ink-2);font-size:16.5px}
@media (max-width:860px){.skills{grid-template-columns:1fr}}
@media (max-width:860px){.proj .top2{grid-template-columns:1fr;gap:16px}}

/* wider page on large screens: less empty margin, while paragraphs keep their own reading width */
.wrap{max-width:1520px;padding-left:max(clamp(24px,4vw,64px), env(safe-area-inset-left, 0px));padding-right:max(clamp(24px,4vw,64px), env(safe-area-inset-right, 0px))}