/* Cornerstone Garage Doors, main stylesheet */

:root {
  /* Type. Georgia and the system sans stack are both installed everywhere, so
     the site pulls no webfonts at all. See the house theme block below. */
  --font-display: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Legacy palette, kept as the fallback. These apply only if the
     data-palette="house" attribute is removed from <html>, which is the
     kill switch if the house theme ever needs backing out in a hurry. */
  --navy: #0f2a44;
  --navy-dark: #091a2c;
  --gold: #c89b3c;
  --gold-dark: #a47e2c;
  --bg: #ffffff;
  --bg-soft: #f6f4ef;
  --bg-dark: #0f2a44;
  --text: #1c1f24;
  --text-muted: #5b6470;
  --text-on-dark: #f5f0e6;
  --border: #e6e3dc;
  --shadow-sm: 0 1px 2px rgba(15, 42, 68, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 42, 68, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 42, 68, 0.16);
  --radius: 10px;
  --radius-lg: 16px;
  /* Outer content width. Raised from 1180px on 2026-08-06: at 1920 the old
     value left ~370px dead on each side. Safe to widen because reading measure
     is protected separately, .narrow caps prose at 720px and .hero-text at
     580px, so this only gives room to grids, cards and two-column layouts. */
  --max-w: 1440px;
}

/* ===================================================================
   GUINCO HOUSE THEME, "Nautilus"
   Navy #051c2c + brass gold #c2a25a, matching Nexus. Two colors only,
   everything else neutral. Additive and gated: drop data-palette="house"
   off <html> and the legacy palette above takes over again.

   The gold discipline is the part that is easy to get wrong. Pure
   #c2a25a is only 2.44:1 on white, so it must NEVER be text on a light
   surface. --gold-dark carries the legible brass (#8a6d2c, ~4.6:1) for
   text on light; --gold is for fills, rules, and text on navy.
   =================================================================== */
[data-palette="house"] {
  --navy: #051c2c;
  --navy-dark: #03131e;
  --gold: #c2a25a;      /* fills, hairlines, and text ON navy */
  --gold-dark: #8a6d2c; /* the only brass allowed as text on light */
  --bg-dark: #051c2c;
  --shadow-sm: 0 1px 2px rgba(5, 28, 44, 0.06);
  --shadow-md: 0 8px 24px rgba(5, 28, 44, 0.08);
  --shadow-lg: 0 16px 48px rgba(5, 28, 44, 0.16);
}

/* Signature detailing: the naval-instrument cues that make this read as
   Nautilus rather than generic navy. */

/* Brass hairline under section headings, the engraved-plate detail. */
[data-palette="house"] main h2 {
  border-bottom: 1.5px solid rgba(194, 162, 90, 0.4);
  padding-bottom: 0.28em;
}

/* Tracked uppercase micro-labels read as brass instrument plates. */
[data-palette="house"] .eyebrow,
[data-palette="house"] .site-footer h3 {
  letter-spacing: 0.13em;
}

/* Masthead brass rail: inset so it adds no layout shift. */
[data-palette="house"] .site-header {
  box-shadow: inset 0 -2px 0 rgba(194, 162, 90, 0.4);
}

/* Brass focus rings, for keyboard users. */
[data-palette="house"] :focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--navy); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--gold-dark); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; }

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

/* UTILITIES */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--text-muted); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 0.5em;
}
.lede { font-size: 1.15rem; color: #354051; }

/* READING MEASURE.
   --max-w is 1440px so grids, cards and two-column layouts can use a desktop
   screen. Prose must not inherit that width: at 1440 a paragraph runs roughly
   150 characters per line, about double what is comfortable to read.

   This caps the measure at the element rather than the container, which is why
   it needs no template changes. It is a max, so cards and grid cells that are
   already narrower are untouched; only blocks that would otherwise stretch the
   full container are affected. */
main p,
main li {
  max-width: 68ch;
}
/* .lede is 1.15rem, and ch scales with the element's own font size, so the
   68ch above resolved to 786px on it, which measured 83 actual characters per
   rendered line. Larger type needs a tighter ch count, not the same one. */
main .lede {
  max-width: 58ch;
}
/* Centered blocks would otherwise sit left inside their capped box. */
main .center p,
main .center li,
main .center .lede {
  margin-left: auto;
  margin-right: auto;
}
.mt-lg { margin-top: 2rem; }
.mt-xl { margin-top: 3rem; }

.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 (a11y) */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
  color: #fff;
}

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-logo {
  display: block;
  height: 52px;
  width: auto;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--navy);
}
.brand-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-dark);
}
.primary-nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
}
.primary-nav a {
  color: var(--text);
  font-weight: 500;
  font-size: 0.97rem;
}
.primary-nav a:hover { color: var(--navy); }

