/* StudioKrei — styles.css
   Petrol accent · tight type scale · cinematic hero · consultancy layout */

:root {
  --ek-bg: #f1eee7;
  --ek-paper: #f7f4ed;
  --ek-ink: #14110e;
  --ek-mute: #6e655a;
  --ek-faint: rgba(20, 17, 14, 0.45);
  --ek-rule: rgba(20, 17, 14, 0.14);
  --ek-rule-strong: rgba(20, 17, 14, 0.35);
  --ek-accent: #2a7675;         /* petrol — from brand documents */
  --ek-accent-soft: rgba(42, 118, 117, 0.12);
  --ek-gutter: 56px;
  --ek-font: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--ek-bg);
  color: var(--ek-ink);
  font-family: var(--ek-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01','cv11','liga';
  scroll-behavior: smooth;
}
body { min-height: 100vh; overflow-x: hidden; }
img { max-width: 100%; display: block; }

@media (hover: hover) and (pointer: fine) {
  .ek-page, .ek-page * { cursor: none; }
  .ek-page input, .ek-page textarea { cursor: text; }
}

/* ---------- Cursor ---------- */
.ek-cursor-dot, .ek-cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 999px;
  transition: opacity .25s ease, width .35s cubic-bezier(.2,.7,.2,1),
              height .35s cubic-bezier(.2,.7,.2,1),
              background .25s, border-color .25s, color .25s;
}
.ek-cursor-dot { width: 6px; height: 6px; background: var(--ek-ink); }
.ek-cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid var(--ek-rule-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ek-ink); background: transparent;
}
.ek-cursor-label { opacity: 0; transition: opacity .25s ease; white-space: nowrap; }
.ek-cursor-ring.ek-cursor-link  { width: 56px; height: 56px; border-color: var(--ek-ink); }
.ek-cursor-ring.ek-cursor-view  { width: 84px; height: 84px; background: var(--ek-paper); border-color: var(--ek-ink); }
.ek-cursor-ring.ek-cursor-view .ek-cursor-label { opacity: 1; }
.ek-cursor-ring.ek-cursor-read  { width: 72px; height: 72px; background: var(--ek-accent); color: #fff; border-color: var(--ek-accent); }
.ek-cursor-ring.ek-cursor-read .ek-cursor-label { opacity: 1; }
.ek-cursor-ring.ek-cursor-email { width: 80px; height: 80px; background: var(--ek-accent); color: #fff; border-color: var(--ek-accent); }
.ek-cursor-ring.ek-cursor-email .ek-cursor-label { opacity: 1; }
.ek-cursor-dot.ek-cursor-view, .ek-cursor-dot.ek-cursor-read,
.ek-cursor-dot.ek-cursor-email { opacity: 0 !important; }

/* ---------- Typography ---------- */
.ek-display {
  font-weight: 350; letter-spacing: -0.035em; line-height: 1.0;
  margin: 0; font-size: clamp(50px, 5.2vw, 76px); text-wrap: balance;
}
.ek-display-md { font-size: clamp(46px, 4.8vw, 70px); }
.ek-display-lg { font-size: clamp(52px, 5.6vw, 82px); }
.ek-em { font-style: normal; color: var(--ek-accent); font-weight: 350; }

.ek-eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ek-mute); font-weight: 500; display: inline-block;
}
.ek-small  { font-size: 13px; color: var(--ek-mute); line-height: 1.5; }
.ek-body   { font-size: 17px; line-height: 1.55; color: var(--ek-ink); max-width: 56ch; text-wrap: pretty; margin: 0; }
.ek-lede   {
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45;
  letter-spacing: -0.01em; font-weight: 350; max-width: 40ch; margin: 0;
  text-wrap: pretty; color: var(--ek-ink);
}
.ek-pull   {
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25;
  font-weight: 350; letter-spacing: -0.02em; max-width: 28ch; margin: 0;
  text-wrap: balance;
}

.ek-link { color: inherit; text-decoration: none; position: relative; display: inline-block; }
.ek-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.ek-link:hover::after { transform: scaleX(1); }
.ek-rule { height: 1px; background: var(--ek-rule); }

