/* Brand pass over the v8 design (2026-11-05, Barrie): less of the generic "technical editorial"
   kit, more Cascade. Everything here is scoped to html:not(.v8), so /?v8 shows the original
   for side-by-side review (brand.js). Delete the scope once Carolyn has chosen.

   1. The cyan dash before section labels becomes the Cascade mark (the triangle and drop from
      the logo, assets/cascade-mark.svg), drawn as a mask so it takes the label's own colour slot.
   2. (Reverted) every section keeps its label, now with the mark. */
html:not(.v8) .eyebrow .rule{
  width:15px;height:12px;background:var(--blue);flex:none;
  -webkit-mask:url(/assets/cascade-mark.svg) center/contain no-repeat;
          mask:url(/assets/cascade-mark.svg) center/contain no-repeat}
/* (Labels on every section came back the same day: without them the pages lost their rhythm.
   Only the dash was the problem. Kept for reference:
   html:not(.v8) .eyebrow:not(.eyebrow-intro){display:none} ) */
@media(max-width:860px){html:not(.v8) .eyebrow .rule{width:14px;height:11px}}

/* 3. Figure and form header bars: no blue square, no second drawing-sheet label ("System study
      02", "Concept schematic", "Illustrative layout", "Section view", "Property brief"), and the
      remaining name set as a plain caption instead of tracked capitals. The gallery's "Product
      views / 01 / 03" overlay goes too: the thumbnails already show which view is open. */
html:not(.v8) :is(.cf-platehead,.plate-title,.h-figure-head,.cut-head,.sheet-bar,.sheet-top)>span:last-child:not(:first-child),
html:not(.v8) .p-stage :is(.p-fig,.p-count),
html:not(.v8) :is(.cf-platehead,.plate-title,.h-figure-head) i{display:none}
html:not(.v8) :is(.cf-platehead,.cut-head),
html:not(.v8) :is(.plate-title,.h-figure-head,.sheet-bar,.sheet-top) .micro{
  text-transform:none;letter-spacing:-.01em;font:600 13px/1.4 Inter,Arial,sans-serif;color:var(--ink)}

/* 4. The home page's role list is not a sequence, so it loses its 01–04. Numbered steps that are a
      real order (Collect → Filter → Store → Flush, the three measurement steps) keep theirs. */
html:not(.v8) .role-list summary .micro{display:none}

/* 5. Life (2026-11-05, Barrie: "it feels dead, flat… white space everywhere"). The v8 home page
      has no photography below the hero and ends on a large white enquiry section. */

/* Real photography on the home page: Cascade's exhibition stand, already used on the housing page. */
.cw-photo{display:none}
html:not(.v8) .cw-photo{display:block;margin:34px 0 0;border-radius:4px;overflow:hidden;background:#eaf4f7}
html:not(.v8) .cw-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
html:not(.v8) .cw-photo figcaption{font-size:13px;color:var(--body);padding:10px 14px}

/* Every page that has an enquiry ends on the same full-width Cascade blue band, with a soft wave
   across the top that echoes the water splash on Cascade's own exhibition banners.
   How: the section is painted in the colour of the band above it (--wave-top; a box-shadow makes
   that full bleed without touching the markup, clip-path keeps it to the section's height), and
   ::before lays the blue gradient over it through a wave-shaped mask. The lighter ribbon is the
   mask at 86%. The solid mask layer starts 2px inside the wave image so no hairline shows. */
html:not(.v8),html:not(.v8) body{overflow-x:clip}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries){--wave-top:#fff;--wave-h:clamp(70px,8vw,140px);
  position:relative;isolation:isolate;color:#fff;
  background:var(--wave-top);box-shadow:0 0 0 100vmax var(--wave-top);clip-path:inset(0 -100vmax);
  padding-top:calc(var(--wave-h) + clamp(28px,3.4vw,58px))}
html:not(.v8) .pilot + #enquiry{--wave-top:#e7f4fa}   /* home: follows the pale blue pilot band */
html:not(.v8) .p-heat + #drawings{--wave-top:#e9f4f8}  /* follows the heat-recovery band */
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries)::before{content:'';position:absolute;z-index:-1;top:0;left:50%;width:100vw;height:100%;
  transform:translateX(-50%);pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 85% 100%,rgba(46,175,236,.55),transparent 70%),
    linear-gradient(170deg,#0b8ec4 0%,#0879a6 45%,#06618a 100%);
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 70C190 84 330 26 520 22c180-4 300 48 500 70 160 18 300-4 420-34V160H0Z' fill-opacity='.86'/%3E%3Cpath d='M0 94c200 10 340-42 520-46 170-2 280 48 440 66 160 18 310 2 480-38V160H0Z'/%3E%3C/svg%3E");
  -webkit-mask:var(--wave) top/100% var(--wave-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--wave-h) - 2px)/100% 100% no-repeat;
          mask:var(--wave) top/100% var(--wave-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--wave-h) - 2px)/100% 100% no-repeat}

