/* ==========================================================================
   Lexivo for MedSpa — the "Alabaster" system
   Forked from interiors/assets/css/interiors.css.

   The palette is NOT a new design: it is lifted from the product this site
   sells (ai-smile-simulator/app/skin.css, the skin vertical). A prospect who
   clicks "Try the client experience" lands on the same alabaster ground, the same
   eucalyptus green and the same two typefaces. Site and product read as one
   company; that is the entire reason for the choice.

   Two structural departures from interiors, both load-bearing — see §2 and §10.
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
img,svg,video{display:block;max-width:100%;}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:3px;}
::selection{background:rgba(184,115,74,.18);}

/* ---------- 2. Tokens ---------- */
:root{
  --paper:#EFEAE3;      /* warm alabaster — the app's --color-bg */
  --sand:#E8E2D9;       /* alternating band — the app's --color-surface-2 */
  --sand-deep:#DED7CB;
  --card:#F8F5F0;       /* the app's --color-surface */
  --ink:#26221E;        /* warm near-black, never pure */
  --ink-soft:#5D554D;
  --muted:#6A6158;
  --faint:#8A8177;
  --rule:#DCD4C9;
  --rule-soft:#E7E1D8;

  /* Eucalyptus replaces clay. Named for what it is rather than kept as --clay,
     so nothing here reads as a leftover from the interiors palette. */
  --clay:#46543F;
  --clay-deep:#36412F;
  --clay-wash:#E4E7DF;
  /* Secondary is the app's own radiance hue, not a new colour invented here. */
  --sage:#8A8F72;
  --sage-wash:#EDEEE6;
  --brass:#B49A4E;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
  /* Faces are portrait, so the arch is taller and tighter than the interiors
     one, which was shaped for a landscape room. */
  --arch:260px 260px 18px 18px;

  --pad:clamp(22px,5vw,40px);
  --maxw:1180px;
  /* Interiors' 11vw put ~281px of nothing between sections. Renovation's value,
     which lands at ~179px. */
  --sec:clamp(56px,7vw,104px);

  --ease:cubic-bezier(.22,1,.36,1);
  --t:.5s var(--ease);

  --shadow:0 24px 60px -28px rgba(40,34,28,.28);
  --shadow-sm:0 10px 30px -18px rgba(40,34,28,.25);

  /* ⚠️ DISPLAY IS A GROTESQUE HERE, NOT A SERIF. Interiors set its heading
     scale deliberately SMALL because "Fraunces sets noticeably wider than a
     grotesque". Familjen Grotesk sets narrower, so every heading below is
     scaled UP from the inherited values to hold the same optical weight.
     Swapping the family without the scale leaves the page looking timid. */
  --display:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;
  --font:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- 3. Base ---------- */
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}
/* barely-there paper grain; keeps large flat areas from looking digital */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  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'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1;}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.wrap-wide{max-width:1360px;}
.wrap-sm{max-width:800px;}
section{padding-block:var(--sec);position:relative;}
.tight{padding-block:clamp(56px,7vw,96px);}
.band{background:var(--sand);}
.band-soft{background:linear-gradient(180deg,var(--paper),var(--sand) 45%,var(--paper));}
.band-clay{background:var(--clay-wash);}

.grid{display:grid;gap:clamp(18px,2.4vw,32px);}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
/* ⚠️ `display:grid` is NOT inherited from .grid — .split is used on its own in
   the markup, and without this the 1fr 1fr and the align-items below have never
   done anything. Verified on the shipped interiors site: its .split renders as
   display:block, so its contact form has always stacked under a 1100px-wide
   paragraph rather than sitting beside it. Fixed here; interiors is a separate
   live site and was left alone. */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,6vw,88px);}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr);}.split{grid-template-columns:1fr;}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr;}}

/* ---------- 5. Type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.12;
  font-variation-settings:'SOFT' 20,'WONK' 1;color:var(--ink);}
/* Fraunces sets noticeably wider than a grotesque — these run smaller than the
   equivalent scale on the platform site so headings still fit two or three lines. */
.h-hero{font-size:clamp(40px,5vw,66px);line-height:1.05;letter-spacing:-.032em;}
/* secondary clause inside the hero headline — keeps the promise big and the
   mechanism smaller, instead of letting a long sentence wrap at full size */
