/* =========================================================
   J&J PLUMBING, LLC
   Home page stylesheet
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --navy-900:#071523;
  --navy-800:#0A1B2E;
  --navy-700:#0F2740;
  --navy-600:#173A5E;
  --navy-500:#22507D;

  --blue:#1E8FD5;
  --blue-600:#1778B4;
  --blue-300:#6FC3F0;
  --blue-050:#EAF5FD;

  --ink:#0E1A26;
  --slate:#55677A;
  --slate-light:#8496A8;

  --white:#FFFFFF;
  --gray-50:#F6F8FB;
  --gray-100:#EEF2F7;
  --line:#E0E7EF;
  --line-dark:rgba(255,255,255,.12);

  --font-display:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:"Inter", "Segoe UI", system-ui, sans-serif;

  --container:1600px;
  --pad:clamp(20px, 4vw, 64px);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;

  --shadow-sm:0 2px 8px rgba(10,27,46,.06);
  --shadow-md:0 10px 30px rgba(10,27,46,.08);
  --shadow-lg:0 24px 60px rgba(10,27,46,.14);
  --shadow-blue:0 14px 34px rgba(30,143,213,.28);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-.028em;line-height:1.06}
p{margin:0}
svg{display:block}

::selection{background:var(--blue);color:#fff}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy-800);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

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

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{padding-block:clamp(72px, 8vw, 140px)}

/* ---------- Typography helpers ---------- */
.section-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-600);
  margin-bottom:22px;
}
.section-eyebrow .rule{width:38px;height:2px;background:var(--blue);border-radius:2px;flex:none}
.section-eyebrow.light{color:var(--blue-300)}
.section-eyebrow.light .rule{background:var(--blue-300)}

.section-title{
  font-size:clamp(34px, 4.2vw, 62px);
  font-weight:800;
  color:var(--navy-800);
  letter-spacing:-.035em;
  max-width:16ch;
}
.section-title.light{color:#fff}

.section-lead{
  margin-top:24px;
  font-size:clamp(17px, 1.25vw, 20px);
  color:var(--slate);
  max-width:62ch;
}
.section-lead.light{color:rgba(255,255,255,.72)}
.section-body{margin-top:18px;color:var(--slate);max-width:60ch}

.note{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:26px;padding:16px 18px;
  background:var(--blue-050);
  border:1px solid rgba(30,143,213,.22);
  border-radius:var(--r-md);
  font-size:14.5px;line-height:1.55;color:var(--navy-600);
  max-width:56ch;
}
.note svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--blue-600);stroke-width:1.8;stroke-linecap:round}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--blue);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);
  font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  padding:14px 26px;
  border-radius:100px;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
  overflow:hidden;
}
.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn .btn-ico{fill:currentColor;stroke:none}
.btn-arrow{transition:transform .4s var(--ease-out-expo)}
.btn:hover .btn-arrow{transform:translateX(5px)}

.btn-sm{padding:11px 20px;font-size:14.5px}
.btn-lg{padding:17px 34px;font-size:16.5px}
.btn-block{width:100%}

.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:var(--blue-600);transform:translateY(-3px);box-shadow:0 20px 40px rgba(30,143,213,.34)}

.btn-dark{background:var(--navy-800);color:#fff;box-shadow:0 12px 28px rgba(10,27,46,.2)}
.btn-dark:hover{background:var(--navy-700);transform:translateY(-3px)}

.btn-light{background:#fff;color:var(--navy-800);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.btn-light:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.24)}

.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.32)}
.btn-outline-light:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);transform:translateY(-3px)}

.btn-ghost-dark{background:var(--gray-100);color:var(--navy-800)}
.btn-ghost-dark:hover{background:var(--line)}

.link-cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:34px;
  font-family:var(--font-display);font-weight:700;font-size:16px;
  color:var(--navy-800);
  padding-bottom:6px;
  border-bottom:2px solid var(--blue);
  transition:gap .35s var(--ease-out-expo), color .3s var(--ease);
}
.link-cta svg{width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out-expo)}
.link-cta:hover{gap:16px;color:var(--blue-600)}
.link-cta:hover svg{transform:translateX(3px)}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:18px;
  transition:padding .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  padding-block:10px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(10,27,46,.07);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}

