/* =========================================================================
   Cork Wall Print — Bring Your Walls To Life
   Single stylesheet. No frameworks, no build step.

   The colour balance is deliberate: mostly white, charcoal typography, teal
   as the one interactive colour, and only small touches of pink and orange.
   The logo and the wall photography carry the colour — the page does not.
   ========================================================================= */

:root{
  /* ⚑ BRAND COLOURS — change these to rebrand the whole site */
  --charcoal:   #182027;   /* headings, nav, footer                         */
  --text:       #20272D;   /* body copy                                     */
  --muted:      #687177;   /* secondary copy                                */
  --teal:       #1598A8;   /* the brand teal — fills, borders, decoration    */
  --teal-text:  #10757F;   /* the same teal darkened for TEXT and button     */
                           /* grounds: 5.4:1 on white, 5.0:1 on the grey.    */
                           /* The brand #1598A8 is only 3.45:1 — fine for    */
                           /* borders and fills, too light for small copy.   */
  --teal-dark:  #0D6068;   /* hover                                         */
  --pink-text:  #CF215E;   /* pink darkened the same way, for rare text use  */
  --pink:       #E62568;   /* small accents only                            */
  --orange:     #F5A018;   /* small accents only                            */

  --white:      #FFFFFF;   /* main background                               */
  --grey:       #F6F7F7;   /* secondary background                          */
  --grey-2:     #EEF1F1;   /* wells and inactive fills                      */

  /* derived */
  --teal-soft:  rgba(21,152,168,.09);
  --teal-line:  rgba(21,152,168,.30);
  --line:       #E3E7E8;
  --line-2:     #CFD6D8;
  --shadow:     0 1px 2px rgba(24,32,39,.04), 0 10px 30px -18px rgba(24,32,39,.18);
  --shadow-lg:  0 2px 4px rgba(24,32,39,.04), 0 26px 60px -30px rgba(24,32,39,.28);

  --f-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif:"Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 40px);
  --pad-y: clamp(72px, 9vw, 128px);
  --r: 16px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:var(--f-sans);
  font-size:clamp(16px,1.02rem,17px);
  line-height:1.65;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4{
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.035em;
  margin:0;
  color:var(--charcoal);
  text-wrap:balance;
}
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--teal-text);
}

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--teal-text); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:840px; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--teal-text); color:#fff;
  font:inherit; font-weight:600; letter-spacing:-.012em; line-height:1.25;
  text-decoration:none; text-align:center; text-wrap:balance;
  max-width:100%;
  padding:14px 24px; border:1px solid var(--teal-text); border-radius:999px;
  transition:background-color .18s var(--ease), border-color .18s var(--ease),
             transform .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow:0 8px 20px -12px rgba(21,152,168,.85);
}
.btn:hover{ background:var(--teal-dark); border-color:var(--teal-dark); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--lg{ padding:17px clamp(22px,5vw,32px); font-size:clamp(.96rem,3.4vw,1.04rem); }
.btn--sm{ padding:11px clamp(14px,3.6vw,19px); font-size:clamp(.84rem,3vw,.92rem); box-shadow:none; white-space:nowrap; }
.btn--block{ width:100%; }

/* secondary: white, dark text, thin teal border */
.btn--ghost{
  background:var(--white); color:var(--charcoal);
  border-color:var(--teal-line); box-shadow:none;
}
.btn--ghost:hover{ background:var(--teal-soft); border-color:var(--teal-text); color:var(--teal-dark); }

.link{
  color:var(--teal-text); text-decoration:none; font-weight:600;
  border-bottom:1px solid transparent; transition:border-color .18s var(--ease);
}
.link:hover{ border-color:currentColor; }

/* ---------------------------------------------------------------- header */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--white);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 20px -8px rgba(24,32,39,.18); }
.hdr__in{ display:flex; align-items:center; gap:clamp(12px,3vw,28px); height:84px; }
.hdr__in > *{ min-width:0; }

/* the logo is always the supplied image — never rebuilt in text or CSS */
.brand{ display:block; margin-right:auto; line-height:0; flex:0 1 auto; }
.brand img{ width:clamp(168px, 22vw, 268px); height:auto; }
@media (max-width:520px){ .brand img{ width:min(180px, 54vw); } }

.nav{ display:none; gap:clamp(18px,2vw,30px); font-size:.95rem; font-weight:500; color:var(--charcoal); }
.nav a{ text-decoration:none; padding:6px 0; position:relative; transition:color .16s var(--ease); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--teal); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.nav a:hover{ color:var(--teal-text); }
.nav a:hover::after{ transform:scaleX(1); }
@media (min-width:1000px){ .nav{ display:flex; } }

.hdr__in .btn{
  transition:opacity .25s var(--ease), transform .25s var(--ease),
             background-color .18s var(--ease), visibility 0s;
}
@media (max-width:859px){
  .hdr.is-compact .btn{
    opacity:0; transform:translateY(-6px);
    visibility:hidden;              /* also drops it out of the tab order */
    transition-delay:0s, 0s, 0s, .25s;
  }
}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative; overflow:hidden;
  padding:calc(84px + clamp(34px,6vw,74px)) 0 clamp(46px,7vw,84px);
  background:var(--white);
}
.hero__glow{
  position:absolute; right:-12%; top:-18%; width:min(760px,92vw); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, var(--teal-soft) 0%, transparent 64%);
  pointer-events:none;
}
.hero__in{
  position:relative; text-align:left;
  display:grid; gap:clamp(34px,5vw,58px); align-items:center;
}
@media (min-width:940px){ .hero__in{ grid-template-columns:1.02fr .98fr; } }
.hero__text{ min-width:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--teal-text);
  background:var(--teal-soft);
  border:1px solid var(--teal-line);
  padding:8px 15px; border-radius:999px;
  margin:0 0 24px;
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 0 rgba(21,152,168,.5);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(21,152,168,.45); }
  70%{ box-shadow:0 0 0 8px rgba(21,152,168,0); }
  100%{ box-shadow:0 0 0 0 rgba(21,152,168,0); }
}

