/* ==========================================================================
   CTRL+ALT+ELITE — design system
   Hand-authored. No build step: edit this file directly.

   Reference is Apple's Human Interface Guidelines: light ground, high
   contrast text, one accent colour, hairline dividers rather than heavy
   shadows, and comfortable (44px) touch targets by default.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --bg:            #ffffff;
  --bg-alt:        #f6f5f1;   /* warm section grey, in family with the logo */
  --bg-sunken:     #faf9f6;
  --text:          #1f1e1b;   /* warm near-black; softer than #000 on white */
  --text-2:        #6f6d67;   /* 5.2:1 on white — AA for body text */
  --text-3:        #87857f;   /* form placeholders only -- too light for copy */
  --accent:        #0066cc;   /* 5.6:1 on white, 5.1:1 on --bg-alt */
  --accent-hover:  #0077ed;
  --accent-quiet:  #e9f1fb;
  --on-accent:     #ffffff;
  --border:        rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);
  --danger:        #d70015;
  --success:       #1d7a3e;
  --success-bg:    #eef8f1;

  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 980px;

  --shell:  1120px;   /* page max width */
  --measure: 68ch;    /* comfortable reading measure */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark is the site's default look; the toggle writes data-theme="light" and
   the choice is remembered per visitor. Surfaces are inverted from a naive
   dark theme -- the page sits at #1d1d1f and the alternating bands drop to
   black -- so cards read as raised rather than punched out, and large white
   headlines don't halate against pure black. */
:root[data-theme="dark"] {
  --bg:            #1f1e1b;
  --bg-alt:        #000000;
  --bg-sunken:     #171614;
  --text:          #f6f5f1;
  --text-2:        #a3a19a;
  --text-3:        #87857f;
  --accent:        #2997ff;
  --accent-hover:  #52aaff;
  --accent-quiet:  #13273a;
  --on-accent:     #000000;
  --border:        rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
  --danger:        #ff453a;
  --success:       #30d158;
  --success-bg:    #10240f;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* sticky header height + breathing room, so anchors don't land under it */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;      /* 17px — Apple's reading size */
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  text-wrap: balance;
}

/* Large type only reads as "Apple" when it's tracked tight and set close. */
h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
}
h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
h4 {
  font-size: 1.0625rem;
  line-height: 1.4;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul { margin: 0; padding: 0; list-style: none; }

/* Visible, consistent keyboard focus everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout --------------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--alt { background: var(--bg-alt); }

.section__head {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}
.section__head p {
  margin-top: 0.875rem;
  font-size: 1.1875rem;
  color: var(--text-2);
}

.lede {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 34rem;
}

.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--accent);
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;              /* HIG touch target */
  padding: 0.6875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--border-strong);
}
.btn--secondary:hover { border-color: var(--accent); }

.btn--lg {
  min-height: 50px;
  padding: 0.875rem 1.75rem;
  font-size: 1.0625rem;
}

.btn--block { width: 100%; }

.btn[disabled] { opacity: 0.55; cursor: progress; }

/* Text link with a chevron that nudges on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-weight: 500;
}
.link-arrow::after {
  content: "›";
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.18s var(--ease);
}
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
/* Fallback where color-mix is unsupported. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--bg); }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }

/* Photoreal lockup in the header. */
.logo {
  width: auto;
  height: 38px;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .logo { height: 32px; }
}
.footer-brand { margin-bottom: 1rem; }
.logo-footer {
  width: 120px;
  height: auto;
}


.site-nav {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}
.site-nav a {
  font-size: 0.9375rem;
  color: var(--text-2);
  transition: color 0.18s var(--ease);
}
.site-nav a:hover { color: var(--text); text-decoration: none; }

.site-header__cta { flex-shrink: 0; }

/* The full label does not fit beside the wordmark and the menu button on a
   narrow phone -- an overflowing header widens the whole document. */
.cta-short { display: none; }

/* The header CTA stays outside the hamburger so it is visible at the top of
   every viewport, including mobile. */
.site-header__cta .btn {
  min-height: 36px;
  padding: 0.4375rem 1.0625rem;
  font-size: 0.9375rem;
}

/* Appearance toggle. Shows the mode you would switch TO. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-2); }
.theme-toggle svg { width: 17px; height: 17px; }

.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* The in-menu variant on narrow screens, where the header has no room. */
.menu-theme {
  display: none;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border);
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.menu-theme svg { width: 18px; height: 18px; color: var(--text-2); }
.menu-theme .icon-sun { display: none; }
:root[data-theme="dark"] .menu-theme .icon-sun { display: block; }
:root[data-theme="dark"] .menu-theme .icon-moon { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
}

/* Collapsed nav panel. `.mobile-menu` / `.active` is the contract the inline
   script toggles — do not rename. */
.mobile-menu { display: none; }

@media (max-width: 819px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__bar .theme-toggle { margin-left: auto; }
  .site-header__bar { gap: 0.5rem; }

  .mobile-menu.active {
    display: block;
    padding-block: 0.5rem 1rem;
    border-top: 1px solid var(--border);
  }
  .mobile-menu nav {
    display: flex;
    flex-direction: column;
  }
  .mobile-menu nav a {
    padding: 0.75rem 0;
    font-size: 1.0625rem;
    color: var(--text);
  }
  .mobile-menu nav a:hover { text-decoration: none; color: var(--accent); }
}

/* --- Hero ----------------------------------------------------------------- */

/* Centred, with no hero image there is nothing to balance a left-aligned
   column against — an empty right half reads as unfinished. */
.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}

.hero h1 {
  max-width: 17ch;
  margin-inline: auto;
}