/* ---------- Nav ---------- */
.ek-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 64px;
  padding: 24px var(--ek-gutter);
  background: color-mix(in oklab, var(--ek-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  transition: padding .5s cubic-bezier(.2,.7,.2,1), background .3s ease;
}
.ek-nav[data-condensed='true'] { padding-top: 14px; padding-bottom: 14px; }

/* Wordmark: "Studio" light (300) + "Krei" bold (700), no separator */
.ek-mark {
  font-size: 19px; letter-spacing: -0.005em; line-height: 1;
  display: inline-flex; align-items: baseline;
  color: var(--ek-ink); text-decoration: none;
}
.ek-mark::after { display: none; }  /* no underline on wordmark */
.ek-mark-studio { font-weight: 300; }
.ek-mark-krei   { font-weight: 700; }
.ek-mark-footer { font-size: 26px; }

.ek-menu { display: flex; gap: 36px; }
.ek-menulink { font-size: 13px; letter-spacing: 0.02em; color: var(--ek-ink); }
.ek-menulink.active { color: var(--ek-accent); }

/* White nav over the cinematic hero */
.ek-nav[data-onvideo='true'] {
  background: transparent; backdrop-filter: none;
}
.ek-nav[data-onvideo='true'] .ek-mark,
.ek-nav[data-onvideo='true'] .ek-menulink { color: #fff; }
.ek-nav[data-onvideo='true'] .ek-menulink.active { color: rgba(255,255,255,0.7); }
.ek-nav[data-onvideo='true'] .ek-link::after { background: #fff; }

/* ---------- Reveal ---------- */
.ek-reveal {
  transform: translate3d(0, 24px, 0);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.ek-reveal.shown { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ek-reveal { transform: none; opacity: 1; }
}

/* ---------- Cinematic hero ---------- */
.ek-cine {
  position: relative; height: 100vh; min-height: 600px; max-height: 960px;
  margin-top: -76px;   /* pull up under the sticky nav so image is truly full-bleed */
  overflow: hidden; background: #15110e;
}
.ek-cine-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  will-change: transform;
}
.ek-cine-kb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-origin: 60% 45%;
}
.ek-cine-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%; display: block;
}
.ek-cine-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 70% 35%, rgba(8,6,4,0) 40%, rgba(8,6,4,0.28) 100%),
    linear-gradient(to bottom, rgba(8,6,4,0.42) 0%, rgba(8,6,4,0) 24%, rgba(8,6,4,0) 50%, rgba(8,6,4,0.62) 100%);
}
.ek-cine-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ek-cine-inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 124px var(--ek-gutter) 72px;
  color: #fff; will-change: transform, opacity;
}
.ek-cine-bottom { max-width: 900px; margin-right: auto; }
.ek-cine-tag {
  margin: 0; max-width: 32ch;
  font-size: clamp(15px, 1.4vw, 19px); font-weight: 400;
  letter-spacing: 0.005em; line-height: 1.45;
  color: rgba(255,255,255,0.82); text-wrap: pretty;
}
.ek-cine-scroll {
  position: absolute; right: var(--ek-gutter); bottom: 72px;
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.78); text-decoration: none;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.ek-cine-scroll::after { display: none; }
.ek-cine-arrow {
  display: inline-block; animation: ek-bob 2.4s ease-in-out infinite;
}
@keyframes ek-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ---------- Home: editorial hero (fallback) ---------- */
.ek-hero { padding: 140px var(--ek-gutter) 120px; }
.ek-hero-eyebrow { display: inline-flex; gap: 16px; align-items: center; margin-bottom: 56px; }
.ek-eyebrow-rule { width: 32px; height: 1px; background: var(--ek-rule-strong); display: inline-block; }
.ek-hero-foot { margin-top: 48px; }

/* ---------- Home: positioning block ---------- */
.ek-position {
  padding: 110px var(--ek-gutter) 90px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 96px; align-items: start;
}
.ek-position > .ek-eyebrow { grid-column: 1 / -1; }
.ek-position .ek-pull { margin-top: 8px; }
.ek-position-lede { align-self: end; color: var(--ek-mute); max-width: 46ch; }

