/* =========================================================================
   T&T Cabinets and Remodeling — demonstration rebuild
   Archetype C (split rail). Mobile first. No framework, no build step, no JS.
   Palette: warm near-black ground, maple label colour, oxblood for calls.
   ========================================================================= */

:root{
  --ground:#1a1715;      /* page ground, warm near-black */
  --rail:#12100e;        /* rail + footer, one step darker */
  --panel:#22201d;       /* cards, frames */
  --panel-2:#262320;     /* filled placeholder frames */
  --line:#3a352f;        /* hairlines */
  --paper:#f3efe8;       /* body text */
  --muted:#b3aa9e;       /* secondary text  (7.5:1 on ground) */
  --maple:#e0c08b;       /* labels, numerals, frame chrome (9.9:1) */
  --call:#b8402f;        /* oxblood — call actions only */
  --call-hi:#f0866a;     /* oxblood, lightened, for text on dark (6.8:1) */
  --oncall:#fff8f4;      /* text on oxblood (5.5:1) */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:760px;
}

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

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

body{
  margin:0;
  background:var(--ground);
  color:var(--paper);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  overflow-x:hidden;
  padding-bottom:84px;           /* clears the fixed call bar */
}

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

a{color:var(--maple);}
a:hover{color:var(--paper);}

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

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--maple);color:#1a1715;
  padding:.7rem 1rem;font-weight:700;z-index:99;
}
.skip:focus{left:0;}

/* ---------------------------------------------------------------- RAIL */

.rail{
  background:var(--rail);
  border-bottom:1px solid var(--line);
}
.rail-in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:1.15rem 1.15rem 1.4rem;
}

.ident{display:flex;align-items:center;gap:.85rem;}
.mark{width:52px;height:52px;flex:none;}
.ident-name{
  margin:0;
  font-size:1.12rem;line-height:1.18;font-weight:700;
  letter-spacing:.01em;
}
.ident-sub{
  margin:.2rem 0 0;
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--maple);
}

.railcall{
  display:flex;flex-direction:column;
  margin-top:1.05rem;
  padding:.72rem 1rem;
  background:var(--call);
  color:var(--oncall);
  text-decoration:none;
  border-radius:3px;
}
.railcall:hover{background:#a3361f;color:var(--oncall);}
.railcall-lbl{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;
}
.railcall-num{font-size:1.42rem;font-weight:700;line-height:1.2;}

.railnote{
  margin:.6rem 0 0;
  font-size:.86rem;color:var(--muted);
}

.railfacts{margin:1.1rem 0 0;padding:0;}
.railfacts>div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.4rem 0;border-bottom:1px solid var(--line);
}
.railfacts dt{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);
}
.railfacts dd{
  margin:0;font-family:var(--mono);font-size:.78rem;
  color:var(--maple);text-align:right;
}

.railnav{margin-top:1rem;}
.railnav ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem;}
.railnav a{
  display:inline-block;
  padding:.36rem .6rem;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:.84rem;
  text-decoration:none;
  color:var(--paper);
}
.railnav a:hover{border-color:var(--maple);color:var(--maple);}
.railnav .n{font-family:var(--mono);font-size:.72rem;color:var(--maple);margin-right:.35rem;}

.railmail{margin:.95rem 0 0;font-size:.86rem;word-break:break-word;}

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

main{display:block;}

.open{
  max-width:var(--wrap);
  margin:0 auto;
  padding:2.1rem 1.15rem 1.6rem;
}
.eyebrow{
  margin:0 0 .85rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--maple);
}
h1{
  margin:0;
  font-size:clamp(1.95rem,7.6vw,3.15rem);
  line-height:1.09;
  letter-spacing:-.022em;
  font-weight:800;
  max-width:16ch;
}
.lede{
  margin:1.05rem 0 0;
  font-size:1.09rem;
  color:var(--muted);
  max-width:58ch;
}

.opencta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;}

.btn{
  display:inline-block;
  padding:.82rem 1.15rem;
  background:var(--call);
  color:var(--oncall);
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  border-radius:3px;
  border:2px solid var(--call);
}
.btn:hover{background:#a3361f;border-color:#a3361f;color:var(--oncall);}
.btn-ghost{background:transparent;border-color:var(--maple);color:var(--maple);}
.btn-ghost:hover{background:transparent;border-color:var(--paper);color:var(--paper);}
.btn-sm{padding:.6rem .9rem;font-size:.92rem;}
.btn-big{font-size:1.16rem;padding:.95rem 1.35rem;}

.chips{
  list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.45rem;
}
.chips li{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--maple);
  border:1px solid var(--line);
  border-radius:99px;
  padding:.34rem .7rem;
}