.hero .lede {
  margin-top: 1.25rem;
  margin-inline: auto;
  max-width: 40ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem 1.5rem;
  margin-top: 2rem;
}

.hero__call {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.9375rem;
}
.hero__call strong { font-weight: 500; }
.hero__call span { color: var(--text-2); }

/* Trust row sits directly beneath the CTA — the placement conversion
   research consistently supports. */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  justify-content: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--text-2);
}
.trust li {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
}
.trust b {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}

/* --- Cards ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  padding: 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.card__icon {
  width: 28px;
  height: 28px;
  margin-bottom: 1rem;
  color: var(--accent);
  stroke-width: 1.5;
}

.card h3 { margin-bottom: 0.5rem; }

.card p {
  color: var(--text-2);
  font-size: 1rem;
}

/* Short, scannable feature lists — deliberately capped at three items so the
   services grid stays light. */
.card__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1.125rem;
}
.card__list li {
  padding: 0.25rem 0.625rem;
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* Highlighted lead card for the Mac-first service. */
.card--lead {
  border-color: var(--accent);
  background: var(--accent-quiet);
}
.card--lead .card__list li {
  background: var(--bg);
  color: var(--text-2);
}

/* --- Split (why us) ------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
}

.reasons { display: grid; gap: 1.5rem; }
.reasons h4 { margin-bottom: 0.25rem; }
.reasons p { color: var(--text-2); font-size: 1rem; }

.stats {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 480px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}
.stats > div {
  padding: 1.75rem 1.25rem;
  background: var(--bg);
  text-align: center;
}
.stats b {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stats span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--text-2);
}

/* --- Mid-page CTA band ---------------------------------------------------- */

.cta-band {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--bg-alt);
  text-align: center;
}
.cta-band p {
  max-width: 38rem;
  margin: 0.875rem auto 0;
  font-size: 1.1875rem;
  color: var(--text-2);
}
.cta-band .btn { margin-top: 1.75rem; }

/* --- Contact -------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  /* Form gets the wider column — it's the conversion target. */
  .contact-grid { grid-template-columns: 0.85fr 1fr; }
}

.contact-list { display: grid; gap: 1.5rem; }

.contact-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.contact-item:first-child { padding-top: 0; border-top: 0; }
.contact-item svg {
  width: 20px;
  height: 20px;
  margin-top: 0.25rem;
  color: var(--accent);
  stroke-width: 1.5;
}
.contact-item h4 { margin-bottom: 0.125rem; }
.contact-item p { font-size: 0.9375rem; color: var(--text-2); }
.contact-item .value {
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: 0.125rem;
}
/* Phone is the secondary CTA — it should read as tappable, not as body text. */
.contact-item .value a { color: var(--accent); }

/* Carrier-reviewed SMS disclosure. Small but must stay legible. */
.fineprint {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-2);
}
.fineprint a { color: var(--text-2); text-decoration: underline; }

/* --- Form ----------------------------------------------------------------- */

.form-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.form-card > h3 { margin-bottom: 1.5rem; }

.field { margin-bottom: 1.125rem; }

.field-row {
  display: grid;
  gap: 1.125rem;
}
@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6875rem 0.875rem;
  font-family: inherit;
  font-size: 1rem;          /* 16px+ stops iOS zooming on focus */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
textarea { resize: vertical; min-height: 7rem; }

input::placeholder, textarea::placeholder { color: var(--text-3); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-quiet);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236f6d67' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 12px;
  padding-right: 2.25rem;
}

.form-note {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-2);
  text-align: center;
}

.hidden { display: none; }

.alert-success {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--success-bg);
  border: 1px solid var(--success);
  border-radius: var(--radius);
}
.alert-success h3 {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  color: var(--success);
}
.alert-success p { font-size: 0.9375rem; color: var(--text); }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(3rem, 6vw, 4rem) 2rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.site-footer h4 {
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--text); }
.site-footer p { color: var(--text-2); }

.footer-emergency {
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.875rem;
}
.footer-emergency b { color: var(--danger); }
.footer-emergency a { color: var(--text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-2);
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* --- Legal pages ---------------------------------------------------------- */

.legal {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.legal__meta {
  margin-top: 0.75rem;
  color: var(--text-2);
}
.legal h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
.legal h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
}
.legal p, .legal li { color: var(--text-2); }
.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  list-style: disc;
}
.legal li { margin-bottom: 0.375rem; }
.legal a { text-decoration: underline; }

/* --- Narrow phones -------------------------------------------------------- */

@media (max-width: 560px) {
  .shell { padding-inline: 1.125rem; }
  .site-header__bar .theme-toggle { display: none; }
  .site-header__cta { margin-left: auto; }
  .menu-theme { display: flex; }
  .cta-full { display: none; }
  .cta-short { display: inline; }
  .wordmark { font-size: 0.9375rem; }
  .site-header__cta .btn {
    padding-inline: 0.875rem;
    font-size: 0.875rem;
  }
  .nav-toggle { width: 40px; margin-right: -0.375rem; }
  /* Long unbroken strings (emails, URLs) must not widen the page. */
  body { overflow-wrap: break-word; }
}

.legal__box {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.legal__box :is(h2, h3):first-child { margin-top: 0; }

/* Contact block at the foot of each legal page. These icons lost their sizing
   when the pages moved off Tailwind, and an SVG with no intrinsic size grows
   to fill its container -- so give them one explicitly. */
.legal__contact { display: grid; gap: 0.75rem; }
.legal__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.legal svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}

/* --- Utilities ------------------------------------------------------------ */

/* Phone links: comfortable tap target without wrecking inline flow. */
a[href^="tel:"] {
  display: inline-block;
  min-height: 24px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}