.h-hero .h-sub{display:block;font-family:var(--font);font-size:.42em;font-weight:400;
  line-height:1.35;letter-spacing:-.005em;color:var(--ink-soft);margin-top:20px;}
.h-hero .h-sub b{font-weight:600;color:var(--ink);}
.h1{font-size:clamp(32px,3.8vw,47px);letter-spacing:-.028em;}
.h2{font-size:clamp(29px,3.4vw,43px);letter-spacing:-.026em;}
.h3{font-size:clamp(22px,2.5vw,31px);line-height:1.22;letter-spacing:-.02em;}
.h4{font-size:19px;line-height:1.35;letter-spacing:-.012em;}
em,.italic{font-style:italic;}

.lede{font-size:clamp(18px,1.7vw,21px);line-height:1.72;color:var(--ink-soft);max-width:62ch;}
.sub{color:var(--ink-soft);max-width:66ch;}
.small{font-size:15px;line-height:1.7;color:var(--ink-soft);}
.tiny{font-size:13px;line-height:1.6;color:var(--muted);}
b,strong{font-weight:600;color:var(--ink);}

/* letterspaced small caps replace the platform site's mono labels */
.label{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:22px;}
.label::before{content:'';width:26px;height:1px;background:var(--clay);opacity:.5;flex:none;}
.label.plain::before{display:none;}
.label.sage{color:var(--sage);} .label.sage::before{background:var(--sage);}

.head{max-width:720px;margin-bottom:clamp(40px,5vw,68px);}
.head.center{margin-inline:auto;text-align:center;}
.head.center .label{justify-content:center;}
.head .lede{margin-top:22px;}
.head.center .lede{margin-inline:auto;}

/* pull quote, used sparingly */
.pull{font-family:var(--display);font-size:clamp(24px,3vw,36px);line-height:1.32;letter-spacing:-.02em;
  font-style:italic;color:var(--ink);max-width:20ch;}

/* ---------- 6. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r-pill);font-size:15.5px;font-weight:550;
  letter-spacing:-.005em;transition:var(--t);white-space:nowrap;}
.btn svg{width:17px;height:17px;flex:none;transition:transform .4s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn-1{background:var(--clay);color:#fff;box-shadow:0 10px 26px -14px var(--clay);}
.btn-1:hover{background:var(--clay-deep);box-shadow:0 16px 34px -14px var(--clay);transform:translateY(-1px);}
.btn-2{background:transparent;color:var(--ink);border:1px solid var(--rule);}
.btn-2:hover{border-color:var(--clay);color:var(--clay);}
.btn-3{padding:6px 0;color:var(--clay);font-weight:550;position:relative;}
.btn-3::after{content:'';position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--clay);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.btn-3:hover::after{transform:scaleX(1);}
.btn-lg{padding:17px 34px;font-size:16.5px;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
@media(max-width:520px){.btn{width:100%;}.btn-3{width:auto;}}

/* ---------- 7. Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--rule);background:var(--card);font-size:13.5px;color:var(--ink-soft);transition:var(--t);}
.chip:hover{border-color:var(--clay);color:var(--clay);}
.chip-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--sage);flex:none;}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}

/* ---------- 8. Cards ---------- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,38px);transition:var(--t);}
.card:hover{border-color:var(--sand-deep);box-shadow:var(--shadow-sm);transform:translateY(-3px);}
.card-flat:hover{transform:none;box-shadow:none;}
.card p{color:var(--ink-soft);}
.card .h3,.card .h4{margin-bottom:12px;}

/* soft numbered step */
.steps{counter-reset:s;}
.step{counter-increment:s;}
.step .n{display:block;font-family:var(--display);font-size:34px;color:var(--clay);opacity:.45;
  line-height:1;margin-bottom:18px;}
.step .n::before{content:counter(s,decimal-leading-zero);}

/* icon well — soft, no gradient */
.ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--clay-wash);color:var(--clay);flex:none;transition:var(--t);}
.ico svg{width:21px;height:21px;}
.ico.sage{background:var(--sage-wash);color:var(--sage);}
.card:hover .ico{background:var(--clay);color:#fff;}
.ico-sm{width:36px;height:36px;border-radius:10px;margin-bottom:0;}
.ico-sm svg{width:17px;height:17px;}

/* ---------- 9. Images ---------- */
.arch{border-radius:var(--arch);overflow:hidden;}
.rounded{border-radius:var(--r-lg);overflow:hidden;}
.frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow);}
figure figcaption{margin-top:14px;font-size:13.5px;color:var(--muted);}

