:root {
  --navy: #0c1b2b;
  --navy-2: #13263a;
  --cyan: #2fd3ea;
  --cyan-deep: #12bcd6;
  --ink: #0c1b2b;
  --text: #3d4a57;
  --muted: #9fb0bf;
  --line: #d9e0e6;
  --white: #ffffff;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --wide: "Archivo", "Arial Black", sans-serif;
  --gut: clamp(16px, 3.4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }

/* ---------- photos ---------- */
.hero-img, .mat-img, .svc-img, .team-img, .process-img { display: block; width: 100%; object-fit: cover; background: #9fd3e2; }

/* ---------- shared bits ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cyan); color: var(--navy);
  font: 700 15px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase;
  padding: 17px 26px; border: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn svg { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover { background: #5be0f1; }
.btn:hover svg { transform: translateX(4px); }
.btn-sm { font-size: 13px; padding: 12px 16px; gap: 10px; }
.btn-sm svg { width: 13px; height: 13px; }

.eyebrow { font: 700 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 12px; }
.link {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.link svg { width: 15px; height: 15px; transition: transform .2s; }
.link:hover svg { transform: translateX(5px); }
.arr { width: 18px; height: 18px; flex: none; transition: transform .2s; }

/* ---------- logo ---------- */
.logo { display: block; flex: none; }
.top .logo img { height: 64px; width: auto; }
.logo-lg img { height: auto; width: clamp(220px, 24vw, 340px); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); }
.top-in { display: flex; align-items: center; height: 88px; gap: 40px; }
.nav { display: flex; gap: clamp(20px, 2.7vw, 42px); margin-left: clamp(20px, 3vw, 52px); }
.nav a { font: 600 13.5px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); transition: color .2s; }
.nav a:hover, .nav a.is-active { color: var(--cyan-deep); }
.nav-cta { margin-left: auto; }
.nav-cta-m, .burger { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 690px; }
.hero-img {
  position: absolute; top: 0; right: 0; width: 69%; height: 100%;
  clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-in { position: relative; padding-top: clamp(30px, 4vw, 56px); padding-bottom: 210px; }
.hero h1 { font-size: clamp(54px, 7.1vw, 104px); line-height: .9; max-width: 6.2em; }
.hero h1 .ln { display: block; }
.hero-sub { margin-top: 26px; font: 500 clamp(15px, 1.35vw, 19px)/1.3 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.hero .btn { margin-top: 34px; }
.loc { display: flex; align-items: center; gap: 10px; margin-top: 34px; font: 600 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.loc svg { width: 17px; height: 17px; color: var(--navy); }

/* ---------- built for coastal life ---------- */
.built {
  --slant: 190px;
  position: relative; z-index: 2;
  margin-top: calc(var(--slant) * -1 - 10px);
  background: var(--navy); color: #c6d2dc;
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - 46px), 0 100%);
  padding: calc(var(--slant) - 30px) 0 120px;
}
.built-tag {
  position: absolute; top: 34px; right: var(--gut);
  font: 700 12.5px/1.35 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
}
.built-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 0 26px; align-items: end; }
.built-intro { padding-bottom: 4px; }
.built h2 { color: #fff; font-size: clamp(42px, 4.6vw, 68px); line-height: .92; }
.rule-left { margin-top: 34px; padding-left: 18px; border-left: 2px solid var(--cyan); font-size: 15px; line-height: 1.6; color: #d7e0e8; max-width: 330px; }

.mat { display: block; color: #c6d2dc; }
.mat-img { height: clamp(180px, 19vw, 270px); clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); margin-bottom: 28px; transition: filter .3s; }
.mat:nth-of-type(1) .mat-img { margin-top: 70px; }
.mat:nth-of-type(2) .mat-img { margin-top: 35px; }
.mat:hover .mat-img { filter: brightness(1.1); }
.mat-text { position: relative; padding: 0 30px 0 18px; border-left: 1px solid rgba(47,211,234,.55); min-height: 82px; }
.mat:nth-of-type(1) .mat-text { border-left-color: transparent; padding-left: 4px; }
.mat h3 { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: .02em; margin-bottom: 8px; }
.mat p { font-size: 14.5px; line-height: 1.55; }
.mat .arr { position: absolute; right: 0; bottom: 6px; color: #fff; }
.mat:hover .arr { transform: translateX(5px); color: var(--cyan); }

.svc-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px; }
.svc-row a {
  display: flex; align-items: center; gap: 22px; padding: 10px 44px;
  border-left: 1.5px solid var(--cyan); color: #fff;
  font: 600 19px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase;
}
.svc-row a:first-child { border-left: 0; padding-left: 36px; }
.svc-row .ic { width: 44px; height: 44px; flex: none; }
.svc-row .arr { margin-left: auto; }
.svc-row a:hover .arr { transform: translateX(5px); color: var(--cyan); }

/* ---------- replace / repair / inspect ---------- */
.services { position: relative; z-index: 1; margin-top: -10px; padding: 60px 0 60px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.svc-img { width: calc(100% + 80px); height: clamp(220px, 23vw, 330px); margin: 0 -40px 30px; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.svc:first-child .svc-img { margin-left: -6px; width: calc(100% + 46px); }
.svc h2 { font-size: clamp(50px, 5.4vw, 80px); line-height: .9; margin-bottom: 18px; }
.svc p { font-size: 16px; line-height: 1.5; max-width: 390px; color: var(--text); }
.svc .link { margin-top: 26px; }

/* ---------- our work ---------- */
.work { padding-top: 10px; }
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 18px; }
.local-row { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.local {
  font: 900 clamp(72px, 11.6vw, 176px)/.8 var(--wide); font-stretch: 112%; letter-spacing: -.01em;
  color: #fff; -webkit-text-stroke: clamp(2px, .28vw, 4px) var(--navy);
  text-shadow: -.05em .03em 0 var(--navy);
  padding-left: .05em;
}
.local-stack { font: 800 clamp(26px, 3vw, 44px)/1 var(--cond); text-transform: uppercase; color: var(--ink); }
.beyond {
  align-self: flex-start; margin-top: 30px;
  font: 600 13px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.beyond svg { width: 54px; height: 18px; margin-top: 8px; color: var(--cyan-deep); transition: transform .2s; }
.beyond:hover svg { transform: translateX(6px); }
.collage { width: 100%; height: auto; }
.collage image { transition: opacity .3s; }

/* ---------- local is personal ---------- */
.team { display: grid; grid-template-columns: 1.95fr 1fr; align-items: center; margin-top: 14px; }
.team-img { height: clamp(360px, 36vw, 540px); clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%); }
.team-text { padding: 40px var(--gut) 40px clamp(24px, 3vw, 46px); }
.team h2 { font-size: clamp(48px, 5.3vw, 82px); line-height: .9; }
.cyan-rule { display: block; width: 46px; height: 3px; background: var(--cyan); margin: 26px 0 22px; }
.team p { font-size: 16px; line-height: 1.55; max-width: 410px; }
.team .link { margin-top: 26px; }

/* ---------- process ---------- */
.process { padding: 46px 0 0; position: relative; z-index: 2; }
.process-grid { display: grid; grid-template-columns: 1fr 2.15fr; gap: 50px; align-items: start; }
.process h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: .95; }
.process-img { height: 150px; margin-top: 18px; margin-left: calc(var(--gut) * -1); width: calc(100% + var(--gut)); clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); }
.steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0 14px; }
.steps li { min-width: 0; }
.num { display: block; font: 600 32px/1 var(--cond); color: var(--cyan-deep); margin-bottom: 14px; }
.steps .ic { width: 40px; height: 40px; color: var(--cyan-deep); margin-bottom: 18px; }
.steps h3 { font-size: 18px; font-weight: 700; letter-spacing: .02em; margin-bottom: 6px; }
.steps p { font-size: 14px; line-height: 1.45; }
.step-arr { padding-top: 62px; color: var(--ink); }
.step-arr svg { width: 22px; height: 22px; }

/* ---------- estimate + faq ---------- */
.estimate { position: relative; padding-top: 28px; overflow-x: clip; }
.est-bg {
  position: absolute; inset: 0; background: var(--cyan);
  clip-path: polygon(0 74px, calc(50% - 226px) 46px, calc(50% + 60px) 362px, 100% 362px, 100% 100%, 0 100%);
}
.est-grid {
  position: relative;
  display: grid; grid-template-columns: 37% 1fr; column-gap: 40px;
  grid-template-areas: "talk faq" "talk form";
}
.faq { grid-area: faq; padding-right: 10px; }
.q { border-bottom: 1px solid var(--line); }
.q:nth-child(2) { margin-left: 72px; }
.q:nth-child(3) { margin-left: 150px; border-bottom: 0; }
.q summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0 6px; font: 700 18px/1.2 var(--cond); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
}
.q summary::-webkit-details-marker { display: none; }
.pm { position: relative; width: 18px; height: 18px; flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.8px; margin-top: -.9px; background: currentColor; transition: transform .25s; }
.pm::after { transform: rotate(90deg); }
.q[open] .pm::after { transform: rotate(0deg); }
.q p { padding: 0 44px 14px 0; font-size: 14px; line-height: 1.45; }
.q:not([open]) { padding-bottom: 8px; }