/* ------------------------------------------------------------ SECTIONS */

.sec{
  max-width:var(--wrap);
  margin:0 auto;
  padding:2.4rem 1.15rem 1rem;
  border-top:1px solid var(--line);
}
.sec:first-of-type{border-top:none;}
.secnum{
  margin:0;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;
  color:var(--maple);
}
h2{
  margin:.35rem 0 0;
  font-size:clamp(1.45rem,5.4vw,2.05rem);
  line-height:1.14;
  letter-spacing:-.015em;
  font-weight:800;
}
.secintro{margin:.75rem 0 0;color:var(--muted);max-width:56ch;}

/* ------------------------------------------- the before-photo statement */

.policy{
  margin-top:1.5rem;
  padding:1.15rem 1.1rem 1.25rem;
  background:var(--panel);
  border-left:4px solid var(--maple);
  border-radius:0 3px 3px 0;
}
.policy-h{
  margin:0 0 .6rem;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--maple);font-weight:700;
}
.policy p{margin:0 0 .75rem;font-size:1rem;}
.policy-now{color:var(--muted);}
.policy strong{color:var(--paper);}

/* ------------------------------------------------------ project records */

.rec{
  margin-top:2.4rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.rec-h{
  margin:0;
  font-size:1.24rem;line-height:1.25;font-weight:700;
  display:flex;gap:.6rem;align-items:baseline;
}
.rec-n{
  font-family:var(--mono);font-size:.9rem;color:var(--maple);flex:none;
}

.spec{
  margin:.85rem 0 1.15rem;padding:0;
  display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;
}
.spec>div{display:flex;gap:.45rem;align-items:baseline;}
.spec dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.spec dd{margin:0;font-family:var(--mono);font-size:.78rem;color:var(--maple);}

.pair{display:grid;gap:1.1rem;}

.fr{margin:0;}
.fr figcaption{
  margin-top:.55rem;
  font-size:.86rem;
  color:var(--muted);
}

.ph{
  aspect-ratio:4/3;
  border-radius:3px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:.55rem;
  padding:1rem;
  text-align:center;
}
/* the HELD-OPEN before frame — deliberately empty, deliberately visible */
.ph-open{
  border:2px dashed var(--maple);
  background:
    repeating-linear-gradient(135deg,
      rgba(224,192,139,.05) 0 10px,
      transparent 10px 20px);
}
/* the after frame — a marked placeholder for a real photograph */
.ph-shot{
  border:2px solid var(--line);
  background:var(--panel-2);
}
.ph-tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--maple);
  border:1px solid var(--maple);
  border-radius:99px;
  padding:.26rem .7rem;
}
.ph-tag-a{color:var(--call-hi);border-color:var(--call-hi);}
.ph-msg{
  margin:0;
  font-size:.86rem;
  color:var(--muted);
  max-width:30ch;
}

.rec-note{margin:1.05rem 0 0;color:var(--paper);}
.rec-call{
  display:inline-block;
  margin-top:.9rem;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--call-hi);
  text-decoration:none;
  border-bottom:1px solid var(--call-hi);
  padding-bottom:2px;
}
.rec-call:hover{color:var(--paper);border-bottom-color:var(--paper);}

.workfoot{
  margin:2.2rem 0 0;
  padding-top:1.3rem;
  border-top:1px solid var(--line);
  font-size:.92rem;color:var(--muted);
}

/* ------------------------------------------------------------ services */

.svc{
  margin-top:1.7rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.svc h3{
  margin:0 0 .5rem;
  font-size:1.16rem;font-weight:700;
}
.svc p{margin:0;color:var(--muted);}
#services .btn{margin-top:1.7rem;}

/* ----------------------------------------------------------------- why */

.why-grid{display:grid;gap:1.7rem;margin-top:1.4rem;}
.why-lead{margin:0 0 .9rem;font-size:1.09rem;}
.why-text p{margin:0 0 .9rem;color:var(--muted);}
.why-lead{color:var(--paper);}

.factlist{margin:1.4rem 0;padding:0;border-top:1px solid var(--line);}
.factlist>div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid var(--line);
}
.factlist dt{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);
}
.factlist dd{
  margin:0;font-family:var(--mono);font-size:.8rem;
  color:var(--maple);text-align:right;
}
.verify{font-size:.9rem;}

.areafig{margin:0;}
.areafig img{width:100%;border:1px solid var(--line);border-radius:3px;}
.areafig figcaption{margin-top:.55rem;font-size:.84rem;color:var(--muted);}

