/* ==========================================================================
   TileSeal Waterproofing — site stylesheet
   --------------------------------------------------------------------------
   Design language: "clean water"
   - Brand palette: deep water blue #0b3f63, primary blue #0e7dc2, aqua
     #38bdf8, over mist-white backgrounds. WhatsApp green reserved strictly
     for WhatsApp actions.
   - Outfit (Latin) + Noto Sans SC (中文): rounded, modern, calm.
   - Signature elements: wave section dividers, droplet bullets, and the
     aqua "seal bar" heading underline (echoing the inner seal layer).
   - Tone per brand doc: minimalist, warm, premium, trustworthy — airy
     spacing, soft blue-tinted shadows, generous radius. Nothing loud.
   ==========================================================================
   INDEX
   01 Tokens          06 Hero               11 FAQ accordion
   02 Base            07 Cards & grids      12 Contact & form
   03 Type            08 Steps & checklists 13 Footer
   04 Layout          09 Tech / compare     14 Helpers & a11y
   05 Header & nav    10 Pain points        15 Responsive
   ========================================================================== */

/* 01 — Tokens ---------------------------------------------------------------*/
:root{
  --deep:  #0b3f63;
  --blue:  #0e7dc2;
  --aqua:  #38bdf8;
  --aqua-soft:#e3f4fd;
  --pale:  #d5e6f2;
  --mist:  #eef6fb;
  --white: #ffffff;
  --ink:   #16344a;
  --slate: #5b7a92;
  --line:  #dbe7f0;
  --wa:    #25d366;
  --wa-dark:#1aa851;

  --ff: "Outfit", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  --radius: 14px;
  --radius-s: 9px;
  --shadow-1: 0 3px 14px -4px rgba(11,63,99,.10);
  --shadow-2: 0 18px 44px -18px rgba(11,63,99,.22);
  --container: 1160px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --sect: clamp(3.6rem, 8vw, 5.6rem);
}

/* 02 — Base ------------------------------------------------------------------*/
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff);
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--ink);
  background:var(--white);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
iframe{ border:0; display:block; }

/* 03 — Type -------------------------------------------------------------------*/
h1,h2,h3,h4{
  font-weight:700;
  line-height:1.22;
  color:var(--deep);
  margin:0 0 .55em;
  letter-spacing:.01em;
}
h1{ font-size:clamp(2rem, 5vw, 3.3rem); }
h2{ font-size:clamp(1.55rem, 3.4vw, 2.3rem); }
h3{ font-size:clamp(1.18rem, 2.2vw, 1.4rem); }
h4{ font-size:1.1rem; }
p{ margin:0 0 1em; }
.lead{ font-size:clamp(1.08rem, 1.8vw, 1.2rem); color:var(--slate); }

/* seal bar — aqua underline echoing the inner protective layer */
.seal-bar{
  display:block; width:64px; height:8px; border-radius:99px;
  background:linear-gradient(90deg, var(--aqua), var(--blue));
  margin:0 0 1.1rem;
}
.center .seal-bar{ margin-inline:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.92rem; letter-spacing:.08em;
  color:var(--blue);
  margin-bottom:.7rem;
}
.eyebrow::before{
  content:""; width:10px; height:14px;
  background:var(--aqua);
  clip-path:path("M5 0 C8 4 10 6.5 10 9 A5 5 0 1 1 0 9 C0 6.5 2 4 5 0 Z");
}

.section-head{ max-width:700px; margin-bottom:2.6rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* 04 — Layout -----------------------------------------------------------------*/
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sect); }
.section--tight{ padding-block:calc(var(--sect) * .6); }
.section--mist{ background:var(--mist); }
.section--deep{ background:var(--deep); color:#cfe3f2; }
.section--deep :is(h1,h2,h3,h4){ color:var(--white); }
.section--deep p{ color:#b6d2e6; }
.grid{ display:grid; gap:1.5rem; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split--flip > :first-child{ order:2; }
.split--flip > :last-child{ order:1; }

/* wave divider — the signature transition between sections */
.wave{ display:block; width:100%; height:70px; margin-bottom:-1px; }
.wave svg{ width:100%; height:100%; display:block; }

/* 05 — Header & nav --------------------------------------------------------------*/
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-2); }
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem; min-height:78px;
}
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:48px; width:auto; }

