/* ==========================================================================
   Lexivo for Interior Designers — warm light editorial system
   Deliberately unlike the platform site: no dark glass, no gradient text,
   no monospace. Designers judge this the way clients judge their portfolio.
   ========================================================================== */

/* ---------- 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:#FAF7F2;      /* warm plaster */
  --sand:#F2EDE5;       /* alternating band */
  --sand-deep:#EAE2D6;
  --card:#FFFFFF;
  --ink:#2A2724;        /* warm near-black, never pure */
  --ink-soft:#6B635A;
  --muted:#8E857A;
  --faint:#A9A096;
  --rule:#E3DBD0;
  --rule-soft:#EFE8DF;

  --clay:#B8734A;
  --clay-deep:#9C5A38;
  --clay-wash:#F6EDE6;
  --sage:#7D8B6A;
  --sage-wash:#EEF1E9;
  --brass:#C0954A;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --arch:220px 220px 18px 18px;

  --pad:clamp(22px,5vw,40px);
  --maxw:1180px;
  --sec:clamp(88px,11vw,164px);

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

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

  --display:'Fraunces',Georgia,serif;
  --font:'Inter',-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);}
.split{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(36px,4.5vw,58px);line-height:1.08;letter-spacing:-.024em;}
/* 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(29px,3.4vw,42px);}
.h2{font-size:clamp(26px,3vw,38px);}
.h3{font-size:clamp(21px,2.3vw,28px);line-height:1.25;}
.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;
  aspect-ratio:3/2;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;}
.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 — the same reason .tag-tr opts out. */
.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);}
@media(max-width:900px){.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);}
[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;}
}

/* ---------- 22b. Sample-app picker ----------
   There are two live apps now — a web build and an iPhone build — so every
   "sample the app" affordance opens this instead of going straight to one of
   them. It reuses the film dialog's backdrop treatment below so the two read as
   one component; only the panel differs.
   ⚠️ Shared by all four pages, which is why it lives here and not in a page's
   inline <style>. The float pill's reveal script is still inline, because that
   one genuinely is index-only. */
/* ⚠️ `margin:auto` is not decoration — it is what CENTRES a modal dialog. The
   reset at the top of this file (`*{margin:0;padding:0}`) overrides the UA's
   own `dialog:modal{margin:auto}`, so without this the panel pins to the top
   left corner of the viewport. §23's .film-modal has the same latent bug; it
   was removed from the markup before anybody saw it. */
.appdlg{border:0;padding:0;background:transparent;max-width:min(520px,92vw);width:100%;
  margin:auto;}
.appdlg::backdrop{background:rgba(24,19,15,.82);backdrop-filter:blur(3px);}
.appdlg-in{background:var(--paper);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,38px);
  box-shadow:0 40px 90px -30px rgba(40,32,24,.55);position:relative;}
.appdlg h2{font-family:var(--display);font-size:clamp(21px,2.4vw,26px);letter-spacing:-.02em;
  margin-bottom:8px;}
.appdlg .sub{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:22px;}
.appdlg-opts{display:grid;gap:12px;}
/* Each option is a full row, not a button in a row: the whole card is the
   target, because on a phone two small side-by-side buttons is a mis-tap. */
.appdlg-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--rule);background:var(--card);transition:var(--t);text-align:left;}
.appdlg-opt:hover{border-color:var(--clay);box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.appdlg-opt .ico{flex:none;}
.appdlg-opt b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:2px;}
.appdlg-opt span{display:block;font-size:13px;color:var(--muted);line-height:1.5;}
.appdlg-opt svg.go{width:16px;height:16px;margin-left:auto;flex:none;color:var(--clay);}
.appdlg-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--rule);background:var(--paper);display:grid;place-items:center;
  cursor:pointer;transition:var(--t);}
.appdlg-close:hover{background:var(--card);border-color:var(--clay);}
.appdlg-close svg{width:15px;height:15px;color:var(--ink);}
@media(prefers-reduced-motion:reduce){.appdlg-opt:hover{transform:none;}}

/* ---------- 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;}