/* OZEL — light, app-like UI: off-white canvas, soft white cards, glass pills,
   one big brand-gradient card as the focal point. */
:root {
  --olive: #2B2E21;          /* Deep Olive */
  --olive-2: #3B3F2E;
  --olive-3: #5A5C45;
  --sand: #BFAE8E;
  --pale: #E8DFCD;          /* pale sand (highlights, progress bars) */
  --white: #FFFFFF;
  --canvas: #EDE9E1;
  --surface: #F8F6F1;
  --card: #FFFFFF;
  --ink: #2B2E21;
  --ink-soft: #2B2E21;
  --muted: #8C8572;
  --shadow: 0 2px 6px rgba(43, 46, 33, .04), 0 30px 70px -36px rgba(43, 46, 33, .28);
  --r-xl: 40px;
  --r-lg: 32px;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font); font-weight: 300;
  color: var(--ink-soft);
  background-color: var(--canvas);
  background-image: radial-gradient(rgba(43, 46, 33, .10) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* the "device screen" */
.app {
  width: min(1360px, calc(100% - 32px));
  margin: 20px auto 40px;
  padding: 22px clamp(18px, 3vw, 40px) clamp(28px, 4vw, 48px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(43, 46, 33, .06), transparent 70%),
    var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), var(--shadow);
}

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 400 15px/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.pill svg { width: 18px; height: 18px; }
.pill-active {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #5A5C45 0%, #3B3F2E 55%, #2B2E21 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 20px rgba(0,0,0,.14),
              0 14px 28px -14px rgba(43, 46, 33, .6);
}
.pill-active::after {
  content: ""; position: absolute; inset: 1px 1px 52% 1px; border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0)); pointer-events: none;
}
.pill-active:hover { transform: translateY(-1px); }
.pill-icon {
  display: grid; place-items: center; width: 30px; height: 30px; margin-left: -12px;
  border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.pill:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 3px; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand img { height: 50px; width: auto; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- hero ---------- */
.hero { margin-top: clamp(20px, 3vw, 34px); }
.slide { display: grid; gap: clamp(22px, 3vw, 34px); }

.grad-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: clamp(18px, 2.4vw, 28px);
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(55% 70% at 100% 100%, rgba(191, 174, 142, .55), transparent 62%),
    radial-gradient(60% 80% at 0% 0%, rgba(43, 46, 33, .9), transparent 65%),
    linear-gradient(125deg, #2B2E21 0%, #34372A 42%, #4E4F3B 78%, #7C7459 100%);
  box-shadow: 0 40px 80px -40px rgba(43, 46, 33, .5), inset 0 1px 0 rgba(255,255,255,.35);
}
.grad-card::after { /* fine grain like the reference cards */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* video in a soft phone-like frame */
.video-card {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; max-height: min(70vh, 640px); width: 100%;
  border-radius: 30px;
  background: #1F2118;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 30px 60px -30px rgba(0,0,0,.55);
}
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.video-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 400; letter-spacing: .02em;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 4px rgba(191,174,142,.3); animation: blink 2s infinite; }
.video-controls {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 10px; padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.icon-btn {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  transition: background .2s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.3); }
.icon-btn svg { width: 18px; height: 18px; }
.play-btn .i-play, .play-btn.paused .i-pause, .sound-btn .i-sound, .sound-btn.on .i-muted { display: none; }
.play-btn.paused .i-play, .sound-btn.on .i-sound { display: block; }
.video-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.video-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pale), #fff); }

/* glass panels on the gradient */
.grad-side { display: grid; grid-template-rows: 1fr auto; gap: clamp(14px, 2vw, 22px); color: #fff; }
.glass {
  border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.glass-label { margin: 0 0 18px; font-size: 15px; font-weight: 400; opacity: .9; }

.chapters { display: flex; flex-direction: column; }
.ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ch-count { font-size: 13px; letter-spacing: .06em; opacity: .75; }
.ch-count b { font-weight: 500; opacity: 1; }
.ch-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 150px; padding: 6px 0 22px; }
.ch-big {
  margin: 0; display: flex; align-items: flex-start; gap: 6px;
  font-size: clamp(48px, 5.6vw, 84px); line-height: .95; font-weight: 200; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.ch-unit { font-size: 14px; font-weight: 400; letter-spacing: .02em; line-height: 1; margin-top: .5em; opacity: .85; }
.ch-text { margin: 14px 0 0; max-width: 30ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.45; opacity: .92; }
.ch-stage.swap .ch-big, .ch-stage.swap .ch-text { animation: chIn .7s cubic-bezier(.2,.7,.2,1) both; }
.ch-stage.swap .ch-text { animation-delay: .08s; }

.ch-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ch-rail button {
  display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 6px 0; border: 0;
  background: none; cursor: pointer; text-align: left; color: #fff;
}
.ch-rail .fill {
  position: relative; display: block; width: 100%; height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.25);
}
.ch-rail .fill::after {
  content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0));
  border-radius: inherit; background: linear-gradient(90deg, var(--pale), #fff);
}
.ch-rail .lbl { font-size: 11.5px; font-weight: 400; letter-spacing: .02em; opacity: .6; transition: opacity .3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-rail li.is-current .lbl { opacity: 1; font-weight: 500; }
.ch-rail button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
@keyframes chIn { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

.consult-card { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 18px; }
.consult-card .glass-label { grid-column: 1 / -1; margin-bottom: 4px; }
.consult-text { margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.45; opacity: .92; max-width: 34ch; }
.pill-confirm {
  position: relative; overflow: hidden; color: var(--olive); font-weight: 500;
  background: linear-gradient(135deg, #D9CDB3, #BFAE8E);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 28px -14px rgba(43, 46, 33,.55);
}
.pill-confirm:hover { transform: translateY(-1px); }

/* copy under the video card */
.slide-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 6px; }
.headline {
  margin: 0; max-width: none;
  font-size: clamp(34px, 4.6vw, 68px); line-height: 1.04; font-weight: 200; letter-spacing: -.03em;
  color: var(--ink-soft); text-wrap: balance;
}
.headline b { font-weight: 500; color: var(--olive); }
.headline .p { font-weight: 200; color: var(--ink-soft); }
.headline .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); }
.headline.in .w { animation: word .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * .06s); }
.subline { margin: 0; max-width: 52ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; font-weight: 300; color: var(--muted); }

@keyframes word { to { opacity: 1; transform: none; filter: none; } }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .grad-card { grid-template-columns: 1fr; }
  .video-card { max-height: none; width: 100%; }
  .consult-card { grid-template-columns: 1fr; }
  .consult-card .pill { width: 100%; }
}
@media (max-width: 560px) {
  .app { width: 100%; margin: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); padding: 14px 12px 28px; }
  .brand img { height: 40px; }
  .consult { height: 42px; padding: 0 16px; font-size: 14px; }
  .consult .pill-icon { display: none; }
  .grad-card { padding: 10px; border-radius: 32px; }
  .video-card { border-radius: 24px; }
}
.logo-light { display: none; }

/* phones: the video takes the whole screen; header and glass panels float on it */
@media (max-width: 700px) {
  .app { position: relative; width: 100%; margin: 0; padding: 0 0 32px; border-radius: 0; background: transparent; box-shadow: none; }
  .topbar {
    position: absolute; z-index: 5; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px;
    padding: 8px 8px 8px 16px; border-radius: 24px;
    background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -18px rgba(0,0,0,.5);
    backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  .logo-dark { display: none; }
  .logo-light { display: block; height: 36px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
  .consult { height: 42px; padding: 0 16px; font-size: 14px; }
  .consult .pill-icon { display: none; }

  .hero { margin-top: 0; }
  .grad-card {
    display: block; height: 100vh; height: 100svh; min-height: 560px;
    padding: 0; border-radius: 0; background: #1F2118; box-shadow: none;
  }
  .grad-card::after { display: none; }
  .grad-card::before { /* scrims so the header and panels stay readable */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%),
      linear-gradient(0deg, rgba(30,32,22,.72) 0%, rgba(30,32,22,.25) 38%, rgba(30,32,22,0) 55%);
  }
  .video-card { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .video-top { display: none; }
  .video-controls { /* story-style bar under the header */
    z-index: 3; top: calc(84px + env(safe-area-inset-top)); bottom: auto; left: 14px; right: 14px;
    padding: 0; gap: 10px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .icon-btn { width: 34px; height: 34px; background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .video-bar { height: 3px; }

  .grad-side {
    position: absolute; z-index: 2; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-rows: auto auto; gap: 10px;
  }
  .glass {
    padding: 16px 16px 14px; border-radius: 26px;
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.3);
    backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
  }
  .glass-label { margin: 0 0 10px 4px; font-size: 13px; }
  .ch-stage { min-height: 0; padding: 2px 0 12px; }
  .ch-big { font-size: 46px; }
  .ch-text { margin-top: 8px; font-size: 14px; }
  .ch-rail .lbl { display: none; }
  .ch-rail button { padding: 8px 0; }
  .consult-card { grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
  .consult-card .glass-label { margin-bottom: 0; }
  .consult-text { font-size: 13.5px; line-height: 1.4; }
  .consult-card .pill { width: auto; height: 44px; padding: 0 18px; }

  .slide { gap: 26px; }
  .slide-copy { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .headline .w { opacity: 1; transform: none; filter: none; }
  .headline.in .w, .live { animation: none; }
}

/* ---------- "Since 1998" ---------- */
:root {
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sand-ink: #9A8763;        /* matte sand, deepened enough to read on the light canvas */
}
.legacy {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: clamp(32px, 6vw, 110px); align-items: end;
  margin-top: clamp(56px, 8vw, 110px);
  padding: clamp(40px, 5vw, 72px) 6px 6px;
}
.legacy-rule {
  position: absolute; top: 0; left: 6px; right: 6px; height: 1px;
  background: linear-gradient(90deg, var(--olive) 0%, rgba(43,46,33,.25) 55%, rgba(43,46,33,0) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.8s cubic-bezier(.65,0,.15,1);
}
.legacy-kicker {
  grid-column: 1; margin: 0 0 6px .35em;
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1em; color: var(--sand-ink);
  opacity: 0; transition: opacity 1.2s ease .3s, letter-spacing 2s cubic-bezier(.16,1,.3,1) .3s;
}
.legacy-year {
  grid-column: 1; margin: 0;
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(120px, 19vw, 300px); line-height: 1; letter-spacing: -.035em;
  color: var(--olive); font-variant-numeric: lining-nums;
}
/* odometer digits, built by legacy.js */
.legacy-year .dg { position: relative; display: inline-block; height: 1em; vertical-align: top; clip-path: inset(0 -30% 0 -30%); }
.legacy-year .dg-sizer { visibility: hidden; }
.legacy-year .reel {
  position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, 0); opacity: 0;
}
.legacy-year .reel span { display: block; height: 1em; }
.legacy-copy { grid-column: 2; grid-row: 1 / 3; padding-bottom: clamp(14px, 2.2vw, 36px); }
.legacy-title {
  margin: 0; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(40px, 5vw, 78px); line-height: 1.05; letter-spacing: -.025em; color: var(--olive);
}
.legacy-title em { font-style: italic; color: var(--sand-ink); }
.legacy-title .ln { display: block; overflow: hidden; padding-bottom: .12em; }
.legacy-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) 1.5s; }
.legacy-text {
  margin: 18px 0 0; max-width: 40ch;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; font-weight: 300; letter-spacing: .02em; color: var(--muted);
  opacity: 0; transform: translateY(12px); transition: opacity 1.2s ease 2s, transform 1.2s cubic-bezier(.16,1,.3,1) 2s;
}

/* played once when the section scrolls into view */
.legacy.in .legacy-rule { transform: scaleX(1); }
.legacy.in .legacy-kicker { opacity: 1; letter-spacing: .55em; }
.legacy.in .reel {
  opacity: 1;
  transform: translate(-50%, calc(var(--n) * -1em));
  transition: transform 2.6s cubic-bezier(.12,.9,.18,1) calc(.45s + var(--i) * .16s), opacity .5s ease calc(.45s + var(--i) * .16s);
  animation: reelBlur 2.6s ease-out calc(.45s + var(--i) * .16s) both;
}
.legacy.in .legacy-title .ln > span { transform: none; }
.legacy.in .legacy-text { opacity: 1; transform: none; }
@keyframes reelBlur { 0% { filter: blur(0); } 12% { filter: blur(7px); } 55% { filter: blur(2.5px); } 100% { filter: blur(0); } }

@media (max-width: 860px) {
  .legacy { grid-template-columns: 1fr; }
  .legacy-copy { grid-column: 1; grid-row: auto; padding-bottom: 0; margin-top: 22px; }
}
@media (max-width: 700px) {
  .legacy { margin: 56px 18px 0; padding-top: 40px; }
  .legacy-rule { left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .legacy *, .legacy.in * { transition: none !important; animation: none !important; }
}

/* ---------- "Our Story" ---------- */
.story {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); row-gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(90px, 11vw, 160px); padding: 0 6px;
}
.story-head { grid-column: 1 / 10; }
.story-kicker {
  margin: 0 0 22px .2em; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1em; color: var(--sand-ink);
  opacity: 0; transition: opacity 1.2s ease .1s, letter-spacing 2s cubic-bezier(.16,1,.3,1) .1s;
}
.story-title {
  margin: 0; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(36px, 4.6vw, 70px); line-height: 1.08; letter-spacing: -.025em; color: var(--olive);
}
.story-title em { font-style: italic; color: var(--sand-ink); }
.story-title .ln { display: block; overflow: hidden; padding-bottom: .1em; }
.story-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .35s; }
.story-title .ln + .ln > span { transition-delay: .5s; }

.story-media { grid-column: 1 / 8; position: relative; margin: 0 0 clamp(40px, 5vw, 70px); }
.story-photo { position: relative; overflow: hidden; background: var(--olive); }
.story-photo img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 40%);
  opacity: 0; transform: scale(1.1); transition: opacity 1.6s ease, transform 7s cubic-bezier(.2,.6,.3,1);
}
.story-photo img.on { opacity: 1; transform: scale(1); }  /* slow push-out while each photo is shown */
.story-photo .slides { position: absolute; inset: 0; }
.story-photo.inset img { transform-origin: var(--ox, 50%) 50%; transform: scale(2.05); }
.story-photo.inset img.on { transform: scale(1.8); }
.story-photo.main {
  aspect-ratio: 16 / 10; border-radius: var(--r-lg); box-shadow: var(--shadow);
  clip-path: inset(100% 0 0 0 round var(--r-lg)); transition: clip-path 1.5s cubic-bezier(.65,0,.15,1) .55s;
}
.story-photo.main .slides { transform: scale(1.18) translateY(var(--py, 0px)); transition: transform 2.4s cubic-bezier(.16,1,.3,1) .55s; }
.story-photo.inset {
  position: absolute; right: -9%; bottom: -12%; width: 40%; aspect-ratio: 4 / 3; border-radius: 24px;
  box-shadow: 0 0 0 6px var(--surface), 0 24px 50px -24px rgba(43, 46, 33, .45);
  opacity: 0; transform: translateY(calc(40px + var(--py2, 0px)));
  transition: opacity 1.2s ease 1.3s, transform 1.6s cubic-bezier(.16,1,.3,1) 1.3s;
}
.story-chip { position: absolute; top: 16px; left: 16px; opacity: 0; transition: opacity 1s ease 1.8s; }

.story-body { grid-column: 9 / 13; align-self: end; padding-bottom: 6px; }
.story-body p {
  margin: 0 0 20px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8; font-weight: 300; color: #55574A;
  opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
}
.story-body p:first-child { font-size: clamp(16px, 1.3vw, 19px); color: var(--olive); }
.story-body p:nth-child(1) { transition-delay: 1s; }
.story-body p:nth-child(2) { transition-delay: 1.2s; }
.story-sign {
  margin-top: 32px !important; font-family: var(--serif); font-size: clamp(22px, 1.9vw, 30px) !important;
  line-height: 1.3 !important; font-weight: 400 !important; color: var(--olive) !important; letter-spacing: -.01em;
  transition-delay: 1.5s !important;
}
.story-sign em { font-style: italic; color: var(--sand-ink); }
.story-sign-rule {
  display: block; width: 56px; height: 1px; margin-bottom: 18px; background: var(--sand-ink);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.65,0,.15,1) 1.7s;
}

.story.in .story-kicker { opacity: 1; letter-spacing: .55em; }
.story.in .story-title .ln > span { transform: none; }
.story.in .story-photo.main { clip-path: inset(0 0 0 0 round var(--r-lg)); }
.story.in .story-photo.main .slides { transform: scale(1.04) translateY(var(--py, 0px)); }
.story.in .story-photo.inset { opacity: 1; transform: translateY(var(--py2, 0px)); }
.story.in .story-chip { opacity: 1; }
.story.in .story-body p { opacity: 1; transform: none; }
.story.in .story-sign-rule { transform: scaleX(1); }

