/* Storm Damage — "First 72 hours" template (prefix sd-). DS: white canvas, one navy section. */

/* Hero: DS photo hero, stronger overlay + thin rain texture */
.sd-hero { min-height: 800px; }
.sd-hero::before { background: linear-gradient(90deg, rgba(11,20,36,.9) 0%, rgba(17,28,47,.78) 48%, rgba(17,28,47,.35) 100%); }
.sd-hero .hl-hero__media img { filter: saturate(.7); }
.sd-rain { position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: repeating-linear-gradient(105deg, transparent 0 22px, rgba(255,255,255,.6) 22px 23px, transparent 23px 61px); background-size: 140px 220px; animation: sd-rain 1.1s linear infinite; mask-image: linear-gradient(90deg, transparent 0%, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
@keyframes sd-rain { to { background-position: -40px 220px; } }
.sd-status { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; padding: 8px 14px; border: 1px solid var(--hl-border-dark); border-radius: var(--hl-radius-sm); font-size: var(--hl-fs-micro); color: rgba(255,255,255,.88); background: rgba(11,20,36,.35); }
.sd-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--hl-red); }
.sd-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--hl-red); animation: sd-pulse 1.6s var(--hl-ease) infinite; }
@keyframes sd-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Do / Don't */
.sd-now-head { margin-bottom: var(--hl-space-5); }
.sd-now-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sd-col { padding: 34px; background: var(--hl-white); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); }
.sd-dont { background: var(--hl-surface); }
.sd-col h3 { margin-bottom: 18px; }
.sd-col ul { list-style: none; }
.sd-col li { position: relative; padding: 14px 0 14px 36px; border-top: 1px solid var(--hl-border); color: var(--hl-text-muted); }
.sd-col li strong { color: var(--hl-navy); }
.sd-col li::before { position: absolute; left: 0; top: 14px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; }
.sd-do li::before { content: '✓'; background: var(--hl-navy); color: var(--hl-white); }
.sd-dont li::before { content: '×'; background: var(--hl-red); color: var(--hl-white); font-size: 16px; }

/* First 72 hours (the one navy section) */
.sd-clock-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.sd-clock-head { position: sticky; top: calc(var(--hl-header-h) + 32px); }
.sd-clock-head h2 { margin-bottom: 20px; }
.sd-clock-head p:not(.eyebrow) { max-width: 36ch; }
.sd-clock-progress { position: relative; height: 3px; margin-top: 34px; background: var(--hl-border-dark); }
.sd-clock-progress span { position: absolute; inset: 0; background: var(--hl-red); transform-origin: left; transform: scaleX(var(--clock, 0)); transition: transform .4s var(--hl-ease); }
.sd-ledger { list-style: none; }
.sd-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); padding: 30px 0; border-top: 1px solid var(--hl-border-dark); opacity: .45; transition: opacity .5s ease; }
.sd-row.is-on { opacity: 1; }
.sd-time { font-family: var(--hl-font-display); font-size: 44px; font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--hl-white); }
.sd-row h3 { font-size: var(--hl-fs-h4); margin-bottom: 8px; }
.sd-row-deadline { border-top: 2px solid var(--hl-red-on-dark); }
.sd-row-deadline .sd-time { color: var(--hl-red-on-dark); }

/* Damage types (DS cards) */
.sd-types-head { margin-bottom: var(--hl-space-5); }
.sd-types-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sd-types-grid article { padding: 28px; background: var(--hl-white); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); transition: transform .22s ease, box-shadow .22s ease; }
.sd-types-grid article:hover { transform: translateY(-4px); box-shadow: var(--hl-shadow-card); }
.sd-types-grid h3 { font-size: var(--hl-fs-h4); margin-bottom: 8px; }
.sd-types-grid article .hl-slot { margin: -28px -28px 24px; border-radius: var(--hl-radius-lg) var(--hl-radius-lg) 0 0; }
.sd-types-grid article .hl-slot::before { border-width: 0 0 1.5px; }
.sd-k { font-size: var(--hl-fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--hl-red); margin: 16px 0 4px; }
.sd-types-grid p:not(.sd-k) { color: var(--hl-text-muted); font-size: var(--hl-fs-sm); }

/* Insurance documentation */
.sd-claim { background: var(--hl-surface); }
.sd-claim-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: var(--hl-space-5); }
.sd-claim-head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.sd-claim-slot { margin-bottom: 24px; }
.sd-claim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: var(--hl-space-5); }
.sd-claim-col { padding: 34px; background: var(--hl-white); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); }
.sd-claim-col:first-child { border-top: 4px solid var(--hl-red); }
.sd-claim-col h3 { font-size: var(--hl-fs-h4); margin-bottom: 18px; }
.sd-claim-col li { color: var(--hl-text-muted); }
.sd-claim-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: var(--hl-space-4); }
.sd-claim-facts article { padding-top: 22px; border-top: 1px solid rgba(17,28,47,.14); }
.sd-fact-k { font-size: var(--hl-fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--hl-red); margin-bottom: 10px; }
.sd-claim-facts h3 { font-size: var(--hl-fs-h4); margin-bottom: 10px; }
.sd-claim-facts p:not(.sd-fact-k) { color: var(--hl-text-muted); font-size: var(--hl-fs-sm); }
.sd-legal { margin-top: 8px; }
.sd-legal { font-size: var(--hl-fs-xs); }

/* Tarp */
.sd-tarp { padding: var(--hl-section-y) 0; }
.sd-tarp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sd-tarp-photo { margin: 0; }
.sd-tarp-copy h2 { margin-bottom: 22px; }
.sd-tarp-copy p:not(.eyebrow) { color: var(--hl-text-muted); max-width: 60ch; margin-bottom: 1em; }
.sd-tarp-copy .btn { margin-top: 12px; }

/* Prep checklist */
.sd-prep { background: var(--hl-surface); }
.sd-prep-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.sd-prep-head { position: sticky; top: calc(var(--hl-header-h) + 32px); }
.sd-prep-head h2 { margin-bottom: 20px; }
.sd-prep-head .lede { margin-bottom: 28px; }
.sd-prep-slot { margin-top: 32px; }
.sd-prep-list { list-style: none; background: var(--hl-white); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); padding: 6px 28px; }
.sd-prep-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--hl-border); }
.sd-prep-list li:last-child { border-bottom: 0; }
.sd-box { width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--hl-navy); border-radius: var(--hl-radius-sm); }
.sd-prep-list h3 { font-size: 19px; margin-bottom: 4px; }
.sd-prep-list p { color: var(--hl-text-muted); font-size: var(--hl-fs-sm); }

@media (max-width: 1100px) {
  .sd-clock-grid, .sd-prep-grid { grid-template-columns: 1fr; }
  .sd-clock-head, .sd-prep-head { position: static; }
  .sd-types-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .sd-now-grid, .sd-claim-head, .sd-claim-grid, .sd-claim-facts, .sd-tarp-grid { grid-template-columns: 1fr; }
  .sd-row { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 700px) {
  .sd-types-grid { grid-template-columns: 1fr; }
  .sd-hero { min-height: 0; }
  .sd-col, .sd-claim-col { padding: 26px 22px; }
  .sd-claim-slot { aspect-ratio: 16 / 10; }
  .sd-time { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .sd-rain, .sd-dot::after { animation: none; } .sd-row { opacity: 1; } }