:root {
  --bg: #080808; --bg2: #121214; --fg: #f7f4ed; --mute: rgba(247, 244, 237, 0.55); --line: rgba(247, 244, 237, 0.14);
  --light: #ece8df; --ink: #0b0b10; --caramel: #cd9a70;
  --sans: "Outfit", system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif;
  --pad: clamp(18px, 3.2vw, 48px); --h1: clamp(46px, 7.4vw, 128px); --h2: clamp(38px, 5.6vw, 96px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-loading { overflow: hidden; height: 100vh; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--caramel); }
::selection { background: var(--caramel); color: var(--ink); }
:focus-visible { outline: 2px solid var(--caramel); outline-offset: 3px; }
h1, h2 { font-weight: 500; letter-spacing: -0.025em; line-height: 1.04; text-transform: uppercase; }
h2 { font-size: var(--h2); }
.ln { display: block; overflow: hidden; padding: 0.14em 0 0.06em; margin: -0.14em 0 -0.06em; }
.ln > i { display: block; font-style: normal; will-change: transform; }
.eyebrow { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--caramel); margin-bottom: 18px; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; }
.loader__logo { position: relative; width: min(560px, 74vw); aspect-ratio: 902 / 297; }
.loader__logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__text { filter: invert(1) blur(14px); opacity: 0; transform: translateY(12%); }
.loader__accent { opacity: 0; transform: translateY(-60%) rotate(-8deg); }
.loader__meta { position: absolute; left: var(--pad); right: var(--pad); bottom: 44px; display: flex; justify-content: space-between; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.loader__meta b, .loader__count { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.loader__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: 30px; height: 1px; background: var(--line); }
.loader__bar i { position: absolute; inset: 0; background: var(--caramel); transform: scaleX(0); transform-origin: left; }
@media (max-width: 600px) { .loader__meta span:last-child { display: none; } }

/* nav */
.nav::before { content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; background: linear-gradient(rgba(8, 8, 8, 0.75), transparent); pointer-events: none; transition: opacity 0.4s; }
.nav.is-light::before { opacity: 0; }
.nav { position: fixed; inset: 0 0 auto; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px var(--pad); transition: color 0.4s; }
.nav__logo { position: relative; width: 118px; height: 39px; }
.nav__logo img, .foot__logo img { position: absolute; inset: 0; height: 100%; width: auto; }
.logo-text { filter: invert(1); transition: filter 0.4s; }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.nav__links a { opacity: 0.7; transition: opacity 0.3s; }
.nav__links a:hover { opacity: 1; }
.nav .pill { justify-self: end; }
.nav.is-light { color: var(--ink); }
.nav.is-light .logo-text { filter: none; }
.nav.is-light .pill { background: var(--caramel); color: var(--ink); }
@media (max-width: 760px) { .nav { grid-template-columns: 1fr auto; } .nav__links { display: none; } }

.pill { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border-radius: 99px; background: var(--caramel); color: var(--ink); font-size: 14px; font-weight: 500; border: 0; cursor: pointer; transition: transform 0.4s var(--ease), background 0.3s, color 0.3s; }
.pill:hover { transform: scale(1.04); background: var(--fg); }
.pill--wide { width: 100%; height: 58px; font-size: 16px; }
.pill[disabled] { opacity: 0.5; cursor: wait; }

/* hero */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: grid; place-items: center; text-align: center; }
.hero__bg { position: absolute; inset: -6% 0 0; will-change: transform; }
.hero__inner { will-change: transform, opacity; }
.hero__bg img { width: 100%; height: 106%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(8, 8, 8, 0.55), transparent 70%), linear-gradient(180deg, rgba(8, 8, 8, 0.5), rgba(8, 8, 8, 0.15) 50%, rgba(8, 8, 8, 0.92)); }
.hero__inner { position: relative; padding: 0 var(--pad); display: grid; justify-items: center; gap: 26px; margin-top: -8vh; }
.hero__title { font-size: var(--h1); }
.hero__sub { max-width: 520px; color: var(--mute); font-size: clamp(15px, 1.3vw, 18px); }
.hero__foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); letter-spacing: 0.08em; text-transform: uppercase; }
.hero__logo { position: relative; display: block; width: 104px; height: 34px; }
.hero__logo img { position: absolute; inset: 0; height: 100%; width: auto; }
.hero__foot b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .hero__foot > span:nth-child(2) { display: none; } }

