/* ==========================================================================
   WiFi King - design system
   --------------------------------------------------------------------------
   Everything shared across pages lives here: tokens, type, buttons, header,
   footer, forms. Page specific rules go in assets/css/page-<name>.css and are
   prefixed with .p-<name>- so they can never collide with anything below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces. Kept cool and neutral so the gold is the only warm thing on
     the page and reads as metal rather than as a highlighter. */
  --pitch:  #06070a;
  --ink:    #0c0e13;
  --slate:  #14171e;
  --raise:  #1a1e27;
  --edge:   #232833;
  --edge-2: #2e3543;

  /* The metal. Three stops, because real gold has a shadow side and a
     highlight side. A single flat colour looks like paint. */
  --gold:      #e4a93b;
  --gold-hi:   #ffd98a;
  --gold-deep: #8c5c14;
  --gold-dim:  rgba(228, 169, 59, 0.14);
  --gold-line: rgba(228, 169, 59, 0.32);

  --metal: linear-gradient(
    100deg,
    #8c5c14 0%,
    #c98f2b 14%,
    #e4a93b 32%,
    #ffd98a 48%,
    #e4a93b 63%,
    #b57d22 82%,
    #8c5c14 100%
  );

  /* Text */
  --chalk: #f0f2f6;
  --pearl: #c3c9d6;
  --mist:  #8d95a6;
  --dusk:  #666e7e;

  /* Type */
  --display: 'Archivo', 'Arial Black', 'Helvetica Neue', sans-serif;
  --body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --data:    'JetBrains Mono', 'SF Mono', 'Consolas', ui-monospace, monospace;

  /* Type scale */
  --t-hero:  clamp(2.75rem, 7.2vw, 5.75rem);
  --t-h1:    clamp(2.25rem, 5.2vw, 3.9rem);
  --t-h2:    clamp(1.85rem, 3.6vw, 2.9rem);
  --t-h3:    clamp(1.3rem, 2.1vw, 1.6rem);
  --t-lead:  clamp(1.05rem, 1.55vw, 1.3rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Layout */
  --shell: 1220px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --radius: 14px;
  --radius-sm: 9px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 180ms;
  --slow: 520ms;

  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

/* No overflow rule on html or body, deliberately.
   overflow:hidden on body makes it a scroll container and breaks the sticky
   header. overflow-x:clip on either one makes the vertical axis clip too, or
   turns html into its own scroller, and then window.scrollY never moves, which
   silently kills the sticky header, the scroll reveals and the scrollspy.
   Horizontal overflow is prevented by the layout itself instead, and that is
   checked at 360px and up. If a scrollbar ever appears, fix the element that
   causes it rather than hiding it here. */

body {
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--gold); color: #0b0b0d; }

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--chalk);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.18; }
h4 { font-size: 1.05rem; letter-spacing: -0.015em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--pearl);
  max-width: 60ch;
}

.muted { color: var(--mist); }
.dim   { color: var(--dusk); }

/* Every number on this site is set in mono. Speeds, prices, ping figures and
   uptime all read like a readout, which is what they are. */
.mono {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* The gold metal fill, used sparingly on single words and figures. */
.metal {
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* The small label above a heading. Carries a chevron tick, which is the logo
   mark reused as punctuation rather than as decoration. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.15rem;
}

.eyebrow::before {
  content: '';
  width: 15px;
  height: 9px;
  flex: none;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 52%, 100% 100%, 50% 48%, 0 100%, 0 52%);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-narrow {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
.section-flush-top { padding-top: 0; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.section-head p { margin-top: 1.1rem; }

/* Hairline divider carrying a small chevron, the section marker for this site.
   Sections are separated by a line and a tick, not by blocks of colour. */
.rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge) 12%, var(--edge) 88%, transparent);
}

.rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: var(--gold);
  opacity: 0.55;
  clip-path: polygon(50% 0, 100% 52%, 100% 100%, 50% 48%, 0 100%, 0 52%);
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: 1.1rem; }

/* Alternate darker band, used to break up long pages without adding colour. */
.band-deep { background: var(--pitch); }
.band-slate { background: var(--slate); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--edge-2);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--chalk);
  cursor: pointer;
  transition: transform var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
  text-align: center;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary. Brushed metal fill with a hairline highlight along the top edge,
   which is what makes it read as metal instead of as a yellow rectangle. */
.btn-gold {
  border-color: transparent;
  background: var(--metal);
  background-size: 220% 100%;
  background-position: 22% 0;
  color: #100c02;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 8px 24px -10px rgba(228, 169, 59, 0.55);
  transition: background-position var(--slow) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}

.btn-gold:hover {
  background-position: 78% 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 12px 30px -10px rgba(228, 169, 59, 0.7);
}

