/* ============================================================================
   OCEAN RIDGE RUG CARE — Boynton Beach, FL
   Design family H, "Timeline" — Boynton's own reading of it.

   Where this differs from the other family-H site (which runs a left-edge
   spine with round numbered dots and figures stacked inside each node):
     · the spine runs down the CENTRE of the page and the stages alternate
       across it (a ladder, not a rail); it folds to a left rail under 880px
     · markers are rotated-square KNOTS, not circles
     · every stage splits in two — a label block hugging the spine, a detail
       block set outward from it
     · photo plates CROSS the spine into the empty lane opposite their stage
     · the chrome strip under the header is a tick-marked route gauge, not a
       row of pills

   PRUNED (R1): every rule for chrome this site does not render is deleted, not
   left dormant — no kilim band, no ticker, no photo-overlay hero, no dark proof
   band, no glass/frosted kit, no step/compare/expect/rug-card kits, no framed
   photo grid, no area-block/nap kits, no split or masthead machinery, no
   3-column footer grid. What is kept: the token blocks, focus-visible rings,
   the reduced-motion guard, and the responsive nav rules (one-line main nav,
   burger at 1100px). Zero webfonts, zero external requests.
   ========================================================================== */

/* ---- palette tokens (this city's block from palettes.md — untouched) ---- */
:root{
  /* boynton-beach — ocean teal */
  /* AA: AD/ivory 5.91 · wht/AD 6.49 · wht/brand 8.55 · AL/brand 4.91 · B2/ivory 5.91 */
  --brand:#2d1c54; --brand-deep:#160d2b; --brand-2:#3d2673;
  --accent:#6633a3; --accent-deep:#3f1d67; --accent-lt:#b994e6;
  --ink:#121212; --ink-soft:#4d4a54; --ivory:#f9f9fa; --ivory-warm:#f0eff2; --line:#dcdbe1;
  
  
}

/* ---- geometry of the ladder ---- */
:root{--gutter:22px;--lane-gap:3.4rem;--knot:2.3rem;--spine-w:2px}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{font-family:var(--body);color:var(--ink);background:var(--ivory);font-size:1.02rem;line-height:1.68}
img{max-width:100%;height:auto}
a{color:var(--accent-deep)}
a,button,summary{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.wrap{max-width:1096px;margin:0 auto;padding:0 var(--gutter)}
.ocr-prose{max-width:63ch}
.ocr-kicker{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-2);margin-bottom:.6rem}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;line-height:1.16}
h2{font-size:clamp(1.65rem,3.5vw,2.25rem);color:var(--brand);margin-bottom:.85rem}
.stack p{margin-bottom:1rem;max-width:64ch}
.stack p.turn{font-family:var(--display);font-size:1.18rem;color:var(--brand)}
section{padding:3.2rem 0}
.alt{background:var(--ivory-warm)}

/* the spine is this family's only section divider — it is painted as a section
   background so page copy always sits over it, never under a floated rule */
.seam{background-image:linear-gradient(color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent) 26%,transparent));background-size:var(--spine-w) 100%;background-position:50% 0;background-repeat:no-repeat}

