/* ══════════════════════════════════════════════════════════════════════════
   SOS Dock & Barge — Lake of the Ozarks
   Archetype B, work-first. Mobile-first. No framework, no build step.

   Palette: deep lake ink, Ozark water teal, buoy orange reserved for every
   call-to-action, cool near-white paper. Deliberately cool and marine — the
   accent is the only warm colour on the page and it only ever means "call".
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #0a2430;   /* deep lake                                        */
  --ink-2:    #123443;   /* raised dark ground                               */
  --paper:    #f3f6f6;
  --paper-2:  #e6edee;   /* tinted band                                      */
  --water:    #0f6d7a;   /* teal — headings, rules, links on paper           */
  --water-lt: #6fc6d0;   /* teal on dark ground                              */
  --buoy:     #b8460f;   /* CTA on light ground                              */
  --buoy-lt:  #f08a4b;   /* CTA text on dark ground                          */
  --mute:     #47606a;
  --line:     #c8d5d7;
  --frame:    #dbe6e7;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --pad: 20px;
  --max: 760px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  padding-bottom:64px;          /* room for the fixed mobile call bar */
}

img{max-width:100%;height:auto;display:block}

a{color:var(--water)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--buoy);
  outline-offset:2px;
}

h1,h2,h3{line-height:1.16;letter-spacing:-.012em;margin:0}

/* ─── the placeholder frames ─────────────────────────────────────────────
   Every image on this site is a marked placeholder. They are drawn in CSS
   rather than served as files so nothing is ever a broken <img>, and the
   shot brief is real DOM text so a screen reader gets it too.            */

.frame{
  position:relative;
  min-height:230px;
  display:flex;
  align-items:flex-end;
  padding:18px;
  background:
    repeating-linear-gradient(135deg,
      rgba(15,109,122,.07) 0 12px, rgba(15,109,122,0) 12px 24px),
    var(--frame);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.frame::before{
  content:"";
  position:absolute;
  left:14px;right:14px;top:14px;bottom:14px;
  border:2px dashed rgba(10,36,48,.30);
  pointer-events:none;
}
.ph{
  position:relative;
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.55;
  color:var(--ink);
  background:rgba(243,246,246,.92);
  border-left:4px solid var(--buoy);
  padding:11px 13px;
  max-width:52ch;
}
.ph b{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--buoy);
  margin-bottom:4px;
}

/* ─── plate 01 : the opening ─────────────────────────────────────────────
   No hero and no nav bar. The visitor meets a finished dock.             */

.plate{margin:0}

.plate-open .frame-open{
  min-height:48vh;
  align-items:flex-end;
  border-top:none;
}

.overlay{
  background:var(--ink);
  color:var(--paper);
  padding:26px var(--pad) 30px;
}
.eyebrow{
  margin:0 0 12px;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--water-lt);
}
.overlay h1{
  font-size:2.05rem;
  font-weight:800;
  color:#fff;
  margin:0 0 14px;
}
.lede{
  margin:0 0 22px;
  font-size:1.04rem;
  color:#d6e2e5;
  max-width:46ch;
}
.hrs{
  margin:16px 0 0;
  font-size:.88rem;
  color:#bfd0d4;
}
.hrs a{color:var(--water-lt)}

/* ─── call to action ─────────────────────────────────────────────────── */

