/* ==========================================================================
   Val de Vie Blinds — winelands-estate, light-first.
   Canvas: bone/parchment #F7F2E7 · Ink: warm charcoal #211C17 · Accent: brass #B08B4F
   Layout signature: sunlit parchment canvas throughout, ink used sparingly as
   two anchor bands (hero + footer) with the CTA and the signature scene also
   dropped to ink — the page reads like a wine-estate ledger, not a brochure.
   ========================================================================== */

:root{
  --canvas:#F7F2E7;
  --parch:#F0E6D1;
  --ink:#211C17;
  --ink-deep:#17130F;
  --ink-soft:#2B241D;
  --brass:#B08B4F;
  --brass-deep:#7f6b4e;
  --white:#FFFFFF;

  --on-ink:#ECE4D6;
  --on-ink-mute:#C2B6A2;
  --on-canvas-mute:#6B5F4F;

  --line-dark:rgba(236,228,214,.15);
  --line-light:rgba(33,28,23,.14);

  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;

  --pad:clamp(68px,9vw,104px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.08;margin:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px;border-radius:1px}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}
.wrap--tight{max-width:900px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- bands ------------------------------------------------------- */
.band{padding:var(--pad) 0;position:relative;background:var(--canvas)}
.band--parch{background:var(--parch)}
.band--deep{background:var(--ink-deep);color:var(--on-ink)}
.band--deep .eyebrow{color:var(--brass)}
.band--deep .lede,.band--deep .muted{color:var(--on-ink-mute)}

.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass-deep);margin:0 0 18px;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none;opacity:.75}

.h-sec{font-size:clamp(2.1rem,4.1vw,3.35rem)}
.h-big{font-size:clamp(2.4rem,5vw,4.1rem)}
.lede{font-size:1.075rem;color:var(--on-canvas-mute);max-width:64ch}
.muted{color:var(--on-canvas-mute)}
.rule{height:1px;background:var(--brass);opacity:.6;transform-origin:left center;margin:26px 0 0;max-width:180px}

/* ---------- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 30px;font-family:var(--sans);font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:0;
  border:1.5px solid var(--brass);background:var(--brass);color:#231C13;cursor:pointer;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),transform .26s var(--ease);
}
.btn:hover{background:var(--brass-deep);border-color:var(--brass-deep);color:#F6F1E6;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(33,28,23,.36)}
.btn--ghost:hover{background:rgba(33,28,23,.06);border-color:var(--ink);color:var(--ink)}
.band--deep .btn--ghost{color:var(--on-ink);border-color:rgba(236,228,214,.42)}
.band--deep .btn--ghost:hover{background:rgba(236,228,214,.08);border-color:var(--on-ink);color:var(--on-ink)}
.btn svg{width:15px;height:15px;flex:none}

.arrow{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.79rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-deep);
  transition:gap .24s var(--ease),color .24s var(--ease);
}
.arrow svg{width:15px;height:15px;flex:none}
.arrow:hover{gap:15px;color:var(--ink)}
.band--deep .arrow{color:var(--brass)}
.band--deep .arrow:hover{color:var(--on-ink)}

/* ---------- navigation --------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(23,19,15,.30);border-bottom:1px solid transparent;
  transition:background .38s var(--ease),border-color .38s var(--ease),backdrop-filter .38s var(--ease),padding .38s var(--ease);
  padding:14px 0;backdrop-filter:blur(3px);
}
.nav.is-solid{background:rgba(23,19,15,.96);border-bottom-color:var(--line-dark);backdrop-filter:blur(10px);padding:6px 0}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--on-ink)}
.brand svg{width:38px;height:38px;flex:none}
.brand__t{display:block}
.brand b{font-family:var(--serif);font-weight:600;font-size:1.24rem;letter-spacing:.005em;line-height:1.1;display:block}
.brand i{display:block;font-style:normal;font-size:.575rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-top:3px}
.nav__menu{display:flex;align-items:center;gap:30px}
.nav__menu a{
  text-decoration:none;font-size:.79rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-ink);opacity:.86;position:relative;padding:6px 0;transition:opacity .24s var(--ease),color .24s var(--ease);
}
.nav__menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav__menu a:hover{opacity:1}
.nav__menu a:hover::after{transform:scaleX(1)}
.nav__menu a.nav__cta{border:1.4px solid var(--brass);padding:10px 20px;color:var(--brass);opacity:1}
.nav__menu a.nav__cta::after{display:none}
.nav__menu a.nav__cta:hover{background:var(--brass);color:#231C13}
.nav__toggle{display:none;background:none;border:1px solid rgba(236,228,214,.36);width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center;padding:0;transition:border-color .24s var(--ease)}
.nav__toggle:hover{border-color:var(--brass)}
.nav__toggle span{display:block;width:20px;height:1.5px;background:var(--on-ink);position:relative;transition:background .2s}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--on-ink);transition:transform .28s var(--ease)}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:900px){
  .nav{padding:10px 0}
  .nav.is-solid{padding:6px 0}
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;top:100%;left:0;right:0;background:rgba(23,19,15,.985);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;
    border-bottom:1px solid var(--line-dark);
    display:none;
  }
  .nav__menu.is-open{display:flex}
  .nav__menu a{padding:15px 0;border-bottom:1px solid var(--line-dark);opacity:.95}
  .nav__menu a.nav__cta{margin-top:16px;text-align:center;justify-content:center;border-bottom:1.4px solid var(--brass)}
}

/* ---------- hero: the estate plaque -------------------------------------
   A full-bleed photo, its bottom third folding into a solid ink band below.
   The headline sits in the seam between the two: its opening lines rest on
   the photo (inside a dark scrim), its closing line is pulled DOWN, by
   negative margin, onto the solid ink plaque underneath — the same ink
   colour either side of the seam, so the type reads as one unbroken block
   even though it is physically standing on two different surfaces. That
   is the "oversized display type overlapping the image edge" brief. ---- */
