/* ===========================================================================
   Precision Collections, LLC — site styles
   ---------------------------------------------------------------------------
   ⚠️ THE PALETTE BELOW IS PROVISIONAL.

   Jennifer asked for the colours to be pulled from her logo, and the logo has
   not been supplied yet (the intake wizard takes no file uploads, so there is
   no copy of it anywhere). Her intake listed sixteen unrelated hex values —
   deep purple, navy, royal blue, pink, peach, cream and teal — which is a
   swatch dump, not a palette.

   Until the logo arrives this uses a restrained navy + teal that matches the
   "clean and modern / professional, modern, friendly" brief and keeps every
   text pairing above WCAG AA. Every colour is a token on :root, so swapping
   the whole scheme is an edit to THIS BLOCK ONLY — no page or component needs
   touching.
   =========================================================================== */

:root {
  --navy-900: #0b2545;
  --navy-800: #13315c;
  --navy-700: #1d4e77;
  --teal-600: #0f7b8a;
  --teal-500: #159aab;
  --teal-050: #e6f4f6;

  --ink:        #14202e;
  --ink-soft:   #46586c;
  --line:       #dbe3ec;
  --surface:    #ffffff;
  --surface-2:  #f5f8fb;

  --brand:      var(--navy-800);
  --brand-deep: var(--navy-900);
  --accent:     var(--teal-600);
  --accent-lt:  var(--teal-050);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(11, 37, 69, .06), 0 8px 24px rgba(11, 37, 69, .08);
  --wrap: 1120px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; color: var(--brand-deep); margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }

a { color: var(--teal-600); }
a:hover { color: var(--navy-800); }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-deep); color: #fff; padding: .75rem 1rem;
}
.skip:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- header ------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 74px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }

.brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--brand); color: #fff;
  font-weight: 700; letter-spacing: .02em;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; color: var(--brand-deep); font-size: 1.05rem; }
.brand-sub  { font-size: .78rem; color: var(--ink-soft); }

/* The phone number is a stated must-have: "big and obvious". */
.head-phone { text-decoration: none; text-align: right; line-height: 1.15; }
.head-phone-label { display: block; font-size: .72rem; text-transform: uppercase;
                    letter-spacing: .08em; color: var(--ink-soft); }
.head-phone-num   { display: block; font-size: 1.22rem; font-weight: 700; color: var(--brand-deep); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--radius-sm); cursor: pointer;
}
.bars, .bars::before, .bars::after {
  display: block; width: 20px; height: 2px; background: var(--brand-deep);
  margin-inline: auto; position: relative;
}
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; } .bars::after { top: 6px; }

.site-nav { flex-basis: 100%; }
.site-nav ul {
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
  list-style: none; margin: 0; padding: 0 0 .75rem;
}
.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: .95rem;
  padding: .35rem 0; display: inline-block; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--brand-deep); }
.site-nav a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; border-bottom-color: var(--accent); }

.nav-cta a {
  background: var(--accent); color: #fff; padding: .4rem .9rem;
  border-radius: 999px; border-bottom: 0; font-weight: 600;
}
.nav-cta a:hover { background: var(--navy-800); color: #fff; }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 600; border: 2px solid var(--accent); cursor: pointer;
}
.btn:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn-lg { padding: .95rem 1.9rem; font-size: 1.05rem; }
.btn-ghost { background: transparent; color: var(--brand-deep); border-color: currentColor; }
.btn-ghost:hover { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }

/* --- hero --------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(21,154,171,.16), transparent 60%),
    var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 7vw, 5rem) 0;
}
.hero p.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.hero-badges li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .9rem; font-size: .88rem; color: var(--ink-soft);
}
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* --- sections ----------------------------------------------------------- */

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 2rem; }
.section-head p { color: var(--ink-soft); }

.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card-link { display: inline-block; margin-top: .5rem; font-weight: 600; text-decoration: none; }
.card-link::after { content: " →"; }

.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding-left: 1.75rem; position: relative; margin-bottom: .6rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-lt);
}

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; padding-left: 3.25rem; position: relative; margin-bottom: 1.5rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700;
}
.steps h3 { margin-bottom: .25rem; }

/* --- areas -------------------------------------------------------------- */

.area-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .4rem 1rem; list-style: none; padding: 0; margin: 1.5rem 0 0;
}
.area-list li { color: var(--ink-soft); padding-left: 1.1rem; position: relative; }
.area-list li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }

/* --- gallery ------------------------------------------------------------ */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery figcaption { padding: .65rem .9rem; font-size: .88rem; color: var(--ink-soft); }

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

.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: .75rem; background: var(--surface);
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary { font-weight: 600; cursor: pointer; color: var(--brand-deep); }
.faq summary::marker { color: var(--accent); }
.faq details > *:not(summary) { margin-top: .75rem; }

/* --- forms -------------------------------------------------------------- */

.form { max-width: 640px; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--brand-deep); }
.field .hint { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .85rem; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.required { color: var(--teal-600); }

.hp { position: absolute; left: -9999px; }   /* honeypot */

.notice { border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.notice-ok   { background: var(--accent-lt); border: 1px solid var(--teal-500); }
.notice-bad  { background: #fdecec; border: 1px solid #d64545; }

/* --- CTA band + footer -------------------------------------------------- */

.cta-band {
  background: var(--brand-deep); color: #fff;
  padding: clamp(2.5rem, 6vw, 4rem) 0; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c8d7e8; max-width: 56ch; margin-inline: auto; }
.cta-band .cta-row { justify-content: center; }
.cta-band .btn-ghost { color: #fff; }
.cta-band .btn-ghost:hover { background: #fff; color: var(--brand-deep); border-color: #fff; }

.site-foot { background: var(--surface-2); border-top: 1px solid var(--line); padding-top: 3rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.foot-col h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: .4rem; color: var(--ink-soft); }
.foot-col a { color: var(--ink-soft); text-decoration: none; }
.foot-col a:hover { color: var(--brand-deep); text-decoration: underline; }
.foot-brand { font-weight: 700; color: var(--brand-deep); margin-bottom: .25rem; }
.foot-areas { color: var(--ink-soft); font-size: .92rem; }

.foot-legal {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  border-top: 1px solid var(--line); margin-top: 2.5rem; padding-block: 1.25rem;
  font-size: .88rem; color: var(--ink-soft);
}
.foot-legal p { margin: 0; }
.foot-legal a { color: var(--ink-soft); }

/* --- small screens ------------------------------------------------------ */

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding-bottom: 1rem; }
  .site-nav li { border-top: 1px solid var(--line); }
  .site-nav a { padding: .7rem 0; width: 100%; }
  .nav-cta a { text-align: center; margin-top: .75rem; }
  .head-phone-num { font-size: 1.05rem; }
}

@media print {
  .site-head, .cta-band, .nav-toggle { display: none; }
}