.nav-list{ display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0; }
.nav-link{
  display:inline-block; padding:.55rem .8rem;
  font-weight:600; font-size:1rem; color:var(--deep);
  border-radius:99px; text-decoration:none !important;
}
.nav-link:hover{ color:var(--blue); background:var(--aqua-soft); }
.nav-link.is-active{ color:var(--blue); background:var(--aqua-soft); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%, 6px);
  min-width:300px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-2);
  padding:.5rem; margin:0; list-style:none;
  opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown.is-open .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
@media (hover:hover){
  .has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
}
.dropdown a{
  display:block; padding:.6rem .85rem; border-radius:var(--radius-s);
  color:var(--ink); font-size:.98rem; text-decoration:none !important;
}
.dropdown a:hover{ background:var(--mist); color:var(--deep); }
.caret{ font-size:.66em; margin-left:.2rem; }

.nav-toggle{
  display:none; background:none; border:2px solid var(--deep);
  border-radius:10px; padding:.5rem .6rem; cursor:pointer;
}
.nav-toggle .bars{ display:block; width:22px; height:2px; background:var(--deep); position:relative; }
.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--deep);
}
.nav-toggle .bars::before{ top:-7px; } .nav-toggle .bars::after{ top:7px; }

/* 06 — Buttons & hero ---------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--ff); font-weight:700; font-size:1.02rem;
  padding:.85rem 1.65rem;
  border:2px solid transparent; border-radius:99px;
  cursor:pointer; text-decoration:none !important;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease,
             transform .12s ease, box-shadow .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--blue); color:var(--white); box-shadow:0 8px 20px -8px rgba(14,125,194,.5); }
.btn--primary:hover{ background:var(--deep); }
.btn--ghost{ border-color:var(--pale); color:var(--deep); background:var(--white); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn--wa{ background:var(--wa); color:#fff; box-shadow:0 8px 20px -8px rgba(37,211,102,.55); }
.btn--wa:hover{ background:var(--wa-dark); }
.btn--wa svg{ flex:0 0 auto; }
.on-deep .btn--ghost{ background:transparent; border-color:#ffffff55; color:#fff; }
.on-deep .btn--ghost:hover{ background:#ffffff; color:var(--deep); border-color:#fff; }

.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(620px 300px at 88% 8%, var(--aqua-soft) 0%, transparent 65%),
    linear-gradient(180deg, var(--mist) 0%, var(--white) 90%);
}
.hero__inner{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem, 5vw, 4rem); align-items:center;
  padding-block:clamp(3.4rem, 8vw, 6rem);
}
.hero h1{ margin-bottom:.35em; }
.hero h1 .hl{ color:var(--blue); }
.hero .lead{ max-width:560px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.8rem; }
.hero__note{ margin-top:1rem; font-size:.94rem; color:var(--slate); }
.hero__art{ position:relative; }
.hero__art img{ width:100%; max-width:620px; margin-inline:auto; }
/* floating ambient droplets */
.hero__art::before,.hero__art::after{
  content:""; position:absolute; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:var(--aqua-soft); z-index:-1;
}
.hero__art::before{ width:130px; height:130px; top:-24px; right:6%; }
.hero__art::after{ width:70px; height:70px; bottom:2%; left:2%; }

/* page hero for inner pages */
.page-hero{
  background:
    radial-gradient(520px 240px at 90% 0%, var(--aqua-soft) 0%, transparent 60%),
    var(--mist);
  padding-block:clamp(2.8rem, 6vw, 4.2rem);
}
.page-hero h1{ margin-bottom:.25em; }
.page-hero .crumb{ font-size:.92rem; color:var(--slate); font-weight:600; }
.page-hero .crumb a{ color:var(--slate); }
.page-hero .crumb .sep{ margin-inline:.45rem; color:var(--aqua); }

