/* ==========================================================================
   JS Construction — shared base
   Reset, a11y helpers, .ph + [data-confirm] honesty markers, utility classes,
   shared estimate-form skin, sticky mobile action bar, back-to-hub pill.
   Concepts load this AFTER tokens.css and BEFORE their own style.css,
   so every rule here can be overridden per concept.
   ========================================================================== */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--js-green-logo);outline-offset:2px;border-radius:2px}

/* ---------- a11y helpers ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--js-green);
  color:#fff;padding:10px 16px;border-radius:0 0 var(--r-md) 0;font-weight:700}
.skip-link:focus{left:0}

/* ---------- honesty markers: .ph placeholders + [data-confirm] ---------- */
/* Hidden by default. The hub's "Highlight placeholders" toggle adds .ph-show
   to <html> (and ?ph=1 carries it across file:// pages). */
.ph{font-style:normal}
html.ph-show .ph{
  outline:1.5px dashed var(--js-amber);outline-offset:2px;border-radius:3px;
  background:var(--js-amber-bg);padding:0 .2em;
}
[data-confirm]{position:relative}
html.ph-show [data-confirm]{outline:1.5px dashed var(--js-amber);outline-offset:4px;border-radius:6px}
html.ph-show [data-confirm]::after{
  content:"Confirm with JS";position:absolute;top:-10px;left:10px;z-index:5;
  background:var(--js-amber);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none;
  font-family:Inter,sans-serif;text-transform:none;line-height:1.3;box-shadow:var(--sh-sm)}

/* stock-photo marker — these are licensed stock images standing in for JS's real
   work; swap before launch. Visible only when placeholder-highlight is on. */
[data-stock]{position:relative}
html.ph-show [data-stock]{outline:2px dashed var(--js-amber);outline-offset:-2px}
html.ph-show [data-stock]::after{
  content:"Stock photo — replace with JS's project";position:absolute;top:8px;left:8px;z-index:5;
  background:var(--js-amber);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:var(--r-pill);pointer-events:none;
  font-family:Inter,sans-serif;text-transform:none;line-height:1.3;box-shadow:var(--sh-sm);max-width:90%}

/* ---------- layout utilities ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.container-narrow{max-width:var(--container-narrow)}
.section{padding-block:clamp(48px,8vw,104px)}
.stack>*+*{margin-top:var(--sp-4)}
.grid{display:grid;gap:var(--sp-5)}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.sr-note{font-size:.85rem;color:var(--js-gray)}

/* roofline-chevron + window-grid motif helpers (shared, concepts may restyle) */
.motif-rule{display:inline-flex;align-items:center;gap:.6em}
.motif-rule::before,.motif-rule::after{content:"";width:28px;height:3px;background:var(--js-green-logo);border-radius:2px}

/* ---------- buttons (base; concepts restyle) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:14px 22px;border-radius:var(--r-md);font-weight:700;line-height:1;
  min-height:48px;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  cursor:pointer;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--js-green);color:#fff}
.btn-primary:hover{background:var(--js-green-deep)}
.btn-ghost{background:transparent;border:2px solid currentColor}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* ---------- shared estimate form skin (concepts override colors/spacing) ---------- */
.jsform{display:grid;gap:var(--sp-4)}
.jsform-row{display:grid;gap:var(--sp-4)}
@media(min-width:620px){.jsform-row.cols-2{grid-template-columns:1fr 1fr}}
.jsform-field{display:flex;flex-direction:column;gap:6px}
.jsform-field label{font-weight:600;font-size:.95rem}
.jsform-field .req{color:var(--js-green);margin-left:2px}
.jsform-input,.jsform-select,.jsform-textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--js-stone);border-radius:var(--r-md);
  background:#fff;color:#141414;min-height:48px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.jsform-textarea{min-height:120px;resize:vertical}
.jsform-input:focus,.jsform-select:focus,.jsform-textarea:focus{
  border-color:var(--js-green);box-shadow:0 0 0 3px rgba(0,107,10,.15)}
