/* =========================================================
   KellTech Digital
   One stylesheet for every page. Sections are in page order.
   Brand colors only. Kelly green is for lines and markers,
   not small text (it's too light on cream to read well).
   ========================================================= */

:root{
  /* brand */
  --spruce:#0F3D32;
  --spruce-deep:#0A2B23;
  --accent:#3DA35D;       /* kelly green */
  --sage:#6B8F71;
  --cream:#FAF7EE;
  --ink:#1F1F1F;          /* charcoal */

  /* working neutrals (mixed from the brand colors) */
  --white:#FFFDF8;
  --paper:#F3EFE2;        /* a shade darker than cream, for quiet bands */
  --ink-soft:#4A5650;     /* body copy that steps back. 7:1 on cream */
  --line:#D9D2BE;         /* hairlines on cream */
  --line-dark:rgba(250,247,238,.22);
  --on-dark:#FAF7EE;
  --on-dark-soft:#C4D3C8;

  --radius:3px;
  --wrap:1160px;
  --gutter:clamp(18px,4vw,32px);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:1.125rem;            /* 18px */
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--spruce);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--spruce);letter-spacing:-.01em}
p{max-width:62ch}
ul,ol{list-style:none}
strong{font-weight:700}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.nowrap{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--spruce);color:var(--cream);padding:10px 14px;z-index:100}
.skip:focus{left:8px}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

section{padding:clamp(56px,8vw,104px) 0}

/* section header: a rule with a small label, like a newspaper section */
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--ink);
  padding-top:12px;margin-bottom:clamp(24px,4vw,40px);
}
.sec-label{
  font-family:var(--sans);font-weight:700;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.sec-head a{font-weight:700;font-size:.95rem}
h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:16px}
.intro{font-size:1.15rem;color:var(--ink-soft);margin-bottom:clamp(28px,4vw,48px)}

/* ---------- buttons and links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:12px 24px;
  font-family:var(--sans);font-weight:700;font-size:1.05rem;line-height:1.2;
  text-decoration:none;text-align:center;
  border:2px solid var(--spruce);border-radius:var(--radius);
  background:var(--spruce);color:var(--cream);cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--spruce-deep);border-color:var(--spruce-deep)}
.btn-primary{}                                  /* same as .btn, kept for older markup */
.btn-ghost{background:transparent;color:var(--spruce)}
.btn-ghost:hover{background:var(--spruce);color:var(--cream)}
.btn-light{background:var(--cream);color:var(--spruce);border-color:var(--cream)}
.btn-light:hover{background:transparent;color:var(--cream)}

.text-link{
  font-weight:700;color:var(--spruce);
  text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:2px;text-underline-offset:.28em;
  display:inline-block;padding:10px 0;   /* keeps the tap target tall */
}
.text-link:hover{text-decoration-color:var(--spruce)}
.ext::after{content:" \2197";font-weight:400}

/* ---------- header ---------- */
.site-header{background:var(--cream);border-bottom:1px solid var(--line);position:relative;z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.mark{display:inline-flex;align-items:center;text-decoration:none}
.logo-img{height:44px;width:auto}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{
  display:block;padding:10px 12px;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;
  border-bottom:2px solid transparent;
}
.nav-links a:hover{border-bottom-color:var(--line)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--spruce)}
.nav-links .nav-contact{
  margin-left:8px;border:2px solid var(--spruce);border-radius:var(--radius);color:var(--spruce);
}
.nav-links .nav-contact:hover,.nav-links .nav-contact[aria-current="page"]{background:var(--spruce);color:var(--cream)}
.menu-btn{
  display:none;align-items:center;gap:8px;
  min-height:44px;padding:8px 12px;
  background:none;border:1px solid var(--line);border-radius:var(--radius);
  font:700 1rem var(--sans);color:var(--spruce);cursor:pointer;
}
.menu-btn svg{width:22px;height:22px;stroke:var(--spruce)}

/* ---------- home: hero ---------- */
.hero{padding:clamp(40px,6vw,76px) 0 clamp(40px,6vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,80px);align-items:end}
.hero-where{font-weight:700;font-size:.95rem;color:var(--ink-soft);margin-bottom:18px}
.hero h1{margin-bottom:22px}
.h1-name{display:block;font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:.02em;color:var(--ink);margin-bottom:10px}
.h1-tag{display:block;font-size:clamp(2.5rem,6.4vw,4.6rem);font-weight:600;line-height:1.02;letter-spacing:-.025em}
.h1-tag em{display:block;font-style:italic;font-weight:500}
.hero-lead{font-size:clamp(1.15rem,1.8vw,1.3rem);color:var(--ink);margin-bottom:30px;max-width:40ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}

