/* Langley additions on top of the site's compiled Tailwind CSS. Brand colors come from the :root vars already on the page. */
.lcc-phone{display:none;margin-left:1rem;align-items:center;gap:.5rem;font-weight:600;white-space:nowrap;color:var(--aw-color-primary)}
.lcc-phone:hover{text-decoration:underline}
@media (min-width:1024px){.lcc-phone{display:inline-flex}}
.lcc-sticky{position:fixed;bottom:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.75rem;background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.lcc-sticky a{padding:.7rem .5rem;font-size:.85rem;white-space:nowrap}
@media (min-width:1024px){.lcc-sticky{display:none}}
@media (max-width:1023px){body{padding-bottom:4.75rem}}
.lcc-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;font-size:.95rem;color:#374151}
.lcc-trust span{display:inline-flex;align-items:center;gap:.4rem}
.lcc-trust svg{width:1.1rem;height:1.1rem;color:var(--aw-color-primary)}
.lcc-hero{position:relative;overflow:hidden;border-radius:.75rem;height:16rem}
@media (min-width:768px){.lcc-hero{height:24rem}}
.lcc-hero img{width:100%;height:100%;object-fit:cover}
.lcc-hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem 1rem;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.lcc-fact{display:grid;gap:.25rem}
.lcc-fact dt{font-weight:700}
.lcc-fact dd{color:#374151;margin:0 0 .75rem}
.lcc-src{font-size:.8rem;color:#4b5563}
a.lcc-src,.lcc-src a{text-decoration:underline}
.lcc-cols{display:grid;gap:1.5rem}
@media (min-width:768px){.lcc-cols{grid-template-columns:1fr 1fr}}
.lcc-3{display:grid;gap:1.5rem}
@media (min-width:768px){.lcc-3{grid-template-columns:repeat(3,1fr)}}
form [required]+span.lcc-req,label .lcc-req{color:#dc2626}

/* inline text links must not rely on color alone */
p a.text-primary,dd a.text-primary,li a.text-primary:not(.font-semibold){text-decoration:underline}

/* at xl the phone link joins the right column; give the nav a true middle column so nothing overlaps */
@media (min-width:768px){#header > div.md\:grid{grid-template-columns:auto minmax(0,1fr) auto}#header nav{scrollbar-width:none}#header nav::-webkit-scrollbar{display:none}}
/* 768–1023px: the 7-item nav can't fit beside the logo and button (the live site overlaps here too), so keep the phone-style menu */
@media (min-width:768px) and (max-width:1023px){
  #header > div.md\:grid{display:block}
  #header > div > div:first-child > div.md\:hidden{display:flex}
  #header nav.hidden,#header > div > div:last-child.hidden{display:none}
  #header nav:not(.hidden){display:flex;position:fixed;top:70px;left:0;right:0;bottom:70px;width:100%;margin:0;padding:0 5px;overflow-y:auto;background:var(--aw-color-bg-page)}
  #header nav ul{flex-direction:column;width:100%;font-size:1.25rem}
  #header nav ul li a,#header nav ul li button{padding:.75rem 1rem}
  #header nav .dropdown-menu{display:block;position:static;box-shadow:none;background:transparent;padding-left:1.5rem}
  #header > div > div:last-child:not(.hidden){display:flex;position:fixed;bottom:0;left:0;width:100%;padding:.75rem;justify-content:flex-end;background:var(--aw-color-bg-page)}
}
.lcc-table{width:100%;border-collapse:collapse;font-size:.95rem}
.lcc-table th,.lcc-table td{text-align:left;vertical-align:top;padding:.6rem .75rem;border-bottom:1px solid #e5e7eb}
.lcc-table th{font-weight:700;background:#eff6ff}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.mb-10{margin-bottom:2.5rem}.overflow-x-auto{overflow-x:auto}.gap-3{gap:.75rem}

/* Partner logos: the original rows never wrapped, so on phones each logo shrank to ~24px. Wrap and size them. */
@media (max-width:767px){
  #partners .flex.justify-center{flex-wrap:wrap;gap:.75rem 1rem}
  #partners .flex.justify-center>div{width:calc(50% - .5rem);height:5.5rem;margin:0;padding:.5rem .75rem}
  #partners .flex.justify-center>div img{max-height:4.5rem;max-width:100%;width:auto;height:auto;object-fit:contain}
}
@media (min-width:768px) and (max-width:1023px){#partners .flex.justify-center{flex-wrap:wrap}#partners .flex.justify-center>div{width:12rem}}

/* carousel dots: 24px hit area (a11y) */
.carousel-dot{position:relative}.carousel-dot::after{content:'';position:absolute;inset:-8px}

/* --- visual audit fixes (2026-09-22) --- */
.lcc-hero img{max-width:none!important;width:100%!important;height:100%!important}
.lcc-3{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
main ul.text-lg:not(.grid){list-style:disc;padding-left:1.25rem}
main ul.text-lg:not(.grid) li{margin-bottom:.35rem}
a.lcc-src{white-space:nowrap}
@media (max-width:767px){
  footer .grid-cols-12>div.col-span-6{grid-column:span 4}
  footer a,nav[aria-label=Breadcrumb] a,.lcc-src{padding:.45rem 0;display:inline-block}
  .lcc-table thead{display:none}
  .lcc-table tr{display:block;border-bottom:2px solid #e5e7eb;padding:.5rem 0}
  .lcc-table td{display:block;border:0;padding:.25rem 0}
  .lcc-table td::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;color:#6b7280}
  #header nav .dropdown-menu{filter:none}
}
@media (min-width:768px){
  #partners .flex.flex-col{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1.5rem 2rem}
  #partners .flex.flex-col>.flex.justify-center{display:contents}
  #partners .flex.justify-center>div{width:14rem;height:6rem;margin:0}
}

@media (min-width:768px){.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}}

/* ============================================================================
   HOME REDESIGN (2026-09-26) — a cleaner, quieter page in the brand navy.
   Everything here is plain CSS in this file, so nothing depends on a Tailwind
   class existing in the scraped compiled stylesheet.
   Brand: --aw-color-primary rgb(0 48 135), --aw-color-secondary rgb(0 36 102).
   ========================================================================= */
:root{
  --lcc-navy:#002466;
  --lcc-navy-2:#003087;
  --lcc-ink:#07152e;
  --lcc-gold:#c9a227;
  --lcc-line:rgba(255,255,255,.18);
}

/* --- shared bits --- */
.lcc-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lcc-gold);margin:0 0 1rem}
.lcc-eyebrow-d{color:var(--lcc-navy-2)}
.lcc-wrap{max-width:80rem;margin:0 auto;padding-left:1rem;padding-right:1rem}
@media (min-width:768px){.lcc-wrap{padding-left:1.5rem;padding-right:1.5rem}}
.lcc-btn,.lcc-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:4px;font-weight:700;font-size:1rem;line-height:1.1;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.lcc-btn{background:var(--lcc-navy-2);color:#fff;border:2px solid var(--lcc-navy-2)}
.lcc-btn:hover{background:#00246b;border-color:#00246b;color:#fff}
.lcc-btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.65)}
.lcc-btn-ghost:hover{background:#fff;color:var(--lcc-navy);border-color:#fff}
.lcc-on-light .lcc-btn-ghost{color:var(--lcc-navy-2);border-color:var(--lcc-navy-2)}
.lcc-on-light .lcc-btn-ghost:hover{background:var(--lcc-navy-2);color:#fff}

/* --- the hero --- */
.lcc-hx{position:relative;isolation:isolate;overflow:hidden;background:var(--lcc-ink)}
.lcc-hx-bg{position:absolute;inset:0;z-index:-2}
.lcc-hx-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;max-width:none}
.lcc-hx-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(100deg,rgba(5,16,36,.94) 0%,rgba(5,16,36,.86) 34%,rgba(6,20,44,.60) 62%,rgba(0,36,102,.42) 100%),
  linear-gradient(180deg,rgba(5,16,36,.55) 0%,transparent 28%,transparent 62%,rgba(0,26,74,.72) 100%)}
@media (max-width:767px){.lcc-hx-scrim{background:linear-gradient(180deg,rgba(5,16,36,.84) 0%,rgba(5,16,36,.80) 55%,rgba(0,30,84,.90) 100%)}}
.lcc-hx-in{position:relative;max-width:80rem;margin:0 auto;padding:3rem 1rem 2.5rem;color:#fff}
@media (min-width:768px){.lcc-hx-in{padding:7.5rem 1.5rem 5.5rem}}
.lcc-hx-in .lcc-hx-h{max-width:48rem}
/* The headline is a full sentence, so it needs to shrink harder on a phone than a two-word hero
   would: at 375px the previous 2.6rem pushed both buttons below the fold. */
.lcc-hx h1{font-size:clamp(1.95rem,6.2vw,4rem);line-height:1.06;letter-spacing:-.022em;font-weight:700;margin:0 0 1rem;color:#fff;text-wrap:balance}
.lcc-hx-svc{display:flex;flex-wrap:wrap;gap:.35rem .85rem;font-size:.95rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.88);margin:0 0 1.35rem}
.lcc-hx-svc span:not(:last-child)::after{content:"·";margin-left:.85rem;color:var(--lcc-gold)}
.lcc-hx-sub{font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 1.6rem;max-width:36rem}
@media (min-width:768px){.lcc-hx-sub{font-size:1.2rem}}
.lcc-hx-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.5rem}
.lcc-hx-cta .lcc-btn,.lcc-hx-cta .lcc-btn-ghost{flex:1 1 auto;min-width:13rem}
@media (min-width:480px){.lcc-hx-cta .lcc-btn,.lcc-hx-cta .lcc-btn-ghost{flex:0 0 auto}}

/* the strip of proof along the bottom of the hero */
.lcc-hx-proof{border-top:1px solid var(--lcc-line);padding-top:1.5rem;display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:640px){.lcc-hx-proof{grid-template-columns:repeat(2,1fr);gap:1.25rem 2rem}}
@media (min-width:1024px){.lcc-hx-proof{grid-template-columns:repeat(4,1fr)}}
.lcc-hx-proof div{color:#fff}
.lcc-hx-proof b{display:block;font-size:1.05rem;line-height:1.25;font-weight:700}
.lcc-hx-proof b .lcc-stars{color:var(--lcc-gold)}  /* .lcc-hx-proof b beats a bare .lcc-stars on specificity, so the hero stars came out white */
.lcc-hx-proof span{display:block;font-size:.85rem;color:rgba(255,255,255,.72);margin-top:.15rem}
.lcc-stars{color:var(--lcc-gold);letter-spacing:.1em;font-size:1rem}

/* --- a quiet section shell --- */
.lcc-sec{padding:5rem 0}
@media (min-width:768px){.lcc-sec{padding:7rem 0}}
.lcc-sec-tint{background:#F5F7FB}
.lcc-sec-head{max-width:44rem;margin:0 0 2.5rem}
.lcc-sec-head.lcc-mid{margin-left:auto;margin-right:auto;text-align:center}
.lcc-sec-head h2{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:0 0 .85rem;color:#0b1b33;text-wrap:balance}
.lcc-sec-head p{font-size:1.08rem;line-height:1.65;color:#41506a;margin:0}

/* --- service cards with a photo --- */
.lcc-scards{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:640px){.lcc-scards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.lcc-scards{grid-template-columns:repeat(3,1fr)}}
.lcc-scard{display:flex;flex-direction:column;background:#fff;border:1px solid #DDE3ED;border-radius:3px;overflow:hidden;transition:box-shadow .18s,transform .18s,border-color .18s}
.lcc-scard:hover{border-color:#b9c6da}
.lcc-scard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--lcc-navy)}
.lcc-scard-img img{width:100%;height:100%;object-fit:cover;max-width:none;display:block}
.lcc-scard-body{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.4rem 1.5rem}
.lcc-scard-body h3{font-size:1.2rem;font-weight:700;color:#0b1b33;margin:0 0 .55rem;line-height:1.25}
.lcc-scard-body p{font-size:.98rem;line-height:1.6;color:#41506a;margin:0 0 1.1rem;flex:1}
.lcc-scard-body a{font-size:.83rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lcc-navy-2);text-decoration:none}
.lcc-scard-body a:hover{text-decoration:underline}

/* --- "what do you need" question cards --- */
.lcc-qgrid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){.lcc-qgrid{grid-template-columns:repeat(2,1fr)}}
.lcc-q{display:block;padding:1.5rem;border-radius:3px;background:#fff;border:1px solid #DDE3ED;border-left:4px solid var(--lcc-navy-2);text-decoration:none;transition:box-shadow .18s,transform .18s}
.lcc-q:hover{border-color:#b9c6da}
.lcc-q b{display:block;font-size:1.12rem;font-weight:700;color:#0b1b33;margin-bottom:.4rem}
.lcc-q span{display:block;font-size:.97rem;line-height:1.6;color:#41506a}
.lcc-q i{display:block;font-style:normal;margin-top:.8rem;font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lcc-navy-2)}

/* --- numbered steps --- */
.lcc-steps{display:grid;gap:2rem;grid-template-columns:1fr;counter-reset:lccstep}
@media (min-width:768px){.lcc-steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.lcc-step{position:relative;padding-top:2.6rem}
.lcc-step::before{counter-increment:lccstep;content:counter(lccstep);position:absolute;top:-.9rem;left:-.3rem;font-size:4.5rem;line-height:1;font-weight:700;color:var(--lcc-navy-2);opacity:.15;pointer-events:none}
.lcc-step h3{font-size:1.15rem;font-weight:700;color:#0b1b33;margin:0 0 .5rem}
.lcc-step p{font-size:.98rem;line-height:1.65;color:#41506a;margin:0}

/* --- the review block --- */
.lcc-rev{text-align:center;max-width:40rem;margin:0 auto}
.lcc-rev .lcc-stars{font-size:1.9rem;letter-spacing:.14em;display:block;margin-bottom:.6rem}
.lcc-rev-n{font-size:2.9rem;font-weight:700;line-height:1;color:#0b1b33;margin:0 0 .4rem}
.lcc-rev p{font-size:1.05rem;color:#41506a;margin:0 0 1.5rem}

/* --- dark call-to-action band --- */
.lcc-band{position:relative;overflow:hidden;background:var(--lcc-navy);color:#fff}
.lcc-band-in{position:relative;max-width:56rem;margin:0 auto;padding:3.5rem 1rem;text-align:center}
@media (min-width:768px){.lcc-band-in{padding:5rem 1.5rem}}
.lcc-band h2{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0 0 .9rem;color:#fff;text-wrap:balance}
.lcc-band p{font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.86);margin:0 0 2rem}
.lcc-band .lcc-hx-cta{justify-content:center;margin-bottom:0}
.lcc-band .lcc-btn{background:#fff;color:var(--lcc-navy);border-color:#fff}
.lcc-band .lcc-btn:hover{background:#e8eefb;border-color:#e8eefb;color:var(--lcc-navy)}

/* an AI/illustrated placeholder that never pretends to be a photograph */
.lcc-ph{position:relative;width:100%;height:100%;background:linear-gradient(160deg,#071a3a 0%,#002466 55%,#003a9e 100%)}
.lcc-ph::after{content:attr(data-label);position:absolute;left:0;right:0;bottom:0;padding:.45rem .7rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(0,0,0,.35)}

/* the proof line under the hero on location and service pages */
.lcc-proofline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem .55rem;margin:0;padding:0 1rem;font-size:.92rem;color:#41506a;text-align:center}
.lcc-proofline b{color:#0b1b33;font-weight:700}
.lcc-proofline i{font-style:normal;color:#9aa8bf}
.lcc-proofline .lcc-stars{font-size:.95rem;letter-spacing:.05em}

/* ===== sections added from the design panel (2026-09-26) ===================
   The seawall block is the money section and it carries a DRAWING, not a photo:
   there are no seawall photographs and none can be taken today, so the page
   shows a licensed contractor drawing what the homeowner cannot see rather
   than a dock photo captioned as a seawall. ========================= */
.lcc-measure{max-width:66ch}
.lcc-stand{font-weight:700;color:#0b1b33;margin:2.4rem 0 .9rem;font-size:1.05rem}

/* the cross-section drawing */
.lcc-draw{margin:0 0 2.4rem;border:1px solid var(--lcc-line,#DDE3ED);background:#fff;padding:1.1rem}
.lcc-draw svg{display:block;width:100%;height:auto}
.lcc-draw figcaption{margin-top:.8rem;font-size:.84rem;color:#5b6a84}
.lcc-dw-water{fill:#dbe7f5}
.lcc-dw-soil{fill:#eef1f6}
.lcc-dw-wall{fill:#c8d3e4}
.lcc-dw-void{fill:#B3261E;opacity:.17}
.lcc-dw-line{stroke:#0b1b33;stroke-width:1.4;fill:none}
.lcc-dw-hair{stroke:#8c9ab2;stroke-width:1;fill:none}
.lcc-dw-lead{stroke:#41506a;stroke-width:1;fill:none}
.lcc-dw-t{font-size:13px;fill:#0b1b33;font-weight:600}
.lcc-dw-s{font-size:11.5px;fill:#5b6a84}
.lcc-dw-n{font-size:12px;fill:#fff;font-weight:700}
.lcc-dw-nb{fill:#003087}

/* what people call us out to look at */
.lcc-sym{list-style:none;margin:0 0 .5rem;padding:0;max-width:44rem}
.lcc-sym li{position:relative;padding:.7rem 0 .7rem 1.6rem;border-bottom:1px solid var(--lcc-line,#DDE3ED);color:#41506a;font-size:1.0625rem;line-height:1.55}
.lcc-sym li::before{content:"";position:absolute;left:0;top:1.15rem;width:.45rem;height:.45rem;background:var(--lcc-navy-2);border-radius:50%}

/* the four repairs */
.lcc-meth{list-style:none;counter-reset:lccm;margin:0;padding:0;display:grid;gap:0;max-width:52rem}
.lcc-meth li{counter-increment:lccm;position:relative;padding:1.05rem 0 1.05rem 2.6rem;border-bottom:1px solid var(--lcc-line,#DDE3ED)}
.lcc-meth li::before{content:counter(lccm);position:absolute;left:0;top:1.05rem;width:1.6rem;height:1.6rem;border:1px solid var(--lcc-navy-2);color:var(--lcc-navy-2);font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.lcc-meth b{display:block;color:#0b1b33;font-weight:700;font-size:1.05rem;margin-bottom:.2rem}
.lcc-meth span{display:block;color:#41506a;font-size:1rem;line-height:1.6}

/* the services index — rules, not cards, because only 2 of 10 photos are landscape */
.lcc-idx{border-top:1px solid var(--lcc-line,#DDE3ED)}
.lcc-idx a{display:grid;grid-template-columns:1fr;gap:.3rem;padding:1.5rem 0;border-bottom:1px solid var(--lcc-line,#DDE3ED);text-decoration:none;transition:background .15s}
@media (min-width:768px){.lcc-idx a{grid-template-columns:16rem 1fr auto;gap:2rem;align-items:baseline}}
.lcc-idx a:hover{background:#F5F7FB}
.lcc-idx b{color:#0b1b33;font-size:1.18rem;font-weight:700;line-height:1.3}
.lcc-idx span{color:#41506a;font-size:1.0325rem;line-height:1.6}
.lcc-idx i{font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lcc-navy-2);white-space:nowrap}

/* a quiet prose block (insurance, who you are calling) */
.lcc-prose p{color:#41506a;font-size:1.0625rem;line-height:1.7;margin:0 0 1.1rem;max-width:66ch}
.lcc-prose p:last-of-type{margin-bottom:1.8rem}
.lcc-hx-reply{margin:-1.4rem 0 2.4rem;font-size:.92rem;color:rgba(255,255,255,.72)}
.lcc-prose-1{max-width:52rem;color:#41506a;font-size:1.0325rem;line-height:1.65;margin:0 0 .5rem}
.lcc-prose-1 a{color:var(--lcc-navy-2);font-weight:700;text-decoration:none;white-space:nowrap}
.lcc-prose-1 a:hover{text-decoration:underline}

/* ---- hero background media (2026-10-01) ----------------------------------
   The still carries the hero on its own; the video sits on top and only shows
   once it can actually play. Below 768px, and for anyone who has asked for less
   motion, the video is never even fetched (preload="none" plus display:none). */
.lcc-hx-still,.lcc-hx-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;max-width:none}
.lcc-hx-vid{display:block;opacity:0;transition:opacity .9s ease}
.lcc-hx-vid[data-playing="1"]{opacity:1}
@media (prefers-reduced-motion:reduce){.lcc-hx-vid{display:none!important}}
/* Service cards, 2026-10-02. Rut sent a screenshot of yachtlifters.com and asked for the home page
   service list to look like it: a photo, the name, a sentence, a thin rule, then an uppercase link.
   The .lcc-scard grid above already did all of that except the rule, so only three things are added
   here. .lcc-scard-panel is for the services with no honest photograph yet — it is plainly a brand
   panel, not a picture of something we are pretending is that service. */
.lcc-scard{position:relative}
.lcc-scard-body a{border-top:1px solid #DDE3ED;padding-top:1rem;margin-top:auto}
.lcc-scard-body a::after{content:"";position:absolute;inset:0}
.lcc-scard-img.lcc-scard-panel{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#07152e 0%,#002466 100%)}
.lcc-scard-img.lcc-scard-panel img{width:auto;height:44%;object-fit:contain;opacity:.9}

/* Four across on a wide screen, 2026-10-02 — Rut asked for 4 x 2 = 8 cards. The grid above stops at
   three columns; this is the only change, so narrow screens still step 1 -> 2 -> 3 as before. */
@media (min-width:1180px){.lcc-scards{grid-template-columns:repeat(4,1fr)}}

/* The card link is a row: label left, arrow pinned right. It used to be one run of text, so when a
   long uppercase label wrapped, the arrow dropped onto a line by itself under it. 2026-10-02. */
.lcc-scard-body a{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.lcc-scard-go{flex:none}

/* The hook band under the hero, 2026-10-02: Rut took the "Who You Are Calling" eyebrow off and
   asked for less height top and bottom. .lcc-sec is 5rem / 7rem; this is roughly half. */
.lcc-sec-tight{padding:2.75rem 0}
@media (min-width:768px){.lcc-sec-tight{padding:3.5rem 0}}
.lcc-sec-tight .lcc-sec-head{margin-bottom:1.5rem}

/* Video behind the service cards, 2026-10-02. The poster sits under the video and the video fades
   over it once it can actually play, so there is never an empty box. The scrim is what keeps the
   white cards and their dark text readable over moving footage. */
.lcc-svcbg{position:relative;overflow:hidden;background:var(--lcc-navy)}
/* The media box is STICKY and one viewport tall, not stretched to the section.
   The section is 8 stacked cards on a phone — about 3200px — and a 1280px-wide clip told to cover
   that box is scaled nearly 5x and shows a thin vertical sliver of a wide aerial shot. Sticky keeps
   it at viewport height and lets the cards travel over it instead. */
.lcc-svcbg-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.lcc-svcbg-media{position:sticky;top:0;width:100%;height:100vh;height:100svh}
.lcc-svcbg-media img,.lcc-svcbg-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.lcc-svcbg-media video{opacity:0;transition:opacity .9s ease}
.lcc-svcbg-media video[data-playing]{opacity:1}
.lcc-svcbg-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,21,46,.70) 0%,rgba(7,21,46,.58) 50%,rgba(7,21,46,.72) 100%)}
.lcc-svcbg>.lcc-wrap{position:relative;z-index:2}

/* Reviews carousel, 2026-10-02. One review visible; the rest sit under it at opacity 0 and are NOT
   display:none, so the box keeps the height of the tallest review and the section cannot jump as it
   turns. Real reviews vary a lot in length, so that matters.
   Rut asked for a rounded bubble rather than text on a plain background: a white card with a tail
   below it, then the reviewer under the tail, which is the shape people read as a quote. */
.lcc-revs{position:relative;display:grid;margin:1.15rem auto .3rem;max-width:47rem;min-height:9rem}
.lcc-revq{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lcc-revq[data-rev-on]{opacity:1;visibility:visible;transform:none}

.lcc-revbub{position:relative;background:#fff;border:1px solid #e3e9f2;border-radius:1.35rem;padding:1.15rem 1.35rem 1.1rem;box-shadow:0 10px 30px -14px rgba(11,27,51,.28),0 2px 6px -2px rgba(11,27,51,.08);text-align:center;width:100%}
/* the tail: two triangles, the outer one acting as the border */
.lcc-revbub::before,.lcc-revbub::after{content:"";position:absolute;top:100%;left:50%;width:0;height:0;border-style:solid}
.lcc-revbub::before{transform:translateX(-50%);border-width:15px 13px 0 13px;border-color:#e3e9f2 transparent transparent transparent}
.lcc-revbub::after{transform:translateX(-50%);border-width:13.5px 11.5px 0 11.5px;border-color:#fff transparent transparent transparent}
.lcc-revq .lcc-stars{display:block;font-size:.95rem;letter-spacing:.14em;color:var(--lcc-gold);margin-bottom:.45rem}
.lcc-revq blockquote{margin:0;font-size:1.02rem;line-height:1.55;color:#1b2b47;text-wrap:pretty}
.lcc-revq blockquote::before{content:"\201C"}
.lcc-revq blockquote::after{content:"\201D"}

.lcc-revq figcaption{display:flex;align-items:center;gap:.6rem;margin-top:1rem}
.lcc-revav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;background:var(--lcc-navy);color:#fff;font-weight:700;font-size:.95rem;line-height:1;flex:none}
.lcc-revwho{display:flex;flex-direction:column;text-align:left;line-height:1.3}
.lcc-revwho b{font-size:.92rem;font-weight:700;color:#0b1b33}
.lcc-revwho i{font-style:normal;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:#6b7a93}

.lcc-revnav{display:flex;align-items:center;justify-content:center;gap:1rem;margin:.3rem 0 1.1rem}
.lcc-revbtn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid #c9d3e2;border-radius:999px;background:#fff;color:var(--lcc-navy-2);font-size:1rem;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
.lcc-revbtn:hover{background:#eef2f9;border-color:#9fb0c9}
.lcc-revcount{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:#6b7a93;min-width:4.5rem;text-align:center;font-variant-numeric:tabular-nums}
@media (min-width:768px){.lcc-revq blockquote{font-size:1.08rem}.lcc-revbub{padding:1.35rem 1.9rem 1.25rem}}

/* Bigger logo, 2026-10-02 (Rut). The header img carries Tailwind h-16/md:h-16/lg:h-24 from the
   original scrape; new Tailwind class names cannot be added here because that stylesheet is a
   compiled scrape, so this overrides the height directly. The header row grows with it, which is
   the intent. !important is needed only because the Tailwind height utilities are already on the
   element and would otherwise win on source order. */
.lcc-logo{height:6rem!important}
@media (min-width:768px){.lcc-logo{height:6.5rem!important}}
@media (min-width:1024px){.lcc-logo{height:9rem!important}}

/* HEADER FIT after the logo was enlarged, 2026-10-02.
   Measured at 1024px with the bigger logo and the new About dropdown: the nav had grown to 643px
   and was sitting 56px ON TOP of the logo, and the phone number overlapped "Contact Us" by 40px.
   Two changes, both confined to the 768-1279 band so the full-width desktop header is untouched:
     1. tighter nav padding, which is what buys the room back
     2. the header phone number waits until 1280px. It is not lost below that: the sticky bottom
        bar carries Call and Schedule, and its hide breakpoint moves in step so there is never a
        width with neither. That pairing is the whole point — breaking it drops the phone number
        off the page between 1024 and 1279. */
@media (min-width:768px) and (max-width:1279px){
  #header nav ul > li > a,
  #header nav ul > li > button{padding-left:.5rem;padding-right:.5rem;font-size:.86rem}
  .lcc-phone{display:none}
  .lcc-sticky{display:grid}
}

/* The Google reviews section, trimmed vertically 2026-10-02 (Rut). It was 915px at desktop with
   224px of that pure section padding. The carousel box is sized by the LONGEST review — one is 605
   characters against a 210 median — so widening the bubble to 47rem does more than any padding cut:
   the one review that sets the height wraps to fewer lines. Nothing is display:none, so the box
   still cannot jump as it rotates. */
.lcc-sec-rev{padding:2.5rem 0}
@media (min-width:768px){.lcc-sec-rev{padding:3.25rem 0}}
.lcc-sec-rev .lcc-rev-n{margin-bottom:.15rem}
/* .lcc-rev caps at 40rem, which was silently overriding the carousel's own 47rem — the bubble
   measured 640px, not 752px. Lifted here only, so the one long review wraps to fewer lines. */
.lcc-sec-rev .lcc-rev{max-width:47rem}
.lcc-sec-rev .lcc-rev > .lcc-stars{font-size:1.5rem;margin-bottom:.35rem}
.lcc-sec-rev .lcc-rev > p{margin-bottom:.5rem}

/* Reviews over video, 2026-10-02. The bubbles are already white so they gain contrast on a dark
   scrim, but everything OUTSIDE a bubble was navy-on-light and would have disappeared. The rating
   line, the sub-line and the counter flip to white here, and the button takes the same white-on-navy
   treatment it gets inside .lcc-band. The gold stars already read on dark and are left alone. */
.lcc-revbg{background:var(--lcc-navy)}
.lcc-revbg .lcc-svcbg-scrim{background:linear-gradient(180deg,rgba(7,21,46,.80) 0%,rgba(7,21,46,.70) 45%,rgba(7,21,46,.84) 100%)}
.lcc-revbg .lcc-rev-n{color:#fff}
.lcc-revbg .lcc-rev > p{color:rgba(255,255,255,.84)}
.lcc-revbg .lcc-revcount{color:rgba(255,255,255,.72)}
.lcc-revbg .lcc-btn{background:#fff;color:var(--lcc-navy);border-color:#fff}
.lcc-revbg .lcc-btn:hover{background:#e8eefb;border-color:#e8eefb;color:var(--lcc-navy)}
/* The reviewer's name and date sit BELOW the bubble's tail, so they are on the video, not on white.
   Missed on the first pass because the contrast check only looked at the elements that were changed;
   the render showed them as navy-on-navy. */
.lcc-revbg .lcc-revwho b{color:#fff}
.lcc-revbg .lcc-revwho i{color:rgba(255,255,255,.72)}
.lcc-revbg .lcc-revav{background:#fff;color:var(--lcc-navy)}

/* Partner logos, 2026-10-02.
   THE BUG: wrapping a logo in an <a> to make it clickable broke its size. The tile is a fixed
   h-28 flex box and the img is object-contain max-h-full — but max-h-full resolves against the
   img's PARENT, and once that parent was an anchor with no height of its own, the constraint
   vanished. Barnacle Doctor and Langley Dumpsters rendered 176px tall inside a 96px tile and
   overflowed 40px top and bottom, into the logos either side. The anchor has to carry the tile's
   full height itself. */
.lcc-partner-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* Constrain the image at the WRAPPER, not by trusting the logo's own classes. The scraped tiles are
   not consistent: most carry "object-contain max-h-full max-w-full", but the Barnacle Doctor one is
   "object-contain p-10" with no max-height at all. Fixing only the anchor left that one still
   rendering 176px in a 96px tile and physically overlapping Southern Pine Lumber beside it. */
.lcc-partner-link img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* The dumpster badge is a tight crop of a circle, so it fills its tile edge to edge while every
   other logo carries its own whitespace. This gives it the same breathing room. */
.lcc-partner-inset{padding:10px;box-sizing:border-box}

/* The BBB badge, beside the Google rating in the reviews block. A pill rather than a proof tile:
   the hero proof row is a four-column grid and a fifth tile orphaned onto its own line.
   Styled as the site's own badge, NOT an imitation of BBB's trademarked torch. 2026-10-02. */
.lcc-bbb{display:inline-flex;align-items:baseline;gap:.5rem;margin:.1rem auto 0!important;padding:.4rem .95rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.07)}
.lcc-bbb b{color:var(--lcc-gold);font-weight:800;letter-spacing:.02em}
.lcc-bbb span{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.78)}

/* "Full Service Marine Construction" band + the four process cards, 2026-10-02.
   Layout follows the reference Rut sent; the copy and the icons are Langley's own. */
.lcc-full{background:#F5F7FB}
.lcc-full .lcc-sec-head{max-width:52rem;margin-bottom:2.6rem}
.lcc-full .lcc-sec-head h2{font-size:clamp(1.9rem,4vw,3rem)}
.lcc-full .lcc-sec-head > p{font-size:1.1rem;line-height:1.7;max-width:46rem;margin:0 auto}
/* the rule with a mark in the middle */
/* margin-bottom trimmed 2026-10-02: the lead paragraph under this rule was deleted, so the rule
   would otherwise have been left hanging over a gap before the cards. */
.lcc-rule{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:1.1rem auto .2rem;max-width:30rem;color:var(--lcc-navy-2)}
.lcc-rule span{flex:1;height:1px;background:#c9d3e2}
.lcc-rule svg{width:30px;height:30px;flex:none;opacity:.75}

.lcc-steps4{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){.lcc-steps4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.lcc-steps4{grid-template-columns:repeat(4,1fr)}}
.lcc-step4{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid #e3e9f2;border-radius:.75rem;padding:2rem 1.5rem 1.75rem;transition:box-shadow .18s,border-color .18s}
.lcc-step4:hover{border-color:#c9d3e2;box-shadow:0 10px 30px -18px rgba(11,27,51,.3)}
.lcc-step4-i{display:flex;align-items:center;justify-content:center;width:3.1rem;height:3.1rem;margin-bottom:1.1rem;color:var(--lcc-navy-2)}
.lcc-step4-i svg{width:100%;height:100%}
.lcc-step4 h3{font-size:.95rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0b1b33;margin:0 0 .8rem;line-height:1.35}
.lcc-step4 p{font-size:.97rem;line-height:1.65;color:#41506a;margin:0}

/* The quote form under it. Two columns on a wide screen, one on a phone. */
.lcc-qf{background:#fff}
.lcc-qform{display:grid;gap:1rem;max-width:44rem;margin:0 auto;grid-template-columns:1fr}
@media (min-width:640px){.lcc-qform{grid-template-columns:1fr 1fr}}
.lcc-qf-full{grid-column:1/-1}
.lcc-qform label{display:flex;flex-direction:column;gap:.4rem;font-size:.88rem;font-weight:700;letter-spacing:.03em;color:#1b2b47;text-align:left}
.lcc-qform label i{font-style:normal;font-weight:500;color:#6b7a93}
.lcc-qform input[type=text],.lcc-qform input[type=tel],.lcc-qform input[type=email],.lcc-qform select,.lcc-qform textarea{
  width:100%;font:inherit;font-weight:400;font-size:1rem;color:#0b1b33;background:#fff;
  border:1px solid #c9d3e2;border-radius:.5rem;padding:.7rem .85rem;transition:border-color .15s,box-shadow .15s}
.lcc-qform textarea{resize:vertical;min-height:5.5rem}
.lcc-qform :is(input,select,textarea):focus{outline:none;border-color:var(--lcc-navy-2);box-shadow:0 0 0 3px rgba(0,36,102,.14)}
.lcc-qf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.lcc-qf-check{flex-direction:row!important;align-items:flex-start;gap:.6rem;font-weight:500;color:#41506a}
.lcc-qf-check input{margin-top:.2rem;width:1.05rem;height:1.05rem;flex:none}
.lcc-qf-send{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.25rem}
.lcc-qf-send p{margin:0;font-size:.95rem;color:#41506a}
.lcc-qf-send a{color:var(--lcc-navy-2);font-weight:700}

/* A partner logo that is light ink on its own dark background cannot sit on the white tile the
   others use — it would read as empty. The tile goes dark with it. 2026-10-02. */
.lcc-partner-dark{background:#0b0b0b!important;border-radius:.375rem}

/* BANDED SERVICE PAGE, 2026-10-02 — one fixed video, bands taking turns over it.
   .lcc-bandvid is position:fixed so a single decoded video serves every see-through band on the
   page. The alternative — a video per band — would have run eight decoders on this page for one
   file. Solid bands are opaque and simply cover it. */
/* THE HEADER STAYS OUT OF IT (Rut, 2026-10-02). The layer was inset:0, so it ran the full viewport
   including behind the sticky header — and that header's bar is rgba(255,255,255,.9), 90% white, so
   the video was showing through it at 10%. Two changes, belt and braces: the bar goes fully opaque
   on a banded page, and the layer starts below it rather than under it. --lcc-hdr is the header's
   own height at each breakpoint, measured from the live page (96 / 120 / 169). */
:root{--lcc-hdr:96px}
@media (min-width:768px){:root{--lcc-hdr:120px}}
@media (min-width:1024px){:root{--lcc-hdr:169px}}
body:has(.lcc-bandvid) #header > div{background:#fff!important}
/* The page title block and the breadcrumbs sit OVER the video, like the rest of the page. They were
   briefly given a white background, which was me over-reading "leave the header white" — Rut meant
   the nav bar at the top, not the whole first screen. They go back over the footage.
   What they cannot go back to is dark text on bare video, which is what they were before and was
   unreadable. They are a clear band now: the same scrim and white text the odd sections use. */
.lcc-bd-head{position:relative;z-index:1;color:#fff}
.lcc-bd-head::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(7,21,46,.74)}
.lcc-bd-head > *{position:relative;z-index:1}
.lcc-bd-head h1{color:#fff}
.lcc-bd-head p{color:rgba(255,255,255,.88)}
.lcc-bd-head a{color:#cfe0ff}
.lcc-bd-head .lcc-src{color:rgba(255,255,255,.62)}
/* the eyebrow above the h1 and the breadcrumb trail */
.lcc-bd-head .text-secondary,.lcc-bd-head .text-muted{color:rgba(255,255,255,.88)!important}
.lcc-bd-head .text-primary{color:#cfe0ff!important}
body:has(.lcc-bandvid) #header{background:#fff}
.lcc-bandvid{position:fixed;top:var(--lcc-hdr);left:0;right:0;bottom:0;z-index:-1;overflow:hidden;background:var(--lcc-navy);pointer-events:none}
.lcc-bandvid-media{position:absolute;inset:0}
.lcc-bandvid-media img,.lcc-bandvid-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.lcc-bandvid-media video{opacity:0;transition:opacity .9s ease}
.lcc-bandvid-media video[data-playing]{opacity:1}

.lcc-bd{position:relative;padding:3.5rem 0}
@media (min-width:768px){.lcc-bd{padding:5rem 0}}
.lcc-bd-in{position:relative;z-index:2;max-width:56rem;margin:0 auto;padding:0 1rem}
@media (min-width:768px){.lcc-bd-in{padding:0 1.5rem}}
.lcc-bd h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;font-weight:700;letter-spacing:-.015em;margin:0 0 1.1rem;text-wrap:balance}
.lcc-bd-body{font-size:1.06rem;line-height:1.7}
.lcc-bd-body p{margin:0 0 1.15rem}
.lcc-bd-body ul{margin:0 0 1.15rem;padding-left:1.1rem;list-style:disc}
.lcc-bd-body li{margin:0 0 .55rem}

/* see-through band: the fixed video shows through, darkened enough to read white text over */
.lcc-bd-clear{color:#fff}
.lcc-bd-clear h2{color:#fff}
.lcc-bd-clear .lcc-bd-body{color:rgba(255,255,255,.88)}
.lcc-bd-clear a{color:#cfe0ff;text-decoration:underline}
.lcc-bd-scrim{position:absolute;inset:0;z-index:1;background:rgba(7,21,46,.74)}
.lcc-bd-clear .lcc-src{color:rgba(255,255,255,.62)}

/* solid band: opaque, covers the video entirely */
.lcc-bd-solid{background:#fff;color:#1b2b47}
.lcc-bd-solid h2{color:#0b1b33}
.lcc-bd-solid .lcc-bd-body{color:#41506a}
.lcc-bd-solid a{color:var(--lcc-navy-2)}
/* Per-page review strip. Reuses the home carousel's .lcc-rev* styling; this only supplies the
   section frame, because the home page's version sits inside a video band and these do not.

   NO DARK-MODE RULES HERE, DELIBERATELY. This site is light-only: <html> carries no dark class
   and no data-theme, and body stays #fff whatever the OS is set to. A prefers-color-scheme block
   was written here first out of habit and it was wrong in a way that only showed up on a machine
   in dark mode: the band turned navy while the rest of the page stayed white, and the reviewer's
   name - #0b1b33 on #0e1726 - went invisible. Caught in a screenshot, not in the markup. */
.lcc-pagerev{padding:3rem 0 3.25rem;background:#f6f8fb;border-top:1px solid #e6ecf4;border-bottom:1px solid #e6ecf4}
.lcc-pagerev-h{text-align:center;font-weight:700;font-size:1.6rem;line-height:1.2;color:#0b1b33;margin:0 0 .35rem}
.lcc-pagerev .lcc-revs{margin-top:1.3rem}
.lcc-pagerev .lcc-revnav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.6rem}
/* belt and braces: the caption sits OUTSIDE the white bubble, so pin its colours to the light band */
.lcc-pagerev .lcc-revwho b{color:#0b1b33}
.lcc-pagerev .lcc-revwho i{color:#5a6a85;font-style:normal;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}