:root {

  --blush: #DFF6F4;

  --blush-soft: #F2FBFA;

  --brown: #10A9A3;

  --brown-dark: #0B2F4F;

  --cream: #FBFDFD;

  --paper: #FFFFFF;

  --ink: #102D47;

  --muted: #647582;

  --line: #D9E8EA;

  --teal: #10AAA4;

  --teal-soft: #E7F8F6;

  --coral: #F47461;

  --gold: #E1AD2D;

  --shadow:
    0 16px 44px rgba(11, 47, 79, .10);

  --shadow-sm:
    0 8px 24px rgba(11, 47, 79, .08);

  --radius-xl: 30px;

  --radius-lg: 22px;

  --radius-md: 16px;

  --max: 1180px;

  --navy: #0B2F4F;

  --aqua: #10AAA4;

  --aqua-deep: #078D89;

  --coral-soft: #FFF0ED;

}


/* ============================================================
   GLOBAL
============================================================ */

* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  color: var(--ink);

  background: var(--cream);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.55;

  -webkit-font-smoothing: antialiased;

}


img {

  max-width: 100%;

  display: block;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input,
select {

  font: inherit;

}


button {

  cursor: pointer;

}


.container {

  width:
    min(
      var(--max),
      calc(100% - 40px)
    );

  margin-inline: auto;

}


.section {

  padding:
    86px 0;

}


.section.compact {

  padding:
    62px 0;

}


.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    7px 12px;

  border-radius:
    999px;

  background:
    var(--blush-soft);

  color:
    var(--brown);

  border:
    1px solid #CBEDEA;

  font-size:
    .78rem;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.eyebrow::before {

  content:
    "✦";

  color:
    var(--gold);

}


h1,
h2,
h3,
p {

  margin-top: 0;

}


h1,
h2,
.serif {

  font-family:
    Georgia,
    "Times New Roman",
    serif;

}


h1 {

  font-size:
    clamp(
      3.1rem,
      7vw,
      6.7rem
    );

  line-height:
    .95;

  letter-spacing:
    -.055em;

  margin-bottom:
    24px;

}


h2 {

  font-size:
    clamp(
      2.2rem,
      4.2vw,
      4rem
    );

  line-height:
    1.02;

  letter-spacing:
    -.035em;

  margin-bottom:
    16px;

}


h3 {

  font-size:
    1.08rem;

  margin-bottom:
    8px;

}


.lead {

  font-size:
    clamp(
      1.06rem,
      1.8vw,
      1.3rem
    );

  color:
    var(--muted);

  max-width:
    660px;

}


.section-head {

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    28px;

  margin-bottom:
    38px;

}


.section-head p {

  max-width:
    570px;

  color:
    var(--muted);

  margin-bottom:
    5px;

}


/* ============================================================
   BUTTONS
============================================================ */

.btn {

  border:
    0;

  border-radius:
    999px;

  padding:
    14px 22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  font-weight:
    800;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;

}


.btn:hover {

  transform:
    translateY(-2px);

}


.btn-primary {

  background:
    var(--coral);

  color:
    white;

  box-shadow:
    0 10px 22px rgba(16,169,163,.24);

}


.btn-primary:hover {

  background:
    #E76553;

}


.btn-secondary {

  background:
    white;

  color:
    var(--navy);

  border:
    1px solid #BFD5DC;

}


.btn-coral {

  background:
    var(--coral);

  color:
    white;

}


.btn[disabled] {

  opacity:
    .52;

  cursor:
    not-allowed;

  transform:
    none;

  box-shadow:
    none;

}


/* ============================================================
   HEADER
============================================================ */

.site-header {

  position:
    sticky;

  top:
    0;

  z-index:
    30;

  background:
    rgba(255,251,248,.88);

  backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid rgba(233,222,216,.78);

}


.nav {

  height:
    86px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    26px;

}


.brand {

  display:
    flex;

  align-items:
    center;

  min-width:
    215px;

}


.brand img {

  width:
    206px;

  height:
    70px;

  object-fit:
    cover;

  object-position:
    center;

  border-radius:
    8px;

}


.nav-links {

  display:
    flex;

  align-items:
    center;

  gap:
    28px;

  font-size:
    .93rem;

  font-weight:
    700;

  color:
    #40596C;

}


.nav-links a:hover {

  color:
    var(--brown);

}


.nav-cta {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.menu-btn {

  display:
    none;

  background:
    white;

  border:
    1px solid var(--line);

  width:
    44px;

  height:
    44px;

  border-radius:
    50%;

}


/* ============================================================
   HERO
============================================================ */

.hero {

  padding:
    64px 0 36px;

  overflow:
    hidden;

}


.hero-grid {

  display:
    grid;

  grid-template-columns:
    1.03fr .97fr;

  align-items:
    center;

  gap:
    48px;

}


.hero-copy .accent {

  color:
    var(--aqua);

  position:
    relative;

}


.hero-copy .accent::after {

  content:
    "";

  position:
    absolute;

  left:
    3px;

  right:
    0;

  bottom:
    1px;

  height:
    11px;

  background:
    #D9F2EF;

  z-index:
    -1;

  border-radius:
    999px;

  transform:
    rotate(-1.2deg);

}


.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    30px;

}


.micro-note {

  margin-top:
    18px;

  color:
    var(--muted);

  font-size:
    .9rem;

  display:
    flex;

  gap:
    16px;

  flex-wrap:
    wrap;

}


.micro-note span::before {

  content:
    "✓";

  color:
    var(--teal);

  font-weight:
    900;

  margin-right:
    6px;

}


.hero-art {

  position:
    relative;

  min-height:
    530px;

  border-radius:
    42px;

  background:

    radial-gradient(
      circle at 80% 16%,
      rgba(216,166,43,.24) 0 3px,
      transparent 4px
    ),

    linear-gradient(
      145deg,
      #EAF8F7 0%,
      #FFFDFC 54%,
      #E9F2F7 100%
    );

  box-shadow:
    var(--shadow);

  overflow:
    hidden;

  border:
    1px solid #D8EAEC;

}


.hero-art::before {

  content:
    "";

  position:
    absolute;

  width:
    330px;

  height:
    330px;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.75);

  right:
    -70px;

  top:
    -75px;

}


