/* =========================================================
   Sussex County Locksmith
   Palette sampled directly from Tyler's logo + business card.

   Ground is cream throughout. Navy is spent in exactly two places,
   the top bar and the footer, so the page reads as a light document
   bracketed in brand colour, not a dark site with light patches.

   No gradients. Flat colour, 2px corners, hairline borders instead of
   drop shadows: this is a hardware trade, and the surfaces should read
   as machined rather than floating. The one ornament on the page is the
   key-bitting profile (.keycut), the stepped cut along a key blade.
   ========================================================= */

:root{
  --navy-900:#021632;
  --navy-950:#010f24;
  --navy-800:#06203f;
  --navy-700:#0b2c52;
  --gold:#D4982F;
  --gold-lt:#E8B657;
  --gold-dk:#A8741B;      /* display accent + decoration (large text only) */
  --gold-text:#8C5E14;    /* small text on cream. 5.1:1, WCAG AA */
  --cream:#FAF5F0;
  --cream-2:#F2EAE0;
  --cream-3:#E2D6C6;
  --ink:#12203a;
  --ink-soft:#55647d;
  --white:#fff;

  --wrap:1180px;
  --r:2px;                /* machined edge, not a rounded card */

  --f-display:"Oswald",Impact,"Arial Narrow",sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  text-transform:uppercase;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
p{margin:0 0 1rem;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}

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

.ico{
  width:1.15em;height:1.15em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* =========================================================
   SIGNATURE: the bitting profile of a cut key.
   Used twice: once at full weight under the headline, once quietly
   above each section label. Nowhere else.
   ========================================================= */
.keycut{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 0H120V5H105V9H90V3H75V8H60V4H45V10H30V6H15V9H0Z' fill='%23D4982F'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:left top;
}
.keycut--hero{
  width:min(320px,100%);height:12px;background-size:120px 12px;
  margin-bottom:1.7rem;
}
/* Section heads that carry no label still get the mark, so the
   rhythm matches the heads that do. */
.keycut--rule{width:60px;height:8px;background-size:90px 8px;margin-bottom:1.35rem}

/* Skip link. Off screen until focused, then pinned top-left so a keyboard
   user can jump the header and nav. WCAG 2.4.1 Bypass Blocks, Level A. */
.skiplink{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--navy-900);
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:.95rem;text-decoration:none;
  padding:.8rem 1.2rem;border-radius:var(--r);
}
.skiplink:focus{left:8px;top:8px;outline:3px solid var(--navy-900);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;white-space:nowrap;
  padding:.82rem 1.5rem;border-radius:var(--r);border:2px solid transparent;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn span{font-variant-numeric:tabular-nums}
.btn .ico{width:1.05em;height:1.05em;stroke-width:2.1}
.btn--gold{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn--navy{background:var(--navy-900);color:var(--cream);border-color:var(--navy-900)}
.btn--navy:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn--lg{font-size:1.24rem;padding:1.05rem 2rem}
.btn:focus-visible{outline:3px solid var(--navy-900);outline-offset:3px}

.textlink{
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.04em;font-size:.98rem;text-decoration:none;
  color:var(--navy-800);border-bottom:2px solid var(--cream-3);
  padding-bottom:2px;transition:color .16s ease,border-color .16s ease;
}
.textlink:hover{color:var(--gold-text);border-color:var(--gold)}
.hero .textlink{color:rgba(250,245,240,.92);border-bottom-color:rgba(250,245,240,.42)}
.hero .textlink:hover{color:var(--gold-lt);border-color:var(--gold)}
.hero .textlink:focus-visible{outline-color:var(--gold)}
.textlink:focus-visible{outline:3px solid var(--navy-900);outline-offset:4px}

/* =========================================================
   TOP BAR: the one dark band at the top of the page
   ========================================================= */
.utility{background:var(--navy-950);color:rgba(250,245,240,.68);font-size:.86rem}
.utility__inner{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;padding-block:.5rem}
.utility__item{display:inline-flex;align-items:center;gap:.45rem}
.utility__item .ico{color:var(--gold)}

.header{
  position:sticky;top:0;z-index:50;
  background:var(--navy-900);
  border-bottom:2px solid var(--gold);
}
.header__inner{display:flex;align-items:center;gap:1.5rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.brand__mark{width:auto;height:50px;object-fit:contain}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__text strong{
  font-family:var(--f-display);font-weight:700;font-size:1.16rem;
  text-transform:uppercase;color:var(--cream);
}
.brand__text em{
  font-family:var(--f-display);font-style:normal;font-weight:500;
  font-size:.83rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--gold);margin-top:3px;
}

.nav{display:flex;gap:1.9rem;margin-left:auto}
.nav a{
  font-family:var(--f-display);font-weight:500;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;color:rgba(250,245,240,.82);padding-block:.3rem;
  border-bottom:2px solid transparent;transition:color .16s ease,border-color .16s ease;
}
.nav a:hover{color:var(--gold-lt);border-color:var(--gold)}
.nav a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.header__cta{margin-left:auto}
.nav + .header__cta{margin-left:0}
.header__cta:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* =========================================================
   HERO: one full-bleed photograph, flat navy scrim over it,
   type on top. The scrim is a flat colour, not a gradient.
   Chosen over the cream split layout by measured contrast and
   rendered comparison; see CLAUDE.md.
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--navy-900)}
.hero__photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* Scrim opacity is tuned, not guessed: .56 is the lightest value that
   keeps every text element above WCAG AA against the actual pixels
   behind it, measured on the render. Lowering it starts eating the
   margin on the gold eyebrow first. */
.hero__scrim{position:absolute;inset:0;z-index:1;background:rgba(2,22,50,.56)}
.hero__inner{position:relative;z-index:2;padding-block:clamp(3.2rem,7.5vw,6rem)}
.hero__copy{max-width:900px}

.eyebrow{
  font-family:var(--f-display);font-weight:500;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold);
  margin:0 0 1.1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.eyebrow i{font-style:normal;color:rgba(212,152,47,.5)}

.hero__title{
  font-size:clamp(2.9rem,6.8vw,5.2rem);
  font-weight:700;letter-spacing:-.01em;line-height:.97;
  color:var(--white);
  margin-bottom:1.5rem;
}
.hero__title-accent{color:var(--gold)}

.hero__lede{
  font-size:1.16rem;line-height:1.65;color:rgba(250,245,240,.92);
  max-width:56ch;margin-bottom:2rem;
}

.hero__actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:2.4rem}