.hero__h1{ font-size:clamp(2.6rem, 6.4vw, 4.4rem); letter-spacing:-.045em; margin:0 0 20px; }
.hero__sub{ max-width:46ch; margin:0 0 20px; color:var(--muted); font-size:clamp(1.04rem,2.2vw,1.18rem); }

/* the benefit line, separated by small brand-coloured dots */
.hero__bens{
  list-style:none; margin:0 0 28px; padding:0;
  display:flex; flex-wrap:wrap; gap:4px 0;
  font-size:.86rem; font-weight:600; letter-spacing:-.012em; color:var(--charcoal);
}
.hero__bens li{ display:flex; align-items:center; white-space:nowrap; }
.hero__bens li:not(:last-child)::after{
  content:""; width:5px; height:5px; border-radius:50%; margin:0 10px; background:var(--teal);
}
.hero__bens li:nth-child(2)::after{ background:var(--pink); }
.hero__bens li:nth-child(3)::after{ background:var(--orange); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.ticks{
  list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px;
  font-size:.9rem; color:var(--muted);
}
@media (min-width:820px){ .ticks{ flex-direction:row; flex-wrap:wrap; gap:10px 26px; } }
.ticks li{ display:flex; align-items:flex-start; gap:8px; }
.ticks li::before{
  content:""; width:16px; height:16px; flex:0 0 auto; border-radius:50%; margin-top:.2em;
  background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231598A8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------------------------------------------------------------- video */
.video{ margin:0; }
.video__frame{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--grey);
  box-shadow:var(--shadow-lg);
}
@media (max-width:939px){ .video__frame{ aspect-ratio:16/10; } }
.video__el{ width:100%; height:100%; object-fit:cover; background:var(--grey); }
.video__play{
  position:absolute; inset:0; margin:auto;
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--teal-text); border:2px solid #fff; color:#fff;
  box-shadow:0 14px 34px -12px rgba(24,32,39,.5);
  transition:transform .2s var(--ease), background-color .2s var(--ease);
}
.video__play:hover{ transform:scale(1.07); background:var(--teal-dark); }
.video__play svg{ width:30px; height:30px; fill:currentColor; margin-left:3px; }
.video__frame.is-playing .video__play{ opacity:0; pointer-events:none; }

.video__tag{
  position:absolute; left:14px; top:14px;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); background:rgba(255,255,255,.94);
  border:1px solid var(--line); padding:6px 11px; border-radius:999px;
}
.video__cap{ margin-top:12px; font-size:.84rem; color:var(--muted); }

/* ---------------------------------------------------------------- marquee */
.marquee{
  border-block:1px solid var(--line);
  background:var(--grey);
  overflow:hidden; padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{
  display:flex; align-items:center; gap:30px; padding-right:30px;
  font-size:clamp(.94rem,2.2vw,1.08rem); font-weight:600; letter-spacing:-.028em;
  color:var(--charcoal); white-space:nowrap;
}
.marquee__set i{ color:var(--teal-text); font-style:normal; font-size:.62em; }
.marquee__set i:nth-of-type(3n+2){ color:var(--pink); }
.marquee__set i:nth-of-type(3n){ color:var(--orange); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- sections */
.sec{ padding:var(--pad-y) 0; background:var(--white); }
.sec--alt{ background:var(--grey); }

.sec__head{ max-width:680px; margin:0 auto clamp(38px,5vw,58px); text-align:center; }
.sec__head--left{ margin-inline:0; text-align:left; }
.sec__h2{ font-size:clamp(1.95rem,5vw,3rem); margin:0 0 16px; }
.sec__lede{ color:var(--muted); font-size:clamp(1rem,2.2vw,1.12rem); margin:0; }

.kicker{
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-text); margin:0 0 14px;
}
.kicker--on{ color:var(--teal-text); }

.sec__note{
  max-width:62ch; margin:clamp(26px,4vw,38px) auto 0; text-align:center;
  color:var(--muted); font-size:.95rem;
}
.lede-lg{
  font-size:clamp(1.12rem,2.6vw,1.3rem); letter-spacing:-.025em;
  color:var(--charcoal) !important; margin-bottom:1.1em;
}

/* ---------------------------------------------------- at-a-glance strip */
.strip{ border-bottom:1px solid var(--line); background:var(--white); }
.strip__list{
  list-style:none; margin:0; padding:clamp(32px,5vw,50px) 0;
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:640px){ .strip__list{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .strip__list{ grid-template-columns:repeat(3,1fr) 1.5fr; } }

.strip__list li{
  display:flex; align-items:center; gap:11px;
  padding:18px 20px; border:1px solid var(--line); border-radius:14px;
  background:var(--white);
  font-size:clamp(.98rem,2.4vw,1.04rem); font-weight:600; letter-spacing:-.026em;
  color:var(--charcoal);
}
.strip__list b{
  font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); background:var(--grey);
  border:1px solid var(--line); border-radius:999px;
  padding:5px 10px; flex:0 0 auto;
}
.strip__last{
  display:block !important;                 /* a sentence, not flex children */
  background:var(--teal-soft) !important;
  border-color:var(--teal-line) !important;
}

/* ---------------------------------------------------------------- gallery */
.gal{ columns:1; column-gap:14px; }
@media (min-width:620px){ .gal{ columns:2; column-gap:16px; } }
@media (min-width:1000px){ .gal{ columns:3; column-gap:18px; } }

.gal__i{
  position:relative; margin:0 0 14px; overflow:hidden;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--grey);
}
@media (min-width:620px){ .gal__i{ margin-bottom:16px; } }
@media (min-width:1000px){ .gal__i{ margin-bottom:18px; } }

