/* Version 2 overrides for every page. Only added to preview-video/ builds
   (python3 tools/make_preview.py --video), never to site/.

   Header logo: a transparent, high-resolution version (made from the 1024px logo on
   coastlineinsure.com), so no white box shows behind it when the translucent header
   passes over darker sections. The file is cropped to the mark, so these widths are the
   logo itself: about 25% larger than before (the old file had white padding built in). */
.brand img { width: 96px; height: auto; }
.site-header.is-scrolled .brand img { width: 84px; }

/* Footer logo: white version (made from the reversed logo, waves lightened) on the navy footer,
   replacing the colour logo on a white tile. */
.footer-brand img { width: 168px; height: auto; padding: 0; border-radius: 0; background: none; }
@media (max-width: 560px) { .footer-brand img { width: 150px; } }

/* About: owners section (two owners alongside Jose). Names and stories are placeholders until the client sends them. */
.owners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: clamp(24px, 4vw, 56px); }
.owner { display: grid; gap: 6px; align-content: start; }
.owner__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-photo); margin-bottom: 14px; background: var(--sea-50); }
.owner__name { font-weight: 400; font-size: 1.3rem; color: var(--heading); }
.owner__role { color: var(--ocean-600); font-size: 0.95rem; }
.owner__story { margin-top: 8px; color: var(--body); }
.owners .is-placeholder { color: var(--muted); }
.owner__story.is-placeholder { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; font-size: 0.95rem; }
.owners__note { margin-top: clamp(28px, 4vw, 40px); max-width: 640px; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 640px) { .owners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .owner__name { font-size: 1.1rem; } }

/* Nav menus, after Newfront: a navy panel drops from under the header. Left: a small label, one
   line and a link to the full page. Right: an inset panel listing the services with thin line icons.
   Opens on hover or keyboard focus; the parent link still goes to the full page. */