/* statements */
.say { padding: 22vh var(--pad); display: grid; gap: 14vh; }
/* shadow-title statements (same language as the hero): heavy white caps, each line shades the top of the next */
.say__l { font-size: clamp(26px, 3.6vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.01em; color: #fff; max-width: 1200px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7)); }
.say__l:nth-child(even) { justify-self: end; text-align: right; }
/* the shade is one tile per line box, so a line that wraps on a phone still gets shaded by the line above it */
.say__l > span { display: block; padding-top: 0.24em; margin-top: -0.24em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background: linear-gradient(180deg, #d0d0d0 0, #d0d0d0 0.18em, #555 0.215em, #9a9a9a 0.34em, #dcdcdc 0.48em, #fff 0.62em) 0 0.24em / 100% 1.04em repeat-y; -webkit-background-clip: text; background-clip: text; }
.say__l > span:first-child { background: linear-gradient(#fff, #fff) 0 0 / 100% 1.28em no-repeat, linear-gradient(180deg, #d0d0d0 0, #d0d0d0 0.18em, #555 0.215em, #9a9a9a 0.34em, #dcdcdc 0.48em, #fff 0.62em) 0 0.24em / 100% 1.04em repeat-y; -webkit-background-clip: text; background-clip: text; }
.say__l--end { font-size: clamp(34px, 5.4vw, 92px); }

/* pinned 3D scenes */
.ring { position: relative; height: 260vh; }
.mark { position: relative; height: 350vh; }
.ring__pin, .mark__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.ring__canvas, .mark__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring__head { position: absolute; top: 13vh; left: 0; right: 0; text-align: center; padding: 0 var(--pad); pointer-events: none; }
.ring__head p { margin: 20px auto 0; max-width: 440px; color: var(--mute); }
.ring__head { z-index: 2; }
.ring__canvas { z-index: 1; }
.mark__title { position: absolute; bottom: 15vh; left: 0; right: 0; text-align: center; padding: 0 var(--pad); pointer-events: none; }
.mark__cta { position: absolute; bottom: 7vh; }
@media (max-width: 760px) {
  .ring { height: 220vh; } .mark { height: 280vh; }

}

/* how it works: pinned row of cards that slides right → left with the scroll */
.out { position: relative; background: var(--bg); color: var(--fg); }
.out__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(20px, 3.5vh, 40px); padding: 96px 0 clamp(24px, 5vh, 56px); overflow: hidden; }
.out__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 0 var(--pad); }
.out__head h2 { font-size: clamp(34px, 3.9vw, 70px); }
.out__meter { display: grid; justify-items: end; gap: 12px; padding-bottom: 8px; font-size: 13px; letter-spacing: 0.12em; color: var(--mute); font-variant-numeric: tabular-nums; }
.out__count b { color: var(--fg); font-weight: 500; }
.out__bar { position: relative; width: 180px; height: 2px; background: var(--line); overflow: hidden; }
.out__bar i { position: absolute; inset: 0; background: var(--caramel); transform: scaleX(0); transform-origin: left; }
.out__view { min-height: 0; }
.out__track { list-style: none; height: 100%; display: flex; gap: clamp(14px, 1.4vw, 24px); padding: 0 var(--pad); width: max-content; will-change: transform; }

.ocard { position: relative; flex: none; width: clamp(300px, 27vw, 470px); height: 100%; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); }
.ocard__img { position: relative; flex: 1 1 52%; min-height: 0; overflow: hidden; }
.ocard__img img { position: absolute; top: 0; left: -12%; width: 124%; max-width: none; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ocard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(18, 18, 20, 0.85)); }
.ocard:hover .ocard__img img { transform: scale(1.04); }
.ocard__body { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2vw, 30px); }
.ocard__no { font-size: 13px; letter-spacing: 0.16em; color: var(--caramel); }
.ocard__tag { align-self: flex-start; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); }
.ocard h3 { font-size: clamp(22px, 1.75vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.ocard p { font-size: 15.5px; line-height: 1.55; color: var(--mute); max-width: 40ch; }
.ocard__you { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--fg); }
.ocard__you small { flex: none; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); }
.ocard--why h3 { font-size: clamp(26px, 2.2vw, 40px); }
/* the offer closes the row: caramel card, dark button at the very end */
.ocard--offer { justify-content: flex-end; width: clamp(320px, 31vw, 540px); background: linear-gradient(160deg, #e0b38d, #cd9a70 45%, #a8744b); border: 0; color: var(--ink); }
.ocard--offer .ocard__tag { color: rgba(11, 11, 16, 0.6); }
.ocard--offer .ocard__big { font-size: clamp(32px, 3vw, 54px); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; }
.ocard--offer p { color: rgba(11, 11, 16, 0.72); }
.ocard__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; margin-top: 10px; padding: 16px 22px 16px 26px; border-radius: 99px; background: var(--ink); color: var(--fg); font-size: 16px; font-weight: 500; transition: transform 0.4s var(--ease), background 0.3s; }
.ocard__btn i { font-style: normal; transition: transform 0.4s var(--ease); }
.ocard__btn:hover { background: #000; }
.ocard__btn:hover i { transform: translateX(4px); }

@media (max-width: 760px) {
  .out__pin { padding-top: 84px; gap: 18px; }
  .out__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .out__head h2 { font-size: clamp(28px, 8vw, 40px); }
  .out__meter { justify-items: start; padding: 0; }
  .out__bar { width: 140px; }
  .ocard { width: 80vw; }
  .ocard--offer { width: 84vw; }
  .ocard__img { flex-basis: 44%; }
  .ocard p { font-size: 14.5px; }
}
@media (max-width: 760px) and (max-height: 700px) { .ocard p { display: none; } .ocard--offer p, .ocard--why p { display: block; } }
/* without motion: a plain horizontal row you can swipe */
@media (prefers-reduced-motion: reduce) {
  .out__pin { position: relative; height: auto; }
  .out__view { overflow-x: auto; scroll-snap-type: x mandatory; }
  .ocard { height: min(620px, 78svh); scroll-snap-align: start; }
}

/* far anchor jumps: a quick fade instead of scrolling through every 3D scene */
.jump { position: fixed; inset: 0; z-index: 150; background: var(--bg); opacity: 0; pointer-events: none; }

/* services: pinned stage, one service per scroll step */
.svc { position: relative; height: 480vh; }
.svc__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(300px, 0.8fr) 1.2fr; gap: 4vw; align-items: center; padding: 90px var(--pad) 40px; }
.svc__side h2 { font-size: clamp(32px, 3.8vw, 64px); margin-bottom: 4vh; }
.svc__list { list-style: none; border-top: 1px solid var(--line); }
.svc__list li { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; opacity: 0.35; transition: opacity 0.4s; }
.svc__list li.is-on, .svc__list li:hover { opacity: 1; }
.svc__list span { font-size: 12px; color: var(--caramel); padding-top: 6px; }
.svc__list b { font-weight: 500; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -0.02em; }
.svc__list em { grid-column: 2; font-family: var(--sans); font-style: normal; font-size: 14px; color: var(--mute); max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.svc__list li.is-on em { max-height: 3em; }
.svc__bar { margin-top: 18px; height: 1px; background: var(--line); }
.svc__bar i { display: block; height: 100%; background: var(--caramel); transform-origin: left; transform: scaleX(0); }
.stage { position: relative; height: min(76svh, 720px); border-radius: 10px; overflow: hidden; background: var(--bg2); }
.stage__p { position: absolute; inset: 0; display: grid; place-items: center; clip-path: inset(0 0 0 100%); }
.stage__p.is-on { clip-path: inset(0 0 0 0); }
.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) saturate(0.9); }
.stage__cap { position: absolute; left: 22px; bottom: 18px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.dev { position: relative; background: #0d0d10; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; }
.dev video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dev--browser { width: 78%; aspect-ratio: 16 / 10.6; border-radius: 10px; }
.dev--browser video { height: calc(100% - 32px); }
.dev__bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #17171b; }
.dev__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a40; }
.dev__bar span { margin-left: 14px; flex: 1; max-width: 260px; font-size: 11px; color: var(--mute); background: #0d0d10; border-radius: 6px; padding: 3px 10px; }
.dev--phone { height: 86%; aspect-ratio: 430 / 932; border-radius: 34px; border: 6px solid #1b1b1f; }
.bk { height: 100%; background: #f4eee6; color: #17140f; padding: 26px 16px; display: grid; align-content: start; gap: 12px; font-size: 13px; }
.bk small { font-size: 9px; letter-spacing: 0.2em; color: #b8734a; }
.bk > b { font-size: 22px; font-weight: 600; }
.bk__days, .bk__times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.bk__days span, .bk__times span { border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 10px; padding: 8px 0; font-size: 11px; }
.bk .on { background: #b8734a; color: #fff; border-color: #b8734a; }
.bk__ok { margin-top: 6px; border-radius: 99px; background: #2e9e5b; color: #fff; text-align: center; padding: 11px; font-weight: 600; }
.bk__notif { margin-top: 10px; display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); font-size: 11px; }
.bk__notif i { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #b8734a; }
.board { position: relative; width: 74%; background: rgba(247, 244, 237, 0.96); color: var(--ink); border-radius: 12px; padding: 28px; display: grid; gap: 20px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.board__logo { position: relative; height: 70px; }
.board__logo img { position: absolute; left: 0; top: 0; height: 100%; width: auto; }
.board__logo .logo-text { filter: none; }
.board__sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.board__sw span { background: var(--c); color: var(--fg); border-radius: 8px; padding: 34px 12px 10px; font-size: 11px; line-height: 1.3; border: 1px solid rgba(11, 11, 16, 0.1); }
.board__type { display: flex; gap: 18px; align-items: center; border-top: 1px solid rgba(11, 11, 16, 0.12); padding-top: 16px; }
.board__type > b { font-size: 54px; font-weight: 500; line-height: 1; }
.board__type div { display: grid; }
.board__type strong { font-weight: 600; }
.board__type em { font-size: 20px; color: #b97f52; }
.serp { position: relative; width: 76%; background: #fff; color: #202124; border-radius: 12px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); font-size: 13px; }
.serp__q { border: 1px solid #dfe1e5; border-radius: 99px; padding: 10px 16px; }
.serp__r small { color: #4d5156; }
.serp__r b { display: block; color: #1a0dab; font-weight: 500; font-size: 17px; margin: 2px 0; }
.serp__ai { display: flex; gap: 10px; background: #f3efe9; border-radius: 10px; padding: 12px 14px; }
.serp__ai i { font-style: normal; color: #b97f52; }
@media (max-width: 900px) {
  .svc { height: 400vh; }
  .svc__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px; padding-top: 76px; align-content: start; }
  .svc__side h2, .svc__side .eyebrow { display: none; }
  .svc__list { display: flex; overflow-x: auto; gap: 8px; border: 0; scrollbar-width: none; }
  .svc__list li { flex: none; display: block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; }
  .svc__list span, .svc__list em { display: none; }
  .svc__list b { font-size: 14px; }
  .dev--browser, .board, .serp { width: 90%; }
  .dev--phone { height: 92%; }
}
.sectors { padding: 6vh 0; }
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: 20px 0; }
.marquee__t { display: inline-flex; will-change: transform; }
.marquee__t span { font-size: clamp(28px, 4vw, 64px); letter-spacing: -0.03em; padding: 0 0.5em; text-transform: uppercase; }
.marquee__t span::after { content: "\2726"; color: var(--caramel); font-size: 0.4em; margin-left: 1em; vertical-align: middle; }

/* manifesto */
.manifest { padding: 22vh var(--pad); }
.manifest__text { max-width: 1200px; font-size: clamp(30px, 4.4vw, 72px); line-height: 1.1; letter-spacing: -0.025em; }
.manifest__text .w { opacity: 0.15; }

/* pre-design request: a sentence to complete */
.cta { padding: 20vh var(--pad) 16vh; }
.cta__title { margin-bottom: 8vh; }
.book__sentence { font-size: clamp(26px, 3.3vw, 54px); line-height: 1.45; letter-spacing: -0.025em; max-width: 1300px; color: var(--mute); }
.blank { display: inline-block; position: relative; vertical-align: baseline; }
.blank input { width: 9.5em; background: transparent; border: 0; border-bottom: 2px solid rgba(247, 244, 237, 0.35); color: var(--fg); font: inherit; letter-spacing: inherit; padding: 0 0.1em; border-radius: 0; transition: border-color 0.3s; }
.blank--wide input { width: 11.5em; }
.blank input::placeholder { color: rgba(247, 244, 237, 0.28); }
.blank input:focus { outline: none; border-bottom-color: var(--caramel); }
.blank input:not(:placeholder-shown) { color: var(--caramel); border-bottom-color: var(--caramel); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.book__foot { margin-top: 7vh; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 28px; }
.check { display: flex; gap: 12px; align-items: flex-start; max-width: 520px; font-size: 14px; color: var(--mute); }
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--caramel); margin-top: 2px; }
.check a { color: var(--fg); text-decoration: underline; }
.send { display: inline-flex; align-items: center; gap: 18px; height: 72px; padding: 0 16px 0 34px; border-radius: 99px; border: 0; background: var(--caramel); color: var(--ink); font-size: 20px; font-weight: 500; cursor: pointer; transition: background 0.3s; }
.send i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--fg); font-style: normal; transition: transform 0.4s var(--ease); }
.send:hover { background: var(--fg); }
.send:hover i { transform: translateX(4px); }
.send[disabled] { opacity: 0.5; cursor: wait; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.book__msg { min-height: 1.4em; margin-top: 18px; font-size: 16px; }
.book__msg.ok { color: #7fd4a0; }
.book__msg.err { color: #f07a6c; }
.book__steps { list-style: none; margin-top: 7vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; font-size: 15px; color: var(--mute); }
.book__steps b { display: block; color: var(--caramel); font-weight: 500; margin-bottom: 6px; }
@media (max-width: 760px) { .blank input, .blank--wide input { width: 100%; } .blank { display: block; margin: 6px 0 14px; } .book__steps { grid-template-columns: 1fr; } .send { width: 100%; justify-content: space-between; } }

/* FAQ */
.faq { background: var(--light); color: var(--ink); padding: 16vh var(--pad); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 6vw; }
.faq details { border-bottom: 1px solid rgba(11, 11, 16, 0.14); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 36px 22px 0; font-size: clamp(17px, 1.5vw, 22px); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 26px; font-weight: 300; transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 36px 24px 0; color: rgba(11, 11, 16, 0.62); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* footer */
.foot { padding: 64px var(--pad) 32px; display: grid; justify-items: start; gap: 30px; }
.foot__big { font-size: var(--h1); }
.foot__grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 24px; border-top: 1px solid var(--line); padding-top: 32px; }
.foot__grid div { display: grid; gap: 8px; align-content: start; }
.foot__grid small { color: var(--mute); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; margin-bottom: 6px; }
.foot__grid a { opacity: 0.8; }
.foot__grid a:hover { opacity: 1; color: var(--caramel); }
.foot__grid .foot__logo { position: relative; height: 54px; width: 164px; justify-self: end; display: block; }
.foot__copy { color: var(--mute); }
/* social links with their brand marks */
.foot__social a { display: inline-flex; align-items: center; gap: 12px; }
.foot__social i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s, color 0.3s; }
.foot__social svg { width: 18px; height: 18px; }
.foot__social a:hover i { border-color: var(--caramel); background: var(--caramel); color: var(--ink); }
/* brand name as in the logo: the ó accent is the caramel bar, the letters keep the text colour */
.epi__o { position: relative; display: inline-block; }
.epi__o::after { content: ""; position: absolute; left: 0.26em; top: 0.06em; width: 0.46em; height: 0.17em; background: var(--caramel); transform: rotate(-38deg); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__grid .foot__logo { justify-self: start; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .manifest__text .w, .out__list li { opacity: 1 !important; }
}

/* hero copy sits above the lit storefront on phones, with a soft shadow for legibility */
.hero__sub { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85); }
@media (max-width: 760px) { .hero__bg img { object-position: 45% 50%; } }

/* services stage: single image per service */
.stage__p { margin: 0; }
.stage__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* hero scroll cue: the arrow keeps nudging down until the visitor scrolls */
.cue { display: inline-flex; align-items: center; gap: 10px; }
.cue__arrow { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; font-style: normal; color: var(--fg); animation: cue 1.6s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-3px); opacity: 0.6; } 50% { transform: translateY(5px); opacity: 1; } }

/* hero: one atmospheric scene + live headline (agency signature, research 2026-10-01) */
.hero--scene { height: min(100svh, 56.25vw); min-height: 600px; place-items: center start; text-align: left; }
.hero--scene .hero__bg { inset: 0; }
.hero--scene .hero__pic { position: absolute; inset: 0; animation: heroDrift 22s ease-in-out infinite alternate; }
.hero--scene .hero__bg img { height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero--scene .hero__bg::after { background: linear-gradient(90deg, rgba(8, 8, 8, 0.88), rgba(8, 8, 8, 0.55) 45%, rgba(8, 8, 8, 0.15) 70%, transparent 82%), linear-gradient(180deg, rgba(8, 8, 8, 0.5), transparent 18%, transparent 78%, rgba(8, 8, 8, 0.92)); }
.hero--scene .hero__inner { justify-items: start; margin: 0; max-width: none; }
.hero--scene .hero__title { font-size: clamp(46px, 6.2vw, 112px); }
@media (min-width: 761px) { .hero--scene .hero__title .ln { white-space: nowrap; } }
.hero--scene .hero__sub { max-width: 420px; color: rgba(247, 244, 237, 0.88); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8); }
/* sub + CTA stacked under the headline */
.hero--scene .hero__inner { gap: 22px; }
.hero--scene .hero__sub { margin-top: 6px; }
}
.hero--scene .hero__inner::before { content: ""; position: absolute; left: -12%; top: -45%; width: 78%; height: 190%; background: radial-gradient(closest-side, rgba(205, 154, 112, 0.2), transparent); filter: blur(24px); z-index: -1; pointer-events: none; }
/* shadow-title: heavy white caps, each line casts a soft shadow onto the top of the line below */
.hero--scene .hero__title { font-size: clamp(40px, 5.6vw, 104px); font-weight: 800; line-height: 1; letter-spacing: -0.012em; color: #fff; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.7)); }
.hero--scene .hero__title .ln { padding-top: 0.3em; margin-top: -0.3em; }
.hero--scene .hero__title .ln > i { padding: 0.24em 0 0.1em; margin: -0.24em 0 -0.1em; color: #fff; }
.hero--scene .hero__title .ln > i { background: linear-gradient(180deg, #c4c4c4 0, #c4c4c4 0.38em, #5c5c5c 0.41em, #9c9c9c 0.53em, #dedede 0.67em, #fff 0.81em); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) { .hero--scene .hero__title { font-size: 8.4vw; } .hero--scene .hero__title .ln { white-space: nowrap; } }
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.2%, 0.6%); } }
@media (prefers-reduced-motion: reduce) { .hero--scene .hero__pic { animation: none; } }
@media (max-width: 760px) {
  .hero--scene { height: min(100svh, 177.78vw); place-items: start; padding-top: 104px; }
  .hero--scene .hero__bg img { object-position: 50% 50%; }
  .hero--scene .hero__bg::after { background: linear-gradient(180deg, rgba(8, 8, 8, 0.75), rgba(8, 8, 8, 0.2) 45%, transparent 60%, rgba(8, 8, 8, 0.92)); }
}

/* mark: sector lines drift bottom -> top behind the 3D É, stuck to the pinned floor */
.mark__flow { position: absolute; inset: 0; margin: 0; padding: 0 var(--pad); list-style: none; display: grid; align-content: start; gap: 0; text-align: center; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 58%, transparent 76%); mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 58%, transparent 76%); }
.mark__flow li { font-weight: 800; text-transform: uppercase; font-size: clamp(52px, 9vw, 168px); line-height: 0.92; white-space: nowrap; letter-spacing: -0.01em; color: var(--bg); -webkit-text-stroke: 2.4px rgba(247, 244, 237, 0.5); paint-order: stroke fill; will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 32%, #000 68%, rgba(0, 0, 0, 0.15)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 32%, #000 68%, rgba(0, 0, 0, 0.15)); }
.mark__flow li b { display: block; margin-bottom: 18px; font-size: clamp(11px, 0.9vw, 13px); font-weight: 500; letter-spacing: 0.32em; color: var(--caramel); -webkit-text-stroke: 0; opacity: 0.85; }
.mark__flow li em { text-transform: none; font-weight: 400; color: var(--bg); -webkit-text-stroke: 2.2px rgba(205, 154, 112, 0.8); }

/* ring → demo: chips under the ring, cursor label, full-screen in-site viewer */
.ring__list { position: absolute; left: 0; right: 0; bottom: 5vh; z-index: 3; display: grid; justify-items: center; gap: 12px; padding: 0 var(--pad); }
.ring__list > span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); background: rgba(8, 8, 8, 0.7); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 99px; }
.ring__list nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ring__list button { font: inherit; font-size: 14px; color: var(--fg); background: rgba(8, 8, 8, 0.55); border: 1px solid var(--line); border-radius: 99px; padding: 8px 16px; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.35s var(--ease), color 0.35s, border-color 0.35s; }
.ring__list button:hover, .ring__list button:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); outline: none; }
.ring__tip { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: grid; gap: 2px; padding: 10px 14px; margin: 18px 0 0 18px; background: var(--fg); color: var(--bg); border-radius: 12px; font-size: 13px; opacity: 0; transform: scale(0.8); transition: opacity 0.25s, transform 0.35s var(--ease); }
.ring__tip.on { opacity: 1; transform: scale(1); }
.ring__tip b { font-size: 15px; }
html.viewer-on, html.viewer-on body { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 200; background: #0b0b0d; display: grid; grid-template-rows: auto 1fr; will-change: transform; }
.viewer[hidden] { display: none; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--pad); border-bottom: 1px solid var(--line); }
.viewer__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.viewer__id i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--caramel); color: var(--ink); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.viewer__id span { display: grid; line-height: 1.2; min-width: 0; }
.viewer__id b { font-size: 16px; font-weight: 600; }
.viewer__id small { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__note { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.viewer__acts { display: flex; gap: 8px; flex: none; }
.viewer__cta, .viewer__close { font: inherit; font-size: 14px; border-radius: 99px; padding: 9px 16px; cursor: pointer; }
.viewer__cta { background: var(--caramel); color: var(--ink); text-decoration: none; }
.viewer__close { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.viewer__close:hover, .viewer__close:focus-visible { border-color: var(--fg); outline: none; }
.viewer__stage { position: relative; min-height: 0; }
.viewer__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b0b0d; }
.viewer__load { position: absolute; inset: 0; display: grid; place-items: center; background: #0b0b0d; pointer-events: none; transition: opacity 0.5s 0.2s; }
.viewer__load span { width: 120px; height: 1px; background: var(--line); overflow: hidden; position: relative; }
.viewer__load span::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: translateX(-100%); animation: viewerLoad 1.1s var(--ease) infinite; }
.viewer.is-ready .viewer__load { opacity: 0; }
@keyframes viewerLoad { to { transform: translateX(100%); } }
@media (max-width: 760px) { .viewer__note { display: none; } .viewer__cta { display: none; } .ring__list > span { font-size: 11px; } .ring__list button { font-size: 13px; padding: 7px 12px; } }

/* shade titles: the hero's shadow-title language on section headings — heavy white caps, every line after the first
   is shaded at its top as if the line above casts onto it. Line height 1 leaves room for Turkish marks (Ş Ç below, Ö Ü İ above).
   One shade tile per line box, so a line that wraps on a phone is shaded too; only the very first line stays clean white. */
.shade { font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; color: #fff; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.7)); }
.shade .ln { padding-top: 0.3em; margin-top: -0.3em; }
.shade .ln > i { padding: 0.24em 0 0.12em; margin: -0.24em 0 -0.12em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background: linear-gradient(180deg, #d0d0d0 0, #d0d0d0 0.17em, #555 0.21em, #9a9a9a 0.34em, #dcdcdc 0.48em, #fff 0.62em) 0 0.24em / 100% 1.08em repeat-y; -webkit-background-clip: text; background-clip: text; }
.shade .ln:first-child > i { background: linear-gradient(#fff, #fff) 0 0 / 100% 1.32em no-repeat, linear-gradient(180deg, #d0d0d0 0, #d0d0d0 0.17em, #555 0.21em, #9a9a9a 0.34em, #dcdcdc 0.48em, #fff 0.62em) 0 0.24em / 100% 1.08em repeat-y; -webkit-background-clip: text; background-clip: text; }
@media (max-width: 760px) { .shade { font-size: 8.8vw; } }
/* services: temporary image pieces for the feed-grid and flow-strip reveals (removed when the reveal ends) */
.stage__piece { position: absolute; z-index: 3; overflow: hidden; pointer-events: none; }
.stage__piece img { position: absolute; max-width: none; object-fit: cover; }

/* CTA buttons: same caramel as the logo, with a soft top-light gradient inside that colour (hover keeps the cream fill) */
.pill, .nav.is-light .pill, .send, .viewer__cta { background: linear-gradient(180deg, #e0b38d 0%, #cd9a70 55%, #b8845b 100%); }
.pill:hover, .nav.is-light .pill:hover, .send:hover { background: var(--fg); }

/* complaints deck: pinned; UGC phone clips fan out one by one (positions set in main.js) */
.say--after { padding-top: 8vh; }
.gripe { position: relative; height: 280vh; }
.gripe__pin { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; justify-items: center; gap: 5vh; overflow: hidden; }
.gripe .eyebrow { margin: 0; }
.gripe__deck { position: relative; width: 100%; height: min(58svh, 520px, 34vw); }
.gripe__card { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 9 / 16; margin: 0; transform: translateX(-50%); border-radius: 22px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); will-change: transform; }
.gripe__card video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .gripe { height: 240vh; } .gripe__deck { height: min(58svh, 480px); } .gripe__card { border-radius: 16px; } }

/* ---- 2026-10-05 touches: scoped per section ---- */
/* services: 9 rows must fit one screen; second group (after launch) gets a small label */
.svc .svc__list li { padding: 9px 0; }
.svc .svc__list b { font-size: clamp(17px, 1.35vw, 23px); }
.svc .svc__list li.svc__grp::before { content: attr(data-grp); grid-column: 1 / -1; margin: 10px 0 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); }
.svc .svc__list li.svc__grp { border-top: 1px solid var(--line); }
@media (max-height: 820px) and (min-width: 901px) {
  .svc .svc__side h2 { font-size: clamp(28px, 3vw, 48px); margin-bottom: 2.4vh; }
  .svc .svc__list li { padding: 7px 0; }
  .svc .svc__list li.svc__grp::before { margin: 6px 0 5px; }
}
@media (max-width: 900px) { .svc .svc__list li.svc__grp::before { content: none; } .svc .svc__list li.svc__grp { border-top: 1px solid var(--line); } }
/* how-it-works cards: what the client gets from each step, as a glass label on the photo */
.out .ocard__get { position: absolute; left: 18px; top: 18px; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 9px 14px 10px; border-radius: 12px; background: rgba(8, 8, 8, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); font-size: 14px; line-height: 1.25; color: var(--fg); }
.out .ocard__get small { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); }
/* booking form: three plain facts under the steps */
.cta .book__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: 13px; letter-spacing: 0.04em; color: var(--mute); }
.cta .book__trust span { display: inline-flex; align-items: center; gap: 9px; }
.cta .book__trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--caramel); }

/* ---- 2026-10-05 new sections: what we do (.hz), how we work (.yol), who we are (.biz) ---- */
/* what we do: two plain columns; rows draw their top line and icon when the section arrives */
.hz { padding: 18vh var(--pad) 12vh; }
.hz .hz__head { display: grid; grid-template-columns: 1fr minmax(260px, 0.42fr); align-items: end; gap: 4vw; margin-bottom: 9vh; }
.hz .hz__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.hz h2 { font-size: clamp(34px, 4.6vw, 80px); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; }
.hz .hz__lead { font-size: 17px; line-height: 1.55; color: var(--mute); max-width: 34ch; padding-bottom: 0.6em; }
.hz .hz__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5vw; }
.hz .hz__tag { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--caramel); margin-bottom: 14px; }
.hz .hz__list { list-style: none; }
.hz .hz__list li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 4px 18px; padding: 22px 0 24px; }
.hz .hz__list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--l, 1)); }
.hz .hz__list li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.hz .hz__ic { grid-row: span 2; width: 30px; height: 30px; margin-top: 2px; fill: none; stroke: var(--caramel); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hz .hz__list b { font-size: clamp(20px, 1.7vw, 28px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; transition: color 0.4s; }
.hz .hz__list span { font-size: 15px; line-height: 1.5; color: var(--mute); max-width: 46ch; }
.hz .hz__list li:hover b { color: var(--caramel); }
.hz .hz__list li:hover .hz__ic { stroke: var(--fg); }
.hz .hz__col--after .hz__list b { font-size: clamp(18px, 1.45vw, 24px); }
@media (max-width: 860px) {
  .hz { padding: 14vh var(--pad) 8vh; }
  .hz .hz__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 6vh; }
  .hz h2 { font-size: 8.4vw; }
  .hz .hz__cols { grid-template-columns: 1fr; gap: 7vh; }
  .hz .hz__list li { grid-template-columns: 32px 1fr; gap: 4px 14px; padding: 18px 0 20px; }
  .hz .hz__ic { width: 26px; height: 26px; }
}

/* how we work: a rail connects three steps; the rail's progress lights each step */
.yol { padding: 14vh var(--pad) 18vh; }
.yol .yol__head { text-align: center; margin-bottom: 10vh; }
.yol h2 { font-size: clamp(36px, 5.2vw, 92px); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; }
.yol .yol__track { position: relative; }
.yol .yol__rail { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 7px; height: 1px; background: var(--line); }
.yol .yol__rail i { position: absolute; inset: 0; background: var(--caramel); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px rgba(205, 154, 112, 0.6); }
.yol .yol__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }
.yol .yol__s { display: grid; justify-items: center; text-align: center; gap: 12px; opacity: 0.38; transition: opacity 0.7s var(--ease); }
.yol .yol__s.is-on { opacity: 1; }
.yol .yol__dot { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 1px solid var(--mute); transition: background 0.5s, border-color 0.5s, box-shadow 0.5s, transform 0.6s var(--ease); }
.yol .yol__s.is-on .yol__dot { background: var(--caramel); border-color: var(--caramel); box-shadow: 0 0 0 7px rgba(205, 154, 112, 0.14); transform: scale(1.15); }
.yol .yol__s em { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(44px, 4.4vw, 76px); line-height: 0.9; color: var(--mute); transition: color 0.6s; }
.yol .yol__s.is-on em { color: var(--caramel); }
.yol .yol__s h3 { font-size: clamp(21px, 1.8vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.yol .yol__s p { font-size: 15.5px; line-height: 1.55; color: var(--mute); max-width: 32ch; }
.yol .yol__s small { display: inline-flex; gap: 10px; align-items: baseline; margin-top: 6px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; color: var(--fg); }
.yol .yol__s small b { font-weight: 500; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); }
.yol .yol__foot { margin-top: 10vh; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.yol .yol__foot p { font-size: clamp(18px, 1.5vw, 24px); color: var(--fg); max-width: 40ch; }
.yol .yol__nb { white-space: nowrap; }
/* desktop: the section holds still while the rail runs from step 1 to step 3 */
@media (min-width: 861px) {
  .yol { height: 240vh; padding: 0; }
  .yol .yol__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 84px var(--pad) 36px; }
  .yol .yol__head { margin-bottom: 7vh; }
  .yol .yol__foot { margin-top: 7vh; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .yol h2 { font-size: clamp(32px, 4.4vw, 72px); }
  .yol .yol__head { margin-bottom: 5vh; }
  .yol .yol__s em { font-size: clamp(38px, 3.6vw, 60px); }
  .yol .yol__foot { margin-top: 5vh; gap: 16px; }
}
@media (max-width: 860px) {
  .yol { padding: 10vh var(--pad) 12vh; }
  .yol .yol__head { text-align: left; margin-bottom: 6vh; }
  .yol h2 { font-size: 9vw; }
  .yol .yol__rail { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .yol .yol__rail i { transform-origin: top; transform: scaleY(0); }
  .yol .yol__steps { grid-template-columns: 1fr; gap: 7vh; }
  .yol .yol__s { grid-template-columns: 15px 1fr; justify-items: start; text-align: left; column-gap: 22px; row-gap: 8px; }
  .yol .yol__s > * { grid-column: 2; }
  .yol .yol__dot { grid-column: 1; grid-row: 1; margin-top: 4px; }
  .yol .yol__s em { grid-row: 1; margin-top: 0; font-size: 44px; }
  .yol .yol__foot { align-items: flex-start; text-align: left; margin-top: 7vh; }
}

/* who we are: photo and founder note side by side */
.biz { padding: 16vh var(--pad); display: grid; grid-template-columns: minmax(0, 0.9fr) 1fr; gap: 6vw; align-items: center; }
.biz .biz__img { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--bg2); }
.biz .biz__img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 60% 50%; }
.biz .biz__txt { display: grid; gap: 22px; max-width: 620px; }
.biz .biz__txt .eyebrow { margin-bottom: 0; }
.biz .biz__quote { font-family: var(--serif); font-style: italic; font-size: clamp(34px, 3.6vw, 62px); line-height: 1.08; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 10px; }
.biz .biz__txt > p:not(.eyebrow) { font-size: 17px; line-height: 1.6; color: var(--mute); max-width: 52ch; }
.biz .biz__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-top: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.biz .biz__sign { display: grid; gap: 2px; }
.biz .biz__sign b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1; color: var(--caramel); }
.biz .biz__sign .biz__role { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.biz .biz__sign .biz__logo { position: relative; display: block; width: 104px; height: 34px; }
.biz .biz__sign .biz__logo img { position: absolute; inset: 0; height: 100%; width: auto; }
.biz .biz__link { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--fg); border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color 0.4s, color 0.4s; }
.biz .biz__link i { font-style: normal; transition: transform 0.4s var(--ease); }
.biz .biz__link:hover { color: var(--caramel); border-color: var(--caramel); }
.biz .biz__link:hover i { transform: translateY(-4px); }
@media (max-width: 860px) {
  .biz { grid-template-columns: 1fr; padding: 10vh var(--pad); gap: 6vh; }
  .biz .biz__img { aspect-ratio: 4 / 3.4; }
  .biz .biz__quote { font-size: 9.4vw; }
}