.gal__i img{ width:100%; height:auto; display:block; transition:transform .6s var(--ease); }
.gal__i:hover img{ transform:scale(1.045); }

.gal__i figcaption{
  position:absolute; left:12px; bottom:12px; right:12px;
  font-size:.8rem; font-weight:600; letter-spacing:-.01em;
  color:var(--charcoal);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);
  padding:7px 13px; border-radius:999px;
  width:max-content; max-width:100%;
}

.disclaim{
  margin:clamp(28px,4vw,40px) auto 0; max-width:720px; text-align:center;
  font-size:.87rem; color:var(--muted);
  border-top:1px solid var(--line); padding-top:20px;
}

/* ---------------------------------------------------------------- split */
.split{ display:grid; gap:clamp(34px,5vw,64px); align-items:center; }
.split > *{ min-width:0; }
@media (min-width:900px){
  .split{ grid-template-columns:1.05fr .95fr; }
  .split--rev .split__media{ order:-1; }
}
.split__text p{ color:var(--muted); }
.split__text .sec__h2{ margin-bottom:18px; }
.split__text .btn{ margin-top:26px; }

.split__media{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--grey);
  aspect-ratio:4/5;
  box-shadow:var(--shadow-lg);
}
.split__media img{ width:100%; height:100%; object-fit:cover; }

.feat{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px; }
.feat--tight{ gap:13px; }
.feat li{ padding-left:24px; position:relative; }
.feat li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:9px; height:9px; border-radius:3px; background:var(--teal);
}
.feat li:nth-child(3n+2)::before{ background:var(--pink); }
.feat li:nth-child(3n)::before{ background:var(--orange); }
.feat strong{ display:block; font-weight:600; letter-spacing:-.02em; color:var(--charcoal); }
.feat span{ display:block; color:var(--muted); font-size:.94rem; }

.specs{ list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid var(--line); display:grid; gap:11px; }
.specs li{ padding-left:26px; position:relative; color:var(--muted); font-size:.94rem; }
.specs li::before{ content:"→"; position:absolute; left:0; top:0; color:var(--teal-text); font-size:.92rem; }
.specs strong{ color:var(--charcoal); font-weight:600; }

/* ---------------------------------------------------- commercial examples */
.exp{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:600px){ .exp{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .exp{ grid-template-columns:repeat(4,1fr); } }
.exp article{
  padding:24px 22px 26px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--white);
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.exp article:hover{ border-color:var(--teal-line); transform:translateY(-3px); box-shadow:var(--shadow); }
.exp h3{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-text); margin:0 0 10px; }
.exp p{ margin:0; font-size:.96rem; letter-spacing:-.02em; color:var(--muted); }

/* ---------------------------------------------------- what can we print */
.twocol{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:820px){ .twocol{ grid-template-columns:1fr 1fr; } }
.twocol__c{
  padding:clamp(24px,3.4vw,34px); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--white);
}
.twocol__c h3{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--teal-text); margin:0 0 18px; }
.twocol__c:nth-child(2) h3{ color:var(--pink-text); }
.taglist{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.taglist li{
  padding:9px 15px; border-radius:999px; font-size:.92rem; letter-spacing:-.02em;
  color:var(--charcoal); border:1px solid var(--line); background:var(--grey);
}

/* ---------------------------------------------------------------- comparison */
.cmp{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp__t{ width:100%; border-collapse:collapse; text-align:left; }
.cmp__t th, .cmp__t td{ padding:16px 18px; vertical-align:top; font-size:.92rem; }
.cmp__t thead th{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.cmp__t tbody th{
  font-weight:600; letter-spacing:-.025em; color:var(--charcoal); font-size:.95rem;
  width:16%; min-width:150px;
}
.cmp__t tbody tr{ border-bottom:1px solid var(--line); }
.cmp__t tbody tr:last-child{ border-bottom:0; }
.cmp__t td{ color:var(--muted); min-width:190px; }

/* ours is quietly marked — no ticks and crosses */
.cmp__t .is-us{ background:var(--teal-soft); color:var(--text); }
.cmp__t thead .is-us{ color:var(--teal-text); border-radius:12px 12px 0 0; }
.cmp__t tbody tr:last-child .is-us{ border-radius:0 0 12px 12px; }

@media (max-width:900px){
  .cmp{ overflow:visible; }
  .cmp__t, .cmp__t tbody, .cmp__t tr, .cmp__t td, .cmp__t th{ display:block; width:auto; }
  .cmp__t thead{ display:none; }
  .cmp__t tbody tr{
    border:1px solid var(--line); border-radius:var(--r);
    background:var(--white); padding:6px 0; margin-bottom:12px;
  }
  .cmp__t tbody th{
    width:auto; min-width:0; padding:14px 18px 8px;
    font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-text);
  }
  .cmp__t td{ min-width:0; padding:10px 18px; border-top:1px solid var(--line); }
  .cmp__t td::before{
    content:attr(data-l); display:block; margin-bottom:3px;
    font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted);
  }
  .cmp__t td.is-us::before{ color:var(--teal-text); }
  .cmp__t thead .is-us, .cmp__t tbody tr:last-child .is-us{ border-radius:0; }
}

/* ---------------------------------------------------------------- stats */
.stats{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:560px){ .stats{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{
  min-width:0; text-align:center; padding:clamp(26px,3.6vw,38px) 18px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white);
}
.stat__k, .stat__u{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted);
}
.stat__v{
  display:block; margin:10px 0; line-height:1;
  font-size:clamp(2.3rem,6.2vw,3.2rem); font-weight:700; letter-spacing:-.05em;
  color:var(--charcoal); overflow-wrap:anywhere;
}
.stat__u{ color:var(--teal-text); }
/* one hairline of brand colour per tile, rotating through the palette */
.stat::after{
  content:""; display:block; width:34px; height:3px; border-radius:2px;
  margin:16px auto 0; background:var(--teal);
}
.stat:nth-child(2)::after{ background:var(--pink); }
.stat:nth-child(3)::after{ background:var(--orange); }

.chips{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.chips li{
  padding:9px 15px; border-radius:999px; font-size:.89rem; color:var(--muted);
  border:1px solid var(--line); background:var(--white);
}

/* ---------------------------------------------------------------- steps */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
@media (min-width:700px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(4,1fr); gap:18px; } }

.step{
  position:relative; padding:30px 26px 32px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white);
}
/* large outlined numerals — quiet, not decorative noise */
.step__n{
  display:block; font-size:3rem; font-weight:800; line-height:1;
  letter-spacing:-.05em; margin-bottom:14px;
  color:transparent;
  -webkit-text-stroke:1.6px rgba(21,152,168,.55);
}
@supports not (-webkit-text-stroke: 1px red){
  .step__n{ color:rgba(21,152,168,.55); }
}
.step h3{ font-size:1.2rem; margin:0 0 10px; }
.step p{ color:var(--muted); margin:0; font-size:.95rem; }