/* ---- buttons: solid pill + knot-icon button (chrome matrix, row H) ---- */
.ocr-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--body);font-weight:700;font-size:.98rem;text-decoration:none;border-radius:999px;padding:.9rem 1.55rem;min-height:48px;border:2px solid transparent;transition:background-color .2s,border-color .2s,color .2s}
.ocr-btn svg{flex:none}
.ocr-btn--tide{background:var(--accent-deep);color:#fff}
.ocr-btn--tide:hover{background:var(--brand-deep)}
.ocr-btn--knot{background:transparent;color:var(--accent-deep);border-color:var(--accent);padding-left:.7rem}
.ocr-btn--knot:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent-deep)}
.ocr-btn--wide{width:100%}
.knot-ico{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex:none;background:var(--accent-deep);color:#fff;transform:rotate(45deg);border-radius:2px}
.knot-ico svg{transform:rotate(-45deg)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---- header: logo left · nav right, spine starts beneath it ---- */
header.site{background:var(--ivory);border-bottom:2px solid var(--line);position:relative;z-index:40}
.site-bar{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.65rem 0}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--brand)}
.logo svg{flex:none;display:block}
.logo-text{font-family:var(--display);font-size:1.2rem;line-height:1.12;color:var(--brand)}
.logo-text small{display:block;font-family:var(--body);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);margin-top:.22rem}
.call-pill{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.94rem;color:#fff;background:var(--accent-deep);text-decoration:none;border-radius:999px;padding:.6rem 1.05rem;min-height:48px;white-space:nowrap;transition:background-color .2s}
.call-pill:hover{background:var(--brand-deep)}
.call-pill svg{flex:none}
.nav-burger{display:none;align-items:center;gap:.4rem;font-family:var(--body);font-weight:700;font-size:.88rem;color:var(--brand);background:transparent;border:1px solid var(--accent);border-radius:2px;padding:.5rem .8rem;min-height:48px}
.top-nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:.08rem;list-style:none}
.top-nav li{position:relative}
.top-nav a,.nav-toggle{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;background:transparent;border:0;padding:.55rem .65rem;border-radius:2px;min-height:48px;transition:color .15s,box-shadow .15s}
.top-nav a:hover,.nav-toggle:hover{color:var(--accent-deep);box-shadow:inset 0 -2px 0 var(--accent)}
.top-nav a[aria-current="page"]{color:var(--accent-deep);box-shadow:inset 0 -3px 0 var(--accent-deep)}
.nav-toggle .caret{transition:transform .2s}
.has-menu.open>.nav-toggle .caret{transform:rotate(180deg)}
.mega{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);box-shadow:0 16px 30px color-mix(in srgb,var(--brand-deep) 20%,transparent);padding:1.25rem 1.45rem;z-index:60;min-width:630px;grid-template-columns:repeat(3,1fr);gap:1.35rem}
.mega--slim{min-width:236px;grid-template-columns:1fr;left:auto;right:0;transform:none}
.has-menu.open>.mega{display:grid}
@media (min-width:1101px){
  .has-menu:hover>.mega,.has-menu:focus-within>.mega{display:grid}
}
.mega h3{font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--brand-2);margin-bottom:.5rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
.mega ul{list-style:none}
.mega a{display:block;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;padding:.4rem .35rem;border-radius:2px;min-height:0}
.mega a:hover{color:var(--accent-deep);background:var(--ivory-warm)}

/* ---- route gauge: this family's stand-in for a trust bar ---- */
.gauge{background:var(--brand-deep);color:var(--ivory);border-bottom:2px solid var(--accent)}
.gauge ol{display:flex;flex-wrap:wrap;list-style:none;padding:.55rem 0 .6rem}
.gauge li{flex:1 1 8.5rem;position:relative;padding-top:1rem;text-align:center;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.gauge li::before{content:"";position:absolute;top:.35rem;left:0;right:0;height:var(--spine-w);background:color-mix(in srgb,var(--accent-lt) 40%,transparent)}
.gauge li::after{content:"";position:absolute;top:0;left:50%;margin-left:-1px;width:var(--spine-w);height:9px;background:var(--accent-lt)}
.gauge li:last-child{color:var(--accent-lt)}
.gauge li:first-child::before{left:50%}
.gauge li:last-child::before{right:50%}

/* ---- breadcrumbs ---- */
.crumbs{font-size:.76rem;padding:.7rem 0;background:var(--ivory);border-bottom:1px solid var(--line)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.45;margin:0 .45rem}
.crumbs [aria-current]{opacity:.72}

/* ============================ THE LADDER ================================== */
.tide{position:relative}
.tide::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:var(--spine-w);margin-left:-1px;background:linear-gradient(180deg,var(--accent) 0 72%,color-mix(in srgb,var(--accent) 30%,transparent) 100%);transform-origin:top center}

.stop{position:relative;width:calc(50% - var(--lane-gap));padding-bottom:2.5rem}
.stop:nth-of-type(odd){margin-right:auto}
.stop:nth-of-type(even){margin-left:auto}
.stop:last-of-type{padding-bottom:.4rem}