.hero__trust{
  display:flex;gap:1rem 2.4rem;flex-wrap:wrap;
  padding-top:1.6rem;border-top:1px solid rgba(250,245,240,.26);
}
.hero__trust li{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:rgba(250,245,240,.92)}
.hero__trust .ico{color:var(--gold);width:1.05rem;height:1.05rem}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding-block:clamp(3.5rem,7vw,5.5rem);background:var(--cream)}
.section--cream{background:var(--cream-2)}

.kicker{
  font-family:var(--f-display);font-weight:500;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold-text);
  margin:0 0 .8rem;
}
.kicker::before{
  content:"";display:block;width:60px;height:8px;margin-bottom:.9rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 0H120V5H105V9H90V3H75V8H60V4H45V10H30V6H15V9H0Z' fill='%23D4982F'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:90px 8px;
}

.section__head{max-width:760px;margin-bottom:3rem}
.section__head h2{font-size:clamp(1.9rem,3.7vw,2.7rem);color:var(--navy-900);margin-bottom:1rem}
.section__sub{font-size:1.08rem;color:var(--ink-soft);margin:0}

/* ---------- service cards ---------- */
/* Two-up, not four-across. Each card carries a real list of five or six
   services, and at four across the lines wrap to nothing. */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.card{
  background:var(--white);border:1px solid var(--cream-3);border-radius:var(--r);
  padding:1.9rem 1.7rem;
  transition:border-color .16s ease;
}
.card:hover{border-color:var(--gold)}
.card--accent{background:var(--cream);border-color:var(--gold-dk)}
.card h3{font-size:1.34rem;color:var(--navy-900);margin-bottom:.6rem}
.card > p{font-size:.98rem;color:var(--ink-soft);margin-bottom:1.1rem}
.card ul li{
  position:relative;padding-left:1.35rem;margin-bottom:.5rem;
  font-size:.96rem;color:var(--ink);
}
.card ul li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:7px;height:7px;background:var(--gold);
}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:3.5rem;align-items:center}
.about__mark img{width:min(100%,270px);margin-inline:auto;height:auto}
.about__copy h2{font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--navy-900);margin-bottom:1.1rem}
.about__copy p{color:var(--ink-soft)}
.about__stamp{
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.86rem;color:var(--gold-text);margin:1.4rem 0 0;
  padding-top:1rem;border-top:1px solid var(--cream-3);
}