/* 07 — Cards & grids -----------------------------------------------------------------*/
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.7rem 1.5rem;
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:.6rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--aqua); }
.card h3{ margin:0; }
.card p{ margin:0; color:var(--slate); font-size:.99rem; }
.card__icon{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--aqua-soft); color:var(--blue);
  margin-bottom:.45rem;
}
.card__link{ margin-top:auto; padding-top:.7rem; font-weight:700; font-size:.96rem; color:var(--blue); }
.card--linked{ position:relative; }
.card--linked .card__cover{ position:absolute; inset:0; z-index:1; border-radius:var(--radius); }

/* service card with spot illustration */
.svc-card{ text-align:left; }
.svc-card .spot{
  background:var(--mist); border-radius:var(--radius-s);
  padding:.9rem; margin-bottom:.8rem;
}
.svc-card .spot img{ max-width:200px; margin-inline:auto; }

/* illustration panel */
.illus-panel{
  background:
    radial-gradient(340px 200px at 80% 10%, var(--aqua-soft) 0%, transparent 60%),
    var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:clamp(1.3rem, 3.2vw, 2.3rem);
  display:grid; place-items:center;
}
.illus-panel img{ width:100%; max-width:520px; height:auto; }
.illus-panel--spot{ padding:1.1rem; }
.illus-panel--spot img{ max-width:300px; }

/* layer legend under the tech diagram */
.layer-legend{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.75rem; }
.layer-legend li{ display:flex; gap:.85rem; align-items:flex-start; }
.layer-legend .no{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; color:#fff; font-size:.95rem;
}
.layer-legend .no--1{ background:var(--deep); }
.layer-legend .no--2{ background:var(--aqua); color:var(--deep); }
.layer-legend .no--3{ background:#94a8b8; }
.layer-legend .no--4{ background:var(--blue); }
.layer-legend b{ color:var(--deep); }
.layer-legend span{ display:block; color:var(--slate); font-size:.96rem; }

/* 08 — Steps & checklists -------------------------------------------------------------*/
.steps{ counter-reset:step; }
.step{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem 1.35rem;
  box-shadow:var(--shadow-1); position:relative;
}
.step::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  display:inline-grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--aqua-soft); color:var(--blue);
  font-weight:700; font-size:1.15rem;
  margin-bottom:.7rem;
}
.step h3{ font-size:1.12rem; margin-bottom:.3rem; }
.step p{ color:var(--slate); font-size:.96rem; margin:0; }
.section--mist .step{ box-shadow:none; }

.checklist{ list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:.65rem; }
.checklist li{ display:flex; gap:.65rem; align-items:flex-start; }
.checklist .drop{
  flex:0 0 auto; width:20px; height:24px; margin-top:.2rem;
  background:var(--aqua);
  clip-path:path("M10 0 C16 8 20 13 20 18 A10 10 0 1 1 0 18 C0 13 4 8 10 0 Z");
}
.checklist b{ color:var(--deep); }

/* chip list — 适合问题 / 痛点 */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin:1rem 0 0; list-style:none; }
.chips li{
  background:var(--mist); border:1px solid var(--line);
  border-radius:99px; padding:.42rem 1rem;
  font-size:.95rem; color:var(--ink);
  display:inline-flex; align-items:center; gap:.45rem;
}
.chips li::before{
  content:""; width:8px; height:11px; background:var(--blue);
  clip-path:path("M4 0 C6.4 3.2 8 5.2 8 7.2 A4 4 0 1 1 0 7.2 C0 5.2 1.6 3.2 4 0 Z");
}

/* photo-request list on service pages */
.photo-list{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.55rem; }
.photo-list li{
  display:flex; gap:.7rem; align-items:center;
  background:var(--white); border:1px dashed var(--pale);
  border-radius:var(--radius-s); padding:.65rem .9rem; font-size:.97rem;
}
.photo-list svg{ flex:0 0 auto; color:var(--blue); }