.site-header__inner { position: relative; }
.nav li.has-menu { position: static; }
.nav li.has-menu > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__caret { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.25s var(--ease); }
.mega {
  position: absolute; top: calc(100% - 4px); left: 50%; z-index: 60;
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px;
  width: min(720px, calc(100vw - 48px)); padding: 12px;
  background: var(--navy-900); border-radius: 18px;
  box-shadow: 0 30px 60px -28px rgba(7, 26, 48, 0.55);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge across the gap below the link only */
.nav li.has-menu:hover > .mega, .nav li.has-menu:focus-within > .mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.nav li.has-menu:hover .nav__caret, .nav li.has-menu:focus-within .nav__caret { transform: rotate(180deg); }
.mega__intro { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px 14px 14px; }
.mega__label { margin: 0; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea-300); }
.mega__blurb { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; line-height: 1.5; }
.nav .mega a.mega__all { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 0; color: #fff; font-size: 0.9rem; }
.nav .mega a.mega__all svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.nav .mega a.mega__all:hover { color: var(--sea-300); }
.nav .mega a.mega__all:hover svg { transform: translateX(3px); }
.nav .mega ul.mega__list { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px; list-style: none; background: rgba(255, 255, 255, 0.05); border-radius: 12px; }
.nav .mega__list li { display: block; }
.nav .mega__list a { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 10px; color: #fff; transition: background-color 0.2s var(--ease); }
.nav .mega a::after { display: none; }
.nav .mega__list a:hover, .nav .mega__list a:focus-visible { background: rgba(255, 255, 255, 0.07); color: #fff; }
.mega__icon { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--sea-300); }
.mega__list a > span { display: grid; gap: 2px; }
.mega__title { font-size: 0.98rem; line-height: 1.3; }
.mega__desc { font-size: 0.84rem; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }

/* Mobile menu: the same services as indented sub-links */
.mobile-menu li.mobile-sub a { padding: 12px 0 12px 18px; font-size: 1.05rem; color: var(--body); border-bottom-color: transparent; }
.mobile-menu li.mobile-sub:last-of-type a, .mobile-menu li.mobile-sub + li:not(.mobile-sub) a { border-top: 0; }

/* Jump links from the menus land clear of the sticky header */
.personal-card[id], .detail[id] { scroll-margin-top: 24px; }

/* Cookie banner: a quiet card bottom-left on desktop; full width above the call bar on phones */
.cookie-banner {
  position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 70;
  width: min(400px, calc(100vw - 32px)); padding: 20px 20px 18px;
  background: #fff; color: var(--body); border: 1px solid var(--line-soft); border-radius: 18px;
  box-shadow: 0 28px 60px -28px rgba(7, 26, 48, 0.45);
  font-size: 0.92rem; line-height: 1.55;
  animation: cookie-in 0.5s var(--ease) 0.6s backwards;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.cookie-banner.is-leaving { opacity: 0; transform: translateY(10px); }
.cookie-banner__text { margin: 0; }
.cookie-banner__text a { color: var(--ocean-600); text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.cookie-banner__btn {
  font: 500 0.9rem var(--font-body); padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--navy-900); background: var(--navy-900); color: #fff;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cookie-banner__btn:hover { background: var(--ocean-600); border-color: var(--ocean-600); }
.cookie-banner__btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--line); }
.cookie-banner__btn--ghost:hover { background: var(--sea-50); color: var(--navy-900); border-color: var(--line); }
.cookie-banner__btn:focus-visible { outline: 2px solid var(--ocean-500); outline-offset: 2px; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 760px) {
  .cookie-banner { left: 16px; right: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .has-cookie-banner .preview-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; transition: none; } }

/* Hero (homepage): a bigger headline, and the location under the subheadline with a pin */
.hero h1 { font-size: clamp(3rem, 6.4vw, 5.5rem); max-width: 13ch; }
.hero__place { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sea-300); }
.hero__place svg { width: 15px; height: 15px; flex: none; }

/* Section labels ("Who we insure", "What a specialist catches"...): bolder and a little larger,
   still well under the headings. The hero label keeps its quieter style. */
.section .eyebrow, .cta-band .eyebrow, .page-hero .eyebrow { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.16em; color: var(--ocean-600); }
.on-dark .eyebrow, .section.on-dark .eyebrow { color: var(--sea-300); }

/* How it works: words instead of 01-04. How it works and What a specialist catches: the sentence
   folds away until hover or tap (v2.js adds .fold) */
.step::before { content: "First,"; font-weight: 300; font-size: clamp(1.9rem, 2.6vw, 2.4rem); letter-spacing: -0.02em; margin-bottom: 14px; }
.step:nth-child(2)::before { content: "Then,"; }
.step:nth-child(3)::before { content: "Next,"; }
.step:nth-child(4)::before { content: "Finally,"; }
html[lang="es"] .step:nth-child(1)::before { content: "Primero,"; }
html[lang="es"] .step:nth-child(2)::before { content: "Luego,"; }
html[lang="es"] .step:nth-child(3)::before { content: "Después,"; }
html[lang="es"] .step:nth-child(4)::before { content: "Por último,"; }
.fold { cursor: pointer; border-radius: 12px; outline-offset: 6px; }
.fold h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fold h3::after {
  content: ""; flex: none; width: 14px; height: 14px; transform: translateY(1px);
  background: var(--ocean-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}
.fold p { max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease), margin 0.35s var(--ease); }
.fold.is-open p, .fold:focus-visible p { max-height: 14em; opacity: 1; margin-top: 4px; }
.fold.is-open h3::after { transform: translateY(1px) rotate(45deg); }
@media (hover: hover) {
  .fold:hover p { max-height: 14em; opacity: 1; margin-top: 4px; }
  .fold:hover h3::after { transform: translateY(1px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) { .fold p, .fold h3::after { transition: none; } }

/* Founder section: a quiet link to About beside the two buttons */
.founder__copy .actions { align-items: center; }
.founder__about { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; color: var(--ocean-600); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(31, 98, 168, 0.35); text-underline-offset: 5px; }
.founder__about svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.founder__about:hover { text-decoration-color: currentColor; }
.founder__about:hover svg { transform: translateX(3px); }

/* What a specialist catches: tighter cards now that only the question shows */
.question-card.fold { padding: 24px 4px 26px; border-radius: 0; }
.question-card.fold h3 { margin-bottom: 0; }
.question-card.fold.is-open p, .question-card.fold:focus-visible p { margin-top: 10px; }
@media (hover: hover) { .question-card.fold:hover p { margin-top: 10px; } }

/* Hurricane & flood page */
.storm-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.storm-split__card { padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; display: grid; gap: 12px; align-content: start; }
.storm-split__card h3 { font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.02em; color: var(--heading); }
.storm-group { margin: clamp(24px, 3vw, 36px) 0 4px; font-size: 1.05rem; font-weight: 600; color: var(--ocean-600); }
.storm-group:first-of-type { margin-top: 0; }
.storm-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
.storm-plan h2 { margin-bottom: 26px; }
.storm-plan .checklist li { margin-bottom: 12px; }
@media (max-width: 860px) { .storm-split, .storm-plan { grid-template-columns: 1fr; } }
.storm__guide { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 5px; }
.storm__guide svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.storm__guide:hover { color: var(--sea-300); text-decoration-color: currentColor; }
.storm__guide:hover svg { transform: translateX(3px); }

/* Homepage storm section, shortened: headline-only cards and the two actions side by side */
.storm .storm-card { gap: 10px; }
.storm__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px 28px; }

/* Why Coastline table: the logo heads the Coastline column. On phones (with JS), a switch puts
   Coastline beside one competitor at a time; the competitor answer slides in when it changes. */
.compare thead th.is-us { padding-block: 12px; vertical-align: middle; }
.compare__logo { display: block; width: auto; height: 62px; }
.compare-switch { display: none; }
@media (max-width: 800px) {
  .compare--switch { overflow: visible; }
  .compare--switch .compare-switch { position: sticky; top: 80px; z-index: 5; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--navy-900); box-shadow: 0 10px 24px -14px rgba(11, 36, 64, 0.55); }
  .compare-switch__logo { flex: none; width: 66px; height: auto; }
  .compare-switch__vs { flex: none; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
  .compare-switch__tabs { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
  .compare-switch__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .compare--vs-1 .compare-switch__thumb { transform: translateX(100%); }
  .compare-switch button { position: relative; z-index: 1; min-height: 40px; padding: 6px 4px; border: 0; border-radius: 999px; background: none; color: #fff; font: 500 0.8rem/1.15 var(--font-display); cursor: pointer; transition: color 0.3s; }
  .compare-switch button[aria-pressed="true"] { color: var(--navy-900); }
  .compare-switch button:focus-visible { outline: 2px solid var(--sea-300, #9fd3dc); outline-offset: 2px; }
  .compare--switch tr { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 14px; overflow: hidden; overflow: clip; }
  .compare--switch tbody th { grid-column: 1 / -1; width: auto; }
  .compare--switch td.is-us { grid-column: 1; grid-row: 2; padding: 12px 14px; border-radius: 12px; background: var(--sea-50); }
  .compare--switch td[data-vs] { grid-column: 2; grid-row: 2; padding: 12px 0; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, visibility 0s; }
  .compare--switch td[data-vs="1"] { transform: translateX(28px); opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0.45s; }
  .compare--vs-1 td[data-vs="0"] { transform: translateX(-28px); opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0.45s; }
  .compare--vs-1 td[data-vs="1"] { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .compare-switch__thumb, .compare--switch td[data-vs] { transition: none; }
}