/* ══════════════════════════════════════════════════════════════════════════
   ROUGH WATER DOCK — Sunrise Beach / Lake of the Ozarks, MO
   Archetype D, before-and-after led. Mobile-first. No framework, no build
   step, no JavaScript anywhere in the document.

   Palette: warm bone paper, warm near-black ink, and Rough Water's own logo
   red used for one thing only — actions and job numbers. Deliberately WARM
   and light, because the other dock demo in this market (sos-dock-barge) is
   cool navy / teal / buoy-orange, and because Rough Water's own brand mark is
   a red script on white.

   Type: heavy system sans at HIGH scale contrast (h1 up to 3.35rem) with
   Georgia italic reserved for the company motto, and ui-monospace for every
   number and spec key.

   NOTHING on this page is fixed or sticky. The phone number recurs as an
   inline call band after every single job instead — six of them, plus the
   masthead button, plus the form, plus the footer.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:    #f5f1e9;   /* bone                                            */
  --paper-2:  #ece5d8;   /* tinted band, alternating jobs                   */
  --ink:      #1a1613;   /* warm near-black                                 */
  --ink-2:    #241f1a;   /* raised dark ground                              */
  --mute:     #5c534a;
  --red:      #b4231f;   /* Rough Water red — actions only, on light ground */
  --red-lt:   #f0736a;   /* the same role on a dark ground                  */
  --line:     #d3c8b4;
  --frame:    #ddd4c4;   /* placeholder frame fill                          */
  --frame-ink:#3b342c;
  --steel:    #3d4b52;   /* galvanised — before-side labels                 */

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

  --pad: 18px;
  --max: 1080px;
}

*,*::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.6;
  overflow-x:hidden;
}

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

a{ color:var(--red) }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
}

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

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ─── masthead ────────────────────────────────────────────────────────── */

.masthead{
  background:var(--ink);
  color:var(--paper);
  padding:16px 0 20px;
  border-bottom:5px solid var(--red);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--paper);
}
.mark{ width:42px; height:42px; flex:0 0 auto }
.brandtext b{
  display:block;
  font-size:1.22rem;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.1;
}
.brandtext i{
  display:block;
  font-style:normal;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#c9bda9;
  margin-top:2px;
}