.jsform-input[aria-invalid="true"],.jsform-select[aria-invalid="true"],.jsform-textarea[aria-invalid="true"]{
  border-color:#B91C1C;box-shadow:0 0 0 3px rgba(185,28,28,.15)}
.jsform-error{color:#B91C1C;font-size:.85rem;min-height:1em;font-weight:600}
.jsform-hint{color:var(--js-gray);font-size:.85rem}
.jsform-photos-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.jsform-photos-preview img{width:68px;height:68px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--js-stone)}
.jsform-submit{width:100%}
.jsform-status{border-radius:var(--r-md);padding:16px 18px;font-weight:600;display:none}
.jsform-status.is-success{display:block;background:rgba(0,107,10,.10);border:1.5px solid var(--js-green);color:var(--js-green-deep)}
.jsform-status.is-error{display:block;background:rgba(185,28,28,.08);border:1.5px solid #B91C1C;color:#B91C1C}
.jsform[aria-busy="true"] .jsform-submit{opacity:.7;pointer-events:none}

/* ---------- sticky mobile action bar (Call · Text · Estimate) ---------- */
.js-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-stickybar);
  display:none;grid-template-columns:1fr 1fr 1.4fr;gap:1px;
  background:var(--js-black);box-shadow:0 -6px 20px rgba(0,0,0,.25);
  padding-bottom:env(safe-area-inset-bottom)}
.js-stickybar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:10px 6px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:#fff;min-height:58px;background:var(--js-ink)}
.js-stickybar a.is-cta{background:var(--js-green);color:#fff}
.js-stickybar a svg{width:20px;height:20px}
.js-stickybar a:active{filter:brightness(1.1)}
@media(max-width:768px){
  .js-stickybar{display:grid}
  body.has-stickybar{padding-bottom:66px}
}
.js-stickybar.is-hidden{transform:translateY(110%);transition:transform var(--dur) var(--ease)}
@media (prefers-reduced-motion: reduce){.js-stickybar.is-hidden{transition:none}}

/* ---------- back-to-hub pill (demo nav aid) ---------- */
/* Bottom-left so it never collides with a header top bar, CTA, or license line. */
.js-backpill{position:fixed;bottom:20px;left:20px;top:auto;z-index:var(--z-backpill);
  display:inline-flex;align-items:center;gap:8px;background:rgba(10,10,10,.86);color:#fff;
  padding:8px 14px 8px 11px;border-radius:var(--r-pill);font-size:.82rem;font-weight:700;
  backdrop-filter:blur(6px);box-shadow:var(--sh-md);border:1px solid rgba(255,255,255,.14)}
.js-backpill:hover{background:var(--js-green);color:#fff}
.js-backpill .num{opacity:.7;font-weight:600}
.js-backpill svg{width:15px;height:15px}
/* lift above the sticky mobile action bar on small screens */
@media(max-width:768px){.js-backpill{bottom:76px;font-size:.78rem}}

/* ---------- lazy image / blueprint placeholder ---------- */
.ph-photo{position:relative;overflow:hidden;background:
  linear-gradient(rgba(0,107,10,.06),rgba(0,107,10,.06)),
  repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(10,10,10,.06) 24px),
  repeating-linear-gradient(90deg,transparent,transparent 23px,rgba(10,10,10,.06) 24px),
  var(--js-stone);
  color:var(--js-gray);display:flex;align-items:flex-end;min-height:220px}
.ph-photo .cap{padding:10px 12px;font-size:.8rem;font-weight:600;background:rgba(255,255,255,.72);width:100%}
.ph-photo.on-dark{background:
  linear-gradient(rgba(0,138,18,.14),rgba(0,138,18,.14)),
  repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(255,255,255,.06) 24px),
  repeating-linear-gradient(90deg,transparent,transparent 23px,rgba(255,255,255,.06) 24px),
  var(--js-charcoal);color:var(--js-gray-light)}
.ph-photo.on-dark .cap{background:rgba(10,10,10,.6);color:#d8d8d8}

/* reduced motion: kill transforms/animations globally as a safety net */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}