/* the knot: a rotated square sitting astride the spine */
.knot-m{position:absolute;top:.05rem;width:var(--knot);height:var(--knot);display:grid;place-items:center;background:var(--brand);border-radius:2px;transform:rotate(45deg)}
.stop:nth-of-type(odd) .knot-m{right:calc(-1 * (var(--lane-gap) + var(--knot) / 2))}
.stop:nth-of-type(even) .knot-m{left:calc(-1 * (var(--lane-gap) + var(--knot) / 2))}
.knot-m b{transform:rotate(-45deg);font-family:var(--body);font-size:.84rem;font-weight:700;color:#fff;line-height:1}
.knot-m--plain{width:.95rem;height:.95rem;top:.6rem;background:var(--accent)}
.stop:nth-of-type(odd) .knot-m--plain{right:calc(-1 * (var(--lane-gap) + .475rem))}
.stop:nth-of-type(even) .knot-m--plain{left:calc(-1 * (var(--lane-gap) + .475rem))}

/* two-part node: label block hugs the spine, detail block sits outward */
.stop-head{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;margin-bottom:.7rem}
.stop:nth-of-type(odd) .stop-head{align-items:flex-end;text-align:right}
.stop-lab{font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.18;color:var(--brand)}
h2.stop-lab{font-size:clamp(1.65rem,3.5vw,2.25rem)}
.stop[id]{scroll-margin-top:5rem}
.stop-txt{max-width:46ch}
.stop-txt p{color:var(--ink-soft);margin-bottom:.85rem}
.stop-txt p:last-child{margin-bottom:0}
.stop:nth-of-type(odd) .stop-txt{margin-left:auto}
.stop h1,.stop h2{margin-bottom:.8rem}
.mark{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-deep);background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);padding:.28rem .6rem}
.mark--open{border-left-color:var(--brand);color:var(--brand)}

/* photo plates cross the spine into the empty lane */
.plate{display:block;margin:1.15rem 0 0;background:var(--ivory-warm)}
.plate img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.plate figcaption{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:.55rem 0 0;text-align:left}
.stop:nth-of-type(odd) .plate{margin-right:calc(-1 * (var(--lane-gap) + 1.8rem))}
.stop:nth-of-type(even) .plate{margin-left:calc(-1 * (var(--lane-gap) + 1.8rem))}
.plate--tall img{aspect-ratio:4/3}
.plate-pair{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.15rem 0 0}
.stop:nth-of-type(odd) .plate-pair{margin-right:calc(-1 * (var(--lane-gap) + 1.8rem))}
.stop:nth-of-type(even) .plate-pair{margin-left:calc(-1 * (var(--lane-gap) + 1.8rem))}
.stop:nth-of-type(odd) .plate-pair>.plate,.stop:nth-of-type(even) .plate-pair>.plate{margin:0}
.tide-journey{padding-top:3.4rem}
/* the manifest-driven hero shot rides the same plate, as a painted band */
.plate .shot{min-height:clamp(190px,25vw,300px);background-color:var(--brand-deep);background-position:center 46%;background-size:cover;background-repeat:no-repeat}
.plate--band .shot{min-height:clamp(116px,15vw,176px)}

/* a single-stage rung: the section's own .seam paints the spine, so the rung
   carries no line of its own. .rungs--right hangs the stage in the other lane. */
.rungs{position:relative}
.rungs--right>.stop{margin-left:auto;margin-right:0}
.rungs--right>.stop>.stop-head{align-items:flex-start;text-align:left}
.rungs--right>.stop>.stop-txt{margin-left:0}
.rungs--right>.stop .knot-m{left:calc(-1 * (var(--lane-gap) + var(--knot) / 2));right:auto}
.rungs--right>.stop .knot-m--plain{left:calc(-1 * (var(--lane-gap) + .475rem));right:auto}
.rungs--right>.stop .plate,.rungs--right>.stop .stop-card{margin-left:calc(-1 * (var(--lane-gap) + 1.8rem));margin-right:0}

/* the pricing card that lives inside a stage */
.stop-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);padding:1.35rem 1.4rem 1.45rem;margin-top:1.1rem;text-align:left}
.stop:nth-of-type(odd) .stop-card{margin-right:calc(-1 * (var(--lane-gap) + 1.8rem))}
.stop:nth-of-type(even) .stop-card{margin-left:calc(-1 * (var(--lane-gap) + 1.8rem))}
.stop-card h3{font-size:1.16rem;color:var(--brand);margin-bottom:.7rem}
.stop-card p{margin-bottom:.85rem;color:var(--ink-soft);max-width:62ch}
.stop-card p.turn{font-family:var(--display);font-size:1.1rem;color:var(--brand)}
.stop-card .ocr-btn{margin-top:.35rem}

