/* =====================================================================
   Rose Rock Real Estate Advisors — site styles
   Brand layer on top of Bootstrap 5. Only styles Bootstrap utilities
   can't cover live here (brand colors, typography, the "key" motif,
   and a few bespoke components).
   ===================================================================== */

:root{
  --ink:#121628;
  --ink-soft:#3a3f55;
  --terracotta:#B5795D;
  --terracotta-dark:#8E5B41;
  --slate:#A8B4B7;
  --cream:#F7F4EF;
  --cream-deep:#EFE9E0;
  --line:#DCD4C8;

  /* Map brand tokens onto Bootstrap so utilities (border, bg, text) inherit them */
  --bs-border-color:#DCD4C8;
  --bs-body-font-family:'Archivo', sans-serif;
  --bs-body-color:#121628;
  --bs-body-bg:#F7F4EF;
}

html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{-webkit-font-smoothing:antialiased; overflow-x:clip;}
h1,h2,h3,h4{font-family:'Archivo', sans-serif; font-weight:800; letter-spacing:-0.01em;}
.serif{font-family:'Source Serif 4', serif;}
.container{max-width:1180px;}

/* ---- brand colour helpers ---- */
.bg-ink{background:var(--ink)!important;}
.bg-cream{background:var(--cream)!important;}
.bg-cream-deep{background:var(--cream-deep)!important;}
.bg-white{background:#fff!important;}
.text-ink{color:var(--ink)!important;}
.text-ink-soft{color:var(--ink-soft)!important;}
.text-cream{color:var(--cream)!important;}
.text-slate{color:var(--slate)!important;}
.text-terracotta{color:var(--terracotta-dark)!important;}

/* ---- buttons ---- */
.btn-terracotta{background:var(--terracotta); color:#fff; border-radius:2px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; font-size:14px; padding:15px 30px;}
.btn-terracotta:hover{background:var(--terracotta-dark); color:#fff;}
.btn-ink{background:var(--ink); color:var(--cream); border-radius:2px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:13px; padding:12px 22px;}
.btn-ink:hover{background:var(--terracotta-dark); color:var(--cream);}
.btn-outline-ink{border:1.5px solid var(--ink); color:var(--ink); border-radius:2px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; font-size:14px; padding:14px 28px;}
.btn-outline-ink:hover{background:var(--ink); color:var(--cream);}

/* ---- eyebrow label ---- */
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta-dark); display:inline-flex; align-items:center; gap:10px;}
.eyebrow .dot{width:7px; height:7px; background:var(--terracotta); border-radius:50%;}
.lede{font-family:'Source Serif 4', serif; font-size:19px; line-height:1.6; color:var(--ink-soft);}

/* ---- signature "key" motif ---- */
.key-rule{height:14px; background-image:repeating-linear-gradient(90deg,var(--terracotta) 0 3px,transparent 3px 28px); background-position:bottom; background-repeat:repeat-x; opacity:.9;}

/* ---- header / nav ---- */
.site-header{background:rgba(247,244,239,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.site-header .navbar-brand img{height:46px; width:auto;}
.site-header .nav-link{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid transparent; padding-bottom:4px; transition:color .2s, border-color .2s;}
.site-header .nav-link:hover, .site-header .nav-link.active{color:var(--ink); border-color:var(--terracotta);}

/* ---- hero ---- */
.hero h1{font-size:56px; line-height:1.04;}
.hero h1 em{font-style:normal; color:var(--terracotta-dark);}
.stat .num{font-size:28px; font-weight:800; letter-spacing:-0.02em;}
.stat .label{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em;}
/* Hero stats: 4-across on desktop, 2x2 on mobile. Bootstrap's border-end/padding
   utilities aren't responsive, so square up the 2x2 grid's dividers + padding below
   the sm breakpoint: drop the stray right-edge border, add the between-rows line,
   and align the two columns' padding. */
@media (max-width: 575.98px){
  .hero-stats .stat{ padding:1rem 1rem 1rem 0 !important; }            /* left column */
  .hero-stats .stat:nth-child(2n){ padding:1rem 0 1rem 1rem !important; border-right:0 !important; } /* right column: no edge divider */
  .hero-stats .stat:nth-child(n+3){ border-top:1px solid var(--line); } /* divider between the two rows */
}
.hero-graphic{position:relative; aspect-ratio:4/5; background:var(--ink); border-radius:2px; overflow:hidden;}
.hero-graphic .columns{position:absolute; inset:0; display:flex; align-items:flex-end; gap:10%; padding:0 14%; opacity:.9;}
.hero-graphic .col-bar{width:18%; background:var(--terracotta);}
.hero-graphic .col-bar:nth-child(1){height:62%;}
.hero-graphic .col-bar:nth-child(2){height:100%; background:var(--cream-deep);}
.hero-graphic .col-bar:nth-child(3){height:78%;}
.hero-graphic .caption{position:absolute; bottom:24px; left:24px; right:24px; color:var(--cream); font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.75;}

/* ---- section headings ---- */
.section-head h2{font-size:36px; line-height:1.15;}
.section-head p{font-family:'Source Serif 4',serif; font-size:17px; color:var(--ink-soft); line-height:1.6;}

/* ---- services ---- */
.service-card .n{font-size:12px; color:var(--terracotta-dark); font-weight:700; letter-spacing:.08em;}
.service-card h3{font-size:18px;}
.service-card p{font-size:14px; color:var(--ink-soft); line-height:1.55;}
/* Dividers between service cards, correct at every breakpoint.
   (Bootstrap has no responsive border utilities, so this is done here.) */
.service-grid .service-card{border-bottom:1px solid var(--line);}
.service-grid .service-card:last-child{border-bottom:none;}                 /* mobile: stacked */
@media (min-width:768px){                                                   /* md: 2 columns */
  .service-grid .service-card:nth-child(odd){border-right:1px solid var(--line);}
  .service-grid .service-card:nth-child(3),
  .service-grid .service-card:nth-child(4){border-bottom:none;}
}
@media (min-width:992px){                                                   /* lg: 4 columns */
  .service-grid .service-card{border-bottom:none;}
  .service-grid .service-card:not(:last-child){border-right:1px solid var(--line);}
}

/* ---- listings ---- */
.sync-pill{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ink-soft); border:1px solid var(--line); background:#fff; padding:8px 14px; border-radius:20px;}
.sync-pill .pulse{width:7px; height:7px; border-radius:50%; background:#5C9A6E; animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(92,154,110,.5);}70%{box-shadow:0 0 0 8px rgba(92,154,110,0);}100%{box-shadow:0 0 0 0 rgba(92,154,110,0);}}

/* ---- about ---- */
.portrait{aspect-ratio:4/5; background:linear-gradient(160deg,#1c2138,#0c0e1a); border:1px solid #2a3050; border-radius:2px; overflow:hidden;}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:center top;}
.about-hero h1, .about-hero h2{font-size:46px;}
.about-hero h2{color:var(--cream);}
.about-hero .role{font-size:15px; color:var(--slate); text-transform:uppercase; letter-spacing:.1em; font-weight:600;}
.credential{border:1px solid #343a5c; color:var(--slate); font-size:12px; font-weight:700; padding:7px 13px; border-radius:20px; letter-spacing:.04em;}
.bio-copy p{font-family:'Source Serif 4',serif; font-size:16.5px; line-height:1.8; color:var(--ink-soft);}
.bio-copy p b{color:var(--ink); font-weight:600;}
/* Marylee shares the dark About section: lighten her bio text + the divider between principals. */
.about-hero .bio-copy p{color:#C9CEDC;}
.about-hero .bio-copy p b{color:#fff;}
.about-hero hr.principal-sep{border-top:1px solid #2a3050; opacity:1;}
/* "Read more" toggle (Bootstrap Collapse swaps the .collapsed class, which swaps the label). */
.more-link{display:inline-block; font-family:'Archivo',sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--terracotta); text-decoration:none; cursor:pointer;}
.more-link:hover{color:#fff;}
.more-link .more-close{display:none;}
.more-link:not(.collapsed) .more-open{display:none;}
.more-link:not(.collapsed) .more-close{display:inline;}
.tr-card{background:#fff; border:1px solid var(--line); padding:24px;}
.tr-card .num{font-size:30px; font-weight:800; color:var(--terracotta-dark); letter-spacing:-0.02em;}
.tr-card .label{font-size:12.5px; color:var(--ink-soft); line-height:1.4;}
.side-block h3{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); padding-bottom:10px; border-bottom:1px solid var(--line);}
.side-block li{font-size:14.5px; color:var(--ink-soft); padding:9px 0; border-bottom:1px solid var(--cream-deep); line-height:1.4;}
.side-block li:last-child{border-bottom:none;}
.honor .yr{font-size:12px; color:var(--terracotta-dark); font-weight:700; letter-spacing:.06em;}
.honor p{font-size:14.5px; color:var(--ink); line-height:1.5;}

/* ---- contact ---- */
.contact-detail .icon{width:42px; height:42px; background:var(--ink); border-radius:2px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-size:18px;}
.contact-detail .val{font-size:15px; color:var(--ink); font-weight:600;}
.contact-detail .val a{color:var(--ink);}
.contact-detail .val a:hover{color:var(--terracotta-dark);}
.contact-detail .sub{font-size:12px; color:var(--ink-soft);}
.contact-form{background:#fff; border:1px solid var(--line); padding:40px; border-radius:2px;}
.contact-form .form-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.contact-form .form-control, .contact-form .form-select{background:var(--cream); border:1px solid var(--line); border-radius:2px; font-size:14px; padding:13px 15px;}
.contact-form .form-control:focus, .contact-form .form-select:focus{border-color:var(--terracotta); box-shadow:none;}

/* ---- footer ---- */
footer h4{color:var(--cream); font-size:13px; text-transform:uppercase; letter-spacing:.08em;}
footer .foot-logo{height:38px;}
footer p, footer li, footer a{font-size:14px; color:var(--slate);}
footer a:hover{color:var(--cream);}
footer .foot-divider{border-top:1px solid #2a3050;}

/* ---- scroll reveal animation ---- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* Staggered reveal: children fade in one-by-one when the group scrolls in */
.reveal-children > *{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal-children.in > *{opacity:1; transform:none;}
.reveal-children.in > *:nth-child(1){transition-delay:0s;}
.reveal-children.in > *:nth-child(2){transition-delay:.12s;}
.reveal-children.in > *:nth-child(3){transition-delay:.24s;}
.reveal-children.in > *:nth-child(4){transition-delay:.36s;}
.reveal-children.in > *:nth-child(5){transition-delay:.48s;}
.reveal-children.in > *:nth-child(6){transition-delay:.60s;}

/* ---- responsive type ---- */
@media (max-width:991.98px){
  .hero h1{font-size:38px;}
  .about-hero h1, .about-hero h2{font-size:36px;}
  .section-head h2{font-size:28px;}
  .site-header .nav-link{border-bottom:none; padding:8px 0;}
}
@media (max-width:400px){
  .hero h1{font-size:32px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,
  .reveal-children > *{opacity:1; transform:none; transition:none;}
  .sync-pill .pulse{animation:none;}
}