.laundry-stack {

  position:
    absolute;

  left:
    8%;

  right:
    8%;

  bottom:
    9%;

  display:
    grid;

  grid-template-columns:
    1fr 1.03fr;

  align-items:
    end;

  gap:
    16px;

}


.folds {

  position:
    relative;

  padding-bottom:
    22px;

}


.fold {

  height:
    54px;

  border-radius:
    15px 15px 10px 10px;

  margin-top:
    -6px;

  border:
    1px solid rgba(11,47,79,.08);

  box-shadow:
    0 7px 17px rgba(11,47,79,.08);

}


.fold:nth-child(1) {

  background:
    #fff;

  width:
    92%;

  margin-left:
    4%;

}


.fold:nth-child(2) {

  background:
    #DFF6F4;

  width:
    100%;

}


.fold:nth-child(3) {

  background:
    #F7A08F;

  width:
    88%;

  margin-left:
    7%;

}


.fold:nth-child(4) {

  background:
    #E6F5F3;

  width:
    96%;

  margin-left:
    1%;

}


.bag {

  position:
    relative;

  min-height:
    342px;

  border-radius:
    32px 32px 38px 38px;

  background:
    linear-gradient(
      160deg,
      #18BCB4,
      #078D89
    );

  box-shadow:
    0 22px 34px rgba(11,47,79,.16);

  padding:
    36px 30px 28px;

  color:
    white;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.bag::before {

  content:
    "";

  position:
    absolute;

  width:
    44%;

  height:
    64px;

  top:
    -32px;

  left:
    28%;

  border:
    9px solid #078D89;

  border-bottom:
    0;

  border-radius:
    36px 36px 0 0;

}


.bag-logo {

  font-family:
    Georgia,
    serif;

  font-size:
    2.05rem;

  line-height:
    1.05;

  text-align:
    center;

}


.bag-logo small {

  display:
    block;

  font-family:
    Inter,
    sans-serif;

  text-transform:
    uppercase;

  font-size:
    .64rem;

  letter-spacing:
    .22em;

  margin-top:
    11px;

  opacity:
    .85;

}


.spark {

  position:
    absolute;

  color:
    var(--gold);

  font-size:
    27px;

}


.spark.s1 {

  top:
    12%;

  left:
    10%;

}


.spark.s2 {

  top:
    20%;

  right:
    12%;

  font-size:
    18px;

}


.spark.s3 {

  top:
    8%;

  right:
    26%;

  font-size:
    16px;

}


.floating-card {

  position:
    absolute;

  top:
    9%;

  left:
    8%;

  background:
    rgba(255,255,255,.91);

  border:
    1px solid rgba(255,255,255,.9);

  border-radius:
    20px;

  padding:
    16px 18px;

  box-shadow:
    var(--shadow-sm);

  max-width:
    230px;

}


.floating-card strong {

  display:
    block;

  font-size:
    1.05rem;

}


.floating-card span {

  color:
    var(--muted);

  font-size:
    .87rem;

}


/* ============================================================
   TRUST STRIP
============================================================ */

.trust-wrap {

  padding-top:
    18px;

}


.trust-strip {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  background:
    white;

  border:
    1px solid var(--line);

  border-radius:
    24px;

  box-shadow:
    var(--shadow-sm);

  overflow:
    hidden;

}


.trust-item {

  padding:
    22px;

  display:
    flex;

  gap:
    13px;

  align-items:
    center;

}


.trust-item + .trust-item {

  border-left:
    1px solid var(--line);

}


.icon {

  flex:
    0 0 auto;

  width:
    44px;

  height:
    44px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  background:
    var(--blush-soft);

  color:
    var(--brown);

  font-size:
    1.15rem;

}


.trust-item b {

  display:
    block;

  font-size:
    .91rem;

}


.trust-item span {

  color:
    var(--muted);

  font-size:
    .8rem;

}


/* ============================================================
   SERVICE AREA
============================================================ */

.area-panel {

  background:
    linear-gradient(
      120deg,
      #0B2F4F,
      #0D4668
    );

  color:
    white;

  border-radius:
    var(--radius-xl);

  padding:
    36px 40px;

  display:
    grid;

  grid-template-columns:
    1fr 1.1fr;

  gap:
    34px;

  align-items:
    center;

  box-shadow:
    var(--shadow);

}


.area-panel p {

  color:
    #DCEAF2;

  margin-bottom:
    0;

}


.zip-list {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  justify-content:
    flex-end;

}


.zip {

  padding:
    12px 15px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.10);

  border:
    1px solid rgba(255,255,255,.18);

  font-weight:
    800;

  letter-spacing:
    .03em;

}