/* ---- 2026-10-05 booking: day + 30-minute time picker under the sentence form ---- */
/* booking picker: one card, week calendar on the left, the chosen day's times on the right */
.cta .pick { border: 0; margin: 6vh 0 0; padding: 0; min-width: 0; }
.cta .pick__label { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.01em; color: var(--fg); }
.cta .pick__label small { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); }
.cta .pick__panel { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); max-width: 1100px; border: 1px solid var(--line); border-radius: 26px; background: var(--bg2); overflow: hidden; }
.cta .pick__cal, .cta .pick__clock { padding: 28px; }
.cta .pick__cal { border-right: 1px solid var(--line); }
.cta .pick__cal { display: flex; flex-direction: column; }
.cta .pick__info { list-style: none; margin-top: auto; padding-top: 28px; display: grid; gap: 10px; font-size: 14px; color: var(--mute); }
.cta .pick__info li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.cta .pick__info b { font-weight: 500; color: var(--caramel); }
.cta .pick__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; min-height: 38px; }
.cta .pick__range { font-size: 18px; font-weight: 500; }
.cta .pick__nav { display: flex; gap: 8px; }
.cta .pick__nav button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; transition: border-color 0.3s, background 0.3s, color 0.3s, opacity 0.3s; }
.cta .pick__nav button:hover:not(:disabled) { border-color: var(--caramel); color: var(--caramel); }
.cta .pick__nav button:disabled { opacity: 0.25; cursor: default; }
.cta .pick__days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cta .pick__day { display: grid; justify-items: center; gap: 3px; padding: 14px 0 12px; border-radius: 16px; border: 1px solid transparent; background: rgba(247, 244, 237, 0.04); color: var(--fg); font: inherit; cursor: pointer; transition: border-color 0.3s, background 0.3s, color 0.3s; }
.cta .pick__day small { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.cta .pick__day b { font-size: 24px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cta .pick__day span { min-height: 1.3em; font-size: 11px; color: var(--mute); white-space: nowrap; }
.cta .pick__day:hover:not(:disabled) { border-color: var(--caramel); }
.cta .pick__day[aria-pressed="true"] { background: var(--caramel); border-color: var(--caramel); color: var(--ink); }
.cta .pick__day[aria-pressed="true"] small, .cta .pick__day[aria-pressed="true"] span { color: rgba(11, 11, 16, 0.7); }
.cta .pick__day:disabled { cursor: not-allowed; background: transparent; }
.cta .pick__day.is-off { opacity: 0.25; }
.cta .pick__day.is-full { opacity: 0.55; }
.cta .pick__day.is-full b { text-decoration: line-through; text-decoration-thickness: 1px; }
.cta .pick__day.is-full span { color: var(--caramel); }
.cta .pick__sub { min-height: 38px; display: flex; align-items: center; margin-bottom: 20px; font-size: 18px; font-weight: 500; }
.cta .pick__grp + .pick__grp { margin-top: 20px; }
.cta .pick__grp small { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.cta .pick__grp div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cta .pick__t { height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 0.3s, background 0.3s, color 0.3s; }
.cta .pick__t:hover:not(:disabled) { border-color: var(--caramel); }
.cta .pick__t[aria-pressed="true"] { background: var(--caramel); border-color: var(--caramel); color: var(--ink); font-weight: 500; }
.cta .pick__t:disabled { cursor: not-allowed; border-color: transparent; color: var(--mute); opacity: 0.35; text-decoration: line-through; }
.cta .pick__note { min-height: 1.5em; margin-top: 14px; font-size: 14px; color: var(--mute); }
.cta .pick__note b { color: var(--fg); font-weight: 500; }
@media (max-width: 860px) {
  .cta .pick__panel { grid-template-columns: 1fr; border-radius: 22px; }
  .cta .pick__cal { border-right: 0; border-bottom: 1px solid var(--line); }
  .cta .pick__info { display: none; }
  .cta .pick__cal, .cta .pick__clock { padding: 20px 16px; }
  .cta .pick__head, .cta .pick__sub { margin-bottom: 14px; }
  .cta .pick__days { gap: 6px; }
  .cta .pick__day { padding: 11px 0 9px; border-radius: 13px; }
  .cta .pick__day b { font-size: 20px; }
  .cta .pick__day span { font-size: 10px; }
  .cta .pick__range, .cta .pick__sub { font-size: 16px; }
  .cta .pick__t { height: 42px; font-size: 14px; }
}
@media (max-width: 370px) { .cta .pick__day small { letter-spacing: 0.04em; } .cta .pick__day span { font-size: 9px; } }
/* booking form: per-field notes when something is missing */
.cta .book .fld-err { display: none; color: #f07a6c; font-size: 13px; line-height: 1.3; letter-spacing: 0.01em; font-weight: 400; }
.cta .book .is-bad > .fld-err { display: block; }
.cta .book .blank > .fld-err { position: absolute; left: 0; top: calc(100% + 4px); white-space: nowrap; }
.cta .book .blank.is-bad input, .cta .book .blank.is-bad input:not(:placeholder-shown) { border-bottom-color: #f07a6c; }
.cta .book .blank.is-bad input::placeholder { color: rgba(240, 122, 108, 0.55); }
.cta .book .pick > .fld-err { margin-top: 10px; font-size: 14px; }
.cta .book .pick.is-bad .pick__days .pick__day:not(:disabled):not([aria-pressed="true"]),
.cta .book .pick.is-bad .pick__times .pick__t:not(:disabled):not([aria-pressed="true"]) { border-color: rgba(240, 122, 108, 0.55); }
.cta .book .pick.is-bad .pick__note { display: none; }
.cta .book .check { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; }
.cta .book .check > .fld-err { grid-column: 2; margin-top: 8px; }
.cta .book .check.is-bad input { outline: 2px solid #f07a6c; outline-offset: 2px; }
@media (max-width: 760px) { .cta .book .blank > .fld-err { position: static; margin-top: 6px; white-space: normal; } }


/* 1c · one search, twice: steps scroll, the phone stays (all rules scoped to .ar) */
.ar { --bad: #f07a6c; --scr: #f4f1ea; --scr-ink: #16161a; --scr-mute: rgba(22, 22, 26, 0.5); position: relative; padding: 18vh var(--pad) 10vh; }
.ar .ar__head { max-width: 1100px; margin-bottom: 4vh; }
.ar .ar__lead { margin-top: 26px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 21px); color: var(--mute); }
.ar .ar__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw; }
.ar .ar__steps { grid-column: 1; grid-row: 1; list-style: none; }
.ar .ar__stage { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding-top: 70px; }

/* steps: dim until they reach the middle of the screen */
.ar .ar__step { min-height: 76svh; display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 34rem; opacity: 0.22; transition: opacity 0.6s var(--ease); }
.ar .ar__step.is-on { opacity: 1; }
.ar .ar__step small { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bad); }
.ar .ar__step[data-mode="good"] small { color: var(--caramel); }
.ar .ar__step h3 { font-size: clamp(30px, 3.2vw, 52px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; }
.ar .ar__step p { font-size: 17px; line-height: 1.6; color: var(--mute); max-width: 44ch; }
.ar .ar__step ul { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.ar .ar__step ul li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; color: rgba(247, 244, 237, 0.82); }
.ar .ar__step ul li::before { content: ""; flex: none; width: 14px; height: 8px; border-left: 2px solid var(--caramel); border-bottom: 2px solid var(--caramel); transform: translateY(-3px) rotate(-45deg); }
.ar .ar__step--big h3 { font-size: clamp(38px, 4.6vw, 76px); text-transform: uppercase; }
.ar .ar__step--big[data-mode="bad"] h3 { color: var(--bad); }
.ar .ar__step--turn { min-height: 110svh; }
.ar .ar__step--turn h3 { font-size: clamp(34px, 3.8vw, 62px); }
.ar .ar__step--turn small { color: var(--caramel); }

/* phone */
.ar .ar__phone { position: relative; height: min(640px, calc(100svh - 190px)); aspect-ratio: 9 / 18.5; border-radius: 46px; padding: 12px; background: #1a1a1e; border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); }
.ar .ar__mode { position: absolute; left: 0; right: 0; top: -42px; text-align: center; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.ar .ar__mode span { display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.5s; }
.ar .ar__mode span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ar .ar__mode-bad { color: var(--bad); }
.ar .ar__mode-good { color: var(--caramel); position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; }
.ar .ar__phone[data-mode="good"] .ar__mode-bad { opacity: 0; }
.ar .ar__phone[data-mode="good"] .ar__mode-good { opacity: 1; }
.ar .ar__screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--scr); color: var(--scr-ink); font-size: 14px; }
.ar .ar__scr { position: absolute; inset: 0; padding: 46px 16px 20px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.ar .ar__scr.is-on { opacity: 1; transform: none; }
.ar .ar__phone[data-mode="bad"] .ar__screen { filter: saturate(0.6); }
.ar .ar__bar, .ar .ar__url { border-radius: 99px; background: #fff; padding: 10px 14px; font-size: 13px; color: var(--scr-mute); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar .ar__bar::before { content: "⌕ "; }

/* search rows: positioned by --i so the reorder can animate */
.ar .ar__res { position: relative; list-style: none; flex: 1; }
.ar .ar__res li { position: absolute; left: 0; right: 0; top: calc(var(--i) * 74px); display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; transition: top 0.9s var(--ease), box-shadow 0.5s, opacity 0.5s; }
.ar .ar__res b { font-weight: 500; }
.ar .ar__res small { font-size: 12px; color: var(--scr-mute); }
.ar .ar__you { opacity: 0.6; }
.ar .ar__you .ar__you-good { display: none; }
.ar .ar__you .ar__you-bad { color: #c4513f; }
.ar .ar__phone[data-mode="good"] .ar__res li { top: calc((var(--i) + 1) * 74px); }
.ar .ar__phone[data-mode="good"] .ar__res .ar__you { top: 0; opacity: 1; box-shadow: 0 0 0 2px var(--caramel); }
.ar .ar__phone[data-mode="good"] .ar__you .ar__you-bad { display: none; }
.ar .ar__phone[data-mode="good"] .ar__you .ar__you-good { display: block; color: #8a5a33; }

/* AI answer */
.ar .ar__q { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--scr-ink); color: var(--scr); font-size: 13px; }
.ar .ar__a { display: grid; gap: 6px; padding: 14px; border-radius: 18px 18px 18px 4px; background: #fff; font-size: 13px; }
.ar .ar__a small { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--scr-mute); }
.ar .ar__a em { font-family: var(--sans); font-style: normal; font-size: 12px; color: #8a5a33; padding-left: 14px; }
.ar .ar__a--good { display: none; }
.ar .ar__phone[data-mode="good"] .ar__a--bad { display: none; }
.ar .ar__phone[data-mode="good"] .ar__a--good { display: grid; }

/* speed */
.ar .ar__load { height: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
.ar .ar__load i { display: block; height: 100%; width: 0; background: var(--bad); }
.ar .ar__phone[data-mode="good"] .ar__load i { background: var(--caramel); }
.ar .ar__sec { margin: auto 0; text-align: center; font-size: 15px; color: var(--scr-mute); }
.ar .ar__sec b { display: block; font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--scr-ink); font-variant-numeric: tabular-nums; }
.ar .ar__page { display: none; gap: 10px; }
.ar .ar__page span { display: block; height: 70px; border-radius: 14px; background: #e4ddd0; }
.ar .ar__page span:first-child { height: 130px; background: linear-gradient(160deg, #d9b996, #b8845b); }
.ar .ar__page button, .ar .ar__form button { height: 46px; border: 0; border-radius: 99px; background: var(--caramel); color: var(--ink); font-weight: 500; }
.ar .ar__scr--speed.is-done .ar__sec { display: none; }
.ar .ar__scr--speed.is-done .ar__page { display: grid; }

/* security */
.ar .ar__url--bad { color: #c4513f; }
.ar .ar__url--good { display: none; align-items: center; gap: 6px; color: var(--scr-ink); }
.ar .ar__url--good svg { width: 14px; height: 14px; fill: none; stroke: #3c8a5b; stroke-width: 1.6; }
.ar .ar__phone[data-mode="good"] .ar__url--bad { display: none; }
.ar .ar__phone[data-mode="good"] .ar__url--good { display: flex; }
.ar .ar__form { display: grid; gap: 10px; margin-top: 10px; }
.ar .ar__form span { padding: 14px; border-radius: 12px; background: #fff; color: var(--scr-mute); font-size: 13px; }
.ar .ar__phone[data-mode="bad"] .ar__form { opacity: 0.35; }

/* call */
.ar .ar__scr--call { inset: -2px; align-items: center; justify-content: center; text-align: center; background: var(--scr-ink); color: var(--scr); }
.ar .ar__scr--call small { font-size: 13px; color: rgba(244, 241, 234, 0.6); }
.ar .ar__scr--call b { font-size: 26px; font-weight: 500; }
.ar .ar__call-good { display: none; color: var(--caramel); }
.ar .ar__phone[data-mode="good"] .ar__call-bad { display: none; }
.ar .ar__phone[data-mode="good"] .ar__call-good { display: block; }
.ar .ar__ring { width: 64px; height: 64px; margin-top: 30px; border-radius: 50%; background: #3c8a5b; box-shadow: 0 0 0 0 rgba(60, 138, 91, 0.5); }
.ar .ar__scr--call.is-on .ar__ring { animation: ar-ring 1.6s ease-out infinite; }
@keyframes ar-ring { to { box-shadow: 0 0 0 26px rgba(60, 138, 91, 0); } }

/* phone screens: phone and the current step's text both stay put; the steps themselves become invisible scroll spacers */
.ar .ar__cap { display: none; }
@media (max-width: 860px) {
  .ar { padding: 12vh var(--pad) 6vh; }
  .ar .ar__body { grid-template-columns: 1fr; }
  .ar .ar__stage { grid-column: 1; top: 64px; z-index: 2; height: calc(100svh - 64px); padding: 40px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg); }
  .ar .ar__steps { grid-row: 2; padding-bottom: 40svh; }
  .ar .ar__step, .ar .ar__step.is-on { min-height: 55svh; opacity: 0; }
  .ar .ar__cap { display: flex; opacity: 1; min-height: 0; width: 100%; max-width: none; gap: 12px; }
  .ar .ar__phone { flex: none; height: auto; width: min(220px, 56vw, 30svh); aspect-ratio: 9 / 12; border-radius: 32px 32px 0 0; padding: 8px 8px 0; border-bottom: 0; }
  .ar .ar__phone::after { content: ""; position: absolute; z-index: 4; left: -2px; right: -2px; bottom: -1px; height: 34%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
  .ar .ar__screen { font-size: 11px; border-radius: 25px 25px 0 0; }
  .ar .ar__mode { top: -30px; }
  .ar .ar__scr { padding: 30px 10px 12px; gap: 8px; }
  .ar .ar__bar, .ar .ar__url { padding: 7px 10px; font-size: 10px; }
  .ar .ar__res li { top: calc(var(--i) * 52px); padding: 8px 10px; border-radius: 10px; }
  .ar .ar__phone[data-mode="good"] .ar__res li { top: calc((var(--i) + 1) * 52px); }
  .ar .ar__res small, .ar .ar__a, .ar .ar__q, .ar .ar__form span { font-size: 10px; }
  .ar .ar__a em { font-size: 9.5px; }
  .ar .ar__sec b { font-size: 42px; }
  .ar .ar__page span { height: 40px; }
  .ar .ar__page span:first-child { height: 76px; }
  .ar .ar__page button, .ar .ar__form button { height: 32px; font-size: 11px; }
  .ar .ar__scr--call b { font-size: 17px; }
  .ar .ar__ring { width: 42px; height: 42px; margin-top: 18px; }
  .ar .ar__cap h3 { font-size: clamp(24px, 6.6vw, 32px); }
  .ar .ar__cap.ar__step--big h3 { font-size: clamp(28px, 8vw, 40px); }
  .ar .ar__cap p, .ar .ar__cap ul li { font-size: 15px; }
  .ar .ar__cap ul { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ar .ar__scr, .ar .ar__step, .ar .ar__res li { transition: none; }
  .ar .ar__scr--call.is-on .ar__ring { animation: none; }
}
.ar .ar__status { position: absolute; z-index: 3; left: 22px; right: 22px; top: 14px; display: flex; justify-content: space-between; font-size: 11px; color: var(--scr-mute); pointer-events: none; }
.ar .ar__status b { font-weight: 600; color: var(--scr-ink); }
.ar .ar__phone:has(.ar__scr--call.is-on) .ar__status, .ar .ar__phone:has(.ar__scr--call.is-on) .ar__status b { color: rgba(244, 241, 234, 0.7); }
@media (max-width: 860px) { .ar .ar__status { top: 10px; left: 16px; right: 16px; font-size: 9px; } }
.ar .ar__res small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar .ar__screen { transition: background 0.4s; }
.ar .ar__phone:has(.ar__scr--call.is-on) .ar__screen { background: var(--scr-ink); }

/* ------------------------------------------------------------------ 2026-10-07 additions (scoped; nothing above changed) */

/* nav: glass backdrop once the hero is behind us */
.nav { transition: color 0.4s, padding 0.4s var(--ease), background-color 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; }
.nav.is-solid { padding-top: 12px; padding-bottom: 12px; background: rgba(8, 8, 8, 0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); }
.nav.is-solid::before { opacity: 0; }
.nav.is-solid.is-light { background: rgba(236, 232, 223, 0.82); border-bottom-color: rgba(11, 11, 16, 0.1); }

/* hero: the offer sits right under the button it explains */
.hero--scene .hero__act { display: grid; justify-items: start; gap: 14px; margin-top: 4px; }
.hero--scene .hero__offer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; max-width: 600px; font-size: 13.5px; letter-spacing: 0.01em; color: rgba(247, 244, 237, 0.82); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.hero--scene .hero__offer::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--caramel); transform: translateY(-2px); }
.hero--scene .hero__offer span { color: var(--fg); }
/* phone: the line sits over the bright part of the photo, so it gets the same smoked chip as the demo list label */
@media (max-width: 760px) { .hero--scene .hero__offer { font-size: 12.5px; max-width: 330px; padding: 9px 13px; border-radius: 12px; background: rgba(8, 8, 8, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: none; } }

/* after launch: four written promises on hairlines, same language as services + process */
.sonra { padding: 16vh var(--pad) 14vh; }
.sonra .sonra__head { display: grid; grid-template-columns: 1fr minmax(260px, 0.42fr); align-items: end; gap: 4vw; margin-bottom: 9vh; }
.sonra .sonra__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.sonra h2 { font-size: clamp(34px, 4.6vw, 80px); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; }
.sonra .sonra__lead { font-size: 17px; line-height: 1.55; color: var(--mute); max-width: 34ch; padding-bottom: 0.6em; }
.sonra .sonra__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 3vw; }
.sonra .sonra__list li { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px 0 8px; }
.sonra .sonra__list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--l, 1)); }
.sonra .sonra__list em { font-size: clamp(34px, 2.8vw, 48px); line-height: 0.9; color: var(--caramel); }
.sonra .sonra__list b { margin-top: 6px; font-size: clamp(20px, 1.6vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.sonra .sonra__list span { font-size: 15px; line-height: 1.55; color: var(--mute); max-width: 32ch; }
@media (max-width: 1100px) { .sonra .sonra__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vh 5vw; } }
@media (max-width: 860px) {
  .sonra { padding: 10vh var(--pad) 10vh; }
  .sonra .sonra__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 6vh; }
  .sonra h2 { font-size: 9vw; }
  .sonra .sonra__list { grid-template-columns: 1fr; gap: 0; }
  .sonra .sonra__list li { grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 6px; padding: 24px 0 22px; }
  .sonra .sonra__list em { grid-row: span 2; font-size: 38px; }
  .sonra .sonra__list b { margin-top: 0; }
}

/* booking sentence: on a phone every blank is its own line, so the full stop would sit alone */
@media (max-width: 760px) { .cta .book__dot { display: none; } }

/* booking sentence: the business blank takes a web address, so it gets room for the longer prompt */
.cta .blank--url input { width: 14em; }
@media (max-width: 760px) { .cta .blank--url input { width: 100%; } }

/* shorter pinned scrolls: same motion, less empty screen */
.mark { height: 280vh; }
@media (max-width: 760px) { .ring { height: 190vh; } .mark { height: 230vh; } }
/* who we are, quiet version: no photo, one column, quote + one paragraph + signature */
.biz.biz--yalin { grid-template-columns: minmax(0, 1fr); }
.biz.biz--yalin .biz__txt { max-width: 900px; gap: 26px; }
.biz.biz--yalin .biz__txt > p:not(.eyebrow) { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.7; max-width: 62ch; }
.biz.biz--yalin .biz__foot { margin-top: 8px; }
/* vision quote: first clause on one line, cream from the logo, lit softly from below */
.biz.biz--yalin .biz__txt { max-width: 1240px; }
.biz.biz--yalin .biz__txt > p:not(.eyebrow) { max-width: 62ch; }
.biz.biz--yalin .biz__quote { position: relative; isolation: isolate; font-size: clamp(30px, 3.4vw, 58px); color: #f7f4ed; background: linear-gradient(180deg, #ddd5c7 0%, #f7f4ed 58%, #fffaf1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 8px 16px rgba(247, 232, 205, 0.13)); }
.biz.biz--yalin .biz__quote::after { content: ""; position: absolute; z-index: -1; left: -3%; right: 25%; bottom: -35%; height: 70%; background: radial-gradient(closest-side, rgba(247, 236, 215, 0.1), transparent); filter: blur(18px); pointer-events: none; }
.biz.biz--yalin .biz__quote span { display: block; }
@media (min-width: 861px) { .biz.biz--yalin .biz__q1 { white-space: nowrap; } }
/* founder signature in a monoline script */
.biz .biz__sign b { font-family: "Herr Von Muellerhoff", var(--serif); font-style: normal; font-size: clamp(54px, 4.2vw, 68px); line-height: 0.9; letter-spacing: 0; }
/* ------------------------------------------------------------------ 2026-10-07 copy revision */

/* "Müşteri SİZİ arıyor": same face as the line, upright, cream, lit softly from below */
.ar .ar__sizi { font: inherit; font-style: normal; text-transform: uppercase; color: #f7f4ed; text-shadow: 0 0.12em 0.5em rgba(247, 232, 205, 0.28), 0 0.02em 0.08em rgba(247, 232, 205, 0.35); }

/* every site comes with: four calm cards, numbered like the rest of the page */
.std { padding: 18vh var(--pad) 14vh; }
.std .std__head { display: grid; grid-template-columns: 1fr minmax(260px, 0.42fr); align-items: end; gap: 4vw; margin-bottom: 8vh; }
.std .std__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.std h2 { font-size: clamp(34px, 4.6vw, 80px); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; }
.std .std__lead { font-size: 17px; line-height: 1.55; color: var(--mute); max-width: 34ch; padding-bottom: 0.6em; }
.std .std__cards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.std .std__cards > li { display: flex; flex-direction: column; gap: 18px; padding: 30px 28px 32px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(247, 244, 237, 0.035), rgba(247, 244, 237, 0.01)); transition: border-color 0.4s, transform 0.5s var(--ease); }
.std .std__cards > li:hover { border-color: rgba(205, 154, 112, 0.45); transform: translateY(-4px); }
.std .std__cards em { font-size: 34px; line-height: 0.9; color: var(--caramel); }
.std .std__cards h3 { font-size: clamp(21px, 1.6vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.std .std__cards ul { list-style: none; display: grid; gap: 12px; }
.std .std__cards ul li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: rgba(247, 244, 237, 0.72); }
.std .std__cards ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--caramel); }
@media (max-width: 1100px) { .std .std__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .std { padding: 10vh var(--pad); }
  .std .std__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 5vh; }
  .std h2 { font-size: 9vw; }
  .std .std__cards { grid-template-columns: 1fr; gap: 12px; }
  .std .std__cards > li { padding: 24px 22px 26px; gap: 14px; }
}

/* vision signature: the agency owns the vision, the founder signs it */
.biz .biz__sign--v2 { display: grid; gap: 12px; justify-items: start; }
.biz .biz__sign--v2 .biz__logo { width: 150px; height: 49px; }
.biz .biz__sign--v2 .biz__role { display: flex; align-items: baseline; gap: 12px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.biz .biz__sign--v2 .biz__role b { font-family: "Herr Von Muellerhoff", var(--serif); font-weight: 400; font-size: 46px; line-height: 0.8; letter-spacing: 0; text-transform: none; color: var(--caramel); }
/* every-site head: the line sits right under the title */
.std .std__head { grid-template-columns: 1fr; gap: 20px; }
.std .std__lead { padding-bottom: 0; max-width: 52ch; }

/* every-site strip: two rows between hairlines, opposite directions; cream sans above, caramel serif below */
.std .std__flow { display: grid; gap: 0; margin-top: 2vh; }
.std .marquee { padding: 22px 0; }
.std .marquee + .marquee { border-top: 0; }
.std .marquee__t span { font-size: clamp(24px, 2.9vw, 50px); letter-spacing: -0.02em; text-transform: none; padding: 0 0.6em; }
.std .marquee--a .marquee__t span { font-weight: 500; color: #f7f4ed; }
.std .marquee--b .marquee__t span { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; color: var(--caramel); }
.std .marquee--b .marquee__t span::after { color: rgba(247, 244, 237, 0.5); }
@media (max-width: 860px) { .std .marquee { padding: 16px 0; } .std .marquee__t span { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .std .marquee { white-space: normal; } .std .marquee__t { display: flex; flex-wrap: wrap; gap: 10px 0; } }
/* rows fade out at both edges instead of being cut */
.std .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

/* ------------------------------------------------------------------ 2026-10-07 audit fixes */
/* phone menu: two-line button between logo and CTA; the four links drop down as a glass sheet */
.nav__menu { display: none; }
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto auto; column-gap: 10px; }
  .nav__menu { display: grid; place-content: center; gap: 5px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(8, 8, 8, 0.45); cursor: pointer; }
  .nav__menu i { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform 0.35s var(--ease); }
  .nav.is-open .nav__menu i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav.is-open .nav__menu i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .nav.is-light .nav__menu { border-color: rgba(11, 11, 16, 0.2); background: rgba(236, 232, 223, 0.6); }
  .nav.is-open .nav__links { display: grid; position: absolute; top: calc(100% + 8px); left: var(--pad); right: var(--pad); gap: 0; padding: 8px 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(8, 8, 8, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .nav.is-open .nav__links a { opacity: 1; padding: 15px 0; font-size: 17px; color: var(--fg); border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__links a:last-child { border-bottom: 0; }
  .nav .pill { padding: 0 16px; font-size: 13px; }
}
/* phone: shorter pinned scenes, same motion */
@media (max-width: 760px) { .ring { height: 150vh; } .mark { height: 170vh; } }

/* story spacing, 2026-10-07: shorter gaps between steps (phone ~8 → ~5 screens) */
.ar .ar__step { min-height: 62svh; }
.ar .ar__step--turn { min-height: 80svh; }
@media (max-width: 860px) {
  .ar .ar__steps { padding-bottom: 22svh; }
  .ar .ar__step, .ar .ar__step.is-on { min-height: 40svh; }
}
@media (max-width: 860px) { .ar .ar__step, .ar .ar__step.is-on { min-height: 34svh; } }

/* ------------------------------------------------------------------ /hakkimizda page */
body.sayfa .nav__links a[aria-current="page"] { opacity: 1; color: var(--caramel); }
.biz.biz--sayfa { min-height: 100svh; padding-top: max(20vh, 140px); padding-bottom: 8vh; align-items: start; }
.biz.biz--sayfa h1.eyebrow { font-size: 13px; font-weight: 400; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.2em; }
body.sayfa .biz__cta { padding: 0 var(--pad) 16vh; }
body.sayfa .foot__copy .year:empty::before { content: "2026"; }

/* phone menu sheet: solid, so the page under it never shows through */
@media (max-width: 760px) { .nav.is-open .nav__links { background: #0d0d0f; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); } }

/* work ring caption: the sentence on one line, "dokunun" on its own line */
.ring .ring__head p { max-width: none; }
.ring .ring__head p span { display: block; }
.ring .ring__head p span:last-child { white-space: nowrap; }
@media (min-width: 761px) { .ring .ring__head p span:first-child { white-space: nowrap; } }

/* booking: "web siteniz var mı?" under the sentence; two pill choices, the address opens only with "Sitem var" */
.cta .siteq { border: 0; margin: 5vh 0 0; padding: 0; min-width: 0; max-width: 1100px; display: grid; gap: 14px; }
.cta .siteq__label { margin-bottom: 4px; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.01em; }
.cta .siteq__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.cta .siteq__opt { position: relative; cursor: pointer; }
.cta .siteq__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cta .siteq__opt span { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 99px; border: 1px solid var(--line); font-size: 16px; color: var(--fg); transition: border-color 0.3s, background 0.3s, color 0.3s; }
.cta .siteq__opt:hover span { border-color: var(--caramel); }
.cta .siteq__opt input:checked + span { background: var(--caramel); border-color: var(--caramel); color: var(--ink); font-weight: 500; }
.cta .siteq__opt input:focus-visible + span { outline: 2px solid var(--caramel); outline-offset: 3px; }
.cta .siteq__url input { width: min(100%, 520px); height: 54px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(247, 244, 237, 0.03); color: var(--fg); font-size: 17px; transition: border-color 0.3s; }
.cta .siteq__url input:focus { outline: none; border-color: var(--caramel); }
.cta .siteq__url input::placeholder { color: rgba(247, 244, 237, 0.28); }
.cta .siteq__note { min-height: 1.4em; font-size: 14px; color: var(--mute); }
.cta .siteq.is-bad .siteq__opt span { border-color: rgba(240, 122, 108, 0.55); }
.cta .siteq.is-bad .siteq__url input { border-color: #f07a6c; }
.cta .book .siteq > .fld-err { margin-top: -4px; font-size: 14px; }
@media (max-width: 760px) { .cta .siteq__opts { display: grid; grid-template-columns: 1fr 1fr; } .cta .siteq__opt span { justify-content: center; width: 100%; } }
/* story headline: the two key words in brand cream, a soft gradient that warms toward caramel */
.ar .shade .krem, .mark .shade .krem, .cta .shade .krem { background: linear-gradient(180deg, #e0b38d 0%, #cd9a70 55%, #b8845b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* sector list under the sentence blank: dark glass panel in body type, grouped, scrollable */
.cta .sectors__list { position: absolute; z-index: 30; left: 0; top: calc(100% + 10px); width: min(360px, 86vw); max-height: 320px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 8px; list-style: none; border-radius: 18px; border: 1px solid var(--line); background: #0d0d0f; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); font-size: 15px; line-height: 1.35; letter-spacing: 0; color: var(--fg); }
.cta .sectors__list[hidden] { display: none; }
.cta .sectors__hint { padding: 8px 12px 10px; font-size: 13px; color: var(--mute); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cta .sectors__group { padding: 12px 12px 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); }
.cta .sectors__opt { padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.cta .sectors__opt:hover, .cta .sectors__opt.is-active { background: rgba(205, 154, 112, 0.16); color: #fff; }
@media (max-width: 760px) { .cta .sectors__list { width: 100%; max-height: 260px; } }
/* the list lives inside the sentence paragraph, so it is built from spans that behave like blocks */
.cta .sectors__list > span { display: block; }
/* × on the sector blank: empties it and opens the whole list again (sized in the sentence's own em) */
.cta .sectors__clear { position: absolute; top: 0; right: 0; width: 1.3em; height: 1.45em; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--caramel); font: inherit; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; }
.cta .sectors__clear[hidden] { display: none; }
.cta .sectors__clear:hover { opacity: 1; }
.cta .sectors__clear:focus-visible { outline: 2px solid var(--caramel); outline-offset: -4px; border-radius: 10px; }
.cta .sectors__clear svg { width: 0.4em; height: 0.4em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cta .blank:has(.sectors__clear:not([hidden])) input { padding-right: 1.3em; }