/* Diamond Landscape & Hardscape LLC — demonstration site
   Archetype F: numbered service index ordered by season. No hero image.
   Palette: glacier blue + quartz greys on a light ground. */

:root{
  --paper:#FBFBFA;
  --band:#ECEFF1;
  --band-2:#E3E8EB;
  --line:#D3DADE;
  --ink:#171B1E;
  --ink-soft:#454E54;
  --glacier:#0E4C7A;
  --glacier-deep:#08334F;
  --glacier-wash:#E7F0F6;
  --white:#FFFFFF;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --maxw:70rem;
}

*,*::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;
}
img,svg{max-width:100%;}
a{color:var(--glacier);}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 1.15rem;}

:focus-visible{
  outline:3px solid var(--glacier);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--glacier);color:var(--white);
  padding:.7rem 1rem;z-index:20;text-decoration:none;
}
.skip:focus{left:0;}

/* ---------- masthead ---------- */
.masthead{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:.85rem 0;
}
.masthead-in{display:flex;align-items:center;gap:.65rem;}
.brandmark{color:var(--glacier);display:flex;flex:none;}
.brandname{
  margin:0;
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.25;
  letter-spacing:.005em;
}
.brandname span{
  display:inline-block;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  vertical-align:.18em;
  margin-left:.15rem;
}

/* ---------- call card: first screen ---------- */
.callcard{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:1.9rem 0 2.1rem;
}
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.72rem;
  line-height:1.24;
  letter-spacing:-.012em;
  margin:0 0 .7rem;
  max-width:22ch;
}
h1 em{font-style:normal;color:var(--glacier);}
.lede{
  margin:0 0 1.3rem;
  color:var(--ink-soft);
  font-size:1rem;
  max-width:46ch;
}

.bigcall{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  background:var(--glacier);
  color:var(--white);
  text-decoration:none;
  padding:.9rem 1.15rem;
  border-radius:3px;
  border-bottom:4px solid var(--glacier-deep);
}
.bigcall-k{
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.92;
}
.bigcall-n{
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.005em;
  line-height:1.15;
}
.bigcall:hover{background:var(--glacier-deep);}

.facts{
  list-style:none;
  margin:1.3rem 0 0;
  padding:0;
  display:grid;
  gap:.75rem;
  border-top:1px solid var(--line);
  padding-top:1.1rem;
}
.facts li{display:flex;flex-direction:column;}
.facts strong{font-size:.95rem;}
.facts span{font-size:.85rem;color:var(--ink-soft);}

.orwrite{
  margin:1.1rem 0 0;
  font-size:.88rem;
  color:var(--ink-soft);
  word-break:break-word;
}

/* ---------- season strip = the only nav ---------- */
.seasons{
  background:var(--glacier-deep);
  color:var(--white);
  padding:1rem 0;
}
.seasons-k{
  display:block;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#B9CBD8;
  margin-bottom:.6rem;
}
.seasons ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
}
.seasons a{
  color:var(--white);
  text-decoration:none;
  font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:1px;
}
.seasons a span{color:#B9CBD8;margin-left:.2rem;}
.seasons a:hover{border-bottom-color:var(--white);}

/* ---------- seasons ---------- */
.season{padding:2.5rem 0 1rem;}
.season.alt{background:var(--band);border-block:1px solid var(--line);}
.season-head{margin-bottom:1.5rem;}
.season-k{
  margin:0 0 .35rem;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--glacier);
  font-weight:700;
}
.season h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.85rem;
  line-height:1.15;
  margin:0 0 .6rem;
  letter-spacing:-.01em;
}
.season-lede{margin:0;color:var(--ink-soft);max-width:56ch;font-size:.97rem;}

/* placeholder frames */
.frame{margin:0 0 1.9rem;}
.ph{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  aspect-ratio:16/9;
  background:
    repeating-linear-gradient(135deg,var(--band-2) 0 12px,transparent 12px 24px),
    var(--glacier-wash);
  border:2px dashed #9FB3C0;
  border-radius:3px;
  text-align:center;
  padding:1rem;
}
.season.alt .ph{background:
    repeating-linear-gradient(135deg,#DCE3E7 0 12px,transparent 12px 24px),
    var(--glacier-wash);}
.ph-tag{
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--glacier-deep);
}
.ph-note{font-size:.85rem;color:var(--ink-soft);}
.frame figcaption{
  margin-top:.6rem;
  font-size:.82rem;
  color:var(--ink-soft);
  max-width:52ch;
}