.cta-bar{
  margin-top:clamp(34px,5vw,52px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  padding:26px clamp(22px,3.4vw,34px);
  border:1px solid var(--teal-line); border-radius:var(--r-lg);
  background:var(--teal-soft);
}
.cta-bar p{
  margin:0; font-size:clamp(1.06rem,2.4vw,1.3rem); font-weight:600;
  letter-spacing:-.03em; color:var(--charcoal);
}

/* ---------------------------------------------------------------- surfaces */
.tiles{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .tiles{ grid-template-columns:repeat(4,1fr); } }
.tiles li{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:84px; padding:16px 14px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
  font-weight:600; letter-spacing:-.025em; color:var(--charcoal);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tiles li:hover{ border-color:var(--teal-line); transform:translateY(-2px); box-shadow:var(--shadow); }
.tiles__wide{
  grid-column:1/-1; flex-direction:column; gap:7px; text-align:center;
  background:var(--teal-soft) !important; border-color:var(--teal-line) !important;
}
.tiles__wide b{ color:var(--teal-text); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
.tiles__wide span{ font-weight:400; color:var(--muted); font-size:.92rem; max-width:52ch; }

/* ---------------------------------------------------------------- disruption */
.bens3{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .bens3{ grid-template-columns:repeat(3,1fr); } }
.bens3 article{
  padding:28px 24px 30px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--white);
}
.bens3 article::before{
  content:""; display:block; width:30px; height:3px; border-radius:2px;
  margin-bottom:16px; background:var(--teal);
}
.bens3 article:nth-child(2)::before{ background:var(--pink); }
.bens3 article:nth-child(3)::before{ background:var(--orange); }
.bens3 h3{ font-size:1.3rem; margin:0 0 10px; letter-spacing:-.035em; }
.bens3 p{ margin:0; color:var(--muted); font-size:.95rem; }

.bigcta{
  text-align:center; padding:clamp(34px,5vw,54px) clamp(22px,4vw,42px);
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--white); box-shadow:var(--shadow);
}
.bigcta h2, .bigcta h3{ font-size:clamp(1.7rem,4.6vw,2.5rem); margin:0 0 14px; }
.bigcta p{ color:var(--muted); max-width:56ch; margin:0 auto 26px; font-size:clamp(1rem,2.2vw,1.08rem); }
#disruption .bigcta{ margin-top:clamp(34px,5vw,50px); }

/* ---------------------------------------------------------------- pricing */
.price{ display:grid; gap:16px; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:820px){ .price{ grid-template-columns:1.15fr .85fr; } }

.price__main{
  text-align:center; padding:clamp(30px,5vw,48px) clamp(22px,4vw,38px);
  border-radius:var(--r-lg); border:1px solid var(--teal-line);
  background:var(--white); box-shadow:var(--shadow);
}
.price__from{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; font-weight:700; }
.price__big{
  font-size:clamp(3rem,11vw,4.2rem); font-weight:700; letter-spacing:-.05em; line-height:1;
  margin:0; color:var(--charcoal);
}
.price__big span{ font-size:.28em; font-weight:600; letter-spacing:-.01em; color:var(--teal-text); }
.price__min{ font-size:1rem; color:var(--charcoal); margin:12px 0 0; font-weight:600; letter-spacing:-.02em; }
.price__notes{ list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:7px; font-size:.89rem; color:var(--muted); }
.price__main .btn{ width:100%; max-width:340px; }

.price__side{
  padding:clamp(26px,4vw,34px); border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--white);
  display:flex; flex-direction:column; justify-content:center; gap:14px; text-align:center;
}
.price__side h3{ font-size:1.22rem; margin:0; }
.price__side p{ margin:0; color:var(--muted); font-size:.95rem; }
.price__side .btn{ width:100%; }

