/* ==========================================================================
   Duncan Technical Services — "The Chair"
   A dental chair in side elevation, annotated like a service sheet.
   base.css owns the shell; this file owns colour, type and the drawing.
   ========================================================================== */

:root{
  /* palette */
  --ink:        #14171a;
  --ink-2:      #14171a;
  --ink-3:      #1b1f23;
  --white:      #ffffff;
  --teal:       #0e6e6e;
  --teal-lit:   #5fc2b6;
  --steel:      #68727a;
  --signal:     #d64545;
  --panel:      #eef3f3;
  --body:       #313a40;

  /* base.css token map — light ground is solid white, never off-white */
  --surface:    #ffffff;
  --surface-2:  #eef3f3;
  --text:       #ffffff;
  --muted:      rgba(255,255,255,.62);
  --ink-text:   #14171a;
  --ink-mute:   #68727a;
  --accent:     #0e6e6e;
  --accent-lit: #5fc2b6;
  --accent-2:   #0e6e6e;
  --line:       rgba(20,23,26,.13);
  --line-d:     rgba(20,23,26,.13);

  /* type */
  --font-display: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Noto Sans Display", system-ui, -apple-system, sans-serif;
  --font-mono:    "Cousine", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap-max: 1260px;
  --radius:   2px;
}

