/* =========================================================================
   Custom Cabinet Works, Canton NC — demonstration rebuild for Trueline Web
   Archetype F (service index). Mobile first. No framework, no build step,
   no JavaScript, no web fonts, zero <img> tags.

   Palette is deliberately light and cool-green: the only other cabinet /
   remodelling build in this directory (tt-cabinets, Spokane Valley) is a
   dark warm-black page with maple and oxblood, so this one had to be the
   opposite ground as well as the opposite shape.

     paper   #f4f1ec  warm chalk
     plate   #ffffff  frames and the form
     alt     #eae6df  alternating service bands
     ink     #191a18  body text            (14.6:1 on paper)
     muted   #4d514c  secondary text        (7.0:1 on paper)
     green   #14524c  accent, all links     (7.8:1 on paper)
     ochre   #8a5a1a  placeholder chrome    (5.2:1 on paper)

   Type: Georgia for every heading and the h1 (craft, and unlike the
   no-serif tt-cabinets build); system sans for body; ui-monospace for
   every index numeral, label, spec item and figure.
   ========================================================================= */

:root{
  --paper:#f4f1ec;
  --plate:#ffffff;
  --alt:#eae6df;
  --ink:#191a18;
  --muted:#4d514c;
  --line:#d5cec4;
  --line-2:#bfb6a8;
  --green:#14524c;
  --green-dk:#0d3a35;
  --ochre:#8a5a1a;
  --serif:Georgia,"Times New Roman",times,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1060px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

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

a{color:var(--green);text-underline-offset:2px;}
a:hover{color:var(--green-dk);}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.16;margin:0 0 .6rem;}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--green);color:#fff;
  padding:.75rem 1.1rem;font-weight:700;text-decoration:none;
}
.skip:focus{left:0;}

/* ------------------------------------------------------------- MASTHEAD */

.masthead{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.masthead-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  padding-top:.6rem;
  padding-bottom:.6rem;
}

.brand{margin:0;display:flex;flex-direction:column;min-width:0;}

.brand-name{
  font-family:var(--sans);
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:lowercase;
  line-height:1.2;
}

.brand-sub{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.18rem;
}

.call{
  flex:0 0 auto;
  background:var(--green);
  color:#fff;
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.03em;
  text-decoration:none;
  padding:.62rem .85rem;
  border-radius:2px;
  white-space:nowrap;
}
.call:hover{background:var(--green-dk);color:#fff;}

@media (min-width:620px){
  .brand-name{font-size:1.12rem;}
  .brand-sub{font-size:.65rem;}
  .call{font-size:.92rem;padding:.7rem 1.15rem;}
}

/* ---------------------------------------------------------- INDEX (NAV) */

.index{
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid var(--ink);
}

.index ol{
  list-style:none;
  margin:0;
  padding:.55rem 0;
  display:flex;
  flex-wrap:wrap;
  gap:.1rem 1.15rem;
  counter-reset:none;
}

.index li{margin:0;}

.index a{
  display:inline-block;
  color:#e7e2d9;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.34rem 0;
}
.index a:hover{color:#fff;text-decoration:underline;}

.index b{color:#c4a86a;font-weight:700;margin-right:.4rem;}

@media (min-width:620px){
  .index a{font-size:.76rem;}
  .index ol{gap:.1rem 1.8rem;}
}

/* -------------------------------------------------------------- OPENING */

.opening{
  padding:2.4rem 0 2.2rem;
  border-bottom:1px solid var(--line);
}

.opening h1{
  font-size:clamp(1.85rem,7vw,3.05rem);
  max-width:19ch;
  margin-bottom:1rem;
}

.lede{
  font-size:1.06rem;
  color:var(--muted);
  max-width:62ch;
  margin:0 0 1.4rem;
}

.opening-contact{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:0 0 1.7rem;
}

.btn{
  display:inline-block;
  background:var(--green);
  color:#fff;
  font-family:var(--mono);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  padding:.78rem 1.25rem;
  border-radius:2px;
}
.btn:hover{background:var(--green-dk);color:#fff;}

.btn-quiet{
  background:transparent;
  color:var(--green);
  border:1px solid var(--line-2);
  font-size:.8rem;
  word-break:break-word;
}
.btn-quiet:hover{background:var(--alt);color:var(--green-dk);}

.facts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.55rem;
  border-top:1px solid var(--line);
  padding-top:1.1rem;
}

.facts li{
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.5;
  color:var(--ink);
}

.facts b{
  display:block;
  font-size:.63rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin-bottom:.12rem;
}

@media (min-width:620px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.6rem;}
}
@media (min-width:900px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ------------------------------------------------------------- SERVICES */

.service{
  padding:2.3rem 0;
  border-bottom:1px solid var(--line);
}

.service.alt{background:var(--alt);}

.service-in{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.5rem;
}

.num{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--ochre);
  margin:0 0 .35rem;
}

.num-solo{margin-bottom:.45rem;}

.service-body h2{font-size:clamp(1.5rem,5.2vw,2.1rem);margin-bottom:.75rem;}
.service-body p{margin:0 0 1rem;max-width:60ch;}

.sub{
  font-size:1.06rem;
  margin:1.8rem 0 .45rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line-2);
}

.firms-note{font-size:.94rem;color:var(--muted);}

.ticks{
  list-style:none;
  margin:0 0 1.15rem;
  padding:0;
  display:grid;
  gap:.42rem;
}

.ticks li{
  position:relative;
  padding-left:1.5rem;
  font-size:.98rem;
}

.ticks li::before{
  content:"";
  position:absolute;
  left:.15rem;top:.42em;
  width:.36rem;height:.68rem;
  border-right:2px solid var(--green);
  border-bottom:2px solid var(--green);
  transform:rotate(42deg);
}

.spec{
  list-style:none;
  margin:0 0 1.15rem;
  padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--line-2);
}

