/* v3 */
/* ============================================================================
   OROVELL / LANDING PAGES
   The two landing pages under contact/ (modular-kitchens, modular-kitchen-
   wardrobes), rebuilt on vmmodular.com's section order (client ruling
   2026-09-16: "redo our landing pages for same structure", "optimized for
   more form and call submissions"). Generated by tools/build-lp.py.
   Loads AFTER css/orovell.css, css/chrome.css, css/forms.css and css/pile.css
   and uses only their tokens: the four brand colours at graded alphas, the
   one hairline, the 5px radius. Every rule here is prefixed lp- so the sheet
   can sit beside a page's own styles without a collision; the one exception
   is the .rail block at the end, which needs only css/chrome.css tokens and is
   also loaded by contact.html (and can be enabled on any page later).
   Surfaces down the page: hero (obsidian, the full-bleed frame under the
   site's scrim) > estimate strip (wine) > top form (obsidian) > end to end
   (linen, K&W only) > projects (obsidian) > why Orovell (linen) > the journey
   (obsidian, the card pile) > bottom form (linen) > testimonials (obsidian)
   > ISO (wine) > visit (linen) > footer.
   ========================================================================= */

/* ------------------------------------------------------------ the section */
.lp-sec{ position:relative; padding:clamp(80px,11vh,130px) var(--gut); }
.lp-sec-in{ width:100%; max-width:var(--shell); margin-inline:auto; }
.lp-head{ margin-top:14px; max-width:26ch; }
.lp-head + .frag{ margin-top:14px; }
/* the journey's heading is lifted from contact.html with its .sec-head class,
   whose 14px sits in that page's inline style: the same gap here */
.lp-sec .sec-head{ margin-top:14px; }
/* a coined word that must never break at its hyphen ("you-nique") */
.lp-nb{ white-space:nowrap; }
.lp-actions{ margin-top:clamp(30px,4vh,44px); }
/* the trust caps on a linen band: the obsidian side of the alphas */
.linen .hero-caps .cap{ color:var(--o55); }
/* the wine surface: linen type, the eyebrow at 55, the primary is the gold
   plate (chrome.css reads .band-wine) */
.lp-wine{ background:var(--wine); color:var(--linen); }
.lp-wine .eyebrow,.lp-wine .cap{ color:rgba(245,245,244,.55); }
.lp-wine .frag{ color:var(--linen-85); }
.lp-wine h2{ color:var(--linen); }

/* ---------------------------------------------------------- 0 · LP header
   The site's floating bar (chrome.css .nav) with the logo, ONE phone link in
   the centre column and the primary button. No site links, no drawer: a
   landing page keeps its visitor on the page. */
.nav-lp .nav-tel{
  display:inline-flex; align-items:center; gap:9px; justify-self:center;
  color:var(--l90); white-space:nowrap; position:relative;
}
.nav-lp .nav-tel svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.nav-lp .nav-tel::after{
  content:''; position:absolute; left:24px; right:0; bottom:-6px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav-lp .nav-tel:hover::after,.nav-lp .nav-tel:focus-visible::after{ transform:scaleX(1); }
@media (max-width:900px){
  .nav-lp{ grid-template-columns:auto minmax(0,1fr) auto; }
}
@media (max-width:640px){
  .nav-lp{ grid-template-columns:auto minmax(0,1fr); }
  .nav-lp .nav-tel{ display:none; }   /* the bottom bar carries the call */
}

/* ---------------------------------------------------------------- 1 · hero
   The ambassador frame full-bleed under the site's obsidian/wine scrim, the
   copy on the left where the scrim is densest (the subject sits right of
   centre through object-position). ~88svh at desktop; on a phone the
   picture is a framed 3:2 figure in flow ABOVE the copy, so the H1 is never
   on the picture. */
.lp-hero{
  position:relative; overflow:clip; scroll-margin-top:90px;
  min-height:88svh; display:flex; align-items:center;
  padding:clamp(120px,16vh,170px) var(--gut) clamp(70px,9vh,110px);
  background:linear-gradient(180deg,rgba(75,25,40,.06),rgba(75,25,40,.02)) var(--obsidian);
}
.lp-hero-pic{ position:absolute; inset:0; z-index:1; margin:0; }
/* the frame is 3:2 and the band wider than that, so object-position cannot
   move the subject: the picture starts 12% in at desktop instead, which
   carries the (centred) subject right of the copy; the scrim's densest stop
   hides the seam */
@media (min-width:1024px){ .lp-hero-pic{ left:12%; } }
.lp-hero-pic img{ width:100%; height:100%; object-fit:cover; object-position:var(--lp-pos,50% 50%); }
.lp-hero-pic::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.9) 16%, rgba(5,5,5,.72) 38%, rgba(5,5,5,.3) 62%, rgba(5,5,5,.14) 100%),
    linear-gradient(180deg, rgba(5,5,5,.5), transparent 32%, transparent 68%, rgba(5,5,5,.72)),
    linear-gradient(rgba(75,25,40,.16), rgba(75,25,40,.16));
}
.lp-hero-copy{ position:relative; z-index:2; width:100%; max-width:var(--shell); margin-inline:auto; }
/* client 2026-09-16: two short lines ("Transform your home with / Orovell
   interiors"), each a block at every width; the offer sits under them as
   the one-line sub */