.zip.primary {

  background:
    var(--blush);

  color:
    var(--brown-dark);

  border-color:
    var(--blush);

}


/* ============================================================
   STEPS
============================================================ */

.steps {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    16px;

}


.step {

  background:
    white;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-lg);

  padding:
    28px 23px;

  min-height:
    235px;

  box-shadow:
    var(--shadow-sm);

  position:
    relative;

}


.step-num {

  width:
    38px;

  height:
    38px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  background:
    var(--brown);

  color:
    white;

  font-weight:
    900;

  margin-bottom:
    34px;

}


.step .big-icon {

  position:
    absolute;

  right:
    20px;

  top:
    22px;

  font-size:
    2.2rem;

}


.step p {

  color:
    var(--muted);

  font-size:
    .93rem;

  margin-bottom:
    0;

}


/* ============================================================
   PRICING
============================================================ */

.pricing-bg {

  background:
    linear-gradient(
      180deg,
      #F7FCFC 0%,
      #ECF8F7 100%
    );

  border-top:
    1px solid #D2EEEC;

  border-bottom:
    1px solid #D2EEEC;

}


.pricing-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    24px;

}


.price-card {

  background:
    white;

  border:
    1px solid #D5E9EB;

  border-top:
    5px solid var(--aqua);

  border-radius:
    28px;

  padding:
    32px;

  position:
    relative;

  overflow:
    hidden;

  box-shadow:
    var(--shadow-sm);

}


.price-card:nth-child(2) {

  border-top-color:
    var(--coral);

}


.price-card::after {

  content:
    "";

  position:
    absolute;

  width:
    120px;

  height:
    120px;

  border-radius:
    50%;

  background:
    var(--blush-soft);

  right:
    -40px;

  top:
    -40px;

}


.price-kicker {

  color:
    var(--brown);

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;

  font-size:
    .76rem;

}


.price {

  font-family:
    Georgia,
    serif;

  font-size:
    4.4rem;

  line-height:
    1;

  color:
    var(--brown-dark);

  margin:
    10px 0 8px;

}


.price small {

  font-family:
    Inter,
    sans-serif;

  font-size:
    .95rem;

  color:
    var(--muted);

  font-weight:
    600;

}