.spec li{
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.02em;
  padding:.52rem 0;
  border-bottom:1px solid var(--line-2);
}

.firms{
  list-style:none;
  margin:0 0 1.2rem;
  padding:0;
  display:grid;
  gap:.3rem .9rem;
}

.firms li{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--ink);
  padding-left:.85rem;
  position:relative;
}

.firms li::before{
  content:"—";
  position:absolute;left:0;top:0;
  color:var(--ochre);
}

@media (min-width:520px){
  .spec{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem;}
  .firms{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.inline-call{
  display:inline-block;
  font-family:var(--mono);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--green);
  text-decoration:none;
  border-bottom:2px solid var(--ochre);
  padding-bottom:.14rem;
}
.inline-call:hover{color:var(--green-dk);border-bottom-color:var(--green);}

/* ------------------------------------------------- PLACEHOLDER PHOTO PLATES */

.plate{margin:0;}

.ph{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:.5rem;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(138,90,26,.055) 0 10px,
      rgba(138,90,26,0) 10px 20px
    ),
    var(--plate);
  border:2px dashed var(--line-2);
  padding:1rem;
  min-height:230px;
}

.ph-tall{min-height:300px;}

.chip{
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:#fff;
  background:var(--ochre);
  padding:.28rem .55rem;
  border-radius:2px;
}

.brief{
  font-family:var(--mono);
  font-size:.74rem;
  line-height:1.5;
  color:var(--muted);
  max-width:34ch;
}

.plate figcaption{
  font-size:.82rem;
  line-height:1.55;
  color:var(--muted);
  margin-top:.6rem;
  max-width:44ch;
}

@media (min-width:860px){
  .service-in{
    grid-template-columns:minmax(0,1fr) minmax(0,340px);
    grid-template-areas:
      "num   plate"
      "body  plate";
    column-gap:2.6rem;
    align-items:start;
  }
  .num{grid-area:num;}
  .service-body{grid-area:body;}
  .plate{grid-area:plate;position:sticky;top:5.2rem;}
  .ph-tall{min-height:380px;}
}

/* ------------------------------------------------------------------ FAQ */

.faq{
  padding:2.4rem 0;
  background:var(--ink);
  color:#eee9e0;
  border-bottom:1px solid var(--ink);
}

.faq .num{color:#c4a86a;}
.faq h2{font-size:clamp(1.5rem,5.2vw,2.1rem);color:#fff;}

.faq-note{
  color:#c9c2b6;
  font-size:.95rem;
  margin:0 0 1.8rem;
  max-width:52ch;
}

.qa{
  border-top:1px solid #3b3a36;
  padding:1.15rem 0 .4rem;
}

.qa h3{
  font-size:1.08rem;
  color:#e5c98a;
  margin-bottom:.45rem;
  max-width:44ch;
}

.qa p{margin:0 0 .9rem;max-width:64ch;color:#e3ded4;}

@media (min-width:860px){
  .qa{
    display:grid;
    grid-template-columns:minmax(0,20rem) minmax(0,1fr);
    column-gap:2.4rem;
  }
  .qa h3{margin-bottom:0;}
}

/* -------------------------------------------------------------- CONTACT */

.contact{padding:2.4rem 0;}

.contact-in{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2rem;
}

.contact-side h2{font-size:clamp(1.5rem,5.2vw,2.1rem);}
.contact-side p{max-width:46ch;}

.contact-lines{
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.85;
  margin:0 0 1.1rem;
}

.maplink{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.form{
  background:var(--plate);
  border:1px solid var(--line);
  border-top:4px solid var(--green);
  padding:1.35rem 1.15rem 1.1rem;
}

.field{margin:0 0 1rem;}

.field label{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.35rem;
}

.field input,
.field textarea{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:2px;
  padding:.7rem .75rem;
}

.field textarea{resize:vertical;}

.field input:focus,
.field textarea:focus{
  outline:3px solid var(--ochre);
  outline-offset:1px;
  background:#fff;
}

.form button{
  width:100%;
  font-family:var(--mono);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.05em;
  color:#fff;
  background:var(--green);
  border:0;
  border-radius:2px;
  padding:.85rem 1rem;
  cursor:pointer;
}
.form button:hover{background:var(--green-dk);}

.form-note{
  font-size:.79rem;
  line-height:1.55;
  color:var(--muted);
  margin:.8rem 0 0;
  padding-top:.75rem;
  border-top:1px solid var(--line);
}

@media (min-width:860px){
  .contact-in{
    grid-template-columns:minmax(0,1fr) minmax(0,26rem);
    column-gap:2.8rem;
    align-items:start;
  }
  .form{padding:1.6rem 1.5rem 1.3rem;}
}

/* --------------------------------------------------------------- FOOTER */

.foot{
  background:var(--ink);
  color:#d8d2c7;
  padding:2rem 0 2.3rem;
}

.foot a{color:#e5c98a;}
.foot a:hover{color:#fff;}

.foot-line{
  font-size:.9rem;
  line-height:1.8;
  margin:0 0 1.1rem;
}

.foot strong{color:#fff;}

.disclaimer{
  font-size:.79rem;
  line-height:1.6;
  color:#bab3a6;
  max-width:70ch;
  margin:0 0 1rem;
  padding-top:1rem;
  border-top:1px solid #3b3a36;
}

.copyright{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a49d90;
  margin:0;
}