.value{ display:grid; gap:16px; grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){ .value{ grid-template-columns:.9fr 1.1fr; } }
.value__text p{ color:var(--muted); }
.value__text .btn{ margin-top:24px; }
.value__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.value__list li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:baseline;
  padding:15px 18px; border:1px solid var(--line); border-radius:13px; background:var(--white);
}
.value__list b{
  font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--teal-text); grid-column:1; white-space:nowrap;
}
.value__list span{ grid-column:2; font-size:.95rem; letter-spacing:-.02em; color:var(--charcoal); }

/* ---------------------------------------------------------------- faq */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 0;
  font-size:clamp(1.02rem,2.4vw,1.14rem); font-weight:600; letter-spacing:-.025em;
  color:var(--charcoal);
  transition:color .16s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--teal-text); }
.qa summary::after{
  content:""; flex:0 0 auto; width:20px; height:20px; margin-top:3px;
  background:var(--teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease);
}
.qa[open] summary{ color:var(--teal-text); }
.qa[open] summary::after{ transform:rotate(135deg); }
.qa__a{ padding:0 0 24px; max-width:70ch; }
.qa__a p{ color:var(--muted); margin:0 0 .9em; }
.qa__a p:last-child{ margin-bottom:0; }
.qa__a strong{ color:var(--charcoal); }
.qa__a .link{ padding:7px 0; }

.askus{
  margin-top:clamp(38px,5vw,54px); text-align:center;
  padding:clamp(30px,4.5vw,46px) clamp(22px,4vw,38px);
  border:1px solid var(--teal-line); border-radius:var(--r-lg);
  background:var(--teal-soft);
}
.askus h3{ font-size:clamp(1.5rem,4.2vw,2rem); margin:0 0 12px; }
.askus p{ color:var(--text); max-width:50ch; margin:0 auto 24px; }
.askus__btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------------------------------------------------------------- before/after */
.ba{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--grey);
  aspect-ratio:16/10; touch-action:pan-y; box-shadow:var(--shadow);
}
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__clip{ position:absolute; inset:0; width:50%; overflow:hidden; }
.ba__clip .ba__img{ width:100vw; max-width:none; }