.hero-note{border-top:2px solid var(--ink);padding-top:14px}
.hero-note .ky{width:200px;margin:4px 0 14px -8px}
.hero-note ul li{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:1.02rem;
}
.hero-note ul li b{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--spruce);white-space:nowrap}
.hero-note .sig{margin-top:14px;font-size:.98rem;color:var(--ink-soft)}

/* ---------- work ---------- */
.work{padding-top:0}
.project{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,40px);
  padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--line);
}
.project:first-of-type{padding-top:0}
.shot{border:1px solid var(--line);background:var(--white);border-radius:var(--radius);overflow:hidden}
.shot img{width:100%}
.shot-link{display:block;text-decoration:none}
.shot-link:hover .shot{border-color:var(--sage)}
figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:8px}

/* featured project: big desktop shot + the real phone screenshot beside it */
.project.project-feature .shots{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.27fr);gap:clamp(12px,2vw,24px);align-items:end}
.project.project-feature .info{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px)}

/* regular projects alternate sides */
.project .shots{grid-column:1 / span 7}
.project .info{grid-column:8 / span 5}
.project.flip .shots{grid-column:6 / span 7;order:2}
.project.flip .info{grid-column:1 / span 5;order:1}

.project h3,.project .h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:6px}
.project .where{color:var(--ink-soft);font-size:.98rem;margin-bottom:18px}
.facts{display:grid;gap:14px;margin-bottom:14px}
.facts dt{font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.facts dd{margin:2px 0 0}
.tags{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.95rem;color:var(--spruce);font-weight:600}
.tags li::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);margin-right:7px;vertical-align:.12em}

.yours{
  margin-top:clamp(28px,4vw,44px);
  border:1px dashed var(--sage);border-radius:var(--radius);
  padding:22px 24px;display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;justify-content:space-between;
}
.yours p{font-family:var(--serif);font-size:1.35rem;color:var(--spruce)}
.yours p span{font-family:var(--sans);font-size:1rem;color:var(--ink-soft);display:block;margin-top:2px}

/* ---------- services (home) ---------- */
.services{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc-list{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(16px,4vw,56px);
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);
}
.svc-row h3{font-size:clamp(1.45rem,2.4vw,1.9rem)}
.svc-row h3 a{color:inherit;text-decoration:none}
.svc-row h3 a:hover{text-decoration:underline}
.svc-row .num{display:block;font-family:var(--sans);font-size:.85rem;font-weight:700;color:var(--ink-soft);margin-bottom:4px;letter-spacing:.08em}
.svc-row p{margin-bottom:10px}
.svc-row .like{font-size:.98rem;color:var(--ink-soft)}
.svc-row .like b{color:var(--ink);font-weight:700}
.new-flag{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font:700 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--spruce);border:1px solid var(--spruce);padding:2px 6px;border-radius:var(--radius);
}

