/* =========================================================
   Tokens
   ========================================================= */
:root{
  /* === Surfaces === */
  --bg: #FAFAFA;                   /* page canvas */
  --bg-alt: #F1F4F8;               /* section alt — faint blue cast, ties to brand */
  --surface: #FFFFFF;              /* cards, form, elevated surfaces */

  /* === Borders === */
  --line: #E2E6EB;                 /* hairline borders */
  --line-soft: #ECEFF3;            /* very soft dividers */

  /* === Ink (text) === */
  --ink: #0E1B3D;                  /* deep navy — headings & primary text (brand) */
  --ink-soft: #3F4A60;             /* body text — cool gray */
  --ink-mute: #5E6772;             /* captions, eyebrows, muted (AA ≥ 5.2:1) */

  /* === Brand === */
  --primary: #1E40AF;              /* royal blue — single primary brand color */
  --primary-dark: #16307C;         /* hover / pressed */
  --primary-soft: #DDE6F7;         /* very subtle blue tint */

  --accent: #5DADE2;               /* sky blue — supporting accent (non-text) */
  --accent-soft: #E6F2FB;          /* hover bgs, light accent fills */

  --on-primary: #FFFFFF;           /* text on primary-coloured surfaces */

  --container: 1180px;
  --pad-x: clamp(20px, 4vw, 56px);

  --t-fast: 180ms cubic-bezier(.2,.7,.2,1);
  --t-med:  360ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 720ms cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter','Neue Haas Grotesk','Söhne',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:2px;
}
button{ font:inherit; color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff; padding:8px 12px; z-index:1000;
}
.skip-link:focus{ left:12px; top:12px; }

h1,h2,h3{ font-weight:300; letter-spacing:-.01em; margin:0; }
h1{ font-size:clamp(2.2rem, 5.2vw, 4.2rem); line-height:1.05; }
h2{ font-size:clamp(1.6rem, 2.8vw, 2.4rem); line-height:1.15; }
h3{ font-size:1.125rem; font-weight:400; letter-spacing:0; }
p{ margin:0 0 1rem; color:var(--ink-soft); }
p:last-child{ margin-bottom:0; }
.thin{ font-weight:200; color:var(--ink-mute); }

.eyebrow{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 .75rem; font-weight:500;
}
.muted{ color:var(--ink-mute); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:999px;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-size:.92rem; font-weight:500; letter-spacing:.01em;
  cursor:pointer; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-decoration:none;
}
.btn:hover{ background:var(--ink); color:#fff; }
.btn-accent{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn-accent:hover{ background:var(--primary-dark); border-color:var(--primary-dark); color:var(--on-primary); }
.btn-outline{ background:transparent; }
.btn-sm{ padding:9px 16px; font-size:.85rem; }

.link-accent{
  display:inline-block; margin-top:.5rem;
  color:var(--ink); font-weight:500;
  border-bottom:1px solid var(--primary);
  padding-bottom:2px;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.link-accent:hover{ color:var(--primary); border-bottom-color:var(--primary-dark); }

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(250,250,250,.9);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:none;
  margin:0;
  padding:14px var(--pad-x) 14px 0;   /* flush-left: no left padding, keep right */
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.98rem; letter-spacing:.02em; color:var(--ink);
}
.brand-logo{
  width:170px; height:auto; flex:0 0 170px;
  display:block;
}
.brand-footer .brand-logo{ width:260px; flex-basis:260px; }
@media (max-width: 480px){
  .brand-logo{ width:140px; flex-basis:140px; }
}

.nav-menu{
  display:flex; align-items:center; gap:28px;
}
.nav-menu a{
  font-size:.93rem; letter-spacing:.01em; color:inherit; padding:8px 0;
  border-bottom:1px solid transparent; transition:color var(--t-fast), border-color var(--t-fast);
}
.nav-menu a:hover{ color:var(--primary); }
.nav-menu .btn{ color:var(--on-primary); }

.nav-toggle{
  display:none; width:40px; height:40px; padding:0;
  background:transparent; border:0; cursor:pointer;
  position:relative;
}
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:1px;
  background:var(--ink); transition:transform var(--t-fast), opacity var(--t-fast), top var(--t-fast), background var(--t-fast);
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:120px var(--pad-x) 80px;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  /* Airy royal-blue gradient — light upper-left fading into deeper brand navy.
     Uses brand-family hues so the hero ties to the palette without shouting. */
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(50% 40% at 85% 75%, rgba(93,173,226,.45) 0%, rgba(93,173,226,0) 60%),
    linear-gradient(135deg, #C9D6EC 0%, #7C95C4 45%, #2F4790 100%);
}
.hero-bg::after{
  /* subtle frosted glass texture overlay */
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(25deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 11px);
  mix-blend-mode:overlay;
  pointer-events:none;
}
/* Optional: swap in a real photo by uncommenting and setting your image URL
.hero-bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05) 40%, rgba(0,0,0,.25)),
    url('assets/hero.jpg') center/cover no-repeat;
}
*/

.hero-content{
  position:relative;
  max-width:var(--container);
  width:100%; margin:0 auto;
}
.hero-title{
  color:#fff;
  font-weight:200;
  letter-spacing:-.015em;
  max-width:18ch;
  text-shadow:0 2px 30px rgba(0,0,0,.18);
}
.hero-title .thin{ color:rgba(255,255,255,.78); }
.hero-sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(1rem, 1.4vw, 1.15rem);
  max-width:46ch;
  margin:1.25rem 0 2rem;
  text-shadow:0 1px 18px rgba(0,0,0,.15);
}

.hero-scroll{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  width:1px; height:48px; background:rgba(255,255,255,.5);
  overflow:hidden;
}
.hero-scroll span{
  position:absolute; top:0; left:0; width:1px; height:24px; background:#fff;
  animation:scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint{
  0%{ transform:translateY(-100%); }
  100%{ transform:translateY(200%); }
}

/* =========================================================
   Sections
   ========================================================= */
.section{
  padding: clamp(72px, 10vw, 128px) var(--pad-x);
}
.section-alt{
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{
  max-width:var(--container);
  margin:0 auto clamp(40px, 5vw, 64px);
}
.section > .accordion,
.section > .price-grid,
.section > .quote-form-wrap,
.section > .gallery,
.section > .quotes,
.section > .area-list,
.section > .steps{
  max-width:var(--container);
  margin-left:auto; margin-right:auto;
}

/* =========================================================
   Reveal on scroll — gated on .js so content stays visible
   if JavaScript fails or is disabled
   ========================================================= */
.js .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--t-slow), transform var(--t-slow);
}
.js .reveal.is-in{
  opacity:1; transform:none;
}

/* =========================================================
   Accordion
   ========================================================= */
.accordion{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
.accordion-narrow{ max-width:780px; }
.accordion-item{
  border-bottom:1px solid var(--line);
}
.accordion-trigger{
  width:100%; background:transparent; border:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 4px; gap:24px;
  font-size:1.05rem; font-weight:400; letter-spacing:.005em; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:color var(--t-fast);
}
.accordion-trigger:hover{ color:var(--primary); }
.accordion-trigger .chev{
  width:14px; height:14px; position:relative; flex:0 0 14px;
  transition:transform var(--t-med);
}
.accordion-trigger .chev::before,
.accordion-trigger .chev::after{
  content:""; position:absolute; top:50%; left:50%;
  width:10px; height:1px; background:var(--ink);
  transform-origin:center;
}
.accordion-trigger .chev::before{ transform:translate(-50%,-50%); }
.accordion-trigger .chev::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform var(--t-med); }
.accordion-trigger[aria-expanded="true"] .chev::after{ transform:translate(-50%,-50%) rotate(0deg); }

.accordion-panel{
  padding:0 4px 22px;
  max-width:72ch;
  color:var(--ink-soft);
  animation:panelIn var(--t-med) ease both;
}
@keyframes panelIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}

