/* ==========================================================================
   Landex Design. One grotesk (General Sans), never italic, emphasis by oak
   colour. Warm paper ground, dark anthracite bands, glass over the hero.
   ========================================================================== */

@font-face { font-family: 'General Sans'; src: url('/assets/fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap }

:root {
  --paper: #F4F1EB;
  --paper-2: #EAE5DB;
  --card: #FBFAF7;
  --ink: #191714;
  --ink-2: #4B463F;
  --ink-3: #7A7265;
  --line: rgba(25, 23, 20, .1);
  --line-2: rgba(25, 23, 20, .18);
  --oak: #B5773F;
  --oak-ink: #8C5726;
  --oak-light: #E9B884;
  --dark: #1B1A17;
  --on-dark: #F4F1EB;
  --on-dark-2: rgba(244, 241, 235, .66);
  --r: 22px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1360px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, canvas { display: block; max-width: 100% }
img { height: auto }
a { color: inherit }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1; letter-spacing: -.03em }
h2 { font-size: clamp(34px, 5vw, 74px); letter-spacing: -.04em; line-height: .98; text-wrap: balance }
h3 { font-size: 21px; letter-spacing: -.015em; line-height: 1.2 }
p { margin: 0 }
ul, ol { margin: 0 }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; border-radius: 6px }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter) }
.mono { font-size: 13px; line-height: 1.4; font-weight: 500; letter-spacing: .01em; color: var(--ink-3); font-variant-numeric: tabular-nums }
.mono.on-dark { color: rgba(244, 241, 235, .5) }
.oak { color: var(--oak-ink) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px }
.skip:focus { top: 12px }
.ph { display: block }

/* ---------- buttons ---------- */

.acts { display: flex; flex-wrap: wrap; gap: 10px }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .35s var(--ease), background-color .3s, box-shadow .3s;
}
.pill svg { width: 18px; height: 18px; flex: none }
.pill:hover { transform: translateY(-2px) }
.pill-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2) }
.pill-line:hover { box-shadow: inset 0 0 0 1px var(--ink) }
.pill-light { background: var(--paper); color: var(--ink) }
.pill-ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(244, 241, 235, .3) }
.pill-glass {
  background: rgba(255, 255, 255, .14); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.glass {
  background: rgba(24, 21, 18, .3); color: #fff; border-radius: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 24px 48px -24px rgba(0, 0, 0, .4);
}
.more {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none;
  white-space: nowrap; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); transition: border-color .3s, gap .3s;
}
.more svg { width: 18px; height: 18px }
.more:hover { border-color: var(--ink); gap: 12px }

/* ---------- header ---------- */

.head { position: fixed; inset: 12px 12px auto; z-index: 50; pointer-events: none }
.head-bar {
  pointer-events: auto; max-width: var(--max); margin: 0 auto; height: 62px;
  display: flex; align-items: center; gap: 12px; padding: 0 8px 0 18px; border-radius: 999px;
  background: rgba(244, 241, 235, .74);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(25, 23, 20, .08), 0 12px 32px -20px rgba(0, 0, 0, .35);
  transition: background-color .4s, color .4s, box-shadow .4s;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -.025em; white-space: nowrap }
.brand .mark { width: 26px; height: 26px }
.brand em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 5px; transition: color .4s }
.brand.on-dark em { color: rgba(244, 241, 235, .5) }
.nav { display: flex; gap: 2px; margin: 0 auto }
.nav a { padding: 9px 14px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; transition: background-color .25s }
.nav a:hover, .nav a[aria-current] { background: rgba(25, 23, 20, .07) }
.nav-contact { display: none }
.head-cta { height: 46px; padding: 0 20px; font-size: 15px }
.menu-btn { display: none }