/* ---------- Home: three pillars ---------- */
.ek-pillars { padding-bottom: 40px; }
.ek-section-head {
  padding: 80px var(--ek-gutter) 48px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.ek-section-more { color: var(--ek-accent); }
.ek-pillars-grid {
  padding: 0 var(--ek-gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
}
.ek-pillar { border-top: 1px solid var(--ek-rule-strong); padding-top: 24px; }
.ek-pillar-n { color: var(--ek-mute); margin-bottom: 28px; }
.ek-pillar-h {
  font-size: clamp(22px, 2vw, 27px); font-weight: 400;
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.ek-pillar-line { font-size: 16px; color: var(--ek-accent); margin: 0 0 18px; letter-spacing: -0.01em; }
.ek-pillar-body { font-size: 15px; color: var(--ek-mute); margin: 0; }

/* ---------- Home: feature cards ---------- */
.ek-works-list { padding-bottom: 80px; }
.ek-feature {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: end;
  padding: 64px var(--ek-gutter) 96px;
}
.ek-feature[data-reverse='true'] { grid-template-columns: 1fr 1.35fr; }
.ek-feature[data-reverse='true'] .ek-feature-photo { order: 2; }
.ek-feature[data-reverse='true'] .ek-feature-text  { order: 1; }
.ek-feature-photo { position: relative; }
.ek-feature-photo .ek-image { aspect-ratio: 4 / 5; }
.ek-feature-text { padding-bottom: 8px; }
.ek-feature-title {
  font-size: clamp(30px, 3.2vw, 44px); font-weight: 350;
  letter-spacing: -0.025em; line-height: 1.02; margin: 20px 0 18px;
}

/* ---------- Home: trust / CTA note ---------- */
.ek-note {
  padding: 140px var(--ek-gutter);
  display: flex; flex-direction: column; gap: 28px; align-items: start;
}
.ek-note > .ek-eyebrow { display: block; }
.ek-note .ek-pull { max-width: 30ch; }

/* ---------- Page heads ---------- */
.ek-pagehead { padding: 120px var(--ek-gutter) 80px; }
.ek-pagehead .ek-eyebrow { display: block; margin-bottom: 32px; }

/* ---------- Works: inline (all projects on one page) ---------- */
.ek-works-inline { padding: 0; }
.ek-work { padding: 0 var(--ek-gutter); }
.ek-work .ek-rule { margin: 0; }
.ek-work + .ek-work { margin-top: 8px; }
.ek-work-head {
  padding: 64px 0 40px;
  display: grid; grid-template-columns: 80px 1fr auto; gap: 32px;
  align-items: baseline;
}
.ek-work-title {
  font-size: clamp(30px, 3.2vw, 44px); font-weight: 350;
  letter-spacing: -0.025em; line-height: 1.02; margin: 0;
}
.ek-work-metaline {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ek-mute); justify-self: end; text-align: right;
}
.ek-work-metaline .ek-dot { opacity: 0.4; }
.ek-work-metaline .ek-status.is-progress { color: var(--ek-accent); }
.ek-work-image { padding-bottom: 56px; }
.ek-work-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px 96px;
  padding-bottom: 80px; align-items: start;
}
.ek-work-strategy { grid-column: 1 / 2; }
.ek-work-strategy-label { display: block; margin-bottom: 16px; color: var(--ek-accent); }
.ek-work-brief { grid-column: 2 / 3; }
.ek-work-brief .ek-work-strategy-label { color: var(--ek-mute); }
.ek-work-notes {
  grid-column: 1 / -1; padding-top: 32px;
  border-top: 1px solid var(--ek-rule);
  display: flex; flex-direction: column; gap: 20px;
}
.ek-work-note { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.ek-note-num {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ek-mute); padding-top: 4px;
}
.ek-work-note p { margin: 0; max-width: 48ch; }

/* ---------- Approach page ---------- */
.ek-approach-pillars { padding: 72px var(--ek-gutter); }
.ek-approach-pillars-head { display: block; margin-bottom: 48px; }
.ek-approach-pillars-list { display: flex; flex-direction: column; }
.ek-approach-pillar {
  display: grid; grid-template-columns: 120px 1fr; gap: 48px;
  padding: 48px 0; border-top: 1px solid var(--ek-rule); align-items: start;
}
.ek-approach-pillar-n {
  font-size: clamp(32px, 3.4vw, 48px); font-weight: 300;
  letter-spacing: -0.04em; color: var(--ek-accent); line-height: 0.9;
}
.ek-approach-pillar-h {
  font-size: clamp(23px, 2.2vw, 30px); font-weight: 400;
  letter-spacing: -0.025em; margin: 0 0 10px;
}
.ek-approach-pillar-line { font-size: 18px; color: var(--ek-accent); margin: 0 0 18px; }
.ek-approach-pillar-main .ek-body { max-width: 60ch; margin-bottom: 0; }

/* ---------- About / Studio ---------- */
.ek-about-bio {
  padding: 0 var(--ek-gutter) 96px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 96px; align-items: start;
}
.ek-about-aside {
  position: sticky; top: 120px;
  border-top: 2px solid var(--ek-accent); padding-top: 20px;
}
.ek-about-thesis {
  margin: 16px 0 0;
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 350;
  letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
.ek-about-expertise {
  padding: 80px var(--ek-gutter);
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 96px; align-items: start;
}
.ek-about-expertise-head { display: block; }
.ek-about-expertise-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.ek-about-expertise-item { border-top: 1px solid var(--ek-rule-strong); padding-top: 22px; }
.ek-about-expertise-item .ek-eyebrow { color: var(--ek-mute); margin-bottom: 22px; display: block; }
.ek-about-expertise-item .ek-pillar-h { margin-bottom: 12px; }
.ek-about-bg {
  padding: 80px var(--ek-gutter);
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 96px; align-items: start;
}
.ek-about-bg > .ek-eyebrow { display: block; }
.ek-about-bg-list { display: flex; flex-direction: column; }
.ek-about-bg-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 48px;
  padding: 24px 0; border-bottom: 1px solid var(--ek-rule); align-items: baseline;
}
.ek-about-bg-row .ek-eyebrow { color: var(--ek-mute); }
.ek-about-bg-row p { max-width: 56ch; margin: 0; }
.ek-studio-pillars {
  padding: 80px var(--ek-gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
}
.ek-pillar-title {
  font-size: clamp(28px, 2.8vw, 38px); font-weight: 350;
  letter-spacing: -0.025em; line-height: 1.05; margin: 20px 0 16px;
}
.ek-process { padding: 96px var(--ek-gutter) 64px; }
.ek-process > .ek-eyebrow { display: block; margin-bottom: 48px; }
.ek-process-list { display: flex; flex-direction: column; }
.ek-process-row {
  display: grid; grid-template-columns: 80px 1fr 2fr; gap: 48px;
  padding: 32px 0; border-bottom: 1px solid var(--ek-rule); align-items: baseline;
}
.ek-process-num { font-family: ui-monospace, monospace; font-size: 13px; color: var(--ek-mute); }
.ek-process-title { font-size: clamp(21px, 2vw, 26px); font-weight: 350; letter-spacing: -0.02em; }
.ek-process-body { font-size: 16px; line-height: 1.55; color: var(--ek-mute); margin: 0; max-width: 52ch; }
.ek-services { padding: 96px var(--ek-gutter); }
.ek-services > .ek-eyebrow { display: block; margin-bottom: 40px; }
.ek-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px; }
.ek-service-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--ek-rule);
}
.ek-service-name { font-size: clamp(19px, 1.8vw, 23px); font-weight: 350; letter-spacing: -0.015em; }