/* ---------- 10. Before / after slider ---------- */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);
  background:var(--sand);box-shadow:var(--shadow);user-select:none;touch-action:pan-y;
  /* ⚠️ PORTRAIT, not the 3/2 this component inherited. Every image on this
     site is a face at 2:3; at 3/2 the crop lands as a band across the eyes and
     the chin and forehead — half of what a skin comparison is about — fall
     outside the frame entirely. */
  aspect-ratio:4/5;cursor:ew-resize;isolation:isolate;}
.ba.arch{border-radius:var(--arch);}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.ba .after-wrap{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%));will-change:clip-path;}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1.5px;background:rgba(255,255,255,.95);
  transform:translateX(-.75px);pointer-events:none;box-shadow:0 0 18px rgba(0,0,0,.35);z-index:4;}
.ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;
  border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(60,45,30,.32);
  transition:transform .3s var(--ease);}
.ba:hover .knob{transform:translate(-50%,-50%) scale(1.08);}
.ba .knob svg{width:18px;height:18px;color:var(--clay);}
.ba .tag{position:absolute;top:16px;z-index:3;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 13px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);color:var(--ink);backdrop-filter:blur(6px);}
.ba .tag-b{left:16px;} .ba .tag-a{right:16px;}
/* ⚠️ ARCHED PAIRS PUT THEIR LABELS AT THE BOTTOM.
   `--arch` rounds the top corners by 260px. On the landscape cards this
   component was written for that still left a straight run across the top for
   the two pills; on a PORTRAIT card the curve consumes the whole top edge and
   clips them — "ORIGINAL PHOTO" rendered as "…NAL PHOTO". The bottom corners
   are only 18px, so the labels move there and the arch survives intact. */
.ba.arch .tag{top:auto;bottom:16px;}
.ba-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px;flex-wrap:wrap;}
.ba-cap .t{font-size:15px;color:var(--ink);}
.ba-cap .m{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* ---------- 10b. Hero rotator (cycles rooms) ---------- */
.rot{display:grid;}
.rot-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:scale(.994);pointer-events:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease),visibility .8s;}
.rot-slide.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.rot-tabs{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap;}
.rot-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--r-pill);
  border:1px solid var(--rule);background:var(--card);font-size:13.5px;color:var(--ink-soft);
  transition:var(--t);position:relative;overflow:hidden;cursor:pointer;}
.rot-tab svg{width:15px;height:15px;flex:none;opacity:.7;}
.rot-tab:hover{border-color:var(--clay);color:var(--clay);}
.rot-tab.on{border-color:var(--clay);color:var(--clay);background:var(--clay-wash);}
.rot-tab.on svg{opacity:1;}
/* width is driven per frame by JS, so no CSS transition here */
.rot-tab .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--clay);will-change:width;}
@media(max-width:560px){.rot-tab{flex:1;justify-content:center;padding:9px 10px;font-size:12.5px;}}

/* ---------- 11. Marquee (the style range) ---------- */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.mq-track{display:flex;gap:18px;width:max-content;animation:mq 60s linear infinite;}
.mq:hover .mq-track{animation-play-state:paused;}
.mq.rev .mq-track{animation-direction:reverse;}
@keyframes mq{to{transform:translateX(-50%);}}
.mq-item{width:clamp(190px,20vw,250px);flex:none;}
.mq-item .im{aspect-ratio:4/5;border-radius:140px 140px 14px 14px;overflow:hidden;background:var(--sand);}
.mq-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.mq-item:hover img{transform:scale(1.05);}
.mq-item .nm{margin-top:12px;text-align:center;font-size:13.5px;color:var(--ink-soft);}

/* ---------- 12. Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;transition:var(--t);border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(250,247,242,.9);backdrop-filter:blur(14px);border-bottom-color:var(--rule);}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:26px;height:78px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.logo{display:flex;align-items:baseline;gap:9px;font-family:var(--display);font-size:23px;
  font-weight:500;letter-spacing:-.02em;flex:none;}
/* Stacked under the wordmark, not beside it: "Powered by TrueRender™" is
   half again as wide as the "for interiors" tag it replaced, and inline it
   crowded the burger and the demo button on a narrow phone. Stacking also
   makes it read as a byline, which is what it is.
   No uppercase, and tracking dropped from .18em: TrueRender is a camel-case
   mark, and "POWERED BY TRUERENDER™" widely tracked reads as a generic
   phrase rather than a name. */