.lp-hero-copy h1{ margin:14px 0 18px; max-width:none; font-size:clamp(28px,3.4vw,48px); line-height:1.08; }
.lp-hero-copy .h1-line{ display:block; }
@media (min-width:520px){ .lp-hero-copy .h1-line{ white-space:nowrap; } }
.lp-hero-copy .frag{ max-width:44ch; margin-top:0; }
.lp-hero-copy .hero-actions{ margin-top:26px; }
.lp-hero-copy .hero-caps{ margin-top:26px; }
@media (max-width:767px){
  .lp-hero{ min-height:0; display:block; padding:88px var(--gut) clamp(56px,8vh,80px); }
  .lp-hero-pic{ position:relative; aspect-ratio:3/2; border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--wine-12); }
  .lp-hero-pic::after{ background:linear-gradient(to top, rgba(5,5,5,.3), transparent 40%); }
  .lp-hero-copy{ padding-top:26px; }
  .lp-hero-copy h1{ max-width:none; }
}

/* ------------------------------------------------------ 2 · estimate strip
   One band on wine, the whole band a link to the top form (VM's
   .kitchen-shapes is one anchor). The button inside is a span styled by
   chrome.css; the anchor's hover drives its roll-up. */
.lp-strip{
  display:block; color:var(--linen); padding:clamp(44px,6vh,72px) var(--gut);
  transition:background-color .2s ease;
}
.lp-strip-in{
  width:100%; max-width:var(--shell); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(18px,3vw,48px); align-items:center;
}
.lp-strip h2{ max-width:34ch; }   /* two lines at desktop, never three */
.lp-strip .frag{ margin-top:12px; max-width:52ch; }
/* the sub sits on ONE line at desktop (client ruling 2026-09-16) */
@media (min-width:1024px){ .lp-strip .frag{ max-width:none; white-space:nowrap; } }
.lp-strip:hover,.lp-strip:focus-visible{ background:rgba(75,25,40,.92); outline:none; }
.lp-strip:focus-visible .btn{ outline:1px solid var(--linen); outline-offset:3px; }
@media (max-width:767px){
  .lp-strip-in{ grid-template-columns:minmax(0,1fr); }
}

/* --------------------------------------------------- 3 + 8 · form sections
   The VM question beside the full enquiry form (forms.css). The copy column
   sticks while the form scrolls; on linen (the bottom one) forms.css swaps
   its alphas by itself. */
.lp-form{ scroll-margin-top:90px; }
/* the card carries api/enquiry.js's bounce anchor (#enquire / #enquire-2) */
.lp-form .form-card{ scroll-margin-top:90px; }
.lp-form-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,64px); align-items:start;
}
.lp-form-copy{ position:sticky; top:100px; }
.lp-form-copy h2{ margin-top:14px; max-width:18ch; }
.lp-form-copy .frag{ margin-top:16px; max-width:44ch; }
/* the sub sits on ONE line at desktop (client ruling 2026-09-16); the copy
   is kept short enough for the column in tools/build-lp.py FORM_SUB */
@media (min-width:1024px){ .lp-form-copy .frag{ max-width:none; white-space:nowrap; } }
.lp-form-copy .hero-caps{ margin-top:26px; }
.lp-form .form-card .form-head h2{ max-width:22ch; }
/* the line under the button: plate caps on 3px gold squares, the whole row
   after the button; the privacy note keeps its own line */
.lp-form .form-actions{ align-items:flex-start; flex-direction:column; gap:14px; }
.lp-form .form-actions .hero-caps{ margin-top:0; }
.lp-form .form-actions .form-privacy{ max-width:none; }
@media (max-width:1023px){
  .lp-form-grid{ grid-template-columns:1fr; }
  .lp-form-copy{ position:relative; top:0; }
}

/* ---------------------------------------------------------- 4 · end to end
   VM's tick list as plate caps on 3px gold squares, one row that wraps */
.lp-list{ margin-top:clamp(30px,4vh,44px); display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; }
.lp-list .cap{ font-size:12px; color:var(--o72); }
/* an item with a page of its own (/interiors, SEO Phase 1A) is a link: the
   1px gold rule on hover, the site's text-link signal, never a button */
.lp-list a.cap{ position:relative; }
.lp-list a.cap::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.lp-list a.cap:hover::after,.lp-list a.cap:focus-visible::after{ transform:scaleX(1); }
.lp-list i{ width:3px; height:3px; background:var(--gold); flex:none; display:block; }
.lp-list i:last-child{ display:none; }

/* ------------------------------------------------------------ 5 · projects
   The listing's card grammar (projects.html): the picture in a hairline
   frame at 5px, the name under it, nothing else. No hover zoom, no shadow:
   the frame warms and the name underlines. */