/* ---------- Visual Notebook ---------- */
.ek-vn-intro { padding: 80px var(--ek-gutter) 56px; }
.ek-vn-introtext { max-width: 56ch; color: var(--ek-mute); font-size: 15px; }
.ek-vn {
  padding: 0 var(--ek-gutter) 96px;
  columns: 2; column-gap: 40px;
}
.ek-vn-item { display: block; break-inside: avoid; margin-bottom: 56px; }
.ek-vn-img-inner {
  display: block; width: 100%;
  background: #e7e2d8; border-radius: 2px;
}
.ek-vn-credit { margin-top: 16px; font-size: 12px; color: var(--ek-mute); letter-spacing: 0.02em; }

/* ---------- Contact ---------- */
.ek-contact {
  padding: 40px var(--ek-gutter) 120px;
  max-width: 620px;
  display: flex; flex-direction: column; gap: 72px;
}
.ek-contact-mail {
  display: block; margin-top: 14px;
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 350;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--ek-accent);
}
.ek-contact-phone {
  margin-top: 12px; font-size: clamp(20px, 1.9vw, 25px); font-weight: 350;
  letter-spacing: -0.015em;
}
.ek-contact-form { padding: 0; }
.ek-field { display: block; margin-bottom: 32px; }
.ek-field .ek-eyebrow { display: block; margin-bottom: 10px; }
.ek-field input, .ek-field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ek-rule);
  padding: 12px 0; font: inherit; font-size: 18px; color: var(--ek-ink);
  font-family: var(--ek-font); resize: vertical;
  transition: border-color .25s ease;
}
.ek-field input:focus, .ek-field textarea:focus {
  outline: none; border-bottom-color: var(--ek-accent);
}
.ek-field input::placeholder, .ek-field textarea::placeholder { color: var(--ek-faint); }
.ek-submit {
  margin-top: 8px; background: transparent; cursor: pointer;
  border: 1px solid var(--ek-ink); padding: 16px 24px;
  font: inherit; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ek-ink); transition: background .25s ease, color .25s ease;
}
.ek-submit:hover { background: var(--ek-ink); color: var(--ek-bg); }
.ek-sent {
  border: 1px solid var(--ek-accent); padding: 24px;
  background: var(--ek-accent-soft);
}