/* =========================================================
   Steps (How it works)
   ========================================================= */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;
}
.steps li{
  padding:32px 8px; border-top:1px solid var(--line);
}
.step-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; color:var(--ink); margin-bottom:14px;
}
.step-icon svg{ width:28px; height:28px; }
.steps h3{ margin-bottom:.35rem; }

/* =========================================================
   Pricing
   ========================================================= */
.price-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  margin-bottom:64px;
}
.price-grid-two{
  grid-template-columns:repeat(2, minmax(0, 360px));
  justify-content:center;
}
.price-card{
  padding:36px 28px;
  background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:border-color var(--t-fast), transform var(--t-fast);
}
.price-card:hover{ border-color:var(--primary); }
.price-card-feature{ border-color:var(--ink); }
.price-card h3{ font-weight:500; }
.price{
  font-size:2.1rem; font-weight:200; letter-spacing:-.02em;
  margin:.5rem 0 1.25rem; color:var(--ink);
}
.price-from{
  display:block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:4px; font-weight:500;
}
.price-unit{ font-size:.9rem; color:var(--ink-mute); margin-left:4px; }
.price-card ul{
  list-style:none; padding:0; margin:0 0 1.75rem;
  display:flex; flex-direction:column; gap:.5rem;
  color:var(--ink-soft); font-size:.95rem;
}
.price-card ul li{
  padding-left:18px; position:relative;
}
.price-card ul li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:8px; height:1px; background:var(--ink-mute);
}
.price-card .btn{ margin-top:auto; align-self:flex-start; }

/* =========================================================
   Quote form
   ========================================================= */
.quote-form-wrap{
  background:#fff; border:1px solid var(--line); padding:clamp(28px, 4vw, 48px);
}
.quote-title{
  font-size:1.4rem; font-weight:400; margin-bottom:1.75rem;
}
.quote-form{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field-full{ grid-column:1 / -1; }
.field label{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500;
}
.field input, .field select, .field textarea{
  font:inherit; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:10px 0; width:100%;
  transition:border-color var(--t-fast);
}
.field textarea{ resize:vertical; min-height:60px; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-bottom-color:var(--ink);
}
.field input:focus:not(:focus-visible),
.field select:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible){
  outline:none;
}
.field-actions{
  display:flex; align-items:center; gap:20px; margin-top:8px; flex-wrap:wrap;
}
.form-note{ margin:0; color:var(--ink-mute); font-size:.9rem; }