.btn-ghost { background: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover { border-color: var(--gold-line); color: var(--gold-hi); }

.btn-wa {
  border-color: rgba(37, 211, 102, 0.4);
  background: rgba(37, 211, 102, 0.09);
  color: #8df3b4;
}
.btn-wa:hover { border-color: rgba(37, 211, 102, 0.75); background: rgba(37, 211, 102, 0.16); }

.btn-sm { padding: 0.62rem 1.05rem; font-size: 0.85rem; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.02rem; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* A text link that gains a moving underline. */
.link-gold {
  color: var(--gold);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size var(--fast) var(--ease), color var(--fast) var(--ease);
}
.link-gold:hover { background-size: 100% 1px; color: var(--gold-hi); }

/* --------------------------------------------------------------------------
   6. Surfaces
   -------------------------------------------------------------------------- */

.card {
  background: linear-gradient(180deg, var(--slate), var(--ink));
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  position: relative;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.card:hover { border-color: var(--edge-2); }

.card-lift:hover { transform: translateY(-4px); border-color: var(--gold-line); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold-hi);
  font-family: var(--data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tag-quiet {
  border-color: var(--edge-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--mist);
}

/* The signal bar. Five stacked chevrons taken from the logo mark, filled in
   proportion to a speed. Used anywhere a package needs a visual weight. */
.signal { display: inline-flex; gap: 3px; align-items: flex-end; }

.signal i {
  display: block;
  width: 16px;
  height: 9px;
  background: var(--edge-2);
  clip-path: polygon(50% 0, 100% 52%, 100% 100%, 50% 48%, 0 100%, 0 52%);
  transition: background-color var(--slow) var(--ease);
}

.signal i.on { background: var(--gold); }
.signal i.on:last-child { background: var(--gold-hi); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.85rem 1.2rem;
  background: var(--gold);
  color: #0b0b0d;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              backdrop-filter var(--fast) var(--ease);
}

.masthead.stuck {
  background: rgba(8, 9, 13, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--edge);
}

.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.brand img { height: 38px; width: auto; }

.nav { display: flex; align-items: center; gap: 0.35rem; }

.nav a {
  padding: 0.55rem 0.85rem;
  border-radius: 7px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pearl);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.nav a:hover { color: var(--chalk); background: rgba(255, 255, 255, 0.045); }
.nav a.active { color: var(--gold); }

.masthead-cta { display: flex; align-items: center; gap: 0.7rem; flex: none; }

.masthead-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--data);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--chalk);
  padding: 0.5rem 0.2rem;
}
.masthead-phone:hover { color: var(--gold); }

/* A small live dot next to the phone number. The one piece of ambient motion
   in the header, and it says the thing the business most wants to say. */
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
  animation: pulse 2.4s var(--ease) infinite;
  flex: none;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--edge-2);
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--chalk);
  border-radius: 2px;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.burger span + span { margin-top: 4px; }

.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav, .masthead-phone { display: none; }
  .burger { display: grid; }
}

/* Mobile menu */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 89;
  background: rgba(6, 7, 10, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 2rem var(--gutter) 3rem;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}

.drawer.open { opacity: 1; visibility: visible; transform: none; }

.drawer a.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--edge);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--chalk);
}
.drawer a.drawer-link.active { color: var(--gold); }
.drawer a.drawer-link::after { content: ''; width: 13px; height: 8px; background: var(--gold); clip-path: polygon(50% 0, 100% 52%, 100% 100%, 50% 48%, 0 100%, 0 52%); transform: rotate(90deg); opacity: 0.5; }

.drawer-foot { margin-top: 2rem; display: grid; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--pitch);
  border-top: 1px solid var(--edge);
  padding-top: clamp(3.5rem, 6vw, 5rem);
  padding-bottom: 2rem;
  font-size: var(--t-small);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer h4 {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.footer-links li + li { margin-top: 0.6rem; }
.footer-links a { color: var(--mist); transition: color var(--fast) var(--ease); }
.footer-links a:hover { color: var(--gold-hi); }

.footer-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-top: 1rem;
}
.footer-areas a { color: var(--dusk); font-size: 0.8rem; }
.footer-areas a:hover { color: var(--gold); }

.footer-base {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  color: var(--dusk);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   9. Sticky contact bar, phones only
   -------------------------------------------------------------------------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 88;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--edge);
  border-top: 1px solid var(--edge);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.callbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  background: var(--slate);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--chalk);
}

.callbar a.callbar-gold { background: var(--metal); color: #100c02; }

@media (max-width: 760px) {
  .callbar { display: grid; }
  body { padding-bottom: 58px; }
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.1rem; }

.field > span.label {
  display: block;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--chalk);
  margin-bottom: 0.45rem;
}

.field .hint { display: block; font-size: 0.78rem; color: var(--dusk); margin-top: 0.4rem; }

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--pitch);
  border: 1px solid var(--edge-2);
  border-radius: var(--radius-sm);
  color: var(--chalk);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.input::placeholder, .textarea::placeholder { color: var(--dusk); }

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