.home .head:not(.scrolled) .head-bar {
  background: rgba(20, 18, 15, .16); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.home .head:not(.scrolled) .brand em { color: rgba(255, 255, 255, .7) }
.home .head:not(.scrolled) .nav a:hover, .home .head:not(.scrolled) .nav a[aria-current] { background: rgba(255, 255, 255, .14) }
.home .head:not(.scrolled) .head-cta { background: #fff; color: var(--ink) }

/* ---------- hero: framed, copy in the corners, never over the island ---------- */

.hero { height: 100svh; min-height: 600px; max-height: 1180px; padding: 10px }
.hero-frame {
  position: relative; height: 100%; border-radius: var(--r); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #d5d9dc, #b9ae98);
}
.hero-media { position: absolute; inset: -1.5%; transform: scale(1.04); will-change: transform }
.hero-media picture, .hero-media img, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 70%;
}
.hero-media picture { transition: opacity 1.2s ease, transform 2.6s var(--ease), filter 1.6s ease }
.js .hero:not(.ready) .hero-media picture { opacity: 0; transform: scale(1.08); filter: blur(8px) }
.hero-video { opacity: 0; transition: opacity 1.4s ease }
.hero.playing .hero-video { opacity: 1 }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(14, 12, 10, .62), rgba(14, 12, 10, 0) 48%),
    linear-gradient(to right, rgba(14, 12, 10, .42), rgba(14, 12, 10, 0) 52%),
    linear-gradient(to bottom, rgba(14, 12, 10, .3), rgba(14, 12, 10, 0) 26%);
}
.hero-ui {
  position: absolute; inset: 0; color: #fff;
  padding: 100px clamp(20px, 3.2vw, 44px) clamp(20px, 3vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "list card" ". ." "copy ." "acts tag"; column-gap: 24px;
}
.hero-list { grid-area: list; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 3px; align-self: start; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35) }
.hero-list a { text-decoration: none }
.hero-list a:hover { text-decoration: underline; text-underline-offset: 3px }
.hero-card { grid-area: card; width: 300px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-self: start }
.hero-card .mono { color: rgba(255, 255, 255, .72) }
.hero-card p:not(.mono) { font-size: 15px; line-height: 1.45 }
.hero-card-link {
  display: flex; align-items: center; gap: 12px; margin: 4px -6px -6px; padding: 6px 12px 6px 6px; border-radius: 12px;
  background: rgba(255, 255, 255, .12); text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color .3s;
}
.hero-card-link:hover { background: rgba(255, 255, 255, .22) }
.hero-card-link img { width: 52px; height: 52px; object-fit: cover; border-radius: 9px }
.hero-card-link svg { width: 18px; height: 18px; margin-left: auto }
.hero-copy { grid-area: copy }
.hero-kicker { font-size: 15px; color: rgba(255, 255, 255, .82); margin-bottom: 16px }
/* sized so "Namještaj" ends before the island starts (about 40 % of the frame) */
.hero h1 { font-size: clamp(54px, 6.4vw, 104px); line-height: .9; letter-spacing: -.055em }
.ln { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em }
.ln > span { display: block }
.hero-sub { font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; margin-top: 18px }
.hero-sub b { font-weight: 500; color: var(--oak-light) }
.hero-acts { grid-area: acts; margin-top: 28px }
.hero-tag { grid-area: tag; align-self: end; justify-self: end; color: rgba(255, 255, 255, .62) }

.js .hero-ui [style*="--i"] { transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(.25s + var(--i) * .08s) }
.js .hero:not(.ready) .hero-ui [style*="--i"] { opacity: 0; transform: translateY(16px) }
.js .hero:not(.ready) .hero-ui .ln > span[style] { opacity: 1; transform: translateY(106%) }

/* ---------- sections ---------- */

.band { padding-block: clamp(80px, 11vw, 160px) }
.band-tight { padding-block: clamp(56px, 7vw, 104px) }
.band + .band-tight, .band-tight + .band-tight { padding-top: 0 }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 4.5vw, 64px); max-width: 980px }
.sec-head.split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none }
.sec-head.split > div { display: flex; flex-direction: column; gap: 16px; max-width: 900px }