/* ---------- the index entries ---------- */
.svc{
  border-top:1px solid var(--line);
  padding:1.5rem 0;
}
.svc-id{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.55rem;}
.svc-num{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--glacier);
  line-height:1;
  flex:none;
}
.svc h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.3rem;
  line-height:1.22;
  margin:0;
  letter-spacing:-.005em;
}
.svc-body p{margin:0 0 .9rem;max-width:62ch;}
.svc-list{
  list-style:none;
  margin:0 0 1.1rem;
  padding:0;
  border-left:3px solid var(--glacier-wash);
}
.svc-list li{
  position:relative;
  padding:.28rem 0 .28rem 1rem;
  font-size:.93rem;
  color:var(--ink-soft);
}
.svc-list li::before{
  content:"";
  position:absolute;
  left:0;top:1.05em;
  width:.42rem;height:1px;
  background:var(--glacier);
}
.svc-call{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.15rem .5rem;
  background:var(--white);
  border:1px solid var(--glacier);
  border-bottom-width:3px;
  color:var(--glacier);
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  padding:.6rem .95rem;
  border-radius:3px;
}
.season.alt .svc-call{background:var(--white);}
.svc-call span{font-weight:400;color:var(--ink-soft);}
.svc-call:hover{background:var(--glacier);color:var(--white);}
.svc-call:hover span{color:var(--white);}

/* ---------- area + hours ---------- */
.area{
  background:var(--glacier-wash);
  border-block:1px solid var(--line);
  padding:2.4rem 0;
  margin-top:2rem;
}
.area h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.6rem;
  margin:0 0 .5rem;
}
.area p{margin:0 0 .85rem;color:var(--ink-soft);max-width:50ch;}
.area-list{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ink) !important;
}
.area-addr{font-size:.92rem;}
.hours{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:1.15rem 1.25rem;
}
.hours h3{
  margin:0 0 .7rem;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.hours dl{
  margin:0 0 1rem;
  display:grid;
  grid-template-columns:1fr auto;
  gap:.3rem .8rem;
  font-size:.93rem;
}
.hours dt{color:var(--ink-soft);}
.hours dd{margin:0;font-weight:700;text-align:right;}
.hours-call{
  display:block;
  text-align:center;
  background:var(--glacier);
  color:var(--white);
  text-decoration:none;
  font-weight:700;
  padding:.7rem;
  border-radius:3px;
}
.hours-call:hover{background:var(--glacier-deep);}

/* ---------- quote ---------- */
.quote{padding:2.5rem 0 3rem;}
.quote h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.6rem;
  margin:0 0 .6rem;
}
.quote-say p{color:var(--ink-soft);margin:0 0 1.1rem;max-width:48ch;}
.quote-call{
  display:inline-flex;
  flex-direction:column;
  background:var(--glacier);
  color:var(--white);
  text-decoration:none;
  padding:.75rem 1.15rem;
  border-radius:3px;
  border-bottom:4px solid var(--glacier-deep);
}
.quote-call span{
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
}
.quote-call strong{font-size:1.3rem;line-height:1.2;}
.quote-call:hover{background:var(--glacier-deep);}
.quote-mail{margin:.9rem 0 1.8rem !important;font-size:.9rem;word-break:break-word;}