.price-list {

  list-style:
    none;

  padding:
    0;

  margin:
    24px 0 0;

  display:
    grid;

  gap:
    10px;

}


.price-list li {

  display:
    flex;

  gap:
    9px;

  color:
    #4E423C;

}


.price-list li::before {

  content:
    "✓";

  color:
    var(--teal);

  font-weight:
    900;

}


.pricing-note {

  margin-top:
    24px;

  background:
    var(--brown-dark);

  color:
    white;

  border-radius:
    20px;

  padding:
    20px 24px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  align-items:
    center;

}


.pricing-note strong {

  font-size:
    1.08rem;

}


.pricing-note span {

  color:
    #DDEAF1;

}


/* ============================================================
   ACCEPT + PREP
============================================================ */

.split-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    24px;

}


.list-card {

  border-radius:
    26px;

  padding:
    32px;

  background:
    white;

  border:
    1px solid var(--line);

  box-shadow:
    var(--shadow-sm);

}


.list-card.good {

  border-top:
    5px solid var(--teal);

}


.list-card.no {

  border-top:
    5px solid var(--coral);

}


.clean-list {

  list-style:
    none;

  padding:
    0;

  margin:
    20px 0 0;

  display:
    grid;

  gap:
    12px;

}


.clean-list li {

  display:
    flex;

  gap:
    11px;

  align-items:
    flex-start;

}


.good .clean-list li::before {

  content:
    "✓";

  color:
    var(--teal);

  font-weight:
    900;

}


.no .clean-list li::before {

  content:
    "×";

  color:
    var(--coral);

  font-weight:
    900;

  font-size:
    1.2rem;

  line-height:
    1.15;

}


.prep-panel {

  margin-top:
    24px;

  background:
    linear-gradient(
      110deg,
      #FFF,
      #F1FBFA
    );

  border:
    1px solid var(--line);

  border-radius:
    26px;

  padding:
    32px;

  display:
    grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    26px;

  align-items:
    center;

}


.prep-points {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;

}


.prep-point {

  background:
    white;

  border:
    1px solid var(--line);

  border-radius:
    16px;

  padding:
    16px;

  font-size:
    .92rem;

}


.prep-point b {

  display:
    block;

  margin-bottom:
    3px;

}


/* ============================================================
   POLICIES
============================================================ */

.policy-grid {

  display:
    grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:
    24px;

}


.policy-card {

  background:
    white;

  border:
    1px solid var(--line);

  border-radius:
    26px;

  padding:
    30px;

}


.policy-lines {

  display:
    grid;

  gap:
    0;

  margin-top:
    18px;

}


.policy-line {

  padding:
    15px 0;

  border-top:
    1px solid var(--line);

  display:
    grid;

  grid-template-columns:
    150px 1fr;

  gap:
    20px;

}


.policy-line b {

  color:
    var(--brown-dark);

}


.safety {

  background:
    var(--brown-dark);

  color:
    white;

  border-radius:
    26px;

  padding:
    30px;

  position:
    relative;

  overflow:
    hidden;

}


.safety p {

  color:
    #D9E7EF;

}


.safety .warning {

  background:
    rgba(255,255,255,.10);

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:
    18px;

  padding:
    17px;

  margin-top:
    18px;

}


/* ============================================================
   BOOKING
============================================================ */

.booking-section {

  background:
    linear-gradient(
      180deg,
      #F8FCFC 0%,
      #E7F7F5 100%
    );

  border-top:
    1px solid #D4ECEA;

}


.booking-shell {

  display:
    grid;

  grid-template-columns:
    .75fr 1.25fr;

  gap:
    30px;

  align-items:
    start;

}


.booking-aside {

  position:
    sticky;

  top:
    116px;

}


.booking-aside p {

  color:
    var(--muted);

}


.summary-card {

  background:
    var(--brown-dark);

  color:
    white;

  border-radius:
    24px;

  padding:
    24px;

  margin-top:
    22px;

}


.summary-card .row {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    9px 0;

  border-bottom:
    1px solid rgba(255,255,255,.12);

  font-size:
    .92rem;

}


.summary-card .row:last-child {

  border:
    0;

  padding-top:
    15px;

  font-size:
    1.12rem;

  font-weight:
    900;

}