.logo{flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15;}
.logo small{font-family:var(--font);font-size:10.5px;font-weight:500;letter-spacing:.015em;
  text-transform:none;color:var(--muted);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:15px;color:var(--ink-soft);transition:var(--t);position:relative;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--clay);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none;}
.burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--rule);
  place-items:center;gap:5px;flex-direction:column;background:var(--card);}
.burger span{width:17px;height:1.4px;background:var(--ink);border-radius:2px;transition:var(--t);}
.burger.on span:nth-child(1){transform:translateY(6.4px) rotate(45deg);}
.burger.on span:nth-child(2){opacity:0;}
.burger.on span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg);}
/* ⚠️ Raised from 900px on 2026-08-30, when the nav went from four links to
   five. Measured at 901-960px with five: the row cannot hold them beside a
   two-line logo and the CTA pill, so the flex items shrink and "How it works",
   "The analysis" and "Google Ads" each break onto a second line — the nav reads
   as three rows of debris. Nothing is lost by switching earlier: the burger
   menu carries the same five links plus Gallery. If the nav ever drops back to
   four, this can go back to 900. */
@media(max-width:1000px){.nav-links,.nav-cta .btn{display:none;}.burger{display:flex;}}
.mobile{position:fixed;inset:78px 0 0;z-index:890;background:var(--paper);padding:32px var(--pad) 60px;
  overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:var(--t);}
.mobile.on{opacity:1;visibility:visible;transform:none;}
.mobile a{display:block;padding:18px 0;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:24px;}
/* `.mobile a` (0,2,0) outranks `.btn` (0,1,0) and comes later in the file, so
   the menu's "Book a demo" pill was inheriting display:block, padding:18px 0,
   the display face at 24px and a border-bottom. display:block kills the flex
   centring and the zero side padding pushes the label into the pill's left
   curve, which is exactly how it looked. Put the button back to being a button. */
.mobile .btn{margin-top:30px;display:flex;justify-content:center;
  padding:16px 30px;border-bottom:0;font-family:var(--font);font-size:15.5px;}

/* ---------- 13. Hero ---------- */
.hero{padding-top:clamp(116px,13vh,150px);padding-bottom:clamp(60px,7vw,96px);}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,4.4vw,60px);align-items:center;}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;}}
.hero .lede{margin-top:26px;}
.hero-meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:44px;padding-top:28px;border-top:1px solid var(--rule);}
.hero-meta div{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:9px;}
.hero-meta svg{width:16px;height:16px;color:var(--sage);flex:none;}

/* ---------- 14. Feature list ---------- */
.flist li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule-soft);align-items:flex-start;}
.flist li:last-child{border-bottom:0;}
.flist .ic{width:22px;height:22px;border-radius:50%;background:var(--sage-wash);color:var(--sage);
  display:grid;place-items:center;flex:none;margin-top:3px;}
.flist .ic svg{width:12px;height:12px;}
.flist b{display:block;margin-bottom:4px;font-weight:600;}
.flist p{font-size:15.5px;color:var(--ink-soft);}

/* ---------- 15. Quote cards ---------- */
.qcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);transition:var(--t);}
.qcard:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px);}
.qcard p{font-family:var(--display);font-size:clamp(19px,2vw,23px);font-style:italic;
  line-height:1.42;color:var(--ink);margin-bottom:20px;}