/* subpage hero: spine-led, headline in the first stage */
.tide-hero{background-color:var(--ivory);padding:2.5rem 0 2.3rem}
.tide-hero h1{font-size:clamp(2.05rem,4.5vw,3.2rem);color:var(--brand);margin-bottom:.9rem}
.tide-hero .ocr-lede{max-width:none;font-size:1.06rem;color:var(--ink-soft);margin-bottom:0}
.tide-hero--sub{padding:2.1rem 0 2rem}
.tide-hero--sub h1{font-size:clamp(1.72rem,3.78vw,2.47rem)}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.9rem}
.follow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:.15rem}
.follow:hover{color:var(--brand);border-color:var(--brand)}
.turnaround{display:inline-block;margin-top:1.4rem;font-size:.82rem;font-weight:700;color:var(--brand);background:#fff;border:1px solid var(--accent);border-radius:999px;padding:.5rem 1.05rem}

/* ======================= THE QUAY — home page hero =========================
   Boynton lays this family's spine DOWN. The ladder still owns the rest of the
   page, but the hero has no vertical line at all: copy sits in the left lane,
   the manifest plate is a letterbox band, and the eight stops of the journey
   run left-to-right along a rule across the FOOT of the hero, each knot sitting
   astride the line. Nothing hangs off a vertical spine here — that is the other
   family-H site's reading, and the axis must not match. */
.ocr-quay{background-color:var(--ivory);padding:2.6rem 0 2.5rem}
.ocr-quay-top{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:1.6rem 2.8rem;align-items:end}
.ocr-quay-copy{min-width:0}
.ocr-quay h1{font-size:clamp(2.05rem,4.5vw,3.2rem);color:var(--brand);margin:0 0 .9rem}
.ocr-quay .ocr-lede{max-width:54ch;font-size:1.06rem;color:var(--ink-soft);margin:0}
.ocr-quay .hero-ctas{margin-top:1.35rem}

/* the day-0 stamp keeps its knot, but inline and static — no spine to straddle */
.ocr-quay-open{display:flex;align-items:center;gap:.65rem;margin-bottom:.95rem}
.ocr-knot-i{display:inline-flex;align-items:center;justify-content:center;width:1.85rem;height:1.85rem;flex:none;background:var(--brand);border-radius:2px;transform:rotate(45deg)}
.ocr-knot-i b{display:block;transform:rotate(-45deg);font-family:var(--body);font-size:.8rem;font-weight:700;line-height:1;color:#fff}

/* the right lane carries one connective note, bottom-aligned to the lede */
.ocr-quay-aside{border-top:2px solid var(--accent);padding-top:.85rem;max-width:34ch;justify-self:end}
.ocr-quay-aside p{font-size:.92rem;color:var(--ink-soft)}
.ocr-quay-aside .ocr-kicker{margin-bottom:.4rem}

/* the plate lies flat and wide under the copy: a band, not a matted column */
.ocr-quay-band{margin:2.1rem 0 0}
.ocr-quay-band .shot{min-height:clamp(160px,21vw,254px);background-position:center 44%}
.ocr-quay-band figcaption{text-align:right}

/* the horizontal route: each stop draws its own segment of the rule, so a
   wrapped row still reads as a continuous line with its own knots on it */
.ocr-route{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));list-style:none;margin:1.9rem 0 0}
.ocr-route li{position:relative;padding:2.55rem .7rem 0 0;font-family:var(--body);font-size:.79rem;font-weight:700;line-height:1.34;color:var(--ink-soft)}
.ocr-route li::before{content:"";position:absolute;top:calc(.8rem - 1px);left:.8rem;right:0;height:var(--spine-w);background:color-mix(in srgb,var(--accent) 34%,transparent)}
.ocr-route li:last-child::before{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 34%,transparent) 0,color-mix(in srgb,var(--accent) 6%,transparent) 100%)}
.ocr-route-k{position:absolute;top:0;left:0;width:1.6rem;height:1.6rem;display:grid;place-items:center;background:var(--ivory);border:2px solid var(--accent);border-radius:2px;transform:rotate(45deg)}
.ocr-route-k b{display:block;transform:rotate(-45deg);font-family:var(--body);font-size:.64rem;font-weight:700;line-height:1;color:var(--accent-deep)}
.ocr-route-now{color:var(--brand)}
.ocr-route-now .ocr-route-k{background:var(--brand);border-color:var(--brand)}
.ocr-route-now .ocr-route-k b{color:#fff}

/* the line hands off downward at its far end */
.ocr-quay-foot{margin-top:1.45rem;text-align:right}
.ocr-quay-foot .follow{display:inline-flex;align-items:center;min-height:48px}

@media (max-width:1000px){
  .ocr-route{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.3rem}
}
@media (max-width:880px){
  .ocr-quay-top{grid-template-columns:1fr;align-items:start}
  .ocr-quay-aside{justify-self:start;max-width:58ch}
  .ocr-quay-band figcaption{text-align:left}
}
@media (max-width:560px){
  .ocr-quay{padding:2.1rem 0 2.2rem}
  .ocr-quay-band{margin-top:1.7rem}
  .ocr-route{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem;margin-top:1.6rem}
  .ocr-quay-foot{text-align:left;margin-top:1.2rem}
}

/* ---- rug types: compact chips ---- */
.weave{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:.85rem;margin-top:1.7rem}
.weave a{display:block;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);padding:.9rem 1rem 1rem;text-decoration:none;color:var(--ink);scroll-margin-top:5rem;transition:border-left-color .2s,box-shadow .2s}
.weave a:hover{border-left-color:var(--brand);box-shadow:0 4px 14px color-mix(in srgb,var(--brand-deep) 10%,transparent)}
.weave-name{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.03rem;font-weight:700;color:var(--brand);margin-bottom:.35rem}
.weave-name svg{flex:none}
.weave p{font-size:.89rem;color:var(--ink-soft)}
.weave .go{display:inline-block;margin-top:.5rem;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}