.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s) }
.js .rv.in { opacity: 1; transform: none }

/* statement that fills on scroll */
.stmt { font-size: clamp(30px, 4.5vw, 66px); line-height: 1.08; letter-spacing: -.035em; font-weight: 500; margin-top: clamp(22px, 3vw, 40px); max-width: 1180px; text-wrap: pretty }
.stmt .acc { color: var(--oak-ink) }
.js .stmt .w { transition: color .4s ease }
.js .stmt .w:not(.on) { color: rgba(25, 23, 20, .15) }

/* idea to build */
.idea { background: var(--paper-2); padding-block: clamp(80px, 10vw, 150px) }
.idea-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center }
.idea-text { display: flex; flex-direction: column; gap: 22px }
.idea-text h2 { font-size: clamp(42px, 5.6vw, 86px) }
.idea-text p:not(.mono) { color: var(--ink-2); max-width: 430px }
.idea-hint { display: flex; align-items: center; gap: 10px; color: var(--ink) }
.idea-hint::before { content: ''; width: 28px; height: 1px; background: currentColor }
@media (hover: none) { .hint-mouse { display: none } }
@media (hover: hover) { .hint-touch { display: none } }
.idea-fig { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 1079 / 796; background: #eee; box-shadow: 0 40px 80px -40px rgba(25, 23, 20, .45) }
.idea-fig .ph, .idea-fig img { width: 100%; height: 100% }
.idea-fig img { object-fit: cover }
.idea-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; opacity: 0; transition: opacity .8s ease; cursor: crosshair }
.idea-fig.has-sketch canvas { opacity: 1 }
.idea-tag { position: absolute; padding: 7px 12px; border-radius: 999px; background: rgba(244, 241, 235, .88); color: var(--ink); transition: opacity .5s; pointer-events: none }
.idea-tag.t1 { top: 14px; left: 14px; opacity: 0 }
.idea-tag.t2 { bottom: 14px; right: 14px }
.has-sketch .idea-tag.t1 { opacity: 1 }
.has-sketch:not(.touched) .idea-tag.t2 { opacity: 0 }

/* giant index with a photo that follows the pointer */
.idx { list-style: none; padding: 0; border-top: 1px solid var(--line-2) }
.idx-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 52px; align-items: center; gap: 20px;
  padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line-2); text-decoration: none;
  transition: padding .5s var(--ease);
}
.idx-name { font-size: clamp(32px, 5.4vw, 84px); font-weight: 500; letter-spacing: -.05em; line-height: 1; transition: color .3s }
.idx-thumb { display: none }
.idx-go { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .3s, color .3s, transform .5s var(--ease) }
.idx-go svg { width: 20px; height: 20px }
.idx-row:hover { padding-left: 14px }
.idx-row:hover .idx-name { color: var(--oak-ink) }
.idx-row:hover .idx-go { background: var(--ink); color: var(--paper); transform: rotate(-45deg) }
.idx-float {
  position: fixed; left: 0; top: 0; z-index: 40; width: 260px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  pointer-events: none; opacity: 0; scale: .8; transition: opacity .3s, scale .5s var(--ease);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .45);
}
.idx-float.on { opacity: 1; scale: 1 }
.idx-float img { width: 100%; height: 100%; object-fit: cover }
@media (hover: none) { .idx-float { display: none } }

/* bento of real work */
.bento { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 250px); grid-auto-flow: dense; gap: 10px }
.bento li { border-radius: 16px; overflow: hidden }
.bento .t { grid-row: span 2 }
.bento .w { grid-column: span 2 }
.gal-item { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in; overflow: hidden }
.gal-item .ph, .bento .gal-item img { width: 100%; height: 100% }
.gal-item img { object-fit: cover; transition: transform 1s var(--ease) }
.gal-item:hover img { transform: scale(1.045) }