/* 09 — Tech / compare table -----------------------------------------------------------*/
.compare{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--white); box-shadow:var(--shadow-1);
}
.compare th,.compare td{ padding:.95rem 1.1rem; text-align:left; font-size:.98rem; }
.compare thead th{ background:var(--deep); color:#fff; font-weight:700; }
.compare thead th:last-child{ background:var(--blue); }
.compare tbody tr:nth-child(even){ background:var(--mist); }
.compare tbody td{ border-top:1px solid var(--line); color:var(--slate); }
.compare tbody td:first-child{ color:var(--ink); font-weight:600; width:26%; }
.compare tbody td:last-child{ color:var(--deep); }

/* 10 — Pain points ---------------------------------------------------------------------*/
.pain{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.pain li{ list-style:none; }
.pain{ padding:0; margin:0; }
.pain .q{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:.8rem 1rem;
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.98rem; height:100%;
}
.pain svg{ flex:0 0 auto; color:var(--blue); margin-top:.2rem; }

/* trust tiles */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.trust__item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.2rem; box-shadow:var(--shadow-1);
}
.trust__item svg{ color:var(--blue); margin-bottom:.6rem; }
.trust__item b{ display:block; color:var(--deep); font-size:1.06rem; margin-bottom:.25rem; }
.trust__item span{ color:var(--slate); font-size:.94rem; line-height:1.6; }

/* 11 — FAQ accordion (native details) ---------------------------------------------------*/
.faq{ display:grid; gap:.9rem; }
.faq details{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:1.05rem 3.2rem 1.05rem 1.3rem;
  font-weight:700; color:var(--deep); font-size:1.03rem;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:1.1rem; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--aqua-soft); color:var(--blue);
  font-weight:700; font-size:1.2rem; line-height:1;
  transition:transform .18s ease, background-color .18s ease;
}
.faq details[open] summary::after{ content:"–"; background:var(--blue); color:#fff; }
.faq details[open] summary{ border-bottom:1px solid var(--line); }
.faq .answer{ padding:1rem 1.3rem 1.2rem; color:var(--slate); }
.faq .answer p{ margin:0; }

/* 12 — Contact & form ---------------------------------------------------------------------*/
.contact-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,3.6rem); align-items:start; }
.form-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-2);
  padding:clamp(1.5rem, 3.4vw, 2.3rem);
  border-top:5px solid var(--wa);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem; margin-bottom:1.3rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-weight:600; font-size:.94rem; color:var(--deep); }
.field input,.field select,.field textarea{
  font:inherit; color:var(--ink);
  border:1.5px solid var(--pale); border-radius:var(--radius-s);
  background:var(--mist); padding:.7rem .9rem;
  appearance:none; -webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b7a92' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
  padding-right:2.4rem;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--aqua);
  box-shadow:0 0 0 3px rgba(56,189,248,.25);
  background:var(--white);
}
.form-note{ color:var(--slate); font-size:.93rem; margin-top:.8rem; }
.form-status{ margin:.8rem 0 0; font-weight:600; color:var(--deep); min-height:1.4em; }

.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.info-list li{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem 1.15rem;
  box-shadow:var(--shadow-1);
}
.info-list svg{ flex:0 0 auto; color:var(--blue); margin-top:.2rem; }
.info-list b{ display:block; color:var(--deep); }
.info-list a{ color:var(--ink); }
.info-list a:hover{ color:var(--blue); }

/* floating WhatsApp bubble */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:58px; height:58px; border-radius:50%;
  background:var(--wa); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.6);
  transition:transform .15s ease, background-color .15s ease;
}
.wa-float:hover{ transform:scale(1.07); background:var(--wa-dark); }