.qform{
  background:var(--white);
  border:1px solid var(--line);
  border-top:4px solid var(--glacier);
  border-radius:3px;
  padding:1.3rem 1.2rem 1.4rem;
}
.field{margin:0 0 1rem;display:flex;flex-direction:column;gap:.35rem;}
.field label{font-size:.8rem;font-weight:700;letter-spacing:.03em;}
.field input,.field textarea{
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid #A9B4BA;
  border-radius:3px;
  padding:.6rem .7rem;
  width:100%;
}
.field textarea{resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:#5A646A;}
.qform button{
  font:inherit;
  font-weight:700;
  font-size:1rem;
  width:100%;
  background:var(--glacier);
  color:var(--white);
  border:0;
  border-bottom:4px solid var(--glacier-deep);
  border-radius:3px;
  padding:.8rem;
  cursor:pointer;
}
.qform button:hover{background:var(--glacier-deep);}
.qform-note{margin:.8rem 0 0;font-size:.82rem;color:var(--ink-soft);}

/* ---------- footer ---------- */
.foot{
  background:var(--glacier-deep);
  color:var(--white);
  padding:2.2rem 0 1.5rem;
}
.foot a{color:#DCE9F1;}
.foot-in{display:grid;gap:1.7rem;}
.foot .brandmark{color:#B9CBD8;margin-bottom:.5rem;}
.foot-name{
  font-family:var(--serif);
  font-size:1.05rem;
  margin:0 0 .4rem;
}
.foot-addr{margin:0;font-size:.9rem;color:#B9CBD8;line-height:1.5;}
.foot-contact p{margin:0 0 .5rem;font-size:.92rem;word-break:break-word;}
.foot-tel{
  font-size:1.35rem;
  font-weight:700;
  color:var(--white) !important;
  text-decoration:none;
  border-bottom:2px solid #4E7E9E;
}
.foot-tel:hover{border-bottom-color:var(--white);}
.foot-hours{color:#B9CBD8 !important;}
.foot-k{
  margin:0 0 .5rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:#B9CBD8;
}
.foot-nav ul{list-style:none;margin:0;padding:0;}
.foot-nav li{margin-bottom:.28rem;}
.foot-nav a{font-size:.9rem;}
.foot-legal{
  border-top:1px solid #22506E;
  margin-top:1.8rem;
  padding-top:1.1rem;
}
.foot-legal p{margin:0 0 .45rem;font-size:.8rem;color:#B9CBD8;}
.demo{color:#A8BECD !important;}

/* ---------- wider screens ---------- */
@media (min-width:44rem){
  body{font-size:18px;}
  h1{font-size:2.5rem;max-width:19ch;}
  .lede{font-size:1.08rem;}
  .callcard{padding:3rem 0 3.2rem;}
  .callcard .wrap{display:grid;grid-template-columns:1.25fr .85fr;gap:0 3rem;align-items:start;}
  .callcard h1{grid-column:1;}
  .callcard .lede{grid-column:1;margin-bottom:0;}
  .callcard .bigcall{grid-column:2;grid-row:1 / span 2;justify-self:stretch;align-self:stretch;justify-content:center;padding:1.5rem;}
  .bigcall-n{font-size:2.05rem;}
  .callcard .facts{grid-column:1 / -1;margin-top:2rem;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
  .callcard .orwrite{grid-column:1 / -1;}
  .seasons-in{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;}
  .seasons-k{margin-bottom:0;}
  .season{padding:3.6rem 0 1.6rem;}
  .season h2{font-size:2.4rem;}
  .season-head{display:grid;grid-template-columns:1fr 1.3fr;gap:0 3rem;align-items:end;margin-bottom:2rem;}
  .season-head .season-k{grid-column:1;}
  .season-head h2{grid-column:1;margin:0;}
  .season-lede{grid-column:2;grid-row:1 / span 2;}
  .frame{
    display:grid;
    grid-template-columns:1fr 1.9fr;
    gap:0 3rem;
    margin-bottom:2.8rem;
  }
  .frame .ph{grid-column:2;aspect-ratio:16/9;}
  .frame figcaption{grid-column:2;margin-top:.7rem;}
  .svc{
    display:grid;
    grid-template-columns:1fr 1.9fr;
    gap:0 3rem;
    padding:2rem 0;
  }
  .svc-id{
    display:block;
    position:sticky;
    top:1.5rem;
    margin-bottom:0;
    align-self:start;
  }
  .svc-num{display:block;font-size:2.1rem;margin-bottom:.2rem;}
  .svc h3{font-size:1.5rem;}
  .area-in{display:grid;grid-template-columns:1.4fr .8fr;gap:3rem;align-items:start;}
  .area h2{font-size:2rem;}
  .quote-in{display:grid;grid-template-columns:1fr 1.05fr;gap:3.5rem;align-items:start;}
  .quote h2{font-size:2rem;}
  .qform{padding:1.8rem 1.7rem 1.9rem;}
  .qform button{width:auto;padding:.8rem 2.2rem;}
  .foot-in{grid-template-columns:1.1fr 1fr .9fr;gap:2.5rem;}
  .foot-legal{display:flex;flex-direction:column;}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}