.qcard .who{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* 16. Keyword compare (.vs / .kw) was removed with the "Finding clients"
   section — it had no other user on any page. */

/* ---------- 17. Dashboard mock parts ----------
   The full studio-dashboard chrome (.portal, its sidebar, nav and KPI tiles)
   went with the "Your studio dashboard" section. What survives is what the
   §28 marketing console still uses: the button, the table, the status pill
   and the bar. */
.portal-btn{font-size:11.5px;padding:8px 13px;border-radius:8px;border:1px solid var(--rule);color:var(--ink-soft);}
.portal-btn.p{background:var(--clay);color:#fff;border-color:transparent;font-weight:550;}
.portal-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.portal-tbl th{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  text-align:left;padding:10px;border-bottom:1px solid var(--rule);}
.portal-tbl td{padding:12px 10px;border-bottom:1px solid var(--rule-soft);color:var(--ink-soft);}
.portal-tbl tr:last-child td{border-bottom:0;}
.portal-tbl .nm{color:var(--ink);font-weight:550;}
.portal-tbl .em{display:block;font-size:11px;color:var(--faint);}
.tagx{display:inline-block;font-size:10px;padding:3px 9px;border-radius:20px;border:1px solid;}
.t-hot{background:var(--clay-wash);border-color:rgba(184,115,74,.35);color:var(--clay);}
.t-ok{background:var(--sage-wash);border-color:rgba(125,139,106,.35);color:var(--sage);}
.t-wait{background:var(--sand);border-color:var(--rule);color:var(--muted);}
.bar{height:5px;border-radius:4px;background:var(--sand-deep);overflow:hidden;min-width:56px;}
.bar i{display:block;height:100%;border-radius:4px;background:var(--clay);}

/* ---------- 18. Forms ---------- */
.field{margin-bottom:20px;}
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:9px;color:var(--muted);}
.field input,.field textarea,.field select{width:100%;padding:15px 17px;border-radius:12px;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink);font-size:16px;transition:var(--t);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--clay);
  background:var(--card);box-shadow:0 0 0 4px var(--clay-wash);}
.field textarea{resize:vertical;min-height:120px;}
.field ::placeholder{color:var(--faint);}
.form-note{font-size:12.5px;color:var(--muted);margin-top:14px;}
.form-ok{display:none;text-align:center;padding:44px 20px;}
.form-ok.on{display:block;}
.form-ok .tick{width:56px;height:56px;border-radius:50%;background:var(--sage);display:grid;
  place-items:center;margin:0 auto 22px;color:#fff;}
.form-ok .tick svg{width:25px;height:25px;}

/* ---------- 19. Footer ---------- */
/* The bottom padding clears the fixed .float-app pill (48px tall, 20px from the
   bottom edge), which sat on top of the last footer row at full scroll. That
   overlap predates the cross-links added 2026-08-20 — it was already hiding
   the tagline before it started hiding those. */
.foot{background:var(--sand);border-top:1px solid var(--rule);
  padding-block:clamp(56px,6vw,80px) clamp(78px,7vw,96px);}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,4vw,56px);margin-bottom:52px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot h2{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px;}
.foot li{margin-bottom:12px;}
.foot li a{font-size:15px;color:var(--ink-soft);transition:var(--t);}
.foot li a:hover{color:var(--clay);}
.foot-btm{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:30px;
  border-top:1px solid var(--rule);font-size:13.5px;color:var(--muted);}
/* Cross-links to the sibling product and to the chooser at the root. Added
   2026-08-20 when both sites moved under one domain; the footer had never
   carried an anchor before, so there was no style for one. */
.foot-btm a{color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:1px;transition:var(--t);}
.foot-btm a:hover{color:var(--clay);border-color:currentColor;}

/* ---------- 20. Motion — calm, slower than the platform site ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:opacity,transform;}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal="left"]{transform:translateX(-26px);}
[data-reveal="right"]{transform:translateX(26px);}
/* ⚠️ A lateral reveal must not push a full-width column past the viewport.
   Below 960px .split is a single column, so "from the right" carries no meaning
   anyway — and the 26px push transiently widened the document. A position:fixed
   overlay (.mobile, inset:78px 0 0) then sized itself against that wider box and
   never gave it back: measured 383px against a 375px viewport, for the life of
   the page. Vertical only down here. */
@media(max-width:960px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(22px);}
}
[data-reveal="scale"]{transform:scale(.975);}
[data-stagger] > *{opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);}
[data-stagger].in > *{opacity:1;transform:none;}

/* ---------- 21. Utilities ---------- */
.center{text-align:center;}
.mt-s{margin-top:14px;} .mt{margin-top:26px;} .mt-l{margin-top:44px;} .mt-xl{margin-top:68px;}
.mb{margin-bottom:26px;} .rel{position:relative;}
.flex{display:flex;} .ai-c{align-items:center;} .gap{gap:14px;} .wrapf{flex-wrap:wrap;}
.rule{height:1px;background:var(--rule);margin-block:clamp(44px,5vw,72px);}
.hide-m{display:initial;} @media(max-width:720px){.hide-m{display:none;}}