.hero{position:relative;background:var(--ink-deep)}
.hero__frame{position:relative;height:min(84vh,800px);min-height:520px;overflow:hidden}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(23,19,15,.97) 0%,rgba(23,19,15,.72) 20%,rgba(23,19,15,.22) 44%,rgba(23,19,15,.05) 58%,transparent 72%),
    linear-gradient(to bottom,rgba(23,19,15,.5) 0%,transparent 26%);
}
.hero__plaque{position:relative;background:var(--ink-deep);padding-bottom:var(--pad)}
.hero__head-wrap{margin-top:clamp(-172px,-19vw,-96px);position:relative;z-index:3;padding:0 0 8px}
.hero__col{max-width:760px}
.hero .eyebrow{color:var(--brass);margin-bottom:16px}
.hero h1{
  font-size:clamp(2.5rem,6vw,5.15rem);line-height:1.05;margin:0;color:var(--canvas);
  text-wrap:balance;
}
.hero h1 .w{display:inline-block}
.hero__sub{font-size:1.1rem;color:#DCD1BE;max-width:54ch;margin:26px 0 32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px}
.trust{display:flex;flex-wrap:wrap;gap:12px 34px;list-style:none;padding:0;margin:0;border-top:1px solid var(--line-dark);padding-top:22px}
.trust li{display:flex;align-items:center;gap:10px;font-size:.83rem;letter-spacing:.04em;color:var(--on-ink-mute)}
.trust svg{width:16px;height:16px;flex:none;stroke:var(--brass);fill:none;stroke-width:1.9}

@media(max-width:700px){
  .hero__frame{height:64vh;min-height:440px}
  .hero__head-wrap{margin-top:clamp(-96px,-24vw,-64px)}
}

/* ---------- marquee ------------------------------------------------------ */
.marquee{background:var(--ink-deep);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);overflow:hidden;padding:15px 0}
.marquee__track{display:flex;width:max-content;animation:mq 50s linear infinite}
.marquee span{
  font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--on-ink-mute);
  padding:0 30px;white-space:nowrap;display:inline-flex;align-items:center;gap:30px;
}
.marquee span::after{content:"";width:5px;height:5px;background:var(--brass);border-radius:50%;display:inline-block;opacity:.85}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- photo frames -------------------------------------------------- */
.frame{position:relative;padding:9px;background:var(--white);box-shadow:0 44px 90px -54px rgba(33,28,23,.5);border:1px solid var(--line-light)}
.frame > img{width:100%;height:auto;object-fit:cover;display:block}
.frame figcaption{
  position:absolute;left:9px;right:9px;bottom:9px;padding:16px 18px;
  background:linear-gradient(to top,rgba(23,19,15,.92),rgba(23,19,15,0));
  font-size:.8rem;letter-spacing:.05em;color:#E9E1D2;
}
.frame figcaption b{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;letter-spacing:0;margin-bottom:3px;color:#FBF7EE}
.band--deep .frame{background:var(--ink-soft);border-color:var(--line-dark)}

/* ---------- editorial split ------------------------------------------------ */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,70px);align-items:center}
.split--flip .split__media{order:2}
.editorial{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:end}
.editorial .frame:last-child{margin-bottom:44px}
@media(max-width:860px){.split,.editorial{grid-template-columns:1fr}.split--flip .split__media{order:0}.editorial .frame:last-child{margin-bottom:0}}