/* Type and panels on the blue. */
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) .eyebrow{color:#e3f5fd}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) .eyebrow .rule{background:#fff}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) :is(h2,h3){color:#fff}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) :is(.lead,.request-intro>p,.brief-intro>p,.enquiry-grid p:not(.eyebrow)){color:#e1f3fb}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) :is(.cw-panel,.enquiry-box,.request-sheet,.brief-sheet){background:#fff;border-color:transparent;color:var(--ink);
  box-shadow:0 18px 40px -18px rgba(3,40,60,.45)}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) :is(.cw-panel,.enquiry-box,.request-sheet,.brief-sheet) :is(h2,h3){color:var(--ink)}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) :is(.contact-details,.person,.t-person,.h-person){border-color:rgba(255,255,255,.35)}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) :is(.contact-details,.person,.t-person,.h-person)>span{color:#d7eef9}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) :is(.contact-details,.person,.t-person,.h-person) a,html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) .contact-address{color:#fff}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) .p-enquiry > div > .text-link{color:#fff}
html:not(.v8) #enquiry .contact-details .btn.primary{background:#fff;color:#0b2d3c}
html:not(.v8) #enquiry .contact-details .btn.primary:hover{background:#d3effa}
html:not(.v8) #enquiry :is(.email,.homeowner){color:#fff}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) a:not(.btn):hover{color:#bfe9ff}
html:not(.v8) :is(#enquiry,#drawings,#request,#pilot-brief,#enquiries) :is(.cw-panel,.enquiry-box,.request-sheet,.brief-sheet) a:not(.btn):hover{color:var(--deep)}

/* A little less empty space between sections. */
html:not(.v8) :is(.section,.p-section,.t-section,.h-section,.editorial-row,.source-section){padding-block:clamp(48px,5vw,80px)}

/* Sections ease in as they reach the screen (brand.js adds .cw-reveal only when motion is fine). */
html.cw-reveal:not(.v8) main section:not(:first-child):not(.cw-in){opacity:0;transform:translateY(22px)}
html.cw-reveal:not(.v8) main section:not(:first-child){transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

/* 6. /how-it-works/ (new page, so not scoped to .v8). Reuses the home hero grid and figures. */
.hiw-hero .crumbs{display:flex;gap:9px;font-size:12px;color:#4a616b;margin-bottom:22px}
.hiw-hero .crumbs a{text-decoration:underline;text-underline-offset:3px}
.hiw-hero h1{font-size:clamp(52px,5.2vw,88px)}
.hiw-links{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.hiw-links a{display:grid;grid-template-columns:1fr auto;gap:6px 14px;height:100%;padding:22px 22px 24px;border:1px solid #cddadd;border-radius:4px;background:#f6fafb;transition:border-color .2s,background .2s}
.hiw-links a:hover{border-color:var(--blue);background:#eef8fc}
.hiw-links strong{font-size:19px;letter-spacing:-.03em;font-weight:600}
.hiw-links span{grid-column:1;color:var(--body);font-size:14px;line-height:1.55}
.hiw-links svg{grid-column:2;grid-row:1;width:18px;height:18px;fill:none;stroke:var(--deep);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.hiw-next{padding-bottom:clamp(56px,6vw,96px)}
@media(max-width:860px){.hiw-links{grid-template-columns:1fr}}

/* On /how-it-works/ the page label already says "How it works"; the Cascade Flow section's own
   label would repeat it straight away. */
.hiw-hero ~ .cascade-flow .eyebrow{display:none}

/* 7. Draft pages (About, Contact, Privacy) and the shared bits they use. Not scoped to .v8. */
.cw-draft{background:#fff7db;border-bottom:1px solid #ecd889;font-size:14px;color:#4a3b00}
.cw-draft .wrap{padding-block:12px}
.cw-draft details{margin-top:6px}
.cw-draft summary{cursor:pointer;font-weight:600}
.cw-draft ul{margin:6px 0 4px;padding-left:20px}
.cw-draft li{margin:3px 0}
.cw-page-hero .wrap{padding-block:clamp(34px,4vw,64px) clamp(40px,4.6vw,76px)}
.cw-page-hero .crumbs{display:flex;gap:9px;font-size:12px;color:#4a616b;margin-bottom:22px}
.cw-page-hero .crumbs a{text-decoration:underline;text-underline-offset:3px}
.cw-page-hero .intro{max-width:620px}
.cw-two{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,7vw,120px);align-items:start}
.cw-two h2{margin-top:20px}
.cw-prose p{color:var(--body);font-size:17px;line-height:1.65;margin:0 0 16px}
.cw-band-light{background:#e9f4f8}
.cw-cards{display:grid;gap:clamp(14px,1.6vw,22px);margin-top:28px}
.cw-two .cw-cards{margin-top:0}
.cw-cards-2{grid-template-columns:repeat(2,1fr)}
.cw-cards-3{grid-template-columns:repeat(3,1fr)}
.cw-card{background:#fff;border:1px solid #cddadd;border-radius:4px;padding:22px 22px 24px}
.cw-band-light .cw-card{border-color:#c9dfe6}
.cw-card h3{font-size:20px;letter-spacing:-.03em;font-weight:600;margin-bottom:8px}
.cw-card p{color:var(--body);font-size:15px;line-height:1.6;margin:0 0 6px}
.cw-person p{color:var(--deep);font-weight:560}
.cw-legal{max-width:820px}
.cw-legal h2{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.04em;margin:38px 0 12px}
.cw-legal h2:first-child{margin-top:0}
.cw-legal p,.cw-legal li{color:var(--body);font-size:16px;line-height:1.7}
.cw-legal p{margin:0 0 14px}
.cw-legal ul{padding-left:20px;margin:0 0 14px}
.cw-legal a{color:var(--deep);text-decoration:underline;text-underline-offset:3px}
.cw-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #3a4950;padding-block:16px;font-size:12px;color:#b8c9cf}
.cw-foot nav{display:flex;gap:20px}
.cw-foot nav a{color:#e3eef1}
.cw-foot nav a:hover{color:#a3e3ff}
.cw-note a[href="/privacy/"]{white-space:nowrap}
@media(max-width:860px){.cw-two,.cw-cards-2,.cw-cards-3{grid-template-columns:1fr}}

/* 8. Header stays on screen while scrolling (2026-11-05, Barrie). Not scoped to .v8: it's a
      requested behaviour, not part of the design comparison. Anchors land below it. */
.header{position:sticky;top:0;z-index:20;transition:box-shadow .25s}
html.cw-scrolled .header{box-shadow:0 6px 18px -10px rgba(16,44,58,.35)}
html{scroll-padding-top:104px}
@media(max-width:860px){html{scroll-padding-top:90px}}

/* 9. Logo: inline SVG (components/Logo.astro), same artwork. On hover or focus a drop falls into
      the hollow of the triangle, squashes as it lands, and fades. Off for reduced motion. */
.logo .cw-logo{display:block;width:clamp(142px,13vw,175px);height:auto;overflow:visible}
@media(max-width:980px){.logo .cw-logo{width:132px}}
@media(max-width:400px){.logo .cw-logo{width:119px}}
.cw-drip{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.logo:hover .cw-drip,.logo:focus-visible .cw-drip{animation:cw-drip 1s cubic-bezier(.45,0,.55,1)}
@keyframes cw-drip{
  0%{opacity:0;transform:translateY(-150%) scale(.32)}
  15%{opacity:1}
  55%{transform:translateY(0) scale(.96,1.07)}
  68%{transform:translateY(0) scale(1.07,.93)}
  80%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.logo:hover .cw-drip,.logo:focus-visible .cw-drip{animation:none}}
.cw-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Footer company links wrap on small screens. */
.cw-foot nav{flex-wrap:wrap;gap:10px 20px}

/* 10. Pages brought over from the Wix site (2026-11-05): lists, news, FAQ */
.cw-list{margin:4px 0 12px;padding:0;list-style:none}
.cw-list li{position:relative;padding-left:22px;color:var(--body);font-size:15px;line-height:1.6;margin:0 0 6px}
.cw-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:#20aee5}
.cw-prose .cw-list li{font-size:17px}
.cw-h3{font-size:20px;letter-spacing:-.03em;font-weight:600;margin:26px 0 10px}
.cw-held{font-style:italic;color:#7a8a90}
.cw-news-card{display:grid;grid-template-columns:minmax(0,.9fr) 1.1fr;gap:clamp(20px,3vw,44px);align-items:center;background:#fff;border:1px solid #cddadd;border-radius:4px;overflow:hidden;color:inherit;text-decoration:none;max-width:980px}
.cw-news-card:hover h2,.cw-news-card:hover h3{text-decoration:underline;text-underline-offset:4px}
.cw-news-img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;background:#eaf4f7}
.cw-news-card > div{padding:22px clamp(18px,3vw,36px) 26px 0}
.cw-news-date{display:block;font-size:13px;color:#4a616b;margin-bottom:10px}
.cw-article-title{max-width:860px}
html:not(.v8) .cw-photo-square img,.cw-photo-square img{aspect-ratio:1}
.cw-photo-square{max-width:520px}
.cw-faq{max-width:860px;border-top:1px solid #cddadd}
.cw-faq details{border-bottom:1px solid #cddadd}
.cw-faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-size:clamp(18px,1.6vw,21px);font-weight:600;letter-spacing:-.02em}
.cw-faq summary::-webkit-details-marker{display:none}
.cw-faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;color:#20aee5}
.cw-faq details[open] summary::after{content:"\2212"}
.cw-faq details p{color:var(--body);font-size:17px;line-height:1.65;margin:0 0 16px;max-width:720px}
.cw-faq-more{margin-top:28px}
@media(max-width:700px){.cw-news-card{grid-template-columns:1fr}.cw-news-card > div{padding:0 20px 24px}}
.cw-news-img{overflow:hidden}
.cw-news-img img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.cw-news-card h2{font-size:clamp(24px,2.4vw,34px);line-height:1.12;margin:0 0 14px}
.cw-news-card h2 a{color:inherit;text-decoration:none}
.cw-news-card p{color:var(--body);font-size:16px;line-height:1.6;margin:0 0 14px}