.textarea { min-height: 130px; resize: vertical; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.field-error .input, .field-error .select, .field-error .textarea { border-color: #e5484d; }
.err { display: block; color: #ff8085; font-size: 0.78rem; margin-top: 0.4rem; font-weight: 600; }

/* The honeypot. Hidden from people, visible to bots that fill in every field. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edge-2);
  background: var(--slate);
  margin-bottom: 1.5rem;
  font-size: var(--t-small);
}
.notice-good { border-color: rgba(61, 220, 132, 0.4); background: rgba(61, 220, 132, 0.08); color: #a8f0c6; }
.notice-bad { border-color: rgba(229, 72, 77, 0.45); background: rgba(229, 72, 77, 0.08); color: #ffb3b6; }

/* --------------------------------------------------------------------------
   11. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.shown { opacity: 1; transform: none; }

/* Children stagger in one after another. */
.reveal-group > * { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.reveal-group.shown > * { opacity: 1; transform: none; }
.reveal-group.shown > *:nth-child(2) { transition-delay: 70ms; }
.reveal-group.shown > *:nth-child(3) { transition-delay: 140ms; }
.reveal-group.shown > *:nth-child(4) { transition-delay: 210ms; }
.reveal-group.shown > *:nth-child(5) { transition-delay: 280ms; }
.reveal-group.shown > *:nth-child(6) { transition-delay: 350ms; }

/* --------------------------------------------------------------------------
   12. Utilities
   -------------------------------------------------------------------------- */

.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;
}

.center { text-align: center; }
.center .lead, .center .section-head { margin-inline: auto; }
.nowrap { white-space: nowrap; }
.full { width: 100%; }

/* --------------------------------------------------------------------------
   13. Motion preferences
   -------------------------------------------------------------------------- */

@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;
  }

  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   14. Shared components added with the chrome
   -------------------------------------------------------------------------- */

/* The wordmark. Archivo at its heaviest, skewed to echo the italic slab in the
   original logo, filled with the same metal as the mark beside it. */
.brand-word {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.18rem;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  transform: skewX(-6deg);
  line-height: 1;
  white-space: nowrap;
}

.footer .brand-word { font-size: 1.05rem; }

/* Accordion. One question, one answer, a chevron that turns. */
details.qa {
  border-bottom: 1px solid var(--edge);
  padding: 0.35rem 0;
}

details.qa > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--chalk);
  transition: color var(--fast) var(--ease);
}

details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary:hover { color: var(--gold-hi); }

details.qa > summary::after {
  content: '';
  flex: none;
  width: 15px;
  height: 9px;
  margin-top: 0.45rem;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 52%, 100% 100%, 50% 48%, 0 100%, 0 52%);
  transform: rotate(180deg);
  transition: transform var(--fast) var(--ease);
}

details.qa[open] > summary::after { transform: rotate(0deg); }

details.qa > .qa-body {
  padding: 0 0 1.35rem;
  max-width: 68ch;
  color: var(--pearl);
}

/* Small town and topic links. */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pearl);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.pill:hover { border-color: var(--gold-line); color: var(--gold-hi); }

/* A big readout figure. Every important number on the site uses this. */
.figure {
  font-family: var(--data);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

.figure-unit {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mist);
  margin-left: 0.35rem;
}

.figure-price {
  font-family: var(--data);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Two column split that collapses on tablets. */
.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Label and value rows, used in comparison blocks. */
.kv { border-top: 1px solid var(--edge); padding: 0.85rem 0; display: flex; gap: 1rem; justify-content: space-between; }
.kv dt { color: var(--mist); font-size: var(--t-small); }
.kv dd { margin: 0; color: var(--chalk); font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   15. Photographs
   --------------------------------------------------------------------------
   Stock photography arrives in whatever colour it was shot in, and on a black
   and gold page that reads as pasted on. Every picture on this site goes
   through the same grade: pull most of the colour out, lay warm gold over it
   with a soft light blend, then sink the bottom edge into the page. The result
   is that different photographers' work still looks like one set of pictures.
   -------------------------------------------------------------------------- */

.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  isolation: isolate;
  background: var(--pitch);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.34) contrast(1.06) brightness(0.86);
}

/* The gold. Soft light keeps the shadows dark and warms the midtones, which
   is what makes a cold photograph sit next to the metal. */
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(118deg, var(--gold-deep), var(--gold) 48%, var(--gold-hi));
  mix-blend-mode: soft-light;
  opacity: 0.5;
}

/* The bottom edge fades into the page so the picture has no hard border to
   fight the hairlines everywhere else. */
.shot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 10, 0.08) 0%, rgba(6, 7, 10, 0.12) 55%, rgba(6, 7, 10, 0.6) 100%);
}

.shot-wide { aspect-ratio: 16 / 9; }
.shot-tall { aspect-ratio: 4 / 5; }
.shot-square { aspect-ratio: 1 / 1; }

/* A brighter photograph needs more holding back than a dark one. */
.shot-bright img { filter: saturate(0.3) contrast(1.1) brightness(0.62); }
.shot-bright::after { opacity: 0.62; }

/* A caption sitting on the picture itself. */
.shot-cap {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.15rem 1.25rem;
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

@media (max-width: 560px) {
  .shot-wide { aspect-ratio: 3 / 2; }
  .shot-tall { aspect-ratio: 3 / 4; }
}