/* ---------- Footer ---------- */
.ek-footer { margin-top: 80px; padding: 0 var(--ek-gutter) 32px; }
.ek-footer-grid {
  padding: 56px 0;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 64px;
}
.ek-footer-mail {
  display: block; margin-top: 12px; font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 350; letter-spacing: -0.018em; color: var(--ek-ink);
}
.ek-footer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 14px; }
.ek-footer-bottom {
  padding-top: 24px; border-top: 1px solid var(--ek-rule);
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ek-mute);
}

/* ---------- Images ---------- */
.ek-image {
  margin: 0; position: relative; overflow: hidden; background: #e7e2d8;
}
.ek-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
  transform: scale(1.04); opacity: 0;
}
.ek-image img.loaded { transform: scale(1); opacity: 1; }
.ek-feature:hover .ek-image img.loaded { transform: scale(1.04); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --ek-gutter: 24px; }
  .ek-cine { margin-top: -64px; }

  /* Hero / position */
  .ek-position { grid-template-columns: 1fr; gap: 32px; }
  .ek-position > .ek-eyebrow { grid-column: auto; }
  .ek-pillars-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Features */
  .ek-feature { grid-template-columns: 1fr !important; gap: 32px; }
  .ek-feature[data-reverse='true'] .ek-feature-photo,
  .ek-feature[data-reverse='true'] .ek-feature-text { order: unset; }

  /* Works inline */
  .ek-work-head { grid-template-columns: 48px 1fr; }
  .ek-work-head .ek-work-metaline { display: none; }
  .ek-work-body { grid-template-columns: 1fr; gap: 40px; }
  .ek-work-strategy, .ek-work-brief { grid-column: auto; }
  .ek-work-notes { grid-column: auto; }

  /* Approach */
  .ek-approach-pillar { grid-template-columns: 1fr; gap: 16px; }
  .ek-approach-pillar-n { font-size: 32px; }

  /* About */
  .ek-about-bio { grid-template-columns: 1fr; }
  .ek-about-aside { position: static; }
  .ek-about-expertise { grid-template-columns: 1fr; }
  .ek-about-expertise-list { grid-template-columns: 1fr; }
  .ek-about-bg { grid-template-columns: 1fr; }
  .ek-studio-pillars { grid-template-columns: 1fr; }
  .ek-services-grid { grid-template-columns: 1fr; }
  .ek-process-row { grid-template-columns: 48px 1fr; }
  .ek-process-row .ek-process-body { grid-column: 2; }

  /* Notebook */
  .ek-vn { columns: 1; }

  /* Note / CTA */
  .ek-note { padding: 80px var(--ek-gutter); }

  /* Footer */
  .ek-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Nav */
  .ek-menu { gap: 20px; }
}

