/* ==========================================================================
   Lexivo for Renovations — cool editorial system
   Forked from the interiors stylesheet and re-toned. That site used warm
   plaster, terracotta and sage because designers judge a page the way clients
   judge a portfolio. This reader does not: a renovation company owner is
   judging competence and money, and a magazine palette reads as precious.
   So the ground is cool concrete, the ink is slate, the primary accent is an
   engineered blue-teal and the secondary is a timber amber. Structure, type
   scale and every component are unchanged — only tone.
   ========================================================================== */

/* ---------- 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(--steel);outline-offset:3px;border-radius:3px;}
::selection{background:rgba(31,92,107,.18);}

/* ---------- 2. Tokens ---------- */
:root{
  --paper:#F7F7F4;      /* cool concrete, not warm plaster */
  --sand:#EDEEE9;       /* alternating band */
  --sand-deep:#E1E3DC;
  --card:#FFFFFF;
  --ink:#1B242C;        /* slate near-black, never pure */
  --ink-soft:#525E68;
  --muted:#78838C;
  --faint:#9AA4AC;
  --rule:#DDE0DA;
  --rule-soft:#EBEDE8;

  --steel:#1F5C6B;      /* primary — engineered blue-teal */
  --steel-deep:#164450;
  --steel-wash:#E9F0F1;
  --amber:#B0721A;      /* secondary — timber and brass */
  --amber-wash:#F8F0E1;
  --brass:#9C7B3A;

  --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(56px,7vw,104px);   /* section padding. Applied top AND bottom,
        so every boundary is twice this. The interiors value (11vw) put 281px
        of nothing between sections; this lands at 179px. */

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

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

  --display:'Newsreader',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(40px,5vw,72px);}
.band{background:var(--sand);}
.band-soft{background:linear-gradient(180deg,var(--paper),var(--sand) 45%,var(--paper));}
.band-clay{background:var(--steel-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 ---------- */
/* No font-variation-settings here. The interiors sheet carried 'SOFT' and 'WONK',
   which are Fraunces-only axes — Newsreader has neither, so they were dead
   declarations naming a typeface this site does not load. */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.12;
  color:var(--ink);}
/* Newsreader sets a little narrower than Fraunces did, but these still run
   smaller than the platform site's scale so headings hold 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(--steel);margin-bottom:22px;}
.label::before{content:'';width:26px;height:1px;background:var(--steel);opacity:.5;flex:none;}
.label.plain::before{display:none;}
.label.sage{color:var(--amber);} .label.sage::before{background:var(--amber);}

.head{max-width:720px;margin-bottom:clamp(28px,3.4vw,48px);}
.head.center{margin-inline:auto;text-align:center;}
.head.center .label{justify-content:center;}
.head .lede{margin-top:18px;}
.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(--steel);color:#fff;box-shadow:0 10px 26px -14px var(--steel);}
.btn-1:hover{background:var(--steel-deep);box-shadow:0 16px 34px -14px var(--steel);transform:translateY(-1px);}
.btn-2{background:transparent;color:var(--ink);border:1px solid var(--rule);}
.btn-2:hover{border-color:var(--steel);color:var(--steel);}
.btn-3{padding:6px 0;color:var(--steel);font-weight:550;position:relative;}
.btn-3::after{content:'';position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--steel);
  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(--steel);color:var(--steel);}
.chip-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber);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(--steel);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(--steel-wash);color:var(--steel);flex:none;transition:var(--t);}
.ico svg{width:21px;height:21px;}
.ico.sage{background:var(--amber-wash);color:var(--amber);}
.card:hover .ico{background:var(--steel);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(20,32,40,.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(--steel);}
.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(--steel);color:var(--steel);}
.rot-tab.on{border-color:var(--steel);color:var(--steel);background:var(--steel-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(--steel);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(247,247,244,.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(--steel);
  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. Put the button back to being a button. (Fixed on the interiors sheet
   2026-08-20; the bug forked with the stylesheet.) */
.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 ---------- */
/* The top pad has a job the others do not: it clears the fixed nav (79px).
   The floor is 108px so there is still ~29px of air under the nav at 375px. */
.hero{padding-top:clamp(108px,11.5vh,132px);padding-bottom:clamp(44px,5vw,72px);}
.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(--amber);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(--amber-wash);color:var(--amber);
  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(--steel);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(--steel-wash);border-color:rgba(31,92,107,.35);color:var(--steel);}
.t-ok{background:var(--amber-wash);border-color:rgba(176,114,26,.35);color:var(--amber);}
.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(--steel);}

/* ---------- 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(--steel);
  background:var(--card);box-shadow:0 0 0 4px var(--steel-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(--amber);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(44px,4.6vw,64px) 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(--steel);}
.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(--steel);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:12px;} .mt{margin-top:22px;} .mt-l{margin-top:34px;} .mt-xl{margin-top:48px;}
.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(20,32,40,.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(16,24,31,.5) 0%,rgba(16,24,31,.14) 34%,rgba(16,24,31,0) 62%);
  transition:background .4s var(--ease);}
.film-play:hover{background:linear-gradient(to top,rgba(16,24,31,.62) 0%,rgba(16,24,31,.2) 40%,rgba(16,24,31,.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(16,24,31,.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(--steel);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(12,19,25,.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(15,23,29,.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(--steel);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(--steel-wash);border:1px solid var(--rule);color:var(--steel);
  position:relative;z-index:1;transition:var(--t);}
.step-node svg{width:21px;height:21px;}
.step:hover .step-node{border-color:var(--steel);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(--steel);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(--steel);border-color:var(--steel);color:#fff;}
.step.key .step-body{background:var(--steel-wash);border-color:rgba(31,92,107,.4);}
.step.key .step-n{color:var(--steel);}

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

/* 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(--steel);}
  .step.done .step-node{background:var(--amber-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. */
/* stretch, not start. These three stand for ONE console, and with align-items:start
   they ended at three different heights (421/397/479) under a shared top edge,
   which reads as broken rather than as varied. Equal height plus the closing
   note pinned to the floor makes them a set. */
.console{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:stretch;}
@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);
  display:flex;flex-direction:column;}
.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{margin-top:auto;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(--amber);}

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