/* WPRIME coastal service brand. */
@font-face { font-family:"Hanken Grotesk"; src:url("/fonts/hanken-grotesk.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
:root { --ink:#0b1f2c; --ink-2:#3a5262; --blue:#0b5ea8; --blue-deep:#084a86; --aqua:#8ee3d6; --tide:#eef5f7; --white:#fff; --line:#d6e4e9; --teal:#14857c; interpolate-size:allow-keywords; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:96px; }
body { margin:0; background:var(--white); color:var(--ink); font:400 18px/1.6 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; overflow-wrap:anywhere; }
[hidden] { display:none!important; }
img,svg { display:block; max-width:100%; }
a { color:var(--blue); text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
a,button,input,select,textarea { touch-action:manipulation; }
:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
p { margin:0 0 1.2em; max-width:70ch; }
h1,h2,h3 { margin:0 0 20px; }
h1 { font-size:clamp(48px,7.4vw,104px); font-weight:700; line-height:.98; letter-spacing:-.04em; }
h2 { font-size:clamp(34px,4.4vw,60px); line-height:1.15; font-weight:700; letter-spacing:-.03em; }
h3 { font-size:23px; line-height:1.25; font-weight:600; }
.container { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }
.container>*,.service-overview>*,.form-grid>*,.process-grid>* { min-width:0; }
.section { padding:112px 0; }
.skip-link { position:fixed; top:-100px; left:18px; z-index:30; padding:12px 20px; background:var(--white); }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:10; background:rgb(255 255 255 / .85); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid transparent; }
.site-header.is-scrolled { border-bottom-color:var(--line); }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { flex-shrink:0; }
.brand img { width:154px; height:auto; }
#site-nav { display:flex; align-items:center; gap:26px; }
#site-nav a { position:relative; display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:14px; font-weight:600; color:var(--ink); }
#site-nav a:not(.button)::after { content:""; position:absolute; bottom:5px; left:0; width:100%; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform 150ms; }
#site-nav a:hover::after,#site-nav a[aria-current]::after { transform:scaleX(1); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 24px; border:1px solid transparent; border-radius:999px; background:var(--blue); color:var(--white); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; transition:background-color 150ms; }
.button:hover { background:var(--blue-deep); }
.button:active { transform:scale(.98); }
#site-nav .nav-cta { color:var(--white); }
.button-ghost { background:transparent; border-color:var(--line); color:var(--blue); }
.button-ghost:hover { background:var(--tide); }
.nav-toggle { min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:14px; background:var(--white); color:var(--ink); cursor:pointer; }
@property --wipe { syntax:'<percentage>'; inherits:true; initial-value:100%; }
.hero { margin:0 16px; border-radius:32px; overflow:hidden; }
.hero-stage { --wipe:100%; position:relative; isolation:isolate; min-height:min(88vh,860px); display:flex; align-items:flex-end; animation:squeegee 1.4s cubic-bezier(.65,0,.35,1) both; }
.hero-stage { touch-action:pan-y; user-select:none; }
.hero-stage.is-interactive { animation:none; }
.hero-blade[role="slider"] { pointer-events:auto; touch-action:none; cursor:ew-resize; }
.hero-stage>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
.hero-base { filter:blur(10px) saturate(.55) brightness(1.06); transform:scale(1.06); }
.hero-stage>.hero-crisp { z-index:-2; clip-path:inset(0 calc(100% - var(--wipe, 100%)) 0 0); }
.hero-stage::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to right,rgba(11,31,44,.72) 0%,rgba(11,31,44,.5) 45%,rgba(11,31,44,0) 75%),linear-gradient(to top,rgba(11,31,44,.55),rgba(11,31,44,0) 55%); }
.hero-copy { position:relative; z-index:2; max-width:872px; padding:56px; color:var(--white); text-shadow:0 1px 24px rgba(11,31,44,.35); }
.hero-description { max-width:600px; margin:26px 0; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero .button,.service-panel .button { background:var(--white); color:var(--ink); }
.hero .button:hover,.service-panel .button:hover { background:var(--tide); }
.hero .button-ghost { background:transparent; border:1.5px solid var(--white); color:var(--white); }
.hero .button-ghost:hover { background:rgb(255 255 255 / .15); }
.hero-blade { position:absolute; z-index:1; top:0; bottom:0; left:var(--wipe); width:4px; transform:translateX(-100%); background:white; box-shadow:0 0 14px 4px #ffffff99; opacity:0; animation:blade 1.4s cubic-bezier(.65,0,.35,1); pointer-events:none; }
.hero-blade span { position:absolute; top:18%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:white; opacity:0; }
.hero-blade span::before,.hero-blade span::after { content:""; position:absolute; top:15px; height:14px; width:1px; background:var(--ink-2); left:19px; }
.hero-blade span::after { left:24px; }
.hero-stage:hover .hero-blade,.hero-stage:focus-within .hero-blade,.hero-stage:hover .hero-blade span,.hero-stage:focus-within .hero-blade span { opacity:1; }
.hero :focus-visible,.services-section :focus-visible,.estimate-copy :focus-visible,.site-footer :focus-visible { outline-color:var(--aqua); }
@keyframes squeegee { from { --wipe:0%; } to { --wipe:100%; } }
@keyframes blade { 0%,90% { opacity:1; } 100% { opacity:0; } }
figure { margin:0; }
.promises { display:grid; grid-template-columns:repeat(4,1fr); padding-block:40px; }
.promise { display:flex; align-items:start; gap:14px; padding:8px 24px; border-left:1px solid var(--line); }
.promise:first-child { border-left:0; padding-left:0; }
.promise svg { flex-shrink:0; width:24px; height:24px; fill:none; stroke:var(--blue); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-top:4px; }
.promise p { font-size:15px; color:var(--ink-2); margin:4px 0 0; }
.services-section { background:var(--ink); color:var(--white); }
.services-section .split-heading { display:block; }
.services-section .split-heading p { color:rgb(255 255 255 / .75); max-width:80ch; }
.section-heading { margin-bottom:40px; }
.split-heading { display:flex; justify-content:space-between; align-items:start; gap:40px; }
.split-heading p { max-width:65ch; color:var(--ink-2); }
.service-overview { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.service-panel { display:flex; flex-direction:column; padding:40px; border:1px solid rgb(255 255 255 / .12); border-radius:28px; background:#12303f; transition:transform 250ms,border-color 250ms; }
.service-panel:hover { border-color:var(--aqua); transform:translateY(-4px); }
.service-panel-top { margin-bottom:26px; }
.service-panel svg { width:40px; height:40px; fill:none; stroke:var(--aqua); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.service-panel>p { color:rgb(255 255 255 / .75); }
.service-panel ul,.checklist { list-style:none; margin:0 0 24px; padding:0; }
.service-panel li,.checklist li { position:relative; padding:10px 0 10px 28px; }
.service-panel li::before,.checklist li::before { content:""; position:absolute; left:2px; top:19px; width:10px; height:6px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(-45deg); }
.service-panel li span { display:block; color:rgb(255 255 255 / .75); font-size:14px; }
.panel-link,.text-link { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-weight:600; }
.panel-link { margin-top:auto; align-self:start; }
.service-panel li::before,.estimate-checklist li::before { border-color:var(--aqua); }
.text-link:hover { text-decoration:underline; }
.process-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; list-style:none; padding:0; margin:40px 0 0; }
.process-grid::before { content:""; position:absolute; top:40px; left:0; right:0; height:1px; background:var(--line); transform-origin:left; }
.process-grid li { position:relative; }
.step-number { display:block; width:72px; background:var(--white); color:var(--blue); font-size:64px; font-weight:700; line-height:1.2; margin-bottom:24px; position:relative; }
@supports (-webkit-text-stroke:1.5px blue) { .step-number { -webkit-text-stroke:1.5px var(--blue); color:transparent; } }
@supports (animation-timeline:view()) { .process-grid::before { animation:line-draw linear both; animation-timeline:view(); animation-range:entry 10% cover 40%; } }
@keyframes line-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.process-grid p { color:var(--ink-2); }
.about-section { background:var(--tide); }
.about-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:40px; }
.about-tile { background:var(--white); padding:32px; border-radius:28px; min-width:0; }
.about-tile p { color:var(--ink-2); font-size:16px; }
.about-tile p:last-child { margin-bottom:0; }
.about-tile a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; font-weight:600; }
.detail-image { grid-row:span 2; min-width:0; border-radius:28px; overflow:hidden; }
.detail-image img { width:100%; height:100%; object-fit:cover; }
.faq-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:72px; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list details:first-child { border-top:1px solid var(--line); }
.faq-list summary { position:relative; list-style:none; cursor:pointer; padding:24px 40px 24px 0; min-height:44px; font-weight:600; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::before,.faq-list summary::after { content:""; position:absolute; right:4px; top:36px; width:16px; height:2px; background:var(--blue); transition:transform .3s; }
.faq-list summary::after { transform:rotate(90deg); }
.faq-list details[open] summary::after { transform:rotate(0); }
.faq-list details[open] summary::before { transform:rotate(180deg); }
.faq-list p { padding-right:32px; color:var(--ink-2); }
details::details-content { block-size:0; overflow:hidden; transition:block-size .3s,content-visibility .3s allow-discrete; }
details[open]::details-content { block-size:auto; }
.estimate-section { padding-top:0; }
.estimate-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:64px; border-radius:28px; background:var(--ink); color:var(--white); padding:56px; }
.estimate-copy { padding-top:12px; }
.estimate-copy a { color:var(--white); }
.fine-print { font-size:14px; }
.estimate-form-wrap { border-radius:28px; padding:32px; background:var(--white); color:var(--ink); }
fieldset { border:0; margin:0; padding:0; min-width:0; }
legend { font-size:24px; font-weight:600; margin-bottom:24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field-wide { grid-column:1/-1; }
.field label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.field label span { font-weight:400; color:var(--ink-2); }
.field input,.field select,.field textarea { width:100%; min-width:0; min-height:52px; padding:12px; background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:14px;  }
.field textarea { resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal); }
.field [aria-invalid="true"] { border-color:#b42318; }
.field-error { color:#b42318; font-size:14px; margin:6px 0 0; }
.form-help,.consent { color:var(--ink-2); font-size:14px; }
.form-help { margin:8px 0 0; }
.consent { margin:24px 0; }
.cf-turnstile { margin-bottom:20px; max-width:100%; }
.submit-button { width:100%; }
fieldset[aria-busy="true"] .submit-button { opacity:.7; }
.error-summary { border:1px solid #b42318; border-radius:14px; padding:16px; margin-bottom:24px; color:#b42318; font-size:14px; }
.error-summary ul { padding-left:20px; margin-bottom:0; }
.form-status { margin:16px 0 0; font-size:14px; }
.form-status:empty { margin:0; }
.form-status[data-state] { padding:16px; border-radius:14px; }
.form-status[data-state="success"] { background:var(--tide); color:var(--ink); border:1px solid var(--teal); padding-left:44px; position:relative; }
.form-status[data-state="success"]::before { content:""; position:absolute; top:22px; left:18px; width:12px; height:7px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(-45deg); }
.form-status[data-state="error"] { background:#fff0ee; border:1px solid #b42318; color:#b42318; }
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.site-footer { background:var(--ink); color:var(--white); padding:64px 0 24px; font-size:14px; }
.site-footer a { color:var(--white); }
.footer-top { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-bottom:40px; }
.footer-logo { display:block; background:var(--white); border-radius:14px; padding:12px 18px; width:184px; margin-bottom:24px; }
.footer-logo img { width:100%; height:auto; }
.footer-brand { font-weight:600; margin-bottom:4px; }
.footer-services a { display:flex; align-items:center; min-height:44px; text-decoration:none; }
.footer-services a:hover { text-decoration:underline; }
.footer-bottom { border-top:1px solid var(--ink-2); padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.footer-bottom p { margin:0; }
.footer-bottom nav { display:flex; flex-wrap:wrap; gap:4px 20px; }
.footer-bottom a { display:inline-flex; align-items:center; min-height:44px; }
.legal-main,.policy-main { padding:72px 0 112px; max-width:900px; }
.legal-main h2,.policy-main h2 { margin-top:36px; }
.draft-notice { background:var(--tide); border-left:3px solid var(--blue); padding:20px; }
.mobile-cta { display:none; }
@media(max-width:1100px) {
  #site-nav { gap:16px; }
  .promises { grid-template-columns:1fr 1fr; gap:24px 0; }
  .promise:nth-child(3) { border-left:0; padding-left:0; }
  .process-grid { grid-template-columns:1fr 1fr; }
  .process-grid::before { display:none; }
  .estimate-layout { gap:32px; padding:32px; }
  .form-grid { grid-template-columns:1fr; }
  .about-grid { gap:16px; }
  .about-tile { padding:24px; }
}
@media(max-width:720px) {
  body { padding-bottom:88px; }
  .container { width:calc(100% - 32px); }
  .section { padding:72px 0; }
  .header-inner { flex-wrap:wrap; gap:0; }
  .brand,.nav-toggle { margin-block:12px; }
  #site-nav { width:100%; flex-wrap:wrap; padding:12px 0; gap:8px 20px; }
  .nav-enhanced #site-nav { flex-direction:column; align-items:stretch; max-height:calc(100dvh - 72px); overflow-y:auto; }
  .nav-enhanced #site-nav a { padding:12px; }
  .hero-copy { padding:40px 24px 24px; }
  .hero-stage { min-height:min(88vh,860px); }
  .hero-stage::after { background:linear-gradient(to top,rgba(11,31,44,.85) 0%,rgba(11,31,44,.6) 60%,rgba(11,31,44,.25) 100%); }
  .split-heading { display:block; }
  .service-overview,.about-grid,.faq-layout,.estimate-layout { grid-template-columns:1fr; gap:24px; }
  .service-panel { padding:28px; }
  .detail-image { grid-row:auto; }
  .detail-image img { height:360px; }
  .estimate-section { padding-top:0; }
  .estimate-layout { padding:28px 16px; }
  .estimate-form-wrap { padding:24px 16px; }
  .footer-bottom { flex-direction:column; align-items:start; }
  .mobile-cta { display:flex; align-items:center; justify-content:center; position:fixed; z-index:20; bottom:12px; left:16px; right:16px; height:56px; border-radius:999px; background:var(--blue); color:var(--white); font-weight:700; text-decoration:none; box-shadow:0 10px 30px rgba(11,31,44,.25); translate:0 140%; transition:translate 300ms,background-color 150ms; }
  .mobile-cta.is-visible { translate:0 0; }
  .mobile-cta:hover { background:var(--blue-deep); }
  .mobile-cta:active { transform:scale(.98); }
}
@media(max-width:480px) {
  .promises,.process-grid,.footer-top { grid-template-columns:1fr; }
  .promise,.promise:nth-child(3) { border-left:0; border-bottom:1px solid var(--line); padding:16px 0; }
  .promise:last-child { border-bottom:0; }
  .promises { gap:0; padding-block:24px; }
  .actions .button { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .hero-stage { --wipe:100%; }
  .hero-blade:not([role="slider"]) { display:none; }
  .hero-stage:not(.is-interactive) .hero-crisp { clip-path:inset(0); }
  .process-grid::before { transform:scaleX(1); }
  .service-panel:hover,.button:active,.mobile-cta:active { transform:none; }
}
@media(forced-colors:active) {
  .button,.service-panel,.about-tile,.estimate-layout,.estimate-form-wrap,input,select,textarea,.mobile-cta { border:1px solid CanvasText; }
  .hero-blade { display:none; }
  .hero-copy { background:Canvas; color:CanvasText; }
  .hero .button { color:ButtonText; background:ButtonFace; }
  .step-number { -webkit-text-stroke:0; color:CanvasText; }
  .faq-list summary::before,.faq-list summary::after,.process-grid::before { background:CanvasText; }
}