.lp-proj-grid{
  --gap:clamp(16px,2.2vw,32px); margin-top:clamp(36px,5vh,60px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--gap) * 1.4) var(--gap);
}
.lp-proj{ display:block; color:var(--linen); }
.lp-proj figure{
  margin:0; aspect-ratio:3/2; overflow:hidden; border-radius:var(--r);
  outline:1px solid var(--hair); outline-offset:-1px; background:var(--wine-12); transition:outline-color .4s;
}
.lp-proj img{ width:100%; height:100%; object-fit:cover; }
.lp-proj h3{ font-size:clamp(16px,1.35vw,20px); margin-top:16px; display:inline-block; position:relative; }
.lp-proj h3::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.lp-proj:hover figure,.lp-proj:focus-visible figure{ outline-color:var(--gold-60); }
.lp-proj:hover h3::after,.lp-proj:focus-visible h3::after{ transform:scaleX(1); }
.lp-proj:focus-visible{ outline:1px solid var(--gold); outline-offset:6px; border-radius:var(--r); }
.linen .lp-proj{ color:var(--obsidian); }
.linen .lp-proj figure{ outline-color:var(--hair-d); background:rgba(75,25,40,.06); }
.linen .lp-proj:hover figure,.linen .lp-proj:focus-visible figure{ outline-color:var(--wine-70); }
@media (max-width:1023px){ .lp-proj-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .lp-proj-grid{ grid-template-columns:minmax(0,1fr); } }

/* -------------------------------------------------------- 6 · why Orovell
   Four cards on linen, a small line glyph in wine (a fine accent on linen,
   rule 9), the title, the VM copy. No portraits, no image files. */
.lp-why-grid{ margin-top:clamp(36px,5vh,60px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.lp-why{
  border:1px solid var(--hair-d); border-radius:var(--r); background:rgba(5,5,5,.025);
  padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; gap:14px; transition:border-color .4s;
}
.lp-why:hover{ border-color:var(--wine-70); }
.lp-why svg{ width:28px; height:28px; display:block; fill:none; stroke:var(--wine); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.lp-why h3{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:0;
  font-size:clamp(16px,1.3vw,19px); line-height:1.2; color:var(--obsidian); margin-top:6px;
}
.lp-why p{ font-size:14px; line-height:1.75; color:var(--o72); }
@media (max-width:1023px){ .lp-why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .lp-why-grid{ grid-template-columns:minmax(0,1fr); } }

/* ------------------------------------------------------------- 7 · journey
   The card pile: every rule lives in css/pile.css; --pile-nav is the nav
   band the sticky stage sits under (19px padding + 22px logo + 19px) */
#journey{ --pile-nav:72px; }

/* --------------------------------------------------------- 9 · testimonials
   The home's review card grammar (css/vc.css .rev-card): a wine gradient
   over obsidian at .86, the one hairline, the stars at label rank in gold
   (the rating graphic, never a number), the name and "Google review". Six
   cards, three across. No avatars, no circles. */
.lp-rev-grid{
  list-style:none; margin:clamp(36px,5vh,60px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px);
}
.lp-rev{
  border:1px solid var(--hair); border-radius:var(--r);
  background:linear-gradient(rgba(75,25,40,.34), rgba(75,25,40,.16)), rgba(5,5,5,.86);
  padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column;
}
.lp-rev-stars{ font-size:11px; letter-spacing:.14em; color:var(--gold); line-height:1.6; }
.lp-rev blockquote{ margin:16px 0 0; color:var(--l90); font-size:15px; line-height:1.7; flex:1; quotes:none; }
.lp-rev-who{ margin-top:18px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.lp-rev-who strong{ font-weight:400; color:var(--linen); font-size:14px; }
@media (max-width:1023px){ .lp-rev-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .lp-rev-grid{ grid-template-columns:minmax(0,1fr); } }

/* ----------------------------------------------------------------- 10 · ISO
   A wine band: the VM heading, the paragraph in a prose measure, one line
   button to the Standard page */
.lp-iso h2{ max-width:22ch; }
.lp-iso .frag{ margin-top:18px; max-width:60ch; }

/* --------------------------------------------------------------- 11 · visit
   contact.html's two showroom cards (orovell.css .visit-grid, .visit-card,
   .visit-map), the address as a small line, the contact lines */
.lp-visit .visit-card .addr{ display:block; margin-top:12px; font-size:12.5px; line-height:1.7; color:var(--o55); }
.lp-visit .visit-card .reach-lines{ margin-top:14px; font-size:14px; line-height:1.8; color:rgba(5,5,5,.65); }
.lp-visit .visit-card .reach-lines a{ color:var(--obsidian); }
.lp-visit h2{ max-width:26ch; }

/* the .rail block moved to css/chrome.css (site-wide, client 2026-09-16) */
@media (prefers-reduced-motion:reduce){ .lp-strip{ transition-duration:.001ms !important; } }