/* ---------- 22. Hero film ----------
   Sits in the slot the rotator used to occupy, so it inherits the same 3/2
   frame and the same radius as `.ba` and the hero grid needs no change. */
.film{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);
  box-shadow:0 26px 60px -30px rgba(60,45,32,.42);aspect-ratio:3/2;background:var(--sand-deep);}
.film video.film-loop{width:100%;height:100%;object-fit:cover;display:block;}

/* The play control covers the whole frame: the loop carries no controls of its
   own, so anywhere on the film should open the film. */
.film-play{position:absolute;inset:0;width:100%;display:flex;align-items:flex-end;
  justify-content:flex-start;gap:0;padding:22px;cursor:pointer;
  background:linear-gradient(to top,rgba(28,22,17,.5) 0%,rgba(28,22,17,.14) 34%,rgba(28,22,17,0) 62%);
  transition:background .4s var(--ease);}
.film-play:hover{background:linear-gradient(to top,rgba(28,22,17,.62) 0%,rgba(28,22,17,.2) 40%,rgba(28,22,17,.03) 70%);}
.film-play .fp-ic{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;margin-right:15px;
  box-shadow:0 8px 24px -8px rgba(28,22,17,.5);transition:transform .4s var(--ease);}
.film-play:hover .fp-ic{transform:scale(1.07);}
.film-play .fp-ic svg{width:19px;height:19px;color:var(--clay);margin-left:2px;}
.film-play .fp-t{text-align:left;color:#fff;font-size:16px;font-weight:600;line-height:1.25;
  text-shadow:0 1px 12px rgba(20,15,11,.55);}
.film-play .fp-m{display:block;font-size:12.5px;font-weight:500;opacity:.82;margin-top:3px;
  letter-spacing:.04em;}
@media(max-width:560px){
  .film-play{padding:16px;}
  .film-play .fp-ic{width:44px;height:44px;margin-right:12px;}
  .film-play .fp-t{font-size:14.5px;}
}

/* ---------- 23. Film dialog ---------- */
.film-modal{border:0;padding:0;background:transparent;max-width:min(1180px,94vw);width:100%;
  overflow:visible;}
.film-modal::backdrop{background:rgba(24,19,15,.82);backdrop-filter:blur(3px);}
.film-modal video{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);}
.film-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;
  transition:background .3s var(--ease);}
.film-close:hover{background:#fff;}
.film-close svg{width:17px;height:17px;color:var(--ink);}
@media(max-width:720px){.film-close{top:-42px;}}

/* ---------- 24. Hero headline accent ----------
   The hero headline is two sentences: the cost already sunk, then the promise.
   The second one carries clay so the eye lands on the payoff, the way the
   platform site tints its second clause. Italic because that is this site's
   own emphasis device — no gradient text anywhere here. */
.h-hero .ac{color:var(--clay);font-style:italic;}

/* ---------- 25. The Lexivo path ----------
   A rail with five stops. The node sits ON the rail, so the line reads as one
   continuous journey rather than five unrelated cards. */
.path{position:relative;display:grid;gap:clamp(20px,2.6vw,30px);}
.path::before{content:'';position:absolute;left:27px;top:20px;bottom:20px;width:1px;
  background:var(--rule);}
.step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:clamp(16px,2vw,26px);
  align-items:start;}
.step-node{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--clay-wash);border:1px solid var(--rule);color:var(--clay);
  position:relative;z-index:1;transition:var(--t);}
.step-node svg{width:21px;height:21px;}
.step:hover .step-node{border-color:var(--clay);transform:translateY(-2px);}
.step-body{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(22px,2.8vw,32px);transition:var(--t);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(20px,2.6vw,34px);
  align-items:center;}
.step:hover .step-body{box-shadow:var(--shadow-sm);}

/* Each step earns a picture of the thing it claims, not a decorative one. */
.step-media{display:grid;gap:12px;}
.step-media > img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.step-cap{font-size:12.5px;line-height:1.5;color:var(--faint);text-align:center;}
/* four saved ideas, none of them theirs */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-radius:var(--r);overflow:hidden;}
.tiles img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);}
.step-n{display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px;}
.step-body p{color:var(--ink-soft);font-size:15.5px;line-height:1.72;margin-top:14px;max-width:62ch;}
.step-meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-soft);
  display:grid;gap:9px;}
