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

  :root {
    --gold: #D44332;
    --gold-light: #F0C4BE;
    --gold-dark: #A83528;
    --navy: #2E4D84;
    --navy-mid: #375990;
    --navy-light: #40659C;
    --off-white: #FFFFFF;
    --text-muted: #8A96B8;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'DM Sans', sans-serif;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    background: var(--navy);
    color: var(--off-white);
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 5%;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(14, 26, 58, 0.1);
    box-shadow: 0 2px 16px rgba(14,26,58,0.08);
  }

  .nav-logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  .nav-logo img { display: block; }

  .nav-links { display: flex; gap: 2.5rem; list-style: none; }

  .nav-links a {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    transition: color 0.25s;
  }

  .nav-links a:hover { color: var(--gold); }

  .nav-cta {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--gold);
    padding: 0.6rem 1.4rem;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.25s;
  }

  .nav-cta:hover { background: var(--gold-light); }

  /* ── HERO ── */
  #hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8rem 5% 5rem;
    position: relative;
    overflow: hidden;
    contain: layout;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 70% at 75% 50%, rgba(201,168,76,0.07) 0%, transparent 70%),
      radial-gradient(ellipse 40% 50% at 20% 80%, rgba(26,47,69,0.6) 0%, transparent 60%);
  }

  .hero-lines {
    position: absolute;
    top: 0; right: 0;
    width: 55%;
    height: 100%;
    opacity: 0.06;
    background-image:
      repeating-linear-gradient(
        90deg,
        var(--gold) 0px,
        var(--gold) 1px,
        transparent 1px,
        transparent 60px
      ),
      repeating-linear-gradient(
        0deg,
        var(--gold) 0px,
        var(--gold) 1px,
        transparent 1px,
        transparent 60px
      );
  }

  .hero-content {
    position: relative;
    max-width: 680px;
    animation: fadeUp 0.9s ease both;
  }

  .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.8rem;
  }

  .hero-tag::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--gold);
  }

  h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
  }

  h1 em {
    font-style: italic;
    color: var(--gold);
  }

  .hero-desc {
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 480px;
    margin-bottom: 2.5rem;
    line-height: 1.75;
  }

  .hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

  .btn-primary {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--gold);
    padding: 0.9rem 2rem;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s;
  }

  .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }

  .btn-secondary {
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--off-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.25s;
  }

  .btn-secondary:hover { color: var(--gold); }

  .btn-secondary::after {
    content: '→';
    font-size: 1rem;
  }

  .hero-stats {
    display: flex;
    gap: 3rem;
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(201,168,76,0.15);
  }

  .stat-val {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
  }

  .stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.3rem;
  }

  /* ── SECTION SHARED ── */
  section { padding: 6rem 5%; }

  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
  }

  .section-tag::before {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    background: var(--gold);
  }

  h2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
  }

  h2 em { font-style: italic; color: var(--gold); }

  /* ── ABOUT ── */
  #about {
    background: var(--navy-mid);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .about-visual {
    position: relative;
    width: 100%;
    height: 380px;
    background: #1a1a2e;
  }

  .about-card {
    position: absolute;
    background: var(--navy-light);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
  }

  .about-card-main {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .about-card-main svg {
    width: 100px;
    height: 100px;
    opacity: 0.15;
  }

  .about-card-accent {
    bottom: 1.5rem; right: 2rem;
    width: 160px;
    height: 100px;
    background: var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
  }

  .about-card-accent .accent-val {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1;
  }

  .about-card-accent .accent-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy-mid);
    margin-top: 0.2rem;
  }

  .about-text-wrap {
    padding: 4rem 5%;
  }

  .about-text p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
  }

  .about-checks {
    list-style: none;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .about-checks li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--off-white);
  }

  .about-checks li::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23C9A84C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  }

  /* ── SERVICES ── */
  #services { background: var(--navy); }

  .services-header {
    max-width: 560px;
    margin-bottom: 3.5rem;
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5px;
    background: rgba(201,168,76,0.15);
    border: 1px solid rgba(201,168,76,0.15);
  }

  .service-card {
    background: var(--navy);
    padding: 2.5rem 2rem;
    transition: background 0.3s;
    position: relative;
    overflow: hidden;
    contain: layout;
  }

  .service-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--gold);
    transition: width 0.4s ease;
  }

  .service-card:hover { background: var(--navy-mid); }
  .service-card:hover::after { width: 100%; }

  .service-icon {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--gold);
  }

  .service-icon svg { width: 22px; height: 22px; }

  .service-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--off-white);
    margin-bottom: 0.75rem;
  }

  .service-card p {
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.7;
  }

  /* ── CONTACT ── */
  #contact {
    background: var(--navy-mid);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
  }

  .contact-info h2 { margin-bottom: 1rem; }

  .contact-info p {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 2.5rem;
  }

  .contact-details { display: flex; flex-direction: column; gap: 1.25rem; }

  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .contact-item-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold);
  }

  .contact-item-icon svg { width: 16px; height: 16px; }

  .contact-item-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
  }

  .contact-item-val {
    font-size: 0.95rem;
    color: var(--off-white);
  }

  /* Contact form */
  .contact-form { display: flex; flex-direction: column; gap: 1.25rem; }

  .form-group { display: flex; flex-direction: column; gap: 0.4rem; }

  .form-group label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--off-white);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    outline: none;
    transition: border-color 0.25s;
    resize: none;
    -webkit-appearance: none;
  }

  .form-group select option { background: var(--navy-mid); }

  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    border-color: var(--gold);
    background: rgba(201,168,76,0.04);
  }

  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

  .form-submit {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--gold);
    border: none;
    padding: 1rem 2rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s;
    align-self: flex-start;
  }

  .form-submit:hover { background: var(--gold-light); transform: translateY(-2px); }

  /* ── FOOTER ── */
  footer {
    background: var(--navy);
    border-top: 1px solid rgba(201,168,76,0.12);
    padding: 2.5rem 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .footer-logo {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold);
  }

  .footer-logo span { color: var(--text-muted); }

  footer p {
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    #contact { grid-template-columns: 1fr; }
    .about-visual { height: 260px; }
    .nav-links { display: none; }
    .hero-stats { gap: 2rem; }
    .form-row { grid-template-columns: 1fr; }
  }

  .service-card--featured {
    grid-column: span 1;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .service-carousel {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    contain: layout;
    flex-shrink: 0;
  }

  .carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .carousel-track img {
    flex: 0 0 100%;
    min-width: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
  }

  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(13,27,42,0.7);
    border: 1px solid rgba(201,168,76,0.4);
    color: var(--gold);
    width: 40px;
    height: 40px;
    border-radius: 2px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
  }

  .carousel-btn:hover { background: rgba(13,27,42,0.95); }
  .carousel-btn--prev { left: 12px; }
  .carousel-btn--next { right: 12px; }

  .carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
  }

  .carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
  }

  .carousel-dot.active {
    background: var(--gold);
    transform: scale(1.3);
  }

  .service-card-body {
    padding: 2.5rem 2rem;
  }

  .service-card-body h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--off-white);
    margin-bottom: 0.75rem;
  }

  .service-card-body p {
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.7;
  }

  .service-card--featured::after { display: none; }

  @media (max-width: 768px) {
    .service-card--featured { grid-column: span 1; }
    .service-carousel { height: 220px; }
  }


  .service-call {
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--off-white);
  }

  .service-call a {
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: opacity 0.2s;
  }

  .service-call a:hover { opacity: 0.8; }


  .service-card-body p strong,
  .service-card-body strong {
    color: var(--off-white);
    font-weight: 500;
  }


  /* ═══════════════════════════════════════════════════════════════
     ADDITIONS — mobile navigation, form feedback, accessibility
     Everything above this line is the original design, untouched.
     ═══════════════════════════════════════════════════════════════ */

  /* ── Skip link (keyboard users) ── */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--gold);
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .skip-link:focus { left: 0.5rem; top: 0.5rem; }

  /* ── Visible focus rings, without touching the mouse experience ── */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* ── The About photo is wrapped in <picture> for the WebP source ── */
  .about-card-main picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ── Nav logo sizing ──
     The logo was 264x70 with the height hard-coded inline. On a phone it
     overflowed its shrunken flex item and sat on top of the menu button,
     making the button impossible to tap. Sized here instead so it can
     scale down with the viewport. */
  .nav-logo { flex: 0 0 auto; line-height: 0; }

  .nav-logo img {
    height: 70px;
    width: auto;
    max-width: 100%;
    display: block;
  }

  /* ── Hamburger button: hidden on desktop, shown under 768px ── */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: var(--navy);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Honeypot: off-screen for people, still fillable by bots ── */
  .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ── Form status message ── */
  .form-status {
    margin-top: 1rem;
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.5;
    min-height: 1.2em;
  }

  .form-status--ok    { color: #9ED47A; }
  .form-status--error { color: var(--gold-light); }

  .form-submit:disabled { cursor: not-allowed; }

  /* ── Mobile: replace the hidden nav links with a real menu ── */
  @media (max-width: 768px) {
    nav { flex-wrap: wrap; }

    .nav-logo { order: 1; }
    .nav-logo img { height: 46px; }

    .nav-toggle { display: flex; order: 3; flex: 0 0 auto; }

    .nav-cta {
      order: 2;
      margin-left: auto;
      margin-right: 0.5rem;
      font-size: 0.7rem;
      padding: 0.6rem 1rem;
    }

    /* The base stylesheet sets .nav-links { display: none } on mobile,
       which left phone visitors with no navigation at all. The menu is
       now collapsed by default and opens from the hamburger. */
    .nav-links {
      display: flex;
      order: 4;
      flex-basis: 100%;
      flex-direction: column;
      gap: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    body.nav-open .nav-links { max-height: 22rem; }

    .nav-links li { border-top: 1px solid rgba(46, 77, 132, 0.12); }

    .nav-links li:first-child { margin-top: 0.6rem; }

    .nav-links a {
      display: block;
      padding: 0.95rem 0.25rem;
      font-size: 0.8rem;
    }
  }

  /* ── Respect a reduced-motion preference ── */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  @media (max-width: 400px) {
    nav { padding-left: 4%; padding-right: 4%; }
    .nav-logo img { height: 40px; }
    .nav-cta { font-size: 0.62rem; padding: 0.55rem 0.7rem; margin-right: 0.25rem; }
  }

  /* ═══════════════════════════════════════════════════════════════
     RESPONSIVE FIXES — multi-column sections on phones
     ═══════════════════════════════════════════════════════════════ */

  /* ── Locations: was inline styles on the elements, which no media
     query could override. Same appearance, now controlled here. ── */
  #locations { padding: 0; background: var(--navy); }

  .locations-intro { padding: 4rem 5% 2rem; }

  .locations-lead {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 300;
    margin-bottom: 2rem;
  }

  .locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5px;
    background: rgba(201, 168, 76, 0.15);
    border-top: 1px solid rgba(201, 168, 76, 0.15);
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  }

  .location-card {
    background: var(--navy);
    padding: 0;
    position: relative;
  }

  .location-label {
    background: var(--gold);
    color: var(--navy);
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .locations-grid iframe {
    width: 100%;
    height: 320px;
    border: 0;
    display: block;
  }

  /* ── Phones: one column, full width ──
     .services-grid was hard-coded to repeat(3, 1fr) with no override,
     so the six service cards sat three-across on a 390px screen and
     crushed the text. All six now stack. Desktop is unchanged. */
  @media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; }

    .locations-grid { grid-template-columns: 1fr; }
    .locations-grid iframe { height: 260px; }
    .locations-intro { padding: 3rem 5% 1.5rem; }

    /* The stacked cards no longer need such generous side padding. */
    .service-card { padding: 2rem 1.5rem; }
    .service-card-body { padding: 1.75rem 1.5rem; }
  }

  /* ═══════════════════════════════════════════════════════════════
     CONTACT REVEAL — phone/email hidden from scrapers until clicked
     ═══════════════════════════════════════════════════════════════ */

  /* The button is styled to read as the link it becomes, so revealing the
     value doesn't make the layout jump. A dotted underline signals that
     it does something, without looking like a form control. */
  .reveal {
    font: inherit;
    color: var(--gold);
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    letter-spacing: 0.03em;
    text-align: left;
    border-bottom: 1px dotted currentColor;
    transition: opacity 0.2s;
  }

  .reveal:hover { opacity: 0.75; }

  .revealed {
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: opacity 0.2s;
  }

  .revealed:hover { opacity: 0.8; }

  /* In the contact panel the value sits on a light row, where the body
     colour reads better than the accent. */
  .contact-item-val .reveal,
  .contact-item-val .revealed {
    color: var(--off-white);
    font-size: 0.95rem;
  }

  .contact-item-val .reveal { border-bottom-color: var(--gold); }