@media (max-width: 960px) {
  .story-head, .story-media, .story-body { grid-column: 1 / -1; }
  .story-photo.inset { right: 14px; bottom: -36px; width: 44%; }
  .story-media { margin-bottom: 30px; }
}
@media (max-width: 700px) {
  .story { margin: 90px 18px 0; padding: 0; }
  .story-photo.main { aspect-ratio: 4 / 3.4; }
  .story-media { margin-bottom: 72px; }
  .story-photo.inset { bottom: -48px; }
}
@media (prefers-reduced-motion: reduce) {
  .story *, .story.in * { transition: none !important; }
}
.story.settled .story-photo.main .slides, .story.settled .story-photo.inset { transition: none; }

/* ---------- "Our Procedures" slider ---------- */
.procs { margin-top: clamp(100px, 12vw, 170px); padding: 0 6px; }
.procs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.procs-kicker {
  margin: 0 0 22px .2em; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1em; color: var(--sand-ink);
  opacity: 0; transition: opacity 1.2s ease .1s, letter-spacing 2s cubic-bezier(.16,1,.3,1) .1s;
}
.procs-title {
  margin: 0; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -.025em; color: var(--olive);
}
.procs-title em { font-style: italic; color: var(--sand-ink); }
.procs-title .ln { display: block; overflow: hidden; padding-bottom: .1em; }
.procs-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .3s; }

.procs-nav { display: flex; gap: 10px; flex: none; opacity: 0; transition: opacity 1s ease .9s; }
.round-btn {
  display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--olive); background: rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px rgba(43, 46, 33, .14), 0 10px 24px -16px rgba(43, 46, 33, .4);
  transition: background .35s ease, color .35s ease, transform .35s ease, opacity .35s ease;
}
.round-btn svg { width: 20px; height: 20px; }
.round-btn:hover:not(:disabled) { background: var(--olive); color: var(--surface); transform: translateY(-1px); }
.round-btn:disabled { opacity: .35; cursor: default; }
.round-btn:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 3px; }

.procs-track {
  display: flex; gap: clamp(16px, 1.8vw, 24px);
  margin: 0 -6px; padding: clamp(28px, 3vw, 40px) 6px 34px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px;
  scrollbar-width: none; cursor: grab;
}
.procs-track::-webkit-scrollbar { display: none; }
.procs-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.procs-track.dragging .proc-link { pointer-events: none; }
.procs-track:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 4px; border-radius: 20px; }

.proc {
  flex: 0 0 clamp(290px, 40%, 520px); scroll-snap-align: start;
  opacity: 0; transform: translateX(70px);
  transition: opacity 1.1s ease calc(.45s + var(--i) * .12s), transform 1.4s cubic-bezier(.16,1,.3,1) calc(.45s + var(--i) * .12s);
}
.proc-link {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--r-lg); overflow: hidden; background: var(--card);
  box-shadow: 0 1px 2px rgba(43, 46, 33, .05), 0 22px 50px -32px rgba(43, 46, 33, .35);
  transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s ease;
  -webkit-user-drag: none;
}
.proc-link:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(43, 46, 33, .05), 0 34px 60px -30px rgba(43, 46, 33, .45); }
.proc-link:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 4px; }

.proc-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  /* shows until the photo is in place */
  background:
    radial-gradient(60% 80% at 85% 100%, rgba(191, 174, 142, .45), transparent 65%),
    linear-gradient(140deg, #2B2E21, #4E4F3B);
}
.proc-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 40%);
  transform: scale(1.03); transition: transform 1.4s cubic-bezier(.16,1,.3,1);
  -webkit-user-drag: none; user-select: none;
}
.proc-link:hover .proc-media img { transform: scale(1.09); }
.proc-num {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
  border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .18em; color: #fff;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.proc-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.proc-title {
  margin: 0 0 12px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(25px, 2.1vw, 32px); line-height: 1.12; letter-spacing: -.02em; color: var(--olive);
}
.proc-title em { font-style: italic; color: var(--sand-ink); }
.proc-text {
  margin: 0 0 24px; font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.proc-more {
  position: relative; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 6px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--olive);
}
.proc-more svg { width: 16px; height: 16px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.proc-more::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--sand-ink);
  transform: scaleX(.28); transform-origin: left; transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.proc-link:hover .proc-more svg { transform: translateX(5px); }
.proc-link:hover .proc-more::after { transform: scaleX(1); }

.procs-progress { position: relative; height: 2px; margin: 4px 0 0; border-radius: 2px; background: rgba(43, 46, 33, .1); overflow: hidden; }
.procs-progress span {
  position: absolute; top: 0; left: 0; height: 100%; width: var(--w, 30%); border-radius: inherit; background: var(--olive);
  transform: translateX(var(--x, 0%)); transition: transform .25s linear;
}

.procs.in .procs-kicker { opacity: 1; letter-spacing: .55em; }
.procs.in .procs-title .ln > span { transform: none; }
.procs.in .procs-nav { opacity: 1; }
.procs.in .proc { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .procs { margin: 100px 0 0; padding: 0; }
  .procs-head { padding: 0 18px; flex-direction: column; align-items: flex-start; }
  .procs-nav { display: none; }
  .procs-track { margin: 0; padding: 26px 18px 30px; scroll-padding-inline: 18px; gap: 14px; }
  .proc { flex-basis: 82%; }
  .procs-progress { margin: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .procs *, .procs.in * { transition: none !important; }
}

/* ---------- "The OZEL Hairline" ---------- */
.hairline { margin-top: clamp(100px, 12vw, 170px); }
.hl-card {
  --hl-ink: #EDE5D4; --hl-soft: rgba(237, 229, 212, .72);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4.5vw, 72px); align-items: center;
  padding: clamp(28px, 4.5vw, 72px);
  border-radius: var(--r-xl); color: var(--hl-ink);
  background:
    radial-gradient(60% 70% at 100% 100%, rgba(191, 174, 142, .26), transparent 62%),
    radial-gradient(50% 60% at 0% 0%, rgba(90, 92, 69, .5), transparent 65%),
    linear-gradient(150deg, #2B2E21 0%, #303325 55%, #3B3F2E 100%);
  box-shadow: 0 50px 90px -50px rgba(43, 46, 33, .7);
}
.hl-card::after { /* same fine grain as the hero card */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hl-kicker {
  margin: 0 0 24px .2em; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1em; color: var(--sand);
  opacity: 0; transition: opacity 1.2s ease .1s, letter-spacing 2s cubic-bezier(.16,1,.3,1) .1s;
}
.hl-title {
  margin: 0 0 30px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(34px, 3.7vw, 58px); line-height: 1.08; letter-spacing: -.025em; color: var(--hl-ink);
}
.hl-title em { font-style: italic; color: var(--sand); }
.hl-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.hl-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1); }
.hl-title .ln:nth-child(1) > span { transition-delay: .3s; }
.hl-title .ln:nth-child(2) > span { transition-delay: .42s; }
.hl-title .ln:nth-child(3) > span { transition-delay: .6s; }
.hl-body p {
  margin: 0 0 18px; max-width: 54ch; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.8; font-weight: 300; color: var(--hl-soft);
  opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
}
.hl-body p:nth-child(1) { transition-delay: .9s; }
.hl-body p:nth-child(2) { transition-delay: 1.05s; }
.hl-sign {
  margin-top: 30px !important; font-family: var(--serif); font-size: clamp(21px, 1.7vw, 27px) !important; line-height: 1.35 !important;
  font-weight: 400 !important; color: var(--hl-ink) !important; transition-delay: 1.3s !important;
}
.hl-sign em { font-style: italic; color: var(--sand); }
.hl-sign-rule { display: block; width: 56px; height: 1px; margin-bottom: 18px; background: var(--sand); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.65,0,.15,1) 1.5s; }

/* gallery */
.hl-gallery { position: relative; margin: 0; padding-left: 34px; width: min(100%, calc(84vh * 2 / 3 + 34px)); justify-self: center; }
.hl-slides {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-lg); overflow: hidden; background: #1F2118;  /* same shape as the photos, so nothing is cropped */
  box-shadow: 0 0 0 1px rgba(237, 229, 212, .14), 0 40px 70px -40px rgba(0, 0, 0, .6);
  clip-path: inset(100% 0 0 0 round var(--r-lg)); transition: clip-path 1.6s cubic-bezier(.65,0,.15,1) .4s;
  touch-action: pan-y;
}
.hl-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 40%);
  opacity: 0; transform: scale(1.12); filter: saturate(.9);
  transition: opacity 1.6s ease, transform 7.5s cubic-bezier(.2,.6,.3,1);
  user-select: none; -webkit-user-drag: none;
}
.hl-slides img.on { opacity: 1; transform: scale(1.02); }
.hl-slides::after { /* soft vignette so the controls read on any photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(20, 21, 15, .55) 0%, rgba(20, 21, 15, 0) 32%);
}
/* a caliper-like scale beside the photo, drawn on entry */
.hl-ruler {
  position: absolute; left: 0; top: 6%; bottom: 6%; width: 18px;
  background:
    linear-gradient(var(--sand), var(--sand)) right / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(191, 174, 142, .9) 0 1px, transparent 1px 50px) right / 18px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(191, 174, 142, .5) 0 1px, transparent 1px 10px) right / 9px 100% no-repeat;
  opacity: .8; transform: scaleY(0); transform-origin: top; transition: transform 1.8s cubic-bezier(.65,0,.15,1) .6s;
}
.hl-controls {
  position: absolute; left: calc(34px + 18px); right: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 14px; color: #fff;
  opacity: 0; transition: opacity 1s ease 1.6s;
}
.hl-count { font-size: 12.5px; letter-spacing: .14em; font-variant-numeric: tabular-nums; opacity: .85; white-space: nowrap; }
.hl-count b { font-weight: 500; }
.hl-bars { flex: 1; display: flex; gap: 6px; }
.hl-bars span { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.hl-bars span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hl-bars span.done::after { transform: scaleX(1); }
.hl-bars span.run::after { animation: hlBar var(--dur, 5.5s) linear forwards; }
.hl-gallery.paused .hl-bars span.run::after { animation-play-state: paused; }
@keyframes hlBar { to { transform: scaleX(1); } }
.hl-btn {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .3s ease;
}
.hl-btn:hover { background: rgba(255, 255, 255, .28); }
.hl-btn svg { width: 18px; height: 18px; }
.hl-btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

.hairline.in .hl-kicker { opacity: 1; letter-spacing: .55em; }
.hairline.in .hl-title .ln > span { transform: none; }
.hairline.in .hl-body p { opacity: 1; transform: none; }
.hairline.in .hl-sign-rule { transform: scaleX(1); }
.hairline.in .hl-slides { clip-path: inset(0 0 0 0 round var(--r-lg)); }
.hairline.in .hl-ruler { transform: scaleY(1); }
.hairline.in .hl-controls { opacity: 1; }

@media (max-width: 960px) {
  .hl-card { grid-template-columns: 1fr; }
  .hl-gallery { order: -1; }
}
@media (max-width: 700px) {
  /* phones: photos run edge to edge, uncropped, and melt into the olive card below */
  .hairline { margin: 100px 0 0; }
  .hl-card { padding: 0 0 40px; border-radius: 0; gap: 30px; box-shadow: none; }
  .hl-copy { padding: 0 22px; }
  .hl-gallery { width: 100%; padding-left: 0; }
  .hl-ruler { display: none; }
  .hl-slides { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; clip-path: inset(100% 0 0 0); }  /* client: shorter on phones */
  .hairline.in .hl-slides { clip-path: inset(0 0 0 0); }
  .hl-slides::after { display: none; }   /* client: no shading on the photos */
  .hl-controls { left: 22px; right: 22px; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hairline *, .hairline.in * { transition: none !important; }
}

/* ---------- "Before & After" ---------- */
.ba { margin-top: clamp(100px, 12vw, 170px); padding: 0 6px; }
.ba-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(30px, 5vw, 90px); align-items: end; margin-bottom: clamp(30px, 4vw, 52px); }
.ba-kicker {
  margin: 0 0 22px .2em; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1em; color: var(--sand-ink);
  opacity: 0; transition: opacity 1.2s ease .1s, letter-spacing 2s cubic-bezier(.16,1,.3,1) .1s;
}
.ba-title { margin: 0; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(38px, 5vw, 76px); line-height: 1.02; letter-spacing: -.03em; color: var(--olive); }
.ba-title em { font-style: italic; color: var(--sand-ink); }
.ba-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.ba-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .3s; }
.ba-title .ln + .ln > span { transition-delay: .45s; }
.ba-text {
  margin: 0 0 6px; max-width: 52ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8; font-weight: 300; color: var(--muted);
  opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease .8s, transform 1.2s cubic-bezier(.16,1,.3,1) .8s;
}

.ba.in .ba-kicker { opacity: 1; letter-spacing: .55em; }
.ba.in .ba-title .ln > span { transform: none; }
.ba.in .ba-text { opacity: 1; transform: none; }
.ba.in .rs-stage { clip-path: inset(0 0 0 0 round var(--r-xl)); }
.ba.in .rs-bar { opacity: 1; }

@media (max-width: 860px) {
  .ba-head { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ba { margin: 100px 0 0; padding: 0; }
  .ba-head, .rs-bar { padding: 0 18px; }
  .rs-stage { border-radius: 0; clip-path: inset(100% 0 0 0); }
  .ba.in .rs-stage { clip-path: inset(0 0 0 0); }
  .rs-btn { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba *, .ba.in * { transition: none !important; }
}
/* desktop: copy beside the results gallery */
@media (min-width: 961px) {
  .ba { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto; column-gap: clamp(40px, 6vw, 110px); align-items: center; }
  .ba-head { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; margin: 0; align-self: center; }
  .rs { grid-column: 2; grid-row: 1; }
}

/* results gallery: whole photos, calm slide transition, animated arrows */
.rs { margin: 0; }
.rs-stage {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1 / 1; border-radius: var(--r-xl); background: #EDE9E1;
  box-shadow: 0 2px 6px rgba(43, 46, 33, .05), 0 40px 80px -46px rgba(43, 46, 33, .45);
  clip-path: inset(100% 0 0 0 round var(--r-xl)); transition: clip-path 1.6s cubic-bezier(.65,0,.15,1) .5s;
  touch-action: pan-y;
}
.rs-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: translateX(calc(var(--dir, 1) * 6%)) scale(1.04); filter: blur(10px);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.16,1,.3,1), filter 1.1s ease;
  user-select: none; -webkit-user-drag: none;
}
.rs-stage img.on { opacity: 1; transform: none; filter: none; z-index: 1; }
.rs-stage img.out { opacity: 0; transform: translateX(calc(var(--dir, 1) * -4%)) scale(.98); filter: blur(6px); }

.rs-bar { display: flex; align-items: center; gap: 18px; margin-top: 22px; opacity: 0; transition: opacity 1s ease 1.4s; }
.rs-count { font-size: 13px; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-count b { color: var(--olive); font-weight: 500; }
.rs-bars { flex: 1; display: flex; gap: 6px; }
.rs-bars span { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(43, 46, 33, .12); overflow: hidden; }
.rs-bars span::after { content: ""; position: absolute; inset: 0; background: var(--olive); transform: scaleX(0); transform-origin: left; }
.rs-bars span.done::after { transform: scaleX(1); }
.rs-bars span.run::after { animation: hlBar var(--dur, 5s) linear forwards; }
.rs.paused .rs-bars span.run::after { animation-play-state: paused; }
.rs-nav { display: flex; gap: 10px; flex: none; }
/* arrows: on hover the arrow slides out and a twin slides in from the other side */
.rs-btn {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--olive); background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px rgba(43, 46, 33, .14), 0 10px 24px -16px rgba(43, 46, 33, .4);
  transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.rs-btn:hover { background: var(--olive); color: var(--surface); transform: scale(1.06); }
.rs-btn:active { transform: scale(.96); }
.rs-btn:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 3px; }
.rs-arrow { position: relative; width: 20px; height: 20px; overflow: hidden; }
.rs-arrow svg { position: absolute; inset: 0; width: 20px; height: 20px; transition: transform .55s cubic-bezier(.65,0,.15,1); }
.rs-btn.next .rs-arrow svg + svg { transform: translateX(-140%); }
.rs-btn.prev .rs-arrow svg + svg { transform: translateX(140%); }
.rs-btn.next:hover .rs-arrow svg:first-child { transform: translateX(140%); }
.rs-btn.prev:hover .rs-arrow svg:first-child { transform: translateX(-140%); }
.rs-btn:hover .rs-arrow svg + svg { transform: none; }
/* a soft nudge on the next arrow while it waits, so it reads as tappable */
.ba.in .rs-btn.next .rs-arrow { animation: rsNudge 3.2s cubic-bezier(.65,0,.15,1) 2.4s infinite; }
.rs-btn.next:hover .rs-arrow { animation: none; }
@keyframes rsNudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(4px); } 90% { transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) {
  .rs-stage img, .rs-arrow svg { transition: none; }
  .ba.in .rs-btn.next .rs-arrow { animation: none; }
}