.form-card {

  background:
    white;

  border:
    1px solid #D0E7E8;

  border-radius:
    30px;

  padding:
    32px;

  box-shadow:
    var(--shadow);

}


.form-step {

  border-bottom:
    1px solid var(--line);

  padding-bottom:
    28px;

  margin-bottom:
    28px;

}


.form-step:last-of-type {

  border-bottom:
    0;

  margin-bottom:
    8px;

}


.form-step-head {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    18px;

}


.form-step-head .n {

  width:
    34px;

  height:
    34px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  background:
    var(--blush);

  color:
    var(--brown-dark);

  font-weight:
    900;

}


label {

  font-size:
    .86rem;

  font-weight:
    800;

  display:
    block;

  margin-bottom:
    7px;

}


input,
select {

  width:
    100%;

  border:
    1px solid #C7DCE0;

  border-radius:
    14px;

  padding:
    13px 14px;

  background:
    white;

  color:
    var(--ink);

  outline:
    none;

}


input:focus,
select:focus {

  border-color:
    var(--brown);

  box-shadow:
    0 0 0 4px rgba(16,169,163,.12);

}


.grid-2 {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;

}


.zip-check {

  display:
    flex;

  gap:
    10px;

}


.zip-check input {

  flex:
    1;

}


.status {

  margin-top:
    10px;

  font-size:
    .88rem;

  padding:
    10px 12px;

  border-radius:
    12px;

  display:
    none;

}


.status.ok {

  display:
    block;

  background:
    #EAF8F6;

  color:
    #19695F;

  border:
    1px solid #BFEAE6;

}


.status.bad {

  display:
    block;

  background:
    #FFF3F0;

  color:
    #A7473C;

  border:
    1px solid #F9B4A8;

}


.bag-options {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;

}


.bag-option {

  border:
    1px solid var(--line);

  border-radius:
    18px;

  padding:
    18px;

}


.bag-option .top {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

  align-items:
    center;

  margin-bottom:
    12px;

}


.counter {

  display:
    flex;

  align-items:
    center;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  overflow:
    hidden;

  width:
    max-content;

}


.counter button {

  width:
    36px;

  height:
    36px;

  border:
    0;

  background:
    var(--blush-soft);

  color:
    var(--brown-dark);

  font-weight:
    900;

}


.counter span {

  min-width:
    36px;

  text-align:
    center;

  font-weight:
    900;

}


.minimum-note {

  font-size:
    .84rem;

  color:
    var(--muted);

  margin-top:
    12px;

}


.payment-note {

  background:
    var(--blush-soft);

  border:
    1px solid #CFE8E6;

  border-radius:
    16px;

  padding:
    14px 16px;

  color:
    #445E70;

  font-size:
    .88rem;

  margin:
    18px 0;

}


/* ============================================================
   PICKUP DATE SELECTOR
============================================================ */

.pickup-date-options {

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;

  margin-top:
    10px;

  margin-bottom:
    10px;

}


.pickup-date-btn {

  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    100%;

  min-height:
    76px;

  border:
    1px solid #D9E8EA;

  background:
    #FFFFFF;

  color:
    #17384B;

  border-radius:
    16px;

  padding:
    15px 16px;

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;

}


.pickup-date-label {

  display:
    block;

  font-size:
    1rem;

  font-weight:
    800;

  line-height:
    1.25;

  color:
    inherit;

}


.pickup-date-btn small {

  display:
    block;

  margin-top:
    4px;

  font-size:
    .76rem;

  font-weight:
    600;

  color:
    #70838C;

}


.pickup-date-btn:hover {

  border-color:
    #20A6A6;

  transform:
    translateY(-1px);

  box-shadow:
    0 8px 22px rgba(32,166,166,.10);

}


.pickup-date-btn.selected {

  background:
    #20A6A6;

  color:
    #FFFFFF;

  border-color:
    #20A6A6;

  box-shadow:
    0 10px 24px rgba(32,166,166,.20);

}


.pickup-date-btn.selected small {

  color:
    rgba(255,255,255,.85);

}


.pickup-date-btn:focus-visible {

  outline:
    3px solid rgba(244,180,64,.45);

  outline-offset:
    3px;

}


.no-pickup-dates {

  grid-column:
    1 / -1;

  border:
    1px solid #D9E8EA;

  background:
    #F6FAFA;

  color:
    #526770;

  border-radius:
    16px;

  padding:
    16px;

  font-size:
    .9rem;

  line-height:
    1.5;

}


