* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
.hero { position:relative; isolation:isolate; height:100svh; min-height:820px; overflow:hidden; background:var(--paper); }
.masthead { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:30px 4.5%; }
.role { font-size:12px; letter-spacing:.03em; }
.wordmark { position:absolute; left:50%; transform:translateX(-50%); font-family:'Fraunces',Georgia,serif; font-size:48px; line-height:1; letter-spacing:-2.5px; font-weight:600; font-style:normal; }
.introduction { position:absolute; top:24%; left:4.5%; z-index:2; width:450px; }
.eyebrow { margin:0 0 20px; color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
h1 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(50px,4.5vw,72px); font-weight:800; line-height:.98; letter-spacing:-.055em; margin:0 0 28px; text-wrap:balance; }
h1 em { font-style:normal; color:var(--accent); }
.intro-copy { max-width:255px; font-size:15px; line-height:1.7; color:var(--muted); margin:0; }
.point-of-view { position:absolute; z-index:2; top:26%; right:4.5%; width:190px; }
.point-of-view .asterisk { display:block; color:var(--accent); font-size:36px; line-height:1; margin-bottom:16px; }
.point-of-view h2 { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:21px; line-height:1.4; letter-spacing:-.035em; margin:0 0 12px; }
.point-of-view p { font-size:12px; color:var(--muted); line-height:1.7; margin:0; }
.portrait { position:absolute; z-index:1; width:min(1180px,108vw,calc((max(820px,100svh) - 145px) * 1.5)); aspect-ratio:3 / 2; bottom:0; left:50%; transform:translateX(-50%); pointer-events:none; mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent); }
.portrait-inner { width:100%; height:100%; mask-image:linear-gradient(to bottom,transparent,#000 5px); }
.portrait img,.portrait svg { display:block; position:absolute; inset:0; width:100%; height:100%; }
.portrait svg { overflow:visible; }
.live-base, .eye-layer { visibility:hidden; }
.eyes-ready .live-base, .eyes-ready .eye-layer { visibility:visible; }
.eyes-ready .still { visibility:hidden; }
@media (min-width:1600px) {
  .introduction { left:8%; }
  .point-of-view { right:8%; }
}
@media (max-width:1100px) and (min-width:701px) {
  .introduction { width:300px; top:17%; }
  .point-of-view { top:18%; width:150px; }
  .portrait { width:min(1180px,125vw,calc((max(820px,100svh) - 155px) * 1.5)); max-width:125vw; }
  h1 { font-size:54px; }
}
@media (max-width:700px) {
  .hero { min-height:0; height:auto; }
  .masthead { padding:25px 6%; align-items:flex-start; }
  .wordmark { position:static; transform:none; font-size:40px; order:-1; }
  .role { font-size:10px; line-height:1.6; text-align:right; max-width:88px; }
  .introduction { position:relative; top:auto; left:auto; width:auto; text-align:center; margin:24px auto 0; padding:0 24px; }
  .eyebrow { margin-bottom:14px; font-size:10px; }
  h1 { font-size:clamp(44px,10.7vw,68px); max-width:620px; margin:0 auto 18px; line-height:.98; }
  h1 br { display:block; }
  .intro-copy { font-size:13px; line-height:1.6; max-width:285px; margin:auto; }
  .point-of-view { display:none; }
  .portrait { position:relative; width:780px; max-width:none; bottom:auto; margin-top:34px; }
  .portrait-inner { mask-image:linear-gradient(to bottom,transparent,#000 5px); }
}
@media (max-width:380px) {
  h1 { font-size:42px; }
  .hero { min-height:0; }
  .portrait { width:735px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; }
}
.wordmark { color:var(--accent); text-decoration:none; }
.site-nav { display:flex; gap:28px; margin-left:auto; align-items:center; }
.site-nav a { color:var(--ink); text-decoration:none; font-size:13px; padding:10px 0; }
.site-nav a:hover,.site-nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:6px; }
@media(max-width:700px) {
  .masthead { flex-wrap:wrap; align-items:center; gap:20px; }
  .masthead .role { display:none; }
  .site-nav { gap:22px; }
  .site-nav a { font-size:12px; }
}
.page-shell { min-height:100svh; }
.page-content { max-width:1000px; margin:100px auto; padding:0 6%; }
.page-content h1 { font-size:clamp(48px,7vw,90px); max-width:850px; }
.page-content .lead { max-width:540px; color:var(--muted); font-size:18px; line-height:1.7; }
@media(max-width:700px) {
  .page-content { margin:65px auto; }
  .page-content h1 { text-align:left; }
}
.wordmark { font-family:'Yellowtail',cursive; font-size:39px; font-weight:400; letter-spacing:0; white-space:nowrap; }
.section-wrap { max-width:1280px; margin:0 auto; padding:100px 5%; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:45px; }
.section-head h2,.contact-section h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(32px,4vw,56px); line-height:1.12; letter-spacing:-.05em; margin:0; font-weight:700; }
.section-head p { max-width:310px; line-height:1.7; color:var(--muted); font-size:15px; margin:0; }
.work-section { background:#eee8f2; }
.text-link { display:inline-block; margin-top:32px; color:var(--accent); text-decoration:underline; text-underline-offset:6px; font-size:14px; font-weight:600; }
.strengths { background:#faf6ef; }
.strength-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; margin-top:50px; }
.strength-grid article { border-top:1px solid var(--line); padding-top:24px; }
.strength-grid span { color:var(--accent); font-size:12px; }
.strength-grid h3 { font-size:22px; letter-spacing:-.03em; margin:20px 0 12px; }
.strength-grid p { line-height:1.8; color:var(--muted); font-size:15px; }
.process { background:#f1ecf5; }
.contact-section { background:#f5eee5; text-align:center; }
.contact-section p:not(.eyebrow) { color:var(--muted); max-width:510px; margin:25px auto; line-height:1.8; font-size:16px; }
.contact-section .text-link { margin-top:0; }
.site-footer { padding:28px 5%; display:flex; justify-content:space-between; align-items:center; gap:22px; background:#f5eee5; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.site-footer a { color:inherit; }
@media(max-width:1000px) {
  .wordmark { font-size:33px; }
}
@media(max-width:700px) {
  .masthead { justify-content:center; gap:10px; }
  .wordmark { width:100%; text-align:center; font-size:39px; }
  .site-nav { margin:0 auto; }
  .section-wrap { padding:64px 6%; }
  .section-head { display:block; }
  .section-head p { margin-top:22px; }
  .strength-grid { grid-template-columns:1fr; gap:36px; }
  .site-footer { align-items:flex-start; }
}
/* Selected hand-lettered signature, option 1. */
.masthead { background:var(--paper); }
.wordmark { display:block; width:280px; height:auto; line-height:0; mix-blend-mode:multiply; }
@media(max-width:700px) {
  .wordmark { width:240px; margin:0 auto; flex:0 0 240px; }
  .masthead { flex-wrap:wrap; }
  .site-nav { flex-basis:100%; justify-content:center; }
}
/* Upright wordmark paired with the original expressive heading family. */
.wordmark { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:30px; letter-spacing:-.035em; line-height:1.1; color:#302338; width:auto; font-style:normal; mix-blend-mode:normal; }
@media(max-width:1000px) {
  .wordmark { font-size:28px; }
}
@media(max-width:700px) {
  .wordmark { width:auto; flex:0 0 auto; font-size:30px; }
}
/* Curated project collection */
.project-collection { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; }
.project-board { color:#302338; text-decoration:none; display:flex; flex-direction:column; border-radius:26px; padding:26px; background:#e8dfed; border:1px solid rgba(48,35,56,.09); }
.board-rotary { grid-row:span 2; background:#e6dcec; }
.board-autosync { background:#f1e0d5; }
.board-top { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; }
.board-top>span:last-child { font-size:24px; }
.board-art { padding:38px 0 30px; }
.board-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.board-art h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(29px,3vw,46px); line-height:1.04; letter-spacing:-.045em; margin:18px 0 26px; }
.board-rotary .board-art { flex:1; display:flex; flex-direction:column; justify-content:center; padding:70px 0; }
.board-rotary h3 { font-size:clamp(40px,4vw,62px); }
.board-bottom { display:flex; align-items:end; gap:24px; justify-content:space-between; }
.board-bottom p { max-width:290px; line-height:1.6; font-size:13px; margin:0; }
.board-open { flex-shrink:0; font-size:12px; font-weight:600; }
.project-board:hover { border-color:#795b88; }
.project-board:focus-visible { outline:3px solid #795b88; outline-offset:5px; }
.work-section { background:#faf6ef; }
@media(max-width:800px) {
  .project-collection { grid-template-columns:1fr; }
  .board-rotary { grid-row:auto; }
  .board-rotary .board-art { padding:40px 0; }
  .board-art h3,.board-rotary h3 { font-size:40px; }
}
@media(max-width:500px) {
  .project-board { padding:22px; }
  .board-bottom { display:block; }
  .board-open { display:block; margin-top:22px; }
}
.page-content { max-width:1200px; width:90%; }
/* Interaction studies and purposeful motion. */
.project-board { transition:transform .35s ease,box-shadow .35s ease,border-color .2s; }
.project-board:hover,.project-board:focus-visible { transform:translateY(-7px); box-shadow:0 20px 45px #30233815; }
.board-open { transition:transform .3s; }
.project-board:hover .board-open { transform:translateX(4px); }
.lab-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.lab-grid h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(38px,4.5vw,64px); line-height:1.02; letter-spacing:-.045em; margin:20px 0; }
.lab-grid p { line-height:1.7; max-width:430px; }
.thinking-tabs { display:flex; gap:10px; margin-bottom:25px; }
.thinking-tabs button { flex:1; padding:19px 12px; border:1px solid #cbbfd0; background:transparent; border-radius:14px; cursor:pointer; }
.thinking-tabs button[aria-selected=true] { background:#302338; color:#fff; border-color:#302338; }
.thinking-panel { display:grid; grid-template-columns:1fr 1fr; gap:45px; min-height:260px; align-items:center; }
.thinking-panel h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:34px; letter-spacing:-.03em; margin:0 0 15px; }
.thinking-panel p { line-height:1.7; max-width:470px; }
.process-art { background:#faf6ef; border:1px solid #d7cddc; border-radius:22px; padding:30px; display:grid; gap:12px; }
.process-art span { padding:14px 18px; background:#e6dcec; border-radius:10px; font-size:14px; }
.process-art span:nth-child(2) { margin-left:22px; background:#f1e0d5; }
.process-art small { color:#6c6372; margin-top:10px; }
.strength-grid details { border-top:1px solid #d6cbdc; margin-top:25px; padding-top:18px; }
.strength-grid summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; font-weight:600; font-size:14px; }
.strength-grid details[open] summary span { transform:rotate(45deg); }
.strength-grid details p { font-size:14px; line-height:1.7; }
.contact-section .text-link { display:inline-block; transition:transform .25s; }
.contact-section .text-link:hover { transform:translateY(-4px); }
@media(prefers-reduced-motion:no-preference) {
  .thinking-panel.refresh { animation:case-in .3s ease both; }
  .reveal-pending { opacity:0; transform:translateY(24px); }
  .reveal-ready { transition:opacity .65s ease,transform .65s ease; opacity:1; transform:none; }
  @keyframes case-in{ from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media(max-width:760px) {
  .lab-grid,.thinking-panel { grid-template-columns:1fr; gap:30px; }
  .thinking-tabs { gap:6px; }
  .thinking-tabs button { font-size:12px; padding:16px 7px; }
  .thinking-panel { min-height:0; }
}
.board-rotary .board-art { padding:30px 0; justify-content:flex-start; }
.process-art { gap:8px; }
.process-node { border:1px solid #d2c3db; border-radius:12px; background:#e8ddef; color:#302338; text-align:left; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; font-size:14px; transition:transform .2s,background .2s; }
.process-node:hover { transform:translateX(4px); }
.process-node[aria-expanded=true] { background:#302338; color:#faf6ef; }
.process-node[aria-expanded=true] b { transform:rotate(45deg); }
.node-insight { padding:12px 16px 20px; font-size:14px; line-height:1.65; }
@media(prefers-reduced-motion:no-preference) {
  .node-insight:not([hidden]) { animation:case-in .3s ease both; }
}
@media(max-width:1000px) {
  .lab-grid { gap:32px; }
}
/* Compact collection: each project occupies a single row. */
.project-collection { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.board-rotary { grid-row:auto; }
.board-art,.board-rotary .board-art { flex:1; padding:24px 0; display:block; }
.board-art h3,.board-rotary h3 { font-size:clamp(28px,2.6vw,40px); }
.board-bottom { display:block; }
.board-open { display:block; margin-top:20px; }
@media(max-width:1000px) {
  .project-collection { grid-template-columns:1fr; }
  .board-art,.board-rotary .board-art { flex:none; }
  .project-board { padding:28px; }
}
.process-art,.strengths,.contact-section { isolation:isolate; }
.project-card-image { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top left; margin-bottom:25px; border-radius:14px; border:1px solid rgba(48,35,56,.12); background:#fff; }
.process-portrait { display:block; width:100%; aspect-ratio:1; background-size:300% 100%; background-repeat:no-repeat; border-radius:18px; margin-bottom:20px; background-color:#f8f7fc; }
.process-portrait-0 { background-position:0% center; }
.process-portrait-1 { background-position:50% center; }
.process-portrait-2 { background-position:100% center; }
.thinking-panel { align-items:start; }
.process-art { padding:24px; }
/* Simplified project cards and a single composed process panel. */
.board-top>span:first-child { font-size:13px; }
.board-art h3,.board-rotary h3 { margin:20px 0 0; }
.board-open { text-decoration:underline; text-underline-offset:5px; }
.thinking-panel { grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:44px; align-items:start; background:#faf7f2; border:1px solid #ded5e1; border-radius:24px; padding:32px; }
.process-visual { align-self:start; }
.process-visual .process-portrait { width:100%; max-width:310px; margin:0 auto; }
.process-content h3 { margin-top:0; }
.process-content>p { max-width:none; margin-bottom:24px; }
.process-content .process-art { padding:0; border:0; background:transparent; border-radius:0; }
@media(max-width:760px) {
  .thinking-panel { grid-template-columns:1fr; gap:24px; padding:24px; }
  .process-visual .process-portrait { width:150px; margin:0 auto; }
  .process-content h3 { font-size:28px; }
}
.language-switch { display:inline-flex; gap:2px; padding:3px; border:1px solid #b7a9c2; border-radius:25px; margin-left:12px; flex-shrink:0; }
.language-switch button { border:0; border-radius:20px; padding:7px 10px; background:transparent; cursor:pointer; font:inherit; font-size:11px; font-weight:600; line-height:1.2; }
.language-switch button[aria-pressed=true] { background:#302338; color:#fff; }
.site-nav { align-items:center; flex-wrap:wrap; }
@media(min-width:701px) and (max-width:1200px) {
  .masthead .role { display:none; }
  .masthead .wordmark { position:static; transform:none; }
  .masthead { gap:20px; }
  .site-nav { margin-left:auto; }
}
@media(max-width:700px) {
  .language-switch { margin-left:4px; }
  .site-nav { gap:16px; }
}
html[lang=nb] .introduction { width:min(450px,32vw); }
html[lang=nb] .introduction h1 { font-size:clamp(44px,4vw,65px); }
@media(max-width:1000px) {
  html[lang=nb] .introduction { width:auto; }
}
@media(max-width:700px) {
  html[lang=nb] .introduction h1 { font-size:clamp(39px,8.7vw,58px); }
}
/* Shared portfolio navigation */
.masthead {min-height:96px;padding:20px 5%;display:flex;justify-content:space-between;align-items:center;gap:32px;border-bottom:1px solid rgba(48,35,56,.12);background:rgba(248,246,242,.96);position:relative;z-index:20}
.masthead .role {display:none}
.masthead .wordmark {position:static;left:auto;transform:none;width:auto;flex:0 0 auto;text-align:left;margin:0;color:#302338}
.masthead .site-nav {margin-left:auto;display:flex;align-items:center;gap:28px}
.menu-toggle {display:none;width:46px;height:46px;padding:0;border:1px solid rgba(48,35,56,.2);border-radius:50%;background:transparent;color:#302338;cursor:pointer;place-content:center;gap:5px}
.menu-toggle span {display:block;width:19px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded=true] span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2) {opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
@media(max-width:700px) {
  .masthead {min-height:78px;padding:16px 6%;align-items:center;flex-wrap:nowrap}
  .masthead .wordmark {width:auto;text-align:left;font-size:25px}
  .menu-toggle {display:grid;position:absolute;right:6%;top:16px;margin:0;z-index:2}
  .masthead .site-nav {position:absolute;top:100%;left:0;right:0;margin:0;padding:24px 6% 28px;display:none;flex-direction:column;align-items:flex-start;gap:20px;background:#f8f6f2;border-bottom:1px solid rgba(48,35,56,.12);box-shadow:0 18px 28px rgba(48,35,56,.08)}
  .masthead .site-nav[data-open=true] {display:flex}
  .masthead .site-nav>a {font-size:20px;line-height:1.2}
  .masthead .language-switch {margin-top:4px}
  body.menu-open {overflow:hidden}
}