.step-meta div{font-size:14.5px;line-height:1.6;color:var(--muted);padding-left:18px;position:relative;}
.step-meta div::before{content:'▸';position:absolute;left:0;color:var(--clay);opacity:.55;font-size:11px;
  top:.35em;}

/* the hinge — the one step that decides the sale, so it is the only one tinted */
.step.key .step-node{background:var(--clay);border-color:var(--clay);color:#fff;}
.step.key .step-body{background:var(--clay-wash);border-color:rgba(184,115,74,.4);}
.step.key .step-n{color:var(--clay);}

/* the outcome — sage, so the eye finishes on the signed project */
.step.done .step-node{background:var(--sage-wash);border-color:rgba(125,139,106,.42);color:var(--sage);}
.step.done .step-meta div::before{color:var(--sage);}

/* The media column costs more than it gives once the text drops under ~34ch. */
@media(max-width:980px){
  .step-body{grid-template-columns:1fr;}
  .step-media{max-width:420px;}
}

@media(max-width:720px){
  .path::before{display:none;}
  .step{grid-template-columns:1fr;gap:0;}
  .step-node{width:46px;height:46px;margin-bottom:-23px;margin-left:20px;background:var(--card);}
  .step.key .step-node,.step.done .step-node{background:var(--clay);}
  .step.done .step-node{background:var(--sage-wash);}
  .step-body{padding-top:38px;}
}

/* 26. App walkthrough (.apprun / .phone) was removed with the "Inside the app"
   section. The screens it used are still on disk at assets/img/app/*.webp. */

/* ---------- 28. App marketing console ----------
   Three panels standing in for the marketing platform. Deliberately drawn in
   this site's own palette rather than screenshotted: the real portal is a dark
   SaaS interface and would read as a different product on a plaster page.
   Reuses .portal-tbl, .bar, .tagx and .portal-btn from §17 — same mock language
   as the studio dashboard, so the two feel like one system. */
.console{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:start;}
@media(max-width:1000px){.console{grid-template-columns:1fr;max-width:620px;margin-inline:auto;}}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,26px);box-shadow:var(--shadow-sm);}
.panel-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:18px;}
.panel-h h3,.panel-h h4{font-size:16px;line-height:1.3;}
.panel-h .portal-btn{flex:none;display:inline-flex;align-items:center;gap:6px;}
.panel .tiny{border-top:1px solid var(--rule-soft);padding-top:14px;}
/* A third of the page width is tight for a table: without this the search terms
   wrap to three lines each and this panel stands twice as tall as its siblings. */
.panel .portal-tbl th,.panel .portal-tbl td{padding:11px 4px;}
.panel .portal-tbl th{letter-spacing:.08em;}
.panel .portal-tbl th:not(:first-child),.panel .portal-tbl td:not(:first-child){
  text-align:right;white-space:nowrap;width:1%;}

/* follow-up funnel */
.fun li{display:grid;grid-template-columns:1fr 74px 34px;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:13px;color:var(--ink-soft);}
.fun li:last-child{border-bottom:0;}
.fun li b{font-family:var(--display);font-size:17px;color:var(--ink);text-align:right;font-weight:500;}
.fun li:last-child .bar i{background:var(--sage);}

/* one-click send to an existing lead list */
.blast-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-soft);padding-bottom:12px;border-bottom:1px solid var(--rule);}
.blast-top b{font-family:var(--display);font-size:16px;font-weight:500;}
.blast-top .tagx{font-size:9.5px;}
.blast-list li{padding:11px 0;border-bottom:1px solid var(--rule-soft);}
.blast-list .nm{display:block;font-size:13px;font-weight:550;color:var(--ink);}
.blast-list .em{display:block;font-size:11.5px;color:var(--faint);margin-top:2px;}
.blast-more{padding-top:11px;font-size:11.5px;color:var(--muted);}

/* ---------- 27. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  [data-reveal],[data-stagger] > *{opacity:1!important;transform:none!important;}
}

/* Shown only when /contact.php refuses the message. Previously any failure was
   invisible: the success panel appeared regardless and the enquiry vanished. */
.form-err{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;
  color:#8d2f2f;background:#fbeceb;border:1px solid #f0cfcd;}