body{
  background:var(--white);
  color:var(--ink-text);
  font-size:16px;
  line-height:1.65;
}
::selection{ background:var(--teal); color:#fff; }
:focus-visible{ outline:2px solid var(--teal); }
.sect--ink :focus-visible{ outline-color:var(--teal-lit); }
.sect--teal :focus-visible{ outline-color:#fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--ink); color:#fff; padding:.8rem 1.1rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- preloader: the chair motif, drawn ---------- */
.pre__mark{ display:grid; place-items:center; }
.pre__motif{ width:104px; height:104px; display:block; }
.pre__motif path{
  fill:none; stroke:var(--white); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:240; stroke-dashoffset:240;
  animation:pmDraw 2.8s var(--ease) infinite;
}
.pre__motif path:nth-child(2){ animation-delay:.10s; }
.pre__motif path:nth-child(3){ animation-delay:.20s; }
.pre__motif path:nth-child(4){ animation-delay:.30s; }
.pre__motif path:nth-child(5){ animation-delay:.40s; }
.pre__motif path:nth-child(6){ animation-delay:.50s; }
.pre__motif path:nth-child(7){ animation-delay:.60s; }
.pre__motif path:nth-child(8){ animation-delay:.70s; }
@keyframes pmDraw{
  0%   { stroke-dashoffset:240; }
  38%,74%{ stroke-dashoffset:0; }
  100% { stroke-dashoffset:-240; }
}
.pre__bar{ background:rgba(255,255,255,.16); }
.pre__bar i{ background:var(--teal-lit); }
.pre__pct{ color:var(--teal-lit); }

/* ---------- header ---------- */
.hdr{
  background:var(--white);
  border-bottom:1px solid var(--line);
  color:var(--ink);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@media (min-width:1200px){
  .hdr{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px) saturate(1.05);
    -webkit-backdrop-filter:blur(12px) saturate(1.05);
  }
}
.hdr__in{ min-height:74px; gap:.9rem; }
.brand img{ width:126px; height:auto; }

.nav__list{ gap:0; }
.nav__link{
  font-family:var(--font-body);
  font-size:.755rem; font-weight:500; letter-spacing:.004em;
  color:var(--ink); padding:.5rem .46rem; border-radius:3px;
}
.nav__link:hover{ color:var(--teal); background:var(--panel); }

.burger span{ background:var(--ink); }
.burger[aria-expanded="true"] span{ background:var(--ink); }
.hdr__end{ display:flex; align-items:center; gap:.85rem; margin-left:.6rem; flex-shrink:0; }
.hdr__tel{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--steel); white-space:nowrap;
  padding-left:.9rem; border-left:1px solid var(--line);
}
.hdr__tel:hover{ color:var(--teal); }
.hdr__cta{ font-size:.73rem; padding:.58rem .95rem; }

/* ---------- buttons ---------- */
.btn{ border-radius:2px; letter-spacing:.01em; white-space:nowrap; }
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:var(--teal); color:#fff; }
.btn--line{ border:1px solid var(--line); color:var(--ink); }
.btn--line:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.sect--ink .btn--line,.sect--teal .btn--line{ border-color:rgba(255,255,255,.3); color:#fff; }

/* ---------- section grounds ---------- */
.sect--light{ background:var(--white); color:var(--ink-text); }
.sect--ink{ background:var(--ink); color:var(--text); }
.sect--teal{ background:var(--teal); color:#fff; }

/* ---------- section head, job-sheet rule ---------- */
.shead{
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:clamp(1.8rem,3.4vw,2.8rem);
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
}
.shead__n{ color:var(--teal); font-weight:700; letter-spacing:.08em; }
.shead__l{ white-space:nowrap; }
.shead__r{ flex:1; height:1px; min-width:1rem; background:var(--line); }
.shead__x{ white-space:nowrap; opacity:.85; }
.sect--ink .shead{ color:rgba(255,255,255,.55); }
.sect--ink .shead__n{ color:var(--teal-lit); }
.sect--ink .shead__r{ background:rgba(255,255,255,.16); }
.sect--teal .shead{ color:rgba(255,255,255,.72); }
.sect--teal .shead__n{ color:#fff; }
.sect--teal .shead__r{ background:rgba(255,255,255,.3); }

/* ---------- hero ---------- */
.hero{
  background:var(--white);
  color:var(--ink-text);
  padding-block:clamp(2.2rem,4.6vw,4.2rem) clamp(2.8rem,5.5vw,4.6rem);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.6rem);
  align-items:center;
}
.hero__copy{ min-width:0; }

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.63rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  margin-bottom:1.5rem;
}
.eyebrow__dot{ width:6px; height:6px; border-radius:50%; background:var(--signal); flex:none; }

.hero__h1{ color:var(--ink); }
.hero__h1 .line{ overflow:visible; padding-block:0; }
.hero__lead{
  margin-top:1.5rem;
  font-size:clamp(.96rem,1.3vw,1.06rem); line-height:1.68;
  color:var(--body); max-width:46ch;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem;
  margin-top:2.2rem; padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.hero__trust span + span::before{ content:"·"; margin-right:.9rem; opacity:.7; }

/* ---------- the drawing sheet ---------- */
.sheet{
  margin:0; min-width:0;
  border:1px solid var(--line);
  background:var(--white);
}
.sheet__bar,.sheet__foot{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.62rem .9rem;
  font-family:var(--font-mono); font-size:.57rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.sheet__bar{ border-bottom:1px solid var(--line); }
.sheet__foot{ border-top:1px solid var(--line); background:var(--panel); }
.sheet__body{ padding:clamp(.5rem,1.5vw,1.15rem); }

.dw{
  display:block; width:100%; height:auto;
  aspect-ratio:600 / 516;
  color:var(--ink);
}
.dw path,.dw line,.dw rect,.dw circle{
  fill:none; stroke:currentColor; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.dw .dw-thin{ stroke-width:.7; opacity:.5; }
.dw .dw-dash{ stroke-width:.8; stroke-dasharray:4 5; opacity:.45; }
.dw .dw-dot{ fill:currentColor; stroke:none; }
.dw .dw-ball{ fill:var(--white); stroke-width:1; }
.dw-lab{
  font-family:var(--font-mono); font-size:15.5px; letter-spacing:.1em;
  fill:currentColor; stroke:none;
}
.dw-num{ font-family:var(--font-mono); font-size:11px; fill:currentColor; stroke:none; }

/* ---------- shared two-column split ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.5rem,4vw,3.6rem);
  align-items:start;
}
.split--plate{ grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr); align-items:center; }
.split__a,.split__b{ min-width:0; }
.lead-h2{ font-size:clamp(1.85rem,4.3vw,3.15rem); }

.prose{ color:var(--body); font-size:.97rem; line-height:1.72; max-width:54ch; }
.sect__h2 + .prose{ margin-top:1.35rem; }
.prose p + p{ margin-top:1rem; }
.prose--small{ font-size:.87rem; line-height:1.6; color:var(--steel); margin-top:1.3rem; }
.prose--on-teal{ color:rgba(255,255,255,.84); }
.sect--ink .prose{ color:rgba(255,255,255,.72); }

/* ---------- 01 what we do ---------- */
.deflist{
  display:grid;
  grid-template-columns:repeat(3,minmax(min(180px,100%),1fr));
  gap:0 clamp(1.2rem,3vw,2.4rem);
  margin-top:clamp(2.2rem,4vw,3.2rem);
  border-top:1px solid var(--line);
}
.deflist__row{ padding:1.1rem 0; border-bottom:1px solid var(--line); min-width:0; }
.deflist dt{
  display:flex; align-items:baseline; gap:.6rem;
  font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--ink);
}
.deflist__n{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; color:var(--teal); }
.deflist dd{ margin-top:.45rem; font-size:.89rem; line-height:1.6; color:var(--steel); }

/* ---------- 02 services ---------- */
.promises{ border-top:1px solid rgba(255,255,255,.16); }
.promises__row{
  display:grid;
  grid-template-columns:auto minmax(0,.72fr) minmax(0,1.28fr);
  gap:.35rem clamp(1rem,3vw,2.6rem);
  align-items:baseline;
  padding:clamp(1.05rem,2.2vw,1.65rem) 0;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.promises__n{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; color:var(--teal-lit); }
.promises__h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.12rem,2vw,1.5rem); line-height:1.15;
  letter-spacing:-.01em; color:#fff;
}
.promises__p{ font-size:.93rem; line-height:1.65; color:rgba(255,255,255,.72); max-width:52ch; }

.linkrow{ display:flex; flex-wrap:wrap; gap:.7rem 1.9rem; margin-top:clamp(1.7rem,3vw,2.4rem); }
.linkrow a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.63rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.32rem; border-bottom:1px solid currentColor;
  color:var(--teal);
}
.linkrow a:hover{ color:var(--ink); }
.sect--ink .linkrow a{ color:rgba(255,255,255,.82); }
.sect--ink .linkrow a:hover{ color:var(--teal-lit); }

/* ---------- plates + callout caption ---------- */
.plates{
  display:grid;
  grid-template-columns:repeat(2,minmax(min(240px,100%),1fr));
  gap:clamp(1.2rem,3vw,2.2rem);
}
.plate{ margin:0; min-width:0; }
.plate__img{
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
.plate__img img{ display:block; width:100%; height:100%; object-fit:cover; }
.plate__img--sq{ aspect-ratio:1 / 1; }
.plate__img--detail{ aspect-ratio:4 / 3; }
.plate__img--unit img{ object-position:2% 50%; }
.plate__img--soft img{ object-position:70% 50%; }
.plate__cap{
  display:flex; align-items:center; gap:.6rem;
  padding-top:.72rem;
  font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
}
.ball{
  width:1.7em; height:1.7em; flex:none;
  display:inline-grid; place-items:center;
  border:1px solid currentColor; border-radius:50%;
  font-size:.9em; letter-spacing:0; line-height:1;
}
.sect--ink .plate__img{ border-color:rgba(255,255,255,.18); background:var(--ink-3); }
.sect--ink .plate__cap{ color:rgba(255,255,255,.6); }

/* ---------- 05 coverage ---------- */
.counties{
  display:grid;
  grid-template-columns:repeat(2,minmax(min(150px,100%),1fr));
  column-gap:clamp(1rem,3vw,2.4rem);
  margin-top:1.3rem;
  border-top:1px solid var(--line);
}
.counties li{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.82rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.01em;
  color:var(--ink); min-width:0;
}
.counties li span{ font-size:.57rem; letter-spacing:.14em; color:var(--teal); }

/* ---------- 06 about ---------- */
.about__foot{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr);
  gap:clamp(1.6rem,4vw,3rem);
  align-items:end;
  margin-top:clamp(2.2rem,4vw,3.4rem);
  padding-top:clamp(1.5rem,3vw,2.1rem);
  border-top:1px solid rgba(255,255,255,.3);
}
.quote p{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem,2.7vw,1.95rem); line-height:1.24;
  letter-spacing:-.012em; color:#fff; max-width:26ch;
}
.quote cite{
  display:block; margin-top:.85rem;
  font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.18em; text-transform:uppercase; font-style:normal;
  color:rgba(255,255,255,.7);
}
.fsb{ display:flex; align-items:center; gap:.85rem; justify-self:end; min-width:0; }
.fsb img{ width:74px; height:auto; background:#fff; padding:6px; flex:none; }
.fsb span{
  font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.75;
  color:rgba(255,255,255,.78); max-width:22ch;
}

/* ---------- 07 contact ---------- */
.contact{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.contact__a,.contact__b,.contact__c{ min-width:0; }
.contact__a .sect__lead{ margin-top:1rem; }
.tel{ display:block; padding:.85rem 0; border-top:1px solid var(--line); }
.tel:last-child{ border-bottom:1px solid var(--line); }
.tel__l{
  display:block; font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
}
.tel__v{
  display:block; margin-top:.15rem;
  font-family:var(--font-mono); font-size:clamp(1.1rem,2.3vw,1.6rem);
  letter-spacing:-.01em; color:var(--ink); transition:color .2s;
  overflow-wrap:anywhere;
}
.tel:hover .tel__v{ color:var(--teal); }
.contact__h{
  font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  margin-bottom:.65rem;
}
.contact__c address{ font-size:.9rem; line-height:1.72; color:var(--body); overflow-wrap:anywhere; }
.contact__link{
  display:inline-block; margin-top:1rem; padding-bottom:.3rem;
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); border-bottom:1px solid currentColor;
}
.contact__link:hover{ color:var(--ink); }

/* ---------- footer ---------- */
.foot{ background:var(--ink); border-top:1px solid rgba(255,255,255,.14); }
.foot__top{ border-bottom:1px solid rgba(255,255,255,.14); }
.foot__mark{ display:inline-flex; align-items:baseline; gap:.7rem; margin-bottom:1.15rem; }
.foot__dts{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  letter-spacing:.02em; line-height:1; color:#fff;
}
.foot__name{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.foot__blurb{ font-size:.85rem; line-height:1.65; color:rgba(255,255,255,.64); max-width:36ch; }
.foot__contact{
  display:grid; gap:.42rem; margin-top:1.15rem;
  font-family:var(--font-mono); font-size:.71rem;
  color:rgba(255,255,255,.62); overflow-wrap:anywhere;
}
.foot__contact a:hover{ color:var(--teal-lit); }
.foot__nav a:hover{ color:var(--teal-lit); }
.foot__h{ color:rgba(255,255,255,.42); }
.foot__bottom{ color:rgba(255,255,255,.38); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* the ten labels need ~1200px: below that the whole nav goes to the overlay */
@media (max-width:1199px){
  .hdr{ transform:none !important; background:var(--white); }
  .hdr__in{ min-height:66px; }
  .brand img{ width:120px; }
  .hdr__end{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  html.nav-open{ overflow:hidden; }

  .nav{
    position:fixed; inset:0; z-index:950;
    margin:0;
    display:flex; flex-direction:column;
    padding:1.1rem var(--pad) 2rem;
    background:var(--ink); color:var(--text);
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    justify-content:safe center;
    visibility:hidden; opacity:0;
    transition:opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .nav.is-open{ visibility:visible; opacity:1; transition:opacity .3s var(--ease), visibility 0s; }

  .nav__head{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:1rem; margin-bottom:.5rem;
    border-bottom:1px solid rgba(255,255,255,.14);
    flex-shrink:0;
  }
  .nav__headlabel{
    font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em;
    text-transform:uppercase; color:rgba(255,255,255,.6);
  }
  .nav__close{
    width:38px; height:38px; display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.2); border-radius:3px;
  }
  .nav__close svg{ width:15px; height:15px; }

  .nav__list{ flex-direction:column; align-items:stretch; gap:0; margin-top:.4rem; }
  .nav__item{ border-bottom:1px solid rgba(255,255,255,.12); }
  .nav__link{
    width:100%; justify-content:space-between;
    padding:.88rem .1rem; font-size:1rem; font-weight:600;
    border-radius:0; color:var(--text);
  }
  .nav__link:hover{ color:var(--teal-lit); background:none; }

  .nav__foot{
    display:grid; gap:.45rem; margin-top:auto; padding-top:1.4rem;
    font-family:var(--font-mono); font-size:.74rem;
    color:rgba(255,255,255,.6);
  }
  .nav__foot span{ line-height:1.6; overflow-wrap:anywhere; }
}
@media (min-width:1200px){
  .nav__foot{ display:none; }
}

@media (max-width:1279px){
  .hdr__tel{ display:none; }
}

@media (max-width:1000px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
  .sheet{ max-width:600px; }
}

@media (max-width:860px){
  .shead__x{ display:none; }
  .split,.split--plate{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .contact{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .about__foot{ grid-template-columns:minmax(0,1fr); gap:1.8rem; align-items:start; }
  .fsb{ justify-self:start; }
  .plates{ grid-template-columns:minmax(0,1fr); }
  .promises__row{ grid-template-columns:auto minmax(0,1fr); }
  .promises__p{ grid-column:2; }
}

@media (max-width:680px){
  .deflist{ grid-template-columns:minmax(0,1fr); }
  .sheet{ margin-inline:calc(var(--pad) * -1); border-left:0; border-right:0; }
  .hero__trust{ font-size:.56rem; letter-spacing:.12em; }
  .counties{ grid-template-columns:minmax(0,1fr); }
  .foot__nav{ gap:1.6rem 1.2rem; }
}

@media (max-width:420px){
  .hero__acts .btn{ width:100%; justify-content:center; }
  .sheet__bar,.sheet__foot{ font-size:.52rem; letter-spacing:.1em; }
  .hero__trust span + span::before{ margin-right:.6rem; }
}

@media (prefers-reduced-motion: reduce){
  .pre__motif path{ animation:none; stroke-dashoffset:0; }
}