/* Nantucket Commercial shared styles: tokens, header + mobile menu, buttons, sections, forms, footer. Page files add their own layout rules. */
:root {
  --bg: #fbfaf7; --bg-2: #f1efe9; --ink: #0f2230; --body: #3b4a54; --muted: #6c7a83; --line: #dfdcd4;
  --harbor: #13506a; --harbor-deep: #0c3446; --brick: #b4532f; --sky: #e7eef1; --ok: #1d6b45;
  --f: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; --fd: "Playfair Display", Georgia, "Times New Roman", serif; --fl: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important; animation: none !important } }
body { margin: 0; background: var(--bg); color: var(--body); font: 400 17px/1.65 var(--f); -webkit-font-smoothing: antialiased }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg) }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)) }
h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; font-family: var(--fd); font-weight: 400; letter-spacing: -.01em }
h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.08 }
h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12 }
h3 { font-size: 21px; line-height: 1.25; font-weight: 500; letter-spacing: 0 }
p { margin: 0 }
a { color: inherit }
:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px }
.kicker { font: 600 12.8px/1.3 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--harbor); margin-bottom: 16px; display: block }
.lede { font-size: 20px; line-height: 1.55; margin: 24px 0 32px; max-width: 58ch }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15.5px var(--f); text-decoration: none; padding: 15px 24px; border-radius: 7px; background: var(--harbor); color: #fff; border: 1px solid var(--harbor); transition: background .15s, color .15s; white-space: nowrap; cursor: pointer }
.btn:hover { background: var(--harbor-deep) }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink) }
.btn.ghost:hover { background: var(--ink); color: #fff }
.btn.light { background: #fff; color: var(--harbor-deep); border-color: #fff }
.ctas { display: flex; flex-wrap: wrap; gap: 12px }
section { padding-block: 92px }
.alt { background: var(--bg-2) }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 44px }
.head p { font-size: 18.5px; max-width: 54ch }
.page-hero { padding-block: 84px 72px }
.crumb { font-size: 14px; color: var(--muted); margin-bottom: 18px }
.crumb a { color: var(--harbor); text-decoration: none; font-weight: 600 }

/* header */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
header.top .wrap { display: flex; justify-content: space-between; align-items: center; height: 72px; gap: 20px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); white-space: nowrap }
.logo-mark { width: 36px; height: 36px; flex: none }
.wm { display: grid; line-height: 1 }
.wm b { font: 800 19px/1 var(--fl); font-stretch: 118%; letter-spacing: -.01em; color: var(--ink) }
.wm small { font: 500 10px/1 var(--fl); letter-spacing: .42em; text-transform: uppercase; color: var(--muted); margin-top: 4px; margin-left: 1px }
nav.links { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500 }
nav.links a { color: var(--ink); text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent }
nav.links a:hover { color: var(--harbor) }
nav.links a[aria-current="page"] { color: var(--harbor); border-bottom-color: var(--harbor) }
nav.links .btn { padding: 10px 18px; font-size: 14.5px; color: #fff; border-bottom: 1px solid var(--harbor) }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; place-items: center; padding: 0 }
.menu-btn span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px }
.menu-btn span::before { top: -6px } .menu-btn span::after { top: 6px }

/* mobile menu */
.mnav { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); overflow: auto; opacity: 0; transform: translateY(-8px); transition: opacity .18s, transform .18s }
.mnav.open { opacity: 1; transform: none }
.mnav[hidden] { display: none }
.mnav .mtop { display: flex; justify-content: space-between; align-items: center; height: 58px }
.mnav .x { width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer }
.mnav ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid }
.mnav li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font: 500 26px/1.15 var(--fd); letter-spacing: -.01em }
.mnav li a small { font: 400 14px var(--f); color: var(--muted); letter-spacing: 0; text-align: right }
.mnav li a[aria-current="page"] { color: var(--harbor) }
.mnav .mcta { display: grid; gap: 10px; margin-top: 26px }
.mnav .mcta .btn { justify-content: center }
.mnav .mfoot { margin-top: auto; padding-top: 26px; font-size: 14px; color: var(--muted) }
.mnav .mfoot a { color: var(--harbor); font-weight: 600; text-decoration: none }