/* ---------- website offer ---------- */
.offer-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,88px)}
.price-block .from{font-weight:700;font-size:1rem;color:var(--ink-soft)}
.price-block .big{
  font-family:var(--serif);font-weight:600;color:var(--spruce);
  font-size:clamp(4.5rem,11vw,7.5rem);line-height:.95;letter-spacing:-.03em;margin:4px 0 22px;
}
.price-block ul{border-top:1px solid var(--line);margin-bottom:18px}
.price-block li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line);position:relative}
.price-block li::before{content:"";position:absolute;left:0;top:1.15em;width:10px;height:2px;background:var(--accent)}
.steps-plain{counter-reset:s}
.steps-plain li{
  counter-increment:s;position:relative;
  padding:0 0 26px 64px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.steps-plain li:last-child{border-bottom:none;margin-bottom:0}
.steps-plain li::before{
  content:counter(s);position:absolute;left:0;top:-.12em;
  font-family:var(--serif);font-weight:500;font-size:2.6rem;line-height:1;color:var(--sage);
}
.steps-plain h3{font-size:1.4rem;margin-bottom:6px}
.steps-plain p{color:var(--ink-soft)}

/* ---------- 3D printing (the one dark section) ---------- */
.print3d{background:var(--spruce);color:var(--on-dark)}
.print3d .sec-head{border-top-color:var(--on-dark)}
.print3d .sec-label{color:var(--on-dark)}
.print3d h2,.print3d h3{color:var(--on-dark)}
.print3d p{color:var(--on-dark-soft)}
.print3d a{color:var(--on-dark)}
.print3d .text-link{color:var(--on-dark);text-decoration-color:var(--accent)}
.print-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
.print-grid .lead{font-size:1.18rem;color:var(--on-dark);margin-bottom:26px}
.parts{border-top:1px solid var(--line-dark);margin-bottom:28px;columns:2;column-gap:28px}
.parts li{
  break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--line-dark);
  display:flex;gap:10px;align-items:baseline;color:var(--on-dark);
}
.parts li::before{content:"";flex:none;width:8px;height:8px;background:var(--accent);transform:translateY(-1px)}
.ask{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.55rem);
  line-height:1.35;color:var(--on-dark)!important;
  border-left:3px solid var(--accent);padding-left:18px;margin-bottom:18px;
}
.print-photos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.print-photos figure:nth-child(1){grid-column:1 / span 4;grid-row:span 2}
.print-photos figure:nth-child(2),.print-photos figure:nth-child(3){grid-column:5 / span 2}
.print-photos figure{min-width:0}
.print-photos figcaption{color:var(--on-dark-soft)}
.print-photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}

/* PLACEHOLDER box: shows up wherever a real photo hasn't been added yet.
   To replace: swap the <div class="ph"> for an <img> and delete the box. */
.ph{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  aspect-ratio:1/1;padding:16px;text-align:center;
  border:1px dashed var(--sage);border-radius:var(--radius);
  background:var(--paper);color:var(--ink-soft);font-size:.92rem;line-height:1.35;
}
.ph b{font-weight:700;color:var(--ink);font-size:1rem}
.ph small{font-size:.82rem}
.print3d .ph{background:rgba(250,247,238,.05);border-color:rgba(250,247,238,.4);color:var(--on-dark-soft)}
.print3d .ph b{color:var(--on-dark)}
.print-photos figure:nth-child(1) .ph{aspect-ratio:auto;height:100%;min-height:260px}

/* ---------- about (home + about page) ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,80px);align-items:start}
.about-photo .ph{aspect-ratio:4/5}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.about-copy p{margin-bottom:18px}
.about-copy p.big{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.35;color:var(--spruce)}
.creds{border-top:1px solid var(--line);margin:8px 0 18px}
.creds li{padding:11px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:16px}
.creds li > span:first-child{font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}

/* ---------- contact (home) ---------- */
.contact-home{background:var(--paper);border-top:1px solid var(--line)}
.contact-grid-home{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,80px);align-items:start}
.contact-home h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.contact-home .sub{font-size:1.2rem;color:var(--ink-soft)}
.reach{border-top:2px solid var(--ink)}
.reach li{padding:16px 0;border-bottom:1px solid var(--line)}
.reach .k{display:block;font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.reach a{font-size:1.2rem;font-weight:700;display:inline-block;padding:6px 0}
.reach .email{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.5rem);word-break:break-word}

/* ---------- inner page head ---------- */
.page-head{padding:clamp(40px,6vw,72px) 0 clamp(16px,3vw,28px)}
.page-head h1,.section-title{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:14px}
.page-head .intro,.section-intro{font-size:1.15rem;color:var(--ink-soft);max-width:62ch}
.kicker{display:none}           /* old script labels, retired */

/* ---------- work page ---------- */
.work-page .project{grid-template-columns:repeat(12,minmax(0,1fr))}
.work-page .project .shots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.3fr);gap:14px;align-items:end}