/* ---------- product grid --------------------------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:26px;margin-top:52px}
.pgrid--trio{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pcard{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-light);
  transition:border-color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);
}
.pcard:hover{border-color:rgba(176,139,79,.6);transform:translateY(-4px);box-shadow:0 34px 60px -42px rgba(127,95,53,.5)}
.pthumb{overflow:hidden;position:relative;flex:none;aspect-ratio:4/3;background:var(--parch);display:flex;align-items:center;justify-content:center}
.pthumb svg{width:64%;height:64%;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease)}
.pthumb svg .acc{stroke:var(--brass-deep)}
.pcard:hover .pthumb svg{transform:scale(1.07)}
.pcard__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.pcard h3{font-size:1.2rem}
.pcard p{font-size:.9rem;color:var(--on-canvas-mute);margin:0;flex:1 1 auto}
.pcard .arrow{margin-top:6px;font-size:.72rem}

/* ---------- signature scene: The Vine Line ------------------------------- */
.vine{background:var(--ink-deep);position:relative;overflow:hidden}
.vine__stage{margin-top:44px;border:1px solid var(--line-dark);background:linear-gradient(170deg,#231D16,#17130F);position:relative}
.vine__stage svg{width:100%;height:auto;display:block}
.vine__legend{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:22px;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-ink-mute)}
.vine__legend b{color:var(--brass);font-weight:700;font-family:var(--sans)}

/* ---------- process --------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:0;margin-top:52px;border-top:1px solid var(--line-light)}
.step{padding:34px 30px 34px 0;border-right:1px solid var(--line-light)}
.step:last-child{border-right:0}
.step__n{font-family:var(--serif);font-size:2.5rem;color:var(--brass);line-height:1;display:block;margin-bottom:14px}
.step h3{font-size:1.2rem;margin-bottom:9px}
.step p{font-size:.92rem;color:var(--on-canvas-mute);margin:0}
@media(max-width:860px){.step{border-right:0;border-bottom:1px solid var(--line-light);padding:28px 0}.step:last-child{border-bottom:0}}

/* ---------- area chips ------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.chip{
  display:inline-flex;align-items:center;gap:11px;padding:13px 22px;text-decoration:none;
  border:1px solid var(--line-light);font-size:.83rem;letter-spacing:.07em;color:var(--ink);background:var(--white);
  transition:border-color .26s var(--ease),background .26s var(--ease),transform .26s var(--ease);
}
.band--deep .chip{border-color:var(--line-dark);color:var(--on-ink);background:transparent}
.chip::after{content:"→";color:var(--brass-deep);transition:transform .26s var(--ease)}
.band--deep .chip::after{color:var(--brass)}
.chip:hover{border-color:var(--brass);background:rgba(176,139,79,.09);transform:translateY(-2px)}
.chip:hover::after{transform:translateX(4px)}

/* ---------- FAQ --------------------------------------------------------------- */
.faq{margin-top:44px;border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 52px 24px 0;position:relative;
  font-family:var(--serif);font-weight:600;font-size:1.19rem;line-height:1.35;transition:color .24s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brass-deep)}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;background:var(--brass-deep);transition:transform .32s var(--ease),opacity .32s var(--ease)}
.faq summary::before{width:15px;height:1.5px;margin-top:-.75px}
.faq summary::after{width:1.5px;height:15px;right:12.75px;margin-top:-7.5px}
.faq details[open] summary::after{transform:rotate(90deg);opacity:0}
.faq details[open] summary{color:var(--brass-deep)}
.faq__a{padding:0 60px 26px 0;color:var(--on-canvas-mute);font-size:.98rem;max-width:76ch}
.faq__a p{margin-bottom:.85em}