@media (max-width: 600px) {
  :root { --ek-gutter: 20px; }

  /* Smaller display type on phones */
  .ek-display     { font-size: clamp(34px, 9vw, 48px); }
  .ek-display-md  { font-size: clamp(32px, 8.5vw, 46px); }
  .ek-display-lg  { font-size: clamp(36px, 9.5vw, 50px); }
  .ek-lede        { font-size: 17px; }

  /* Hero — tighter inner padding, hide scroll indicator to avoid overlap */
  .ek-cine        { height: 85vh; min-height: 480px; margin-top: -48px; }
  .ek-cine-inner  { padding: 80px var(--ek-gutter) 56px; }
  .ek-cine-scroll { display: none; }

  /* Reduce all the big section paddings */
  .ek-position    { padding: 56px var(--ek-gutter) 48px; }
  .ek-section-head { padding: 48px var(--ek-gutter) 32px; }
  .ek-pillars-grid { padding: 0 var(--ek-gutter); gap: 24px; }
  .ek-pagehead    { padding: 64px var(--ek-gutter) 48px; }
  .ek-note        { padding: 56px var(--ek-gutter); }
  .ek-process     { padding: 56px var(--ek-gutter) 40px; }
  .ek-services    { padding: 56px var(--ek-gutter); }
  .ek-about-expertise { padding: 48px var(--ek-gutter); }
  .ek-about-bg    { padding: 48px var(--ek-gutter); }
  .ek-studio-pillars { padding: 48px var(--ek-gutter); gap: 40px; }
  .ek-approach-pillars { padding: 48px var(--ek-gutter); }
  .ek-vn-intro    { padding: 48px var(--ek-gutter) 32px; }
  .ek-vn          { padding: 0 var(--ek-gutter) 56px; }
  .ek-contact     { padding: 32px var(--ek-gutter) 72px; gap: 48px; }
  .ek-footer-grid { padding: 40px 0; gap: 32px; grid-template-columns: 1fr; }

  /* Works inline — tighter */
  .ek-work-head   { padding: 40px 0 24px; gap: 16px; }
  .ek-work-image  { padding-bottom: 32px; }
  .ek-work-body   { padding-bottom: 48px; gap: 28px; }

  /* Feature cards — tighter */
  .ek-feature     { padding: 40px var(--ek-gutter) 56px; gap: 24px; }

  /* Process rows — tighter */
  .ek-process-row { padding: 20px 0; }

  /* Nav — hamburger */
  .ek-nav        { gap: 0; padding: 22px var(--ek-gutter) 16px; }
  .ek-mark       { font-size: 15px; }
  .ek-menu       { display: none; }
  .ek-nav-toggle { display: flex; }
  .ek-nav[data-onvideo='true'] .ek-nav-toggle-bar { background: #fff; }

  /* Drawer — toggled via data-open on the drawer element itself (appended to body) */
  .ek-nav-drawer[data-open='true'] { display: flex; }
}

/* ---------- Hamburger toggle button ---------- */
@media (min-width: 601px) {
  .ek-nav-toggle { display: none; }   /* hidden on desktop */
}
.ek-nav-toggle {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none; padding: 6px;
  cursor: pointer; margin-left: auto;
}
.ek-nav-toggle-bar {
  display: block; width: 100%; height: 1.5px;
  background: var(--ek-ink);
  transition: transform .3s ease, opacity .3s ease;
}
/* X state when open */
.ek-nav[data-open='true'] .ek-nav-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.ek-nav[data-open='true'] .ek-nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.ek-nav[data-open='true'] .ek-nav-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------- Mobile nav drawer ---------- */
/* Drawer is appended to <body>, never inside the nav, so backdrop-filter
   on the nav cannot affect its fixed positioning (iOS Safari bug). */
.ek-nav-drawer {
  display: none;   /* shown only when data-open='true' via media-query rule */
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--ek-bg);
  flex-direction: column; justify-content: center;
  padding: 0 var(--ek-gutter) 48px;
  padding-top: 64px;  /* clear the nav bar */
  z-index: 48;        /* nav is z-index 50, so it sits on top */
}
.ek-nav-drawer a {
  display: block;
  font-size: clamp(36px, 10vw, 52px);
  font-weight: 350; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ek-ink); text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid var(--ek-rule);
}
.ek-nav-drawer a:first-child { border-top: 1px solid var(--ek-rule); }
.ek-nav-drawer a.active { color: var(--ek-accent); }