.oneline{
  margin:15px 0 14px;
  font-size:1.02rem;
  line-height:1.45;
  color:#e6ddcc;
  max-width:34em;
}
.oneline strong{ color:#fff }

.callbtn{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 12px;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  padding:13px 16px;
  border-radius:3px;
}
.callbtn-k{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.callbtn-n{
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.callbtn:hover{ background:#96140f }

.hours{
  margin:11px 0 0;
  font-size:.86rem;
  color:#c9bda9;
}
.hours a{ color:#f0e6d4 }

.pairnav{
  margin-top:18px;
  border-top:1px solid #3a332c;
  padding-top:13px;
}
.pairnav-k{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#a29683;
  margin-bottom:8px;
}
.pairnav ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px 9px;
}
.pairnav a{
  display:block;
  font-family:var(--mono);
  font-size:.78rem;
  color:#f0e6d4;
  text-decoration:none;
  border:1px solid #4a4038;
  border-radius:2px;
  padding:5px 9px;
}
.pairnav a:hover{ border-color:var(--red-lt); color:var(--red-lt) }

/* ─── intro ───────────────────────────────────────────────────────────── */

.intro{ padding:38px 0 4px }

h1{
  font-size:clamp(2.05rem, 8.2vw, 3.35rem);
  font-weight:850;
  max-width:14em;
}

.lede{
  margin:16px 0 0;
  font-size:1.09rem;
  line-height:1.55;
  max-width:36em;
}
.lede em{
  font-family:var(--serif);
  font-style:italic;
  color:var(--red);
  font-weight:700;
}

.creds{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.creds li{
  font-size:.82rem;
  line-height:1.3;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:2px;
  padding:7px 11px;
  color:var(--frame-ink);
}
.creds b{ color:var(--ink) }

/* ─── a job ───────────────────────────────────────────────────────────── */

.job{ padding:44px 0 40px; border-top:1px solid var(--line) }
.job:first-of-type{ border-top:0 }
.job-tint{ background:var(--paper-2); border-top-color:transparent }

.jobno{
  margin:0 0 8px;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  font-weight:700;
}

.job h2{
  font-size:clamp(1.5rem, 5.6vw, 2.15rem);
  font-weight:800;
  max-width:17em;
}

.jobsum{
  margin:13px 0 0;
  max-width:38em;
  color:var(--frame-ink);
}

/* the pair ------------------------------------------------------------- */

.pair{
  margin:24px 0 0;
  padding:0 var(--pad);
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  display:grid;
  gap:16px;
}

.side{ margin:0 }

.frame{
  position:relative;
  border:2px dashed var(--steel);
  border-radius:3px;
  background:
    repeating-linear-gradient(135deg,
      rgba(61,75,82,.055) 0 11px, rgba(61,75,82,0) 11px 22px),
    var(--frame);
  min-height:196px;
  padding:40px 15px 16px;
}
.side-after .frame{ border-color:var(--red); border-style:solid }

.phlabel{
  position:absolute;
  top:0; left:0;
  margin:0;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#fff;
  background:var(--steel);
  padding:5px 11px;
  border-radius:0 0 3px 0;
}
.side-after .phlabel{ background:var(--red) }

.ph{
  margin:0;
  font-size:.83rem;
  line-height:1.48;
  color:var(--frame-ink);
}
.ph b{ color:var(--ink) }
.ph i{ font-style:italic }

.side figcaption{
  margin-top:9px;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
}
.side-before figcaption::before{
  content:"Before — ";
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--steel);
  font-weight:700;
}
.side-after figcaption::before{
  content:"After — ";
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--red);
  font-weight:700;
}

/* spec list ------------------------------------------------------------ */

.spec{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.spec li{
  display:grid;
  gap:2px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.spec b{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--steel);
}
.spec span{ font-size:.95rem; line-height:1.5 }

/* inline call band ----------------------------------------------------- */

.inlinecall{
  display:block;
  margin:24px 0 0;
  background:var(--ink);
  color:#f0e6d4;
  text-decoration:none;
  text-align:center;
  padding:15px 14px;
  border-radius:3px;
  font-size:.95rem;
  line-height:1.35;
}
.inlinecall strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.inlinecall:hover{ background:#000 }

/* ─── why ─────────────────────────────────────────────────────────────── */

.why{
  background:var(--ink-2);
  color:#efe6d6;
  padding:44px 0;
}
.why h2{
  font-size:clamp(1.5rem, 5.6vw, 2.15rem);
  font-weight:800;
  color:#fff;
}
.whygrid{ display:grid; gap:26px; margin-top:24px }
.whygrid h3{
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--red-lt);
}
.whygrid p{ margin:9px 0 0; font-size:.97rem; line-height:1.55 }
.whygrid b{ color:#fff }

/* ─── quote form ──────────────────────────────────────────────────────── */

.quote{ padding:46px 0; border-top:1px solid var(--line) }
.quote h2{
  font-size:clamp(1.5rem, 5.6vw, 2.15rem);
  font-weight:800;
  max-width:15em;
}
.qsub{ margin:12px 0 24px; max-width:34em; color:var(--frame-ink) }

.qform{ max-width:34rem }
.field{ margin:0 0 16px }
.field label{
  display:block;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel);
  font-weight:700;
  margin-bottom:6px;
}
.field label .eg{
  display:block;
  margin-top:3px;
  font-family:inherit;
  font-size:.9rem;
  letter-spacing:normal;
  text-transform:none;
  font-weight:400;
  color:var(--frame-ink);
}
.field input,.field textarea{
  width:100%;
  font:inherit;
  font-size:1.02rem;
  color:var(--ink);
  background:#fffdf8;
  border:1.5px solid var(--line);
  border-radius:3px;
  padding:11px 12px;
}
.field textarea{ resize:vertical }
.field input::placeholder,.field textarea::placeholder{ color:#6e655a }

.field-sub{ display:grid; gap:10px }
.qform button{
  font:inherit;
  font-weight:800;
  font-size:1.06rem;
  color:#fff;
  background:var(--red);
  border:0;
  border-radius:3px;
  padding:14px 22px;
  cursor:pointer;
  justify-self:start;
}
.qform button:hover{ background:#96140f }
.finenote{ font-size:.85rem; color:var(--mute) }

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

.find{ background:var(--paper-2); padding:44px 0 48px }
.find h2{
  font-size:clamp(1.5rem, 5.6vw, 2.15rem);
  font-weight:800;
}
.findgrid{ display:grid; gap:28px; margin-top:24px }
.findgrid h3{
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:7px;
}
.findgrid h3 + h3{ margin-top:18px }
.findgrid p{ margin:0 0 10px; font-size:.97rem; line-height:1.55 }
.addr{ font-family:var(--mono); font-size:.95rem !important; line-height:1.45 }
.warn{
  font-size:.87rem !important;
  border-left:3px solid var(--red);
  padding-left:10px;
  color:var(--frame-ink);
}
.maplink{ font-weight:700 }

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

.foot{
  background:var(--ink);
  color:#c9bda9;
  padding:34px 0 40px;
  font-size:.88rem;
  line-height:1.55;
}
.foot p{ margin:0 0 12px; max-width:52em }
.foot a{ color:#f0e6d4 }
.footbrand{ font-size:1.02rem; color:#efe6d6 }
.footbrand b{ color:#fff; font-weight:800 }
.footbrand i{ font-family:var(--serif); color:var(--red-lt) }
.copy{ color:#a29683 }
.demo{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #3a332c;
  font-size:.8rem;
  color:#9a8e7c;
}

/* ══════════════════════════════════════════════════════════════════════
   wider than a phone
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width:560px){
  .masthead .wrap{ position:relative }
  .callbtn{ display:inline-flex }
  .whygrid,.findgrid{ grid-template-columns:1fr 1fr; gap:26px 34px }
}

@media (min-width:860px){
  :root{ --pad:28px }
  body{ font-size:17.5px }

  .masthead{ padding:22px 0 24px }
  .brandtext b{ font-size:1.4rem }
  .oneline{ font-size:1.12rem; margin:18px 0 16px }

  /* the pair goes side by side, with a cut line between the two frames */
  .pair{
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:start;
  }
  .side-before{ padding-right:22px }
  .side-after{ padding-left:22px; border-left:1px dashed var(--steel) }
  .frame{ min-height:250px }

  .spec{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:34px;
    border-top:0;
  }
  .spec li{ border-top:1px solid var(--line); border-bottom:0 }

  .inlinecall{
    display:inline-block;
    text-align:left;
    padding:14px 26px;
  }
  .inlinecall strong{ display:inline; margin-left:8px; font-size:1.2rem }

  .whygrid{ grid-template-columns:repeat(2,1fr); gap:32px 40px }
  .findgrid{ grid-template-columns:repeat(3,1fr); gap:36px }

  .job{ padding:58px 0 54px }
  .intro{ padding:52px 0 10px }
}

@media (min-width:1100px){
  .whygrid{ grid-template-columns:repeat(4,1fr) }
}

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