:root {
  --navy: #4a403a;
  --navy-2: #62564f;
  --blue: #8b817a;
  --blue-2: #d3c5bb;
  --ink: #342f2b;
  --muted: #746c66;
  --line: #ded6d0;
  --mist: #f6f2ef;
  --white: #ffffff;
  --sand: #e9e0da;
  --cream: #fbf9f7;
  --brown: #8b817a;
  --brown-dark: #4a403a;
  --brown-soft: #d3c5bb;
  --radius: 22px;
  --shadow: 0 18px 60px rgba(74, 64, 58, .14);
  --container: 1180px;
  /* Recolors the white CRI logo (white letters on transparent PNG) to the
     brand navy/brown (--navy: #4a403a) for use on light/white backgrounds,
     so the mark stays visible with contrast (scrolled header, footer). */
  --logo-brand-filter: brightness(0) invert(44%) sepia(50%) saturate(54%) hue-rotate(339deg) brightness(72%) contrast(166%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 100px 0; }
.section-sm { padding: 72px 0; }
.section-soft { background: var(--mist); }
.section-dark { background: var(--navy); color: var(--white); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #756960; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.page-hero .eyebrow,
.article-hero .eyebrow,
.section-dark .eyebrow,
.cta .eyebrow { color: rgba(255,255,255,.92); }
h1,h2,h3,h4 { margin: 0 0 .7em; line-height: 1.12; letter-spacing: -.035em; }
h1 { font-size: clamp(2.75rem, 6vw, 5.8rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
p { margin: 0 0 1.25em; }
.lead { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--muted); max-width: 760px; }
.section-dark .lead, .page-hero .lead { color: rgba(255,255,255,.76); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 800; transition: .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--navy); background: var(--blue-2); box-shadow: 0 12px 30px rgba(139,129,122,.24); }
.btn-primary:hover { background: #e2d7cf; }
.btn-dark { color: white; background: var(--navy); }
.btn-outline { border-color: rgba(255,255,255,.36); color: white; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.btn-outline-dark { border-color: #c7bbb3; color: var(--navy); background: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.site-header.scrolled { background: rgba(255,255,255,.96); border-bottom-color: rgba(74,64,58,.08); box-shadow: 0 10px 30px rgba(30,25,22,.12); backdrop-filter: blur(15px); }
.nav-wrap { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand img { width: 150px; height: auto; filter: brightness(0) invert(1); transition: filter .3s ease; }
.site-header.scrolled .brand img { filter: var(--logo-brand-filter); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav > a, .nav-drop > button { border: 0; background: none; padding: 10px 10px; color: #fff; font-weight: 750; font-size: clamp(.76rem, .95vw, .92rem); border-radius: 999px; white-space: nowrap; text-shadow: 0 1px 12px rgba(0,0,0,.3); transition: color .3s ease, background .2s ease, text-shadow .3s ease; }
.nav > a:hover, .nav > a.active, .nav-drop > button:hover { color: #fff; background: rgba(255,255,255,.16); }
.nav > a.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.site-header.scrolled .nav > a:not(.nav-cta), .site-header.scrolled .nav-drop > button { color: #514741; text-shadow: none; }
.site-header.scrolled .nav > a:not(.nav-cta):hover, .site-header.scrolled .nav > a.active:not(.nav-cta), .site-header.scrolled .nav-drop > button:hover { color: var(--navy); background: #f3eeea; }
.site-header.scrolled .nav > a.active { box-shadow: none; }
.nav-drop { position: relative; }
.nav-drop-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 245px; padding: 10px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-menu a { display: block; padding: 11px 12px; border-radius: 10px; font-weight: 700; color: #5f554f; white-space: normal; }
.nav-drop-menu a:hover { background: var(--mist); color: var(--navy); }
.nav-cta { margin-left: 4px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.42); }
.site-header.scrolled .nav-cta { background: var(--navy); border-color: transparent; color: #fff; }
.menu-toggle { display: none; position: relative; z-index: 2; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); border-radius: 14px; background: rgba(255,255,255,.1); }
.menu-toggle span { display: block; width: 20px; height: 2px; background: #fff; margin: 4px auto; transition: transform .25s ease, opacity .2s ease; }
.site-header.scrolled .menu-toggle { border-color: var(--line); background: white; }
.site-header.scrolled .menu-toggle span { background: var(--navy); }
/* Turn the hamburger into an "X" while the mobile nav is open. The open
   popover panel is always white, so force a solid white button + dark "X"
   here regardless of scroll state — otherwise a white "X" on the default
   translucent button can blend into the white panel behind it. The extra
   ".site-header .nav-wrap" qualifier is needed to outrank the
   ".site-header:not(.scrolled) .menu-toggle" rule in the media query below. */
.site-header .nav-wrap .menu-toggle[aria-expanded="true"] { background: white; border-color: var(--line); }
.site-header .nav-wrap .menu-toggle[aria-expanded="true"] span { background: var(--navy); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero { position: relative; min-height: 100vh; display: flex; align-items: end; overflow: hidden; color: white; background: var(--navy); }
.hero-media { position: absolute; inset: 0; overflow: hidden; background: url('../img/about-hero.webp') center/cover; }
.hero-media iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%,-50%); pointer-events: none; border: 0; }
.hero-shield { position: absolute; inset: 0; z-index: 2; background: transparent; }
.hero::before { display:none; content: ""; position: absolute; inset: 0; z-index: 1; }
.hero-content { display:none; position: relative; z-index: 3; padding: 115px 0 82px; max-width: 820px; }
.hero h1 { max-width: 780px; }
.hero .lead { color: rgba(255,255,255,.82); max-width: 640px; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); margin-bottom: 20px; font-size: .86rem; font-weight: 700; }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.hero-note { max-width: 260px; padding-left: 18px; border-left: 2px solid var(--blue-2); color: rgba(255,255,255,.7); font-size: .92rem; }

.trust-strip { border-bottom: 1px solid var(--line); background: white; }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.trust-item { padding: 28px 24px; border-right: 1px solid var(--line); }
.trust-item:last-child { border-right: 0; }
.trust-item strong { display: block; color: var(--navy); font-size: 1.06rem; }
.trust-item span { color: var(--muted); font-size: .9rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(45px, 7vw, 100px); }
.split.reverse > :first-child { order: 2; }
.media-card { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); min-height: 460px; }
.media-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.media-card::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); border-radius: inherit; }
.float-card { position: absolute; left: 24px; bottom: 24px; right: 24px; padding: 20px; background: rgba(255,255,255,.94); border-radius: 16px; backdrop-filter: blur(12px); }
.float-card strong { display: block; font-size: 1.15rem; color: var(--navy); }
.feature-list { display: grid; gap: 14px; margin: 28px 0; }
.feature { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; }
.feature-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #f0e9e4; color: #756960; font-weight: 900; }
.feature strong { display: block; color: var(--navy); }
.feature p { margin: 2px 0 0; color: var(--muted); font-size: .94rem; }

.card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: .25s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card-media { aspect-ratio: 4/3; overflow: hidden; background: #eee9e5; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: .45s; }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 24px; }
.card-body h3 { margin-bottom: .45em; }
.card-body p { color: var(--muted); font-size: .96rem; }
.card-link { color: #756960; font-weight: 850; display: inline-flex; gap: 8px; align-items: center; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #f0e9e4; color: #756960; font-size: .75rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px; }

.stats-panel { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.16); border-radius: 20px; overflow: hidden; margin-top: 42px; }
.stat { padding: 28px; background: rgba(255,255,255,.06); }
.stat strong { display: block; font-size: 2rem; color: var(--blue-2); line-height: 1; margin-bottom: 8px; }
.stat span { color: rgba(255,255,255,.72); }

.parking-card { display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border-radius: 28px; background: var(--navy); color: white; box-shadow: var(--shadow); }
.parking-copy { padding: clamp(34px, 5vw, 64px); }
.parking-copy p { color: rgba(255,255,255,.72); }
.parking-media { min-height: 410px; position: relative; }
.parking-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.parking-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy), transparent 35%); }

.cta { padding: 56px; border-radius: 28px; background: linear-gradient(135deg, var(--navy), #6b5d55); color: white; display: flex; align-items: center; justify-content: space-between; gap: 35px; overflow: hidden; position: relative; }
.cta::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(127,210,244,.12); right:-80px; top:-100px; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(2rem,3.5vw,3.2rem); margin-bottom: .25em; }
.cta p { color: rgba(255,255,255,.72); margin: 0; }

.page-hero { background: linear-gradient(135deg, var(--navy), #6b5d55); color: white; padding: 110px 0 82px; position: relative; overflow: hidden; }
.page-hero::after { content:""; position:absolute; inset:auto -8% -70% auto; width:520px; height:520px; border-radius:50%; border: 80px solid rgba(127,210,244,.08); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 900px; font-size: clamp(2.7rem,5.6vw,5.2rem); }
.breadcrumb { display:flex; gap:8px; color:rgba(255,255,255,.62); font-size:.88rem; margin-bottom:22px; }
.breadcrumb a:hover { color:white; }

.values { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:40px; }
.value { padding:28px; background:var(--mist); border-radius:18px; }
.value strong { display:block; color:var(--navy); font-size:1.15rem; margin-bottom:8px; }
.value p { color:var(--muted); margin:0; }
.team-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:18px; }
.team-card { text-align:center; }
.team-photo { aspect-ratio: 1/1.12; overflow:hidden; border-radius:20px; background:var(--mist); margin-bottom:16px; }
.team-photo img { width:100%; height:100%; object-fit:cover; object-position:top; }
.team-card h3 { font-size:1.08rem; margin:0 0 5px; }
.team-card p { color:var(--muted); font-size:.86rem; margin:0; }

.tech-jump { position: sticky; top: 96px; z-index:20; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.tech-jump .container { display:flex; gap:8px; overflow:auto; padding-top:12px; padding-bottom:12px; scrollbar-width:none; }
.tech-jump a { flex:0 0 auto; padding:9px 14px; border-radius:999px; background:var(--mist); color:#5f554f; font-weight:750; font-size:.86rem; }
.tech-jump a:hover { background:#eee7e2; color:var(--navy); }
.tech-block { padding:78px 0; border-bottom:1px solid var(--line); scroll-margin-top:140px; }
.tech-block:last-child { border-bottom:0; }
.tech-head { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; margin-bottom:38px; }
.tech-head h2 { margin-bottom:0; }
.tech-head p { color:var(--muted); }
.tech-showcase { display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:center; }
.tech-image { min-height:420px; border-radius:24px; overflow:hidden; background:var(--mist); }
.tech-image img { width:100%; height:100%; object-fit:cover; }
.tech-copy { padding:10px; }
.pill-list { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 25px; }
.pill { padding:7px 11px; border-radius:999px; background:var(--mist); color:#5f554f; font-size:.84rem; font-weight:700; }
.video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.video-grid.four { grid-template-columns:repeat(2,1fr); }
.video-card { position:relative; width:100%; min-height:260px; padding:0; border:0; border-radius:20px; overflow:hidden; background:#4a403a; color:white; text-align:left; box-shadow:var(--shadow); }
.video-card > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.68; transition:.35s; }
.video-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(52,47,43,.86),transparent 65%); }
.video-card:hover > img { transform:scale(1.035); opacity:.78; }
.video-meta { position:absolute; inset:auto 20px 18px; z-index:2; }
.video-meta small { display:block; color:rgba(255,255,255,.68); text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.video-meta strong { display:block; font-size:1.08rem; margin-top:4px; }
.play { position:absolute; z-index:2; top:18px; right:18px; width:52px; height:52px; border-radius:50%; background:var(--blue-2); color:var(--navy); display:grid; place-items:center; box-shadow:0 10px 28px rgba(0,0,0,.25); font-size:1.2rem; }
.video-card iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; }

.treatment-path { padding:30px; border-radius:20px; background:var(--mist); border:1px solid transparent; }
.treatment-path:hover { border-color:#d6c9c0; background:#f5f0ec; }
.treatment-path .num { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:13px; background:white; color:#756960; font-weight:900; margin-bottom:18px; }
.treatment-path p { color:var(--muted); margin-bottom:0; }

.blog-card { display:flex; flex-direction:column; }
.blog-card .card-media { aspect-ratio:16/10; }
.blog-meta { color:#756960; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.blog-card .card-body { display:flex; flex-direction:column; flex:1; }
.blog-card .card-link { margin-top:auto; }

.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:start; }
.contact-list { display:grid; gap:16px; margin-top:28px; }
.contact-item { display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start; }
.contact-item .feature-icon { width:46px; height:46px; }
.form { padding:32px; border:1px solid var(--line); border-radius:24px; background:white; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.86rem; font-weight:800; color:#514741; }
.field input,.field textarea,.field select { width:100%; border:1px solid #d4cac3; border-radius:13px; padding:13px 14px; outline:none; color:var(--ink); background:#fcfaf8; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:#a7988e; box-shadow:0 0 0 4px rgba(139,129,122,.12); }
.field textarea { min-height:135px; resize:vertical; }
.form-note { font-size:.8rem; color:var(--muted); margin-top:14px; }
.form-status { display:none; margin-top:14px; padding:12px 14px; border-radius:12px; background:#f0eee4; color:#5b5840; font-weight:700; }
.map-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.map-card { border:1px solid var(--line); border-radius:22px; overflow:hidden; background:white; }
.map-card iframe { width:100%; height:330px; border:0; }
.map-copy { padding:22px; }
.hours { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hour { padding:26px; border-radius:18px; background:var(--mist); }
.hour strong { display:block; color:var(--navy); }
.hour span { color:var(--muted); }

.site-footer { background:#4a403a; color:rgba(255,255,255,.75); padding:70px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:38px; }
.footer-logo { width:84px; filter: brightness(0) invert(1); margin-bottom:18px; }
.footer-title { color:white; font-size:.92rem; text-transform:uppercase; letter-spacing:.1em; font-weight:850; margin-bottom:15px; }
.footer-links { display:grid; gap:9px; }
.footer-links a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:45px; padding-top:22px; display:flex; justify-content:space-between; gap:20px; font-size:.82rem; }
.mobile-cta { display:none; }
.reveal { opacity:0; transform:translateY(18px); transition:.7s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .nav { position:fixed; inset:96px 18px auto; display:none; flex-direction:column; align-items:stretch; gap:2px; padding:14px; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); max-height:calc(100vh - 116px); overflow-y:auto; }
  .nav.open { display:flex; }
  .nav > a,.nav-drop > button { width:100%; text-align:left; font-size:.96rem; padding:11px 12px; }
  /* Inside the open mobile popover the panel is always white, so links must
     always use the dark ("scrolled") colours, whether or not the page has
     been scrolled. */
  .nav.open > a, .nav.open .nav-drop > button { color:#514741; text-shadow:none; }
  .nav.open > a:not(.nav-cta):hover, .nav.open > a.active:not(.nav-cta), .nav.open .nav-drop > button:hover { color:var(--navy); background:#f3eeea; box-shadow:none; }
  /* .nav-cta keeps its own colour here: the ".site-header.scrolled .nav-cta"
     rule above (3 classes) already outranks the ".nav.open > a" rule just
     above (2 classes + 1 type) whenever the header has scrolled, so the CTA
     label stays white on its dark pill inside the mobile popover too. */
  .nav-drop-menu { position:static; display:none; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; margin:2px 4px 8px; padding:4px 0 2px 14px; border-left:2px solid var(--line); }
  .nav-drop.open .nav-drop-menu { display:block; }
  .nav-drop:hover .nav-drop-menu { display:none; }
  .nav-drop.open:hover .nav-drop-menu { display:block; }
  .nav-drop-menu a { padding:8px 10px; font-size:.82rem; font-weight:600; line-height:1.3; color:#6b6159; }
  .nav-drop-menu a:first-child { font-weight:800; color:#4a403a; padding-bottom:9px; margin-bottom:3px; border-bottom:1px solid var(--line); }
  .menu-toggle { display:block; }
  .site-header:not(.scrolled) .menu-toggle { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.1); }
  .site-header:not(.scrolled) .menu-toggle span { background:#fff; }
  .nav-cta { margin-left:0; }
  .team-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column:1/-1; }
}
@media (max-width: 820px) {
  .section { padding:76px 0; }
  .hero {
    width:100%;
    height:clamp(300px, 76vw, 420px);
    min-height:0;
    background: #000;
  }
  .hero-media {
    background: #000;
  }
  /* Show the complete 16:9 frame on mobile, centred in the available
     viewport instead of cropping it to fill the hero. */
  .hero-media iframe {
    display:block;
    top:50%;
    left:0;
    width:100%;
    height:auto;
    min-width:0;
    min-height:0;
    aspect-ratio:16 / 9;
    transform:translateY(-50%);
  }
  .hero::before { display:none; }
  .hero-content { display:none; }
  .hero-bottom { display:block; }
  .hero-note { margin-top:24px; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-item:nth-child(2) { border-right:0; }
  .trust-item:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); }
  .split,.parking-card,.contact-grid,.tech-head,.tech-showcase { grid-template-columns:1fr; }
  .split.reverse > :first-child { order:initial; }
  .media-card { min-height:400px; }
  .parking-media { min-height:330px; }
  .parking-media::after { background:linear-gradient(0deg,var(--navy),transparent 35%); }
  .stats-panel { grid-template-columns:1fr; }
  .cta { padding:38px; flex-direction:column; align-items:flex-start; }
  .values { grid-template-columns:1fr; }
  .video-grid,.video-grid.four { grid-template-columns:1fr; }
  .map-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > :last-child { grid-column:1/-1; }
}
@media (max-width: 560px) {
  .container { width:min(calc(100% - 28px),var(--container)); }
  .brand img { width:120px; }
  .nav-wrap { min-height:74px; }
  .nav { inset:74px 12px auto; }
  .whatsapp-float { bottom:78px; right:14px; width:52px; height:52px; }
  .whatsapp-float svg { width:26px; height:26px; }
  .hero { height:clamp(285px, 76vw, 380px); min-height:0; }
  .hero .actions .btn { width:100%; }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-item { border-right:0; border-bottom:1px solid var(--line); }
  .trust-item:last-child { border-bottom:0; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .hours { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
  .mobile-cta { display:flex; position:fixed; z-index:60; bottom:12px; left:12px; right:12px; min-height:52px; border-radius:999px; align-items:center; justify-content:center; background:var(--blue-2); color:var(--navy); font-weight:900; box-shadow:0 15px 35px rgba(74,64,58,.28); }
  body { padding-bottom:70px; }
}


/* CRI brown identity */
body { background: var(--cream); }
.site-header.scrolled { background: rgba(251,249,247,.97); border-bottom-color: rgba(139,129,122,.22); }
.site-header.scrolled .nav > a:not(.nav-cta):hover, .site-header.scrolled .nav > a.active:not(.nav-cta), .site-header.scrolled .nav-drop > button:hover { background: #f0eae6; color: var(--brown-dark); }
.section-soft { background: #f3eeea; }
.btn-primary { color: var(--brown-dark); background: #d9ccc3; box-shadow: 0 12px 30px rgba(139,129,122,.24); }
.btn-primary:hover { background: #e6ddd6; }
.btn-dark { background: var(--brown-dark); }
.page-hero { background: linear-gradient(135deg, #4a403a, #75675e); }
.page-hero::after { border-color: rgba(233,224,218,.1); }
.eyebrow { color: #756960; }
.hero-note { border-left-color: #d3c5bb; }
.feature-icon { background:#eee7e2; color:#6d6159; }
.card-link, .blog-meta { color:#756960; }
.tag { background:#eee7e2; color:#6d6159; }
.treatment-path .num { color:#756960; }
.tech-jump a:hover { background:#eee7e2; }
.play { background:#d9ccc3; color:#4a403a; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:#a7988e; box-shadow:0 0 0 4px rgba(139,129,122,.13); }
.mobile-cta { background:#d9ccc3; color:#4a403a; box-shadow:0 15px 35px rgba(74,64,58,.28); }
.site-footer { background:#eee8e3; color:#625952; border-top:1px solid #ded4cd; }
.footer-logo { width:190px; filter: var(--logo-brand-filter); margin-bottom:18px; }
.footer-title { color:#4a403a; }
.footer-links a:hover { color:#2f2925; }
.footer-bottom { border-top-color:rgba(74,64,58,.16); }

/* Individual service pages */
.service-hero { padding: 92px 0 72px; }
.service-hero h1 { max-width: 980px; font-size: clamp(2.65rem,5.2vw,4.9rem); }
.service-hero .lead { max-width: 820px; }
.service-detail { padding: 92px 0; }
.service-detail-grid { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(340px,.95fr); gap: clamp(44px,7vw,92px); align-items:start; }
.service-copy { font-size:1.02rem; }
.service-copy > p:first-of-type { font-size:1.18rem; color:#4f4640; }
.service-copy h2 { font-size:clamp(1.75rem,3vw,2.65rem); margin-top:1.25em; }
.service-copy ul { margin: 0 0 1.5em; padding-left:1.15em; }
.service-copy li { margin:.5em 0; color:var(--muted); }
.service-aside { position:sticky; top:138px; }
.service-image { aspect-ratio:4/3; border-radius:26px; overflow:hidden; background:#eee8e3; box-shadow:var(--shadow); }
.service-image img { width:100%; height:100%; object-fit:cover; }
.service-summary { margin-top:18px; padding:24px; border:1px solid var(--line); border-radius:20px; background:white; }
.service-summary strong { display:block; color:var(--brown-dark); margin-bottom:8px; }
.service-summary p { color:var(--muted); margin:0; }
.service-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:42px; }
.service-highlight { padding:24px; border:1px solid var(--line); border-radius:18px; background:white; }
.service-highlight .num { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#eee7e2; color:#665950; font-weight:900; margin-bottom:14px; }
.service-highlight h3 { font-size:1.1rem; margin-bottom:.45em; }
.service-highlight p { color:var(--muted); margin:0; font-size:.93rem; }
.service-related { background:#f3eeea; }
.service-card { display:flex; flex-direction:column; height:100%; }
.service-card .card-body { display:flex; flex-direction:column; flex:1; }
.service-card .card-link { margin-top:auto; }
.service-card:focus-visible { outline:3px solid #b4a298; outline-offset:4px; }
.service-nav { display:flex; justify-content:space-between; gap:16px; padding-top:32px; margin-top:48px; border-top:1px solid var(--line); }
.service-nav a { display:flex; flex-direction:column; max-width:46%; color:var(--brown-dark); font-weight:800; }
.service-nav a:last-child { text-align:right; align-items:flex-end; }
.service-nav small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; margin-bottom:4px; }
.clinical-note { margin-top:26px; padding:18px 20px; border-left:3px solid #a99a90; background:#f4efeb; color:#655c56; font-size:.9rem; border-radius:0 14px 14px 0; }

@media (max-width: 920px) {
  .service-detail-grid { grid-template-columns:1fr; }
  .service-aside { position:static; }
  .service-highlights { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .brand img { width:158px; }
  .footer-logo { width:172px; }
  .service-detail { padding:68px 0; }
  .service-nav { flex-direction:column; }
  .service-nav a { max-width:100%; }
  .service-nav a:last-child { text-align:left; align-items:flex-start; }
}


/* Blog completo y artículos */
.blog-intro { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 22px; margin-bottom:34px; border:1px solid var(--line); border-radius:16px; background:white; color:var(--muted); }
.blog-intro strong { color:var(--brown-dark); }
.blog-complete-grid { align-items:stretch; }
.blog-complete-grid .card-media { display:block; }
.article-hero { background:linear-gradient(135deg,#4a403a,#75675e); color:white; padding:90px 0 74px; }
.article-hero h1 { max-width:1000px; font-size:clamp(2.35rem,5vw,4.9rem); }
.article-hero .lead { color:rgba(255,255,255,.78); }
.article-section { padding:74px 0 92px; }
.article-container { width:min(calc(100% - 40px),900px); margin-inline:auto; }
.article-cover { margin:0 0 48px; overflow:hidden; border-radius:26px; box-shadow:var(--shadow); background:#eee8e3; }
.article-cover img { width:100%; max-height:560px; object-fit:cover; }
.article-content { font-size:1.04rem; }
.article-content h2 { margin-top:2.1em; font-size:clamp(1.65rem,3vw,2.35rem); color:var(--brown-dark); }
.article-content p { color:#5f5751; }
.article-content ul { color:#5f5751; padding-left:1.4rem; }
.article-actions { margin-top:36px; }
.related-grid { margin-top:38px; }
.related-grid .card-body p { display:none; }
@media (max-width:760px) { .blog-intro{align-items:flex-start;flex-direction:column}.article-section{padding-top:48px}.article-cover{margin-bottom:32px}.article-content{font-size:1rem} }

/* Media quality improvements */
img { image-rendering: auto; }
.brand img, .footer-logo { height: auto; object-fit: contain; }


/* WhatsApp floating button */
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 65; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.32); }
.whatsapp-float svg { width: 32px; height: 32px; fill: #fff; display:block; }

/* Footer disclaimer note */
.footer-note { margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.5); border: 1px solid rgba(74,64,58,.1); color: #7a716a; font-size: .82rem; line-height:1.5; }