/* --------------------------------------------------------------- quote */

.sec-quote .btn-big{margin-top:1.4rem;}

.qform{
  margin-top:1.7rem;
  padding:1.25rem 1.1rem 1.35rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:3px;
}
.field{margin-bottom:1.05rem;}
.field label{
  display:block;
  margin-bottom:.35rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--maple);
}
.field input,.field textarea{
  width:100%;
  padding:.7rem .75rem;
  font:inherit;
  font-size:1rem;
  color:var(--paper);
  background:var(--ground);
  border:1px solid var(--line);
  border-radius:3px;
}
.field input:focus,.field textarea:focus{border-color:var(--maple);}
.field textarea{resize:vertical;}
.hint{margin:.45rem 0 0;font-size:.84rem;color:var(--muted);}
.btn-submit{
  font-family:inherit;
  cursor:pointer;
  width:100%;
}
.formnote{margin:.85rem 0 0;font-size:.84rem;color:var(--muted);}

.photoask{
  margin:1.6rem 0 0;
  padding:1rem 1.1rem;
  border:1px dashed var(--maple);
  border-radius:3px;
  font-size:.95rem;
  color:var(--muted);
}
.photoask strong{color:var(--maple);}

/* -------------------------------------------------------------- footer */

.foot{
  margin-top:2.6rem;
  background:var(--rail);
  border-top:1px solid var(--line);
}
.foot-in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:2rem 1.15rem 2.4rem;
}
.foot-name{margin:0;font-size:1.12rem;font-weight:700;}
.foot-line{margin:.5rem 0 0;color:var(--muted);font-size:.95rem;}

.foot-facts{margin:1.4rem 0 0;padding:0;border-top:1px solid var(--line);}
.foot-facts>div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid var(--line);
}
.foot-facts dt{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);flex:none;
}
.foot-facts dd{
  margin:0;font-size:.88rem;text-align:right;color:var(--paper);
  word-break:break-word;
}

.foot-nav{margin:1.3rem 0 0;font-size:.9rem;color:var(--muted);}
.foot-copy{margin:1.1rem 0 0;font-size:.84rem;color:var(--muted);}
.foot-demo{
  margin:.9rem 0 0;
  font-size:.8rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:.9rem;
}

/* ------------------------------------------------- fixed mobile callbar */

.callbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.7rem 1.1rem;
  background:var(--call);
  color:var(--oncall);
  text-decoration:none;
  border-top:2px solid #8f2c1e;
}
.callbar:hover{background:#a3361f;color:var(--oncall);}
.callbar-lbl{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;
}
.callbar-num{font-size:1.16rem;font-weight:700;white-space:nowrap;}

/* ============================== 620px ============================== */
@media (min-width:620px){
  .pair{grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start;}
  .ph{aspect-ratio:1/1;}
  .rail-in,.open,.sec,.foot-in{padding-left:1.6rem;padding-right:1.6rem;}
}

/* ============================== 1020px ============================= */
@media (min-width:1020px){
  body{padding-bottom:0;}
  .callbar{display:none;}

  .rail{
    position:fixed;
    top:0;left:0;bottom:0;
    width:308px;
    border-bottom:none;
    border-right:1px solid var(--line);
    overflow-y:auto;
  }
  .rail-in{max-width:none;padding:1.8rem 1.5rem;}
  .railnav ol{flex-direction:column;gap:0;}
  .railnav a{
    display:block;
    border:none;
    border-bottom:1px solid var(--line);
    border-radius:0;
    padding:.6rem 0;
    font-size:.95rem;
  }

  main{margin-left:308px;}
  .foot{margin-left:308px;}

  .open{max-width:820px;margin:0;padding:3.4rem 2.6rem 1.9rem;}
  .sec{max-width:820px;margin:0;padding:3rem 2.6rem 1.2rem;}
  .foot-in{max-width:820px;margin:0;padding:2.6rem 2.6rem 3rem;}

  h1{font-size:clamp(2.6rem,3.6vw,3.3rem);}

  .why-grid{grid-template-columns:1fr 320px;gap:2.2rem;align-items:start;}

  .qform{max-width:520px;}
  .btn-submit{width:auto;padding-left:2rem;padding-right:2rem;}
}

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

/* ============================== 1360px ============================= */
/* On a wide monitor the rail is fixed at the left edge, so centre the
   content column in the space that is left rather than letting it hug
   the rail with 500px of dead ground on the right. */
@media (min-width:1360px){
  .open,.sec,.foot-in{margin-left:auto;margin-right:auto;max-width:900px;}
}