/* ---------- CTA + form ---------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--ink-deep)}
.cta__glow{position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 52% at 22% 34%,rgba(176,139,79,.32),transparent 68%),
    radial-gradient(40% 46% at 78% 66%,rgba(127,95,53,.38),transparent 70%);
  filter:blur(12px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.09)}}
.cta__in{position:relative;z-index:1}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:.71rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;background:rgba(236,228,214,.05);color:var(--on-ink);
  border:1px solid rgba(236,228,214,.24);border-radius:0;font:inherit;font-size:.97rem;
  transition:border-color .24s var(--ease),background .24s var(--ease);
}
.field textarea{min-height:124px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);background:rgba(236,228,214,.09)}
.field select option{background:#17130F;color:#ECE4D6}
.popia{font-size:.79rem;color:var(--on-ink-mute);margin-top:18px;max-width:66ch;line-height:1.6}
.band:not(.band--deep) .popia{color:var(--on-canvas-mute)}
.form__note{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* ---------- prose (inner pages) --------------------------------------------------- */
.prose{max-width:70ch;font-size:1.03rem}
.prose h2{font-size:clamp(1.6rem,2.9vw,2.15rem);margin:46px 0 16px}
.prose h3{font-size:1.24rem;margin:34px 0 12px}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.3em}
.prose ul li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--on-canvas-mute)}
.prose ul li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:1px;background:var(--brass)}
.prose a{color:var(--brass-deep);text-decoration:none;border-bottom:1px solid rgba(127,95,53,.4);transition:border-color .24s var(--ease),color .24s var(--ease)}
.prose a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.pagehead{padding:clamp(130px,17vw,190px) 0 var(--pad);background:var(--ink-deep);color:var(--on-ink);position:relative;overflow:hidden}
.pagehead__glow{position:absolute;inset:auto -10% -60% 40%;height:70%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%,rgba(176,139,79,.22),transparent 70%);filter:blur(10px)}
.pagehead .wrap{position:relative;z-index:1}
.pagehead .eyebrow{color:var(--brass)}
.pagehead .lede{color:var(--on-ink-mute)}
.crumb{font-size:.71rem;letter-spacing:.22em;text-transform:uppercase;color:var(--on-ink-mute);margin:0 0 20px}
.crumb a{color:var(--brass);text-decoration:none;transition:color .24s var(--ease)}
.crumb a:hover{color:var(--on-ink)}

.callout{border-left:2px solid var(--brass);padding:18px 0 18px 24px;margin:32px 0;font-size:.99rem;color:var(--on-canvas-mute)}
.callout b{color:var(--brass-deep);font-weight:700}
.band--deep .callout{color:var(--on-ink-mute)}
.band--deep .callout b{color:var(--brass)}

/* roller shutters are shading products, not security products — see design-brief.md */
.rs-note{font-size:.94rem;line-height:1.6;opacity:.88;margin:14px 0 0;
  padding:12px 14px;border-left:2px solid currentColor}
.rs-note strong{font-weight:600}

.minigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:40px}
.mini{border:1px solid var(--line-light);padding:26px;background:var(--white);transition:border-color .26s var(--ease),transform .26s var(--ease)}
.mini:hover{border-color:rgba(176,139,79,.55);transform:translateY(-3px)}
.mini h3{font-size:1.14rem;margin-bottom:9px}
.mini p{font-size:.9rem;color:var(--on-canvas-mute);margin:0}

/* ---------- footer ------------------------------------------------------------- */
footer{background:var(--ink-deep);border-top:1px solid var(--line-dark);padding:66px 0 40px;font-size:.9rem;color:var(--on-ink-mute)}
footer .brand{margin-bottom:22px}
footer .brand b{color:var(--on-ink)}
footer a{color:var(--on-ink-mute)}
.legal-links a{color:var(--on-ink-mute)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot__grid h4{font-size:.71rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-family:var(--sans);font-weight:700;margin:0 0 16px}
.foot__grid ul{list-style:none;padding:0;margin:0}
.foot__grid li{margin-bottom:10px}
.foot__grid a{text-decoration:none;transition:color .24s var(--ease)}
.foot__grid a:hover{color:var(--brass)}
@media(max-width:780px){.foot__grid{grid-template-columns:1fr;gap:32px}}

/* ---------- motion --------------------------------------------------------------- */
/* Reveal targets are VISIBLE by default. Only when GSAP has loaded and motion
   is allowed does site.js add .js-anim to <html> and take over. */
.js-anim .reveal{opacity:0}
.js-anim .rule{transform:scaleX(0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee__track{animation:none;transform:none}
  .cta__glow{animation:none}
  .reveal{opacity:1!important;transform:none!important}
  .rule{transform:scaleX(1)!important}
}

@media(max-width:600px){
  body{font-size:16px}
  .trust{gap:12px 22px}
  .pcard__body{padding:18px}
}