@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* KONŌHO — site styles. Palette and type from brand/logo/final/README.md */
:root{
  --oct:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  --oct-in:polygon(calc(var(--c) - .4px) 0,calc(100% - var(--c) + .4px) 0,100% calc(var(--c) - .4px),100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,calc(var(--c) - .4px) 100%,0 calc(100% - var(--c) + .4px),0 calc(var(--c) - .4px));
  /* Desktop scale */
  --pad:48px; --sec:140px; --fs:17px; --h1:92px; --h2:62px; --h3:28px; --lead:20px; --small:14px;
  --charcoal:#141512; --forest:#1E2A22; --moss:#6B7550; --earth:#3D2E24;
  --bone:#ECE6D8; --ochre:#C6A75A; --plum:#3F2B47; --red:#A63A2C;
  --paper:#F3EFE6; --bg:#F3EFE6; --fg:#141512; --card:#E8E2D4; --line:#D6CDBB; --soft:#5C5A51; --mute:#8E897D; --nav-bg:rgba(243,239,230,.86); --hover:rgba(20,21,18,.06); --sec-bg:var(--bg);
  --serif:"Plus Jakarta Sans", system-ui, sans-serif; --sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --accent:"Fraunces", Georgia, serif;
  --wrap:1800px; --r:2px; --r-sm:2px;
}
:root[data-theme="dark"]{--bg:#121310; --fg:#ECE6D8; --card:#1C1D19; --line:#2C2D27; --soft:#B5AE9F; --mute:#858074; --nav-bg:rgba(18,19,16,.86); --hover:rgba(236,230,216,.07); color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;font-size:var(--fs);transition:background .4s,color .4s;line-height:1.6;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--sans);font-weight:500;line-height:1.02;letter-spacing:-.04em}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);line-height:1.15;letter-spacing:-.01em}
em{font-style:normal}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.tag::before{content:"";width:7px;height:7px;background:var(--moss)}
.dark .tag,.night .tag{color:#B9B2A3}
.dark .tag::before,.night .tag::before{background:var(--ochre)}
.lead{font-size:var(--lead);line-height:1.55;color:var(--soft);max-width:600px}
.dark .lead,.night .lead{color:#CFC8B8}
.dark{background:var(--forest);color:var(--bone);--sec-bg:var(--forest)}
.night{background:var(--charcoal);color:var(--bone);--sec-bg:var(--charcoal)}
:root[data-theme="dark"] .night{background:#0B0C0A;--sec-bg:#0B0C0A}
:root[data-theme="dark"] .dark{background:#18221B;--sec-bg:#18221B}
section{padding:var(--sec) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.sec-head .tag{margin-bottom:22px}
.sec-head h2{max-width:900px}

/* Buttons — octagon, like the Ō */
.btn{--c:11px;--bd:var(--fg);--fill:var(--sec-bg);--ink:var(--fg);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;padding:16px 28px;border:0;color:var(--ink);background:var(--bd);clip-path:var(--oct);white-space:nowrap;transition:color .3s}
.btn::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--fill);clip-path:var(--oct-in);transition:background .3s}
.btn .ar{transition:transform .3s}
.btn:hover .ar{transform:translateX(4px)}
.btn.ghost:hover{--fill:var(--bd);--ink:var(--sec-bg)}
.btn.solid{--bd:var(--forest);--fill:var(--forest);--ink:var(--bone)}
.btn.solid:hover{--bd:var(--charcoal);--fill:var(--charcoal)}
:root[data-theme="dark"] .btn.solid{--bd:var(--bone);--fill:var(--bone);--ink:var(--charcoal)}
:root[data-theme="dark"] .btn.solid:hover{--bd:var(--ochre);--fill:var(--ochre)}
.dark .btn,.night .btn{--bd:rgba(236,230,216,.55);--ink:var(--bone)}
.dark .btn.ghost:hover,.night .btn.ghost:hover{--bd:var(--bone);--fill:var(--bone);--ink:var(--forest)}
.dark .btn.solid,.night .btn.solid{--bd:var(--bone);--fill:var(--bone);--ink:var(--forest)}
.dark .btn.solid:hover,.night .btn.solid:hover{--bd:var(--ochre);--fill:var(--ochre);--ink:var(--charcoal)}
.textlink{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:3px;display:inline-flex;gap:8px}
.textlink:hover{color:var(--moss)}
.dark .textlink:hover,.night .textlink:hover{color:var(--ochre)}

/* Nav — floating pill */
.nav-shell{position:fixed;top:14px;left:0;right:0;z-index:60;pointer-events:none}
.nav{pointer-events:auto;max-width:var(--wrap);margin:0 auto;padding:0 calc(var(--pad) - 16px)}
.nav-in{--c:12px;display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;padding:0 10px 0 24px;background:var(--nav-bg);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);clip-path:var(--oct)}
.logo{position:relative;display:block;height:19px}
.logo img{height:19px;width:auto}
.logo .on-dark{position:absolute;left:0;top:0;opacity:0}
:root[data-theme="dark"] .logo .on-light{opacity:0}
:root[data-theme="dark"] .logo .on-dark{opacity:1}
.nav ul{display:flex;gap:6px;list-style:none;align-items:center}
.nav ul a{--c:6px;font-size:14.5px;font-weight:500;padding:10px 14px;clip-path:var(--oct);transition:background .25s}
.nav ul a:hover,.nav ul a.on{background:var(--hover)}
.nav ul a.cta{--c:8px;background:var(--forest);color:var(--bone);padding:12px 20px}
.nav ul a.cta:hover{background:var(--charcoal)}
:root[data-theme="dark"] .nav ul a.cta{background:var(--bone);color:var(--charcoal)}
.nav-right{display:flex;align-items:center;gap:4px}
.theme-btn{width:32px;height:32px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--mute);opacity:.7;transition:opacity .25s,color .25s}
.theme-btn:hover{opacity:1;color:var(--fg)}
.theme-btn svg{width:14px;height:14px}
.menu-btn{display:none;background:none;border:0;font:inherit;font-weight:500;font-size:15px;cursor:pointer;padding:10px 16px}

/* Photos */
.ph{position:relative;overflow:hidden;border-radius:var(--r);background:var(--card)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
a.ph:hover img,.card:hover .ph img{transform:scale(1.03)}

/* Home hero */
.hero{padding:150px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end}
.hero h1{margin:26px 0 28px}
.hero .lead{margin-bottom:38px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative;height:min(78vh,760px)}
.hero-visual .main{position:absolute;inset:0 0 0 14%}
.hero-visual .main img{object-position:50% 25%}
.hero-visual .inset{position:absolute;left:0;bottom:8%;width:38%;aspect-ratio:3/4;border:6px solid var(--bg)}
.hero-visual .badge{--c:6px;position:absolute;top:24px;right:24px;background:rgba(243,239,230,.92);color:var(--charcoal);clip-path:var(--oct);padding:9px 16px;font-size:12.5px;font-weight:500}
.hero-meta{display:flex;gap:40px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap}
.hero-meta div{font-size:14px;color:var(--soft)}
.hero-meta b{display:block;font-family:var(--serif);font-weight:300;font-size:30px;color:var(--fg);line-height:1.1;margin-bottom:4px}

/* Marquee */
.x-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--bg)}
.x-marquee .track{display:flex;gap:48px;width:max-content;animation:mq 40s linear infinite}
.x-marquee span{font-family:var(--serif);font-size:28px;font-weight:300;white-space:nowrap;display:flex;align-items:center;gap:48px}
.x-marquee span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);opacity:.85}
@keyframes mq{to{transform:translateX(-50%)}}

