/* =========================================================================
   ANGELLIES — Landing page (redesign)
   Brand: terracotta #9D6155 · white #FFFFFF · gold #AF844D · anthracite
   Type: Sora (headings) · Manrope (body/UI) · Italianno (decorative only)
   ========================================================================= */

:root {
  /* Brand */
  --terracotta: #9D6155;
  --terracotta-deep: #7f4a41;
  --gold: #AF844D;
  --gold-soft: #c69a63;
  --white: #FFFFFF;

  /* Neutrals (warm) */
  --ink: #1c1613;
  --ink-soft: #5f524b;
  --paper: #FBF8F5;
  --paper-2: #F1E8E1;
  --line: rgba(28,22,19,.12);
  --line-strong: rgba(28,22,19,.2);

  /* Dark */
  --anthracite: #16110f;
  --anthracite-2: #201a16;
  --on-dark: #f3eae2;
  --on-dark-soft: #b7a89e;
  --line-dark: rgba(243,234,226,.14);

  /* Type */
  --font-head: "Sora", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-script: "Italianno", cursive;

  --fs-hero: clamp(2.55rem, 1.5rem + 4.6vw, 5.4rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  --fs-lead: clamp(1.08rem, .98rem + .5vw, 1.4rem);
  --fs-body: clamp(1rem, .97rem + .18vw, 1.1rem);

  --section-y: clamp(4rem, 2.6rem + 6vw, 8rem);
  --gutter: clamp(1.15rem, .5rem + 3vw, 3rem);
  --maxw: 1240px;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 20px 60px -30px rgba(28,22,19,.45);
  --shadow-strong: 0 40px 90px -35px rgba(0,0,0,.6);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--terracotta); color: #fff; }

h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; }
p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--light { background: var(--paper); color: var(--ink); }
.section--paper2 { background: var(--paper-2); color: var(--ink); }
.section--dark { background: var(--anthracite); color: var(--on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3 { color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--terracotta); margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .7rem;
}
.section--dark .eyebrow { color: var(--gold-soft); }
.eyebrow::before { content:""; width: 30px; height: 1px; background: currentColor; opacity: .8; }
.eyebrow.center { justify-content: center; }

/* ---------------- Buttons / CTA ---------------- */
.btn {
  --bg: var(--terracotta); --fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 1.7rem; background: var(--bg); color: var(--fg);
  border: 1px solid transparent; border-radius: 100px;
  font-family: var(--font-body); font-weight: 700; font-size: .98rem; letter-spacing: .01em; line-height: 1;
  transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.btn .arw { transition: transform .3s var(--ease); }
.btn:hover { background: var(--terracotta-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover .arw { transform: translateX(4px); }
.btn--lg { padding: 1.15rem 2rem; font-size: 1.05rem; }
.btn--gold { --bg: var(--gold); } .btn--gold:hover { background: #93693a; }
.btn--light { --bg:#fff; --fg: var(--ink); } .btn--light:hover { background: var(--gold); color:#fff; }
.btn--block { width: 100%; justify-content: center; }

/* Text link CTA (header, inline) */
.link-cta {
  --c: var(--ink);
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .02em; color: var(--c);
  position: relative; padding-bottom: 3px;
}
.link-cta::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform .35s var(--ease); }
.link-cta .arw { transition: transform .3s var(--ease); }
.link-cta:hover .arw { transform: translateX(5px); }
.link-cta.on-dark { --c: #fff; }
.arw { display: inline-block; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; padding-block: 1.1rem;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header.is-scrolled {
  background: rgba(251,248,245,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line); padding-block: .65rem;
}
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1.32rem; letter-spacing: .26em; color: var(--ink); padding-left:.26em; transition: color .4s var(--ease); }
.brand b { color: var(--terracotta); font-weight: 700; }
.nav { display: flex; align-items: center; gap: clamp(1rem,.4rem + 1.6vw,2.2rem); }
.nav a { font-size: .92rem; font-weight: 600; letter-spacing: .01em; color: var(--ink); position: relative; padding: .2rem 0; }
.nav a:not(.link-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background: var(--terracotta); transition: right .35s var(--ease); }
.nav a:not(.link-cta):hover::after { right:0; }

.site-header:not(.is-scrolled).over-dark .brand,
.site-header:not(.is-scrolled).over-dark .nav a { color: #fff; }
.site-header:not(.is-scrolled).over-dark .brand b { color: var(--gold-soft); }

.nav-toggle { display: none; }

@media (max-width: 900px){
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; width: 46px; height: 46px;
    align-items: center; justify-content: center; background: transparent;
    border: 1px solid var(--line-strong); border-radius: 50%; position: relative; z-index: 110;
  }
  .over-dark:not(.is-scrolled) .nav-toggle { border-color: rgba(255,255,255,.4); }
  .nav-toggle span { width: 20px; height: 1.6px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
  .over-dark:not(.is-scrolled) .nav-toggle span { background:#fff; }
  .nav {
    position: fixed; inset: 0; z-index: 105; flex-direction: column; justify-content: center; gap: 1.4rem;
    background: rgba(22,17,15,.98); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transform: translateY(-100%); transition: transform .5s var(--ease); padding: 2rem;
  }
  .nav a { color:#fff; font-size: 1.6rem; font-family: var(--font-head); font-weight: 600; }
  .nav a:not(.link-cta)::after { display:none; }
  .nav .link-cta { --c:#fff; font-size: 1.2rem; }
  body.nav-open .nav { transform: translateY(0); }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle span { background:#fff; }
  body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }
}

/* Mobile fixed CTA */
.floating-cta {
  position: fixed; left: 50%; bottom: 1rem; transform: translate(-50%, 160%); z-index: 90;
  background: var(--terracotta); color: #fff; padding: .85rem 1.5rem; border-radius: 100px;
  font-weight: 700; font-size: .95rem; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5);
  display: none; align-items: center; gap: .5rem; transition: transform .45s var(--ease); border: none;
}
.floating-cta.is-visible { transform: translate(-50%, 0); }
@media (max-width: 760px){ .floating-cta { display: inline-flex; } body.nav-open .floating-cta { transform: translate(-50%,160%); } }

/* =========================================================================
   REVEAL
   ========================================================================= */
[data-reveal]{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--anthracite); color:#fff; overflow: hidden; padding-top: 7rem; padding-bottom: clamp(3rem,1.5rem + 6vw,6.5rem); }
.hero__media { position:absolute; inset:0; z-index:0; }
.hero__media img { width:100%; height:100%; object-fit: cover; object-position: 64% 35%; transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce){ .hero__media img{ animation:none; transform:none; } }
.hero__media::after { content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(16,11,9,.6) 0%, rgba(16,11,9,.15) 30%, rgba(16,11,9,.82) 100%),
    linear-gradient(90deg, rgba(16,11,9,.85) 0%, rgba(16,11,9,.4) 45%, rgba(16,11,9,0) 80%);
}
.hero .wrap { position: relative; z-index:2; width:100%; }
.hero__inner { max-width: 60ch; }
.hero__kicker { font-size:.78rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color: var(--gold-soft); margin-bottom:1.4rem; display:inline-block; }
.hero h1 { font-size: var(--fs-hero); font-weight: 600; color:#fff; margin-bottom: 1.3rem; letter-spacing:-.025em; max-width: 18ch; text-wrap: balance; }
.hero h1 .soft { color: var(--gold-soft); font-weight: 500; }
.hero__lead { font-size: var(--fs-lead); color: rgba(243,234,226,.92); max-width: 52ch; margin-bottom: 2.1rem; }
.hero__actions { display:flex; flex-wrap:wrap; gap: 1.2rem 1.6rem; align-items:center; }
.hero .btn { --bg:#fff; --fg: var(--ink); }
.hero .btn:hover { --bg: var(--gold); --fg:#fff; background: var(--gold); }

.scroll-cue { position:absolute; left: var(--gutter); bottom: 1.4rem; z-index:3; display:flex; align-items:center; gap:.7rem; color: rgba(243,234,226,.7); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }
.scroll-cue__line { width:46px; height:1px; background: rgba(243,234,226,.4); position:relative; overflow:hidden; }
.scroll-cue__line::after { content:""; position:absolute; left:-40%; top:0; height:100%; width:40%; background: var(--gold); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%{ left:-40%; } 60%,100%{ left:100%; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue__line::after{ animation:none; } }

/* =========================================================================
   HANDWRITING WATERMARK
   ========================================================================= */
.script-mark {
  position: absolute; z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--font-script); font-weight: 400; line-height: .9;
  font-size: clamp(4.5rem, 3rem + 12vw, 15rem);
  color: var(--gold);
  opacity: .13;
  left: 50%; top: 42%; transform: translate(-50%,-50%);
  will-change: transform;
}
.section--dark .script-mark { color: var(--gold-soft); opacity: .12; }
@media (max-width: 720px){ .script-mark { font-size: clamp(3.2rem, 2rem + 16vw, 6rem); opacity: .1; } }

/* =========================================================================
   APPROACH
   ========================================================================= */
.approach { overflow: hidden; }
.approach .wrap { position: relative; z-index: 2; }
.approach__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem,1rem + 5vw,5.5rem); align-items: center; }
@media (max-width: 860px){ .approach__grid { grid-template-columns: 1fr; } }
.approach__visual { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-strong); }
.approach__visual img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity:0; transition: opacity .8s var(--ease), transform 4s var(--ease); transform: scale(1.08); }
.approach__visual img.is-active { opacity:1; transform: scale(1); }
.approach__visual::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(16,11,9,.5)); }
@media (max-width: 860px){ .approach__visual { aspect-ratio: 3/2; } }
.approach__lines { display: grid; gap: clamp(1.4rem,1rem + 1.6vw,2.4rem); }
.approach__line { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.35rem,1.05rem + 1.4vw,2.15rem); line-height: 1.28; letter-spacing:-.02em; color: rgba(243,234,226,.32); transition: color .5s var(--ease); }
.approach__line.is-active { color:#fff; }
.section--dark .approach__lead-tag { color: var(--gold-soft); }

/* =========================================================================
   OFFERING (interactive rows)
   ========================================================================= */
.offer__head { max-width: 24ch; margin-bottom: clamp(2rem,1rem + 3vw,3.4rem); }
.offer__head h2 { font-size: var(--fs-h2); }
.offer__body { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(1.6rem,1rem + 3vw,4rem); align-items: stretch; }
@media (max-width: 860px){ .offer__body { grid-template-columns: 1fr; } }
.offer__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 340px; background: var(--anthracite); }
@media (max-width: 860px){ .offer__media { display: none; } }
.offer__plane { position:absolute; inset:0; opacity:0; transition: opacity .7s var(--ease); display:flex; align-items:flex-end; padding: 2rem; }
.offer__plane.is-active { opacity:1; }
.offer__plane span { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; letter-spacing:.02em; color: rgba(255,255,255,.92); position: relative; z-index:2; }
.offer__plane::before { content:""; position:absolute; inset:0; }
.offer__plane[data-p="0"]::before { background: linear-gradient(150deg, #2a1c18, var(--terracotta)); }
.offer__plane[data-p="1"]::before { background: linear-gradient(150deg, #241a12, var(--gold)); }
.offer__plane[data-p="2"]::before { background: linear-gradient(150deg, #3a2a20, #8a6c46); }
.offer__plane[data-p="3"]::before { background: linear-gradient(150deg, var(--terracotta-deep), #1c1512 70%); }
.offer__plane .idx { position:absolute; right: 1.6rem; top: 1.2rem; font-family: var(--font-head); font-weight:700; font-size: 3.4rem; color: rgba(255,255,255,.14); z-index:1; }

.offer__rows { list-style:none; margin:0; padding:0; border-top: 1px solid var(--line); }
.offer__row { border-bottom: 1px solid var(--line); }
.offer__row button {
  width: 100%; text-align: left; background: transparent; border: none;
  padding: clamp(1.05rem,.8rem + 1.1vw,1.7rem) 0; display: flex; align-items: baseline; gap: 1rem; color: var(--ink);
  font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem,1rem + 1.4vw,2rem); letter-spacing:-.02em; line-height:1.15;
  transition: color .35s var(--ease), padding-left .4s var(--ease);
}
.offer__row .num { font-size: .8rem; font-weight: 700; color: var(--gold); letter-spacing:.1em; flex:none; transform: translateY(-.2em); font-family: var(--font-body); }
.offer__row.is-active button, .offer__row button:hover { color: var(--terracotta); padding-left: .6rem; }
.offer__row.is-active .num { color: var(--terracotta); }
.offer__row.priority button { }
.offer__row.priority .tagline { display:inline-block; margin-left:.6rem; font-family: var(--font-body); font-weight:700; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background: var(--terracotta); padding:.28em .6em; border-radius:100px; transform: translateY(-.35em); }

.offer__statement { margin-top: clamp(2.4rem,1.5rem + 3vw,4rem); max-width: 44ch; }
.offer__statement p { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.3rem,1.05rem + 1.2vw,1.95rem); line-height:1.35; letter-spacing:-.02em; color: var(--ink); }
.offer__statement .accent { color: var(--terracotta); }
.offer__statement .big { display:block; font-weight: 700; font-size: 1.15em; margin-top:.3em; color: var(--terracotta); }
.offer__statement .cta-row { margin-top: 2rem; }

/* =========================================================================
   CTA BAND
   ========================================================================= */
.ctaband { background: linear-gradient(120deg, var(--terracotta) 0%, var(--terracotta-deep) 55%, #5f382f 100%); color:#fff; position: relative; overflow: hidden; }
.ctaband .wrap { display:flex; align-items:center; justify-content:space-between; gap: 1.6rem; flex-wrap:wrap; padding-block: clamp(2.4rem,1.6rem + 3vw,3.6rem); position:relative; z-index:2; }
.ctaband::after { content:""; position:absolute; right:-8%; top:-60%; width:44%; height:220%; background: radial-gradient(closest-side, rgba(175,132,77,.5), transparent 70%); }
.ctaband h2 { font-size: clamp(1.5rem,1.1rem + 1.8vw,2.4rem); margin:0; color:#fff; max-width: 20ch; }
.ctaband .btn { --bg:#fff; --fg: var(--terracotta-deep); }
.ctaband .btn:hover { --bg: var(--anthracite); --fg:#fff; background: var(--anthracite); }

/* =========================================================================
   VIDEOS
   ========================================================================= */
.videos__head { text-align:center; max-width: 44ch; margin: 0 auto clamp(2rem,1rem + 2.4vw,3rem); }
.videos__head h2 { font-size: var(--fs-h2); }
.videos__head p { color: var(--on-dark-soft); font-size:.92rem; margin:0; }
.videos__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,.8rem + 2vw,2.4rem); max-width: 820px; margin-inline:auto; }
@media (max-width: 680px){ .videos__grid { grid-template-columns: 1fr; max-width: 380px; } }
.vcard { position: relative; border: none; padding: 0; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-strong); }
.vcard__media { position: relative; width:100%; aspect-ratio: 9/16; }
.vcard__poster { width:100%; height:100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s var(--ease); }
.vcard:hover .vcard__poster { transform: scale(1.05); filter: brightness(.82); }
.play-btn {
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: clamp(52px,8vw,66px); height: clamp(52px,8vw,66px); border-radius:50%;
  background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  transition: transform .35s var(--ease), background-color .35s var(--ease); }
.play-btn svg { width: 34%; height:34%; margin-left: 8%; }
.vcard:hover .play-btn { transform: translate(-50%,-50%) scale(1.08); background: var(--terracotta); border-color: var(--terracotta); }

/* =========================================================================
   SERVICES (tabbed)
   ========================================================================= */
.services__head { max-width: 52ch; margin-bottom: clamp(2rem,1rem + 2.6vw,3.2rem); }
.services__head h2 { font-size: var(--fs-h2); }
.svc-tabs { position: relative; }
.svc-nav { list-style:none; margin:0; padding:0; }
.svc-nav li { border-top: 1px solid var(--line); }
.svc-nav li:last-child { border-bottom: 1px solid var(--line); }
.svc-nav button {
  width:100%; text-align:left; background:transparent; border:none; color: var(--ink-soft);
  padding: clamp(.95rem,.7rem + .8vw,1.3rem) 0; font-family: var(--font-head); font-weight:600;
  font-size: clamp(1.08rem,.95rem + .6vw,1.45rem); letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.svc-nav .label { display:inline-flex; align-items:center; gap:.7rem; }
.svc-nav button:hover { color: var(--ink); }
.svc-nav li.is-active button { color: var(--terracotta); padding-left:.5rem; }
.svc-nav .dot { width:7px; height:7px; border-radius:50%; background: var(--gold); opacity:0; transition: opacity .35s var(--ease); flex:none; }
.svc-nav li.is-active .dot { opacity:1; }
.svc-nav .prio { font-family: var(--font-body); font-weight:700; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background: var(--terracotta); padding:.28em .6em; border-radius:100px; }
.svc-nav .caret { display:none; flex:none; transition: transform .35s var(--ease); color: var(--ink-soft); font-size:1.4rem; line-height:1; }

.svc-panel ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.svc-panel li { font-size:.94rem; color: var(--ink); border:1px solid var(--line-strong); border-radius:100px; padding:.5rem 1rem; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.svc-panel li:hover { border-color: var(--terracotta); background: rgba(157,97,85,.09); }

/* Desktop: left nav + right panel column (panels absolutely placed) */
@media (min-width: 781px){
  .svc-nav { width: 42%; }
  .svc-mobile-panel { position: absolute; top:0; left: 46%; right:0; height:auto !important; overflow:visible; }
  .svc-nav li:not(.is-active) .svc-mobile-panel { display:none; }
  .svc-nav li.is-active .svc-panel { animation: fadeUp .5s var(--ease); }
}
/* Mobile: accordion (panel under its category) */
@media (max-width: 780px){
  .svc-nav .caret { display:inline-block; }
  .svc-nav li.is-active .caret { transform: rotate(45deg); color: var(--terracotta); }
  .svc-nav .dot { display:none; }
  .svc-mobile-panel { overflow:hidden; height:0; transition: height .4s var(--ease); }
  .svc-mobile-panel .svc-panel { padding: 0 0 1.3rem; }
}
@keyframes fadeUp { from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .svc-nav li.is-active .svc-panel{ animation:none; } }

/* =========================================================================
   STORY (typographic, no portrait)
   ========================================================================= */
.story { overflow: hidden; }
.story .wrap { position: relative; z-index: 2; }
.story__head { margin-bottom: clamp(2rem,1.2rem + 2.4vw,3.2rem); }
.story__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.6rem,1rem + 3vw,4rem); }
@media (max-width: 860px){ .story__grid { grid-template-columns: 1fr; } }
.story__lead p { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.3rem,1.05rem + 1.2vw,1.95rem); line-height: 1.4; letter-spacing:-.02em; color:#fff; }
.story__side { display: grid; gap: clamp(1.2rem,1rem + 1vw,1.8rem); align-content: start; }
.story__side p { color: var(--on-dark); font-size: var(--fs-body); line-height: 1.65; margin:0; }
.story__side p::before { content:""; display:block; width: 26px; height:2px; background: var(--gold); margin-bottom: .9rem; opacity:.8; }
.story__sign { margin-top: clamp(2rem,1.4rem + 2vw,3rem); font-family: var(--font-script); font-size: clamp(3rem,2rem + 4vw,5rem); line-height:.8; color: var(--gold-soft); }

/* =========================================================================
   FORM
   ========================================================================= */
.formsec { background: var(--paper-2); position: relative; overflow: hidden; }
.formsec__head { text-align:center; max-width: 38ch; margin: 0 auto clamp(1.8rem,1rem + 2.4vw,2.8rem); }
.formsec__head h2 { font-size: var(--fs-h2); }
.formsec__head p { color: var(--ink-soft); font-size: var(--fs-lead); margin:0; }

.qform {
  max-width: 720px; margin-inline: auto; position: relative;
  background: linear-gradient(180deg, #fff, #fbf6f1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(1.5rem,1rem + 2.4vw,3rem);
}
.qform__top { display:flex; align-items:center; gap: 1rem; margin-bottom: clamp(1.6rem,1rem + 1.6vw,2.4rem); }
.progress { flex:1; height:2px; background: rgba(28,22,19,.12); border-radius:100px; overflow:hidden; }
.progress__bar { height:100%; width:11%; background: linear-gradient(90deg, var(--gold), var(--terracotta)); transition: width .5s var(--ease); }
.qform__step-label { font-family: var(--font-head); font-size:.82rem; font-weight:600; letter-spacing:.08em; color: var(--ink-soft); white-space:nowrap; }
.qform__step-label b { color: var(--terracotta); }

.qsteps { position: relative; }
.qstep { display:none; border:none; margin:0; padding:0; min-inline-size: auto; }
.qstep.is-active { display:block; animation: stepIn .4s var(--ease); }
.qstep.back.is-active { animation: stepInBack .4s var(--ease); }
@keyframes stepIn { from{ opacity:0; transform: translateX(16px);} to{ opacity:1; transform:none;} }
@keyframes stepInBack { from{ opacity:0; transform: translateX(-16px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .qstep.is-active,.qstep.back.is-active{ animation:none; } }

.qstep__q { font-family: var(--font-head); font-weight:600; font-size: clamp(1.35rem,1.1rem + 1.1vw,2rem); line-height:1.2; letter-spacing:-.02em; color: var(--ink); margin-bottom:.4rem; padding:0; }
.qstep__hint { color: var(--ink-soft); font-size:.94rem; margin-bottom:1.4rem; }

.opts { display:grid; gap:.6rem; }
.opt-btn {
  display:flex; align-items:center; gap:1rem; width:100%; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius: var(--radius);
  padding: 1.05rem 1.2rem; color: var(--ink); font-size:1.05rem; font-weight:600;
  transition: border-color .22s var(--ease), background-color .22s var(--ease), transform .22s var(--ease);
}
.opt-btn:hover { border-color: var(--terracotta); transform: translateY(-1px); }
.opt-btn span.txt { flex:1; }
.opt-btn .mark { flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-strong); position:relative; transition: border-color .22s var(--ease), background-color .22s var(--ease); }
.opt-btn[data-multi] .mark { border-radius:6px; }
.opt-btn .mark::after { content:""; position:absolute; left:50%; top:46%; width:11px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform: translate(-50%,-50%) rotate(-45deg) scale(.4); opacity:0; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.opt-btn.is-selected { border-color: var(--terracotta); background: rgba(157,97,85,.06); }
.opt-btn.is-selected .mark { background: var(--terracotta); border-color: var(--terracotta); }
.opt-btn.is-selected .mark::after { opacity:1; transform: translate(-50%,-50%) rotate(-45deg) scale(1); }

.field { display:block; }
.field + .field { margin-top: 1.05rem; }
.field__label { display:block; font-weight:700; font-size:.9rem; margin-bottom:.5rem; color: var(--ink); }
.field__label .req { color: var(--terracotta); }
.field__label .optional { color: var(--ink-soft); font-weight:600; font-size:.8rem; letter-spacing:.03em; }
.input, .textarea {
  width:100%; font-family: inherit; font-size:1.05rem; color: var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); padding:.95rem 1.05rem;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.input:focus, .textarea:focus { outline:none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(157,97,85,.14); }
.textarea { min-height: 120px; resize: vertical; line-height:1.55; }
.field.has-error .input, .field.has-error .textarea { border-color:#c0392b; background:#fdf3f1; }
.field__error { display:none; color:#c0392b; font-size:.86rem; margin-top:.45rem; }
.field.has-error .field__error { display:block; }
.choice-error { color:#c0392b; font-size:.88rem; margin-top:.9rem; }

.qform__nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top: 1.7rem; }
.btn-back { background:transparent; border:none; color: var(--ink-soft); font-weight:700; display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .2rem; font-size:.95rem; }
.btn-back:hover { color: var(--ink); }
.btn-back[hidden]{ display:none; }
.qform__nav-right { display:flex; align-items:center; gap:1rem; margin-left:auto; }
.btn-skip { background:transparent; border:none; color: var(--ink-soft); font-weight:700; text-decoration:underline; text-underline-offset:3px; font-size:.92rem; }
.btn-skip:hover { color: var(--terracotta); }
.btn-skip[hidden]{ display:none; }
.btn-next[disabled]{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.qform__consent { margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line); font-size:.84rem; color: var(--ink-soft); }
.qform__consent[hidden]{ display:none; }
.qform__consent .placeholder{ color: var(--gold); }
.form-status { margin-top:1rem; font-size:.92rem; min-height:1.2em; }
.form-status.is-error { color:#c0392b; }
.btn-spinner { width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation: spin .7s linear infinite; }
.btn[aria-busy="true"] .btn-label{ opacity:.7; }
@keyframes spin { to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .btn-spinner{ animation-duration:1.4s; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background:#100c0a; color: var(--on-dark-soft); padding-block: clamp(2.6rem,2rem + 2vw,3.6rem) 1.8rem; }
.footer__top { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom:1px solid var(--line-dark); }
@media (max-width: 760px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer__top { grid-template-columns: 1fr; } }
.footer__brand { font-family: var(--font-head); font-weight:700; font-size:1.5rem; letter-spacing:.26em; color:#fff; padding-left:.26em; }
.footer__brand + p { margin-top:.9rem; max-width:34ch; font-size:.92rem; }
.footer__col h4 { color:#fff; font-family: var(--font-body); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin-bottom:1rem; }
.footer__col ul { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer__col a:hover { color: var(--gold-soft); }
.footer__todo { color: var(--gold-soft); font-style: italic; }
.footer__bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; font-size:.8rem; }
.footer__bottom a:hover{ color:#fff; }

/* =========================================================================
   VIDEO MODAL
   ========================================================================= */
.vmodal { position: fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding: clamp(1rem,.5rem + 2vw,2.5rem); background: rgba(10,7,6,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity:0; transition: opacity .35s var(--ease); }
.vmodal.is-open { opacity:1; }
.vmodal__dialog { position: relative; z-index:2; width: min(420px,92vw); max-height:92vh; transform: translateY(14px) scale(.98); transition: transform .4s var(--ease); }
.vmodal.is-open .vmodal__dialog { transform:none; }
.vmodal__frame { position: relative; border-radius: var(--radius-lg); overflow:hidden; background:#000; box-shadow: var(--shadow-strong); aspect-ratio: 9/16; max-height:86vh; }
.vmodal__frame video { width:100%; height:100%; object-fit: contain; background:#000; display:block; }
.vmodal__close { position:absolute; top:.6rem; right:.6rem; width:42px; height:42px; border-radius:50%; background: rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; transition: background-color .3s var(--ease), transform .3s var(--ease); z-index:3; }
.vmodal__close:hover { background: var(--terracotta); transform: scale(1.06); }
.vmodal__close svg { width:18px; height:18px; }
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce){ .vmodal,.vmodal__dialog{ transition:none; } }

/* helpers */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[hidden]{ display:none !important; }

/* =========================================================================
   REDESIGN v3 — hero laptop · offer scene · services editorial · story · form head
   ========================================================================= */

/* ---------- HERO split + floating laptop ---------- */
.hero { align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(1.5rem,1rem + 3vw,4rem); align-items: center; width: 100%; }
.hero__inner { max-width: none; }
.hero h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.9rem); max-width: 15ch; }
.hero__lead { font-size: clamp(1.02rem, .96rem + .4vw, 1.25rem); max-width: 42ch; }
.hero__stage { position: relative; perspective: 1500px; display: flex; align-items: center; justify-content: center; min-height: 300px; }

.laptop {
  position: relative; width: min(100%, 460px);
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -16deg));
  transform-style: preserve-3d; transition: transform .5s var(--ease);
  animation: laptopFloat 6.5s ease-in-out infinite;
}
@keyframes laptopFloat { 0%,100%{ translate: 0 0; } 50%{ translate: 0 -14px; } }
.laptop__lid { position: relative; padding: 7px 7px 8px; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(155deg,#3a312c 0%,#181310 60%,#0d0a09 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.06) inset, 0 30px 60px -24px rgba(0,0,0,.7); }
.laptop__screen { position: relative; aspect-ratio: 16/10; border-radius: 7px; overflow: hidden; background: #0c0908; box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset; }
.laptop__base { height: 13px; width: 116%; margin: 0 0 0 -8%; border-radius: 0 0 12px 12px;
  background: linear-gradient(#463c37,#241b16 55%,#120d0b); box-shadow: 0 22px 30px -16px rgba(0,0,0,.7); position: relative; }
.laptop__notch { position:absolute; left:50%; top:0; transform:translateX(-50%); width:22%; height:5px; border-radius:0 0 7px 7px; background: rgba(0,0,0,.4); }
.laptop__shadow { position:absolute; left:6%; right:6%; bottom:-34px; height:40px; border-radius:50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent 72%); filter: blur(6px); z-index:-1; }
.laptop__glare { position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 46%, transparent 60%); transform: translateX(-30%); animation: glareSweep 7s var(--ease) infinite; pointer-events:none; }
@keyframes glareSweep { 0%,72%{ transform: translateX(-60%); opacity:0; } 80%{ opacity:1; } 92%{ transform: translateX(60%); opacity:0; } 100%{ opacity:0; } }

/* mock UI inside laptop */
.ui { position:absolute; inset:0; background: linear-gradient(180deg,#faf6f2,#efe4db); display:flex; flex-direction:column; padding: 6% 7%; gap: 5%; font-family: var(--font-head); }
.ui__bar { display:flex; align-items:center; justify-content:space-between; }
.ui__brand { font-size: clamp(.5rem,1.4vw,.72rem); letter-spacing:.22em; font-weight:700; color: var(--ink); }
.ui__dots { display:flex; gap:5px; }
.ui__dots i { width:6px; height:6px; border-radius:50%; background: rgba(28,22,19,.35); }
.ui__hero { display:grid; grid-template-columns: 1fr 1fr; gap: 6%; flex:1; align-items:stretch; }
.ui__photo { border-radius:6px; overflow:hidden; position:relative; }
.ui__photo img { width:100%; height:100%; object-fit:cover; }
.ui__copy { display:flex; flex-direction:column; justify-content:center; gap: 6%; }
.ui__eyebrow { width:34%; height:5px; border-radius:3px; background: var(--gold); }
.ui__title { font-size: clamp(1.1rem,4.6vw,2.2rem); line-height:.95; font-weight:700; color: var(--terracotta); letter-spacing:-.02em; }
.ui__line { height:6px; border-radius:3px; background: rgba(28,22,19,.16); }
.ui__line.short { width:60%; }
.ui__pill { width:42%; height:13px; border-radius:100px; background: var(--terracotta); margin-top:4%; }
.ui__row { display:flex; gap:5%; }
.ui__row span { flex:1; height:16px; border-radius:5px; background: rgba(28,22,19,.09); }
.ui__row span:nth-child(2){ background: rgba(175,132,77,.28); }

@media (prefers-reduced-motion: reduce){ .laptop { animation: none; } .laptop__glare { animation: none; opacity:0; } }
@media (max-width: 1024px){
  .hero__grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(1rem,.5rem + 2vw,2.5rem); }
  .laptop { width: min(100%, 360px); }
}
@media (max-width: 760px){
  .hero { align-items: flex-end; min-height: auto; padding-top: 6.5rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__stage { min-height: 0; margin-top: .5rem; perspective: 1100px; }
  .laptop { width: min(78%, 300px); transform: rotateX(6deg) rotateY(-10deg); }
  .laptop__glare { display:none; }
  .laptop__shadow { bottom:-22px; }
}

/* ---------- OFFER heading widen ---------- */
.offer__head { max-width: none; }
.offer__head h2 { font-size: clamp(1.7rem, 1rem + 2.3vw, 2.7rem); max-width: none; line-height: 1.12; letter-spacing: -.03em; }

/* ---------- OFFER open digital scene ---------- */
.offer__body { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; }
.offer__scene { position: relative; min-height: clamp(300px, 32vw, 430px); background: none; border: none; overflow: visible; }
@media (max-width: 860px){
  .offer__body { grid-template-columns: 1fr; }
  .offer__rows { order: 1; }
  .offer__scene { order: 2; overflow: hidden; min-height: 250px; margin-top: 1.4rem; }
  .offer__scene .scene__desktop { width: 66%; }
  .offer__scene .scene__num { font-size: 6rem; }
}
.scene__grid { position:absolute; inset: 6% 4%; background-image: linear-gradient(rgba(28,22,19,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(28,22,19,.07) 1px, transparent 1px); background-size: 34px 34px; border-radius: 4px; opacity:.9; -webkit-mask-image: radial-gradient(120% 100% at 40% 40%, #000 55%, transparent); mask-image: radial-gradient(120% 100% at 40% 40%, #000 55%, transparent); }
.scene__num { position:absolute; right: 2%; top: -4%; font-family: var(--font-head); font-weight:700; font-size: clamp(5rem,10vw,10rem); line-height:1; color: rgba(157,97,85,.1); pointer-events:none; transition: color .5s var(--ease); }
.scene__layer { position: absolute; transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); opacity: .28; filter: blur(1.2px); }
.scene__cursor { position:absolute; width:0; height:0; border-left:9px solid var(--ink); border-bottom:6px solid transparent; border-top:6px solid transparent; transform: rotate(-38deg); transition: left .6s var(--ease), top .6s var(--ease); left:60%; top:58%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); z-index:9; }

/* desktop browser fragment */
.scene__desktop { left: 0; top: 8%; width: 78%; z-index: 3; }
.mini-browser { background:#fff; border-radius: 10px; box-shadow: var(--shadow-strong); overflow:hidden; }
.mini-browser .mb__bar { display:flex; gap:6px; padding:11px 12px; background:#f1e8e1; }
.mini-browser .mb__bar i { width:8px;height:8px;border-radius:50%;background:rgba(28,22,19,.25); }
.mini-browser .mb__bar i:first-child{ background: var(--terracotta); }
.mini-browser .mb__hero { display:block; height: 92px; background: linear-gradient(130deg, var(--terracotta), #6f4038); margin: 12px; border-radius:6px; }
.mini-browser .mb__t { display:block; height:9px; border-radius:4px; background: rgba(28,22,19,.16); margin:10px 12px; }
.mini-browser .mb__t.short { width:52%; }
.mini-browser .mb__cols { display:flex; gap:8px; padding: 4px 12px 14px; }
.mini-browser .mb__cols b { flex:1; height:34px; border-radius:5px; background: rgba(28,22,19,.08); }
.mini-browser .mb__cols b:nth-child(2){ background: rgba(175,132,77,.3); }

/* phone fragment */
.scene__phone { right: 2%; bottom: 4%; width: 26%; z-index: 4; }
.mini-phone { background:#12100e; border-radius: 18px; padding: 9px; box-shadow: var(--shadow-strong); position: relative; }
.mini-phone .mp__cam { position:absolute; left:50%; top:7px; transform:translateX(-50%); width:26%; height:5px; border-radius:100px; background:#000; }
.mini-phone .mp__hero { display:block; height: 78px; border-radius: 12px; background: linear-gradient(150deg, var(--gold), #6f4a24); margin-top: 8px; }
.mini-phone .mp__t { display:block; height:7px; border-radius:4px; background: rgba(255,255,255,.28); margin: 8px 6px; }
.mini-phone .mp__t.short { width:56%; }
.mini-phone .mp__nav { display:flex; justify-content:space-between; padding: 8px 8px 4px; }
.mini-phone .mp__nav i { width:9px; height:9px; border-radius:3px; background: rgba(255,255,255,.22); }
.mini-phone .mp__nav i:first-child{ background: var(--gold-soft); }

/* brand fragment */
.scene__brand { left: 8%; bottom: 0; z-index: 2; display:flex; align-items:center; gap:10px; }
.scene__brand .brandmark { font-family: var(--font-head); font-weight:700; font-size: 2.4rem; color:#fff; background: var(--terracotta); width: 58px; height:58px; display:grid; place-items:center; border-radius:14px; box-shadow: var(--shadow); }
.scene__brand .swatch { width:20px; height:44px; border-radius:5px; }
.scene__brand .swatch.s1{ background: var(--terracotta); } .scene__brand .swatch.s2{ background: var(--gold); } .scene__brand .swatch.s3{ background: var(--anthracite); }
.scene__brand .specimen { font-family: var(--font-head); font-weight:600; font-size: 2rem; color: var(--ink); }

/* marketing fragment */
.scene__market { right: 0; top: 2%; z-index: 2; display:flex; align-items:flex-end; gap:6px; height: 74px; }
.scene__market .bars { display:flex; align-items:flex-end; gap:6px; height:100%; }
.scene__market .bars b { width:14px; background: var(--gold); border-radius:4px 4px 0 0; }
.scene__market .bars b:nth-child(1){ height:38%; } .scene__market .bars b:nth-child(2){ height:64%; } .scene__market .bars b:nth-child(3){ height:48%; } .scene__market .bars b:nth-child(4){ height:88%; background: var(--terracotta); }
.scene__market .trend { width:70px; height:2px; background: var(--terracotta); transform: rotate(-24deg); transform-origin:left; align-self:flex-start; margin-top:6px; }

/* states — emphasise the active fragment, recede others */
.offer__scene.is-web .scene__desktop,
.offer__scene.is-app .scene__phone,
.offer__scene.is-redesign .scene__desktop { opacity: 1; filter: none; transform: scale(1.03); z-index: 6; }
.offer__scene.is-app .scene__phone { transform: scale(1.12) translateY(-6px); }
.offer__scene.is-redesign .scene__phone { opacity:.5; filter:none; }
.offer__scene.is-redesign .scene__desktop::after { content:""; position:absolute; inset:0; border-left: 2px dashed var(--gold); width:52%; box-shadow: 8px 0 24px -10px var(--terracotta); border-radius:10px; animation: wipe 3s var(--ease) infinite; }
@keyframes wipe { 0%,100%{ width:38%; } 50%{ width:66%; } }
.offer__scene.is-complete .scene__layer { opacity: .95; filter: none; transform: none; }
.offer__scene.is-complete .scene__desktop { transform: scale(.92) translate(-4%,-4%); }
.offer__scene.is-complete .scene__phone { transform: scale(1.05); }
.offer__scene.is-complete::before { content:""; position:absolute; left:12%; right:10%; top:20%; bottom:18%; border:1px solid rgba(175,132,77,.4); border-radius:12px; opacity:.7; }
.offer__scene.is-web .scene__cursor { left:42%; top:34%; }
.offer__scene.is-app .scene__cursor { left:74%; top:52%; }
.offer__scene.is-redesign .scene__cursor { left:30%; top:60%; }
.offer__scene.is-complete .scene__cursor { left:52%; top:44%; }
@media (prefers-reduced-motion: reduce){ .offer__scene.is-redesign .scene__desktop::after { animation:none; } }

/* ---------- OFFER statement editorial ---------- */
.offer__statement { max-width: none; display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.2rem,.6rem + 2vw,2.6rem) 2rem; align-items: end; }
.offer__statement .stmt { margin: 0; font-family: var(--font-head); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.offer__statement .stmt--a { grid-column: 1 / 9; font-size: clamp(1.3rem,1rem + 1.4vw,2.1rem); line-height: 1.32; }
.offer__statement .stmt--b { grid-column: 5 / 13; font-size: clamp(1.2rem,1rem + 1vw,1.7rem); line-height: 1.35; }
.offer__statement .big { display:block; font-size: clamp(2rem,1.4rem + 3vw,3.6rem); font-weight: 700; color: var(--terracotta); line-height: 1.02; margin-top: .18em; }
.offer__statement .stmt-cta { grid-column: 8 / 13; justify-self: end; align-self: end; }
@media (max-width: 720px){
  .offer__statement { grid-template-columns: 1fr; gap: 1.4rem; }
  .offer__statement .stmt--a,.offer__statement .stmt--b,.offer__statement .stmt-cta { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- SERVICES editorial right side ---------- */
.svc-tabs { min-height: clamp(340px, 30vw, 430px); }
.svc-nav .prio-note { font-family: var(--font-body); font-weight:700; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color: var(--gold); position: relative; padding-left: 1.4rem; }
.svc-nav .prio-note::before { content:""; position:absolute; left:0; top:50%; width:1rem; height:1.5px; background: var(--gold); transform: translateY(-50%); }
.svc-panel { position: relative; padding-top: .4rem; }
.svc-panel__num { position:absolute; right:0; top:-.55em; font-family: var(--font-head); font-weight:700; font-size: clamp(4.5rem,3rem + 7vw,8.5rem); line-height:1; color: rgba(157,97,85,.09); pointer-events:none; z-index:0; }
.svc-panel__name { display:block; font-family: var(--font-head); font-weight:600; font-size: clamp(1.5rem,1.1rem + 1.4vw,2.2rem); letter-spacing:-.02em; color: rgba(28,22,19,.9); margin-bottom: 1.1rem; position: relative; z-index:1; }
.svc-panel ul { display: block; columns: 2; column-gap: clamp(1.5rem,1rem + 2vw,3rem); position: relative; z-index:1; }
.svc-panel li { display: block; break-inside: avoid; border: none; border-radius: 0; padding: .62rem 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font-size: .96rem; }
.svc-panel li:hover { border-color: var(--terracotta); background: none; color: var(--terracotta); }
@media (min-width: 1100px){ .svc-panel#svcp-3 ul, .svc-panel[id="svcp-3"] ul { columns: 3; } }
@media (max-width: 780px){
  .svc-panel__num { font-size: 4.5rem; top:-.4em; }
  .svc-panel ul { columns: 2; }
  .svc-panel__name { display: none; }
}
@media (max-width: 460px){ .svc-panel ul { columns: 1; } }

/* ---------- STORY creative editorial ---------- */
.story { position: relative; overflow: hidden; }
.story__glow { position:absolute; z-index:0; left:56%; top:18%; width:44vw; max-width:640px; aspect-ratio:1/1; background: radial-gradient(closest-side, rgba(157,97,85,.28), transparent 70%); filter: blur(20px); pointer-events:none; }
.story__head h2 { font-size: var(--fs-h2); }
.story__flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12,1fr); column-gap: clamp(1.5rem,1rem + 2vw,3.4rem); row-gap: clamp(1.6rem,1rem + 2.5vw,3.4rem); margin-top: clamp(1.6rem,1rem + 2vw,3rem); }
.story__lead { grid-column: 1 / 8; grid-row: 1; margin: 0; }
.story__intro { display: block; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.4rem,1.1rem + 1.5vw,2.35rem); line-height: 1.3; letter-spacing: -.02em; color: #fff; margin-bottom: .7em; }
.story__cont { font-size: var(--fs-body); line-height: 1.7; color: var(--on-dark); }
.story__b { margin: 0; color: var(--on-dark); font-size: var(--fs-body); line-height: 1.7; }
.story__b::before { content:""; display:block; width: 30px; height: 2px; background: var(--gold); opacity: .8; margin-bottom: 1rem; }
.story__b1 { grid-column: 8 / 13; grid-row: 1; align-self: end; }
.story__b2 { grid-column: 1 / 6; grid-row: 2; }
.story__closer { grid-column: 6 / 13; grid-row: 2; align-self: start; margin-top: clamp(1rem,3vw,3rem); }
.story__closer .story__b3 { font-size: clamp(1.1rem,1rem + .7vw,1.5rem); color: #fff; font-family: var(--font-head); font-weight: 400; line-height: 1.4; }
.story__closer .story__b3::before { background: var(--gold); }
.story__sign { display: inline-block; margin-top: 1.4rem; font-family: var(--font-script); font-size: clamp(3rem,2rem + 4vw,5rem); line-height: .7; color: var(--gold-soft); position: relative; }
.story__sign::after { content:""; position:absolute; left:2%; right:8%; bottom: .16em; height: 2px; background: linear-gradient(90deg, var(--gold-soft), transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .2s; }
.story__sign.is-in::after { transform: scaleX(1); }
@media (max-width: 860px){
  .story__glow { left: 40%; top: 30%; width: 70vw; }
  .story__flow { grid-template-columns: 1fr; row-gap: clamp(1.4rem,1rem + 2vw,2.2rem); }
  .story__lead,.story__b1,.story__b2,.story__closer { grid-column: 1 / -1; grid-row: auto; align-self: auto; margin-top: 0; }
}

/* ---------- FORM header full width ---------- */
.formsec__head { text-align: left; max-width: none; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 2.5rem; }
.formsec__head .eyebrow { justify-content: flex-start; }
.formsec__head h2 { font-size: var(--fs-h2); max-width: 22ch; margin: 0; }
.formsec__sub { color: var(--ink-soft); font-size: var(--fs-lead); margin: 0; align-self: end; max-width: 24ch; text-align: right; }
@media (max-width: 720px){
  .formsec__head { grid-template-columns: 1fr; gap: .6rem; }
  .formsec__sub { text-align: left; max-width: 40ch; }
}

/* ---------- FOOTER email ---------- */
.footer__email { color: var(--on-dark); font-weight: 600; overflow-wrap: anywhere; word-break: break-word; }
.footer__email:hover { color: var(--gold-soft); }

/* =========================================================================
   REDESIGN v5 — hero devices (laptop+phone) · offer scene devices ·
   cinematic videos · services typographic grid · story full-width intro
   ========================================================================= */

/* ---------- HERO: laptop + phone as one product composition ---------- */
.hero__stage { perspective: 1600px; }
.devices { position: relative; width: min(100%, 480px); margin-inline: auto; }
.devices__shadow { position: absolute; left: 6%; right: 6%; bottom: -11%; height: 42px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 72%); filter: blur(9px); z-index: 0; }
.laptop { width: 100%; position: relative; z-index: 2; animation: floatA 6.8s ease-in-out infinite; }
.laptop__shadow { display: none; }
/* premium aluminium refine */
.laptop__lid { background: linear-gradient(150deg,#cfc8c2 0%,#8f8781 18%,#2a2320 44%,#14100e 100%); padding: 6px 6px 7px; }
.laptop__base { background: linear-gradient(#d7d0ca,#9a918b 30%,#3a322e 60%,#181310); }

.phone { position: absolute; z-index: 3; width: 31%; right: -3%; bottom: -7%; transform: rotateX(var(--rx,6deg)) rotateY(var(--ry,-11deg)); transition: transform .6s var(--ease); animation: floatB 7.2s ease-in-out .9s infinite; }
.phone__screen { position: relative; aspect-ratio: 9/19; border-radius: 26px; background: #0b0908; padding: 5px; overflow: hidden;
  box-shadow: 0 0 0 2px #b8b0aa, 0 0 0 4px #4a423d, 0 24px 40px -16px rgba(0,0,0,.7); }
.phone__island { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 30%; height: 12px; border-radius: 100px; background: #000; z-index: 3; }
.phone__glare { position: absolute; inset: 0; background: linear-gradient(125deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 62%); animation: glareSweep 8s var(--ease) 1.2s infinite; pointer-events: none; }
.appui { position: absolute; inset: 5px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg,#fbf7f3,#efe4db); display: flex; flex-direction: column; padding: 13% 9% 8%; gap: 5%; }
.appui__status { height: 5px; width: 34%; border-radius: 3px; background: rgba(28,22,19,.25); align-self: center; }
.appui__photo { flex: 1; border-radius: 12px; overflow: hidden; min-height: 40%; }
.appui__photo img { width: 100%; height: 100%; object-fit: cover; }
.appui__title { height: 9px; width: 62%; border-radius: 4px; background: var(--terracotta); }
.appui__line { height: 6px; border-radius: 3px; background: rgba(28,22,19,.16); }
.appui__line.short { width: 54%; }
.appui__cta { height: 15px; width: 100%; border-radius: 100px; background: var(--gold); margin-top: 2%; }
.appui__tab { display: flex; justify-content: space-between; padding: 4% 6% 0; }
.appui__tab i { width: 9px; height: 9px; border-radius: 3px; background: rgba(28,22,19,.2); }
.appui__tab i:first-child { background: var(--terracotta); }

@keyframes floatA { 0%,100%{ translate: 0 0; } 50%{ translate: 0 -13px; } }
@keyframes floatB { 0%,100%{ translate: 0 0; } 50%{ translate: 0 10px; } }
@media (prefers-reduced-motion: reduce){ .laptop,.phone { animation: none; } .phone__glare { animation: none; opacity: 0; } }
@media (max-width: 1024px){ .devices { width: min(100%, 380px); } }
@media (max-width: 760px){
  .devices { width: min(84%, 340px); }
  .phone { width: 33%; right: -2%; bottom: -10%; transform: rotateX(5deg) rotateY(-8deg); animation-duration: 7.5s; }
  .phone__glare { display: none; }
}

/* ---------- OFFER SCENE: real devices + brand + ad, 4 clear states ---------- */
.offer__scene.is-redesign .scene__desktop::after { content: none; }  /* remove old wipe */
.scene__desktop { left: 0; top: 5%; width: 76%; }
.scene__phone { right: 0; bottom: 2%; width: 25%; }
.scene__layer { opacity: 0; transform: scale(.95); filter: blur(1px); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }

/* mini laptop */
.mini-laptop { position: relative; }
.ml__screen { position: relative; aspect-ratio: 16/10; border-radius: 9px 9px 3px 3px; overflow: hidden; background: #0c0908; padding: 6px;
  box-shadow: 0 0 0 2px #b8b0aa, 0 0 0 4px #3a322e, var(--shadow-strong); }
.ml__base { display: block; height: 10px; width: 118%; margin-left: -9%; border-radius: 0 0 10px 10px; background: linear-gradient(#d7d0ca,#8f857f 45%,#2a221d); box-shadow: 0 18px 26px -14px rgba(0,0,0,.6); }
.miniweb { position: absolute; inset: 6px; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg,#fbf7f3,#efe4db); padding: 7% 8%; display: flex; flex-direction: column; gap: 6%; }
.miniweb__bar { display: flex; gap: 6px; }
.miniweb__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(28,22,19,.22); }
.miniweb__bar i:first-child { background: var(--terracotta); }
.miniweb__hero { height: 42%; border-radius: 6px; background: linear-gradient(130deg,var(--terracotta),#6f4038); }
.miniweb__t { height: 7px; border-radius: 4px; background: rgba(28,22,19,.16); }
.miniweb__t.short { width: 50%; }
.miniweb__cols { display: flex; gap: 7px; margin-top: auto; }
.miniweb__cols b { flex: 1; height: 26px; border-radius: 5px; background: rgba(28,22,19,.08); }
.miniweb__cols b:nth-child(2){ background: rgba(175,132,77,.3); }
/* redesign "before" overlay */
.redesign-old { position: absolute; inset: 6px; border-radius: 4px; overflow: hidden; background: #ece6df; padding: 9% 10%; display: flex; flex-direction: column; gap: 9%; opacity: 0; z-index: 2; }
.redesign-old .ro__bar { height: 12px; width: 70%; background: #b9b0a7; border-radius: 2px; }
.redesign-old .ro__t { height: 8px; background: #cfc7bd; border-radius: 2px; }
.redesign-old .ro__t.short { width: 45%; }
.redesign-old .ro__block { height: 34%; background: #d6cec4; border-radius: 2px; margin-top: auto; }
.redesign-old::after { content:""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); left: 0; opacity: 0; box-shadow: 0 0 16px 2px rgba(175,132,77,.7); }
.ml__glare { position: absolute; inset: 6px; border-radius: 4px; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 64%); pointer-events: none; z-index: 3; }

/* mini phone */
.mini-phone2 { position: relative; }
.mp2__screen { position: relative; aspect-ratio: 9/19; border-radius: 20px; background: #0b0908; padding: 4px; overflow: hidden; box-shadow: 0 0 0 2px #b8b0aa, 0 0 0 3px #3a322e, var(--shadow-strong); }
.mp2__island { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 30%; height: 8px; border-radius: 100px; background: #000; z-index: 3; }
.miniapp { position: absolute; inset: 4px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg,#fbf7f3,#efe4db); padding: 16% 11% 9%; display: flex; flex-direction: column; gap: 7%; }
.miniapp__status { height: 4px; width: 32%; border-radius: 3px; background: rgba(28,22,19,.25); align-self: center; }
.miniapp__photo { flex: 1; min-height: 38%; border-radius: 10px; background: linear-gradient(150deg,var(--gold),#6f4a24); }
.miniapp__t { height: 6px; border-radius: 3px; background: rgba(28,22,19,.16); }
.miniapp__t.short { width: 52%; }
.miniapp__cta { height: 13px; border-radius: 100px; background: var(--terracotta); }
.miniapp__tab { display: flex; justify-content: space-between; padding: 5% 8% 0; margin-top: auto; }
.miniapp__tab i { width: 8px; height: 8px; border-radius: 3px; background: rgba(28,22,19,.2); }
.miniapp__tab i:first-child { background: var(--gold); }

/* brand identity fragment */
.scene__brand { left: 4%; bottom: -2%; z-index: 2; display: flex; align-items: center; gap: 10px; }
.scene__ad { right: 2%; top: 0; z-index: 2; width: 30%; }
.ad-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-strong); padding-bottom: 10px; }
.ad-card__img { display: block; height: 62px; background: linear-gradient(135deg,var(--terracotta),var(--gold)); }
.ad-card__t { display: block; height: 8px; border-radius: 4px; background: rgba(28,22,19,.16); margin: 10px 12px 0; }
.ad-card__t.short { width: 55%; }
.ad-card__cta { display: block; height: 14px; width: 46%; border-radius: 100px; background: var(--anthracite); margin: 10px 12px 0; }

/* --- states --- */
.offer__scene.is-web .scene__desktop { opacity: 1; filter: none; transform: none; }
.offer__scene.is-app .scene__phone { opacity: 1; filter: none; transform: scale(1.45) translate(-30%, -6%); z-index: 5; }
.offer__scene.is-redesign .scene__desktop { opacity: 1; filter: none; transform: none; }
.offer__scene.is-redesign .redesign-old { opacity: 1; }
.offer__scene.is-redesign.play .redesign-old { animation: redesignWipe 1.7s var(--ease) forwards; }
.offer__scene.is-redesign.play .redesign-old::after { animation: redesignEdge 1.7s var(--ease) forwards; }
@keyframes redesignWipe { 0%{ clip-path: inset(0 0 0 0); opacity: 1; } 78%{ clip-path: inset(0 0 0 100%); opacity: 1; } 100%{ clip-path: inset(0 0 0 100%); opacity: 0; } }
@keyframes redesignEdge { 0%{ left: 0; opacity: 1; } 78%{ left: 100%; opacity: 1; } 100%{ left: 100%; opacity: 0; } }
.offer__scene.is-complete .scene__desktop { opacity: 1; filter: none; transform: scale(.86) translate(-6%, -4%); }
.offer__scene.is-complete .scene__phone { opacity: 1; filter: none; transform: scale(.9) translate(10%, 8%); z-index: 4; }
.offer__scene.is-complete .scene__brand { opacity: 1; filter: none; transform: none; }
.offer__scene.is-complete .scene__ad { opacity: 1; filter: none; transform: none; }
.offer__scene.is-complete::before { content:""; position: absolute; left: 8%; right: 6%; top: 14%; bottom: 10%; border: 1px solid rgba(175,132,77,.35); border-radius: 14px; }
@media (prefers-reduced-motion: reduce){ .offer__scene.is-redesign.play .redesign-old,.offer__scene.is-redesign.play .redesign-old::after { animation: none; opacity: 0; } .ml__glare { display: none; } }

/* ---------- CINEMATIC VIDEOS ---------- */
.videos { overflow: hidden; }
.videos__thread { position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: linear-gradient(90deg, transparent, rgba(175,132,77,.35) 30%, rgba(175,132,77,.35) 70%, transparent); z-index: 0; }
.videos .wrap { position: relative; z-index: 1; }
.videos__layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(1.5rem,1rem + 3vw,4rem); align-items: center; }
.videos__intro h2 { font-size: var(--fs-h2); line-height: 1.02; }
.videos__intro .v-strong { display: block; color: #fff; }
.videos__intro .v-soft { display: block; color: var(--gold-soft); font-weight: 400; font-style: italic; }
.videos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,.6rem + 1.6vw,2rem); align-items: start; }
.vcard { background: transparent; box-shadow: none; border-radius: 16px; }
.vcard__media { border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.vcard--up { transform: translateY(-18px); }
.vcard--down { transform: translateY(18px); }
.vcard__poster { transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.vcard::after { content:""; position: absolute; inset: 0; border-radius: 16px; box-shadow: 0 0 0 0 rgba(175,132,77,0); transition: box-shadow .6s var(--ease); pointer-events: none; }
.vcard:hover { transform: translateY(-24px); }
.vcard--down:hover { transform: translateY(12px); }
.vcard:hover .vcard__media { box-shadow: 0 40px 70px -28px rgba(0,0,0,.8); }
.vcard:hover .vcard__poster { transform: scale(1.05); filter: contrast(1.08) brightness(1.03); }
.vcard:hover::after { box-shadow: 0 0 40px -6px rgba(175,132,77,.45); }
/* thin ring play button, over the edge */
.play-btn { background: rgba(20,15,13,.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1.5px solid rgba(255,255,255,.85); width: clamp(48px,7vw,62px); height: clamp(48px,7vw,62px); box-shadow: none; transition: transform .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease); }
.play-btn svg { width: 30%; margin-left: 10%; }
.vcard:hover .play-btn { transform: translate(-50%,-50%) scale(1.12); background: var(--terracotta); border-color: var(--terracotta); }
.videos__hint { margin: clamp(1.4rem,1rem + 1.5vw,2.2rem) 0 0; text-align: center; color: var(--on-dark-soft); font-size: .85rem; }
@media (max-width: 860px){
  .videos__layout { grid-template-columns: 1fr; gap: 1.6rem; }
  .videos__thread { display: none; }
}
@media (max-width: 680px){
  .videos__grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; gap: 1.4rem; }
  .vcard--up,.vcard--down { transform: none; }
  .vcard--up:hover,.vcard--down:hover,.vcard:hover { transform: translateY(-6px); }
}

/* ---------- SERVICES typographic numbered grid ---------- */
.svc-panel ul { counter-reset: svc; }
.svc-panel li { position: relative; counter-increment: svc; break-inside: avoid; display: block; padding: .72rem 0 .72rem 2.5rem; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font-size: .98rem; transition: color .3s var(--ease), padding-left .35s var(--ease); }
.svc-panel li::before { content: counter(svc, decimal-leading-zero); position: absolute; left: 0; top: .82rem; font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .06em; color: var(--gold); transition: color .3s var(--ease); }
.svc-panel li::after { content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--terracotta); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.svc-panel li:hover { color: var(--terracotta); padding-left: 2.85rem; background: none; }
.svc-panel li:hover::before { color: var(--terracotta); }
.svc-panel li:hover::after { transform: scaleX(1); }
/* staggered reveal on category switch (desktop) */
@media (min-width: 781px){
  .svc-nav li.is-active .svc-panel li { animation: svcItem .5s var(--ease) both; }
  .svc-nav li.is-active .svc-panel li:nth-child(1){ animation-delay: .02s; }
  .svc-nav li.is-active .svc-panel li:nth-child(2){ animation-delay: .06s; }
  .svc-nav li.is-active .svc-panel li:nth-child(3){ animation-delay: .10s; }
  .svc-nav li.is-active .svc-panel li:nth-child(4){ animation-delay: .14s; }
  .svc-nav li.is-active .svc-panel li:nth-child(5){ animation-delay: .18s; }
  .svc-nav li.is-active .svc-panel li:nth-child(6){ animation-delay: .22s; }
  .svc-nav li.is-active .svc-panel li:nth-child(7){ animation-delay: .26s; }
  .svc-nav li.is-active .svc-panel li:nth-child(8){ animation-delay: .30s; }
  .svc-nav li.is-active .svc-panel li:nth-child(9){ animation-delay: .34s; }
  .svc-nav li.is-active .svc-panel li:nth-child(10){ animation-delay: .38s; }
  .svc-nav li.is-active .svc-panel li:nth-child(11){ animation-delay: .42s; }
}
@keyframes svcItem { from{ opacity: 0; transform: translateY(9px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .svc-nav li.is-active .svc-panel li { animation: none; } }
/* priority: longer thin gold line under the label */
.svc-nav li.priority > button { position: relative; }
.svc-nav li.priority > button::after { content:""; position: absolute; left: 0; bottom: 8px; width: 88px; height: 2px; background: var(--gold); }
.svc-nav li.priority.is-active > button::after,
.svc-nav li.priority > button:hover::after { width: 120px; transition: width .4s var(--ease); }
.svc-nav .prio-note::before { display: none; }

/* ---------- STORY full-width intro + numbered blocks (no dashes) ---------- */
.story__b::before { content: none; display: none; }
.story__closer .story__b3::before { content: none; }
.story__intro { position: relative; z-index: 1; max-width: none; font-family: var(--font-head); font-weight: 500; letter-spacing: -.025em; line-height: 1.22; color: #fff; font-size: clamp(1.55rem, 1.1rem + 2.4vw, 3rem); margin: clamp(1.4rem,1rem + 2vw,2.6rem) 0 0; }
.story__flow { display: grid; grid-template-columns: repeat(12,1fr); column-gap: clamp(1.5rem,1rem + 2vw,3.2rem); row-gap: clamp(1.8rem,1.2rem + 2.5vw,3.6rem); margin-top: clamp(1.6rem,1rem + 2vw,2.8rem); }
.story__cont { grid-column: 5 / 13; grid-row: 1; font-size: var(--fs-body); line-height: 1.75; color: var(--on-dark); margin: 0; }
.story__b { position: relative; margin: 0; color: var(--on-dark); font-size: var(--fs-body); line-height: 1.7; }
.story__n { display: block; font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .12em; color: var(--gold); margin-bottom: .8rem; }
.story__b1 { grid-column: 1 / 6; grid-row: 2; }
.story__b2 { grid-column: 7 / 13; grid-row: 3; }
.story__closer { grid-column: 3 / 12; grid-row: 4; }
.story__closer .story__b3 { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.1rem,1rem + .7vw,1.5rem); line-height: 1.4; color: #fff; }
.story__sign::after { left: 2%; right: 8%; }
@media (max-width: 860px){
  .story__flow { grid-template-columns: 1fr; }
  .story__cont,.story__b1,.story__b2,.story__closer { grid-column: 1 / -1; grid-row: auto; }
}

/* =========================================================================
   v7 — approach video (silent loop) · single client reference section
   ========================================================================= */

/* ---------- Approach: silent looping video (replaces rotating photos) ---------- */
.approach__video { position: relative; display: block; width: 100%; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-lg); aspect-ratio: 4/5; }
.approach__video .approach__video-el { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); display: block; box-shadow: var(--shadow-strong); background: #0c0908; }
.approach__video::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(16,11,9,.05) 0%, transparent 30%, rgba(16,11,9,.55) 100%); pointer-events: none; transition: background .5s var(--ease); }
.approach__video::before { content: ""; position: absolute; left: 1.1rem; top: 1.1rem; width: 34px; height: 1px; background: var(--gold-soft); opacity: .8; z-index: 2; }
.approach__video:hover .approach__video-el { box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.approach__cue { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #fff; pointer-events: none; }
.approach__cue-ring { width: clamp(46px,5vw,58px); height: clamp(46px,5vw,58px); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: rgba(20,15,13,.3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: grid; place-items: center; transition: transform .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease); }
.approach__cue-ring svg { width: 30%; margin-left: 10%; }
.approach__cue-txt { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.85); }
.approach__video:hover .approach__cue-ring, .approach__video:focus-visible .approach__cue-ring { transform: scale(1.1); background: var(--terracotta); border-color: var(--terracotta); }
@media (max-width: 860px){
  .approach__video { aspect-ratio: 4/5; max-width: 460px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce){ .approach__video::after { transition: none; } }

/* ---------- Single client reference ---------- */
.reference { overflow: hidden; }
.reference__thread { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(175,132,77,.32) 35%, rgba(175,132,77,.32) 65%, transparent); z-index: 0; }
.reference .wrap { position: relative; z-index: 1; }
.reference__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,1rem + 4vw,5rem); align-items: center; }
.reference__text h2 { font-size: var(--fs-h2); margin: 0 0 .8rem; }
.reference__sub { color: var(--on-dark-soft); font-size: var(--fs-lead); max-width: 34ch; margin: 0; }
.reference__media { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.reference__video { width: 100%; max-width: 360px; }
.reference__video .vcard__media { aspect-ratio: 9/16; }
.reference__hint { color: var(--on-dark-soft); font-size: .82rem; margin: 0; text-align: center; }
@media (max-width: 860px){
  .reference__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .reference__thread { display: none; }
  .reference__media { align-items: center; }
  .reference__video { max-width: 320px; }
}

/* v8 — contact step: two-column grid on desktop */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.contact-grid .field + .field { margin-top: 0; }
@media (max-width: 560px){ .contact-grid { grid-template-columns: 1fr; } }

/* v11 — compact single-line phone contact near the form (no box, no big icon) */
.formsec .formsec__head { margin-bottom: clamp(1.2rem, 1rem + .9vw, 1.6rem); }
.formsec .form-phone {
  display: flex; flex-flow: row wrap; align-items: baseline; justify-content: flex-start;
  column-gap: .5rem; row-gap: .1rem;
  margin: 0 0 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  color: var(--ink-soft); font-size: .96rem; line-height: 1.45;
}
.formsec .form-phone__label { color: var(--ink-soft); }
.formsec .form-phone__num {
  font-family: var(--font-head); font-weight: 700; font-size: 1.2em;
  color: var(--terracotta); white-space: nowrap; letter-spacing: .01em;
  text-decoration: none; padding: .05rem 0;
}
.formsec .form-phone__num:hover, .formsec .form-phone__num:focus-visible {
  color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 3px;
}

/* =========================================================================
   v12 — real designs in device screens · portfolio gallery · lightbox
   ========================================================================= */

/* ---- real web/app inside device screens (object-fit:cover → always fills, no black gaps) ---- */
.screen-web, .screen-app { position: absolute; inset: 0; overflow: hidden; background: #0c0908; padding: 0; margin: 0; display: block; gap: 0; border-radius: inherit; }
.screen-web picture, .screen-app picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.screen-web__img, .screen-app__img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top; will-change: object-position;
}
@media (prefers-reduced-motion: no-preference){
  .screen-web__img { animation: webScroll 26s ease-in-out infinite; }
  .offer__scene .screen-web__img { animation-duration: 30s; }
}
/* scroll the long page through a cover-filled viewport — never reveals the background */
@keyframes webScroll { 0%,8%{ object-position: center top; } 50%{ object-position: center bottom; } 92%,100%{ object-position: center top; } }

/* ---- Portfolio gallery (editorial masonry) ---- */
.portfolio__head { margin-bottom: clamp(2rem,1.2rem + 2.4vw,3.4rem); }
.portfolio__head h2 { font-size: var(--fs-h2); }
.pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 8px; gap: clamp(.8rem,.5rem + 1vw,1.4rem); }
@media (max-width: 1080px){ .pf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .pf-grid { grid-template-columns: repeat(2, 1fr); } }
.pf-item { position: relative; grid-row-end: span 30; padding: 0; border: none; background: var(--paper-2); border-radius: 12px; overflow: hidden; cursor: pointer; display: block; box-shadow: var(--shadow-soft); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pf-item--wide { grid-column: span 2; }
.pf-item picture { display: block; }
.pf-item img { width: 100%; height: auto; display: block; transition: transform 1.1s var(--ease); }
.pf-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.pf-item:hover img { transform: scale(1.04); }
.pf-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pf-item__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(16,11,9,.78)); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.pf-item:hover .pf-item__cap, .pf-item:focus-visible .pf-item__cap { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .pf-item, .pf-item img { transition: none; }
  .pf-item:hover { transform: none; }
  .pf-item:hover img { transform: none; }
  .pf-item__cap { transition: none; }
}

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: clamp(1rem,.5rem + 2vw,2.5rem); background: rgba(8,6,5,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s var(--ease); }
.lightbox.is-open { opacity: 1; }
.lightbox__figure { position: relative; z-index: 2; margin: 0; max-width: min(1100px, 94vw); display: flex; flex-direction: column; gap: .8rem; transform: scale(.985); transition: transform .4s var(--ease); }
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__imgwrap { max-height: 84vh; overflow: auto; border-radius: 12px; box-shadow: var(--shadow-strong); background: #0c0908; -webkit-overflow-scrolling: touch; }
.lightbox__img { width: 100%; height: auto; display: block; }
.lightbox__cap { color: rgba(243,234,226,.85); font-size: .85rem; text-align: center; }
.lightbox__close { position: absolute; top: -.2rem; right: 0; transform: translateY(-100%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; z-index: 4; transition: background-color .3s var(--ease), transform .3s var(--ease); }
.lightbox__close:hover { background: var(--terracotta); transform: translateY(-100%) scale(1.06); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 1.8rem; line-height: 1; display: grid; place-items: center; z-index: 4; transition: background-color .3s var(--ease); }
.lightbox__nav:hover { background: var(--terracotta); border-color: var(--terracotta); }
.lightbox__prev { left: clamp(.5rem,2vw,1.6rem); }
.lightbox__next { right: clamp(.5rem,2vw,1.6rem); }
@media (max-width: 560px){
  .lightbox__close { top: .4rem; right: .4rem; transform: none; }
  .lightbox__close:hover { transform: scale(1.06); }
  .lightbox__nav { width: 44px; height: 44px; bottom: 1rem; top: auto; transform: none; }
  .lightbox__prev { left: 1rem; } .lightbox__next { right: 1rem; }
}
body.lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce){ .lightbox, .lightbox__figure { transition: none; } }