/* ============================================================
   FOOTER
============================================================ */

footer {

  background:
    #2B211D;

  color:
    white;

  padding:
    52px 0 24px;

}


.footer-grid {

  display:
    grid;

  grid-template-columns:
    1.15fr .85fr .85fr;

  gap:
    40px;

}


footer p,
footer a {

  color:
    #D2E0E4;

}


.footer-title {

  font-family:
    Georgia,
    serif;

  font-size:
    1.8rem;

  margin-bottom:
    9px;

}


.footer-zips {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

}


.footer-zips span {

  padding:
    6px 10px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.08);

  font-size:
    .8rem;

}


.footer-bottom {

  margin-top:
    38px;

  padding-top:
    20px;

  border-top:
    1px solid rgba(255,255,255,.12);

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    #A8BBC4;

  font-size:
    .82rem;

}


/* ============================================================
   MODAL
============================================================ */

.modal-backdrop {

  position:
    fixed;

  inset:
    0;

  background:
    rgba(28,21,18,.62);

  z-index:
    80;

  display:
    none;

  place-items:
    center;

  padding:
    20px;

}


.modal-backdrop.show {

  display:
    grid;

}


.modal {

  max-width:
    520px;

  background:
    white;

  border-radius:
    24px;

  padding:
    28px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.26);

}


.modal h3 {

  font-family:
    Georgia,
    serif;

  font-size:
    1.65rem;

}


.modal p {

  color:
    var(--muted);

}


.modal-actions {

  display:
    flex;

  justify-content:
    flex-end;

  margin-top:
    20px;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 940px) {


  .nav-links {

    display:
      none;

  }


  .menu-btn {

    display:
      grid;

    place-items:
      center;

  }


  .nav-cta .btn {

    display:
      none;

  }


  .hero-grid,
  .area-panel,
  .prep-panel,
  .policy-grid,
  .booking-shell {

    grid-template-columns:
      1fr;

  }


  .hero-art {

    min-height:
      470px;

  }


  .steps {

    grid-template-columns:
      1fr 1fr;

  }


  .trust-strip {

    grid-template-columns:
      1fr 1fr;

  }


  .trust-item:nth-child(3) {

    border-left:
      0;

    border-top:
      1px solid var(--line);

  }


  .trust-item:nth-child(4) {

    border-top:
      1px solid var(--line);

  }


  .zip-list {

    justify-content:
      flex-start;

  }


  .booking-aside {

    position:
      static;

  }


}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {


  .container {

    width:
      min(
        var(--max),
        calc(100% - 24px)
      );

  }


  .section {

    padding:
      66px 0;

  }


  .nav {

    height:
      76px;

  }


  .brand img {

    width:
      180px;

    height:
      61px;

  }


  .hero {

    padding-top:
      36px;

  }


  h1 {

    font-size:
      clamp(
        3rem,
        17vw,
        4.8rem
      );

  }


  .hero-art {

    min-height:
      430px;

    border-radius:
      28px;

  }


  .laundry-stack {

    grid-template-columns:
      .95fr 1.05fr;

    left:
      5%;

    right:
      5%;

  }


  .bag {

    min-height:
      275px;

    padding:
      28px 18px;

  }


  .bag-logo {

    font-size:
      1.45rem;

  }


  .floating-card {

    left:
      6%;

    top:
      7%;

    max-width:
      190px;

  }


  .trust-strip,
  .pricing-grid,
  .split-grid,
  .steps,
  .footer-grid,
  .bag-options,
  .grid-2 {

    grid-template-columns:
      1fr;

  }


  .trust-item + .trust-item {

    border-left:
      0;

    border-top:
      1px solid var(--line);

  }


  .area-panel {

    padding:
      28px 24px;

  }


  .section-head {

    display:
      block;

  }


  .pricing-note {

    display:
      block;

  }


  .pricing-note span {

    display:
      block;

    margin-top:
      5px;

  }


  .prep-points {

    grid-template-columns:
      1fr;

  }


  .policy-line {

    grid-template-columns:
      1fr;

    gap:
      4px;

  }


  .form-card {

    padding:
      22px 18px;

  }


  .zip-check {

    flex-direction:
      column;

  }


  .pickup-date-options {

    grid-template-columns:
      1fr;

  }


  .footer-bottom {

    display:
      block;

  }


}