/* ---------- final CTA ---------- */
/* Cream, not navy. It sits directly above the navy footer and the two
   would otherwise merge into one dark slab. */
.cta{background:var(--cream);border-top:1px solid var(--cream-3)}
.cta__inner{padding-block:clamp(3rem,6vw,4.6rem);max-width:760px}
.cta h2{font-size:clamp(1.9rem,4vw,2.9rem);color:var(--navy-900);margin-bottom:.9rem}
.cta p{color:var(--ink-soft);max-width:56ch;margin:0 0 2rem;font-size:1.06rem}

/* ---------- footer ---------- */
.footer{background:var(--navy-900);color:rgba(250,245,240,.72);font-size:.95rem;border-top:2px solid var(--gold)}
.footer__inner{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.2rem;padding-block:3rem 2.4rem}
.footer__brand{display:flex;gap:.9rem;align-items:center}
.footer__brand img{width:auto;height:62px;object-fit:contain}
.footer__brand strong{
  display:block;font-family:var(--f-display);font-weight:700;font-size:1.1rem;
  text-transform:uppercase;color:var(--cream);
}
.footer__brand span{
  display:block;font-family:var(--f-display);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-top:3px;
}
.footer__col h4{font-size:.86rem;letter-spacing:.12em;color:var(--white);margin-bottom:.9rem}
.footer__col a,.footer__col span{display:block;text-decoration:none;margin-bottom:.45rem;color:rgba(250,245,240,.72)}
.footer__col a[href^="tel:"]{font-variant-numeric:tabular-nums}
.footer__col a:hover{color:var(--gold-lt)}
.footer__col a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.footer__muted{color:rgba(250,245,240,.42);font-style:italic}
/* Named towns, not just the county. Search traffic is "locksmith Georgetown DE",
   never "locksmith Sussex County". Kept quiet in the footer so it reads as
   reference rather than keyword stuffing. */
.footer__towns{padding-bottom:1.6rem}
.footer__towns h4{
  font-family:var(--f-display);font-weight:500;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .5rem;
}
.footer__towns p{
  margin:0;font-size:.85rem;line-height:1.7;color:rgba(250,245,240,.5);max-width:80ch;
}
.footer__base{border-top:1px solid rgba(226,214,198,.16);padding-block:1.2rem}
.footer__base p{margin:0;font-size:.86rem;color:rgba(250,245,240,.5)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .nav{display:none}
  .header__cta{margin-left:auto}
  .about{grid-template-columns:1fr;gap:2.4rem}
  .about__mark{display:none}
  .footer__inner{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .cards{grid-template-columns:1fr}
}

@media (max-width:600px){
  body{font-size:16px}
  .utility__inner{gap:.35rem;flex-direction:column;align-items:center;text-align:center}
  .brand__mark{height:42px}
  .brand__text strong{font-size:1rem}
  .brand__text em{font-size:.72rem}
  .header__cta span{display:none}
  .header__cta{padding:.75rem .9rem}
  .header__cta .ico{width:1.3em;height:1.3em}

  /* Someone using this page is usually standing at a locked door.
     The call button has to be reachable without a scroll. */
  .hero__inner{padding-block:2.4rem 2.6rem}
  .eyebrow{font-size:.74rem;margin-bottom:.9rem}
  .hero__title{font-size:clamp(2.4rem,9.6vw,3.1rem);margin-bottom:1.1rem}
  .keycut--hero{width:min(220px,100%);margin-bottom:1.3rem}
  .hero__lede{font-size:1.02rem;margin-bottom:1.6rem}
  .hero__actions{gap:1.1rem;margin-bottom:1.8rem}
  .hero__trust{padding-top:1.3rem;gap:.75rem;flex-direction:column}
  .btn--lg{width:100%;justify-content:center}

  .footer__inner{grid-template-columns:1fr;gap:1.8rem}

  /* Thumb-sized tap targets (44px min) for the footer links.
     One of them is the phone number. */
  .footer__col a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
  .footer__col span{display:flex;align-items:center;min-height:36px;margin-bottom:0}
  .textlink{display:inline-flex;align-items:center;min-height:44px}
}

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