/* ============================================================
   Piper Plumbing — shared stylesheet
   Used by every page. Edit colors/fonts once, here.
   ============================================================ */

/* ---- Brand fonts (self-hosted, matching piperplumbing.co) ---- */
@font-face{
  font-family:"Rhode";                       /* headings / display */
  src:url("fonts/Rhode-MediumCondensed.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Muller";                      /* body text — regular */
  src:url("fonts/Muller-Regular.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Muller";                      /* body text — bold */
  src:url("fonts/MullerBold.woff2") format("woff2");
  font-weight:700 900;font-style:normal;font-display:swap;
}

/* ---- Global design system (all pages) ---- */
  :root{
    --paper:#F1F5F8;
    --paper-2:#E7EDF2;
    --ink:#0E1A22;
    --ink-soft:#41535e;
    --slate:#5B7C99;        /* Complimentary Blue — PMS 5415 C */
    --slate-700:#456079;    /* darker blue — hover / depth */
    --slate-300:#A2B4BF;    /* Steel Blue — PMS 5455 C */
    --steel:#A2B4BF;        /* Steel Blue — PMS 5455 C (primary buttons) */
    --blue:#5B7C99;         /* Complimentary Blue — PMS 5415 C (accents/links) */
    --navy:#061117;
    --white:#ffffff;
    --line:#d6e0e8;
    --shadow:0 18px 50px -24px rgba(14,26,34,.45);
    --shadow-sm:0 8px 24px -16px rgba(14,26,34,.5);
    --r:14px;
    --maxw:1180px;
    --display:"Rhode","Montserrat",system-ui,sans-serif;
    --body:"Muller","Mulish",system-ui,sans-serif;
    --script:"Yellowtail",cursive;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--body);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-.015em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
  .skip:focus{left:16px;top:16px}

  /* ---- starburst signature mark ---- */
  .star{display:inline-block;width:1em;height:1em;vertical-align:-.12em;color:var(--slate)}
  .star svg{width:100%;height:100%;display:block;fill:currentColor}

  .eyebrow{
    font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--slate-700);
    display:inline-flex;align-items:center;gap:.55em;margin:0 0 18px;
  }
  .eyebrow .star{color:var(--slate);width:.85em;height:.85em}

  /* ---- buttons ---- */
  .btn{
    display:inline-flex;align-items:center;gap:.55em;justify-content:center;
    font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:.01em;
    padding:15px 26px;border-radius:10px;border:2px solid transparent;cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--steel);color:var(--ink);box-shadow:var(--shadow-sm)}
  .btn-primary:hover{background:var(--slate);color:#fff;transform:translateY(-2px)}
  .btn-rust{background:var(--steel);color:var(--ink);box-shadow:0 10px 26px -14px rgba(92,126,153,.55)}
  .btn-rust:hover{background:var(--slate);color:#fff;transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--slate-300)}
  .btn-ghost:hover{border-color:var(--slate);color:var(--slate-700);transform:translateY(-2px)}

  /* ---- utility bar ---- */
  .topbar{background:var(--ink);color:#cdd9e1;font-size:.86rem}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
  .topbar a{color:#fff;font-weight:700}
  .topbar .loc{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;letter-spacing:.01em}
  .topbar .call{display:inline-flex;align-items:center;gap:.5em}
  .topbar .call b{font-family:var(--display)}

  /* ---- header / nav ---- */
  header.site{position:sticky;top:0;z-index:100;background:rgba(241,245,248,.86);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:box-shadow .25s ease,border-color .25s ease}
  header.site.scrolled{box-shadow:0 6px 22px -18px rgba(14,26,34,.7);border-color:var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
  .nav-links{display:flex;align-items:center;gap:30px}
  .nav-links a{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);position:relative;padding:4px 0}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--slate);transition:right .25s ease}
  .nav-links a:hover::after,.nav-links a:focus-visible::after{right:0}
  .nav-right{display:flex;align-items:center;gap:18px}

  /* logo lockup */
  .logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--ink);gap:1px;padding:2px 4px}
  .logo .tier{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;color:var(--slate-700)}
  .logo .tier .star{width:.7em;height:.7em;color:var(--slate)}
  .logo .name{font-family:var(--script);font-size:1.95rem;line-height:.82;text-align:center}
  .logo .name span{display:block}
  .logo .name span:last-child{margin-left:.5em;margin-top:-.06em}
  /* image logo (replaces the text lockup above) */
  .logo{padding:0}
  .logo-img{display:block;height:56px;width:auto}
  @media (max-width:640px){ .logo-img{height:46px} }

  .hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
  .hamburger svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

  /* ---- hero ---- */
  .hero{position:relative;overflow:hidden}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;padding-top:54px;padding-bottom:66px}
  .hero h1{font-weight:800;font-size:clamp(2.4rem,5vw,3.7rem);letter-spacing:-.03em}
  .hero h1 .accent{color:var(--slate)}
  .hero .lede{font-family:var(--display);font-style:italic;font-weight:700;font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--ink);margin:18px 0 14px;line-height:1.18}
  .hero p.body{color:var(--ink-soft);max-width:38ch;margin:0 0 26px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
  .trust{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .trust .pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:50px;padding:8px 14px;font-size:.78rem;font-weight:700;font-family:var(--display);color:var(--ink-soft);box-shadow:var(--shadow-sm)}
  .trust .dot{width:9px;height:9px;border-radius:50%}
  .trust .g{background:var(--steel)}.trust .b{background:var(--slate)}.trust .y{background:var(--ink)}

  .hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:600px}
  .hero-art .disc{position:absolute;width:min(94%,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff, #e6edf2 72%);top:50%;left:50%;transform:translate(-50%,-46%);z-index:0}
  .hero-art img{position:relative;z-index:2;width:auto;max-width:100%;height:min(96%,600px);object-fit:contain;filter:drop-shadow(0 30px 40px rgba(14,26,34,.22))}
  .hero-art .orbit{position:absolute;z-index:1;color:var(--slate);opacity:.55}
  .hero-art .o1{top:8%;left:18%;width:24px;height:24px}
  .hero-art .o2{top:24%;right:10%;width:16px;height:16px;opacity:.4}
  .hero-art .o3{bottom:18%;left:8%;width:18px;height:18px;opacity:.45}

  #top,#quote,#services,#booking,#expect{scroll-margin-top:96px}
  /* ---- white quick consultation form ---- */
  .quote{position:relative;z-index:5}
  .quote .wrap{padding:0 24px}
  .quote-card{
    background:#fff;border:1px solid var(--line);border-radius:20px;
    box-shadow:var(--shadow);padding:30px 34px;margin-top:-44px;
  }
  .quote-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
  .quote-head h2{font-weight:800;font-size:clamp(1.4rem,2.6vw,1.85rem)}
  .quote-head .eyebrow{margin:0}
  .quote-head .sub{color:var(--ink-soft);font-size:.96rem;margin:0;flex:1 1 220px}
  .quote-form{display:grid;grid-template-columns:1fr 1fr 1.1fr auto;gap:14px;align-items:end}
  .qfield{display:flex;flex-direction:column}
  .qfield label{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.02em;color:var(--ink-soft);margin-bottom:7px}
  .qfield input,.qfield select{
    width:100%;padding:14px 15px;border-radius:10px;border:1.5px solid var(--line);
    background:#fff;color:var(--ink);font-family:var(--body);font-size:1rem;
    transition:border-color .16s ease,box-shadow .16s ease;
  }
  .qfield input::placeholder{color:#9aa9b3}
  .qfield input:focus,.qfield select:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 3px rgba(92,126,153,.18)}
  .qfield select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7E99' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
  .quote-form .submit{height:52px;padding:0 28px}
  .quote-reassure{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:.85rem;color:var(--ink-soft)}
  .quote-reassure svg{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:var(--slate);stroke-width:2}
  .quote-success{display:none;align-items:center;gap:16px;padding:6px 2px}
  .quote-success .tick{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--slate);display:grid;place-items:center}
  .quote-success .tick svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .quote-success h3{font-family:var(--display);font-weight:800;font-size:1.25rem;margin:0 0 3px}
  .quote-success p{margin:0;color:var(--ink-soft);font-size:.95rem}
  .quote-card.done .quote-form,.quote-card.done .quote-reassure{display:none}
  .quote-card.done .quote-success{display:flex}

  /* ---- fixed mobile call bar ---- */
  .callbar{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
    align-items:center;justify-content:center;gap:.55em;
    background:var(--slate);color:#fff;text-decoration:none;
    font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:.01em;
    padding:16px 18px;padding-bottom:calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px -14px rgba(14,26,34,.6);
  }
  .callbar svg{width:22px;height:22px;fill:currentColor;flex:0 0 22px}
  .callbar:active{filter:brightness(.93)}

  /* ---- services strip ---- */
  .services{padding:68px 0 30px}
  .sec-head{max-width:640px;margin-bottom:34px}
  .sec-head h2{font-weight:800;font-size:clamp(1.9rem,3.6vw,2.7rem)}
  .sec-head p{color:var(--ink-soft);margin:14px 0 0}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;display:flex;align-items:flex-start;gap:14px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
  .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--slate-300)}
  .svc .ic{flex:0 0 42px;width:42px;height:42px;border-radius:11px;background:var(--paper-2);color:var(--slate-700);display:grid;place-items:center}
  .svc .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .svc h3{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
  .svc p{margin:5px 0 0;font-size:.88rem;color:var(--ink-soft);line-height:1.45}

  .svc-all{display:flex;justify-content:center;margin-top:34px}
  .nav-links a[aria-current="page"]{color:var(--slate-700)}
  .nav-links a[aria-current="page"]::after{right:0}
  footer .fnav a[aria-current="page"]{color:#fff}

  /* ---- expect + form ---- */
  .booking{padding:64px 0 0}
  .booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
  .expect{background:#fff;padding:46px 44px}
  .expect h2{font-weight:800;font-size:clamp(1.8rem,3.4vw,2.5rem)}
  .expect ul{list-style:none;padding:0;margin:26px 0 22px;display:flex;flex-direction:column;gap:15px}
  .expect li{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:600;font-size:1.05rem}
  .expect .chk{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--slate);display:grid;place-items:center}
  .expect .chk svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .expect .note{color:var(--ink-soft);font-family:var(--body);border-top:1px solid var(--line);padding-top:22px;margin:6px 0 24px}
  .emergency{display:flex;flex-direction:column;gap:4px}
  .emergency .lbl{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--ink)}
  .emergency a{font-family:var(--display);font-weight:800;font-size:2rem;color:var(--slate);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:.3em}
  .emergency a svg{width:.8em;height:.8em;fill:currentColor}

  .booker{background:var(--slate);color:#fff;padding:46px 44px;position:relative}
  .booker h2{font-weight:800;font-size:clamp(1.6rem,3vw,2.1rem);color:#fff}
  .booker .sub{color:#e4edf3;margin:12px 0 26px;font-size:.97rem;max-width:36ch}
  .field{margin-bottom:15px}
  .field label{display:block;font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.02em;margin-bottom:7px;color:#eaf1f6}
  .field label .opt{font-weight:500;color:#cdddE8;opacity:.8}
  .field input,.field select{
    width:100%;padding:14px 15px;border-radius:10px;border:1.5px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.12);color:#fff;font-family:var(--body);font-size:1rem;
    transition:border-color .18s ease,background .18s ease;
  }
  .field input::placeholder{color:#d5e2ea}
  .field input:focus,.field select:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.2)}
  .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
  .field select option{color:#0E1A22}
  .urgency{display:flex;gap:10px;flex-wrap:wrap}
  .urgency input{position:absolute;opacity:0;pointer-events:none}
  .urgency label{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border-radius:50px;border:1.5px solid rgba(255,255,255,.32);font-family:var(--display);font-weight:600;font-size:.86rem;cursor:pointer;transition:all .16s ease;margin:0}
  .urgency label:hover{border-color:#fff}
  .urgency input:checked+label{background:#fff;color:var(--slate-700);border-color:#fff}
  .urgency input:focus-visible+label{outline:2px solid #fff;outline-offset:2px}
  .booker .submit{width:100%;margin-top:8px;background:#fff;color:var(--slate-700)}
  .booker .submit:hover{background:#0E1A22;color:#fff;transform:translateY(-2px)}
  .reassure{margin:14px 0 0;font-size:.82rem;color:#dceaf2;display:flex;align-items:center;gap:8px;line-height:1.4}
  .reassure svg{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;opacity:.85}
  .success{display:none;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);border-radius:14px;padding:26px;text-align:center}
  .success h3{font-family:var(--display);font-weight:800;color:#fff;font-size:1.4rem;margin-bottom:8px}
  .success p{color:#eaf1f6;margin:0;font-size:.95rem}
  .success .big{font-size:2.4rem;margin-bottom:14px}
  .booker.done form{display:none}
  .booker.done .success{display:block}

  /* ---- footer ---- */
  footer.site{background:var(--navy);color:#9fb1bd;margin-top:78px;padding:52px 0 0;font-size:.95rem}
  .ftop{display:grid;grid-template-columns:1.5fr 1fr;gap:54px;padding-bottom:38px}
  .fbrand .logo{color:#fff;align-items:flex-start;margin:0 0 16px;padding:0}
  .fbrand .logo .tier{color:#7e93a1}
  .fbrand .logo .name{font-size:1.5rem}
  .fbrand .logo .name span:last-child{margin-left:.5em}
  .fbrand .logo-img{height:62px}
  .ftag{color:#7e93a1;max-width:40ch;margin:0 0 22px;line-height:1.6}
  .fcontact{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
  .fcontact li{display:flex;gap:14px;align-items:baseline}
  .fcontact li .k{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#677d8b;flex:0 0 48px}
  .fcontact a{color:#fff}
  .fcontact a:hover{color:var(--slate-300)}
  .fnews h4{font-family:var(--display);font-weight:800;font-size:1.02rem;color:#fff;margin:0 0 6px}
  .fnews-sub{color:#7e93a1;margin:0 0 14px;font-size:.9rem}
  .news{display:flex;max-width:380px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
  .news input{flex:1;min-width:0;border:0;padding:13px 15px;font-family:var(--body);font-size:.92rem;background:#fff;color:#0E1A22}
  .news input:focus{outline:none}
  .news button{border:0;background:var(--slate);color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem;padding:0 22px;cursor:pointer;transition:background .18s ease;white-space:nowrap}
  .news button:hover{background:var(--slate-700)}
  .news.done input{display:none}
  .news.done::before{content:"You're subscribed — thanks!";flex:1;padding:13px 15px;background:#fff;color:var(--slate-700);font-weight:700;font-family:var(--display);font-size:.9rem}
  .fbot{display:flex;justify-content:space-between;align-items:center;gap:18px 30px;flex-wrap:wrap;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.08)}
  footer .fnav{display:flex;gap:26px;flex-wrap:wrap;padding:0;border:0;margin:0}
  footer .fnav a{font-family:var(--display);font-weight:600;font-size:.94rem;color:#cdd9e1}
  footer .fnav a:hover{color:#fff}
  .copy{margin:0;padding:0;border:0;color:#677d8b;font-family:var(--display);font-weight:500;font-size:.9rem}

  /* reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---- mobile menu ---- */
  .mobile-menu{display:none}

  @media(max-width:920px){
    .hero{overflow:hidden}
    .hero .wrap{grid-template-columns:1fr;padding-top:30px;position:relative}
    .hero-copy{position:relative;z-index:2}
    .hero-art{position:absolute;order:0;top:64%;left:auto;right:-14%;bottom:auto;transform:translateY(-50%);width:84%;min-height:0;margin:0;z-index:0;opacity:.13;pointer-events:none}
    .hero-art img{width:100%;filter:none}
    .hero-art .disc,.hero-art .orbit{display:none}
    .hero p.body{max-width:none}
    .svc-grid{grid-template-columns:repeat(2,1fr)}
    .quote-form{grid-template-columns:1fr 1fr}
    .quote-form .submit{grid-column:1 / -1;width:100%}
    .quote-card{margin-top:-30px}
    .booking-grid{grid-template-columns:1fr}
    .ftop{grid-template-columns:1fr;gap:34px}
    .fbot{flex-direction:column;text-align:center;gap:16px}
    footer .fnav{justify-content:center;gap:20px}
    .nav-links,.nav-right .btn{display:none}
    .hamburger{display:block}
    .mobile-menu{display:block}   /* enable the mobile menu overlay (was stuck hidden) */
    .topbar .wrap{justify-content:center;gap:6px 18px}
  }
  @media(max-width:560px){
    .svc-grid{grid-template-columns:1fr}
    .expect,.booker{padding:34px 26px}
    .topbar .loc span.full{display:none}
    .quote-form{grid-template-columns:1fr}
    .quote-card{padding:26px 22px;margin-top:-54px}
    .hero .wrap{padding-top:16px;padding-bottom:54px}
    .hero h1{font-size:2.08rem;line-height:1.08}
    .hero .lede{margin:12px 0 10px}
    .hero p.body{font-size:.98rem;line-height:1.5;margin-bottom:18px}
    .hero-cta{margin-bottom:18px;gap:10px}
    /* keep all three credibility badges on a single row */
    .trust{gap:6px;flex-wrap:nowrap;justify-content:space-between}
    .trust .pill{padding:7px 9px;font-size:.6rem;gap:5px;white-space:nowrap;flex:0 1 auto}
    .trust .dot{width:7px;height:7px}
    .eyebrow{margin-bottom:12px}
  }

  /* fixed call bar — mobile only */
  @media(max-width:760px){
    .callbar{display:flex}
    body{padding-bottom:74px}

    /* keep the accessibility widget button clear of the fixed call bar */
    body .asw-menu-btn{bottom:88px!important}

    /* Surface the lead form on mobile: badges + form come up,
       and the hero buttons are hidden (the sticky call bar + the form
       already cover "call" and "free consultation"). */
    .hero-copy{display:flex;flex-direction:column}
    .hero-copy .eyebrow{order:1}
    .hero-copy h1{order:2}
    .hero-copy .lede{order:3}
    .hero-copy .trust{order:4;margin-bottom:4px}
    .hero-copy .body{order:5;margin-bottom:8px}
    .hero-cta{display:none}
    .hero .wrap{padding-bottom:8px}
    .quote-card{margin-top:14px}
  }

  /* mobile menu panel */
  .mobile-menu{position:fixed;inset:0;z-index:150;background:rgba(6,17,23,.6);opacity:0;pointer-events:none;transition:opacity .25s ease}
  .mobile-menu.open{opacity:1;pointer-events:auto}
  .mobile-menu .panel{position:absolute;top:0;right:0;height:100%;width:min(82%,320px);background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .28s ease;box-shadow:var(--shadow)}
  .mobile-menu.open .panel{transform:none}
  .mobile-menu .panel a{font-family:var(--display);font-weight:600;font-size:1.15rem;padding:13px 6px;border-bottom:1px solid var(--line)}
  .mobile-menu .panel .btn{margin-top:18px}
  .mobile-menu .closeb{align-self:flex-end;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px 8px}

  @media(prefers-reduced-motion:reduce){
    *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    .reveal{opacity:1;transform:none}
  }

/* ---- Interior page header (services / contact / why-choose-us) ---- */
  /* ---- interior page header ---- */
  .pagehero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .pagehero .wrap{padding:50px 24px 46px;position:relative;z-index:2}
  .pagehero .crumb{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--ink-soft);margin-bottom:16px}
  .pagehero .crumb a{color:var(--slate-700)}
  .pagehero .crumb a:hover{color:var(--slate)}
  .pagehero h1{font-weight:800;font-size:clamp(2.2rem,4.6vw,3.3rem);letter-spacing:-.025em}
  .pagehero p.psub{color:var(--ink-soft);font-size:1.08rem;max-width:54ch;margin:16px 0 0}
  .pagehero .bgstar{position:absolute;color:var(--slate);opacity:.07;z-index:1}
  .pagehero .bgstar.a{width:220px;height:220px;top:-40px;right:6%}
  .pagehero .bgstar.b{width:90px;height:90px;bottom:-10px;right:22%;opacity:.05}
  .pagehero .bgstar svg{width:100%;height:100%;display:block;fill:currentColor}
  /* readable text-content pages (e.g. accessibility statement) */
  .prose{max-width:72ch}
  .prose h2{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.01em;margin:34px 0 10px}
  .prose h2:first-child{margin-top:0}
  .prose p{color:var(--ink-soft);margin:0 0 16px;line-height:1.7}
  .prose ul{color:var(--ink-soft);margin:0 0 18px;padding-left:1.15em;line-height:1.7}
  .prose li{margin:7px 0}
  .prose a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}
  .prose a:hover{color:var(--slate-700)}

  .section{padding:64px 0}
  .section.tight{padding:48px 0}
  .lead-intro{max-width:62ch;color:var(--ink-soft);font-size:1.1rem;margin:0 0 8px}

  /* service detail cards (richer than home teaser) */
  .svc-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .svc-detail .svc{flex-direction:column;gap:16px}
  .svc-detail .svc .ic{width:48px;height:48px;flex:0 0 48px}
  .svc-detail .svc .ic svg{width:24px;height:24px}
  .svc-detail .svc h3{font-size:1.12rem}
  .svc-detail .svc p{font-size:.93rem;line-height:1.55}

  /* feature blocks (why choose us) */
  .features{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
  .feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
  .feat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--slate-300)}
  .feat .ic{width:46px;height:46px;border-radius:12px;background:var(--paper-2);color:var(--slate-700);display:grid;place-items:center;margin-bottom:16px}
  .feat .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .feat h3{font-family:var(--display);font-weight:700;font-size:1.18rem;margin-bottom:8px}
  .feat p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.55}

  .expect-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
  .expect-list li{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:600;font-size:1.05rem}
  .expect-list .chk{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--slate);display:grid;place-items:center}
  .expect-list .chk svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

  .panel-soft{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px 38px;box-shadow:var(--shadow-sm)}
  .badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
  .badges .pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:50px;padding:9px 16px;font-size:.82rem;font-weight:700;font-family:var(--display);color:var(--ink-soft);box-shadow:var(--shadow-sm)}
  .badges .dot{width:9px;height:9px;border-radius:50%}
  .badges .g{background:var(--steel)}.badges .b{background:var(--slate)}.badges .y{background:var(--ink)}

  /* CTA band */
  .ctaband{background:var(--slate);color:#fff;border-radius:20px;padding:46px 44px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;box-shadow:var(--shadow)}
  .ctaband h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.8vw,2rem);color:#fff;margin:0}
  .ctaband p{margin:8px 0 0;color:#e4edf3;max-width:46ch}
  .ctaband .acts{display:flex;gap:12px;flex-wrap:wrap}
  .ctaband .btn-white{background:#fff;color:var(--slate-700)}
  .ctaband .btn-white:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
  .ctaband .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
  .ctaband .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}

  /* contact page */
  .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start}
  .cinfo h2{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:0 0 6px}
  .cinfo .lead-intro{margin-bottom:26px}
  .cinfo ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
  .cinfo li{display:flex;gap:15px;align-items:flex-start}
  .cinfo .ic{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--paper-2);color:var(--slate-700);display:grid;place-items:center}
  .cinfo .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .cinfo .k{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
  .cinfo .v{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink)}
  .cinfo .v a{color:var(--ink)}.cinfo .v a:hover{color:var(--slate-700)}
  .cinfo .v.rust a,.cinfo .v.rust{color:var(--slate)}
  .cinfo small{color:var(--ink-soft);font-weight:500;font-family:var(--body);font-size:.92rem;display:block;margin-top:3px}

  @media(max-width:920px){
    .svc-detail{grid-template-columns:repeat(2,1fr)}
    .features{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr;gap:28px}
    .ctaband{padding:34px 28px}
  }
  @media(max-width:560px){
    .svc-detail{grid-template-columns:1fr}
    .expect-list{grid-template-columns:1fr}
    .panel-soft{padding:28px 22px}
    .pagehero .wrap{padding:40px 24px 36px}
  }