/* 13 — Footer ---------------------------------------------------------------------------*/
.site-footer{ background:var(--deep); color:#b6d2e6; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(1.6rem, 4vw, 3rem);
  padding-block:3.2rem 2.4rem;
}
.footer-logo{
  display:inline-block; background:var(--white);
  border-radius:var(--radius-s); padding:.7rem 1rem; margin-bottom:1rem;
}
.footer-logo img{ height:42px; width:auto; }
.site-footer h4{ color:#fff; margin-bottom:.9rem; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer-links a{ color:#b6d2e6; }
.footer-links a:hover{ color:var(--aqua); }
.footer-contact{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer-contact li{ display:flex; gap:.65rem; align-items:flex-start; }
.footer-contact svg{ flex:0 0 auto; color:var(--aqua); margin-top:.28rem; }
.footer-contact a{ color:#e2f0fa; }
.footer-bottom{
  border-top:1px solid #16537f;
  padding-block:1.2rem;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between;
  font-size:.92rem; color:#7fa5c229;
  color:#7ea9c8;
}

/* language toggle + header icon button ---------------------------------------*/
.lang-toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:700; font-size:.92rem; letter-spacing:.02em;
  color:var(--deep); background:var(--mist);
  border:1.5px solid var(--pale); border-radius:99px;
  padding:.42rem .95rem; text-decoration:none !important;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.lang-toggle:hover{ border-color:var(--blue); color:var(--blue); background:var(--aqua-soft); }
.lang-toggle svg{ flex:0 0 auto; }

.icon-btn{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--mist); color:var(--deep);
  border:1.5px solid var(--pale);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.nav-extra{ display:flex; align-items:center; gap:.55rem; margin-left:.5rem; }
@media (max-width:880px){
  .nav-extra{ margin:0.6rem 0 0; padding:0.8rem 1rem 0; border-top:1px solid var(--line); flex-wrap:wrap; }
}

/* photo gallery -----------------------------------------------------------------*/
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.gallery figure{ margin:0; }
.photo-frame{
  margin:0;
  background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .18s ease;
}
.photo-frame:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.photo-frame img{ width:100%; height:auto; aspect-ratio:900/640; object-fit:cover; display:block; }
.photo-frame figcaption{
  padding:.7rem 1rem;
  font-weight:600; font-size:.95rem; color:var(--deep);
  border-top:3px solid var(--aqua);
  display:flex; align-items:center; gap:.5rem;
}
.photo-frame figcaption::before{
  content:""; width:8px; height:11px; background:var(--blue); flex:0 0 auto;
  clip-path:path("M4 0 C6.4 3.2 8 5.2 8 7.2 A4 4 0 1 1 0 7.2 C0 5.2 1.6 3.2 4 0 Z");
}
@media (max-width:880px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .gallery{ grid-template-columns:1fr; } }

/* CTA band */
.cta-band{ background:var(--deep); color:#b6d2e6; position:relative; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; right:-60px; top:-60px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,.25), transparent 70%);
}
.cta-band__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.4rem; padding-block:clamp(2.6rem, 6vw, 3.6rem);
  position:relative;
}
.cta-band h2{ color:#fff; margin:0 0 .2em; }
.cta-band p{ margin:0; }

/* 14 — Helpers & a11y -----------------------------------------------------------------------*/
.on-deep{ color:#b6d2e6; }
.mt-2{ margin-top:2rem; }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:none; }
:focus-visible{ outline:3px solid var(--aqua); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
}
@media print{
  .site-header,.site-footer,.cta-band,.wa-float,.nav-toggle{ display:none !important; }
}

/* 15 — Responsive -----------------------------------------------------------------------------*/
@media (max-width:1024px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .trust{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-width:520px; margin-inline:auto; }
}
@media (max-width:880px){
  .nav-toggle{ display:inline-flex; align-items:center; }
  .site-nav{
    position:fixed; inset:79px 0 0 auto; width:min(340px, 88vw);
    background:var(--white); border-left:1px solid var(--line);
    box-shadow:var(--shadow-2);
    transform:translateX(100%); transition:transform .22s ease;
    overflow-y:auto; z-index:55; padding:1rem;
  }
  .site-nav.is-open{ transform:translateX(0); }
  .nav-list{ flex-direction:column; align-items:stretch; gap:.2rem; }
  .nav-link{ display:block; padding:.85rem 1rem; border-radius:var(--radius-s); }
  .dropdown{
    position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    border:0; border-left:3px solid var(--line); border-radius:0;
    box-shadow:none; padding:.2rem 0 .2rem .6rem; margin:.2rem 0 .4rem .9rem;
    display:none;
  }
  .has-dropdown.is-open .dropdown{ display:block; }
  body.nav-locked{ overflow:hidden; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split--flip > :first-child{ order:1; }
  .split--flip > :last-child{ order:2; }
  .contact-grid{ grid-template-columns:1fr; }
  .pain{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .trust{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .brand img{ height:40px; }
  .header-bar{ min-height:70px; }
  .site-nav{ inset:71px 0 0 auto; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
  .wave{ height:44px; }
}