/* results — lifted, Apple-like presentation (client: "raised, lit from below, simple but beautiful") */
.rs { position: relative; }
.rs::before { /* quiet halo of light behind the card */
  content: ""; position: absolute; z-index: -1; left: -8%; right: -8%; top: -6%; bottom: 4%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.rs-stage {
  overflow: visible; background: #fff; padding: 10px; border-radius: 36px;
  /* reveal without clip-path, so the shadows are never cut */
  clip-path: none; opacity: 0; transform: translateY(40px) scale(.97);
  transition: opacity 1.2s ease .5s, transform 1.6s cubic-bezier(.16,1,.3,1) .5s;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(43, 46, 33, .06),
    0 6px 14px -4px rgba(43, 46, 33, .08),
    0 24px 48px -12px rgba(43, 46, 33, .16),
    0 60px 100px -30px rgba(43, 46, 33, .28);
}
.rs-stage::after { /* warm light pooling under the card */
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -34px; height: 70px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(191, 174, 142, .55), rgba(191, 174, 142, 0));
  filter: blur(14px); pointer-events: none;
}
.rs-view { position: absolute; inset: 10px; overflow: hidden; border-radius: 27px; background: #F3F1EC; }
.ba.in .rs-stage { clip-path: none; opacity: 1; transform: none; }

/* progress: sand gradient with a glowing head */
.rs-bars span { height: 3px; background: rgba(43, 46, 33, .1); overflow: visible; }
.rs-bars span::after { border-radius: 3px; background: linear-gradient(90deg, #D9CDB3, #9A8763); }
.rs-bars span::before {
  content: ""; position: absolute; z-index: 1; top: 50%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #9A8763, 0 0 12px 2px rgba(191, 174, 142, .9);
  opacity: 0; transform: scale(.4);
}
.rs-bars span.run::before { opacity: 1; transform: none; animation: rsHead var(--dur, 5s) linear forwards; transition: opacity .4s ease, transform .4s ease; }
.rs.paused .rs-bars span.run::before { animation-play-state: paused; }
@keyframes rsHead { from { left: 0; } to { left: 100%; } }

/* arrows: olive "next" with brand shine + a sand ring that fills with the autoplay timer; glass "prev" */
.rs-btn { width: 60px; height: 60px; }
.rs-btn.prev {
  color: var(--olive); background: linear-gradient(180deg, #fff, #F3F0E9);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(43, 46, 33, .1), 0 10px 22px -12px rgba(43, 46, 33, .35);
}
.rs-btn.next {
  color: #fff; overflow: visible;
  background: linear-gradient(135deg, #5A5C45 0%, #3B3F2E 55%, #2B2E21 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 16px rgba(0,0,0,.18), 0 14px 26px -12px rgba(43, 46, 33, .7);
}
.rs-btn.next::after { /* inner shine */
  content: ""; position: absolute; inset: 1px 1px 52% 1px; border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none;
}
.rs-btn.prev:hover { background: #fff; color: var(--olive); transform: scale(1.06); }
.rs-btn.next:hover { background: linear-gradient(135deg, #6A6C52 0%, #444834 55%, #2B2E21 100%); color: #fff; transform: scale(1.06); }
.rs-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.rs-ring circle { fill: none; stroke: rgba(154, 135, 99, .2); stroke-width: 1.5; }
.rs-ring { --len: 179; }
.rs-ring circle { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.rs.timing .rs-ring circle { stroke: #9A8763; animation: rsRing var(--dur, 5s) linear forwards; }
.rs.paused .rs-ring circle { animation-play-state: paused; }
@keyframes rsRing { to { stroke-dashoffset: 0; } }
.rs-btn.next .rs-arrow { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .rs { padding: 0 14px; }
  .rs-stage { border-radius: 30px; padding: 8px; }
  .rs-view { inset: 8px; border-radius: 23px; }
  .rs-bar { padding: 0 4px; margin-top: 34px; flex-wrap: wrap; row-gap: 22px; }
  .rs-bars { order: -1; flex-basis: 100%; }
  .rs-nav { margin-left: auto; }
  .rs-btn { width: 52px; height: 52px; }
}
/* client: no white frame — the photo fills the card, and the card takes each photo's own shape (no gaps, no crop) */
.rs-stage { padding: 0; background: transparent; aspect-ratio: var(--ratio, 1 / 1); transition: opacity 1.2s ease .5s, transform 1.6s cubic-bezier(.16,1,.3,1) .5s, aspect-ratio .9s cubic-bezier(.16,1,.3,1); }
.rs-view { inset: 0; border-radius: 36px; }
.rs-stage img { object-fit: cover; }
@media (max-width: 700px) {
  .rs { padding: 0; }
  .rs-stage { border-radius: 0; }
  .rs-view { inset: 0; border-radius: 0; }
  .rs-bar { padding: 0 18px; }
}

/* ---------- "Our Smiles" — story deck ---------- */
.smiles {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 110px); align-items: center;
  margin-top: clamp(110px, 13vw, 180px); padding: 0 6px;
}
.sm-kicker {
  margin: 0 0 22px .2em; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1em; color: var(--sand-ink);
  opacity: 0; transition: opacity 1.2s ease .1s, letter-spacing 2s cubic-bezier(.16,1,.3,1) .1s;
}
.sm-title { margin: 0 0 26px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(42px, 5.6vw, 88px); line-height: 1; letter-spacing: -.03em; color: var(--olive); }
.sm-title em { font-style: italic; color: var(--sand-ink); }
.sm-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.sm-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .3s; }
.sm-title .ln + .ln > span { transition-delay: .45s; }
.sm-text { margin: 0 0 30px; max-width: 40ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8; font-weight: 300; color: var(--muted); opacity: 0; transition: opacity 1.2s ease .8s; }
.sm-hint { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-ink); opacity: 0; transition: opacity 1s ease 1.2s; }
.sm-hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand-ink); box-shadow: 0 0 0 0 rgba(154,135,99,.5); animation: smPulse 2.2s ease-out infinite; }
@keyframes smPulse { 0% { box-shadow: 0 0 0 0 rgba(154,135,99,.5); } 100% { box-shadow: 0 0 0 12px rgba(154,135,99,0); } }

.sm-deck {
  position: relative; justify-self: center; width: min(100%, 400px); aspect-ratio: 9 / 15;
  perspective: 1400px; outline: none; user-select: none; touch-action: pan-y;
  opacity: 0; transform: translateY(40px); transition: opacity 1.2s ease .4s, transform 1.6s cubic-bezier(.16,1,.3,1) .4s;
}
.sm-deck:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 8px; border-radius: 34px; }
.sm-cards { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.sm-card {
  --d: 0;
  position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 30px; background: #2B2E21;
  /* cards behind fan out to the right and down, slightly rotated */
  transform:
    translate3d(calc(var(--d) * 20px), calc(var(--d) * 14px), calc(var(--d) * -60px))
    rotate(calc(var(--d) * 3.2deg)) scale(calc(1 - var(--d) * .045));
  opacity: calc(1 - max(0, var(--d) - 2) * 1);
  z-index: calc(20 - var(--d));
  box-shadow: 0 2px 4px rgba(43,46,33,.06), 0 30px 60px -28px rgba(43,46,33,.45);
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .7s ease, filter .7s ease;
  filter: brightness(calc(1 - var(--d) * .08));
}
.sm-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-user-drag: none; transform: scale(1.06); transition: transform 4.5s linear; }
.sm-card.front img { transform: scale(1); }           /* slow Ken Burns push while a story plays */
.sm-card.front::after { /* soft top shade so the story UI reads */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 26%; background: linear-gradient(180deg, rgba(20,21,15,.5), rgba(20,21,15,0)); pointer-events: none;
}
/* the card that just finished flies off, then rejoins at the back of the deck */
.sm-card.fly {
  transform: translate3d(var(--fx, 130%), -6%, 60px) rotate(var(--fr, 18deg)) scale(.96) !important;
  opacity: 0 !important; transition: transform .9s cubic-bezier(.55,0,.25,1), opacity .7s ease .15s !important;
}
.sm-card.drag { transition: none !important; }

.sm-ui { position: absolute; z-index: 40; left: 16px; right: 16px; top: 14px; pointer-events: none; transition: opacity .3s ease; }
.sm-bars { display: flex; gap: 4px; margin-bottom: 12px; }
.sm-bars span { position: relative; flex: 1; height: 2.5px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.sm-bars span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.sm-bars span.done::after { transform: scaleX(1); }
.sm-bars span.run::after { animation: hlBar var(--dur, 4.5s) linear forwards; }
.sm-deck.paused .sm-bars span.run::after { animation-play-state: paused; }
.sm-who { display: flex; align-items: center; gap: 10px; color: #fff; }
.sm-avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #5A5C45, #2B2E21); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3.5px #BFAE8E;
}
.sm-avatar img { width: 78%; height: auto; }
.sm-name { font-size: 13.5px; font-weight: 500; letter-spacing: .01em; }
.sm-time { font-size: 12px; opacity: .7; }
.sm-tap { position: absolute; z-index: 30; top: 0; bottom: 0; width: 40%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sm-tap.prev { left: 0; cursor: w-resize; }
.sm-tap.next { right: 0; width: 60%; cursor: e-resize; }
.sm-tap:focus-visible { outline: none; }

.smiles.in .sm-kicker { opacity: 1; letter-spacing: .55em; }
.smiles.in .sm-title .ln > span { transform: none; }
.smiles.in .sm-text, .smiles.in .sm-hint { opacity: 1; }
.smiles.in .sm-deck { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .smiles { grid-template-columns: 1fr; }
  .sm-deck { width: min(78vw, 380px); margin-right: 22px; }
}
@media (max-width: 700px) {
  .smiles { margin: 110px 0 0; padding: 0 18px; gap: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-card, .sm-card img, .sm-cards { transition: none !important; }
  .sm-hint-dot { animation: none; }
}
/* the flying card and the fanned deck must never widen the page */
.smiles { overflow-x: clip; overflow-y: visible; padding-block: 30px 50px; margin-block-end: -50px; }
.ba { overflow-x: clip; overflow-y: visible; }   /* the halo behind the results card must not widen the page */
/* Instagram-style story header: system font like the app, Meta-verified badge in Instagram blue */
.sm-ui { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sm-who { gap: 8px; }
.sm-avatar { width: 32px; height: 32px; box-shadow: none; border: 0; }
.sm-name { font-size: 14px; font-weight: 600; letter-spacing: 0; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sm-verified { flex: none; width: 13px; height: 13px; margin-left: -3px; }
.sm-time { font-size: 14px; font-weight: 400; opacity: .72; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sm-more { margin-left: auto; display: inline-flex; gap: 3px; padding: 6px 2px; }
.sm-more i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #fff; }
.sm-bars { gap: 3px; margin-bottom: 10px; }
.sm-bars span { height: 2px; }
/* "Our Smiles" copy styled like an Instagram post */
.sm-post {
  max-width: 460px; padding: 22px 24px 20px; border-radius: 26px; background: #fff;
  box-shadow: 0 1px 2px rgba(43,46,33,.05), 0 24px 50px -30px rgba(43,46,33,.35);
  opacity: 0; transform: translateY(20px); transition: opacity 1.1s ease .3s, transform 1.4s cubic-bezier(.16,1,.3,1) .3s;
}
.sm-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sm-post-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #5A5C45, #2B2E21);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #BFAE8E; }
.sm-post-avatar img { width: 78%; height: auto; }
.sm-post-name { font-size: 14.5px; font-weight: 600; color: #262626; }
.sm-post .sm-verified { width: 14px; height: 14px; margin-left: -2px; }
.sm-post .sm-title { margin: 0 0 16px; font-size: clamp(40px, 4.8vw, 72px); }
.sm-post .sm-text { margin: 0 0 10px; color: #4A4C40; }
.sm-tags { margin: 0 0 18px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color: #00376B; }
.sm-react { display: flex; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px solid rgba(43,46,33,.08); color: #262626; }
.sm-react svg { width: 24px; height: 24px; }
.sm-heart { fill: #FF3040; transform-origin: center; }
.smiles.in .sm-heart { animation: smLike 2.8s ease-in-out 1.8s infinite; }
@keyframes smLike { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.28); } 86% { transform: scale(.94); } }
.sm-liked { margin-left: auto; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13.5px; font-weight: 600; color: #262626; }
.smiles.in .sm-post { opacity: 1; transform: none; }
.sm-copy .sm-hint { margin-top: 22px; }
@media (max-width: 700px) {
  .sm-post { padding: 18px 18px 16px; }
  .sm-react { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .smiles.in .sm-heart { animation: none; } }
/* client: the Instagram-post card felt heavy — back to light, plain copy like the other sections */
.sm-post { max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.sm-post-head, .sm-tags, .sm-react { display: none; }
.sm-post .sm-text { color: var(--muted); }
.sm-deck { aspect-ratio: 2 / 3; }   /* same shape as the client's smiling photos, so nothing is cut */

/* ---------- Videos ---------- */
.vids { margin-top: clamp(110px, 13vw, 180px); padding: 0 6px; overflow-x: clip; }
.vd-head { margin-bottom: clamp(26px, 3.5vw, 44px); }
.vd-kicker {
  margin: 0 0 22px .2em; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1em; color: var(--sand-ink);
  opacity: 0; transition: opacity 1.2s ease .1s, letter-spacing 2s cubic-bezier(.16,1,.3,1) .1s;
}
.vd-title { margin: 0; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(38px, 4.8vw, 72px); line-height: 1.04; letter-spacing: -.03em; color: var(--olive); }
.vd-title em { font-style: italic; color: var(--sand-ink); }
.vd-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.vd-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .3s; }

.vd-track {
  display: flex; gap: clamp(14px, 1.6vw, 22px); margin: 0 -6px; padding: 10px 6px 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.vd-track::-webkit-scrollbar { display: none; }
.vd-card, .vd-more {
  position: relative; flex: 0 0 clamp(230px, 24vw, 320px); aspect-ratio: 9 / 16; scroll-snap-align: start;
  border-radius: 28px; overflow: hidden; opacity: 0; transform: translateY(40px);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.16,1,.3,1), box-shadow .6s ease;
}
.vd-card:nth-child(1) { transition-delay: .4s; } .vd-card:nth-child(2) { transition-delay: .52s; }
.vd-card:nth-child(3) { transition-delay: .64s; } .vd-more { transition-delay: .76s; }
.vd-card {
  padding: 0; border: 0; cursor: pointer; color: #fff;
  background: radial-gradient(70% 60% at 50% 35%, rgba(191,174,142,.35), transparent 70%), linear-gradient(160deg, #3B3F2E, #2B2E21);
  box-shadow: 0 2px 4px rgba(43,46,33,.06), 0 30px 60px -32px rgba(43,46,33,.5);
}
.vd-cover, .vd-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-cover img { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.vd-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,21,15,.55), rgba(20,21,15,0) 40%); pointer-events: none; }
.vd-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .6s cubic-bezier(.16,1,.3,1), background .4s ease;
}
.vd-play::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: vdPulse 2.6s ease-out infinite; }
@keyframes vdPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 100% { box-shadow: 0 0 0 18px rgba(255,255,255,0); } }
.vd-play svg { width: 24px; height: 24px; margin-left: 3px; }
.vd-meta { position: absolute; z-index: 1; left: 16px; bottom: 16px; font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.vd-card:hover { box-shadow: 0 2px 4px rgba(43,46,33,.06), 0 40px 70px -30px rgba(43,46,33,.6); }
.vd-card:hover .vd-cover img { transform: scale(1.05); }
.vd-card:hover .vd-play { transform: scale(1.1); background: rgba(255,255,255,.3); }
.vd-card:focus-visible, .vd-more:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 4px; }

/* "More videos": a slowly spinning ring of text around an Instagram mark */
.vd-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-decoration: none; color: var(--olive);
  background: linear-gradient(160deg, #fff, #F3F0E9); box-shadow: inset 0 0 0 1px rgba(43,46,33,.08), 0 30px 60px -36px rgba(43,46,33,.4);
}
.vd-more-ring { position: relative; width: 66%; aspect-ratio: 1; }
.vd-more-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: vdSpin 18s linear infinite; }
.vd-more-ring text { font-family: var(--font); font-size: 15.5px; font-weight: 500; letter-spacing: 4.2px; fill: var(--sand-ink); }
.vd-more-core {
  position: absolute; inset: 27%; display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #5A5C45, #2B2E21); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 26px -12px rgba(43,46,33,.6);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.vd-ig { width: 42%; height: 42%; }
.vd-more-text { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.vd-more-text svg { width: 16px; height: 16px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.vd-more:hover .vd-more-ring > svg { animation-duration: 6s; }
.vd-more:hover .vd-more-core { transform: scale(1.08) rotate(-8deg); }
.vd-more:hover .vd-more-text svg { transform: translateX(6px); }
@keyframes vdSpin { to { transform: rotate(360deg); } }

.vids.in .vd-kicker { opacity: 1; letter-spacing: .55em; }
.vids.in .vd-title .ln > span { transform: none; }
.vids.in .vd-card, .vids.in .vd-more { opacity: 1; transform: none; }

/* popup: the video opens whole, in its real shape, over a blurred backdrop */
.vd-pop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.vd-pop[hidden] { display: none; }
.vd-pop-shade { position: absolute; inset: 0; background: rgba(20, 21, 15, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .5s ease; }
.vd-pop-box {
  position: relative; width: min(92vw, calc(84vh * var(--r, 1)), 1100px); aspect-ratio: var(--r, 1);
  border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7);
  opacity: 0; transform: scale(.88) translateY(20px); transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.vd-pop-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.vd-pop-close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  color: #fff; cursor: pointer; background: rgba(20,21,15,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.vd-pop-close:hover { transform: rotate(90deg); background: rgba(20,21,15,.7); }
.vd-pop-close svg { width: 18px; height: 18px; }
.vd-pop.open .vd-pop-shade { opacity: 1; }
.vd-pop.open .vd-pop-box { opacity: 1; transform: none; }
body.vd-lock { overflow: hidden; }

@media (max-width: 700px) {
  .vids { margin: 110px 0 0; padding: 0; }
  .vd-head { padding: 0 18px; }
  .vd-track { margin: 0; padding: 10px 18px 40px; scroll-padding-inline: 18px; gap: 12px; }
  .vd-card, .vd-more { flex-basis: 66vw; }
  .vd-pop { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-more-ring > svg, .vd-play::before { animation: none; }
}
.vd-cover img { object-position: 50% 25%; }   /* keep the client's head and hands in the tall card */

/* ---------- Contact ---------- */
.contact {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 110px); align-items: start;
  margin-top: clamp(110px, 13vw, 180px); padding: 0 6px;
}
.ct-kicker {
  margin: 0 0 22px .2em; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1em; color: var(--sand-ink);
  opacity: 0; transition: opacity 1.2s ease .1s, letter-spacing 2s cubic-bezier(.16,1,.3,1) .1s;
}
.ct-title { margin: 0 0 24px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(40px, 5vw, 76px); line-height: 1.02; letter-spacing: -.03em; color: var(--olive); }
.ct-title em { font-style: italic; color: var(--sand-ink); }
.ct-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.ct-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .3s; }
.ct-text { margin: 0; max-width: 44ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8; font-weight: 300; color: var(--muted); opacity: 0; transition: opacity 1.2s ease .7s; }
.ct-head { position: sticky; top: 40px; }
.ct-label { margin: 0 0 14px 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .3em; color: var(--olive); }
.ct-label + .ct-list { margin-bottom: 34px; }
.ct-list { display: grid; gap: 10px; }
.ct-item {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 22px; text-decoration: none; color: var(--olive);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.07), 0 10px 26px -20px rgba(43,46,33,.35);
  opacity: 0; transform: translateY(16px);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, background .4s ease;
}
.ct-list .ct-item:nth-child(1) { transition-delay: .3s, .3s, 0s, 0s; }
.ct-list .ct-item:nth-child(2) { transition-delay: .38s, .38s, 0s, 0s; }
.ct-list .ct-item:nth-child(3) { transition-delay: .46s, .46s, 0s, 0s; }
.ct-list .ct-item:nth-child(4) { transition-delay: .54s, .54s, 0s, 0s; }
.ct-list .ct-item:nth-child(5) { transition-delay: .62s, .62s, 0s, 0s; }
.ct-ico {
  flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #5A5C45 0%, #3B3F2E 55%, #2B2E21 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 16px -8px rgba(43,46,33,.6);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.ct-ico svg { width: 21px; height: 21px; }
.ct-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-txt b { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; }
.ct-txt span { font-size: 15.5px; font-weight: 300; color: #55574A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-go { margin-left: auto; flex: none; color: var(--sand-ink); opacity: .6; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.ct-go svg { width: 18px; height: 18px; }
.ct-item:hover { box-shadow: inset 0 0 0 1px rgba(43,46,33,.12), 0 16px 34px -20px rgba(43,46,33,.45); }
.ct-item:hover .ct-ico { transform: scale(1.06) rotate(-6deg); }
.ct-item:hover .ct-go { transform: translateX(4px); opacity: 1; }
.ct-item:focus-visible, .ct-soc:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 3px; }
.ct-social { display: flex; align-items: center; gap: 10px; }
.ct-soc {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--olive);
  box-shadow: inset 0 0 0 1.5px rgba(43,46,33,.35); transition: background .35s ease, color .35s ease, transform .35s ease;
}
.ct-soc svg { width: 22px; height: 22px; }
.ct-soc:hover { background: var(--olive); color: #fff; transform: translateY(-2px); }
.ct-handle { margin-left: 8px; font-size: 16px; font-weight: 500; color: var(--olive); }

.contact.in .ct-kicker { opacity: 1; letter-spacing: .55em; }
.contact.in .ct-title .ln > span { transform: none; }
.contact.in .ct-text { opacity: 1; }
.contact.in .ct-item { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .ct-head { position: static; }
}
@media (max-width: 700px) {
  .contact { margin: 110px 0 0; padding: 0 18px 110px; gap: 36px; }
  .ct-item { padding: 12px 14px 12px 12px; gap: 14px; }
  .ct-ico { width: 46px; height: 46px; }
}

/* ---------- WhatsApp language picker ---------- */
.wa-pop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; }
.wa-pop[hidden] { display: none; }
.wa-shade { position: absolute; inset: 0; background: rgba(20,21,15,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s ease; }
.wa-sheet {
  position: relative; width: min(100%, 640px); max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: 34px clamp(20px, 4vw, 40px) 30px; border-radius: 32px; background: var(--surface); text-align: center;
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .45s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.wa-close {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  color: var(--olive); cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.12); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.wa-close:hover { transform: rotate(90deg); }
.wa-close svg { width: 18px; height: 18px; }
.wa-title { margin: 6px 48px 0; font-family: var(--font); font-size: clamp(17px, 1.6vw, 21px); font-weight: 400; line-height: 1.45; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.wa-rule { display: block; width: 46%; height: 1px; margin: 18px auto; background: linear-gradient(90deg, transparent, var(--sand), transparent); }
.wa-text { margin: 0 auto 22px; max-width: 46ch; font-size: 15px; line-height: 1.65; font-weight: 300; color: var(--muted); }
.wa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.wa-lang {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; text-decoration: none; color: var(--olive);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(191,174,142,.45);
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease;
  transition-delay: calc(.12s + var(--i) * .025s), calc(.12s + var(--i) * .025s), 0s, 0s;
}
.wa-lang:hover { background: #F5F3EC; box-shadow: inset 0 0 0 1.5px var(--olive-3); }
.wa-lang:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 2px; }
.wa-flag { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F3EFE6; font-size: 21px; line-height: 1; }
.wa-name { font-size: 15.5px; font-weight: 500; }
.wa-imsg { text-align: left; opacity: 1; transform: none; background: #F3F1EB; }
.wa-pop.open .wa-shade { opacity: 1; }
.wa-pop.open .wa-sheet { opacity: 1; transform: none; }
.wa-pop.open .wa-lang { opacity: 1; transform: none; }

/* sticky quick-contact bar (phones) */
.wa-bar { display: none; }
@media (max-width: 700px) {
  .wa-pop { place-items: end center; padding: 0; }
  .wa-sheet { width: 100%; max-height: 92vh; border-radius: 28px 28px 0 0; padding: 26px 16px calc(22px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: opacity .3s ease, transform .6s cubic-bezier(.16,1,.3,1); }
  .wa-title { margin: 4px 50px 0; font-size: 16px; }
  .wa-grid { gap: 8px; }
  .wa-lang { padding: 8px 10px 8px 8px; gap: 10px; border-radius: 16px; }
  .wa-flag { width: 36px; height: 36px; font-size: 19px; }
  .wa-name { font-size: 14.5px; }
  .wa-bar {
    position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden;
    background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(43,46,33,.08), 0 18px 40px -16px rgba(43,46,33,.45);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transform: translateY(140%); transition: transform .6s cubic-bezier(.16,1,.3,1);
  }
  .wa-bar.show { transform: none; }
  .wa-bar a { display: flex; align-items: center; justify-content: center; gap: 9px; height: 56px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--olive); text-decoration: none; }
  .wa-bar a + a { box-shadow: inset 1px 0 0 rgba(43,46,33,.1); }
  .wa-bar svg { width: 19px; height: 19px; color: var(--sand-ink); }
}
@media (prefers-reduced-motion: reduce) { .wa-sheet, .wa-lang, .wa-bar { transition: none !important; } }
.ct-body, .ct-head, .ct-list, .ct-item { min-width: 0; }
@media (max-width: 700px) { .wa-bar a { font-size: 11.5px; letter-spacing: .06em; gap: 7px; white-space: nowrap; } }
.ct-social { flex-wrap: wrap; row-gap: 12px; }
.ct-handle { flex-basis: 100%; margin: 6px 0 0 4px; }
@media (max-width: 700px) { .ct-social { gap: 8px; } .ct-soc { width: 46px; height: 46px; } .ct-soc svg { width: 20px; height: 20px; } }
/* sticky bar — option D (client): left label rotates short promises, WhatsApp side is olive and glows softly */
@media (max-width: 700px) {
  .wa-rot { position: relative; display: block; height: 16px; overflow: hidden; }
  .wa-rot span { display: block; height: 16px; line-height: 16px; animation: waRoll 9s cubic-bezier(.7,0,.2,1) infinite; }
  .wa-bar a.wa-go { color: #fff; background: linear-gradient(135deg, #5A5C45, #2B2E21); animation: waBreathe 3s ease-in-out infinite; }
  .wa-bar a.wa-go svg { color: #fff; }
}
@keyframes waRoll { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-16px); } 66%, 94% { transform: translateY(-32px); } 100% { transform: translateY(-48px); } }
@keyframes waBreathe { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(191,174,142,0); } 50% { box-shadow: inset 0 0 22px 0 rgba(191,174,142,.55); } }
@media (prefers-reduced-motion: reduce) { .wa-rot span, .wa-bar a.wa-go { animation: none; } }

/* ---------- Free consultation form ---------- */
.consult-form { margin-top: clamp(110px, 13vw, 180px); padding: 0 6px; }
.cf-card {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start;
  padding: clamp(26px, 4vw, 60px); border-radius: var(--r-xl); background: #fff;
  box-shadow: 0 1px 2px rgba(43,46,33,.05), 0 40px 80px -50px rgba(43,46,33,.4);
  opacity: 0; transform: translateY(30px); transition: opacity 1.1s ease .2s, transform 1.4s cubic-bezier(.16,1,.3,1) .2s;
}
.cf-kicker { margin: 0 0 20px .2em; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .55em; color: var(--sand-ink); }
.cf-title { margin: 0 0 20px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(36px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -.03em; color: var(--olive); }
.cf-title em { font-style: italic; color: var(--sand-ink); }
.cf-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.cf-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .45s; }
.cf-text { margin: 0; max-width: 34ch; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.75; font-weight: 300; color: var(--muted); }

.cf-form { display: grid; gap: 14px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* floating-label field */
.cf-field { position: relative; display: block; }
.cf-field input, .cf-field textarea {
  width: 100%; height: 58px; padding: 22px 18px 8px; border: 0; border-radius: 16px; outline: none;
  font: 400 15.5px/1.3 var(--font); color: var(--olive); background: #F5F3EE;
  box-shadow: inset 0 0 0 1px rgba(43,46,33,.06); transition: box-shadow .3s ease, background .3s ease;
}
.cf-field textarea { height: auto; min-height: 104px; padding-top: 26px; resize: vertical; }
.cf-field > span {
  position: absolute; left: 18px; top: 19px; font-size: 15px; font-weight: 300; color: #8C8572; pointer-events: none;
  transform-origin: left top; transition: transform .35s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.cf-field input:focus, .cf-field textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--olive-3), 0 8px 22px -14px rgba(43,46,33,.4); }
.cf-field input:focus + span, .cf-field input:not(:placeholder-shown) + span,
.cf-field textarea:focus + span, .cf-field textarea:not(:placeholder-shown) + span { transform: translateY(-11px) scale(.76); color: var(--sand-ink); }
.cf-field.bad input, .cf-field.bad textarea { box-shadow: inset 0 0 0 1.5px #B4553F; }

.cf-chips { margin: 4px 0 2px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chips legend { margin: 0 0 10px 4px; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--olive); }
.cf-chips label { position: relative; cursor: pointer; }
.cf-chips input { position: absolute; opacity: 0; pointer-events: none; }
.cf-chips span {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 400; color: var(--olive);
  background: #F5F3EE; box-shadow: inset 0 0 0 1px rgba(43,46,33,.08);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.cf-chips label:hover span { box-shadow: inset 0 0 0 1px rgba(43,46,33,.25); }
.cf-chips input:checked + span { color: #fff; background: linear-gradient(135deg, #5A5C45, #2B2E21); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -10px rgba(43,46,33,.6); transform: translateY(-1px); }
.cf-chips input:focus-visible + span { outline: 2px solid var(--olive-3); outline-offset: 2px; }
.cf-chips.bad span { box-shadow: inset 0 0 0 1px #B4553F; }

.cf-agree { position: relative; display: flex; align-items: center; gap: 12px; margin: 2px 0 4px; font-size: 14px; font-weight: 300; color: var(--muted); cursor: pointer; }
.cf-agree input { position: absolute; opacity: 0; }
.cf-box { flex: none; position: relative; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(43,46,33,.3); transition: background .25s ease, box-shadow .25s ease; }
.cf-box::after { content: ""; position: absolute; left: 7.5px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.cf-agree input:checked + .cf-box { background: var(--olive); box-shadow: none; }
.cf-agree input:checked + .cf-box::after { transform: rotate(45deg) scale(1); }
.cf-agree input:focus-visible + .cf-box { outline: 2px solid var(--olive-3); outline-offset: 2px; }
.cf-agree.bad .cf-box { box-shadow: inset 0 0 0 1.5px #B4553F; }

.cf-send { height: 56px; width: 100%; justify-content: center; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.cf-send svg { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.cf-send:hover svg { transform: translateX(5px); }
.cf-send[disabled] { opacity: .7; cursor: progress; }
.cf-send.busy svg { animation: cfSpin .9s linear infinite; }
@keyframes cfSpin { to { transform: rotate(360deg); } }
.cf-msg { margin: 0; min-height: 1.2em; font-size: 13.5px; color: #B4553F; text-align: center; }

.cf-done { grid-column: 2; align-self: center; text-align: center; padding: 30px 10px; }
.cf-done h3 { margin: 18px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 40px; color: var(--olive); }
.cf-done p { margin: 0 auto; max-width: 32ch; font-size: 15.5px; line-height: 1.7; font-weight: 300; color: var(--muted); }
.cf-check { width: 72px; height: 72px; }
.cf-check circle { fill: none; stroke: var(--sand); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: cfDraw .8s ease forwards; }
.cf-check path { fill: none; stroke: var(--olive); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cfDraw .5s ease .6s forwards; }
@keyframes cfDraw { to { stroke-dashoffset: 0; } }

.consult-form.in .cf-card { opacity: 1; transform: none; }
.consult-form.in .cf-title .ln > span { transform: none; }

@media (max-width: 860px) {
  .cf-card { grid-template-columns: minmax(0, 1fr); }
  .cf-done { grid-column: 1; }
}
@media (max-width: 700px) {
  .consult-form { margin: 110px 0 0; padding: 0 12px; }
  .cf-card { padding: 28px 18px; border-radius: 30px; }
  .cf-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .cf-card, .cf-title .ln > span { transition: none; } }
/* phone with flag + country code, and the country select */
.cf-phone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.cf-code { position: relative; display: block; }
.cf-code-show {
  display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 12px 0 14px; border-radius: 16px; background: #F5F3EE;
  box-shadow: inset 0 0 0 1px rgba(43,46,33,.06); font-size: 15px; color: var(--olive); transition: box-shadow .3s ease, background .3s ease;
}
.cf-flag { font-size: 20px; line-height: 1; }
.cf-dial { font-weight: 500; }
.cf-code-show svg, .cf-select svg { width: 16px; height: 16px; color: var(--sand-ink); }
.cf-code-select, .cf-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.cf-code:focus-within .cf-code-show { background: #fff; box-shadow: inset 0 0 0 1.5px var(--olive-3); }
.cf-select select {
  position: static; opacity: 1; appearance: none; -webkit-appearance: none; height: 58px; padding: 22px 40px 8px 18px; border: 0; border-radius: 16px;
  font: 400 15.5px/1.3 var(--font); color: var(--olive); background: #F5F3EE; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06); outline: none;
}
.cf-select select:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--olive-3); }
.cf-select svg { position: absolute; right: 16px; top: 21px; pointer-events: none; }
.cf-select.filled > span, .cf-select select:focus + span { transform: translateY(-11px) scale(.76); color: var(--sand-ink); }
.cf-select.bad select { box-shadow: inset 0 0 0 1.5px #B4553F; }

/* ---------- AI Hairline Preview (homepage teaser) ---------- */
.aih { margin-top: clamp(100px, 12vw, 170px); }
.aih-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center;
  padding: clamp(28px, 4.5vw, 64px); border-radius: var(--r-xl); color: #EDE5D4;
  background:
    radial-gradient(55% 60% at 78% 40%, rgba(191,174,142,.22), transparent 65%),
    radial-gradient(50% 60% at 0% 100%, rgba(90,92,69,.55), transparent 65%),
    linear-gradient(150deg, #23261B 0%, #2B2E21 55%, #34372A 100%);
  box-shadow: 0 50px 90px -50px rgba(43,46,33,.75);
}
.aih-card::before { /* fine technical grid */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(237,229,212,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(237,229,212,.05) 1px, transparent 1px);
  background-size: 40px 40px; -webkit-mask-image: radial-gradient(70% 80% at 75% 45%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 75% 45%, #000, transparent 75%);
}
.aih-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .4em; color: var(--sand); }
.aih-spark { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 14px 2px rgba(191,174,142,.7); animation: aihPulse 2s ease-in-out infinite; }
@keyframes aihPulse { 50% { transform: scale(.6); opacity: .6; } }
.aih-title { margin: 0 0 22px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(36px, 4.2vw, 64px); line-height: 1.05; letter-spacing: -.03em; color: #F3ECDD; }
.aih-title em { font-style: italic; color: var(--sand); }
.aih-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.aih-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .3s; }
.aih-title .ln + .ln > span { transition-delay: .45s; }
.aih-text { margin: 0 0 26px; max-width: 44ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8; font-weight: 300; color: rgba(237,229,212,.75); }
.aih-points { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.aih-points li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; font-weight: 300; color: #EDE5D4; opacity: 0; transform: translateX(-12px); transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.aih-points li:nth-child(1) { transition-delay: .7s; } .aih-points li:nth-child(2) { transition-delay: .85s; } .aih-points li:nth-child(3) { transition-delay: 1s; }
.aih-points span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--sand); box-shadow: inset 0 0 0 1px rgba(191,174,142,.45); }
.aih-cta {
  position: relative; overflow: hidden; height: 58px; padding: 0 28px; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #2B2E21;
  background: linear-gradient(135deg, #EFE6D2, #BFAE8E); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 18px 34px -16px rgba(191,174,142,.7);
}
.aih-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); animation: aihSheen 3.6s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes aihSheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.aih-cta svg { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.aih-cta:hover { transform: translateY(-2px); }
.aih-cta:hover svg { transform: translateX(5px); }
.aih-meta { margin: 14px 0 0 4px; font-size: 12.5px; letter-spacing: .06em; color: rgba(237,229,212,.55); }

/* the stage */
.aih-stage {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 38%, #4A4C39, #23261B 75%);
  box-shadow: 0 0 0 1px rgba(237,229,212,.12), 0 40px 70px -40px rgba(0,0,0,.6);
}
.aih-stage img, .aih-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aih-stage img { object-fit: cover; object-position: 50% 0; filter: saturate(.85) contrast(1.02); }
.aih-svg { overflow: visible; }
.aih-pts circle { fill: #fff; stroke: rgba(191,174,142,.55); stroke-width: 7; paint-order: stroke; }
.aih-mesh path, .aih-dim, .aih-guide, .aih-core, .aih-glow { stroke-dasharray: 1; stroke-dashoffset: 1; }
.aih-dim { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.aih-guide { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.2; }
.aih-tag rect { fill: rgba(35,38,27,.75); stroke: rgba(220,207,180,.6); stroke-width: 1.2; }
.aih-tag text { fill: #fff; font: 600 17px var(--font); text-anchor: middle; }
.aih-core, .aih-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.aih-core { stroke: #fff; stroke-width: 4; }
.aih-glow { stroke: #DCCFB4; stroke-width: 12; opacity: .9; }
.aih-pen { fill: #fff; filter: url(#aihGlow); opacity: 0; }
.aih-frame path { stroke-dasharray: 80; stroke-dashoffset: 80; opacity: .8; }

/* hidden until the timeline runs */
.aih-scan, .aih-pts circle, .aih-tag, .aih-zone, .aih-m { opacity: 0; }
.aih-pts circle, .aih-tag { transform-box: fill-box; transform-origin: center; }

/* timeline (~8.5s), restarted by legacy.js */
.aih-view.run .aih-frame path { animation: aihDraw .7s .2s ease-out forwards; }
.aih-view.run .aih-scan { animation: aihScanMove 1.9s .4s cubic-bezier(.45,0,.3,1) forwards; }
.aih-view.run .aih-pts circle { animation: aihPop .5s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(.9s + var(--i) * .07s); }
.aih-view.run .aih-mesh path { animation: aihDraw 1.2s 1.9s ease-in-out forwards; }
.aih-view.run .aih-m { opacity: 1; }
.aih-view.run .aih-thirds .aih-dim { animation: aihDraw 1s 2.9s ease-in-out forwards; }
.aih-view.run .aih-thirds .aih-guide { animation: aihDraw .8s 3.3s ease-out forwards; }
.aih-view.run .aih-eye .aih-dim { animation: aihDraw .6s 3.3s ease-out forwards; }
.aih-view.run .aih-eye .aih-tag { animation: aihPop .45s 3.7s cubic-bezier(.3,1.5,.5,1) forwards; }
.aih-view.run .aih-brow .aih-dim { animation: aihDraw .6s 3.9s ease-out forwards; }
.aih-view.run .aih-brow .aih-tag { animation: aihPop .45s 4.3s cubic-bezier(.3,1.5,.5,1) forwards; }
.aih-view.run .aih-mesh, .aih-view.run .aih-pts, .aih-view.run .aih-m { animation: aihDim .8s 5s ease forwards; }
.aih-view.run .aih-core, .aih-view.run .aih-glow { animation: aihDraw 1.6s 5.3s cubic-bezier(.55,0,.35,1) forwards; }
.aih-view.run .aih-core.b, .aih-view.run .aih-glow.b { animation-duration: 1s; animation-delay: 6.9s; }
.aih-view.run .aih-zone { animation: aihFade 1s 7.9s ease forwards; }
.aih-view.run .aih-glow { animation-name: aihDraw, aihBreathe; animation-duration: 1.6s, 2.4s; animation-delay: 5.3s, 8s; animation-iteration-count: 1, infinite; }
.aih-view.run .aih-glow.b { animation-duration: 1s, 2.4s; animation-delay: 6.9s, 8s; }
@keyframes aihDraw { to { stroke-dashoffset: 0; } }
@keyframes aihPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes aihScanMove { 0% { opacity: 0; transform: translateY(150px); } 12%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(780px); } }
@keyframes aihDim { to { opacity: .22; } }
@keyframes aihFade { to { opacity: 1; } }
@keyframes aihBreathe { 0%, 100% { opacity: .9; } 50% { opacity: .45; } }

/* HUD */
.aih-hud {
  position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center;
  padding: 12px 16px; border-radius: 18px; color: #fff; font-size: 13px;
  background: rgba(35,38,27,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.aih-status { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; letter-spacing: .04em; }
.aih-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 10px 2px rgba(191,174,142,.8); animation: aihPulse 1.2s ease-in-out infinite; }
.aih-stage.done .aih-dot { background: #7FDCA4; box-shadow: 0 0 10px 2px rgba(127,220,164,.8); animation: none; }
.aih-pct { font-variant-numeric: tabular-nums; font-weight: 300; opacity: .85; }
.aih-pct b { font-weight: 600; }
.aih-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.aih-bar span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #DCCFB4, #fff); }
.aih-ready {
  position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #2B2E21;
  background: linear-gradient(135deg, #EFE6D2, #BFAE8E); box-shadow: 0 12px 26px -12px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-8px) scale(.9); transition: opacity .5s ease, transform .6s cubic-bezier(.3,1.5,.5,1);
}
.aih-ready svg { width: 16px; height: 16px; }
.aih-stage.done .aih-ready { opacity: 1; transform: none; }

.aih.in .aih-title .ln > span { transform: none; }
.aih.in .aih-points li { opacity: 1; transform: none; }

@media (max-width: 960px) { .aih-card { grid-template-columns: minmax(0, 1fr); } .aih-stage { order: -1; } }
@media (max-width: 700px) {
  .aih { margin: 100px 12px 0; }
  .aih-card { padding: 12px 12px 30px; border-radius: 32px; gap: 28px; }
  .aih-copy { padding: 0 10px; }
  .aih-stage { border-radius: 24px; }
  .aih-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .aih-cta::after, .aih-spark { animation: none; } }
/* AI block — two photo views (front, side) cross-fading; overlay back to light lines on the photos */
.aih-view { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .9s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
.aih-view.on { opacity: 1; transform: none; }
.aih-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.9); }
.aih-view .aih-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aih-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(20,21,15,.55), rgba(20,21,15,0) 30%); }
.aih-hud, .aih-ready { z-index: 2; }
.aih-dim { stroke: #fff; }
.aih-guide { stroke: rgba(255,255,255,.5); }
.aih-pts circle { fill: #fff; stroke: rgba(191,174,142,.6); stroke-width: 8; }
.aih-core { stroke: #fff; stroke-width: 5; }
.aih-glow { stroke: #DCCFB4; stroke-width: 16; opacity: .9; }
.aih-tag text { font-size: 24px; }
.aih-tag.sm text { font-size: 21px; }
.aih-frame path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.aih-view.run .aih-thirds .aih-tag { animation: aihPop .45s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: 3.6s; }
.aih-view.run .aih-face { animation: none; }

/* ---------- Footer: dark olive card, big serif line, link columns, huge "OZEL" wordmark with a slow sand sheen ---------- */
.ft { margin-top: clamp(110px, 13vw, 180px); }
.ft-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(30px, 4.5vw, 64px) clamp(26px, 4.5vw, 64px) clamp(24px, 3vw, 36px);
  border-radius: var(--r-xl); color: #EDE5D4;
  background:
    radial-gradient(50% 55% at 100% 0%, rgba(191,174,142,.18), transparent 65%),
    radial-gradient(45% 60% at 0% 100%, rgba(90,92,69,.5), transparent 65%),
    linear-gradient(160deg, #23261B 0%, #2B2E21 60%, #31342A 100%);
  box-shadow: 0 50px 90px -50px rgba(43,46,33,.75);
}
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(36px, 6vw, 100px); }
.ft-logo { width: auto; height: 54px; margin: 0 0 30px -4px; opacity: 0; transform: translateY(10px); transition: opacity 1s ease .1s, transform 1.2s cubic-bezier(.16,1,.3,1) .1s; }
.ft-title { margin: 0 0 20px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -.03em; color: #F4EEE2; }
.ft-title em { font-style: italic; color: var(--sand); }
.ft-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.ft-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .25s; }
.ft-title .ln + .ln > span { transition-delay: .38s; }
.ft-text { margin: 0 0 30px; max-width: 40ch; font-size: 15px; line-height: 1.8; color: rgba(237,229,212,.62); opacity: 0; transition: opacity 1.2s ease .6s; }
.ft-cta { display: flex; flex-wrap: wrap; gap: 10px; opacity: 0; transform: translateY(12px); transition: opacity 1s ease .75s, transform 1.2s cubic-bezier(.16,1,.3,1) .75s; }
.ft-btn {
  position: relative; overflow: hidden; color: #2B2E21; font-weight: 500;
  background: linear-gradient(135deg, #F1E9D7, #BFAE8E); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px -16px rgba(0,0,0,.6);
}
.ft-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); animation: ftSheen 5.5s ease-in-out 2s infinite; }
.ft-btn svg { transition: transform .35s ease; }
.ft-btn:hover svg { transform: translateX(4px); }
.ft-wa { color: #EDE5D4; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(237,229,212,.18); }
.ft-wa:hover { background: rgba(255,255,255,.12); }
.ft-btn:hover, .ft-wa:hover { transform: translateY(-2px); }

.ft-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 28px; align-content: start; padding-top: 8px; }
.ft-col { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.ft-col:nth-child(1) { transition-delay: .35s; } .ft-col:nth-child(2) { transition-delay: .47s; } .ft-col:nth-child(3) { transition-delay: .59s; }
.ft-h { margin: 0 0 18px; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .3em; color: var(--sand); }
.ft-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ft-col a { position: relative; font-size: 15px; font-weight: 300; color: rgba(237,229,212,.8); transition: color .3s ease; }
.ft-col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--sand); transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.ft-col a:hover { color: #fff; }
.ft-col a:hover::after { transform: scaleX(1); transform-origin: left; }
.ft-col-lang { grid-column: 1 / -1; }
.ft-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; line-height: 1; color: rgba(237,229,212,.78); }
.ft-langs span { display: inline-block; padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(237,229,212,.14); }

/* huge wordmark: rises in, then a sand light glides across it */
.ft-mark {
  margin: clamp(40px, 6vw, 80px) 0 0; text-align: center; line-height: .78; overflow: hidden;
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(96px, 23vw, 330px); letter-spacing: .02em;
}
.ft-mark span {
  display: inline-block; transform: translateY(60%); opacity: 0;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, rgba(191,174,142,.16) 0%, rgba(191,174,142,.16) 38%, rgba(241,233,215,.75) 50%, rgba(191,174,142,.16) 62%, rgba(191,174,142,.16) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  transition: transform 1.8s cubic-bezier(.16,1,.3,1) .3s, opacity 1.4s ease .3s;
}
.ft.in .ft-mark span { transform: none; opacity: 1; animation: ftMark 7s ease-in-out 1.6s infinite; }

.ft-bottom {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 22px; opacity: 0; transition: opacity 1.2s ease .9s;
}
.ft-bottom::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(191,174,142,.55), transparent); transform: scaleX(0); transition: transform 1.6s cubic-bezier(.16,1,.3,1) .7s; }
.ft-copy { margin: 0; font-size: 13px; color: rgba(237,229,212,.55); }
.ft-social { display: flex; gap: 8px; }
.ft-soc {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #EDE5D4;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(237,229,212,.14);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.ft-soc svg { width: 17px; height: 17px; }
.ft-soc:hover { background: var(--sand); color: #2B2E21; transform: translateY(-3px); }
.ft-up { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: rgba(237,229,212,.75); transition: color .3s ease; }
.ft-up svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(237,229,212,.25); transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease; }
.ft-up:hover { color: #fff; }
.ft-up:hover svg { transform: translateY(-4px); background: var(--sand); color: #2B2E21; }
.ft-note { margin: 18px 0 0; font-size: 11.5px; line-height: 1.7; color: rgba(237,229,212,.38); opacity: 0; transition: opacity 1.2s ease 1.1s; }

.ft.in .ft-logo, .ft.in .ft-cta, .ft.in .ft-col { opacity: 1; transform: none; }
.ft.in .ft-title .ln > span { transform: none; }
.ft.in .ft-text, .ft.in .ft-bottom, .ft.in .ft-note { opacity: 1; }
.ft.in .ft-bottom::before { transform: scaleX(1); }

@keyframes ftSheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes ftMark { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }

@media (max-width: 960px) {
  .ft-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .ft { margin: 90px 12px 0; padding-bottom: 84px; } /* clear the sticky quick-contact bar */
  .ft-card { padding: 34px 22px 24px; border-radius: 30px; }
  .ft-logo { height: 44px; margin-bottom: 24px; }
  .ft-cta .pill { flex: 1 1 auto; }
  .ft-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 20px; }
  .ft-col-lang { grid-column: 1 / -1; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ft-copy { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-btn::after, .ft.in .ft-mark span { animation: none; }
}

/* =====================================================================================================
   AI Hairline Studio (hairline-ai.html)
   ===================================================================================================== */
.aip-page .topbar { margin-bottom: 22px; }
.studio [hidden] { display: none !important; }

/* hero: one dark olive card — intro on the left, the studio tool on the right */
.aip-hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center;
  padding: clamp(28px, 4.5vw, 64px); border-radius: var(--r-xl); color: #EDE5D4;
  background:
    radial-gradient(55% 60% at 80% 30%, rgba(191,174,142,.2), transparent 65%),
    radial-gradient(50% 60% at 0% 100%, rgba(90,92,69,.55), transparent 65%),
    linear-gradient(150deg, #23261B 0%, #2B2E21 55%, #34372A 100%);
  box-shadow: 0 50px 90px -50px rgba(43,46,33,.75);
}
.aip-crumbs { display: flex; gap: 10px; margin: 0 0 34px; font-size: 13px; color: rgba(237,229,212,.55); }
.aip-crumbs a { color: rgba(237,229,212,.8); transition: color .3s ease; }
.aip-crumbs a:hover { color: #fff; }
.aip-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .4em; color: var(--sand); }
.aip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 14px 2px rgba(191,174,142,.7); animation: aihPulse 2s ease-in-out infinite; }
.aip-title { margin: 0 0 22px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(40px, 4.8vw, 74px); line-height: 1.03; letter-spacing: -.03em; color: #F3ECDD; }
.aip-title em { font-style: italic; color: var(--sand); }
.aip-title .ln, .aip-h .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.aip-title .ln > span { display: inline-block; animation: aipRise 1.3s cubic-bezier(.16,1,.3,1) both; }
.aip-title .ln + .ln > span { animation-delay: .12s; }
@keyframes aipRise { from { transform: translateY(110%); } }
.aip-lead { margin: 0 0 30px; max-width: 46ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8; color: rgba(237,229,212,.7); animation: aipFade 1.2s ease .4s both; }
@keyframes aipFade { from { opacity: 0; transform: translateY(10px); } }
.aip-trust { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; animation: aipFade 1.2s ease .6s both; }
.aip-trust li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(237,229,212,.85); }
.aip-trust svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: var(--sand); box-shadow: inset 0 0 0 1px rgba(191,174,142,.35); }

/* ---------- studio ---------- */
.studio { position: relative; min-width: 0; animation: aipFade 1.2s ease .3s both; scroll-margin-top: 24px; }
.st-idle {
  display: grid; justify-items: center; text-align: center; padding: clamp(26px, 3.5vw, 44px) clamp(20px, 3vw, 40px);
  border-radius: var(--r-lg); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(237,229,212,.14);
}
.studio:not([data-state="idle"]) .st-idle { display: none; }
.st-face { position: relative; width: 150px; margin-bottom: 22px; }
.st-face svg { display: block; width: 100%; stroke-width: 2; }
.st-face-head { stroke: rgba(237,229,212,.35); }
.st-face-feat { stroke: rgba(237,229,212,.45); }
.st-face-line { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(220,207,180,.9)); stroke-dasharray: 220; stroke-dashoffset: 220; animation: stDraw 4.5s cubic-bezier(.65,0,.35,1) infinite; }
.st-face-pen { fill: #fff; filter: drop-shadow(0 0 8px #fff); offset-path: path("M38 92C40 70 52 56 72 54c14-1 22 2 28 2s14-3 28-2c20 2 32 16 34 38"); animation: stPen 4.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes stDraw { 0%, 12% { stroke-dashoffset: 220; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes stPen { 0%, 12% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 55% { offset-distance: 100%; opacity: 1; } 62%, 100% { offset-distance: 100%; opacity: 0; } }
.st-scan { position: absolute; left: -10%; right: -10%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 18px 4px rgba(220,207,180,.5); animation: stScan 3s ease-in-out infinite; }
@keyframes stScan { 0%, 100% { top: 6%; opacity: 0; } 15%, 85% { opacity: 1; } 50% { top: 92%; } }
.st-h { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; color: #F3ECDD; }
.st-p { margin: 0 0 24px; max-width: 34ch; font-size: 14.5px; line-height: 1.7; color: rgba(237,229,212,.65); }
.st-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.st-btn { height: 54px; padding: 0 24px; font-size: 14px; font-weight: 500; letter-spacing: .06em; cursor: pointer; }
.st-btn svg { width: 20px; height: 20px; }
.st-btn-main {
  position: relative; overflow: hidden; color: #2B2E21;
  background: linear-gradient(135deg, #F1E9D7, #BFAE8E); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 16px 34px -18px rgba(0,0,0,.7);
}
.st-btn-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); animation: ftSheen 5s ease-in-out 1.5s infinite; pointer-events: none; }
.st-btn-ghost { color: #EDE5D4; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(237,229,212,.22); }
.st-btn:hover { transform: translateY(-2px); }
.st-btn-ghost:hover { background: rgba(255,255,255,.12); }
.st-btn:focus-within, .st-btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.st-sample { margin: 18px 0 0; padding: 6px; border: 0; background: none; cursor: pointer; font-size: 13.5px; color: rgba(237,229,212,.6); }
.st-sample u { color: #EDE5D4; text-decoration-color: var(--sand); text-underline-offset: 4px; }
.st-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 28px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgba(237,229,212,.12); }
.st-tips li { display: grid; gap: 6px; font-size: 12.5px; line-height: 1.5; color: rgba(237,229,212,.7); }
.st-tips b { font-weight: 500; font-size: 11px; letter-spacing: .2em; color: var(--sand); }

/* the photo stage */
.st-stage { margin: 0; display: grid; gap: 14px; }
.st-frame {
  position: relative; overflow: hidden; width: 100%; max-height: 74vh; margin: 0 auto; border-radius: var(--r-lg); background: #1F2118;
  box-shadow: 0 0 0 1px rgba(237,229,212,.14), 0 40px 70px -40px rgba(0,0,0,.7);
}
.st-photo, .st-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-photo { object-fit: contain; transition: filter .9s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.st-svg { overflow: visible; transition: filter .9s ease; }
.st-frame.blur .st-photo, .st-frame.blur .st-svg { filter: blur(18px) saturate(.8); transform: scale(1.04); }
.st-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(20,21,15,.6), transparent 30%); }

.st-mesh circle { fill: #fff; opacity: 0; }
.st-mesh.on circle { animation: stDot .9s ease var(--d) forwards; }
@keyframes stDot { 0% { opacity: 0; } 40% { opacity: .95; } 100% { opacity: .45; } }
.st-keys circle { fill: #fff; stroke: rgba(191,174,142,.6); stroke-width: calc(var(--s) * 8px); opacity: 0; transform-box: fill-box; transform-origin: center; }
.st-keys.on circle { animation: aihPop .45s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: calc(var(--i) * 40ms); }
.st-meas .st-dim { fill: none; stroke: #fff; stroke-width: calc(var(--s) * 2.4px); stroke-dasharray: 1; stroke-dashoffset: 1; }
.st-meas .st-guide { fill: none; stroke: rgba(255,255,255,.5); stroke-width: calc(var(--s) * 1.6px); stroke-dasharray: 1; stroke-dashoffset: 1; }
.st-meas.on .st-dim { animation: aihDim .9s ease forwards; }
.st-meas.on .st-guide { animation: aihDim .8s ease forwards; animation-delay: calc(.3s + var(--i) * 90ms); }
.st-tag rect { fill: rgba(35,38,27,.7); stroke: rgba(255,255,255,.35); stroke-width: calc(var(--s) * 1.4px); }
.st-tag text { fill: #fff; text-anchor: middle; font-family: var(--font); font-weight: 500; }
.st-tag { opacity: 0; }
.st-meas.on .st-tag { animation: aipTag .5s ease forwards; animation-delay: calc(.7s + var(--i) * 120ms); }
@keyframes aipTag { to { opacity: 1; } }
.st-line { opacity: 0; }
.st-line.on { opacity: 1; }
.st-core { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.st-glow { fill: none; stroke: #DCCFB4; stroke-linecap: round; opacity: .9; }
.st-pen { fill: #fff; filter: drop-shadow(0 0 10px #fff); }
.st-frame.done .st-pen { opacity: 0; transition: opacity .6s ease; }
.st-zone { opacity: 0; transition: opacity 1s ease; }
.st-svg.zone-on .st-zone { opacity: 1; }
.st-frame.done .st-mesh circle { opacity: .18; transition: opacity 1s ease; animation: none; }
.st-scanbar { opacity: 0; }
.st-frame.scanning .st-scanbar { opacity: 1; animation: aipScan 2.4s ease-in-out infinite; }
@keyframes aipScan { from { transform: translateY(0); } to { transform: translateY(calc(var(--scan-h) * 1.16px)); } }

.st-hud {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px 10px; align-items: center;
  padding: 12px 16px; border-radius: 18px; color: #fff; font-size: 13px;
  background: rgba(35,38,27,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity .6s ease;
}
.st-hud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 10px 2px rgba(191,174,142,.8); animation: aihPulse 1.2s ease-in-out infinite; }
.st-frame.done .st-hud-dot { background: #7FDCA4; box-shadow: 0 0 10px 2px rgba(127,220,164,.8); animation: none; }
.st-status { font-weight: 500; letter-spacing: .03em; }
.st-pct { font-variant-numeric: tabular-nums; opacity: .85; }
.st-pct b { font-weight: 600; }
.st-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.st-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #DCCFB4, #fff); transition: width .5s ease; }
.st-frame.blur .st-hud { opacity: 0; }
.st-ready {
  position: absolute; z-index: 2; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px;
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #2B2E21;
  background: linear-gradient(135deg, #EFE6D2, #BFAE8E); box-shadow: 0 12px 26px -12px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-8px) scale(.9); transition: opacity .5s ease, transform .6s cubic-bezier(.3,1.5,.5,1);
}
.st-ready svg { width: 16px; height: 16px; }
.st-frame.done:not(.blur) .st-ready { opacity: 1; transform: none; }

/* unlock card sits over the blurred photo */
.studio[data-state="locked"] .st-stage { position: relative; }
.st-unlock {
  display: grid; gap: 12px; padding: 26px 22px 22px; border-radius: var(--r-lg); color: var(--olive);
  background: var(--surface); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  animation: aipUp .8s cubic-bezier(.16,1,.3,1) both;
}
@media (min-width: 701px) {
  .studio[data-state="locked"] .st-unlock { position: absolute; left: 50%; top: 50%; width: min(420px, calc(100% - 40px)); transform: translate(-50%, -50%); animation-name: aipUpC; }
}
@keyframes aipUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes aipUpC { from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)); } }
.st-unlock-k { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #3E8B5E; }
.st-unlock-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7FDCA4; box-shadow: 0 0 10px 2px rgba(127,220,164,.8); }
.st-unlock-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.12; letter-spacing: -.02em; }
.st-unlock-h em { font-style: italic; color: var(--sand-ink); }
.st-unlock-p { margin: 0 0 4px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.st-field { position: relative; display: block; }
.st-field input {
  width: 100%; height: 56px; padding: 22px 16px 8px; border: 0; border-radius: 16px; outline: none;
  font: 400 16px/1.3 var(--font); color: var(--olive); background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.1); transition: box-shadow .3s ease;
}
.st-field > span { position: absolute; left: 16px; top: 18px; font-size: 15px; font-weight: 300; color: #8C8572; pointer-events: none; transform-origin: left top; transition: transform .35s cubic-bezier(.16,1,.3,1), color .3s ease; }
.st-field input:focus { box-shadow: inset 0 0 0 1.5px var(--olive-3); }
.st-field input:focus + span, .st-field input:not(:placeholder-shown) + span { transform: translateY(-11px) scale(.76); color: var(--sand-ink); }
.st-field.bad input { box-shadow: inset 0 0 0 1.5px #B4553F; }
.st-phone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.st-code { position: relative; display: block; }
.st-code-show { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 10px 0 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.1); font-size: 15px; }
.st-code-show svg { width: 15px; height: 15px; color: var(--sand-ink); }
.st-flag { font-size: 20px; line-height: 1; }
.st-dial { font-weight: 500; }
.st-code-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.st-code:focus-within .st-code-show { box-shadow: inset 0 0 0 1.5px var(--olive-3); }
.st-agree { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.st-agree input { position: absolute; opacity: 0; }
.st-box { flex: none; position: relative; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(43,46,33,.3); transition: background .25s ease; }
.st-box::after { content: ""; position: absolute; left: 6.5px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.st-agree input:checked + .st-box { background: var(--olive); box-shadow: none; }
.st-agree input:checked + .st-box::after { transform: rotate(45deg) scale(1); }
.st-agree input:focus-visible + .st-box { outline: 2px solid var(--olive-3); outline-offset: 2px; }
.st-agree.bad .st-box { box-shadow: inset 0 0 0 1.5px #B4553F; }
.st-go {
  height: 56px; width: 100%; justify-content: center; font-size: 13.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, #5A5C45 0%, #3B3F2E 55%, #2B2E21 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -16px rgba(43,46,33,.8);
}
.st-go svg { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.st-go:hover svg { transform: translateX(5px); }
.st-go.busy svg { animation: cfSpin .9s linear infinite; }
.st-msg { margin: 0; min-height: 1em; font-size: 13px; color: #B4553F; }
.st-fine { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(43,46,33,.5); }

/* result */
.st-result { display: grid; gap: 18px; animation: aipUp .8s cubic-bezier(.16,1,.3,1) both; }
.st-result-k { margin: 6px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--sand); }
.st-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-metric { display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: 20px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(237,229,212,.14); }
.st-metric span { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,229,212,.6); }
.st-metric b { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; color: #F3ECDD; font-variant-numeric: tabular-nums; }
.st-metric i { font-style: normal; }
.st-metric small { font-size: 12px; color: rgba(237,229,212,.5); }
.st-result-p { margin: 0; font-size: 14.5px; line-height: 1.75; color: rgba(237,229,212,.72); }
.st-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.st-result-actions .st-btn { flex: 1 1 200px; }
.st-result-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.st-result-links a { color: var(--sand); font-weight: 500; }
.st-result-links button { border: 0; padding: 0; background: none; cursor: pointer; color: rgba(237,229,212,.65); text-decoration: underline; text-underline-offset: 4px; }

.st-error { display: grid; justify-items: start; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: rgba(180,85,63,.12); box-shadow: inset 0 0 0 1px rgba(220,140,120,.3); }
.st-error-h { margin: 0; font-family: var(--serif); font-size: 24px; color: #F3ECDD; }
.st-error-p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.65; color: rgba(237,229,212,.8); }
.studio[data-state="error"] .st-hud, .studio[data-state="error"] .st-ready { display: none; }

/* ---------- content sections ---------- */
.aip-sec { margin-top: clamp(100px, 12vw, 170px); padding: 0 6px; }
.aip-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.aip-k { margin: 0 0 18px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .4em; color: var(--sand-ink); opacity: 0; transition: opacity 1.2s ease .1s; }
.aip-h { margin: 0; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(36px, 4.4vw, 66px); line-height: 1.04; letter-spacing: -.03em; color: var(--olive); }
.aip-h em { font-style: italic; color: var(--sand-ink); }
.aip-h .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16,1,.3,1) .25s; }
.aip-h .ln + .ln > span { transition-delay: .37s; }
.aip-sec.in .aip-k { opacity: 1; }
.aip-sec.in .aip-h .ln > span { transform: none; }

.aip-step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.aip-step-list li {
  position: relative; padding: 28px 24px 30px; border-radius: var(--r-lg); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(43,46,33,.06), 0 18px 40px -30px rgba(43,46,33,.35);
  opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
}
.aip-step-list li:nth-child(2) { transition-delay: .1s; } .aip-step-list li:nth-child(3) { transition-delay: .2s; } .aip-step-list li:nth-child(4) { transition-delay: .3s; }
.aip-sec.in .aip-step-list li { opacity: 1; transform: none; }
.aip-num { display: block; margin-bottom: 40px; font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--sand); }
.aip-step-list h3 { margin: 0 0 10px; font-size: 17px; font-weight: 500; color: var(--olive); }
.aip-step-list p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }

.aip-science { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.aip-sci-art { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: linear-gradient(150deg, #23261B, #34372A); box-shadow: 0 50px 90px -50px rgba(43,46,33,.75); }
.aip-sci-art svg { display: block; width: 100%; }
.sci-head { stroke: rgba(237,229,212,.4); stroke-width: 2; }
.sci-feat { stroke: rgba(237,229,212,.5); stroke-width: 2; }
.sci-guide { stroke: rgba(191,174,142,.45); stroke-width: 1.2; stroke-dasharray: 4 6; }
.sci-hair { stroke: #fff; stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(220,207,180,.9)); stroke-dasharray: 330; stroke-dashoffset: 330; transition: stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1) .6s; }
.aip-science.in .sci-hair { stroke-dashoffset: 0; }
.sci-tags text { fill: var(--sand); font: 500 13px var(--font); text-anchor: end; }
.aip-sci-copy .aip-h { margin-bottom: 34px; }
.aip-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; }
.aip-rule { padding-top: 18px; border-top: 1px solid rgba(43,46,33,.12); opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.aip-rule:nth-child(2) { transition-delay: .1s; } .aip-rule:nth-child(3) { transition-delay: .2s; } .aip-rule:nth-child(4) { transition-delay: .3s; }
.aip-sec.in .aip-rule { opacity: 1; transform: none; }
.aip-rule h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 500; color: var(--olive); }
.aip-rule p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--muted); }

.aip-honest-card { padding: clamp(30px, 4.5vw, 64px); border-radius: var(--r-xl); background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06), var(--shadow); }
.aip-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; }
.aip-col { padding: 26px 26px 22px; border-radius: var(--r-lg); background: #F5F3EE; }
.aip-col:last-child { color: #EDE5D4; background: linear-gradient(150deg, #23261B, #34372A); }
.aip-col h3 { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-ink); }
.aip-col:last-child h3 { color: var(--sand); }
.aip-col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.aip-col li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; }
.aip-col li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 1.5px; background: var(--sand); }
.aip-col:last-child li { color: rgba(237,229,212,.85); }
.aip-cta { height: 54px; padding: 0 26px; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .08em; background: linear-gradient(135deg, #5A5C45 0%, #3B3F2E 55%, #2B2E21 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -16px rgba(43,46,33,.8); }
.aip-cta svg { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.aip-cta:hover svg { transform: translateX(5px); }

.aip-faq-list { display: grid; gap: 10px; max-width: 900px; }
.aip-faq-list details { border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06); transition: box-shadow .3s ease; }
.aip-faq-list details[open] { box-shadow: inset 0 0 0 1px rgba(43,46,33,.1), 0 18px 40px -30px rgba(43,46,33,.35); }
.aip-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; color: var(--olive); }
.aip-faq-list summary::-webkit-details-marker { display: none; }
.aip-faq-list summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #F5F3EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8763' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.aip-faq-list details[open] summary::after { transform: rotate(45deg); }
.aip-faq-list p { margin: 0; padding: 0 24px 22px; max-width: 70ch; font-size: 15px; line-height: 1.75; color: var(--muted); }

@media (max-width: 1000px) {
  .aip-hero-card { grid-template-columns: minmax(0, 1fr); }
  .aip-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aip-science { grid-template-columns: minmax(0, 1fr); }
  .aip-sci-art { max-width: 420px; }
}
@media (max-width: 700px) {
  /* phones: the dark hero runs edge to edge under the floating glass header, like the homepage video */
  .aip-page .topbar { margin: 0; }
  .aip-hero-card { padding: calc(108px + env(safe-area-inset-top)) 18px 34px; border-radius: 0 0 30px 30px; gap: 34px; box-shadow: none; }
  .aip-crumbs { margin-bottom: 26px; }
  .aip-title { font-size: 42px; }
  .st-idle { padding: 26px 18px; }
  .st-tips { grid-template-columns: minmax(0, 1fr); text-align: left; gap: 12px; }
  .st-tips li { grid-template-columns: 34px 1fr; align-items: baseline; }
  .st-actions .st-btn { flex: 1 1 100%; }
  .st-frame { max-height: none; }
  .st-metrics { grid-template-columns: minmax(0, 1fr); }
  .st-metric { grid-template-columns: 1fr auto; align-items: baseline; }
  .st-metric small { grid-column: 1 / -1; }
  .aip-sec { margin-top: 90px; padding: 0 18px; }
  .aip-step-list { grid-template-columns: minmax(0, 1fr); }
  .aip-num { margin-bottom: 20px; font-size: 36px; }
  .aip-rules, .aip-cols { grid-template-columns: minmax(0, 1fr); }
  .aip-honest-card { padding: 30px 20px; }
  .aip-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .aip-page *, .aip-page *::before, .aip-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* studio idle: the homepage AI block (front + side model photos) is the page's main visual */
.st-idle .aih-stage { width: min(100%, 420px); margin: 0 auto 26px; }
.st-idle .aih-stage .aih-hud { text-align: left; }
@media (max-width: 700px) { .st-idle .aih-stage { width: 100%; border-radius: 24px; } }
/* "How it works" step 03 is the dark card, with the line-art face drawing its hairline */
.aip-step-list .aip-step-hl { color: #EDE5D4; background: linear-gradient(150deg, #23261B, #34372A); box-shadow: 0 30px 60px -36px rgba(43,46,33,.8); }
.aip-step-hl h3 { color: #F3ECDD; }
.aip-step-hl p { color: rgba(237,229,212,.7); }
.aip-step-art { position: absolute; top: 18px; right: 18px; width: 84px; margin: 0; }
.aip-step-art .st-scan { left: -6%; right: -6%; }
/* studio thank-you (client: no drawn result for the visitor — the file goes to the specialists, the visitor messages us) */
.st-sent {
  display: grid; justify-items: center; gap: 12px; padding: 30px 22px 24px; text-align: center; border-radius: var(--r-lg);
  color: var(--olive); background: var(--surface); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  animation: aipUp .8s cubic-bezier(.16,1,.3,1) both;
}
@media (min-width: 701px) {
  .studio[data-state="sent"] .st-stage { position: relative; }
  .studio[data-state="sent"] .st-sent { position: absolute; left: 50%; top: 50%; width: min(440px, calc(100% - 40px)); transform: translate(-50%, -50%); animation-name: aipUpC; }
}
.studio[data-state="sent"] .st-frame { filter: none; }
.studio[data-state="sent"] .st-photo, .studio[data-state="sent"] .st-svg { filter: blur(18px) saturate(.8); transform: scale(1.04); }
.studio[data-state="sent"] .st-hud, .studio[data-state="sent"] .st-ready { opacity: 0; }
.st-check { width: 60px; height: 60px; margin-bottom: 4px; }
.st-check circle { fill: none; stroke: #7FDCA4; stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: stCheck .9s cubic-bezier(.65,0,.35,1) .2s forwards; }
.st-check path { fill: none; stroke: #3E8B5E; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: stCheck .6s cubic-bezier(.65,0,.35,1) .9s forwards; }
@keyframes stCheck { to { stroke-dashoffset: 0; } }
.st-sent-k { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #3E8B5E; }
.st-sent-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.st-sent-h em { font-style: italic; color: var(--sand-ink); }
.st-sent-p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.st-sent .st-fail { display: none; }
.st-sent.failed .st-fail { display: block; color: #B4553F; }
.st-sent.failed .st-ok, .st-sent.failed .st-sent-k { display: none; }
.st-sent-p2 { margin: 6px 0 2px; font-size: 14.5px; font-weight: 500; color: var(--olive); }
.st-sent .st-wa { width: 100%; justify-content: center; color: #fff; background: linear-gradient(135deg, #2FB463, #1E8C49); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 34px -18px rgba(30,140,73,.8); }
.st-sent .st-wa::after { display: block; }
.st-call { font-size: 13.5px; color: var(--sand-ink); text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================================================
   Legal pages (privacy.html, terms.html): dark olive hero like the AI page, sticky contents, calm reading column
   ===================================================================================================== */
.lg-page .topbar { margin-bottom: 22px; }
.lg-hero-card {
  position: relative; overflow: hidden; padding: clamp(30px, 4.5vw, 64px); border-radius: var(--r-xl); color: #EDE5D4;
  background:
    radial-gradient(55% 70% at 85% 20%, rgba(191,174,142,.2), transparent 65%),
    radial-gradient(50% 60% at 0% 100%, rgba(90,92,69,.55), transparent 65%),
    linear-gradient(150deg, #23261B 0%, #2B2E21 55%, #34372A 100%);
  box-shadow: 0 50px 90px -50px rgba(43,46,33,.75);
}
.lg-hero-card .aip-title { max-width: 14ch; animation: aipFade 1.1s ease both; }
.lg-lead { margin: 0 0 22px; max-width: 58ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8; color: rgba(237,229,212,.72); animation: aipFade 1.2s ease .3s both; }
.lg-date { display: inline-flex; margin: 0; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; letter-spacing: .06em; color: var(--sand); box-shadow: inset 0 0 0 1px rgba(191,174,142,.35); }

.lg-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; margin-top: clamp(50px, 6vw, 90px); padding: 0 6px; }
.lg-toc { position: sticky; top: 24px; display: grid; gap: 2px; padding: 22px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06), 0 18px 40px -30px rgba(43,46,33,.35); }
.lg-toc-h { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sand-ink); }
.lg-toc a { padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--muted); transition: background .25s ease, color .25s ease; }
.lg-toc a:hover { color: var(--olive); background: #F5F3EE; }

.lg-body { max-width: 760px; }
.lg-body section { padding: 6px 0 34px; margin-bottom: 30px; border-bottom: 1px solid rgba(43,46,33,.1); scroll-margin-top: 24px; }
.lg-body h2 { margin: 0 0 16px; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.02em; color: var(--olive); }
.lg-body h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--olive); }
.lg-body p, .lg-body li { font-size: 15.5px; line-height: 1.85; color: #5E5A4C; }
.lg-body p { margin: 0 0 12px; }
.lg-body ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.lg-body li { position: relative; padding-left: 24px; }
.lg-body li::before { content: ""; position: absolute; left: 0; top: .9em; width: 12px; height: 1.5px; background: var(--sand); }
.lg-body b { font-weight: 600; color: var(--olive); }
.lg-body a { color: var(--sand-ink); text-decoration: underline; text-underline-offset: 3px; }
.lg-help { display: grid; gap: 16px; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-lg); color: #EDE5D4; background: linear-gradient(150deg, #23261B, #34372A); }
.lg-body .lg-help-h { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.2; color: #F3ECDD; }
.lg-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.lg-help .aip-cta { color: #2B2E21; background: linear-gradient(135deg, #F1E9D7, #BFAE8E); text-decoration: none; }
.lg-help .lg-mail { color: var(--sand); }

/* footer + consent links to the policies */
.ft-legal { display: inline-flex; gap: 14px; margin-left: 12px; }
.ft-legal a { color: rgba(237,229,212,.75); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(191,174,142,.5); }
.ft-legal a:hover { color: #fff; }
.cf-agree a, .st-agree a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .lg-wrap { grid-template-columns: minmax(0, 1fr); }
  .lg-toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .lg-page .topbar { margin: 0; }
  .lg-hero-card { padding: calc(108px + env(safe-area-inset-top)) 18px 34px; border-radius: 0 0 30px 30px; box-shadow: none; }
  .lg-hero-card .aip-title { font-size: 42px; }
  .lg-wrap { margin-top: 40px; padding: 0 18px; }
  .lg-toc { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .lg-body section { padding-bottom: 26px; margin-bottom: 24px; }
  .ft-legal { display: flex; margin: 8px 0 0; }
  .lg-help .aip-cta { width: 100%; justify-content: center; }
}

/* header button (client chose option A, 2026-10-28): "Analyze my case with AI" → AI page, face icon with a light scanning it */
.consult .pill-icon svg { width: 20px; height: 20px; overflow: visible; }
.consult-scan { animation: consultScan 2.2s ease-in-out infinite; }
@keyframes consultScan { 0%, 100% { transform: translateY(-6px); opacity: 0; } 15%, 85% { opacity: 1; } 50% { transform: translateY(6px); } }
@media (max-width: 1000px) {
  .consult .pill-icon { display: grid; width: 30px; height: 30px; margin-left: -8px; }
  .consult { gap: 8px; padding: 0 14px 0 10px; }
}
@media (max-width: 380px) { .consult { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .consult-scan { animation: none; } }

/* =====================================================================================================
   ☰ menu (client chose option C, 2026-10-28): three lines morph into ×, the header grows into an app-like card
   ===================================================================================================== */
@media (min-width: 701px) { .topbar { position: relative; z-index: 50; } }
.lbl-short { display: none; }
.burger {
  position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--olive);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.1), 0 10px 24px -16px rgba(43,46,33,.45); transition: background .3s ease, color .3s ease, transform .3s ease;
}
.burger:hover { transform: translateY(-1px); }
.burger:focus-visible { outline: 2px solid var(--sand-ink); outline-offset: 3px; }
.burger i { position: absolute; left: 15px; width: 18px; height: 1.7px; border-radius: 2px; background: currentColor; transition: transform .5s cubic-bezier(.7,0,.2,1), opacity .3s ease, width .4s ease; }
.burger i:nth-child(1) { top: 17px; } .burger i:nth-child(2) { top: 23.2px; width: 12px; } .burger i:nth-child(3) { top: 29.4px; }
.topbar.open .burger i:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
.topbar.open .burger i:nth-child(2) { opacity: 0; transform: translateX(6px); }
.topbar.open .burger i:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

.menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 380px; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain;
  padding: 12px; border-radius: 26px; color: var(--olive); background: var(--surface); box-shadow: 0 30px 70px -24px rgba(43,46,33,.55), inset 0 0 0 1px rgba(43,46,33,.06);
  clip-path: inset(0 0 100% 0 round 26px); opacity: 0; visibility: hidden;
  transition: clip-path .7s cubic-bezier(.34,1.25,.5,1), opacity .2s ease .45s, visibility 0s linear .7s;
}
.topbar.open .menu { clip-path: inset(0 0 0 0 round 26px); opacity: 1; visibility: visible; transition: clip-path .75s cubic-bezier(.34,1.25,.5,1), opacity .15s ease, visibility 0s; }
.menu-grp { display: grid; padding: 6px; margin-bottom: 8px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.05); }
.menu-it { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; font-size: 14.5px; color: var(--olive); transition: background .25s ease; }
.menu-it + .menu-it { box-shadow: 0 -1px 0 rgba(43,46,33,.06); }
.menu-it:hover { background: #F7F4EE; }
.menu-it::after { content: "›"; margin-left: auto; padding-left: 8px; font-size: 20px; line-height: 1; color: rgba(43,46,33,.3); }
.menu-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #F1ECE1; color: var(--sand-ink); }
.menu-ic svg { width: 18px; height: 18px; }
.menu-soon { flex: none; margin-left: 8px; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sand-ink); background: #F1ECE1; }
.menu-ai { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  background: linear-gradient(135deg, #5A5C45, #2B2E21); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.menu-legal { display: flex; justify-content: center; gap: 8px; margin: 10px 0 2px; font-size: 12px; color: var(--muted); }
.menu-legal a { color: inherit; }
.menu-legal a:hover { color: var(--olive); }
.menu > * { opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.topbar.open .menu > * { opacity: 1; transform: none; }
.topbar.open .menu > :nth-child(1) { transition-delay: .2s; } .topbar.open .menu > :nth-child(2) { transition-delay: .25s; }
.topbar.open .menu > :nth-child(3) { transition-delay: .3s; } .topbar.open .menu > :nth-child(4) { transition-delay: .35s; } .topbar.open .menu > :nth-child(5) { transition-delay: .4s; }

@media (max-width: 700px) {
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .topbar-actions { gap: 8px; }
  .burger { width: 42px; height: 42px; color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
  .burger i { left: 12px; width: 18px; } .burger i:nth-child(1) { top: 14px; } .burger i:nth-child(2) { top: 20.2px; width: 12px; } .burger i:nth-child(3) { top: 26.4px; }
  /* the glass header itself becomes the card: the menu sits behind the logo and buttons and grows down */
  .menu { top: 0; left: 0; right: 0; width: auto; z-index: -1; max-height: calc(100svh - 20px - env(safe-area-inset-top)); padding: 66px 10px 10px;
    border-radius: 24px; clip-path: inset(0 0 calc(100% - 58px) 0 round 24px); }
  .topbar.open .menu { clip-path: inset(0 0 0 0 round 24px); }
  .topbar.open { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar.open .logo-light { display: none; }
  .topbar.open .logo-dark { display: block; height: 36px; }
  .topbar.open .burger { color: var(--olive); background: #EEEAE1; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .menu, .menu > *, .burger i { transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* =====================================================================================================
   About us (about.html)
   ===================================================================================================== */
.ab-page .topbar { margin-bottom: 22px; }
.ab-hero-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(26px, 4vw, 60px); align-items: center;
  padding: clamp(28px, 4.5vw, 64px); border-radius: var(--r-xl); color: #EDE5D4;
  background:
    radial-gradient(55% 60% at 85% 20%, rgba(191,174,142,.2), transparent 65%),
    radial-gradient(50% 60% at 0% 100%, rgba(90,92,69,.55), transparent 65%),
    linear-gradient(150deg, #23261B 0%, #2B2E21 55%, #34372A 100%);
  box-shadow: 0 50px 90px -50px rgba(43,46,33,.75);
}
.ab-hero-copy .aip-lead { margin-bottom: 0; }
.ab-hero-photo { justify-self: center; width: 100%; max-width: 480px; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 0 0 1px rgba(237,229,212,.14), 0 40px 70px -40px rgba(0,0,0,.7); animation: aipFade 1.3s ease .3s both; }
.ab-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.ab-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; animation: aipFade 1.2s ease .55s both; }
.ab-stats div { padding: 18px 18px 16px; border-radius: 20px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(237,229,212,.14); }
.ab-stats dt { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,229,212,.6); }
.ab-stats dd { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(32px, 3.4vw, 48px); line-height: 1; color: #F3ECDD; }

.ab-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.ab-story-photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
.ab-story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.ab-story-copy .aip-h { margin-bottom: 26px; }
.ab-story-copy p:not(.aip-k):not(.ab-sign) { margin: 0 0 16px; max-width: 52ch; font-size: 16px; line-height: 1.85; color: var(--muted); opacity: 0; transform: translateY(14px); transition: opacity 1.1s ease .5s, transform 1.2s cubic-bezier(.16,1,.3,1) .5s; }
.ab-sign { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px); color: var(--olive); opacity: 0; transition: opacity 1.2s ease .9s; }
.ab-sign em { font-style: italic; color: var(--sand-ink); }
.ab-sign span { width: 46px; height: 1px; background: var(--sand-ink); }
.ab-story.in .ab-story-photo, .ab-story.in .ab-story-copy p { opacity: 1; transform: none; }

.ab-value-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab-value { padding: 28px 24px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06), 0 18px 40px -30px rgba(43,46,33,.35);
  opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.ab-value:nth-child(2) { transition-delay: .1s; } .ab-value:nth-child(3) { transition-delay: .2s; } .ab-value:nth-child(4) { transition-delay: .3s; }
.ab-values.in .ab-value { opacity: 1; transform: none; }
.ab-value-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 30px; border-radius: 16px; color: var(--sand-ink); background: #F1ECE1; }
.ab-value-ic svg { width: 24px; height: 24px; }
.ab-value h3 { margin: 0 0 10px; font-size: 17px; font-weight: 500; color: var(--olive); }
.ab-value p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--muted); }

.ab-steps { position: relative; display: grid; gap: 0; max-width: 860px; margin: 0; padding: 0; list-style: none; }
.ab-steps::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1px; background: linear-gradient(var(--sand), rgba(191,174,142,.15)); transform: scaleY(0); transform-origin: top; transition: transform 1.8s cubic-bezier(.65,0,.15,1) .3s; }
.ab-journey.in .ab-steps::before { transform: scaleY(1); }
.ab-steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 0 0 34px; opacity: 0; transform: translateX(-14px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.ab-steps li:nth-child(1) { transition-delay: .3s; } .ab-steps li:nth-child(2) { transition-delay: .55s; } .ab-steps li:nth-child(3) { transition-delay: .8s; } .ab-steps li:nth-child(4) { transition-delay: 1.05s; }
.ab-journey.in .ab-steps li { opacity: 1; transform: none; }
.ab-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-family: var(--serif); font-size: 20px; color: #F3ECDD; background: linear-gradient(150deg, #23261B, #34372A); box-shadow: 0 0 0 6px var(--surface); }
.ab-steps h3 { margin: 12px 0 8px; font-size: 18px; font-weight: 500; color: var(--olive); }
.ab-steps p { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.8; color: var(--muted); }

.ab-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ab-gallery img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% var(--y, 40%); border-radius: var(--r-lg); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(24px) scale(.98); transition: opacity 1s ease, transform 1.3s cubic-bezier(.16,1,.3,1); }
.ab-gallery img:nth-child(2) { transition-delay: .1s; } .ab-gallery img:nth-child(3) { transition-delay: .2s; } .ab-gallery img:nth-child(4) { transition-delay: .3s; }
.ab-inside.in .ab-gallery img { opacity: 1; transform: none; }

.ab-langs-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(28px, 4vw, 54px); border-radius: var(--r-xl); background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06), var(--shadow); }
.ab-lang-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ab-lang-list span { padding: 10px 16px; border-radius: 999px; font-size: 14px; color: var(--olive); background: #F5F3EE; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06);
  opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.ab-langs.in .ab-lang-list span { opacity: 1; transform: none; }
.ab-lang-list span:nth-child(n) { transition-delay: calc(.3s + var(--n, 0) * 40ms); }

.ab-cta-card { display: grid; justify-items: center; gap: 16px; padding: clamp(40px, 6vw, 80px) clamp(22px, 4vw, 60px); text-align: center; border-radius: var(--r-xl); color: #EDE5D4;
  background: radial-gradient(60% 80% at 50% 0%, rgba(191,174,142,.22), transparent 70%), linear-gradient(150deg, #23261B, #2B2E21 60%, #34372A); box-shadow: 0 50px 90px -50px rgba(43,46,33,.75); }
.ab-cta-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.05; letter-spacing: -.03em; color: #F3ECDD; }
.ab-cta-title em { font-style: italic; color: var(--sand); }
.ab-cta-card > p { margin: 0 0 8px; max-width: 48ch; font-size: 16px; line-height: 1.75; color: rgba(237,229,212,.7); }
.ab-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ab-btn-main { height: 54px; padding: 0 26px; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: #2B2E21; background: linear-gradient(135deg, #F1E9D7, #BFAE8E); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.ab-btn-ghost { height: 54px; padding: 0 26px; font-size: 14px; font-weight: 500; color: #EDE5D4; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(237,229,212,.25); }
.ab-btn-main:hover, .ab-btn-ghost:hover { transform: translateY(-2px); }

@media (max-width: 1000px) {
  .ab-hero-card, .ab-story, .ab-langs-card { grid-template-columns: minmax(0, 1fr); }
  .ab-value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ab-page .topbar { margin: 0; }
  .ab-hero-card { padding: calc(108px + env(safe-area-inset-top)) 18px 26px; border-radius: 0 0 30px 30px; box-shadow: none; gap: 24px; }
  .ab-hero-card .aip-title { font-size: 44px; }
  .ab-story-photo { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
  .ab-value-list { grid-template-columns: minmax(0, 1fr); }
  .ab-value { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 22px 20px; }
  .ab-value-ic { grid-row: span 2; margin: 0; }
  .ab-value h3 { margin: 2px 0 4px; }
  .ab-gallery { grid-template-columns: repeat(4, 70%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 0 18px 8px; }
  .ab-gallery img { scroll-snap-align: start; }
  .ab-cta-actions .pill { width: 100%; justify-content: center; }
}
/* About: where we are (Istanbul HQ + map + countries) */
.ab-where-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
.ab-hq { display: grid; align-content: center; gap: 14px; padding: clamp(26px, 3.5vw, 44px); border-radius: var(--r-xl); color: #EDE5D4;
  background: radial-gradient(60% 70% at 100% 0%, rgba(191,174,142,.2), transparent 70%), linear-gradient(150deg, #23261B, #2B2E21 60%, #34372A); box-shadow: 0 50px 90px -50px rgba(43,46,33,.75); }
.ab-hq-k { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sand); }
.ab-pin { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 0 rgba(191,174,142,.6); animation: abPing 2.2s ease-out infinite; }
@keyframes abPing { 0% { box-shadow: 0 0 0 0 rgba(191,174,142,.6); } 80%, 100% { box-shadow: 0 0 0 14px rgba(191,174,142,0); } }
.ab-hq-city { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; color: #F3ECDD; }
.ab-hq-addr { font-style: normal; font-size: 15px; line-height: 1.7; color: rgba(237,229,212,.75); }
.ab-hq-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: rgba(237,229,212,.75); }
.ab-hq-rating b { font-weight: 600; color: #F3ECDD; }
.ab-stars { letter-spacing: 2px; color: var(--sand); }
.ab-hq-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ab-dir { height: 50px; padding: 0 22px; font-size: 13.5px; font-weight: 500; color: #2B2E21; background: linear-gradient(135deg, #F1E9D7, #BFAE8E); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.ab-dir-ghost { height: 50px; padding: 0 22px; font-size: 13.5px; font-weight: 500; color: #EDE5D4; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(237,229,212,.25); }
.ab-map { overflow: hidden; min-height: 380px; border-radius: var(--r-xl); background: #E7E2D7; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06), var(--shadow); }
.ab-map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(.85) sepia(.18) contrast(.95); }
.ab-countries { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 60px); align-items: center; margin-top: 14px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.06); }
.ab-countries-p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--muted); }
.ab-country-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-country-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 14px; border-radius: 18px; font-size: 15px; font-weight: 500; color: var(--olive); background: #F5F3EE;
  opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.ab-country-list li:nth-child(2) { transition-delay: .08s; } .ab-country-list li:nth-child(3) { transition-delay: .16s; } .ab-country-list li:nth-child(4) { transition-delay: .24s; } .ab-country-list li:nth-child(5) { transition-delay: .32s; } .ab-country-list li:nth-child(6) { transition-delay: .4s; }
.ab-where.in .ab-country-list li { opacity: 1; transform: none; }
.ab-country-list .hq { color: #EDE5D4; background: linear-gradient(150deg, #23261B, #34372A); }
.ab-country-list small { flex-basis: 100%; min-width: 0; padding-left: 32px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); }
.ab-country-list .more { color: var(--sand-ink); background: none; box-shadow: inset 0 0 0 1px rgba(154,135,99,.4); }
.ab-flag { font-size: 22px; line-height: 1; }
@media (max-width: 1000px) { .ab-where-grid, .ab-countries { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .ab-map, .ab-map iframe { min-height: 300px; }
  .ab-country-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-hq-actions .pill { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================================================
   Treatment article pages (hair-transplant-men.html …): dark hero + facts, sticky contents, long-form article
   ===================================================================================================== */
.ar-page .topbar { margin-bottom: 22px; }
.ar-hero-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 4vw, 60px); align-items: center;
  padding: clamp(28px, 4.5vw, 64px); border-radius: var(--r-xl); color: #EDE5D4;
  background: radial-gradient(55% 60% at 85% 20%, rgba(191,174,142,.2), transparent 65%), radial-gradient(50% 60% at 0% 100%, rgba(90,92,69,.55), transparent 65%),
    linear-gradient(150deg, #23261B 0%, #2B2E21 55%, #34372A 100%);
  box-shadow: 0 50px 90px -50px rgba(43,46,33,.75);
}
.ar-hero-copy .aip-lead { margin-bottom: 26px; }
.ar-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; animation: aipFade 1.2s ease .5s both; }
.ar-hero-photo { justify-self: center; width: 100%; max-width: 440px; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px rgba(237,229,212,.14), 0 40px 70px -40px rgba(0,0,0,.7); animation: aipFade 1.3s ease .3s both; }
.ar-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ar-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; animation: aipFade 1.2s ease .6s both; }
.ar-facts div { padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(237,229,212,.14); }
.ar-facts dt { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,229,212,.6); }
.ar-facts dd { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; color: #F3ECDD; }

.ar-body { max-width: 780px; }
.ar-body p { font-size: 16.5px; }
.ar-list { margin: 4px 0 16px !important; }
.ar-callout { margin: 8px 0 20px; padding: 22px 24px; border-radius: 22px; color: #EDE5D4; background: linear-gradient(150deg, #23261B, #34372A); }
.lg-body .ar-callout p { margin: 0; color: rgba(237,229,212,.85); }
.lg-body .ar-callout b { color: #F3ECDD; }
.lg-body .ar-callout .ar-callout-k { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sand); }
.ar-fig { margin: 0 0 34px; }
.ar-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% var(--y, 50%); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.ar-fig-tall img { aspect-ratio: 4 / 3; }
.ar-fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.ar-timeline { position: relative; display: grid; gap: 14px; margin: 6px 0 0; padding: 0 0 0 26px; list-style: none; }
.ar-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--sand), rgba(191,174,142,.2)); }
.ar-timeline li { position: relative; display: grid; gap: 2px; padding-left: 0 !important; }
.ar-timeline li::before { content: ""; position: absolute; left: -26px; top: .45em; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--sand); }
.ar-timeline b { font-size: 15px; }
.ar-timeline span { font-size: 15.5px; line-height: 1.75; color: #5E5A4C; }
.ar-body .aip-faq-list { margin-top: 8px; }
.ar-body .aip-faq-list p { font-size: 15px; }
.ar-body .aip-faq-list summary::after { flex: none; }
.ar-page .ab-cta { margin-top: clamp(60px, 8vw, 110px); }

@media (max-width: 1000px) {
  .ar-hero-card { grid-template-columns: minmax(0, 1fr); }
  .ar-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ar-page .topbar { margin: 0; }
  .ar-hero-card { padding: calc(108px + env(safe-area-inset-top)) 18px 26px; border-radius: 0 0 30px 30px; box-shadow: none; gap: 24px; }
  .ar-hero-card .aip-title { font-size: 40px; }
  .ar-hero-cta .pill { width: 100%; justify-content: center; }
  .ar-body p { font-size: 15.5px; }
  .ar-page .ab-cta { padding: 0 18px; }
}
/* article: review line, "at a glance" answer box (written for Google snippets and AI answers), comparison table */
.lg-body p.ar-meta { margin: 0 0 18px; font-size: 13px; letter-spacing: .02em; color: var(--sand-ink); }
.lg-body .ar-glance { padding: clamp(22px, 3vw, 32px); margin-bottom: 34px; border: 0; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.07), 0 18px 40px -30px rgba(43,46,33,.35); }
.lg-body .ar-glance h2 { font-size: clamp(22px, 2vw, 28px); }
.lg-body .ar-answer { font-size: 16px; color: var(--olive); }
.ar-glance-list { display: grid; gap: 0; margin: 14px 0 0; }
.ar-glance-list div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid rgba(43,46,33,.08); }
.ar-glance-list dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-ink); padding-top: 2px; }
.ar-glance-list dd { margin: 0; font-size: 15px; line-height: 1.6; color: #5E5A4C; }
.ar-table-wrap { overflow-x: auto; margin: 6px 0 16px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(43,46,33,.08); background: #fff; }
.ar-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; color: #5E5A4C; }
.ar-table th, .ar-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(43,46,33,.07); }
.ar-table thead th { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--olive); background: #F5F3EE; }
.ar-table thead th:nth-child(3) { color: #F3ECDD; background: var(--olive); }
.ar-table td:nth-child(3) { color: var(--olive); background: rgba(191,174,142,.12); }
.ar-table tbody th { font-weight: 600; color: var(--olive); white-space: nowrap; }
.ar-table tr:last-child th, .ar-table tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) { .ar-glance-list div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Article: two photos side by side (women page: hairline measuring, shaving options) */
.ar-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 34px; }
.ar-duo .ar-fig { margin: 0; }
.ar-duo .ar-fig img { aspect-ratio: 4 / 5; }
@media (max-width: 560px) { .ar-duo { grid-template-columns: 1fr; } .ar-duo .ar-fig img { aspect-ratio: 4 / 3; } }

/* Reviewer card on the procedure articles */
.lg-body p.ar-meta a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(43,46,33,.25); }
.lg-body .ar-reviewer { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: center; margin: 0 0 40px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px rgba(43,46,33,.07), 0 18px 40px -30px rgba(43,46,33,.35); }
.lg-body .ar-reviewer img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.lg-body .ar-reviewer p { margin: 0; }
.lg-body .ar-reviewer-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-ink); }
.lg-body .ar-reviewer-n { margin-top: 4px !important; font-family: "Bodoni Moda", serif; font-size: 24px; line-height: 1.2; color: var(--olive); }
.lg-body .ar-reviewer-r { margin-top: 2px !important; font-size: 14px; color: var(--olive-3); }
.lg-body .ar-reviewer-b { margin-top: 10px !important; font-size: 15px; line-height: 1.6; color: #5E5A4C; }
@media (max-width: 560px) { .lg-body .ar-reviewer { grid-template-columns: 1fr; justify-items: start; } .lg-body .ar-reviewer img { width: 88px; height: 88px; } }

/* Journal: article index (journal.html) and article cards */
.jr-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(16px, 3vw, 28px) clamp(70px, 8vw, 110px); }
.jr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 26px; }
.jr-head h2 { margin: 0; font-family: "Bodoni Moda", serif; font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; color: var(--olive); }
.jr-head h2 em { font-style: italic; color: var(--sand-ink); }
.jr-head p { margin: 0; font-size: 14px; color: #6E6A5C; }
.jr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); list-style: none; margin: 0; padding: 0; }
.jr-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-lg); background: #fff; color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(43,46,33,.07), 0 18px 40px -30px rgba(43,46,33,.35); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.jr-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(43,46,33,.07), 0 34px 60px -30px rgba(43,46,33,.45); }
.jr-card:focus-visible { outline: 2px solid var(--olive-3); outline-offset: 4px; }
.jr-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--olive); }
.jr-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.jr-card:hover .jr-media img { transform: scale(1.06); }
.jr-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.jr-meta { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-ink); }
.jr-title { margin: 0; font-family: "Bodoni Moda", serif; font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--olive); }
.jr-text { margin: 0; font-size: 14.5px; line-height: 1.65; color: #5E5A4C; }
.jr-more { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 500; color: var(--olive); }
.jr-more::after { content: " \2192"; }
.jr-card.jr-feature { display: grid; grid-template-columns: 1.15fr 1fr; }
.jr-card.jr-feature .jr-media { aspect-ratio: auto; min-height: 340px; }
.jr-card.jr-feature .jr-body { justify-content: center; padding: clamp(24px, 3.4vw, 46px); }
.jr-card.jr-feature .jr-title { font-size: clamp(26px, 2.8vw, 36px); }
.jr-li-feature { grid-column: 1 / -1; }
.jr-soon { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 28px; border-radius: var(--r-lg); border: 1px dashed rgba(43,46,33,.18); text-align: center; font-size: 14px; line-height: 1.6; color: #6E6A5C; }
@media (max-width: 900px) { .jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jr-card.jr-feature { grid-template-columns: 1fr; } .jr-card.jr-feature .jr-media { min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 600px) { .jr-grid { grid-template-columns: 1fr; } .jr-head { flex-direction: column; align-items: flex-start; } }