.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand-mark{
  width:60px;height:60px;flex:none;
  border-radius:50%;overflow:hidden;
  background:#fff;
  box-shadow:0 6px 18px rgba(10,27,46,.28);
  transition:transform .5s var(--ease-out-expo), box-shadow .4s var(--ease);
}
.brand-mark img{width:100%;height:100%;object-fit:contain;padding:3px}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.05)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{
  font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.03em;
  color:#fff;transition:color .45s var(--ease);
}
.brand-sub{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);transition:color .45s var(--ease);
}
.site-header.is-stuck .brand-name{color:var(--navy-800)}
.site-header.is-stuck .brand-sub{color:var(--slate-light)}

.nav{display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:6px}
.nav-link{
  position:relative;
  display:block;padding:10px 18px;
  font-family:var(--font-display);font-weight:600;font-size:15.5px;
  color:rgba(255,255,255,.78);
  border-radius:100px;
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:18px;right:18px;bottom:4px;height:2px;
  background:var(--blue);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out-expo);
}
.nav-link:hover{color:#fff}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}
.nav-link.is-active{color:#fff}
.site-header.is-stuck .nav-link{color:var(--slate)}
.site-header.is-stuck .nav-link:hover,
.site-header.is-stuck .nav-link.is-active{color:var(--navy-800)}
.nav-cta-mobile{display:none}

.header-actions{display:flex;align-items:center;gap:14px;flex:none}
.header-call{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  color:#fff;padding:10px 6px;
  transition:color .3s var(--ease), opacity .3s var(--ease);
}
.header-call svg{width:19px;height:19px;fill:currentColor}
.header-call:hover{color:var(--blue-300)}
.site-header.is-stuck .header-call{color:var(--navy-800)}
.site-header.is-stuck .header-call:hover{color:var(--blue-600)}

.burger{display:none;width:46px;height:46px;border-radius:12px;position:relative}
.burger span{
  position:absolute;left:13px;right:13px;height:2px;border-radius:2px;
  background:#fff;transition:transform .4s var(--ease-out-expo), opacity .25s var(--ease), background-color .45s var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.site-header.is-stuck .burger span{background:var(--navy-800)}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:var(--navy-800);
  color:#fff;
  padding-top:clamp(130px, 15vw, 190px);
  padding-bottom:clamp(80px, 9vw, 130px);
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(30,143,213,.32) 0%, rgba(30,143,213,0) 55%),
    radial-gradient(90% 80% at 6% 96%, rgba(30,143,213,.14) 0%, rgba(30,143,213,0) 60%),
    linear-gradient(168deg, #0C2138 0%, #0A1B2E 48%, #071523 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px, 5vw, 90px);
  align-items:center;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 18px 9px 14px;
  border-radius:100px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--font-display);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.eyebrow-dot{
  width:8px;height:8px;border-radius:50%;background:var(--blue-300);
  box-shadow:0 0 0 4px rgba(111,195,240,.2);
}

.hero-title{
  margin-top:28px;
  font-size:clamp(42px, 5.6vw, 88px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.02;
  max-width:15ch;
}
.hero-lead{
  margin-top:28px;
  font-size:clamp(17px, 1.35vw, 21px);
  color:rgba(255,255,255,.72);
  max-width:54ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

.hero-trust{
  display:flex;flex-wrap:wrap;gap:12px 30px;
  margin-top:48px;padding-top:32px;
  border-top:1px solid rgba(255,255,255,.1);
}
.hero-trust li{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;color:rgba(255,255,255,.75);
}
.hero-trust svg{
  width:21px;height:21px;flex:none;
  fill:none;stroke:var(--blue-300);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* Hero media */
.hero-media{position:relative}
.hero-figure{
  margin:0;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.1);
  aspect-ratio:4/3.35;
}
.hero-figure img{width:100%;height:100%;object-fit:cover;will-change:transform}

.hero-card{
  position:absolute;left:-26px;bottom:-30px;
  display:flex;align-items:center;gap:14px;
  padding:16px 24px 16px 16px;
  background:#fff;color:var(--navy-800);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.hero-card-mark{
  width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;background:#fff;border:1px solid var(--line);
}
.hero-card-mark img{width:100%;height:100%;object-fit:contain;padding:2px}
.hero-card strong{display:block;font-family:var(--font-display);font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.hero-card span{display:block;font-size:13.5px;color:var(--slate)}

.hero-tag{
  position:absolute;right:18px;top:22px;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:100px;
  background:rgba(7,21,35,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#fff;
}
.pulse{
  width:8px;height:8px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

/* =========================================================
   STRIP
   ========================================================= */
.strip{
  background:var(--navy-900);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  padding-block:20px;
}
.strip-track{
  display:flex;align-items:center;gap:0;
  width:max-content;
  animation:marquee 44s linear infinite;
}
.strip-track span{
  font-family:var(--font-display);
  font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
  padding-inline:34px;
  white-space:nowrap;
}
.strip-track i{width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.7;flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   ABOUT
   ========================================================= */
.about{background:var(--white)}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(44px, 6vw, 110px);
  align-items:center;
}
.about-media{position:relative;padding-bottom:70px;padding-right:40px}
.about-img{margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.about-img-main{aspect-ratio:4/4.6}
.about-img-sub{
  position:absolute;right:0;bottom:0;
  width:47%;aspect-ratio:3/3.4;
  border:6px solid #fff;
  border-radius:var(--r-lg);
  box-shadow:0 24px 50px rgba(10,27,46,.2);
}
.about-badge{
  position:absolute;left:-22px;top:44px;
  width:96px;height:96px;border-radius:50%;overflow:hidden;
  border:5px solid #fff;
  box-shadow:var(--shadow-lg);
  background:#fff;
}
.about-badge img{width:100%;height:100%;object-fit:contain;padding:4px}

.about-points{margin-top:44px;display:grid;gap:26px}
.about-points li{display:flex;gap:20px;align-items:flex-start}
.point-num{
  flex:none;
  font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.06em;
  color:var(--blue-600);
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--blue-050);
  border:1px solid rgba(30,143,213,.18);
}
.about-points strong{
  display:block;font-family:var(--font-display);font-size:17.5px;font-weight:700;
  color:var(--navy-800);letter-spacing:-.02em;margin-bottom:4px;
}
.about-points p{color:var(--slate);font-size:16px}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--gray-50)}
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 80px);
  align-items:end;
  margin-bottom:clamp(44px, 5vw, 70px);
}
.section-head.center{
  grid-template-columns:1fr;text-align:center;justify-items:center;max-width:820px;margin-inline:auto;
}
.section-head.center .section-eyebrow{justify-content:center}
.section-head.center .section-title{max-width:22ch}
.section-head-side{padding-bottom:6px}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:22px;
}
.svc-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:34px 30px 32px;
  overflow:hidden;
  transition:transform .5s var(--ease-out-expo), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
a.svc-card{display:block;text-decoration:none}
.svc-card::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg, var(--blue), var(--blue-300));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-out-expo);
}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-card:hover::before{transform:scaleX(1)}
.svc-ico{
  display:grid;place-items:center;
  width:60px;height:60px;border-radius:18px;
  background:var(--blue-050);
  border:1px solid rgba(30,143,213,.16);
  margin-bottom:24px;
  transition:background-color .4s var(--ease), transform .5s var(--ease-out-expo);
}
.svc-ico svg{
  width:28px;height:28px;
  fill:none;stroke:var(--blue-600);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .4s var(--ease);
}
.svc-card:hover .svc-ico{background:var(--blue);transform:translateY(-3px) scale(1.04)}
.svc-card:hover .svc-ico svg{stroke:#fff}
.svc-card h3{font-size:20px;font-weight:700;color:var(--navy-800);margin-bottom:10px;letter-spacing:-.025em}
.svc-card p{font-size:15.5px;color:var(--slate);line-height:1.6}
.svc-index{
  position:absolute;right:24px;top:26px;
  font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.08em;
  color:var(--line);
  transition:color .4s var(--ease);
}
.svc-card:hover .svc-index{color:var(--blue-300)}

.svc-card-accent{background:var(--navy-800);border-color:var(--navy-800)}
.svc-card-accent h3{color:#fff}
.svc-card-accent p{color:rgba(255,255,255,.66)}
.svc-card-accent .svc-ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.svc-card-accent .svc-ico svg{stroke:var(--blue-300)}
.svc-card-accent:hover .svc-ico{background:var(--blue)}
.svc-card-accent:hover .svc-ico svg{stroke:#fff}
.svc-card-accent .svc-index{color:rgba(255,255,255,.2)}

.services-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  margin-top:clamp(38px, 4vw, 56px);
}
.services-foot span{font-size:15.5px;color:var(--slate)}

/* =========================================================
   RECENT WORK
   ========================================================= */
.work{background:var(--white)}
.work-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:clamp(220px, 19vw, 330px);
  grid-auto-flow:dense;
  gap:22px;
}
.work-item{
  position:relative;
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--navy-800);
  box-shadow:var(--shadow-md);
  isolation:isolate;
}
.work-item-tall{grid-row:span 2}
.work-item-wide{grid-column:span 2}
.work-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out-expo);
}
.work-item::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(7,21,35,0) 50%, rgba(7,21,35,.82) 100%);
  pointer-events:none;
}
.work-item figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px 24px;
  color:#fff;
}
.work-tag{
  display:inline-block;margin-bottom:8px;
  padding:5px 11px;border-radius:100px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.work-item strong{
  display:block;
  font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.25;
}
.work-item:hover img{transform:scale(1.06)}

/* =========================================================
   WHY CHOOSE
   ========================================================= */
.why{
  background:
    radial-gradient(90% 70% at 88% 8%, rgba(30,143,213,.2) 0%, rgba(30,143,213,0) 60%),
    linear-gradient(160deg, #0F2740 0%, #0A1B2E 60%, #071523 100%);
  color:#fff;
}
.why-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(44px, 6vw, 100px);
  align-items:center;
}
.why-list{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;margin-top:48px;
}
.why-item{
  padding:30px 26px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-dark);
  transition:transform .5s var(--ease-out-expo), background-color .4s var(--ease), border-color .4s var(--ease);
}
.why-item:hover{transform:translateY(-6px);background:rgba(255,255,255,.075);border-color:rgba(111,195,240,.35)}
.why-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:rgba(30,143,213,.16);border:1px solid rgba(111,195,240,.26);
  margin-bottom:20px;
}
.why-ico svg{width:25px;height:25px;fill:none;stroke:var(--blue-300);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-item h3{font-size:19px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}
.why-item p{font-size:15.5px;color:rgba(255,255,255,.64);line-height:1.6}

.why-media{position:relative}
.why-img{
  margin:0;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:3/3.8;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 80px rgba(0,0,0,.4);
}
.why-img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.why-quote{
  position:absolute;left:-24px;bottom:-26px;right:34px;
  padding:26px 28px;
  background:var(--blue);
  border-radius:var(--r-lg);
  box-shadow:0 24px 50px rgba(30,143,213,.34);
}
.quote-mark{width:30px;height:30px;fill:rgba(255,255,255,.4);margin-bottom:10px}
.why-quote p{
  font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:#fff;
}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{background:var(--white)}

.reviews-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:24px}
.review-card{
  position:relative;
  padding:36px 32px 32px;
  background:var(--gray-50);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform .5s var(--ease-out-expo), box-shadow .5s var(--ease), background-color .4s var(--ease);
}
.review-card:hover{transform:translateY(-6px);background:#fff;box-shadow:var(--shadow-lg)}
.stars{display:flex;gap:4px;margin-bottom:20px}
.stars svg{width:20px;height:20px;fill:#F5B942;stroke:none}
.review-text{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;line-height:1.55;letter-spacing:-.02em;
  color:var(--navy-700);
  min-height:98px;
}
.review-by{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.review-by strong{display:block;font-family:var(--font-display);font-size:15.5px;color:var(--navy-800)}
.review-by span{display:block;font-size:13.5px;color:var(--slate-light)}
.review-by .avatar{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--blue-050);border:1px solid rgba(30,143,213,.2);
  font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--blue-600);
}
.review-text{overflow-wrap:anywhere}
.stars svg.star-off{fill:var(--line)}
/* Keeps one or two published reviews centered instead of stuck to the left. */
@media (min-width:1025px){
  .reviews-grid{display:flex;flex-wrap:wrap;justify-content:center}
  .review-card{flex:0 1 calc((100% - 48px) / 3)}
}

.reviews-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px;
  margin-top:clamp(38px, 4vw, 56px);
}
.reviews-foot span{font-size:15.5px;color:var(--slate)}