.talk { grid-area: talk; padding: 104px 0 200px; position: relative; }
.eyebrow-dark { color: var(--navy); }
.talk h2 { font-size: clamp(46px, 4.6vw, 70px); line-height: .92; }
.dark-rule { display: block; width: 100%; max-width: 440px; height: 1px; background: rgba(12,27,43,.35); margin: 24px 0 20px; }
.talk-p { font-size: 16px; line-height: 1.55; color: var(--navy); max-width: 470px; }
.contact { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }
.contact li { display: flex; gap: 18px; align-items: flex-start; color: var(--navy); }
.contact svg { width: 24px; height: 24px; flex: none; }
.contact b { display: block; font: 600 16px/1.5 var(--body); }
.contact small { display: block; font-size: 14px; }

/* form */
.form {
  grid-area: form; position: relative; z-index: 3;
  align-self: start; margin: 40px 0 -150px auto; width: min(100%, 560px);
  background: #fff; padding: 30px 30px 32px; box-shadow: 0 24px 60px rgba(12,27,43,.22);
  display: grid; gap: 14px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.form label, .form legend { display: block; font: 500 13px/1.2 var(--body); color: var(--ink); }
.form label > input, .form label > select { display: block; margin-top: 6px; }
.form i { color: #e0322b; font-style: normal; }
.form input:not([type=radio]), .form select {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid #c9d2da; border-radius: 0;
  font: 400 14px var(--body); color: var(--ink); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s;
}
.form select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230c1b2b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; color: #556270; }
.form input:focus, .form select:focus { border-color: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(47,211,234,.25); }
.form .bad { border-color: #e0322b !important; }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 30px; }
.form legend { width: 100%; margin-bottom: 8px; padding: 0; }
.radio { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 9px !important; cursor: pointer; font-size: 13px !important; }
.radio input { position: absolute; opacity: 0; }
.radio span { width: 16px; height: 16px; border: 1.5px solid #8796a5; border-radius: 50%; display: grid; place-items: center; }
.radio input:checked + span { border-color: var(--cyan-deep); }
.radio input:checked + span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-deep); }
.radio input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47,211,234,.35); }
.btn-block { width: 100%; justify-content: center; margin-top: 6px; font-size: 17px; }
.form-msg { font-size: 14px; color: var(--navy); min-height: 0; }
.form-msg:empty { display: none; }