/* =========================================================
   Gallery (before/after)
   ========================================================= */
.section > .gallery{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px;
  max-width:960px; margin-left:auto; margin-right:auto;
}
.ba{
  position:relative; aspect-ratio:4/3;
  overflow:hidden; border:1px solid var(--line);
  background:#000;
  isolation:isolate;
  --pos:50%;
}
.ba-before, .ba-after{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; padding:14px;
}
/* Placeholder visuals for before/after — swap with real <img> if desired */
.ba-before{
  background:url('assets/before-1.png') center/cover no-repeat;
}
.ba-after{
  background:url('assets/after-1.png') center/cover no-repeat;
  clip-path:inset(0 0 0 var(--pos));
}
.ba-2 .ba-before{ background:url('assets/before-2.png') center/cover no-repeat; }
.ba-2 .ba-after{ background:url('assets/after-2.png') center/cover no-repeat; clip-path:inset(0 0 0 var(--pos)); }
.ba-3 .ba-before{ background:url('assets/before-3.png') center/cover no-repeat; }
.ba-3 .ba-after{ background:url('assets/after-3.png') center/cover no-repeat; clip-path:inset(0 0 0 var(--pos)); }

.ba-tag{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,.35); padding:4px 8px;
  backdrop-filter:blur(4px);
}
.ba-after .ba-tag{ background:rgba(0,0,0,.25); margin-left:auto; }
.ba input[type=range]{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; opacity:0; cursor:ew-resize; z-index:3;
}
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:1px; background:rgba(255,255,255,.85);
  transform:translateX(-.5px);
  pointer-events:none; z-index:2;
}
.ba-handle::before{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.95); border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 12px rgba(0,0,0,.18);
}
.ba-handle::after{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:10px; height:10px;
  border-left:1px solid var(--ink); border-right:1px solid var(--ink);
}

/* =========================================================
   Quotes / testimonials
   ========================================================= */
.quotes{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  justify-content:center; gap:64px;
  max-width:880px; margin-left:auto; margin-right:auto;
  text-align:center;
}
.quotes blockquote{
  margin:0; padding:0;
}
.quotes blockquote p{
  font-style:italic; font-weight:300;
  font-size:clamp(1rem, 1.4vw, 1.15rem);
  color:var(--ink);
  max-width:36ch; margin:0 auto 1rem;
}
.quotes cite{
  font-style:normal; font-size:.85rem; letter-spacing:.06em;
  color:var(--ink-mute);
}

/* =========================================================
   Service area
   ========================================================= */
.area-list{
  max-width:680px;
  text-align:center;
}
.area-list ul{
  list-style:none; padding:0;
  margin:1.25rem 0 1.5rem;
  border-top:1px solid var(--line);
  text-align:left;
}
.area-list li{
  padding:14px 0; border-bottom:1px solid var(--line);
  font-size:.95rem;
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:64px var(--pad-x) 32px;
}
.footer-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:40px;
}
.brand-footer{ font-size:1rem; margin:0 0 .5rem; }
.footer-label{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 .75rem; font-weight:500;
}
.footer-col p{ margin:0 0 .4rem; font-size:.95rem; }
.footer-col a{ color:var(--ink); border-bottom:1px solid transparent; transition:border-color var(--t-fast); }
.footer-col a:hover{ border-bottom-color:var(--primary); }
.socials{ display:flex; gap:14px; margin-bottom:1rem !important; }
.socials a{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; color:var(--ink);
  transition:border-color var(--t-fast), color var(--t-fast);
}
.socials a:hover{ border-color:var(--primary); color:var(--primary); }
.socials svg{ width:16px; height:16px; }
.footer-base{
  max-width:var(--container); margin:48px auto 0;
  padding-top:24px; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--ink-mute);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 880px){
  .nav-toggle{ display:inline-block; }
  .nav-menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:8px 0;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    visibility:hidden;                                         /* removes links from tab order when closed */
    transition:transform var(--t-med), opacity var(--t-med), visibility 0s linear var(--t-med);
  }
  .nav-menu a{
    padding:14px var(--pad-x); border-bottom:1px solid var(--line-soft);
    color:var(--ink) !important; text-shadow:none !important;
  }
  .nav-menu a:last-child{ border-bottom:0; margin:12px var(--pad-x); text-align:center; }
  .nav.open .nav-menu{
    transform:none; opacity:1; pointer-events:auto;
    visibility:visible;
    transition:transform var(--t-med), opacity var(--t-med), visibility 0s linear 0s;
  }
  .nav.open{ background:#fff; border-bottom-color:var(--line); }
  .nav.open .brand{ color:var(--ink); text-shadow:none; }
  .nav.open .nav-toggle span{ background:var(--ink); }

  .steps{ grid-template-columns:repeat(2, 1fr); gap:0; }
  .price-grid{ grid-template-columns:1fr; }
  .quote-form{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; gap:36px; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 480px){
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .steps{ grid-template-columns:1fr; }
}