/* ---- tag rows (repairs, what a soak reaches, what every wash includes) ---- */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem;list-style:none}
.tags li{font-size:.83rem;font-weight:600;color:var(--brand);background:#fff;border:1px solid var(--line);padding:.42rem .85rem}
.tags--quiet li{background:transparent;border-style:dashed;color:var(--ink-soft);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}

/* ---- promises ---- */
.vows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.6rem}
.vow{border-top:2px solid var(--accent);padding-top:.85rem}
.vow h3{font-size:1rem;color:var(--brand);margin-bottom:.4rem}
.vow h3::before{content:"\25C6";color:var(--accent);font-size:.72rem;margin-right:.5rem;vertical-align:.08em}
.vow p{font-size:.89rem;color:var(--ink-soft)}
.vows-note{margin-top:1.6rem;font-size:.91rem;color:var(--ink-soft);max-width:64ch}

/* ---- video ---- */
.reel{background:var(--brand-deep);color:var(--ivory);padding:2.9rem 0;text-align:center}
.reel h2{color:var(--ivory)}
.reel p{margin:0 auto .95rem;max-width:54ch;color:color-mix(in srgb,var(--ivory) 84%,var(--brand))}
.reel video{display:block;width:100%;max-width:800px;height:auto;margin:0 auto;border-radius:2px;background:#000}
.reel .ocr-kicker{color:var(--accent-lt)}

/* ---- FAQ: numbered spine steps that expand ---- */
.qa{position:relative;counter-reset:q;margin-top:1.5rem;max-width:74ch}
.qa::before{content:"";position:absolute;left:1.15rem;top:.5rem;bottom:.5rem;width:var(--spine-w);background:color-mix(in srgb,var(--accent) 40%,transparent)}
.qa details{position:relative;padding:0 0 .85rem 3.5rem}
.qa summary{display:flex;align-items:center;min-height:48px;font-family:var(--display);font-size:1.09rem;font-weight:700;color:var(--brand);list-style:none;padding:.35rem 0}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"";position:absolute;left:0;top:.6rem;width:2.3rem;height:2.3rem;background:var(--ivory);border:2px solid var(--accent);border-radius:2px;transform:rotate(45deg);transition:background-color .2s,border-color .2s}
.qa summary::after{counter-increment:q;content:counter(q);position:absolute;left:0;top:.6rem;width:2.3rem;height:2.3rem;display:flex;align-items:center;justify-content:center;font-family:var(--body);font-size:.78rem;font-weight:700;color:var(--accent-deep)}
.qa details[open] summary::before{background:var(--brand);border-color:var(--brand)}
.qa details[open] summary::after{color:#fff}
.qa details p{max-width:62ch;color:var(--ink-soft);padding-top:.15rem}
.qa details p+p{margin-top:.8rem}

/* ---- form ---- */
.dock{background:var(--ivory-warm)}
.dock-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.4rem;align-items:start}
.dock-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);padding:1.45rem 1.45rem 1.55rem}
.dock-card h3{font-size:1.25rem;color:var(--brand);margin-bottom:.25rem}
.dock-card .hint{font-size:.86rem;color:var(--ink-soft)}
.ocr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.05rem}
.ocr-form-grid .full{grid-column:1/-1}
label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.32rem}
input,select,textarea{width:100%;font-family:var(--body);font-size:1rem;padding:.78rem .82rem;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);min-height:48px}
textarea{min-height:86px;resize:vertical}
.form-note{font-size:.83rem;color:var(--ink-soft);margin-top:.85rem;max-width:58ch}
.form-success{display:none;font-weight:600;color:var(--brand);background:var(--ivory);border:1px solid var(--accent);padding:.95rem 1.05rem;margin-top:1.1rem}