/* palm fronds */
.frond { position: absolute; z-index: 1; color: var(--navy); pointer-events: none; }
.frond-top { width: 380px; left: -70px; top: -120px; transform: rotate(-8deg); }
.frond-bot { width: 420px; left: -90px; bottom: 30px; transform: rotate(4deg) scaleY(-1); }

/* ---------- footer ---------- */
.foot {
  position: relative; background: var(--navy); color: #c6d2dc;
  margin-top: -90px; padding-top: 290px;
  clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 40px clamp(24px, 4vw, 64px); padding-bottom: 50px; }
.foot-brand { display: grid; gap: 22px; align-content: start; }
.foot-tag { font: 700 13px/1.4 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.foot-contact { display: grid; gap: 8px; font-size: 14.5px; }
.foot-contact a:hover { color: var(--cyan); }
.foot-col h3 { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .12em; margin-bottom: 16px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col a { font: 500 14px/1.3 var(--body); color: #c6d2dc; transition: color .2s; }
.foot-col a:hover { color: var(--cyan); }
.foot-place { display: flex; align-items: center; gap: 12px; font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.foot-place svg { width: 34px; height: 34px; }
.foot-bar { position: relative; display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; padding-bottom: 24px; font-size: 12.5px; letter-spacing: .04em; }
.foot-bar > span:last-child { text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.foot-bar::before { content: ""; position: absolute; left: var(--gut); right: var(--gut); top: -1px; height: 1px; background: rgba(255,255,255,.18); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .nav { gap: 18px; margin-left: 10px; }
  .nav a { font-size: 12px; }
  .svc-row a { padding: 10px 24px; font-size: 16px; gap: 14px; }
  .svc-row .ic { width: 34px; height: 34px; }
  .q:nth-child(2) { margin-left: 40px; }
  .q:nth-child(3) { margin-left: 80px; }
}

@media (max-width: 960px) {
  .top-in { height: 72px; }
  .top .logo img { height: 46px; }
  .nav-cta { display: none; }
  .burger { display: grid; gap: 5px; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
  .burger span { width: 26px; height: 2px; background: var(--navy); transition: transform .25s, opacity .25s; }
  .top.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .top.open .burger span:nth-child(2) { opacity: 0; }
  .top.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; background: #fff; padding: 8px var(--gut) 22px;
    box-shadow: 0 20px 30px rgba(12,27,43,.12);
    display: none;
  }
  .top.open .nav { display: flex; }
  .nav a { padding: 14px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
  .nav .nav-cta-m { display: inline-flex; margin-top: 16px; border: 0; padding: 14px 18px; align-self: flex-start; }

  .hero { min-height: 0; }
  .hero-in { padding-bottom: 30px; }
  .hero-img { position: relative; width: 100%; height: 62vw; min-height: 260px; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
  .hero { display: flex; flex-direction: column-reverse; }
  .built { --slant: 70px; margin-top: -60px; padding-top: calc(var(--slant) + 6px); padding-bottom: 80px; }
  .built-tag { position: static; text-align: right; padding: 0 var(--gut); margin-bottom: 24px; }
  .built-tag br { display: none; }
  .built-grid { grid-template-columns: 1fr 1fr 1fr; gap: 26px 18px; }
  .built-intro { grid-column: 1 / -1; }
  .mat:nth-of-type(n) .mat-img { margin-top: 0; }
  .svc-row { grid-template-columns: 1fr; margin-top: 46px; }
  .svc-row a, .svc-row a:first-child { border-left: 0; border-top: 1px solid rgba(47,211,234,.5); padding: 20px 4px; }

  .svc-grid { grid-template-columns: 1fr; gap: 56px; }
  .svc-img, .svc:first-child .svc-img { margin: 0 0 24px; width: 100%; }

  .work-head { flex-direction: column; align-items: flex-start; }
  .beyond { margin-top: 0; }
  .team { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: 10px; }
  .process-img { margin-right: calc(var(--gut) * -1); width: calc(100% + var(--gut) * 2); }
  .steps { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .step-arr { display: none; }

  .estimate { padding-top: 0; }
  .est-grid { grid-template-columns: 1fr; grid-template-areas: "faq" "talk" "form"; }
  .faq { background: #fff; margin: 0 calc(var(--gut) * -1); padding: 30px var(--gut) 40px; position: relative; z-index: 2; }
  .q:nth-child(n) { margin-left: 0; }
  .est-bg { clip-path: none; }
  .talk { padding: 50px 0 10px; }
  .form { margin: 30px 0 -120px; width: 100%; }
  .frond-top { top: auto; bottom: 46%; left: auto; right: -120px; width: 260px; opacity: .9; transform: scaleX(-1) rotate(-10deg); }
  .frond-bot { width: 260px; bottom: 140px; }

  .foot { padding-top: 170px; clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%); }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .built-grid { grid-template-columns: 1fr; }
  .mat-img { height: 210px; }
  .mat .mat-text { border-left: 0; padding-left: 4px; min-height: 0; }
  .row2 { grid-template-columns: 1fr; gap: 14px; }
  .form { padding: 22px 18px; }
  .steps { grid-template-columns: 1fr; }
  .local-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .local-stack br { display: none; }
  .local-stack { font-size: 26px; }
  .foot-bar { flex-direction: column; }
}

/* =================================================================
   Service pages (roof replacement / roof repair)
   ================================================================= */
.hero-sub-page { min-height: 640px; }
.hero-sub-page .hero-in { padding-bottom: 230px; }
.hero-sub-page .hero-in > * { max-width: min(520px, 40vw); }
.hero-sub-page .hero-img { width: 60%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.hero-sub-page h1 { font-size: clamp(50px, 6.4vw, 94px); max-width: 6.6em; }
.hero-sub-page .hero-sub { text-transform: none; letter-spacing: 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; max-width: 470px; color: var(--text); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font: 600 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #6b7a88; }
.crumbs a:hover { color: var(--cyan-deep); }
.crumbs span[aria-current] { color: var(--cyan-deep); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.hero-ctas .btn { margin-top: 0; }
.call { display: inline-flex; align-items: center; gap: 10px; font: 700 18px/1 var(--cond); letter-spacing: .05em; color: var(--ink); }
.call svg { width: 18px; height: 18px; color: var(--cyan-deep); }
.call:hover { color: var(--cyan-deep); }
.trust { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.trust li { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.trust svg { width: 16px; height: 16px; color: var(--cyan-deep); }

.navy-band { padding-top: calc(var(--slant) + 20px); margin-top: 20px; }
.hero + .navy-band { margin-top: calc(var(--slant) * -1 - 10px); }
.navy-band .built-intro h2 { margin-bottom: 0; }
.band-head { display: grid; grid-template-columns: 1.15fr 2fr; gap: 26px 60px; align-items: end; margin-bottom: 54px; }
.band-head .rule-left { margin-top: 0; max-width: 560px; }
.points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(47,211,234,.35); }
.points li { padding: 30px 30px 30px 0; border-bottom: 1px solid rgba(47,211,234,.35); }
.points li:not(:nth-child(3n+1)) { padding-left: 30px; border-left: 1px solid rgba(47,211,234,.35); }
.points .ic { width: 36px; height: 36px; color: var(--cyan); margin-bottom: 16px; }
.points h3 { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .02em; margin-bottom: 8px; }
.points p { font-size: 15px; line-height: 1.55; color: #c6d2dc; }

.section { padding: 70px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(40px, 4.4vw, 66px); line-height: .92; }
.section-head p { max-width: 460px; font-size: 16px; }

.mat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.mat-card .svc-img { height: clamp(200px, 19vw, 280px); }
.mat-card h3 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1; margin-bottom: 12px; }
.mat-card > p { font-size: 15.5px; line-height: 1.55; margin-bottom: 18px; }
.specs { margin: 0; display: grid; border-top: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.specs dt { font: 700 13px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.specs dd { margin: 0; text-align: right; }

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.split-img { width: 100%; height: clamp(320px, 34vw, 500px); object-fit: cover; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.split.flip .split-img { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); order: 2; }
.split h2 { font-size: clamp(40px, 4.4vw, 66px); line-height: .92; }
.split p { font-size: 16px; line-height: 1.6; margin-top: 14px; max-width: 520px; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.ticks svg { width: 20px; height: 20px; flex: none; color: var(--cyan-deep); margin-top: 1px; }
.split .link { margin-top: 26px; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 34px; }
.compare > div { padding: 30px 34px; border: 1px solid var(--line); }
.compare > div + div { border-left: 0; background: var(--navy); color: #c6d2dc; border-color: var(--navy); }
.compare h3 { font-size: 26px; font-weight: 700; margin-bottom: 14px; }
.compare > div + div h3 { color: #fff; }
.compare > div + div .ticks li { color: #dbe4ea; }
.compare > div + div .ticks svg { color: var(--cyan); }
.compare .ticks { margin-top: 0; }

.recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.recent figure { margin: 0; }
.recent figcaption { font: 700 14px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.recent figcaption span { display: block; font: 400 14px/1.5 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); margin-top: 4px; }

.process-alt { padding-bottom: 60px; }
.process-alt .steps { margin-top: 0; }

.more { position: relative; z-index: 2; background: var(--navy); padding: 46px 0; }
.more .svc-row { margin-top: 0; }

@media (max-width: 960px) {
  .hero-sub-page .hero-in { padding-bottom: 30px; }
  .hero-sub-page .hero-in > * { max-width: none; }
  .hero-sub-page .hero-img { width: 100%; }
  .navy-band { padding-top: calc(var(--slant) + 6px); }
  .band-head, .split, .compare { grid-template-columns: 1fr; }
  .split.flip .split-img { order: 0; }
  .points, .mat-cards, .recent { grid-template-columns: 1fr 1fr; }
  .points li:nth-child(n) { padding: 26px 20px 26px 0; border-left: 0; }
  .points li:nth-child(2n) { padding-left: 20px; border-left: 1px solid rgba(47,211,234,.35); }
  .compare > div + div { border-left: 1px solid var(--navy); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section { padding: 54px 0; }
}
@media (max-width: 600px) {
  .points, .mat-cards, .recent { grid-template-columns: 1fr; }
  .points li:nth-child(n) { padding: 24px 0; border-left: 0; }
  .compare > div { padding: 24px 20px; }
}

/* ---------- dropdown nav ---------- */
.top-in { gap: 28px; }
.nav { align-self: stretch; align-items: center; gap: clamp(18px, 2.3vw, 36px); }
.dd { position: relative; height: 100%; display: flex; align-items: center; }
.dd > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.dd-menu {
  position: absolute; top: 100%; left: -22px; min-width: 250px; padding: 12px 0;
  background: #fff; box-shadow: 0 22px 44px rgba(12,27,43,.16); border-top: 3px solid var(--cyan);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
.nav .dd-menu a { display: block; padding: 11px 22px; font-size: 13px; letter-spacing: .06em; }
.nav .dd-menu a:hover { background: #f1fafc; }
.nav .dd-menu a.is-active { color: var(--cyan-deep); }
.dd.is-active > a { color: var(--cyan-deep); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card { display: flex; flex-direction: column; color: var(--text); }
.card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); margin-bottom: 18px; transition: filter .3s; }
.card:hover img { filter: brightness(1.08) saturate(1.05); }
.card h3 { font-size: 28px; line-height: 1; margin-bottom: 10px; }
.card p { font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
.card .link { margin-top: auto; }
.card:hover .link svg { transform: translateX(5px); }
.navy-cards { background: var(--navy); }
.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li, .chips a { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); font: 600 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.chips a:hover { border-color: var(--cyan-deep); color: var(--cyan-deep); }
.local-note { background: #f3f8fa; }
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(34px, 3.4vw, 50px); line-height: .95; margin: 40px 0 14px; }
.prose p { font-size: 16.5px; line-height: 1.7; margin-bottom: 14px; }
.prose a { color: var(--cyan-deep); text-decoration: underline; }

/* ---------- gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filters button { padding: 12px 20px; border: 1px solid var(--line); background: #fff; font: 700 14px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: all .2s; }
.filters button:hover { border-color: var(--cyan-deep); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 24px; }
.gallery figure { margin: 0; }
.gallery figure.wide { grid-column: span 2; }
.gallery img { width: 100%; height: 300px; object-fit: cover; display: block; margin-bottom: 12px; }
.gallery figure.wide img { height: 300px; }
.gallery figcaption { font: 700 14px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.gallery figcaption span { display: block; font: 400 14px/1.5 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); margin-top: 3px; }
.gallery figure[hidden] { display: none; }

/* ---------- 404 ---------- */
.lost { min-height: 70vh; display: grid; align-content: center; padding: 80px 0; }
.lost .local { font-size: clamp(110px, 20vw, 280px); }
.lost h1 { font-size: clamp(40px, 4.6vw, 68px); margin: 20px 0 14px; }
.lost p { font-size: 17px; max-width: 520px; }
.foot-plain { margin-top: 0; padding-top: 90px; }

@media (max-width: 1180px) {
  .cards.four { grid-template-columns: repeat(2, 1fr); }
  .nav .dd > a::after { margin-left: 5px; }
}
@media (max-width: 960px) {
  .nav { max-height: calc(100vh - 72px); overflow-y: auto; align-self: auto; align-items: stretch; gap: 0; }
  .dd { display: block; height: auto; }
  .dd > a::after { display: none; }
  .dd > a { display: block; }
  .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 16px; min-width: 0; }
  .nav .dd-menu a { padding: 11px 0; font-size: 13px; border-bottom: 1px solid var(--line); color: #4a5866; }
  .cards { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery figure.wide { grid-column: auto; }
  .gallery img, .gallery figure.wide img { height: 240px; }
  .foot { padding-top: 330px; }
  .foot.foot-plain { padding-top: 80px; }
}
@media (max-width: 600px) {
  .cards, .cards.four, .gallery { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
}