/* materials marquee */
.mq { overflow: hidden; border-block: 1px solid var(--line-2); padding-block: clamp(18px, 2.4vw, 30px) }
.mq-track { display: flex; width: max-content; animation: mq 42s linear infinite }
.mq span { display: inline-flex; align-items: center; font-size: clamp(36px, 6vw, 96px); font-weight: 500; letter-spacing: -.05em; line-height: 1; white-space: nowrap }
.mq span::after { content: ''; width: .22em; height: .22em; margin: 0 .55em; border-radius: 3px; background: var(--oak) }
@keyframes mq { to { transform: translateX(-50%) } }

/* process */
.steps { list-style: none; padding: 34px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; position: relative }
.steps::before, .steps::after { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--line-2) }
.steps::after { background: var(--oak); transform-origin: left; transform: scaleX(0); transition: transform 2s var(--ease) .2s }
.steps.in::after { transform: none }
.steps li { position: relative; display: flex; flex-direction: column; gap: 10px }
.steps li::before { content: ''; position: absolute; top: -34px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink) }
.steps h3 { font-size: 24px }
.steps p { color: var(--ink-2); font-size: 16px }

/* details */
.det { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.det li { background: var(--card); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column }
.det img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover }
.det div { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px }
.det p { color: var(--ink-2); font-size: 15px }

/* faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px) }
.faq details { border-top: 1px solid var(--line-2) }
.faq details:last-child { border-bottom: 1px solid var(--line-2) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.015em }
.faq summary::-webkit-details-marker { display: none }
.faq summary i { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: rotate .4s var(--ease) }
.faq summary svg { width: 18px; height: 18px }
.faq details[open] summary i { rotate: 45deg }
.faq details p { padding: 0 52px 24px 0; color: var(--ink-2); max-width: 680px }

/* closing band */
.cta { background: var(--dark); color: var(--on-dark); padding-block: clamp(80px, 10vw, 150px) }
.cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: end }
.cta-h { font-size: clamp(54px, 9.4vw, 150px); letter-spacing: -.06em; line-height: .9; margin: 18px 0 26px }
.cta-p { color: var(--on-dark-2); max-width: 520px; margin-bottom: 30px }
.cta .oak { color: var(--oak-light) }
.crow { list-style: none; padding: 0 }
.crow a { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; transition: padding .4s var(--ease) }
.crow a:hover { padding-left: 8px }
.crow svg { width: 22px; height: 22px; flex: none; opacity: .75 }
.crow span { display: flex; flex-direction: column; font-size: 18px; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere }
.crow small { font-size: 13px; font-weight: 400; opacity: .6; letter-spacing: 0 }
.cta .crow li:first-child a { border-top: 1px solid rgba(244, 241, 235, .14) }
.cta .crow a { border-color: rgba(244, 241, 235, .14) }

/* ---------- inner pages ---------- */

.pg-head { padding-top: clamp(110px, 12vw, 150px); padding-bottom: clamp(48px, 6vw, 88px) }
.pg-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: end }
.pg-text, .pg-head-plain .wrap { display: flex; flex-direction: column; gap: 20px }
.pg-head h1 { font-size: clamp(46px, 7vw, 108px); letter-spacing: -.055em; line-height: .92; text-wrap: balance }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-2); max-width: 600px }
.pg-media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; max-height: 74vh; background: var(--paper-2) }
.pg-media .ph, .pg-media img { width: 100%; height: 100% }
.pg-media img { object-fit: cover }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-3) }
.crumbs a { text-decoration: none }
.crumbs a:hover { color: var(--ink) }

.points { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px }
.points li { padding: 26px 0 34px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px }
.points h3 { font-size: 24px }
.points p { color: var(--ink-2) }

.gal { list-style: none; padding: 0; columns: 3 260px; column-gap: 10px }
.gal li { break-inside: avoid; margin-bottom: 10px; border-radius: 14px; overflow: hidden }
.gal li[hidden] { display: none }