/* ---- coverage list (contact) ---- */
.reach{columns:3;column-gap:2rem;margin-top:1.3rem;font-size:.94rem;list-style:none}
.reach li{padding:.26rem 0 .26rem 1.15rem;position:relative;break-inside:avoid}
.reach li::before{content:"\25C6";position:absolute;left:0;top:.34rem;color:var(--accent);font-size:.6rem}

/* ---- footer: the spine terminates here ---- */
footer.site{background:var(--brand-deep);color:color-mix(in srgb,var(--ivory) 80%,var(--brand));padding:0 0 7rem;font-size:.89rem;line-height:1.8}
.tide-end{text-align:center;padding:2.4rem 0 1.7rem}
.tide-end::before{content:"";display:block;width:var(--spine-w);height:2.3rem;margin:0 auto .55rem;background:color-mix(in srgb,var(--accent-lt) 55%,transparent)}
.end-knot{width:1.35rem;height:1.35rem;margin:0 auto .75rem;background:var(--accent-lt);transform:rotate(45deg);border-radius:2px}
.end-note{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lt)}
.foot-row{display:flex;flex-wrap:wrap;gap:1.5rem 2.8rem;justify-content:space-between;border-top:1px solid color-mix(in srgb,var(--ivory) 16%,transparent);padding-top:1.7rem}
.foot-brand{max-width:30rem}
.foot-brand .logo{margin-bottom:.8rem;color:var(--ivory)}
.foot-brand .logo-text{color:var(--ivory)}
.foot-brand .logo-text small{color:var(--accent-lt)}
footer.site a{color:var(--accent-lt)}
footer.site h3{font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);margin-bottom:.5rem}
.foot-links{display:flex;flex-wrap:wrap;gap:.1rem 1.15rem;list-style:none}
.foot-links a{text-decoration:none;font-weight:600}
.foot-links a:hover{text-decoration:underline}
.foot-legal{margin-top:1.8rem;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--ivory) 14%,transparent);font-size:.78rem;color:color-mix(in srgb,var(--ivory) 68%,var(--brand));padding-bottom:1.4rem}