/* ---------- pricing page ---------- */
.subhead{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 6px}
.subhead-note{color:var(--ink-soft);margin-bottom:22px}
.price-section{padding-top:clamp(36px,5vw,56px);border-top:2px solid var(--ink);margin-top:clamp(40px,6vw,64px)}
.ways{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.way{padding:24px 28px 24px 0}
.way + .way{padding:24px 0 24px 28px;border-left:1px solid var(--line)}
.way h3{font-size:1.4rem;margin-bottom:8px}
.way p{color:var(--ink-soft);margin-bottom:8px}
.way .fit{color:var(--ink);font-weight:700;font-size:.98rem}

.price-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan{padding:26px 26px 28px;display:flex;flex-direction:column}
.plan:first-child{padding-left:0}
.plan:last-child{padding-right:0}
.plan + .plan{border-left:1px solid var(--line)}
.plan h3{font-size:1.35rem;margin-bottom:6px}
.plan .who{color:var(--ink-soft);font-size:1rem;margin-bottom:14px}
.plan .price{font-family:var(--serif);font-weight:600;font-size:2.6rem;line-height:1;color:var(--spruce)}
.plan .per{color:var(--ink-soft);font-size:.95rem;margin:4px 0 16px}
.plan ul{flex:1;margin-bottom:20px}
.plan li{padding:6px 0 6px 20px;position:relative;font-size:1rem}
.plan li::before{content:"";position:absolute;left:0;top:1em;width:9px;height:2px;background:var(--accent)}
.plan .btn{align-self:flex-start}
.price-note{color:var(--ink-soft);font-size:1rem}

.rescue{
  margin-top:clamp(28px,4vw,40px);border:1px solid var(--spruce);border-radius:var(--radius);
  padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--white);
}
.rescue h3{font-size:1.4rem;margin-bottom:6px}
.rescue p{color:var(--ink-soft)}