.more-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.more-cards a { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none }
.more-cards .ph, .more-cards img { width: 100%; height: 100% }
.more-cards img { object-fit: cover; transition: transform 1s var(--ease) }
.more-cards a:hover img { transform: scale(1.04) }
.more-cards a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 12, 10, .6), rgba(14, 12, 10, 0) 50%) }
.more-cards span { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em }
.more-cards svg { width: 22px; height: 22px; flex: none }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.chip { height: 42px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .25s, color .25s }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink) }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper) }

.pg-head-plain .contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end }
.contact-grid > div:first-child { display: flex; flex-direction: column; gap: 20px }
.send { background: var(--card); border-radius: 20px; padding: clamp(22px, 2.5vw, 32px) }
.send ol { margin: 16px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2) }
.send b { color: var(--ink); font-weight: 500 }
.note { color: var(--ink-3); font-size: 15px }
.pg-head-plain + .band-tight .crow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--line-2) }
.map {
  display: flex; flex-direction: column; gap: 6px; margin-top: 40px; padding: clamp(24px, 4vw, 48px);
  border-radius: var(--r); background: var(--dark); color: var(--on-dark); text-decoration: none;
}
.map b { font-size: clamp(36px, 5vw, 72px); font-weight: 500; letter-spacing: -.05em; line-height: 1 }
.map > span:not(.mono) { color: var(--on-dark-2) }
.map .map-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--on-dark); font-weight: 500 }
.map-go svg { width: 18px; height: 18px; transition: transform .4s var(--ease) }
.map:hover .map-go svg { transform: translateX(4px) }

/* ---------- footer ---------- */

.foot { background: var(--dark); color: var(--on-dark); padding-top: clamp(56px, 7vw, 96px); overflow: hidden; border-top: 1px solid rgba(244, 241, 235, .08) }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 40px }
.foot-intro p { color: var(--on-dark-2); max-width: 380px; margin-top: 18px }
.foot-h { font-size: 13px; color: rgba(244, 241, 235, .48); margin-bottom: 12px }
.foot ul { list-style: none; padding: 0 }
.foot li a { text-decoration: none; line-height: 2; opacity: .86; overflow-wrap: anywhere }
.foot li a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(244, 241, 235, .12); font-size: 14px; color: rgba(244, 241, 235, .48) }
.wordmark {
  margin: 24px 0 0; text-align: center; white-space: nowrap; font-size: 28vw; font-weight: 600; letter-spacing: -.075em; line-height: .74;
  color: transparent; background: linear-gradient(180deg, rgba(244, 241, 235, .15), rgba(244, 241, 235, .02)); -webkit-background-clip: text; background-clip: text;
  transform: translateY(14%); user-select: none;
}

.mbar { display: none }

/* ---------- lightbox ---------- */

dialog.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #f4f1eb }
dialog.lb[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px }
dialog.lb::backdrop { background: rgba(14, 13, 11, .93) }
dialog.lb img { max-width: min(92vw, 1100px); max-height: 80dvh; border-radius: 12px; object-fit: contain }
.lb-cap { text-align: center; padding: 0 20px; max-width: 720px; opacity: .8 }
.lb-close { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; display: grid; place-items: center }
.lb-close svg { width: 22px; height: 22px }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px }
  .steps::before, .steps::after { display: none }
  .steps li::before { top: -22px }
  .det { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 899px) {
  .nav, .head-cta { display: none }
  .menu-btn {
    display: grid; place-content: center; gap: 5px; margin-left: auto; width: 46px; height: 46px; border-radius: 50%;
    border: 0; background: var(--ink); cursor: pointer;
  }
  .menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--paper); transition: transform .35s var(--ease) }
  .home .head:not(.scrolled) .menu-btn { background: #fff }
  .home .head:not(.scrolled) .menu-btn span { background: var(--ink) }
  body.menu-open .menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg) }
  body.menu-open .menu-btn span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg) }
  body.menu-open .nav {
    display: flex; position: fixed; top: 84px; left: 12px; right: 12px; flex-direction: column; gap: 2px; padding: 12px;
    background: var(--paper); color: var(--ink); border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4);
  }
  body.menu-open .nav a { font-size: 22px; padding: 12px 14px }
  body.menu-open .nav-contact { display: block }

  .idea-grid, .faq-grid, .cta-grid, .pg-grid, .pg-head-plain .contact-grid { grid-template-columns: minmax(0, 1fr) }
  .pg-media { aspect-ratio: 4 / 3 }
  .sec-head.split { flex-direction: column; align-items: flex-start }
  .idx-row { grid-template-columns: 34px 72px minmax(0, 1fr); gap: 14px }
  .idx-row:hover { padding-left: 0 }
  .idx-thumb { display: block; width: 72px; height: 72px; border-radius: 12px; overflow: hidden }
  .idx-thumb img { width: 100%; height: 100%; object-fit: cover }
  .idx-meta, .idx-go { display: none }
  .more-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .more-cards li:last-child { grid-column: span 2 }
  .more-cards li:last-child a { aspect-ratio: 16 / 9 }
}