/* Write a review dialog */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.review-dialog{
  width:min(620px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  padding:clamp(26px, 3vw, 42px);
  border:0;border-radius:var(--r-xl);
  background:#fff;color:var(--ink);
  box-shadow:var(--shadow-lg);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.review-dialog::backdrop{
  background:rgba(7,21,35,.6);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.review-close{
  position:absolute;right:16px;top:16px;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  transition:background-color .3s var(--ease);
}
.review-close:hover{background:var(--gray-100)}
.review-close svg{width:22px;height:22px;fill:none;stroke:var(--navy-800);stroke-width:2;stroke-linecap:round}
.review-form .form-title{padding-right:44px}
.review-form .btn{margin-top:8px}

.rating-field{border:0;padding:0;margin-inline:0;min-width:0}
.rating-field legend{
  padding:0;margin-bottom:9px;
  font-family:var(--font-display);
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy-700);
}
.rating-field.invalid legend{color:#C43F37}
.rating-input{display:flex;gap:2px;width:max-content}
.rating-input label{position:relative;display:block;padding:4px;cursor:pointer}
.rating-input input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.rating-input svg{width:36px;height:36px;fill:var(--line);transition:fill .15s var(--ease)}
.rating-input label:has(input:checked) svg,
.rating-input label:has(~ label input:checked) svg{fill:#F5B942}
.rating-input:hover label svg{fill:#F5B942}
.rating-input label:hover ~ label svg{fill:var(--line)}
.rating-input label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:1px;border-radius:8px}

.review-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.review-done{text-align:center;padding-block:18px}
.review-done h3{font-size:28px;font-weight:800;color:var(--navy-800);letter-spacing:-.03em}
.review-done p{margin-top:12px;color:var(--slate);max-width:44ch;margin-inline:auto}
.review-done .btn{margin-top:28px}

/* =========================================================
   SERVICE AREA
   ========================================================= */
.area{
  background:linear-gradient(150deg, #0A1B2E 0%, #0F2740 55%, #0A1B2E 100%);
  color:#fff;
  position:relative;overflow:hidden;
}
.area-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px, 5vw, 90px);align-items:center;
}
.area-copy .btn{margin-top:38px}
.area-map svg{width:100%;height:auto;max-width:640px;margin-inline:auto}
.mt-shape{
  fill:rgba(30,143,213,.14);
  stroke:var(--blue-300);
  stroke-width:2;
  stroke-linejoin:round;
}
.mt-pin path{fill:var(--blue-300)}
.pin-halo{fill:none;stroke:var(--blue-300);stroke-width:1.5;opacity:0;transform-origin:272px 148px;animation:halo 3.2s ease-out infinite}
.pin-halo-2{animation-delay:1.6s}
@keyframes halo{
  0%{transform:scale(.35);opacity:.8}
  100%{transform:scale(1.35);opacity:0}
}
.mt-label{
  font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:.3em;
  fill:rgba(255,255,255,.68);text-anchor:middle;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{
  position:relative;
  background:linear-gradient(115deg, var(--blue-600) 0%, var(--blue) 46%, #33A6E4 100%);
  color:#fff;
  padding-block:clamp(76px, 8vw, 124px);
  overflow:hidden;
}
.final-cta::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(90% 100% at 50% 50%, #000 0%, transparent 76%);
  -webkit-mask-image:radial-gradient(90% 100% at 50% 50%, #000 0%, transparent 76%);
  pointer-events:none;
}
.final-inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.final-title{font-size:clamp(38px, 5.4vw, 78px);font-weight:800;letter-spacing:-.04em}
.final-lead{margin-top:22px;max-width:58ch;font-size:clamp(17px,1.3vw,20px);color:rgba(255,255,255,.9)}
.final-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{background:var(--gray-50)}
.contact-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px, 5vw, 90px);align-items:start;
}
.contact-list{margin-top:44px;display:grid;gap:16px}
.contact-list li{
  display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease-out-expo);
}
.contact-list li:hover{border-color:rgba(30,143,213,.4);box-shadow:var(--shadow-md);transform:translateX(4px)}
.ci-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:none;
  background:var(--blue-050);border:1px solid rgba(30,143,213,.16);
}
.ci-ico svg{width:22px;height:22px;fill:none;stroke:var(--blue-600);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ci-label{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-light);margin-bottom:3px;
}
.contact-list strong{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy-800);letter-spacing:-.02em}
.contact-list a strong{transition:color .3s var(--ease)}
.contact-list a:hover strong{color:var(--blue-600)}
.ci-sub{display:block;font-size:13.5px;color:var(--slate);margin-top:3px}
.ci-pending{border-style:dashed;background:transparent}
.ci-pending strong{color:var(--slate-light)}
.ci-pending .ci-ico{background:var(--gray-100);border-color:var(--line)}
.ci-pending .ci-ico svg{stroke:var(--slate-light)}

/* Form */
.contact-form-wrap{position:relative}
.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(28px, 3vw, 46px);
  box-shadow:var(--shadow-md);
}
.form-title{font-size:26px;font-weight:800;color:var(--navy-800);letter-spacing:-.03em}
.form-sub{margin-top:8px;font-size:15.5px;color:var(--slate);margin-bottom:30px}
.field{margin-bottom:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{
  display:block;font-family:var(--font-display);
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy-700);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;
  padding:15px 18px;
  background:var(--gray-50);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  font-size:16px;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field textarea{resize:vertical;min-height:120px;font-family:var(--font-body)}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-light)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(30,143,213,.14);
}
.field input.invalid,.field select.invalid,.field textarea.invalid{
  border-color:#E0574F;box-shadow:0 0 0 4px rgba(224,87,79,.12);
}
.select-wrap{position:relative}
.select-wrap svg{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;pointer-events:none;
  fill:none;stroke:var(--slate);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.contact-form .btn{margin-top:8px}
.form-fine{margin-top:16px;text-align:center;font-size:13px;color:var(--slate-light)}

.form-success{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(40px, 4vw, 64px);text-align:center;box-shadow:var(--shadow-md);
}
.success-ico{
  display:grid;place-items:center;width:70px;height:70px;border-radius:50%;
  background:var(--blue-050);border:1px solid rgba(30,143,213,.25);
  margin:0 auto 24px;
}
.success-ico svg{width:32px;height:32px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.form-success h3{font-size:28px;font-weight:800;color:var(--navy-800);letter-spacing:-.03em}
.form-success p{margin-top:12px;color:var(--slate);max-width:44ch;margin-inline:auto}
.form-success a{color:var(--blue-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-success .btn{margin-top:28px}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--navy-900);color:#fff;padding-top:clamp(60px,6vw,90px);padding-bottom:110px}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px, 4vw, 70px);
  padding-bottom:clamp(40px,4vw,60px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.brand-footer .brand-name{color:#fff}
.brand-footer .brand-sub{color:rgba(255,255,255,.5)}
.footer-brand p{margin-top:22px;color:rgba(255,255,255,.6);font-size:15.5px;max-width:38ch}
.badge-licensed{
  display:inline-block;margin-top:20px;
  padding:8px 16px;border-radius:100px;
  background:rgba(30,143,213,.14);border:1px solid rgba(111,195,240,.3);
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-300);
}
.footer-col h4,.footer-cta h4{
  font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:22px;
}
.footer-col ul{display:grid;gap:12px}
.footer-col a,.footer-col span{
  font-size:15.5px;color:rgba(255,255,255,.62);
  transition:color .3s var(--ease), padding-left .35s var(--ease-out-expo);
  display:inline-block;
}
.footer-col a:hover{color:var(--blue-300);padding-left:5px}
.footer-col .muted{color:rgba(255,255,255,.34)}
.footer-cta p{font-size:15.5px;color:rgba(255,255,255,.62);margin-bottom:20px;max-width:30ch}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  padding-top:28px;
  font-size:14px;color:rgba(255,255,255,.42);
}

/* =========================================================
   MOBILE STICKY BAR
   ========================================================= */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(10,27,46,.1);
}
.mobile-bar-btn{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 10px;border-radius:100px;
  font-family:var(--font-display);font-weight:700;font-size:15.5px;
}
.mobile-bar-btn svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mobile-bar-btn.ghost svg{fill:currentColor;stroke:none}
.mobile-bar-btn.ghost{background:var(--gray-100);color:var(--navy-800)}
.mobile-bar-btn.solid{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}

/* =========================================================
   ANIMATION BASE STATES (JS removes when GSAP takes over)
   ========================================================= */
.js-anim [data-anim],
.js-anim [data-split]{visibility:hidden}
/* Masked line wrappers. The padding/negative-margin pair keeps descenders and
   accents from being clipped by the mask without loosening the line height. */
.split-line{
  display:block;overflow:hidden;
  padding-block:.08em .18em;
  margin-block:-.08em -.18em;
}
.split-inner{display:block;will-change:transform}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1400px){
  .services-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}

@media (max-width:1180px){
  .hero-inner{grid-template-columns:1fr;gap:56px}
  .hero-title{max-width:18ch}
  .hero-media{max-width:760px}
  .about-grid,.why-grid,.area-inner,.contact-grid{grid-template-columns:1fr}
  .about-media{max-width:620px;margin-inline:auto}
  .why-media{max-width:560px;margin-inline:auto;order:-1}
  .why-img{aspect-ratio:4/3.4}
  .section-head{grid-template-columns:1fr;gap:26px;align-items:start}
  .section-title{max-width:20ch}
  .footer-top{grid-template-columns:repeat(2, minmax(0,1fr));gap:44px}
}

@media (max-width:1024px){
  .nav{
    position:fixed;inset:0 0 0 auto;
    width:min(400px, 86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:112px 28px 40px;
    background:#fff;
    box-shadow:-20px 0 60px rgba(10,27,46,.2);
    transform:translateX(100%);
    transition:transform .55s var(--ease-out-expo);
    overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0)}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-link,
  .site-header.is-stuck .nav-link{
    color:var(--navy-800);font-size:20px;font-weight:700;padding:16px 4px;
    border-bottom:1px solid var(--line);border-radius:0;
  }
  .nav-link::after{display:none}
  .nav-cta-mobile{display:grid;gap:12px;margin-top:32px}
  .nav-cta-mobile .btn-ghost-dark{color:var(--navy-800)}
  .burger{display:block;z-index:2}
  .header-call,.header-actions .btn{display:none}
  body.nav-open{overflow:hidden}
  .nav-backdrop{
    position:fixed;inset:0;z-index:99;
    background:rgba(7,21,35,.45);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  }
  .nav-backdrop.is-visible{opacity:1;pointer-events:auto}
  .reviews-grid{grid-template-columns:1fr}
  .review-text{min-height:0}
  .work-grid{grid-template-columns:repeat(2, minmax(0,1fr));grid-auto-rows:clamp(220px, 44vw, 420px)}
  .work-item-tall{grid-row:span 1}
  .mobile-bar{display:flex}
  .site-footer{padding-bottom:130px}
  html{scroll-padding-top:90px}
}

@media (max-width:860px){
  .services-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .why-list{grid-template-columns:1fr}
  .hero-trust{gap:12px 22px}
}

@media (max-width:640px){
  body{font-size:16px}
  .services-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
  .work-item,.work-item-wide{grid-column:auto;aspect-ratio:4/4.4}
  .work-item-wide{aspect-ratio:4/3}
  .work-item figcaption{padding:18px 20px}
  .field-row{grid-template-columns:1fr;gap:0}
  .footer-top{grid-template-columns:1fr;gap:38px}
  .hero-card{left:0;right:0;bottom:-22px;padding:14px 18px}
  .hero-tag{right:12px;top:14px;font-size:11.5px;padding:7px 13px}
  .about-media{padding-right:0;padding-bottom:56px}
  .about-img-sub{width:52%;right:-6px}
  .about-badge{left:-10px;top:20px;width:74px;height:74px;border-width:4px}
  .why-quote{left:0;right:0;bottom:-20px;padding:22px}
  .hero-actions .btn,.final-actions .btn{width:100%}
  .services-foot .btn{width:100%}
  .brand-mark{width:50px;height:50px}
  .brand-name{font-size:19px}
  .brand-sub{font-size:10px}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-anim [data-anim],.js-anim [data-split]{visibility:visible !important}
  .strip-track{animation:none}
}