.cta{
  display:block;
  background:var(--buoy);
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  padding:14px 18px;
  text-align:center;
  border:2px solid var(--buoy);
}
.cta span{
  display:block;
  font-size:.78rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#fff0e6;
}
.cta strong{
  display:block;
  font-family:var(--mono);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.01em;
  margin-top:2px;
}
.cta:hover{background:#9c3a0b;border-color:#9c3a0b}

.inline-call{
  display:block;
  margin-top:26px;
  text-align:center;
  border:2px solid var(--buoy);
  border-radius:4px;
  padding:13px 14px;
  color:var(--buoy);
  font-weight:700;
  text-decoration:none;
}
.inline-call:hover{background:var(--buoy);color:#fff}

.callband{
  background:var(--ink-2);
  color:#fff;
  padding:28px var(--pad) 32px;
  margin:0;
}
.callband p{
  margin:0 0 18px;
  font-size:1.12rem;
  font-weight:600;
  max-width:34ch;
}
.cta-band{max-width:380px}

/* ─── chapters ───────────────────────────────────────────────────────── */

.chapter,.block{
  padding:44px var(--pad) 40px;
  max-width:var(--max);
  margin:0 auto;
}
.chapter{padding-bottom:26px}

.chapno{
  margin:0 0 10px;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--buoy);
}
.chapter h2,.block h2{
  font-size:1.85rem;
  font-weight:800;
  margin:0 0 14px;
}
.chapter h2::after,.block h2::after{
  content:"";
  display:block;
  width:66px;
  height:6px;
  margin-top:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='6' viewBox='0 0 66 6'%3E%3Cpath d='M0 3q5.5-3 11 0t11 0 11 0 11 0 11 0 11 0' fill='none' stroke='%230f6d7a' stroke-width='2'/%3E%3C/svg%3E") no-repeat;
}
.chaplede{
  margin:0;
  color:var(--mute);
  font-size:1.02rem;
  max-width:56ch;
}

/* ─── plate captions and the waterline spec strip ─────────────────────── */

.plate figcaption{
  max-width:var(--max);
  margin:0 auto;
  padding:22px var(--pad) 34px;
}
.plate figcaption h3{
  font-size:1.32rem;
  font-weight:700;
  margin:0 0 8px;
  color:var(--ink);
}
.plate figcaption > p{
  margin:0 0 18px;
  color:var(--mute);
  max-width:56ch;
}

.spec{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.spec li{
  padding:13px 0 13px 30px;
  position:relative;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.spec b{
  display:block;
  font-size:.73rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:5px;
}
.spec span{display:block;color:var(--mute);font-family:var(--mono);font-size:.83rem;line-height:1.6}

/* the waterline motif: above = teal arrow up, below = ink arrow down.
   Colour is never the only signal — each row is also labelled in words. */
.spec li::before{
  position:absolute;
  left:0;top:14px;
  font-family:var(--mono);
  font-size:1rem;
  font-weight:700;
}
.spec .above{background:linear-gradient(90deg,rgba(15,109,122,.06),transparent 60%)}
.spec .above b{color:var(--water)}
.spec .above::before{content:"\2191";color:var(--water)}
.spec .below{background:linear-gradient(90deg,rgba(10,36,48,.06),transparent 60%)}
.spec .below b{color:var(--ink)}
.spec .below::before{content:"\2193";color:var(--ink)}

/* ─── repairs list — a list, not a card grid ─────────────────────────── */

.svclist{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  border-top:2px solid var(--ink);
}
.svclist li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  color:var(--mute);
  font-size:.98rem;
}
.svclist b{color:var(--ink);font-weight:700}

/* ─── tinted / dark blocks ───────────────────────────────────────────── */

.block-tint{
  background:var(--paper-2);
  max-width:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.block-tint > *{max-width:var(--max);margin-left:auto;margin-right:auto}

.block-dark{
  background:var(--ink);
  color:#dde8ea;
  max-width:none;
}
.block-dark > *{max-width:var(--max);margin-left:auto;margin-right:auto}
.block-dark h2{color:#fff}
.block-dark h2::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='6' viewBox='0 0 66 6'%3E%3Cpath d='M0 3q5.5-3 11 0t11 0 11 0 11 0 11 0 11 0' fill='none' stroke='%236fc6d0' stroke-width='2'/%3E%3C/svg%3E") no-repeat;
}
.block-dark .chapno{color:var(--buoy-lt)}
.block-dark .chaplede{color:#a9c0c6}

/* ─── the four steps ─────────────────────────────────────────────────── */

.steps{
  list-style:none;
  counter-reset:none;
  margin:26px 0 0;
  padding:0;
}
.steps li{
  position:relative;
  padding:0 0 22px 52px;
  border-left:2px solid var(--line);
  margin-left:15px;
}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps .n{
  position:absolute;
  left:-16px;top:0;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--water);
  color:#fff;
  font-family:var(--mono);
  font-size:.92rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps b{display:block;font-size:1.04rem;margin-bottom:4px}
.steps span:not(.n){display:block;color:var(--mute);font-size:.95rem}
.steps em{color:var(--buoy);font-style:normal;font-weight:600}

/* ─── facts ──────────────────────────────────────────────────────────── */

.facts{margin:26px 0 0;padding:0}
.facts > div{
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.facts > div:first-child{border-top:2px solid var(--ink)}
.facts dt{
  font-family:var(--mono);
  font-size:1.02rem;
  font-weight:700;
  color:var(--water);
  margin:0 0 4px;
}
.facts dd{margin:0;color:var(--mute);font-size:.97rem}

/* ─── testimonials ───────────────────────────────────────────────────── */

blockquote{
  margin:26px 0 0;
  padding:0 0 0 18px;
  border-left:3px solid var(--buoy-lt);
}
blockquote p{margin:0 0 8px;font-size:1rem;line-height:1.66;color:#dde8ea}
blockquote footer{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--water-lt);
}

/* ─── the form ───────────────────────────────────────────────────────── */

.quote{margin:26px 0 0;max-width:440px}
.field{margin:0 0 16px}
.field label{
  display:block;
  font-size:.8rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
}
.field input,.field select{
  width:100%;
  font:inherit;
  font-size:1rem;
  padding:12px 12px;
  border:2px solid var(--line);
  border-radius:4px;
  background:#fff;
  color:var(--ink);
}
.field input:focus,.field select:focus{border-color:var(--water)}
.btn{
  width:100%;
  font:inherit;
  font-weight:700;
  font-size:1.02rem;
  padding:15px 18px;
  border:2px solid var(--buoy);
  border-radius:4px;
  background:var(--buoy);
  color:#fff;
  cursor:pointer;
}
.btn:hover{background:#9c3a0b;border-color:#9c3a0b}
.fineprint{margin:12px 0 0;font-size:.85rem;color:var(--mute)}
.sent{
  margin:26px 0 0;
  padding:16px 18px;
  border:2px solid var(--water);
  border-radius:4px;
  color:var(--ink);
  font-weight:600;
}

/* ─── find us ────────────────────────────────────────────────────────── */

.findgrid > div{padding:0 0 22px}
.findgrid h3{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--buoy);
  margin:0 0 8px;
}
.addr{margin:0 0 16px;color:var(--mute);font-size:.97rem}
.addr a{font-family:var(--mono)}
.maplink{font-weight:700}
.ph-inline{
  display:inline-block;
  margin-top:6px;
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--buoy);
  background:#fff;
  border:1px dashed var(--buoy);
  border-radius:3px;
  padding:2px 6px;
}

/* ─── footer ─────────────────────────────────────────────────────────── */

.sitefoot{
  background:var(--ink);
  color:#c4d5d9;
  padding:36px var(--pad) 42px;
  font-size:.92rem;
}
.sitefoot > *{max-width:var(--max);margin-left:auto;margin-right:auto}
.sitefoot p{margin:0 0 12px}
.sitefoot a{color:var(--water-lt)}
.footbrand{
  font-size:1.2rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-.01em;
}
.copy{color:#9db3b9;font-size:.85rem}
.demo{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #2a4e5c;
  color:#a9c0c6;
  font-size:.82rem;
  line-height:1.6;
}
.demo strong{color:var(--buoy-lt)}

/* ─── fixed mobile call bar ──────────────────────────────────────────── */

.callbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--buoy);
  color:#fff;
  text-decoration:none;
  padding:13px 16px;
  box-shadow:0 -3px 14px rgba(10,36,48,.28);
}
.callbar span{
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff0e6;
}
.callbar strong{font-family:var(--mono);font-size:1.05rem}

/* ══════════════════════════════════════════════════════════════════════
   Wider screens. The layout does not become a grid — it stays one column
   and simply gets more air, because the point of the page is the work.
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width:620px){
  body{font-size:18px}
  :root{--pad:32px}
  .overlay h1{font-size:2.6rem}
  .frame{min-height:300px}
  .plate-open .frame-open{min-height:56vh}
  .chapter h2,.block h2{font-size:2.1rem}
  .spec li{padding-left:34px}
}

@media (min-width:900px){
  body{padding-bottom:0}
  .callbar{display:none}

  :root{--max:820px}

  .frame{min-height:420px}
  .plate-open{position:relative}
  .plate-open .frame-open{min-height:74vh;padding:24px 32px}

  /* the identity panel lifts up over the foot of the opening plate */
  .overlay{
    max-width:760px;
    margin:-92px auto 0;
    position:relative;
    z-index:2;
    padding:34px 40px 38px;
    border-top:6px solid var(--buoy);
  }
  .overlay h1{font-size:3rem;max-width:18ch}
  .cta{display:inline-block;min-width:330px}

  .callband{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:34px 40px;
  }
  .callband p{margin:0;font-size:1.24rem}
  .cta-band{flex:0 0 auto;min-width:330px}

  .chapter,.block{padding:64px 40px 52px}
  .plate figcaption{padding:26px 40px 46px}
  .block-tint,.block-dark{padding-left:40px;padding-right:40px}

  .findgrid{display:flex;gap:40px}
  .findgrid > div{flex:1}

  .facts{display:flex;flex-wrap:wrap;gap:0 40px}
  .facts > div{flex:1 1 320px}
  .facts > div:nth-child(2){border-top:2px solid var(--ink)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   Placeholder frames, wide screens.
   A full-bleed empty rectangle reads as a broken image. These carry a
   faint dock silhouette so the frame announces what belongs in it, and
   the shot brief centres rather than hugging one corner.
   ══════════════════════════════════════════════════════════════════════ */

.frame{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='190' viewBox='0 0 420 190'%3E%3Cg fill='none' stroke='%230a2430' stroke-opacity='.13' stroke-width='3'%3E%3Cpath d='M40 150h340M40 150v-34M380 150v-34'/%3E%3Cpath d='M30 116h360'/%3E%3Cpath d='M62 116V78m296 38V78'/%3E%3Cpath d='M20 78l190-40 190 40z' stroke-linejoin='round'/%3E%3Cpath d='M110 150v-34m50 34v-34m50 34v-34m50 34v-34m50 34v-34'/%3E%3C/g%3E%3Cg fill='none' stroke='%230f6d7a' stroke-opacity='.20' stroke-width='2.5'%3E%3Cpath d='M0 166q26-11 52 0t52 0 52 0 52 0 52 0 52 0 52 0 52 0'/%3E%3Cpath d='M0 182q26-11 52 0t52 0 52 0 52 0 52 0 52 0 52 0 52 0'/%3E%3C/g%3E%3C/svg%3E") no-repeat center 58% / 300px auto,
    repeating-linear-gradient(135deg,
      rgba(15,109,122,.07) 0 12px, rgba(15,109,122,0) 12px 24px),
    var(--frame);
}

@media (min-width:900px){
  .frame{
    align-items:center;
    justify-content:center;
    background-size:520px auto, auto, auto;
    padding:40px;
  }
  .frame .ph{
    text-align:left;
    box-shadow:0 2px 22px rgba(10,36,48,.10);
    padding:14px 16px;
  }
  .plate-open .frame-open{align-items:flex-end;justify-content:flex-start}
}

@media (min-width:900px){
  /* keep the shot brief clear of the dock silhouette rather than on top of it */
  .frame{align-items:flex-end;background-position:center 40%}
  .plate-open .frame-open{background-position:center 46%}
}

/* ══════════════════════════════════════════════════════════════════════
   Full-bleed bands: centre the reading column with padding rather than
   auto margins on the children, because several children carry their own
   margin rules at higher specificity and were falling out of alignment.
   ══════════════════════════════════════════════════════════════════════ */

.block-tint > *,.block-dark > *,.sitefoot > *{
  max-width:var(--max);
  margin-left:0;
  margin-right:0;
}
.block-tint,.block-dark,.sitefoot,.callband{
  padding-left:max(var(--pad), calc((100% - var(--max)) / 2));
  padding-right:max(var(--pad), calc((100% - var(--max)) / 2));
}

/* the fact list stays one column at every width — this page has no grid */
@media (min-width:900px){
  .facts{display:block}
  .facts > div{flex:none}
  .facts > div:nth-child(2){border-top:none}
  .block-tint,.block-dark{padding-left:max(40px, calc((100% - var(--max)) / 2));
                          padding-right:max(40px, calc((100% - var(--max)) / 2))}
  .sitefoot,.callband{padding-left:max(40px, calc((100% - var(--max)) / 2));
                      padding-right:max(40px, calc((100% - var(--max)) / 2))}
}