@media (max-width: 759px) {
  body { font-size: 16px; padding-bottom: 78px }
  .head { inset: 8px 8px auto }
  .head-bar { height: 58px; padding-left: 16px }
  .hero { padding: 8px; min-height: 560px }
  .hero-acts .pill { flex: 1 }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; gap: 8px }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 0 }
  .steps li { padding: 0 0 30px 32px }
  .steps li::before { top: 4px; left: 0 }
  .steps li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 22px; bottom: 2px; width: 1px; background: var(--line-2) }
  .det { gap: 8px }
  .det div { padding: 14px 14px 18px }
  .points { grid-template-columns: minmax(0, 1fr) }
  .gal { columns: 2; column-gap: 8px }
  .gal li { margin-bottom: 8px }
  .faq details p { padding-right: 0 }
  .foot-grid { grid-template-columns: minmax(0, 1fr) }
  .pg-head-plain + .band-tight .crow { grid-template-columns: minmax(0, 1fr) }
  .mbar {
    display: flex; gap: 8px; position: fixed; z-index: 45; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom));
    transition: transform .5s var(--ease), opacity .4s;
  }
  /* the hero has its own buttons: the bar waits until they scroll away */
  .acts-visible .mbar { transform: translateY(130%); opacity: 0; pointer-events: none }
  .mbar .pill { flex: 1; height: 54px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45) }
  .mbar .pill-line { background: rgba(244, 241, 235, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 30px -12px rgba(0, 0, 0, .35) }
}

/* narrow landscape screens crop the sides: show more of the empty left so the island clears the heading */
@media (min-width: 760px) and (max-width: 1100px) and (orientation: landscape) {
  .hero-media picture, .hero-media img, .hero-video { object-position: 45% 70% }
}

/* phones and portrait tablets get the 9:16 picture: sky on top for the words, island low */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .hero-media picture, .hero-media img, .hero-video { object-position: 50% 70% }
  .hero-shade {
    background:
      linear-gradient(to bottom, rgba(14, 12, 10, .62), rgba(14, 12, 10, .34) 40%, rgba(14, 12, 10, 0) 62%),
      linear-gradient(to top, rgba(14, 12, 10, .55), rgba(14, 12, 10, 0) 30%);
  }
  .hero-copy { text-shadow: 0 2px 24px rgba(0, 0, 0, .35) }
  .hero-ui {
    padding: 92px clamp(18px, 4vw, 40px) clamp(18px, 3vw, 32px);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "copy" "." "acts" "tag";
  }
  .hero-list, .hero-card { display: none }
  .hero h1 { font-size: clamp(50px, 15vw, 120px) }
  .hero-kicker { margin-bottom: 12px }
  .hero-sub { margin-top: 14px }
  .hero-acts { margin-top: 0 }
  .hero-tag { justify-self: center; margin-top: 12px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important }
}