.phone-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  background: var(--gold);
  color: var(--navy-dark);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 700;
  border: 2px solid var(--gold);
  transition: background 0.15s, color 0.15s;
}
.phone-cta:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--navy-dark);
}
.phone-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.78;
}
.phone-num { font-size: 1.05rem; }

/* HERO (homepage) */
.hero {
  padding: 72px 0 88px;
  background: linear-gradient(180deg, #fbfaf6 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-text { max-width: 580px; }
.hero h1 { margin-top: 0.4em; }
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.trust-strip {
  margin-top: 24px;
  font-size: 0.92rem;
  color: var(--text-muted);
  font-weight: 500;
}
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* PAGE HERO (interior pages) */
.page-hero {
  padding: 64px 0 32px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

/* BANDS */
.band { padding: 72px 0; }
.band-light { background: var(--bg-soft); }
.band-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
.band-dark h2,
.band-dark h3 { color: #fff; }
.band-dark .lede { color: rgba(245, 240, 230, 0.85); }

/* TWO-COL LAYOUT */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.about-col {
  grid-template-columns: minmax(260px, 360px) 1fr;
  align-items: center;
  gap: 48px;
}
.narrow { max-width: 720px; margin: 0 auto; }

/* PORTRAIT (about page) */
.philosophy-portrait {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 0 1.25rem;
  box-shadow: var(--shadow-md);
}
.portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}

.section-header {
  max-width: 720px;
  margin: 0 0 40px;
}

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.97rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover {
  background: var(--navy);
  color: #fff;
}
.btn-lg {
  padding: 16px 30px;
  font-size: 1.08rem;
}

/* CARD GRID */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.cat-title {
  margin: 0 0 24px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
  font-size: 1.5rem;
}
.cat-title-spaced { margin-top: 56px; }

.service-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy);
}
.service-card .card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0;
}
.service-card p {
  color: var(--text-muted);
  font-size: 0.97rem;
  flex: 1;
  margin: 0;
}
.card-link {
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gold-dark);
  transition: transform 0.18s ease;
  display: inline-block;
}
.service-card:hover .card-link {
  transform: translateX(4px);
}

/* CALLOUT */
.callout {
  background: var(--bg-soft);
  border-left: 4px solid var(--gold);
  padding: 28px 32px;
  border-radius: var(--radius-lg);
}
.callout h2,
.callout h3 { margin-top: 0; color: var(--navy); }
.callout .btn + .btn { margin-left: 8px; }

/* CTA INLINE on detail */
.cta-inline {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.center-cta {
  justify-content: center;
}

/* CONTACT */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.contact-list li {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding: 14px 0;
}
.contact-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}
.contact-value {
  font-size: 1.1rem;
  color: var(--navy);
  font-weight: 600;
}
.contact-form {
  background: var(--bg-soft);
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.contact-form .field {
  margin-bottom: 22px;
}
.contact-form label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.contact-form .optional {
  font-weight: 400;
  color: var(--text-muted);
}
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15, 42, 68, 0.12);
}
.form-promise {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
/* Shown inside <noscript> under the captcha, so it must stand on its own. */
.form-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ALERT */
.alert {
  padding: 24px;
  border-radius: var(--radius-lg);
}
.alert-success {
  background: #ecf5ec;
  border: 1px solid #bcdcbc;
  color: #1f5d1f;
}
.alert-success h2 { color: #1f5d1f; margin-top: 0; }
.alert-error {
  background: #fbeceb;
  border: 1px solid #e3bcb8;
  color: #8a2b22;
  margin-bottom: 24px;
}
.alert-error p { margin: 0; }

/* BULLETS */
.bullets {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.bullets li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid var(--border);
}
.bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--gold-dark);
  font-weight: 700;
}

/* FOOTER */
.site-footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 56px 0 24px;
}
.site-footer a { color: var(--text-on-dark); }
.site-footer a:hover { color: var(--gold); }
.site-footer .brand-name { color: #fff; }
.footer-logo {
  display: block;
  height: 64px;
  width: auto;
  margin-bottom: 16px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}
.site-footer h3 {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 700;
}
.site-footer .muted { color: rgba(245, 240, 230, 0.65); }
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { padding: 4px 0; }
.footer-meta {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 40px 0 56px; }
}

@media (max-width: 800px) {
  .header-row {
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
  }
  .brand { flex: 0 0 auto; }
  .brand-logo { height: 40px; }
  .phone-cta {
    margin-left: auto;
    padding: 6px 12px;
  }
  .phone-num { font-size: 0.95rem; }
  .primary-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
  }
  .primary-nav a { font-size: 0.9rem; padding: 4px 8px; }

  .two-col,
  .two-col.about-col { grid-template-columns: 1fr; gap: 32px; }
  .portrait { max-width: 320px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .band { padding: 48px 0; }
}

@media (max-width: 480px) {
  .hero-cta .btn { width: 100%; text-align: center; }
}

/* Honeypot field: visually hidden from humans (off-screen, not display:none so bots still fill it) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}