/* forms */
form.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px; display: grid; gap: 16px; box-shadow: 0 30px 60px -36px rgba(15, 34, 48, .45) }
.fl { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink) }
.fl input, .fl select, .fl textarea { font: 400 16px var(--f); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 12px 13px; background: #fff; width: 100% }
.fl input:focus, .fl select:focus, .fl textarea:focus { outline: none; border-color: var(--harbor); box-shadow: 0 0 0 3px rgba(19, 80, 106, .15) }
.fl textarea { min-height: 110px; resize: vertical }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px }
.seg label { cursor: pointer }
.seg input { position: absolute; opacity: 0; pointer-events: none }
.seg span { display: block; text-align: center; border: 1px solid var(--line); border-radius: 9px; padding: 12px 8px; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s }
.seg input:checked + span { border-color: var(--harbor); background: var(--sky); color: var(--harbor-deep) }
.seg input:focus-visible + span { outline: 3px solid var(--brick); outline-offset: 2px }
.hp { position: absolute; left: -5000px }
.err { color: var(--brick); font-size: 14px; font-weight: 600; min-height: 1em }
.fine { font-size: 13px; color: var(--muted) }
.done { text-align: center; padding: 30px 10px; display: grid; gap: 10px; justify-items: center }
.done .tick { width: 56px; height: 56px; border-radius: 50%; background: #e3f1e9; color: var(--ok); display: grid; place-items: center; font-size: 28px; font-weight: 700 }
.formsplit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start }
.formsplit .side p { font-size: 18px; margin-top: 16px; max-width: 46ch }
.ticks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-weight: 600; color: var(--ink) }
.ticks li::before { content: "✓"; color: var(--harbor); margin-right: 10px }

/* shared blocks */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; display: grid; gap: 12px; align-content: start }
.card .tag { justify-self: start; font: 700 12px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--harbor); background: var(--sky); padding: 4px 9px; border-radius: 5px }
.card ul, .checks { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 15.5px }
.card li, .checks li { padding-left: 22px; position: relative }
.card li::before, .checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313506a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 9px no-repeat }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px }
.step { display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--ink); padding-top: 20px }
.step .n { font: 500 15px var(--fd); color: var(--harbor) }
.step p { font-size: 15.5px }
.band-cta { background: var(--ink); color: #c9d4da; border-radius: 18px; padding: 60px 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center }
.band-cta h2 { color: #fff } .band-cta p { margin-top: 14px; max-width: 52ch; font-size: 18px }
.band-cta.blue { background: var(--harbor); color: #d9e7ee }

/* footer */
footer.site { padding-block: 56px 48px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 0 }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px }
.fgrid h4 { margin: 0 0 12px; font: 600 12px var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--ink) }
.fgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.fgrid a { color: var(--body); text-decoration: none } .fgrid a:hover { color: var(--harbor) }
.fbrand p { margin-top: 14px; max-width: 34ch }
.flegal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; font-size: 13px }
.svc-of { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }

@media (max-width: 1100px) { nav.links { display: none } .menu-btn { display: grid } }
@media (max-width: 1020px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) } .fgrid { grid-template-columns: 1fr 1fr } .fbrand { grid-column: 1 / -1 } }
@media (max-width: 860px) { .head, .formsplit, .band-cta { grid-template-columns: minmax(0, 1fr) } .head { gap: 16px } section { padding-block: 68px } .page-hero { padding-block: 52px 56px } .band-cta { padding: 40px 28px } }
@media (max-width: 560px) { .cards, .steps, .two { grid-template-columns: minmax(0, 1fr) } form.card { padding: 22px } .fgrid { grid-template-columns: 1fr 1fr } }
@media (max-width: 420px) { .logo-mark { width: 30px; height: 30px } .wm b { font-size: 16px } .wm small { font-size: 8.5px } }