.ba__bar{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:#fff; transform:translateX(-1px); pointer-events:none;
  box-shadow:0 0 0 1px rgba(24,32,39,.14);
}
.ba__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--teal-text); border:2px solid #fff;
  box-shadow:0 8px 22px -6px rgba(24,32,39,.5);
}
.ba__grip::before, .ba__grip::after{
  content:""; position:absolute; top:50%; width:0; height:0; border-block:5px solid transparent;
}
.ba__grip::before{ left:12px; border-right:7px solid #fff; transform:translateY(-50%); }
.ba__grip::after{ right:12px; border-left:7px solid #fff; transform:translateY(-50%); }

.ba__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none;
}
.ba__tag{
  position:absolute; bottom:14px; padding:6px 12px; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  background:rgba(255,255,255,.95); border:1px solid var(--line); color:var(--charcoal);
  pointer-events:none;
}
.ba__tag--l{ left:14px; }
.ba__tag--r{ right:14px; }

/* =========================================================================
   QUICK QUOTE
   The strongest section on the page: light grey ground, white card,
   teal for everything the visitor has chosen.
   ========================================================================= */
.quote{
  position:relative; overflow:hidden;
  padding:var(--pad-y) 0 calc(var(--pad-y) * .85);
  background:var(--grey);
  border-block:1px solid var(--line);
}
.quote__glow{
  position:absolute; left:50%; top:-30%; width:min(1100px,140vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(21,152,168,.08) 0%, transparent 62%);
  pointer-events:none;
}
.quote__in{ position:relative; max-width:880px; }
.quote__head{ text-align:center; margin-bottom:clamp(30px,4.5vw,44px); }
.quote__h2{ font-size:clamp(2.1rem,6vw,3.4rem); margin:0 0 16px; }
.quote__lede{ color:var(--muted); max-width:52ch; margin:0 auto; font-size:clamp(1.02rem,2.3vw,1.14rem); }

.quote__ticks{
  list-style:none; margin:22px auto 0; padding:0; width:max-content; max-width:100%;
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  font-size:.9rem; color:var(--muted); text-align:left;
}
@media (min-width:700px){
  .quote__ticks{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px 22px; }
}
.quote__ticks li{ display:flex; align-items:flex-start; gap:8px; }
.quote__ticks li::before{
  content:""; width:16px; height:16px; flex:0 0 auto; border-radius:50%; margin-top:.2em;
  background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231598A8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

.formcard{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(20px,3.2vw,34px);
  box-shadow:var(--shadow-lg);
}
.formcard__mount{ min-height:260px; }
.fallback__note{ color:var(--muted); text-align:center; }

.quote__alt{
  margin:24px 0 0; color:var(--muted); font-size:.93rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:2px 20px; text-align:center;
}
.quote__alt a{
  color:var(--charcoal); display:inline-block; padding:8px 2px; font-weight:600;
  text-decoration:underline; text-decoration-color:var(--line-2);
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .16s var(--ease), text-decoration-color .16s var(--ease);
}
.quote__alt a:hover{ color:var(--teal-text); text-decoration-color:currentColor; }

/* progress --------------------------------------------------------------- */
.qz{ --gap:12px; }
.qz__bar{ display:flex; gap:6px; margin:0 0 26px; }
.qz__seg{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:7px; }
.qz__seg i{ display:block; height:3px; border-radius:2px; background:var(--grey-2); transition:background-color .3s var(--ease); }
.qz__seg b{
  font-size:.65rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qz__seg.is-done i{ background:var(--teal-line); }
.qz__seg.is-now i{ background:var(--teal); }
.qz__seg.is-now b{ color:var(--teal-text); }
@media (max-width:620px){ .qz__seg b{ display:none; } .qz__bar{ margin-bottom:20px; } }

.qz__count{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-text); margin:0 0 8px; font-weight:700; }
.qz__h{ font-size:clamp(1.5rem,4.6vw,2rem); margin:0 0 22px; outline:none; }
.qz__lede{ color:var(--muted); margin:-10px 0 22px; font-size:.97rem; }

.qz__q{ margin:0 0 26px; }
.qz__q:last-of-type{ margin-bottom:0; }
.qz__label{ font-size:1.02rem; font-weight:600; letter-spacing:-.02em; margin:0 0 10px; }
.qz__opt{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.qz__hint{ color:var(--muted); font-size:.88rem; margin:-4px 0 12px; }
.qz__hint em{ font-family:inherit; font-style:normal; color:var(--charcoal); }
.qz__hint--c{ text-align:center; margin:10px 0 0; }

.qz__note{
  margin:-12px 0 24px; padding:13px 16px; border-radius:12px;
  font-size:.9rem; color:var(--text);
  background:var(--grey); border:1px solid var(--line);
}
.qz__note--good{ background:var(--teal-soft); border-color:var(--teal-line); }

.qz__err{
  margin:18px 0 0; padding:12px 16px; border-radius:12px; font-size:.9rem;
  color:#9E1247; background:rgba(230,37,104,.06); border:1px solid rgba(230,37,104,.3);
}

/* option buttons --------------------------------------------------------- */
.opts{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); }
.opts--big{ grid-template-columns:1fr; }
@media (min-width:560px){ .opts--big{ grid-template-columns:1fr 1fr; } }

.opt{
  font:inherit; font-weight:500; letter-spacing:-.015em; text-align:left;
  color:var(--charcoal); background:var(--white);
  border:1px solid var(--line-2); border-radius:13px;
  padding:15px 16px; min-height:54px; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  transition:border-color .18s var(--ease), background-color .18s var(--ease),
             box-shadow .18s var(--ease), transform .12s var(--ease);
}
.opt:hover{ border-color:var(--teal-text); background:var(--teal-soft); }
.opt:active{ transform:scale(.985); }
.opt.is-sel{
  border-color:var(--teal-text); background:var(--teal-soft);
  box-shadow:0 0 0 1px var(--teal) inset;
}
.opt.is-sel::after{
  content:"✓"; margin-left:auto; color:var(--teal-text); font-weight:700; font-size:1rem; flex:0 0 auto;
}
.opts--big .opt{
  min-height:98px; justify-content:center; text-align:center;
  font-size:1.14rem; font-weight:600; letter-spacing:-.03em;
}
.opts--big .opt.is-sel::after{ margin-left:8px; }

/* wall cards ------------------------------------------------------------- */
.wall{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--grey); padding:18px 16px 16px; margin-bottom:12px;
}
.wall__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.wall__n{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.wall__a{
  font-size:1.15rem; font-weight:700; letter-spacing:-.03em; color:var(--muted);
  font-variant-numeric:tabular-nums; transition:color .2s var(--ease);
}
.wall__a.is-on{ color:var(--teal-text); }

.wall__dims{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.wall__dims label{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.wall__dims label > span:first-child{ font-size:.82rem; color:var(--muted); }

.dim__in{ position:relative; display:block; }
.dim__in i{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  font-style:normal; color:var(--muted); font-size:.9rem; pointer-events:none;
}
.dim__in input{
  width:100%; font:inherit; font-size:1.25rem; font-weight:600; letter-spacing:-.02em;
  color:var(--charcoal); background:var(--white);
  border:1px solid var(--line-2); border-radius:12px;
  padding:13px 34px 13px 14px; min-height:54px; -moz-appearance:textfield;
  font-variant-numeric:tabular-nums;
}
.dim__in input::-webkit-outer-spin-button,
.dim__in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.dim__in input:focus{ border-color:var(--teal-text); outline:none; box-shadow:0 0 0 3px var(--teal-soft); }

.wall__col{ grid-template-columns:1fr 1fr; gap:10px; }
.wall__col .opt{
  position:relative; justify-content:center; text-align:center;
  min-height:50px; padding:12px 22px 12px 12px; font-size:.94rem;
}
/* the tick sits out of flow so selecting a colour never re-wraps its label */
.wall__col .opt.is-sel::after{ position:absolute; right:9px; margin:0; }

.totalbox{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:16px 0 4px; padding:16px 18px; border-radius:14px;
  border:1px dashed var(--line-2); background:var(--white);
  color:var(--muted); font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  transition:all .25s var(--ease);
}
.totalbox strong{
  font-size:1.5rem; font-weight:700; letter-spacing:-.035em; text-transform:none;
  color:var(--teal-text); font-variant-numeric:tabular-nums;
}
.totalbox.is-on{ border-style:solid; border-color:var(--teal-line); background:var(--teal-soft); }

.stepper{ display:flex; align-items:center; gap:10px; max-width:230px; }
.stepper__b{
  width:54px; height:54px; flex:0 0 auto; border-radius:13px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--white); color:var(--charcoal);
  font-size:1.4rem; line-height:1;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.stepper__b:hover{ border-color:var(--teal-text); color:var(--teal-text); background:var(--teal-soft); }
.stepper input{
  flex:1 1 auto; width:100%; min-width:0; min-height:54px; text-align:center;
  font:inherit; font-size:1.3rem; font-weight:700; letter-spacing:-.03em;
  color:var(--charcoal); background:var(--white);
  border:1px solid var(--line-2); border-radius:13px; -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.linkish{
  font:inherit; font-weight:600; color:var(--teal-text);
  background:none; border:0; padding:5px 0; cursor:pointer; text-align:left;
  border-bottom:1px solid transparent;
}
.linkish:hover{ border-bottom-color:currentColor; }

/* the estimate ----------------------------------------------------------- */
.est{
  text-align:center; padding:clamp(26px,4vw,40px) clamp(18px,3vw,28px);
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--grey);
}
.est__eyebrow{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; font-weight:700; }
.est__eyebrow--price{ margin-top:24px; color:var(--teal-text); }
.est__sum{ font-size:1.05rem; color:var(--charcoal); margin:0 0 6px; font-weight:600; letter-spacing:-.02em; }
.est__sum span{ color:var(--line-2); margin:0 4px; }
.est__was{ font-size:.92rem; color:var(--muted); margin:0 0 4px; }
.est__was s{ text-decoration-color:var(--line-2); }

.est__price{
  font-size:clamp(3rem,13vw,4.6rem); font-weight:700; letter-spacing:-.05em;
  line-height:1; margin:0 0 10px; color:var(--charcoal);
}
.est__vat{ font-size:.24em; font-weight:600; letter-spacing:-.01em; color:var(--muted); vertical-align:middle; }

/* teal, never a bright "discount green" */
.est__badge{
  display:inline-block; margin:2px 0 12px; padding:8px 15px; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--teal-text); background:var(--white); border:1px solid var(--teal-line);
}
.est__savetext{ font-size:.92rem; color:var(--muted); max-width:44ch; margin:0 auto 18px; }
.est__savetext strong{ color:var(--charcoal); }
.est__rate{ font-size:.87rem; color:var(--muted); margin:0 0 20px; }
.est__look{ font-size:clamp(1.6rem,5.4vw,2.2rem); margin:6px 0 14px; }
.est--look p{ color:var(--muted); max-width:44ch; margin-inline:auto; }
.est__small{ font-size:.87rem; color:var(--muted); max-width:48ch; margin:0 auto 20px; }

.est__checks{
  list-style:none; margin:0 0 20px; padding:0;
  display:grid; gap:8px; justify-content:center; text-align:left;
  width:max-content; max-width:100%; margin-inline:auto;
}
.est__checks li{ display:flex; align-items:flex-start; gap:9px; font-size:.92rem; color:var(--charcoal); }
.est__checks li::before{
  content:""; width:17px; height:17px; flex:0 0 auto; border-radius:50%; margin-top:.18em;
  background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231598A8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

.est__badges{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.est__badges li{
  font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--teal-text); background:var(--white);
  border:1px solid var(--teal-line); border-radius:999px; padding:7px 13px;
}

.est__biz{
  margin:24px -6px -6px; padding:20px; border-radius:14px; text-align:left;
  background:var(--white); border:1px solid var(--line);
}
.est__biz strong{ display:block; margin-bottom:5px; letter-spacing:-.02em; color:var(--charcoal); }
.est__biz p{ margin:0; color:var(--muted); font-size:.92rem; }
.est__biz2{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:.87rem; }

.mockcta{
  margin-top:16px; padding:22px clamp(18px,3vw,26px); border-radius:var(--r-lg);
  border:1px solid var(--teal-line); background:var(--teal-soft); text-align:center;
}
.mockcta h4{ font-size:1.1rem; margin:0 0 8px; }
.mockcta p{ margin:0; color:var(--muted); font-size:.93rem; max-width:46ch; margin-inline:auto; }

/* uploads ---------------------------------------------------------------- */
.drop{
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  padding:26px 18px; border-radius:14px; text-align:center;
  border:1.5px dashed var(--line-2); background:var(--grey);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.drop:hover, .drop:focus-within{ border-color:var(--teal-text); background:var(--teal-soft); }
.drop input{ position:absolute; width:1px; height:1px; opacity:0; }
.drop__ico{ font-size:1.5rem; color:var(--teal-text); line-height:1; margin-bottom:4px; }
.drop__t{ font-weight:600; letter-spacing:-.02em; color:var(--charcoal); }
.drop__s{ font-size:.84rem; color:var(--muted); }

.thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.thumb{ position:relative; width:80px; height:80px; border-radius:11px; overflow:hidden; border:1px solid var(--line); }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb__x{
  position:absolute; top:3px; right:3px; width:24px; height:24px; border-radius:50%;
  border:0; cursor:pointer; font-size:15px; line-height:1;
  background:rgba(24,32,39,.78); color:#fff;
}

/* text fields ------------------------------------------------------------ */
.fields{ display:grid; gap:var(--gap); grid-template-columns:1fr; margin-bottom:26px; }
@media (min-width:560px){ .fields{ grid-template-columns:1fr 1fr; } }
.fld{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.fld--wide{ grid-column:1/-1; }
.fld > span{ font-size:.85rem; color:var(--muted); }
.fld > span i{ font-style:normal; opacity:.7; }
.fld input,
.qz textarea{
  width:100%; font:inherit; color:var(--charcoal);
  background:var(--white); border:1px solid var(--line-2); border-radius:13px;
  padding:14px 16px; min-height:54px;
}
.qz textarea{ resize:vertical; line-height:1.55; }
.fld input:focus, .qz textarea:focus{ border-color:var(--teal-text); outline:none; box-shadow:0 0 0 3px var(--teal-soft); }
.fld input::placeholder, .qz textarea::placeholder{ color:#9AA3A8; }

.consent{ font-size:.84rem; color:var(--muted); margin:22px 0 0; }
.consent a{ color:var(--charcoal); }

.qz__nav{ display:flex; gap:10px; margin-top:28px; }
.qz__nav .btn:last-child{ flex:1 1 auto; }
.qz__reassure{ text-align:center; font-size:.8rem; color:var(--muted); margin:14px 0 0; }

/* confirmation ----------------------------------------------------------- */
.done{ text-align:center; padding:clamp(18px,3vw,26px) 0; }
.done__tick{
  width:60px; height:60px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; font-size:1.7rem; color:#fff;
  background:var(--teal-text); box-shadow:0 14px 34px -14px rgba(21,152,168,.9);
}
.done h3{ font-size:clamp(1.6rem,5.4vw,2.3rem); margin:0 0 26px; }
.done__eyebrow{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-text); margin:0 0 6px; font-weight:700; }
.done__price{ font-size:clamp(2.4rem,10vw,3.4rem); font-weight:700; letter-spacing:-.05em; line-height:1; margin:0 0 30px; color:var(--charcoal); }
.done__price--sm{ font-size:clamp(1.4rem,5vw,1.9rem); letter-spacing:-.035em; }
.done h4{ font-size:1.05rem; margin:0 0 12px; }
.done__list{ text-align:left; max-width:44ch; margin:0 auto; padding-left:20px; color:var(--muted); display:grid; gap:6px; font-size:.95rem; }
.done__no{ margin:18px 0 0; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--teal-text); font-weight:700; }
.done__biz{
  margin:24px auto 0; max-width:48ch; padding:18px; border-radius:14px;
  background:var(--teal-soft); border:1px solid var(--teal-line);
  color:var(--text); font-size:.93rem;
}
.done__fallback{
  margin:28px 0 0; padding:22px; border-radius:14px; text-align:left;
  background:var(--grey); border:1px solid var(--line-2);
}
.done__fallback p{ font-size:.92rem; color:var(--muted); }
.done__fallback .btn{ width:100%; margin-top:6px; }

/* =========================================================================
   OPTIONAL WALL PREVIEW
   ========================================================================= */
.pv{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(24,32,39,.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  overflow:auto;
}
.pv.is-on{ display:block; }
.pv__panel{
  max-width:680px; margin:0 auto; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.pv__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.pv__top h3{ font-size:1.1rem; margin:0; }
.pv__x{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--white); color:var(--charcoal); font-size:20px; cursor:pointer;
}
.pv__x:hover{ border-color:var(--teal-text); color:var(--teal-text); }
.pv__stage{ position:relative; background:var(--grey); }
.pv__cv{ display:block; width:100%; touch-action:none; }
.pv__empty{ position:absolute; inset:0; display:grid; place-items:center; margin:0; color:var(--muted); font-size:.92rem; pointer-events:none; }
.pv__controls{ padding:18px; display:grid; gap:14px; }
.pv__row{ display:flex; gap:10px; }
.pv__row > *{ flex:1 1 0; }
.pv__file{
  display:flex; align-items:center; justify-content:center; min-height:48px; cursor:pointer;
  border:1px dashed var(--line-2); border-radius:12px; font-size:.92rem; font-weight:600;
  color:var(--charcoal);
}
.pv__file:hover{ border-color:var(--teal-text); color:var(--teal-text); }
.pv__file input{ position:absolute; width:1px; height:1px; opacity:0; }
.pv__slider{ display:grid; grid-template-columns:64px 1fr; align-items:center; gap:12px; font-size:.86rem; color:var(--muted); }
.pv__slider input{ width:100%; accent-color:var(--teal-text); height:34px; }
.pv__note{ font-size:.82rem; color:var(--muted); margin:0; }

/* =========================================================================
   FOOTER — the one deliberately dark section
   ========================================================================= */
.foot{ background:var(--charcoal); color:#C7CDD1; padding:clamp(50px,6vw,76px) 0 30px; }
.foot__in{ display:grid; gap:38px; }
@media (min-width:800px){ .foot__in{ grid-template-columns:1.7fr 1fr 1fr; gap:44px; } }

.foot__logo{ display:block; line-height:0; margin-bottom:20px; }
.foot__logo img{ width:min(258px, 72%); height:auto; }
.foot__brand p{ color:#98A2A8; font-size:.92rem; margin:0 0 14px; max-width:44ch; }
.foot__tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--teal-text); margin:0;
}
.foot h4{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#7E888E; margin:0 0 14px; font-weight:700; }
.foot__nav, .foot__contact{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; font-size:.94rem; }
.foot__nav a, .foot__contact a{
  color:#C7CDD1; text-decoration:none; transition:color .16s var(--ease);
  display:inline-flex; align-items:center; min-height:40px;
}
.foot__nav a:hover, .foot__contact a:hover{ color:#fff; }
.foot__contact a.foot__btn{ margin-top:12px; color:#fff; }
.foot__contact a.foot__btn:hover{ color:#fff; }

.foot__base{
  margin-top:clamp(36px,5vw,54px); padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-size:.8rem; color:#7E888E;
}
.foot__base p{ margin:0; }
.foot__base a{ color:#98A2A8; }
.foot__legal{ max-width:60ch; }

/* ---------------------------------------------------------------- sticky */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .3s var(--ease);
}
.sticky .btn{ width:100%; }
.sticky.is-on{ transform:none; }
@media (min-width:860px){ .sticky{ display:none; } }

/* ---------------------------------------------------------------- reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

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