.addon-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,48px);align-items:start}
.addons{border-top:1px solid var(--line)}
.addon{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.addon strong{font-weight:600}
.addon .amt{font-weight:700;color:var(--spruce);white-space:nowrap}
.addons-wide{columns:2;column-gap:40px;border-top:none}
.addons-wide .addon{break-inside:avoid}
.bundle{border:1px solid var(--spruce);border-radius:var(--radius);padding:24px;background:var(--white)}
.bundle .script-lbl{display:block;font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.bundle h3{font-size:1.4rem;margin-bottom:8px}
.bundle p{color:var(--ink-soft);font-size:1rem;margin-bottom:10px}
.bundle li{padding:6px 0;border-bottom:1px solid var(--line);font-size:1rem}
.bundle-price{font-family:var(--serif);font-size:2rem;color:var(--spruce)!important;margin-top:12px}
.bundle-price s{font-size:1.15rem;color:var(--ink-soft);margin-right:8px}
.bundle .btn{width:100%;margin-top:6px}

/* name your price slider */
.nyp{margin-top:clamp(40px,6vw,64px);border:1px solid var(--line);background:var(--white);border-radius:var(--radius);padding:clamp(24px,4vw,40px)}
.nyp h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:8px}
.nyp .script{font-style:italic;font-weight:500}
.nyp > p{color:var(--ink-soft);margin-bottom:22px}
.slider-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.big-amt{font-family:var(--serif);font-weight:600;font-size:2.6rem;color:var(--spruce);min-width:150px;line-height:1}
input[type=range]{flex:1;min-width:200px;height:44px;accent-color:var(--spruce);cursor:pointer;background:transparent}
.slider-result{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.slider-result p{font-size:1.05rem}

/* FAQ uses <details>, no script needed */
.faq{margin-top:clamp(40px,6vw,64px)}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;
  font-weight:700;font-size:1.05rem;color:var(--spruce);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 1.5rem var(--serif);color:var(--spruce)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 18px;color:var(--ink-soft)}

/* ---------- contact page / form ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,72px);align-items:start}
.contact-info p{color:var(--ink-soft);margin-bottom:20px}
.next-steps{counter-reset:n;border-top:1px solid var(--line);margin-top:8px}
.next-steps li{counter-increment:n;padding:12px 0 12px 34px;border-bottom:1px solid var(--line);position:relative}
.next-steps li::before{content:counter(n);position:absolute;left:0;top:10px;font:600 1.3rem var(--serif);color:var(--sage)}
form.quote{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,32px)}
.field{margin-bottom:18px}
label{display:block;font-weight:700;font-size:1rem;margin-bottom:6px;color:var(--ink)}
label .opt{font-weight:400;color:var(--ink-soft)}
input,select,textarea{
  width:100%;min-height:50px;padding:12px 14px;
  border:1px solid #B9B19A;border-radius:var(--radius);
  font:400 1.05rem var(--sans);background:var(--cream);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:3px solid var(--accent);outline-offset:0;border-color:var(--spruce)}
textarea{min-height:140px;resize:vertical}
.field.err input,.field.err textarea{border-color:#A3361F;outline:2px solid #A3361F}
.err-msg{color:#9A321C;font-size:.95rem;margin-top:6px;display:none}
.field.err .err-msg{display:block}
.hp{position:absolute;left:-9999px}
form.quote .btn{width:100%}

/* ---------- footer ---------- */
footer{background:var(--spruce-deep);color:var(--on-dark-soft);font-size:1rem}
.foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:36px;padding-block:48px 36px}
.foot-logo{height:42px;width:auto;margin-bottom:12px}
.foot p{color:var(--on-dark-soft)}
.foot h2{font:700 .85rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);margin-bottom:10px}
.foot a{color:var(--on-dark);text-decoration:none;display:inline-block;padding:5px 0}
.foot a:hover{text-decoration:underline}
.foot ul li{line-height:1.3}
.foot-bottom{border-top:0;background:linear-gradient(var(--line-dark),var(--line-dark)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;padding-block:18px 22px;font-size:.92rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- phone quick bar (bottom of screen on phones) ---------- */
.mbar{display:none}

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

/* ---------- tablet ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .hero-note{max-width:520px}
  .project .shots,.project.flip .shots,.project .info,.project.flip .info{grid-column:1 / -1;order:0}
  .project.project-feature .info{grid-template-columns:1fr}
  .svc-row,.offer-grid,.print-grid,.about-grid,.contact-grid-home,.contact-grid,.addon-row{grid-template-columns:1fr}
  .about-photo{max-width:340px}
  .foot{grid-template-columns:1fr 1fr}
  .foot > div:first-child{grid-column:1 / -1}
  .price-cols{grid-template-columns:1fr}
  .plan,.plan:first-child,.plan:last-child{padding:24px 0}
  .plan + .plan{border-left:none;border-top:1px solid var(--line)}
}

/* ---------- phone ---------- */
@media (max-width:720px){
  body{font-size:1.0625rem;padding-bottom:64px}     /* 17px, plus room for the quick bar */
  .logo-img{height:36px}
  .nav{min-height:64px}
  .menu-btn{display:inline-flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:2px solid var(--ink);padding:6px var(--gutter) 14px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:1.1rem}
  .nav-links a[aria-current="page"]{border-bottom-color:var(--line);box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
  .nav-links .nav-contact{margin:12px 0 0;text-align:center}

  .hero-actions .btn{width:100%}
  .hero-note .ky{display:none}
  .about-photo{max-width:260px}
  .project.project-feature .shots{grid-template-columns:minmax(0,1fr) minmax(0,.38fr)}
  .work-page .project .shots{grid-template-columns:minmax(0,1fr) minmax(0,.38fr)}
  .parts{columns:1}
  .print-photos{grid-template-columns:1fr 1fr}
  .print-photos figure:nth-child(1){grid-column:1 / -1;grid-row:auto}
  .print-photos figure:nth-child(2),.print-photos figure:nth-child(3){grid-column:auto}
  .print-photos figure:nth-child(1) .ph{aspect-ratio:4/3;height:auto;min-height:0}
  .ways{grid-template-columns:1fr}
  .way,.way + .way{padding:20px 0;border-left:none}
  .way + .way{border-top:1px solid var(--line)}
  .addons-wide{columns:1}
  .faq-cols{grid-template-columns:1fr}
  .creds li{grid-template-columns:1fr;gap:2px}
  .foot{grid-template-columns:1fr}
  .rescue .btn,.slider-result .btn,.yours .btn{width:100%}

  .mbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:grid;grid-template-columns:repeat(4,1fr);
    background:var(--cream);border-top:1px solid var(--ink);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:58px;color:var(--spruce);text-decoration:none;font-size:.85rem;font-weight:700;
  }
  .mbar a + a{border-left:1px solid var(--line)}
  .mbar svg{width:20px;height:20px;stroke:currentColor}
}

/* ---------- temporary new-domain notice (see js/app.js) ---------- */
.secure-note{
  position:fixed;z-index:80;left:50%;bottom:24px;transform:translateX(-50%);
  width:min(560px,calc(100% - 2 * var(--gutter)));
  background:var(--cream);border:2px solid var(--spruce);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(10,43,35,.25);
  padding:18px 20px;display:flex;flex-direction:column;gap:12px;
}
.secure-note p{font-size:1rem;max-width:none}
.secure-note b{color:var(--spruce)}
.secure-note .btn{align-self:flex-end;min-height:44px;padding:8px 20px}
@media (max-width:720px){.secure-note{bottom:76px}}   /* sits above the phone quick bar */