/* Island Service Company — demonstration rebuild by Trueline Web.
   Archetype F (service index). Mobile first. No framework, no JS, no web fonts.

   Palette: a cold page with exactly one warm colour, and that colour is only
   ever used for calling. Pale ice paper, granite dark bands, burnt orange for
   the phone. Deliberately not the navy/teal, warm bone or graphite/brass of the
   other dock demos, and not this business's own teal-on-white Divi theme. */

:root{
  --paper:#eceff1;
  --card:#ffffff;
  --ink:#0f1418;
  --muted:#455158;
  --granite:#232e33;
  --granite-2:#1a2327;
  --on-dark:#eef3f5;
  --on-dark-mute:#c2d0d6;
  --ice:#cbdde4;
  --line:#c3ccd1;
  --call:#a8330d;
  --call-dark:#8c2a0a;
  --call-lt:#f08a55;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --serif:Georgia,"Times New Roman",serif;
}

*,*::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:1.03rem;line-height:1.62;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
a{color:var(--call-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--call);outline-offset:3px;
}
.wrap{width:100%;max-width:64rem;margin:0 auto;padding:0 1.15rem}

/* ---------- element 1: the phone number, above everything ---------- */
.callband{background:var(--call);color:#fff;border-bottom:5px solid var(--call-dark)}
.callband-in{padding:1.05rem 1.15rem 1.15rem;text-align:center}
.callband-lab{
  margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:#ffe6da;
}
.callband-num{
  display:block;margin:.25rem 0 .2rem;color:#fff;text-decoration:none;
  font-weight:800;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(2.05rem,10.5vw,3.15rem);
}
.callband-num:hover,.callband-num:focus{text-decoration:underline}
.callband-sub{margin:0;font-size:.9rem;color:#ffeae2}

/* ---------- masthead ---------- */
.mast{background:var(--granite);color:var(--on-dark);padding:1.6rem 0 2.1rem}
.brandrow{display:flex;align-items:center;gap:.65rem;margin-bottom:1.4rem}
.mark{width:34px;height:34px;flex:0 0 auto}
.brand{
  margin:0;font-family:var(--mono);font-size:.78rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--on-dark);
}
.mast h1{
  margin:0 0 .85rem;font-size:clamp(1.9rem,6.6vw,2.95rem);line-height:1.13;
  letter-spacing:-.018em;font-weight:800;max-width:20ch;
}
.lede{margin:0 0 1.4rem;color:var(--on-dark-mute);font-size:1.05rem;max-width:56ch}

.facts{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.55rem}
.facts li{
  display:flex;flex-direction:column;gap:.05rem;
  border-left:3px solid var(--call-lt);padding:.15rem 0 .15rem .7rem;
}
.facts .k{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.facts .v{font-size:.96rem;color:var(--on-dark);font-weight:600}

.mastcall{margin:0;display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:.85rem 1.15rem;border-radius:3px;line-height:1.25;
  font-size:1rem;
}
.btn-call{background:var(--call-lt);color:#1a0f08;border:2px solid var(--call-lt)}
.btn-call:hover,.btn-call:focus{background:#ffa877;border-color:#ffa877}
.btn-onlight,.chapcall .btn-call,.foot-call .btn-call{}
.chap .btn-call{background:var(--call);color:#fff;border-color:var(--call)}
.chap .btn-call:hover,.chap .btn-call:focus{background:var(--call-dark);border-color:var(--call-dark)}
.btn-ghost{
  background:transparent;color:var(--on-dark);border:2px solid #5d6d75;
}
.btn-ghost:hover,.btn-ghost:focus{border-color:var(--on-dark)}

.tellink{font-weight:700;color:var(--call-dark);text-decoration:underline}
.tellink.light{color:#ffd9c6}

/* ---------- the directory (this is the nav) ---------- */
.dir{background:var(--ice);padding:1.9rem 0 2.1rem;border-bottom:1px solid var(--line)}
.dir h2{margin:0 0 .35rem;font-size:1.42rem;letter-spacing:-.01em}
.dir-note{margin:0 0 1.15rem;color:#33454d;font-size:.93rem;max-width:52ch}
.dirlist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid #a9c2cc;
}
.dirlist li{border-bottom:1px solid #a9c2cc}
.dirlist a{
  display:block;padding:.62rem .2rem;color:#122229;text-decoration:none;
  font-size:.97rem;font-weight:600;
}
.dirlist a::before{content:"\2192\00a0";color:var(--call-dark);font-weight:700}
.dirlist a:hover,.dirlist a:focus{background:#bcd4dd;text-decoration:underline}

/* ---------- chapters ---------- */
.chap{padding:2.4rem 0 2.6rem;border-bottom:1px solid var(--line)}
.chap.alt{background:var(--card)}
.num{
  margin:0 0 .3rem;font-family:var(--mono);font-size:2.1rem;font-weight:700;
  color:var(--call);line-height:1;letter-spacing:-.03em;
}
.chap h2{margin:0 0 .7rem;font-size:clamp(1.5rem,5.4vw,2.05rem);line-height:1.18;letter-spacing:-.015em}
.chap-lede{margin:0 0 1.4rem;color:#2c383e;max-width:62ch}

.plate{margin:0 0 1.4rem}
.plate-img{
  width:100%;aspect-ratio:3/2;background:
    repeating-linear-gradient(135deg,#dae7ec 0 14px,#cfe0e6 14px 28px);
  border:1px solid #a9c2cc;border-radius:3px;
}
.plate figcaption{
  margin-top:.6rem;font-size:.88rem;color:#3a464c;line-height:1.5;max-width:58ch;
}
.chip{
  display:inline-block;background:var(--granite);color:var(--on-dark);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.2rem .45rem;border-radius:2px;
  margin-right:.4rem;vertical-align:.08em;
}

.spec{margin:0 0 1.4rem;padding:.9rem 0 0;border-top:2px solid var(--granite)}
.spec dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:#3f4c53;margin-top:.75rem;
}
.spec dt:first-of-type{margin-top:0}
.spec dd{margin:.15rem 0 0;font-size:.96rem;color:var(--ink)}

.chapcall{margin:0}

/* chapter 04 — the barge, on the dark ground */
.chap.barge{background:var(--granite-2);color:var(--on-dark);border-bottom-color:var(--granite-2)}
.chap.barge h2{color:var(--on-dark)}
.chap.barge .num{color:var(--call-lt)}
.chap.barge .chap-lede{color:var(--on-dark-mute)}
.chap.barge .spec{border-top-color:var(--call-lt)}
.chap.barge .spec dt{color:var(--on-dark-mute)}
.chap.barge .spec dd{color:var(--on-dark)}
.chap.barge .btn-call{background:var(--call-lt);color:#1a0f08;border-color:var(--call-lt)}
.chap.barge .btn-call:hover,.chap.barge .btn-call:focus{background:#ffa877;border-color:#ffa877}

.bargefig{margin:0 0 1.5rem}
.bargesvg{
  display:block;width:100%;height:auto;aspect-ratio:3/2;background:#101a1e;
  border:1px solid #35606e;border-radius:3px;
}
.bargecap{margin:.6rem 0 0;font-size:.88rem;color:var(--on-dark-mute);max-width:52ch}

/* ---------- clients ---------- */
.says{background:var(--paper);padding:2.4rem 0 2.6rem;border-bottom:1px solid var(--line)}
.says h2{margin:0 0 .35rem;font-size:clamp(1.45rem,5.2vw,1.95rem);letter-spacing:-.015em}
.says-note{margin:0 0 1.5rem;color:var(--muted);font-size:.92rem;max-width:56ch}
.says blockquote{
  margin:0 0 1.35rem;max-width:52rem;padding:1.05rem 1.1rem;background:var(--card);
  border-left:5px solid var(--call);border-radius:2px;
}
.says blockquote p{
  margin:0 0 .7rem;font-family:var(--serif);font-style:italic;
  font-size:1.06rem;line-height:1.55;color:#1b2429;
}
.says blockquote footer{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:#3f4c53;
}
.says blockquote footer span{display:block;color:var(--muted);letter-spacing:.1em}

/* ---------- who ---------- */
.who{background:var(--card);padding:2.4rem 0 2.6rem;border-bottom:1px solid var(--line)}
.who h2{margin:0 0 .4rem;font-size:clamp(1.45rem,5.2vw,1.95rem);letter-spacing:-.015em}
.who-lede{margin:0 0 1.5rem;color:#2c383e;max-width:58ch}
.whogrid{display:grid;gap:1.2rem}
.whogrid article{border-top:2px solid var(--granite);padding-top:.85rem}
.whogrid h3{margin:0 0 .4rem;font-size:1.16rem}
.whogrid p{margin:0 0 .7rem;color:#2c383e;font-size:.97rem}
.whogrid p:last-child{margin-bottom:0}

/* ---------- quote ---------- */
.quote{background:var(--granite);color:var(--on-dark);padding:2.4rem 0 2.8rem}
.quote h2{margin:0 0 .4rem;font-size:clamp(1.45rem,5.2vw,1.95rem);letter-spacing:-.015em}
.quote-note{margin:0 0 1.5rem;color:var(--on-dark-mute);max-width:52ch}
.qform{margin:0;max-width:34rem}
.field{margin:0 0 1.05rem}
.field label{
  display:block;margin-bottom:.32rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark);
}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;padding:.7rem .75rem;
  border:2px solid #5d6d75;border-radius:3px;background:#fbfdfd;color:var(--ink);
}
.field textarea{resize:vertical}
.field button{
  font:inherit;font-weight:800;font-size:1.02rem;cursor:pointer;
  background:var(--call-lt);color:#1a0f08;border:2px solid var(--call-lt);
  padding:.85rem 1.4rem;border-radius:3px;width:100%;
}
.field button:hover,.field button:focus{background:#ffa877;border-color:#ffa877}

/* ---------- footer ---------- */
.foot{background:var(--granite-2);color:var(--on-dark);padding:2.2rem 0 2.4rem}
.foot-brand{
  margin:0 0 .9rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.19em;
  text-transform:uppercase;
}
.foot-list{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.42rem}
.foot-list li{font-size:.94rem;color:var(--on-dark-mute)}
.foot-list a{color:#ffd9c6;font-weight:600}
.foot-call{margin:0 0 1.5rem}
.copy{margin:0 0 .9rem;font-size:.85rem;color:var(--on-dark-mute)}
.disc{
  margin:0 0 .55rem;font-size:.78rem;line-height:1.5;color:#9fb2ba;max-width:60ch;
}

/* ---------- wider ---------- */
@media (min-width:640px){
  .facts{grid-template-columns:1fr 1fr;gap:.9rem 1.4rem}
  .dirlist{grid-template-columns:1fr 1fr;column-gap:1.6rem}
  .whogrid{grid-template-columns:1fr 1fr;gap:1.8rem}
  .foot-list{grid-template-columns:1fr 1fr}
  .field button{width:auto}
}

@media (min-width:900px){
  body{font-size:1.06rem}
  .callband-in{
    display:flex;align-items:baseline;justify-content:center;gap:1.1rem;
    flex-wrap:wrap;text-align:left;padding:1.15rem 1.15rem 1.2rem;
  }
  .callband-lab{order:1;flex:0 0 100%;text-align:center}
  .callband-num{order:2;margin:.1rem 0 0}
  .callband-sub{order:3}
  .mast{padding:2.4rem 0 3rem}
  .facts{grid-template-columns:repeat(4,1fr)}
  .dirlist{grid-template-columns:1fr 1fr 1fr}
  .chap{padding:3.4rem 0 3.6rem}
  .chap .wrap{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:2.6rem;align-items:start;
  }
  .num{grid-column:1;grid-row:1}
  .chap h2{grid-column:1;grid-row:2}
  .chap-lede{grid-column:1;grid-row:3;margin-bottom:1.6rem}
  .spec{grid-column:1;grid-row:4}
  .chapcall{grid-column:1;grid-row:5}
  .plate,.bargefig{grid-column:2;grid-row:1 / span 5;margin-bottom:0}
  .says blockquote p{font-size:1.14rem}
  .quote .wrap,.foot .wrap{max-width:64rem}
}

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