/* Service cards */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;transition:transform .35s}
.card:hover{transform:translateY(-4px)}
.card .ph{border-radius:0;aspect-ratio:4/5}
.card .body{padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.card p{font-size:15.5px;color:var(--soft)}
.card .more{margin-top:auto;padding-top:10px;font-weight:500;font-size:15px}
.card.feature{background:var(--forest);color:var(--bone)}
.card.feature p{color:#CFC8B8}
.card .pill{--c:5px;clip-path:var(--oct);align-self:flex-start;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;background:var(--ochre);color:var(--charcoal)}

/* Real vs AI */
.real-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.real-grid .ph{aspect-ratio:4/5}
.points{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px;margin-top:48px}
.points h4{font-family:var(--serif);font-weight:300;font-size:24px;margin-bottom:10px;line-height:1.2}
.points p{font-size:15.5px;color:#C4BDAD}
.points .n{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--ochre);margin-bottom:12px;display:block}

/* Curated work */
.curated{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:90px;gap:16px}
.curated .ph{cursor:zoom-in}
.curated .a{grid-column:span 5;grid-row:span 6}
.curated .b{grid-column:span 4;grid-row:span 4}
.curated .c{grid-column:span 3;grid-row:span 4}
.curated .d{grid-column:span 4;grid-row:span 5}
.curated .e{grid-column:span 3;grid-row:span 5}
.curated .f{grid-column:span 7;grid-row:span 4}
.curated .g{grid-column:span 5;grid-row:span 4}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px}
.chip{--c:7px;clip-path:var(--oct);display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:var(--card);font-weight:500;font-size:15px;transition:background .25s,color .25s}
.chip:hover{background:var(--fg);color:var(--bg)}
.chip small{font-size:12px;color:var(--mute)}

/* Partnership teaser / split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.checks{list-style:none;margin:34px 0 40px;display:grid;gap:14px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:17px}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:var(--ochre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23141512' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.stack{position:relative;height:620px}
.stack .ph{position:absolute}
.stack .s1{inset:0 26% 18% 0}
.stack .s2{right:0;bottom:0;width:48%;aspect-ratio:3/4;border:6px solid var(--sec-bg)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--card);border-radius:var(--r);padding:30px 26px}
.step .num{font-family:var(--serif);font-size:44px;color:var(--moss);line-height:1;margin-bottom:22px}
.step h4{font-size:18px;font-weight:500;margin-bottom:8px}
.step p{font-size:15px;color:var(--soft)}
.dark .step{background:rgba(236,230,216,.06)}
.dark .step .num{color:var(--ochre)}
.dark .step p{color:#C4BDAD}

/* Benefits */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit{background:var(--card);border-radius:var(--r);padding:34px 30px}
.benefit .ic{--c:12px;clip-path:var(--oct);width:44px;height:44px;background:var(--forest);color:var(--ochre);display:grid;place-items:center;font-family:var(--serif);font-size:20px;margin-bottom:24px}
.benefit h4{font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.2;margin-bottom:10px}
.benefit p{font-size:15.5px;color:var(--soft)}

/* Problem band */
.problem{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.problem p{font-size:20px;line-height:1.6;color:var(--soft)}
.problem p + p{margin-top:20px}

/* Compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.compare > div{border-radius:var(--r);padding:34px 32px}
.compare .them{background:rgba(236,230,216,.06);border:1px solid rgba(236,230,216,.12)}
.compare .us{background:var(--bone);color:var(--charcoal)}
.compare h4{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.compare ul{list-style:none;display:grid;gap:12px}
.compare li{padding-left:28px;position:relative;font-size:16px}
.compare .them li{color:#B9B2A3}
.compare .them li::before{content:"–";position:absolute;left:4px;color:#77736A}
.compare .us li::before{content:"✓";position:absolute;left:2px;color:var(--moss);font-weight:600}

/* Included + tiers */
.included{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.included div{background:var(--bg);padding:28px 24px;font-size:16px}
.included b{display:block;font-family:var(--serif);font-weight:300;font-size:22px;margin-bottom:8px;line-height:1.2}
.included span{color:var(--soft);font-size:14.5px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{--sec-bg:#29342C;border-radius:var(--r);padding:36px 32px;background:#29342C;border:1px solid rgba(236,230,216,.14);display:flex;flex-direction:column;gap:14px}
.tier.rec{--sec-bg:var(--bone);background:var(--bone);color:var(--charcoal);border-color:var(--bone)}
.tier.rec .btn.solid{--bd:var(--forest);--fill:var(--forest);--ink:var(--bone)}
.tier .nm{font-family:var(--serif);font-size:34px;font-weight:300}
.tier .rh{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre)}
.tier.rec .rh{color:var(--moss)}
.tier p{font-size:15.5px;color:#C4BDAD}
.tier.rec p{color:var(--soft)}
.tier ul{list-style:none;display:grid;gap:9px;margin:6px 0 10px;font-size:15px}
.tier li::before{content:"— ";color:var(--ochre)}
.tier.rec li::before{color:var(--moss)}
.tier .btn{margin-top:auto;align-self:flex-start}
.note{margin-top:28px;color:#B9B2A3;font-size:15px}
.who{display:flex;flex-wrap:wrap;gap:10px}
.who span{--c:7px;clip-path:var(--oct);padding:12px 20px;background:var(--card);font-weight:500;font-size:15px}

/* About */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.about-grid .ph{aspect-ratio:4/5}
.about-grid p{color:#CFC8B8;margin-bottom:18px;max-width:560px}
blockquote{font-family:var(--sans);font-weight:400;font-size:calc(var(--h3) + 2px);letter-spacing:-.02em;line-height:1.35;margin:40px 0 14px;color:var(--bone)}
cite{font-style:normal;font-size:14px;color:#B9B2A3}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;font-size:19px;font-weight:500;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;transition:transform .3s;color:var(--moss)}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 48px 24px 0;color:var(--soft);max-width:640px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}
.contact-grid .intro p{color:#CFC8B8;margin-top:22px;max-width:440px}
.form{background:rgba(236,230,216,.05);border:1px solid rgba(236,230,216,.12);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.form label{font-size:13px;font-weight:500;color:#B9B2A3}
.form input,.form select,.form textarea{font:inherit;font-size:16px;color:var(--bone);background:rgba(236,230,216,.06);border:1px solid rgba(236,230,216,.16);border-radius:var(--r-sm);padding:13px 15px;outline:none;transition:border-color .25s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ochre)}
.form select{appearance:none;cursor:pointer}
.form select option{color:var(--charcoal)}
.form textarea{resize:vertical;min-height:96px}
.consent{grid-column:1/-1;font-size:13px;color:#9E978A}
.consent a{border-bottom:1px solid currentColor}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-foot small{color:#B9B2A3;font-size:14px}
.hp{position:absolute;left:-9999px}
.direct{margin-top:30px;color:var(--bone)}

/* Page heads (inner pages) */
.page-head{padding:170px 0 70px}
.page-head h1{font-size:var(--h1);margin:22px 0 22px}
.crumbs{font-size:14px;color:var(--mute)}
.crumbs a:hover{color:var(--fg)}

/* Work overview */
.gal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal-card{display:block}
.gal-card .ph{aspect-ratio:4/5}
.gal-card .meta{display:flex;justify-content:space-between;align-items:baseline;padding:18px 4px 0}
.gal-card h3{font-size:28px}
.gal-card small{color:var(--mute);font-size:14px}
.gal-card.wide{grid-column:span 2}
.gal-card.wide .ph{aspect-ratio:auto;height:calc(100% - 62px)}

/* Gallery */
.gal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.gal-nav a{--c:7px;clip-path:var(--oct);padding:10px 18px;background:var(--card);font-size:14.5px;font-weight:500;transition:background .25s,color .25s}
.gal-nav a.on,.gal-nav a:hover{background:var(--fg);color:var(--bg)}
.masonry{columns:3 300px;column-gap:16px}
.masonry .ph{break-inside:avoid;margin-bottom:16px;cursor:zoom-in}
.masonry .ph img{height:auto}
.next-gal{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;margin-top:80px;padding-top:40px;border-top:1px solid var(--line)}
.next-gal a h3{font-size:var(--h2)}
.next-gal a:hover h3{color:var(--moss)}

/* Portal */
.portal-hero{padding:170px 0 60px}
.portal-hero h1{margin:22px 0}
.signin{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:34px}
.signin small{color:var(--soft);font-size:14px}
.demo{overflow:hidden;background:var(--charcoal);color:var(--bone);display:grid;grid-template-columns:230px 1fr;min-height:640px;box-shadow:0 40px 80px rgba(20,21,18,.18);position:relative}
.demo-label{--c:5px;clip-path:var(--oct);position:absolute;top:18px;right:18px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:var(--ochre);color:var(--charcoal);padding:6px 12px;z-index:2}
.demo aside{background:var(--forest);padding:28px 18px;display:flex;flex-direction:column;gap:4px}
.demo aside img{height:15px;width:auto;margin:0 8px 30px}
.demo aside span{padding:11px 12px;border-radius:10px;font-size:14.5px;color:#C4BDAD}
.demo aside span.on{background:rgba(236,230,216,.1);color:var(--bone)}
.demo main{padding:34px 36px;display:grid;gap:22px;align-content:start}
.demo .hello{font-family:var(--serif);font-size:30px;font-weight:300}
.demo .hello small{display:block;font-family:var(--sans);font-size:14px;color:#9E978A;margin-top:6px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{background:rgba(236,230,216,.06);border-radius:14px;padding:18px 20px}
.kpi small{color:#9E978A;font-size:13px}
.kpi b{display:block;font-family:var(--serif);font-weight:300;font-size:28px;margin-top:6px}
.kpi .bar{height:5px;border-radius:5px;background:rgba(236,230,216,.12);margin-top:12px;overflow:hidden}
.kpi .bar i{display:block;height:100%;background:var(--ochre)}
.demo-row{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.panel{background:rgba(236,230,216,.06);border-radius:14px;padding:20px}
.panel h5{font-size:13px;font-weight:500;color:#B9B2A3;margin-bottom:14px;display:flex;justify-content:space-between}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.thumbs div{aspect-ratio:1;border-radius:8px;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover}
.cal{display:grid;gap:10px;font-size:14px}
.cal div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(236,230,216,.05)}
.cal em{font-style:normal;color:var(--ochre);font-size:12.5px;white-space:nowrap}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Footer */
footer{background:var(--charcoal);color:#B8B1A2;padding:110px 0 40px}
.foot-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;padding-bottom:80px;border-bottom:1px solid #2A2B26}
.foot-cta h2{color:var(--bone);max-width:760px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:50px;padding:70px 0}
.foot-logo{width:min(360px,100%);height:auto}
footer .sub{margin-top:22px;font-size:14px}
footer h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#77736A;font-weight:500;margin-bottom:18px}
footer ul{list-style:none}
footer li{margin-bottom:10px;font-size:15px}
footer a:hover{color:var(--bone)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:30px;border-top:1px solid #2A2B26;font-size:13px;color:#77736A}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(14,15,12,.96);z-index:100;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px}
.lb button{--c:10px;clip-path:var(--oct);position:absolute;background:rgba(236,230,216,.1);border:0;color:var(--bone);font:inherit;font-weight:500;cursor:pointer;width:52px;height:52px;font-size:22px}
.lb button:hover{background:rgba(236,230,216,.2)}
.lb .x{top:20px;right:20px;font-size:15px;width:auto;padding:0 20px}
.lb .prev{left:20px;top:50%;transform:translateY(-50%)}
.lb .next{right:20px;top:50%;transform:translateY(-50%)}
.lb .count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:13px;color:#9E978A}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.x-marquee .track{animation:none}html{scroll-behavior:auto}}

/* Responsive */
@media (max-width:1179px){
  .services{grid-template-columns:1fr 1fr}
  .included{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  section{padding:96px 0}
  .hero-grid,.real-grid,.split,.about-grid,.faq-grid,.contact-grid,.problem{grid-template-columns:1fr;gap:48px}
  .hero-visual{height:72vh}
  .steps{grid-template-columns:1fr 1fr}
  .benefits,.tiers,.features{grid-template-columns:1fr 1fr}
  .gal-cards{grid-template-columns:1fr 1fr}
  .gal-card.wide{grid-column:span 2}
  .curated{grid-auto-rows:70px}
  .demo{grid-template-columns:1fr}
  .demo aside{display:none}
  .stack{height:520px}
}
@media (max-width:767px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav-shell{top:10px}
  .nav-in{height:58px;padding:0 6px 0 20px}
  .nav ul{position:fixed;top:78px;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:12px;display:none;box-shadow:0 20px 40px rgba(20,21,18,.12)}
  .nav ul.open{display:flex}
  .nav ul a{display:block;padding:14px 16px}
  .nav ul a.cta{text-align:center}
  .menu-btn{display:block}
  .hero{padding:110px 0 60px}
  .hero-visual{height:62vh}
  .services,.steps,.benefits,.tiers,.features,.points,.compare,.included,.gal-cards,.form,.kpis,.demo-row{grid-template-columns:1fr}
  .gal-card.wide{grid-column:auto}
  .gal-card.wide .ph{aspect-ratio:4/5;height:auto}
  .curated{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
  .curated .ph{grid-column:auto!important;grid-row:auto!important;aspect-ratio:3/4}
  .curated .a,.curated .f{grid-column:span 2!important;aspect-ratio:4/5}
  .masonry{columns:2;column-gap:8px}
  .masonry .ph{margin-bottom:8px;border-radius:10px}
  .form{padding:24px}
  .foot-top{grid-template-columns:1fr}
  .stack{height:440px}
  .page-head,.portal-hero{padding:120px 0 50px}
  .demo main{padding:24px 18px}
}

/* Why it matters — numbered stories (Kahu flow) */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.story{display:flex;flex-direction:column;gap:12px}
.story .ph{aspect-ratio:4/5;margin-bottom:12px}
.story .n{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.story h3{font-size:var(--h3)}
.story p{color:var(--soft);font-size:16px}
.story small{font-size:13.5px;color:var(--mute);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.story:hover h3{color:var(--moss)}
/* Services list */
.svc-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc{background:var(--card);border-radius:var(--r);padding:32px 28px;display:flex;flex-direction:column;gap:12px}
.svc .n{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.svc p{color:var(--soft);font-size:15.5px}
.svc ul{list-style:none;display:grid;gap:9px;margin:8px 0 14px;font-size:15px;border-top:1px solid var(--line);padding-top:16px}
.svc li::before{content:"— ";color:var(--moss)}
.svc .textlink{margin-top:auto;align-self:flex-start;font-size:15px}
.svc.feature{background:var(--forest);color:var(--bone)}
.svc.feature .n{color:var(--ochre)} .svc.feature p{color:#CFC8B8}
.svc.feature ul{border-color:rgba(236,230,216,.18)} .svc.feature li::before{color:var(--ochre)}
.steps.three{grid-template-columns:repeat(3,1fr)}
.reach{display:grid;gap:18px;margin-top:34px}
.reach small{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#9E978A;margin-bottom:4px}
.reach div{color:var(--bone)}
@media (max-width:1179px){.svc-list{grid-template-columns:1fr 1fr}}
@media (max-width:1023px){.stories{grid-template-columns:1fr 1fr}.steps.three{grid-template-columns:1fr}}
@media (max-width:767px){.stories,.svc-list{grid-template-columns:1fr}}

/* Photo ribbon */
.ribbon{display:flex;gap:12px;overflow-x:auto;padding:0 32px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ribbon::-webkit-scrollbar{display:none}
.ribbon .ph{flex:none;height:min(52vh,460px);aspect-ratio:2/3;scroll-snap-align:start;cursor:zoom-in}
.hero-meta b,.step .num,.kpi b,.tier .nm,.included b,.benefit h4,.points h4,.gal-card h3,.story h3,.demo .hello{font-weight:500;letter-spacing:-.03em}

@media (max-width:767px){.ribbon{padding:0 20px 8px}.ribbon .ph{height:340px}}
@media (max-width:767px){.hero-meta{gap:18px;flex-wrap:nowrap;margin-top:40px}.hero-meta b{font-size:19px}.hero-meta div{font-size:12px}}

/* ===== Device scales: large desktop / desktop (default) / iPad landscape / iPad portrait / iPhone ===== */
@media (min-width:1600px){:root{--pad:64px;--h1:112px;--h2:70px;--h3:30px;--lead:21px;--fs:18px}}
@media (max-width:1179px){:root{--pad:44px;--sec:112px;--h1:74px;--h2:52px;--h3:26px;--lead:19px;--fs:17px}
  .hero-grid{gap:40px}.real-grid,.split,.about-grid,.contact-grid{gap:56px}}
@media (max-width:1023px){:root{--pad:36px;--sec:96px;--h1:72px;--h2:46px;--h3:25px;--lead:19px;--fs:17px}
  .hero{padding-top:130px}.hero-visual{height:64vh}.page-head,.portal-hero{padding-top:140px}
  .ribbon .ph{height:400px}}
@media (max-width:767px){:root{--pad:20px;--sec:72px;--h1:46px;--h2:34px;--h3:22px;--lead:17px;--fs:16px;--small:13px}
  h1,h2{letter-spacing:-.035em}
  .btn{padding:15px 22px;font-size:14.5px}
  .hero .actions .btn{flex:1 1 100%;justify-content:center}
  .sec-head{margin-bottom:36px;gap:18px}
  .story .ph{aspect-ratio:4/5}
  .page-head,.portal-hero{padding-top:110px}
  .page-head h1{font-size:52px}}
@media (max-width:380px){:root{--h1:40px;--h2:30px;--pad:16px}}

/* nav order: logo | links | discreet switch */
#menu{margin-left:auto}
.nav-right{order:3;margin-left:6px}
/* curated grid — explicit placement, no holes */
.curated .a{grid-column:1/6;grid-row:1/7}
.curated .b{grid-column:6/10;grid-row:1/5}
.curated .c{grid-column:10/13;grid-row:1/5}
.curated .d{grid-column:6/10;grid-row:5/10}
.curated .e{grid-column:10/13;grid-row:5/10}
.curated .g{grid-column:1/6;grid-row:7/10}
.curated .f{grid-column:1/13;grid-row:10/15}
@media (max-width:767px){.nav-right{margin-left:auto}}

/* ===================== v3 additions ===================== */
figure{margin:0}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--fg);color:var(--bg);padding:10px 16px}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
.ph[role=button]{cursor:zoom-in}
.tight{padding:calc(var(--sec) * .55) 0}
.narrow{max-width:420px}
.muted{color:var(--mute)}
[hidden]{display:none!important}
h2{margin:0}
.sec-head{align-items:end}
.sec-head h2{max-width:none}

/* Hero (one image) */
.hero{padding:calc(var(--sec) * .9) 0 calc(var(--sec) * .5)}
.hero-grid{grid-template-columns:1fr 1fr;align-items:center}
.hero-copy .tag{margin-bottom:24px}
.hero h1{margin:0 0 24px;max-width:9.5em}
.hero .lead{margin-bottom:34px;max-width:440px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative;height:auto}
.hero-visual .main{position:relative;inset:auto;aspect-ratio:4/5}
.hero-visual .main img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* Curated grid images fill their cells */
.curated .ph img{width:100%;height:100%;object-fit:cover}

/* Service cards (home) */
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{display:flex;flex-direction:column;gap:10px}
.svc-card .ph{aspect-ratio:4/5;margin-bottom:14px}
.svc-card .ph img{width:100%;height:100%;object-fit:cover}
.svc-card .n{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--moss)}
.svc-card p{color:var(--soft)}
.svc-card small{color:var(--mute);font-size:14px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.svc-card .more{font-weight:600;font-size:15px;margin-top:6px}
.svc-card:hover h3{color:var(--moss)}
:root[data-theme="dark"] .svc-card:hover h3{color:var(--ochre)}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.project{display:flex;flex-direction:column;gap:10px}
.project .ph{aspect-ratio:4/5;margin-bottom:12px;cursor:zoom-in}
.project .ph img{width:100%;height:100%;object-fit:cover}
.project .n{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre)}
.project p{color:#C4BDAD;font-size:15.5px}
.project ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.project li{--c:5px;clip-path:var(--oct);font-size:12.5px;padding:5px 10px;background:rgba(236,230,216,.08);color:#D8D1C2}
.project .textlink{background:none;border:0;border-bottom:1px solid currentColor;color:var(--bone);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;padding:0 0 3px;align-self:flex-start;margin-top:auto}

/* About teaser */
.about-teaser{max-width:900px}
.about-teaser .big{font-size:calc(var(--h3) + 4px);line-height:1.35;letter-spacing:-.02em;margin:18px 0 24px;font-weight:500}

/* Testimonials */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.quote-grid blockquote{margin:0;font-size:18px;background:var(--card);padding:28px}
.quote-grid cite{display:block;margin-top:14px;font-size:14px;color:var(--mute)}

/* Page heads */
.page-head{padding:calc(var(--sec) + 40px) 0 calc(var(--sec) * .35)}
.page-head h1{margin:0 0 18px}
.page-head .lead{max-width:640px}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.jump a{--c:7px;clip-path:var(--oct);background:var(--card);padding:10px 16px;font-size:14.5px;font-weight:500}
.jump a:hover{background:var(--fg);color:var(--bg)}

/* Service detail */
.svc-detail{padding:calc(var(--sec) * .7) 0;border-top:1px solid var(--line)}
.svc-detail.alt{background:var(--card)}
.svc-detail.alt{--sec-bg:var(--card)}
.svc-top{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:44px}
.svc-top .n{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--moss);margin-bottom:14px}
.svc-top h2{margin-bottom:18px}
.svc-top .for{margin-top:18px;color:var(--soft)}
.svc-top .for strong{color:var(--fg);font-weight:600;margin-right:6px}
.svc-lists{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.svc-lists h3{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.svc-lists ul{list-style:none;display:grid;gap:10px;font-size:15.5px}
.svc-lists li{padding-left:16px;position:relative}
.svc-lists li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--moss)}
.svc-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-examples .ph{aspect-ratio:4/5}
.svc-examples .ph img{width:100%;height:100%;object-fit:cover}
.svc-foot{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:34px}
.svc-foot .why{flex:1 1 360px;font-size:18px;font-weight:500;letter-spacing:-.01em}
.price{font-size:15px;font-weight:600}
.real h3{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);margin-bottom:22px}
.real dl{display:grid;gap:22px}
.real dt{font-size:var(--h3);font-weight:500;letter-spacing:-.02em}
.real dd{margin:6px 0 0;color:#C4BDAD}
.table-wrap{overflow-x:auto;margin-top:36px}
.compare-table{width:100%;border-collapse:collapse;min-width:640px;font-size:15.5px}
.compare-table th,.compare-table td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.compare-table thead th{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.compare-table tbody th{font-weight:600;width:18%}
.note{margin-top:22px;color:var(--soft);font-size:15px}
ol.steps{list-style:none;padding:0;margin-top:36px}
.step h3{font-size:18px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.step .num{display:block}

/* About page */
.bio{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.bio .role{color:var(--mute);margin-top:10px}
.bio p{font-size:18px;margin-bottom:18px;max-width:620px}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.values h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.values p{color:#C4BDAD;font-size:15.5px}
.faq-grid > h2{align-self:start}

/* Contact page */
.page-head.dark{padding-bottom:var(--sec)}
.contact-grid h1{color:var(--bone)}
.contact-grid .lead{color:#CFC8B8}
.form fieldset{border:0;padding:0;margin:0}
.form legend{font-size:13px;font-weight:500;color:#B9B2A3;margin-bottom:10px}
.radios{display:flex;gap:22px;flex-wrap:wrap}
.radios label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--bone);cursor:pointer}
.radios input{accent-color:var(--ochre);width:16px;height:16px}
.form [aria-invalid="true"]{border-color:#D98A7E}
.form-msg{color:#D9D2C3;font-size:14.5px;margin:0}
.form button[disabled]{opacity:.6}
.reach a{color:var(--bone)}

/* Work */
.gal-card .meta h2{font-size:var(--h3)}
.gal-card .ph img{width:100%;height:100%;object-fit:cover}
.gal-head{padding-bottom:40px}
.next-title{display:block;font-size:var(--h2);font-weight:500;letter-spacing:-.04em;margin-top:10px}
.next-gal a:hover .next-title{color:var(--moss)}

/* Legal */
.legal{max-width:780px}
.legal h2{font-size:22px;letter-spacing:-.01em;margin:38px 0 12px}
.legal p,.legal li{color:var(--soft);margin-bottom:12px}
.legal ul{padding-left:20px;margin-bottom:12px}
.legal a{text-decoration:underline}

/* Footer */
.fh{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#77736A;font-weight:500;margin-bottom:18px}
footer .foot-cta h2{font-size:var(--h2)}
footer .btn{--sec-bg:var(--charcoal)}
footer .btn.solid{--bd:var(--bone);--fill:var(--bone);--ink:var(--charcoal)}
footer .btn.solid:hover{--bd:var(--ochre);--fill:var(--ochre)}
.lb:not(.open){display:none}

/* Responsive for v3 components */
@media (max-width:1179px){.projects{grid-template-columns:1fr 1fr}.values{grid-template-columns:1fr 1fr}}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual .main{aspect-ratio:4/3}
  .svc-top,.bio{grid-template-columns:1fr;gap:36px}
  .svc-cards{grid-template-columns:1fr 1fr 1fr;gap:16px}
}
@media (max-width:767px){
  .hero{padding-top:104px}
  .hero-visual .main{aspect-ratio:4/5}
  .svc-cards,.projects,.values,.quote-grid{grid-template-columns:1fr}
  .svc-cards{gap:40px}
  .svc-lists{grid-template-columns:1fr}
  .svc-examples{grid-template-columns:1fr 1fr}
  .svc-examples .ph:first-child{grid-column:span 2}
  .svc-foot .btn{width:100%;justify-content:center}
  .compare-table{font-size:14px}
  .about-teaser .big{font-size:21px}
  .page-head{padding-top:112px}
  .radios{gap:16px}
}

/* ===== v4: wider layout, desktop redistribution ===== */
@media (min-width:1180px){
  .hero-grid{grid-template-columns:.85fr 1.15fr;gap:64px}
  .hero-visual .main{aspect-ratio:5/4}
  .masonry{columns:4;column-gap:14px}
  .masonry .ph{margin-bottom:14px}
  .gal-cards{grid-template-columns:repeat(5,1fr);gap:16px}
  .gal-card.wide{grid-column:auto}
  .gal-card.wide .ph{aspect-ratio:4/5;height:auto}
  .curated{grid-auto-rows:110px}
}
@media (min-width:1180px) and (max-width:1439px){.masonry{columns:3}}
@media (min-width:1920px){:root{--pad:80px}.curated{grid-auto-rows:130px}}
/* Direction section (Work page) */
.direction-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:56px}
.direction-head .lead{max-width:620px}
.dir-points{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.dir-points div{border-top:1px solid rgba(236,230,216,.2);padding-top:22px}
.dir-points .n{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ochre);margin-bottom:14px}
.dir-points h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.dir-points p{color:#C9C2B2;font-size:15.5px}
.statement{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.statement .ph{aspect-ratio:4/5}
.statement .ph img{width:100%;height:100%;object-fit:cover}
.statement .big{font-size:calc(var(--h2) * .62);line-height:1.2;letter-spacing:-.03em;font-weight:500;margin-bottom:28px}
.statement p.sub{color:var(--soft);font-size:18px;max-width:560px;margin-bottom:32px}
.work-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.work-intro .lead{max-width:560px}
@media (max-width:1179px){.gal-cards{grid-template-columns:repeat(3,1fr)}.gal-card.wide{grid-column:auto}.gal-card.wide .ph{aspect-ratio:4/5;height:auto}.dir-points{grid-template-columns:1fr 1fr}}
@media (max-width:1023px){.direction-head,.statement,.work-intro{grid-template-columns:1fr;gap:28px}.gal-cards{grid-template-columns:1fr 1fr}.masonry{columns:2}}
@media (max-width:767px){.dir-points{grid-template-columns:1fr}.gal-cards{grid-template-columns:1fr 1fr;gap:10px}.gal-card .meta h2{font-size:17px}.gal-card small{font-size:12px}.statement .big{font-size:27px}}
.gal-card .meta{flex-direction:column;align-items:flex-start;gap:2px}
@media (max-width:1179px){.gal-cards{grid-template-columns:1fr 1fr}.gal-card:first-child{grid-column:span 2}.gal-card:first-child .ph{aspect-ratio:16/10}}
.gal-card:first-child .ph img{object-position:50% 15%}

/* ===================== v5: discreet type, more air ===================== */
:root{--sec:176px;--h1:58px;--h2:40px;--h3:21px;--lead:18px;--fs:16.5px}
@media (min-width:1600px){:root{--sec:196px;--h1:66px;--h2:44px;--h3:22px;--lead:19px;--fs:17px}}
@media (max-width:1179px){:root{--sec:140px;--h1:52px;--h2:36px;--h3:20px;--lead:17.5px;--fs:16.5px}}
@media (max-width:1023px){:root{--sec:120px;--h1:48px;--h2:34px;--h3:20px;--lead:17.5px;--fs:16.5px}}
@media (max-width:767px){:root{--sec:96px;--h1:36px;--h2:28px;--h3:18px;--lead:16.5px;--fs:16px}
  .page-head h1{font-size:var(--h1)}.statement .big{font-size:22px}.gal-card .meta h2{font-size:15px}}
@media (max-width:380px){:root{--h1:32px;--h2:25px}}
h1,h2{font-weight:400;letter-spacing:-.03em;line-height:1.08}
h3{font-weight:500;letter-spacing:-.015em}
.lead{line-height:1.65}
.hero h1{max-width:11em;margin-bottom:28px}
.hero .lead{margin-bottom:44px}
.page-head{padding:calc(var(--sec) + 30px) 0 calc(var(--sec) * .45)}
.page-head h1{margin:0 0 26px}
.sec-head{margin-bottom:72px}
.tight{padding:calc(var(--sec) * .5) 0 var(--sec)}
.statement .big,.about-teaser .big{font-size:calc(var(--h2) * .66);font-weight:400;line-height:1.3;letter-spacing:-.02em}
blockquote{font-size:var(--h3)}
.next-title,.next-gal a h3,footer .foot-cta h2{font-size:var(--h2)}
.gal-card .meta h2{font-size:17px;font-weight:500;letter-spacing:-.01em}
.direction-head{margin-bottom:88px;gap:96px}
.dir-points{gap:40px}
.dir-points h3{font-size:18px}
.statement,.work-intro{gap:120px}
.work-intro{align-items:start}
@media (max-width:1023px){.statement,.work-intro,.direction-head{gap:32px}.direction-head{margin-bottom:56px}.sec-head{margin-bottom:48px}}
@media (max-width:767px){.sec-head{margin-bottom:36px}.dir-points{gap:28px}}
h1,h2,h3,.big,.lead{text-wrap:balance}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1fr 1fr;gap:96px}
  .hero-visual .main{max-height:78vh;aspect-ratio:4/5;width:auto;margin-left:auto}
  .statement{grid-template-columns:1fr 1fr}
  .statement > div:last-child{width:78%;justify-self:end}}

/* ===== Tracking — more air in titles and labels (Nov 14 2026) ===== */
h1{letter-spacing:.012em;line-height:1.1}
h2{letter-spacing:.01em;line-height:1.12}
h3{letter-spacing:.012em}
.next-title,footer .foot-cta h2{letter-spacing:.01em}
.statement .big,.about-teaser .big,blockquote{letter-spacing:.006em}
.hero-meta b,.step .num,.kpi b,.tier .nm,.included b,.benefit h4,.points h4,.gal-card h3,.story h3,.dir-points h3,.values h3,.step h3,.real dt,.svc-foot .why,.gal-card .meta h2{letter-spacing:.01em}
.tag,.card .pill,.points .n,.compare h4,.tier .rh,.demo-label,footer h5,.story .n,.svc .n,.reach small,.svc-card .n,.project .n,.svc-top .n,.svc-lists h3,.real h3,.compare-table thead th,.fh,.dir-points .n{letter-spacing:.22em}
.nav ul a{letter-spacing:.02em}
.btn{letter-spacing:.03em}
@media (max-width:767px){h1{letter-spacing:.006em}h2{letter-spacing:.005em}}