/* ============================================================
   Mr. 1 Bedroom — brand layer
   Loads AFTER styles.css and overrides it.

   When the logo and colors are final, change the six values in
   :root below and keep them matching BRAND_PRIMARY / BRAND_DARK /
   BRAND_SECOND in config.php (emails can't read this file).
   ============================================================ */

:root{
  /* ---- Official brand sheet ----------------------------------------
     Deep Navy   #0D1F35   primary
     Saddle Tan  #B88C5A   accent
     Warm Cream  #F5EFE6   background
     Slate Gray  #8F8B82   neutral

     Note on the mapping: --orange is the token styles.css uses for button
     backgrounds with white text on top. Saddle Tan only reaches 3.0:1 there,
     which fails WCAG, so navy takes the primary slot and tan is the accent.
     --olive drives small-caps labels and tick marks, so it carries a darkened
     tan that stays legible; --tan below is the true accent for rules and fills.
     ------------------------------------------------------------------ */
  --navy:         #0D1F35;
  --tan:          #B88C5A;
  --cream:        #F5EFE6;
  --slate:        #8F8B82;

  --orange:       #0D1F35;   /* primary: buttons, active tab, focus ring  */
  --orange-deep:  #061426;   /* hover / pressed / links                   */
  --olive:        #8A6636;   /* accent as TEXT: eyebrows, ticks, tagline  */

  --ink:          #0D1F35;
  --paper:        #FFFFFF;
  --cloud:        #F5EFE6;
  --line:         #E5DCCD;

  /* Derived. styles.css hardcodes warm versions of these in a few places,
     so they're re-pointed at tokens further down this file. */
  --tint:         #FAF5EC;   /* pale tan wash                  */
  --tint-ink:     #6B4A22;   /* readable text on --tint        */
  --on-dark:      #EDE3D3;   /* body text over dark photos     */
  --accent-light: #D0A876;   /* tan lifted for dark photos     */
  --muted:        #8F8B82;   /* Slate Gray — secondary text    */

  /* Montserrat Semibold is the brand's secondary face. Bromello is the
     logo lettering only and is not loaded as a webfont. */
  --font:         'Montserrat', system-ui, sans-serif;
}

body{ font-family:var(--font) }

/* ---------- What we move: tile grid ---------- */
.svc-grid{
  display:grid; gap:12px; max-width:1080px; margin:0 auto; padding:0 20px;
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:900px){ .svc-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:620px){ .svc-grid{grid-template-columns:repeat(2,1fr); gap:10px} }

.svc{
  all:unset; display:block; cursor:pointer; position:relative;
  aspect-ratio:1/1; perspective:1200px; border-radius:14px;
}
.svc:focus-visible{ outline:3px solid var(--orange); outline-offset:3px }

.svc-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.svc[aria-expanded="true"] .svc-inner{ transform:rotateY(180deg) }

.svc-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:14px; padding:16px; display:flex; flex-direction:column;
}

