/* ==========================================================================
   Plomberie Bellerive, sample site built by Missing Piece Studio.
   Direction: high contrast, utilitarian, trust and urgency. Built for someone
   standing in a flooded basement holding their phone, so the number is on
   every screen and never more than a thumb away.
   This business is fictional. Nothing here describes a real plumber.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --black:  #0E141B;
  --slate:  #1B2733;
  --white:  #FFFFFF;
  --paper:  #F2F5F8;
  --yellow: #FFC400;
  --blue:   #0B62D6;
  --grey:   #5E7080;
  --line:   rgba(255, 255, 255, .14);
  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--black);
  font-family: 'Karla', system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* room for the fixed call bar on phones */
  padding-bottom: 4.5rem;
}
@media (min-width: 46rem) { body { padding-bottom: 0; } }

img { max-width: 100%; display: block; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--blue); }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 46rem) { .wrap { padding-inline: 2rem; } }

.skip { position: absolute; left: -9999px; background: var(--yellow); color: var(--black); padding: .8rem 1.1rem; z-index: 80; font-weight: 700; text-decoration: none; }
.skip:focus { position: fixed; left: .75rem; top: .75rem; }

.sample { background: var(--slate); color: var(--white); font-size: .8125rem; line-height: 1.4; padding: .6rem 0; text-align: center; }
.sample a { color: var(--yellow); font-weight: 700; }

/* Header. The number is the loudest thing in it. */
.head { background: var(--black); color: var(--white); padding-block: .875rem; }
.head-in { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.25rem; }
.brand {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  font-size: 1.25rem; letter-spacing: -.03em; line-height: 1;
  color: var(--white); text-decoration: none; margin-right: auto; text-transform: uppercase;
}
.brand span { color: var(--yellow); }
.head nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; font-weight: 700; }
.head nav a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.head nav a:hover { color: var(--yellow); }
.lang { font-weight: 700; font-size: .75rem; letter-spacing: .08em; color: var(--white); text-decoration: none; border: 2px solid var(--line); padding: .3rem .55rem; }
.lang:hover { border-color: var(--yellow); color: var(--yellow); }

.call-top {
  background: var(--yellow); color: var(--black); text-decoration: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem;
  padding: .6rem 1rem; white-space: nowrap;
}
.call-top:hover { background: var(--white); }

/* Below the desktop breakpoint the nav takes its own row, so the brand, the
   number, and the language toggle stay together on the first one. Without
   this the toggle wraps down alone and looks orphaned. */
@media (max-width: 60rem) {
  .head nav { order: 3; flex: 1 0 100%; }
}

/* Hero */
.hero { background: var(--black); color: var(--white); position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); }
@media (min-width: 52rem) { .hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; } }
.hero h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2.125rem, 1.5rem + 2.7vw, 3.625rem); line-height: 1.02;
  letter-spacing: -.035em; max-width: 16ch; text-transform: uppercase;
}
.hero h1 span { color: var(--yellow); }
.hero p { margin-top: 1.125rem; max-width: 44ch; color: rgba(255, 255, 255, .78); }
.hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.urgent {
  display: inline-block; background: var(--yellow); color: var(--black);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase; padding: .4rem .7rem; margin-bottom: 1.125rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn {
  display: inline-block; text-decoration: none; font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.0625rem; padding: 1rem 1.5rem; border: 2px solid transparent;
}
.btn-call { background: var(--yellow); color: var(--black); }
.btn-call:hover { background: var(--white); }
.btn-ghost { border-color: var(--line); color: var(--white); }
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }

/* Trust strip */
.strip { background: var(--yellow); color: var(--black); }
.strip ul { display: grid; gap: .5rem 2rem; padding-block: 1.125rem; font-weight: 700; font-size: .9375rem; }
@media (min-width: 46rem) { .strip ul { grid-auto-flow: column; justify-content: space-between; } }
.strip li::before { content: '// '; font-family: 'Space Grotesk', sans-serif; }

section { padding-block: clamp(3rem, 2.2rem + 3.5vw, 4.5rem); }
.sec-title {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.3vw, 2.375rem); line-height: 1.08;
  letter-spacing: -.03em; text-transform: uppercase; max-width: 20ch;
}
.sec-title + p { margin-top: .875rem; max-width: 58ch; color: var(--grey); }

/* Services, blocky and scannable */
.services { display: grid; gap: 1px; margin-top: 2rem; background: rgba(14, 20, 27, .16); border: 1px solid rgba(14, 20, 27, .16); }
@media (min-width: 40rem) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .services { grid-template-columns: repeat(3, 1fr); } }
.service { background: var(--white); padding: 1.5rem; }
.service h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: -.01em; }
.service p { margin-top: .5rem; font-size: .9375rem; color: var(--grey); }
.service .num { font-family: 'Space Grotesk', sans-serif; font-size: .75rem; font-weight: 700; color: var(--blue); letter-spacing: .1em; display: block; margin-bottom: .625rem; }

.band-grey { background: var(--paper); }

.two { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .two { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.two img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.rates { margin-top: 1.75rem; }
.rates li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid rgba(14, 20, 27, .14); font-weight: 600; }
.rates span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; white-space: nowrap; }

.band-black { background: var(--black); color: var(--white); }
.band-black .sec-title { color: var(--white); }
.band-black p { color: rgba(255, 255, 255, .78); }
.big-number {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); letter-spacing: -.04em;
  color: var(--yellow); text-decoration: none; display: inline-block; margin-top: 1rem;
}
.big-number:hover { color: var(--white); }

/* Fixed call bar, phones only. This is the whole point of the design. */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--yellow); color: var(--black); text-decoration: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.125rem;
  text-align: center; padding: 1.05rem 1rem;
  box-shadow: 0 -2px 0 rgba(14, 20, 27, .2);
}
@media (min-width: 46rem) { .call-bar { display: none; } }

.foot { background: var(--slate); color: rgba(255, 255, 255, .78); padding-block: 2.5rem; font-size: .9375rem; }
.foot strong { color: var(--white); }
.foot p + p { margin-top: .35rem; }
.foot a { color: var(--yellow); }
.foot-note { margin-top: 1.5rem !important; font-size: .8125rem; color: rgba(255, 255, 255, .58); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}