/* ---- responsive ---- */
@media (max-width:1100px){
  .nav-burger{display:inline-flex}
  .top-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px color-mix(in srgb,var(--brand-deep) 16%,transparent);z-index:60;max-height:calc(100vh - 120px);overflow-y:auto}
  .top-nav.open{display:block}
  .top-nav > ul{display:block;padding:.4rem 0}
  .top-nav > ul > li{border-bottom:1px solid var(--ivory-warm)}
  .top-nav > ul > li:last-child{border-bottom:0}
  .top-nav > ul > li > a,.top-nav > ul > li > .nav-toggle{display:flex;width:100%;justify-content:space-between;white-space:normal;padding:.85rem 1.2rem;font-size:.95rem;border-radius:0}
  .top-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent-deep)}
  .mega,.mega--slim{position:static;transform:none;min-width:0;display:none;grid-template-columns:1fr;gap:1rem;border:0;border-top:1px solid var(--ivory-warm);box-shadow:none;padding:.9rem 1.35rem 1rem;background:var(--ivory)}
  .has-menu.open>.mega{display:grid}
  .mega a{padding:.65rem .4rem;min-height:44px;display:flex;align-items:center}
}
@media (min-width:1101px){
  .top-nav > ul{flex-wrap:nowrap;gap:.04rem}
  .top-nav > ul > li > a,.top-nav > ul > li > .nav-toggle{white-space:nowrap;padding:.5rem .5rem;font-size:.85rem}
  .site-bar{gap:.5rem}
}
/* the ladder folds to a left rail */
@media (max-width:880px){
  .tide::before{left:1.15rem;margin-left:0}
  .stop,.stop:nth-of-type(odd),.stop:nth-of-type(even){width:auto;margin:0;padding-left:3.5rem}
  .stop:nth-of-type(odd) .stop-head{align-items:flex-start;text-align:left}
  .stop:nth-of-type(odd) .stop-txt{margin-left:0}
  .stop:nth-of-type(odd) .knot-m,.stop:nth-of-type(even) .knot-m{left:0;right:auto}
  .stop:nth-of-type(odd) .knot-m--plain,.stop:nth-of-type(even) .knot-m--plain{left:.68rem;right:auto}
  .stop:nth-of-type(odd) .plate,.stop:nth-of-type(even) .plate,
  .stop:nth-of-type(odd) .stop-card,.stop:nth-of-type(even) .stop-card,
  .stop:nth-of-type(odd) .plate-pair,.stop:nth-of-type(even) .plate-pair{margin-left:0;margin-right:0}
  .plate-pair{grid-template-columns:1fr}
  .seam{background-position:calc(var(--gutter) + 1.15rem - 1px) 0}
  .dock-grid{grid-template-columns:1fr;gap:1.7rem}
}
@media (max-width:760px){
  
  section{padding:2.6rem 0}
  .tide-hero{padding:2.2rem 0 2.1rem}
  .ocr-form-grid{grid-template-columns:1fr}
  .reach{columns:2}
  .call-pill .pill-num{display:none}
  .foot-row{gap:1.4rem}
  footer.site{padding-bottom:7.4rem}
}
@media (max-width:480px){
  .reach{columns:1}
  .gauge li:nth-child(n+4){display:none}
}