.svc-front{ background:#fff; border:1px solid var(--line); justify-content:flex-end }
.svc:hover .svc-front{ border-color:var(--orange) }

.svc-plus{
  position:absolute; top:13px; right:13px; width:21px; height:21px;
  border-radius:50%; background:var(--cloud); color:var(--orange);
  font-weight:900; font-size:.82rem; line-height:21px; text-align:center;
}

.svc-name{
  font-weight:900; font-size:1.02rem; line-height:1.06; letter-spacing:-.02em;
  color:var(--ink);
}
.svc-name small{
  display:block; font-weight:500; font-size:.75rem; color:#7A7E86;
  letter-spacing:0; margin-top:4px; line-height:1.3;
}

.svc-back{
  background:#0A1B2E; color:#fff; transform:rotateY(180deg);
  justify-content:center; gap:8px;
}
.svc-back b{
  font-size:.74rem; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange);
}
.svc-back span{ font-size:.84rem; line-height:1.45; color:#D9DCE4 }

/* ---------- Packing / in-home moves ---------- */
.svc-addons{
  display:grid; gap:12px; grid-template-columns:1fr 1fr;
  max-width:1080px; margin:12px auto 0; padding:0 20px;
}
@media(max-width:620px){ .svc-addons{grid-template-columns:1fr} }

.svc-addon{
  background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--orange); border-radius:14px; padding:20px 22px;
}
.svc-addon h4{ font-weight:900; font-size:1.15rem; margin:0 0 6px; letter-spacing:-.02em }
.svc-addon p{ margin:0; font-size:.92rem; color:#4A4E56; line-height:1.5 }

@media (prefers-reduced-motion:reduce){ .svc-inner{ transition:none } }


/* ---------- token fixes for values hardcoded in styles.css ---------- */
.prep-card.warn{ background:var(--tint) }
.rider-note{ background:var(--tint); color:var(--tint-ink) }
.terms-note{ background:var(--tint); color:var(--tint-ink) }
.hero2 .sub{ color:var(--on-dark) }
.agent-hero .sub{ color:var(--on-dark) }

/* Accents sitting on dark hero photos: navy would disappear, so use the
   lifted bronze instead of the primary. */
.hero2 .eyebrow, .agent-hero .eyebrow{ color:var(--accent-light) }
.hero2 h1 em{ color:var(--accent-light) }

/* Bronze badge with white text needs the darker mix */
.hero .easy{ background:var(--tint-ink) }

/* "Your Move" page disclaimer uses the same warm tint inline */
.disclaimer{ background:var(--tint) !important; color:var(--tint-ink) !important;
             border-color:var(--orange) !important }


/* ---------- true Saddle Tan for decorative rules and fills ---------- */
.topbar, .barh, .mvhead, .aghead{ border-bottom-color:var(--tan) }
.prep-card.warn{ border-color:var(--tan) }
.rider-note, .terms-note, .disclaimer{ border-color:var(--tan) !important }
.svc-addon{ border-left-color:var(--tan) }
.svc-back b{ color:var(--accent-light) }
.svc-plus{ color:var(--olive) }


/* ============================================================
   Tile colors — cycles all four brand colors, mirrored across
   the two rows so a 4-up grid doesn't turn into vertical stripes:

     row 1   navy  tan   cream slate
     row 2   slate cream tan   navy

   Text color is set per background: cream on navy, navy on the
   three light fills. White on Saddle Tan or Slate Gray fails
   contrast, so it's never used.
   ============================================================ */

/* --- Deep Navy --- */
.svc:nth-child(1) .svc-front,
.svc:nth-child(8) .svc-front{ background:var(--navy); border-color:var(--navy) }
.svc:nth-child(1) .svc-name,
.svc:nth-child(8) .svc-name{ color:var(--cream) }
.svc:nth-child(1) .svc-name small,
.svc:nth-child(8) .svc-name small{ color:rgba(245,239,230,.72) }
.svc:nth-child(1) .svc-plus,
.svc:nth-child(8) .svc-plus{ background:rgba(245,239,230,.16); color:var(--tan) }
.svc:nth-child(1):hover .svc-front,
.svc:nth-child(8):hover .svc-front{ border-color:var(--tan) }

/* --- Saddle Tan --- */
.svc:nth-child(2) .svc-front,
.svc:nth-child(7) .svc-front{ background:var(--tan); border-color:var(--tan) }
.svc:nth-child(2) .svc-name,
.svc:nth-child(7) .svc-name{ color:var(--navy) }
.svc:nth-child(2) .svc-name small,
.svc:nth-child(7) .svc-name small{ color:rgba(13,31,53,.72) }
.svc:nth-child(2) .svc-plus,
.svc:nth-child(7) .svc-plus{ background:rgba(13,31,53,.14); color:var(--navy) }

/* --- Warm Cream --- */
.svc:nth-child(3) .svc-front,
.svc:nth-child(6) .svc-front{ background:var(--cream); border-color:var(--line) }
.svc:nth-child(3) .svc-name,
.svc:nth-child(6) .svc-name{ color:var(--navy) }
.svc:nth-child(3) .svc-plus,
.svc:nth-child(6) .svc-plus{ background:rgba(13,31,53,.10); color:var(--navy) }

/* --- Slate Gray --- */
.svc:nth-child(4) .svc-front,
.svc:nth-child(5) .svc-front{ background:var(--slate); border-color:var(--slate) }
.svc:nth-child(4) .svc-name,
.svc:nth-child(5) .svc-name{ color:var(--navy) }
.svc:nth-child(4) .svc-name small,
.svc:nth-child(5) .svc-name small{ color:rgba(13,31,53,.74) }
.svc:nth-child(4) .svc-plus,
.svc:nth-child(5) .svc-plus{ background:rgba(13,31,53,.14); color:var(--navy) }

/* every tile flips to the same deep navy, so the back reads as one
   consistent "answer" surface rather than eight different ones */
.svc:hover .svc-front{ filter:brightness(1.04) }

/* ---------- packing / in-home moves: solid navy blocks ---------- */
.svc-addon{
  background:var(--navy); border-color:var(--navy);
  border-left:4px solid var(--tan);
}
.svc-addon h4{ color:var(--cream) }
.svc-addon p{ color:rgba(245,239,230,.78) }


/* ---------- photo scrims retinted navy ----------
   styles.css ships a warm brown scrim (rgba(16,11,3,...)) left over from the
   old palette, which muddies the navy photos. These match the brand and are
   set to keep white hero text above 10:1 over the graded images. */
.hero2::after{ background:rgba(13,31,53,.60) }
.band::before{ background:rgba(13,31,53,.72) }
.agent-hero::before{ background:rgba(13,31,53,.72) }


/* ---------- About ---------- */
.abt{ max-width:720px; margin:0 auto; padding:0 20px }
.abt p{ margin:0 0 16px; font-size:1.02rem; line-height:1.65; color:#3D4149 }
.abt p strong{ color:var(--navy) }
.abt-lead{
  font-size:1.22rem !important; font-weight:700; color:var(--navy) !important;
  line-height:1.45 !important; margin-bottom:22px !important;
}
.abt-values{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 8px;
}
@media(max-width:700px){ .abt-values{ grid-template-columns:1fr } }
.abt-values .perk{
  background:var(--cream); border:1px solid var(--line); border-radius:14px;
  padding:20px 18px; text-align:center;
}
.abt-values .ico{ font-size:1.7rem; margin-bottom:8px }
.abt-values h4{ font-weight:900; font-size:1rem; color:var(--navy); margin-bottom:6px }
.abt-values p{ font-size:.88rem; margin:0; color:#5A5F68 }

.abt-quote{
  margin:30px 0 0; padding:24px 26px; border:0; border-left:4px solid var(--tan);
  background:var(--navy); border-radius:14px;
  color:var(--cream); font-size:1.05rem; line-height:1.6; font-weight:600; font-style:italic;
}