/* ---- motion, only where the visitor allows it ---- */
@media (prefers-reduced-motion:no-preference){
  .tide::before{animation:spine-draw 1s ease-out both}
  @keyframes spine-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .js .stop,.js .vow{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .js .stop.lit,.js .vow.lit{opacity:1;transform:none}
}

/* --- per-site style kit (typography + shape personality) --- */
:root{--display:"Times New Roman",Times,serif;--body:Georgia,serif}
body{font-size:1.020rem;line-height:1.7}
h1,h2,h3{letter-spacing:0.0em;font-weight:700}
.nav-burger,.top-nav a,.mega,.mega a,.reel video,input,select,textarea{border-radius:2px}
.weave a,.stop-card,.dock-card,.tags li{border-radius:0 2px 2px 0}
.call-pill,.turnaround,.mark{border-radius:4px}

/* --- family paper + neutrals --- */
:root{--ivory:#f9f9fa;--ivory-warm:#f0eff2;--line:#dcdbe1;--ink:#121212;--ink-soft:#4d4a54}

/* --- city hue (258deg) --- */
:root{--brand-deep:#160d2b;--brand-2:#3d2673;--brand:#2d1c54;--accent-deep:#3f1d67;--accent-lt:#b994e6;--accent:#6633a3;--ivory-warm:#f0eff2;--ivory:#f9f9fa;--line:#dcdbe1;--ink-soft:#4d4a54;--ink:#121212;}

/* --- family type scale --- */
body{font-size:1.02rem;line-height:1.64}
body h1{font-size:clamp(2.05rem,4.5vw,3.2rem);letter-spacing:0em}
body h2{font-size:clamp(1.65rem,3.5vw,2.25rem)}

.ocr-site .tel-word{font-weight:700;letter-spacing:.02em}.ocr-top,.ocr-crown,.ocr-imprint{display:block}.ocr-top p,.ocr-crown p{margin:.5rem 0 0;color:var(--ink-soft)}.ocr-site{border-top:1px solid var(--line);padding:2.5rem 0 2.9rem}.ocr-site ul{list-style:none;margin:0;padding:0}.ocr-site h3{font-size:.95rem;font-variant-caps:all-small-caps;letter-spacing:.07em;margin:0 0 .5rem}.ocr-site a{color:inherit;text-decoration:none}.ocr-site a:hover{text-decoration:underline}.ocr-site a:not(.logo){min-height:48px;display:inline-flex;align-items:center}
.ocr-line{display:flex;flex-wrap:wrap;gap:1.3rem 1.6rem;border-top:2px solid var(--accent);padding-top:1.5rem;margin-bottom:1.4rem}.ocr-line a{position:relative}.ocr-line a::before{content:"";position:absolute;top:-1.85rem;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent)}.ocr-under p{color:var(--ink-soft);margin:.35rem 0}.ocr-legal{font-size:.85rem}
@media (max-width:760px){.ocr-foot,.ocr-cols,.ocr-r,.ocr-runs,.ocr-links,.ocr-lists{grid-template-columns:1fr !important;gap:1.3rem}.ocr-nap{text-align:left;border-left:0;padding-left:0}.ocr-rail{border-right:0;padding-right:0}}

/* --- sticky dock: 2-slot split bar (ocr) --- */
.ocr-dock{position:fixed;z-index:60;display:none;font-weight:700;font-family:var(--body)}.ocr-dock a{text-decoration:none;display:flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.1rem}@media (max-width:760px){.ocr-dock{display:flex}}.ocr-dock--split{left:0;right:0;bottom:0;box-shadow:0 -2px 14px rgba(0,0,0,.2)}.ocr-dock--split a{flex:1;color:#fff}.ocr-dock--split a+a{border-left:1px solid color-mix(in srgb,#fff 26%,transparent)}.ocr-d1{background:var(--brand)}.ocr-d2{background:color-mix(in srgb,var(--brand) 84%,#000)}.ocr-d3{background:color-mix(in srgb,var(--brand) 68%,#000)}@media (max-width:760px){body{padding-bottom:56px}}

/* --- footer: boynton-beach (H) --- */
.ocr-site .tel-word{font-weight:700;letter-spacing:.02em}.ocr-top,.ocr-crown,.ocr-imprint{display:block}.ocr-top p,.ocr-crown p{margin:.5rem 0 0;color:var(--ink-soft)}.ocr-site{border-top:1px solid var(--line);padding:2.5rem 0 2.9rem}.ocr-site ul{list-style:none;margin:0;padding:0}.ocr-site h3{font-size:.95rem;font-variant-caps:all-small-caps;letter-spacing:.07em;margin:0 0 .5rem}.ocr-site a{color:inherit;text-decoration:none}.ocr-site a:hover{text-decoration:underline}.ocr-site a:not(.logo){min-height:48px;display:inline-flex;align-items:center}
.ocr-line{display:flex;flex-wrap:wrap;gap:1.3rem 1.6rem;border-top:2px solid var(--accent);padding-top:1.5rem;margin-bottom:1.4rem}.ocr-line a{position:relative}.ocr-line a::before{content:"";position:absolute;top:-1.85rem;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent)}.ocr-under p{color:var(--ink-soft);margin:.35rem 0}.ocr-legal{font-size:.85rem}
@media (max-width:760px){.ocr-foot,.ocr-cols,.ocr-r,.ocr-runs,.ocr-links,.ocr-lists{grid-template-columns:1fr !important;gap:1.3rem}.ocr-nap{text-align:left;border-left:0;padding-left:0}.ocr-rail{border-right:0;padding-right:0}}