/* ==========================================================================
   Medico Family Clinic — redesign mock-up
   Palette derived from the existing logo/site: deep red + medical blue,
   softened with a warm off-white ground.
   ========================================================================== */

:root{
  /* brand */
  --red-900:#6E1119;
  --red-800:#8A1C26;
  --red-700:#98202B;
  --red-600:#B02A36;
  --red-500:#C4404C;
  --rose-300:#EE8B93;
  --blue-900:#12283F;
  --blue-800:#173754;
  --blue-700:#1B4A72;
  --blue-600:#1C6EA4;

  /* neutrals */
  --cream:#FBF7F5;
  --tint:#F4EBE9;
  --line:#E8DBD8;
  --ink:#241A1B;
  --muted:#6F6062;

  /* type */
  --display:"Outfit",-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --script:"Caveat","Segoe Script",cursive;

  /* rhythm */
  --pad:clamp(20px,5vw,64px);
  --r-lg:32px;
  --r-md:22px;
  --r-sm:14px;
  --bar:70px;              /* sticky header height */

  /* motion — nothing in this file changes state in 0ms */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-back:cubic-bezier(.34,1.4,.64,1);
  --t-fast:150ms;
  --t:260ms;
  --t-slow:440ms;
  --t-reveal:720ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:-.02em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* visible focus for keyboard users, and it animates in */
:focus-visible{
  outline:2px solid var(--red-600);outline-offset:3px;border-radius:6px;
  transition:outline-offset var(--t-fast) var(--ease);
}

/* ==========================================================================
   MOTION PRIMITIVES
   ========================================================================== */

/* scroll reveal — JS adds .is-in; --d carries the stagger delay */
[data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--t-reveal) var(--ease) var(--d,0ms),
             transform var(--t-reveal) var(--ease) var(--d,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}

/* hero copy rises on load, staggered by --d */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes photoIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:translateX(-2.2%)}to{transform:translateX(2.2%)}}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(123,212,142,.5)}
  70%{box-shadow:0 0 0 9px rgba(123,212,142,0)}
}
@keyframes barDrop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

/* ---------- shared bits ---------- */

.script{
  font-family:var(--script);
  font-size:clamp(24px,2.4vw,30px);
  color:var(--red-600);
  line-height:1;
  margin-bottom:.5rem;
}
.script--light{color:var(--rose-300)}

.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-size:.9rem;font-weight:500;
  padding:.72rem 1.35rem;border-radius:999px;
  text-decoration:none;white-space:nowrap;border:1px solid transparent;
  transition:transform var(--t) var(--ease),
             background-color var(--t) var(--ease),
             border-color var(--t) var(--ease),
             color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.btn > *{position:relative;z-index:1}
/* soft sheen that wipes across on hover */
.btn::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform 620ms var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:var(--t-fast)}
.btn--lg{padding:.95rem 1.7rem;font-size:.95rem}
.btn--block{display:flex;width:100%}
.btn--white{background:#fff;color:var(--red-800);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.btn--white:hover{box-shadow:0 14px 30px rgba(0,0,0,.24)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.85)}
.btn--solid-red{background:var(--red-700);color:#fff;box-shadow:0 6px 16px -8px rgba(110,17,25,.7)}
.btn--solid-red:hover{background:var(--red-800);box-shadow:0 12px 24px -10px rgba(110,17,25,.75)}
.btn--solid-blue{background:var(--blue-700);color:#fff;box-shadow:0 6px 16px -8px rgba(18,40,63,.6)}
.btn--solid-blue:hover{background:var(--blue-800);box-shadow:0 12px 26px -10px rgba(18,40,63,.7)}

.pill{
  display:inline-block;margin-top:1.6rem;
  background:var(--red-700);color:#fff;text-decoration:none;
  font-size:.85rem;font-weight:500;padding:.6rem 1.4rem;border-radius:999px;
  box-shadow:0 6px 16px -8px rgba(110,17,25,.7);
  transition:background-color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.pill:hover{background:var(--red-800);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(110,17,25,.75)}
.pill:active{transform:scale(.98);transition-duration:var(--t-fast)}

/* photo placeholder — shows the expected filename until the file is dropped in */
.ph{position:relative;margin:0;overflow:hidden;background:
    linear-gradient(135deg,var(--tint),#EADCD9 55%,#E4D3D5);}
.ph img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 640ms var(--ease),filter 640ms var(--ease);
}
.ph-note{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:.74rem;letter-spacing:.04em;text-transform:none;
  color:var(--red-700);opacity:.5;text-align:center;padding:1rem;pointer-events:none;
}
.ph img:not([src=""]){position:relative;z-index:1}
.ph.is-missing img{display:none}
.ph:not(.is-missing) .ph-note{display:none}
/* images fade in once decoded rather than snapping in */
.ph img{opacity:0;transition:opacity var(--t-slow) var(--ease),transform 640ms var(--ease)}
.ph img.is-loaded{opacity:1}

/* ==========================================================================
   OPAQUE STICKY HEADER
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--cream);                 /* fully opaque — no bleed-through */
  border-bottom:1px solid var(--line);
  animation:barDrop 560ms var(--ease) both;
  transition:box-shadow var(--t-slow) var(--ease),
             background-color var(--t-slow) var(--ease);
}
.topbar.is-stuck{box-shadow:0 6px 24px -12px rgba(36,26,27,.28)}
.topbar-inner{
  max-width:1320px;margin:0 auto;min-height:var(--bar);
  padding:.6rem var(--pad);
  display:flex;align-items:center;gap:1.4rem;
}

/* ==========================================================================
   BRAND / NAV
   ========================================================================== */
.brand{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  color:var(--blue-900);flex-shrink:0;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.brand .mark{display:flex;transition:transform var(--t-slow) var(--ease-back)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.07)}
.brand:active{transform:scale(.98);transition-duration:var(--t-fast)}
.brand-text{font-family:var(--display);font-size:1.02rem;font-weight:300;letter-spacing:-.01em;white-space:nowrap}
.brand-text b{font-weight:600}
.brand--light{color:#fff}

.links{display:flex;gap:1.7rem;margin-left:auto}
.links a{
  position:relative;color:var(--muted);text-decoration:none;
  font-size:.89rem;font-weight:400;padding:.35rem 0;
  transition:color var(--t) var(--ease);
}
/* underline grows from the left instead of appearing instantly */
.links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--red-700);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t) var(--ease);
}
.links a:hover{color:var(--red-700)}
.links a:hover::after,.links a:focus-visible::after{transform:scaleX(1)}

.nav-actions{display:flex;align-items:center;gap:.7rem;margin-left:1.2rem}

/* language toggle with a thumb that slides between the two options */
.langtoggle{
  position:relative;display:inline-flex;
  background:var(--tint);border:1px solid var(--line);
  border-radius:999px;padding:3px;
  transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.langtoggle:hover{border-color:#D9C6C3}
.langtoggle-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  background:var(--blue-800);border-radius:999px;z-index:0;
  box-shadow:0 2px 8px -3px rgba(18,40,63,.6);
  transition:transform var(--t-slow) var(--ease-back);
}
.langtoggle[data-active="es"] .langtoggle-thumb{transform:translateX(100%)}
.langtoggle button{
  position:relative;z-index:1;
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--body);font-size:.74rem;font-weight:600;letter-spacing:.05em;
  color:var(--muted);padding:.32rem .72rem;border-radius:999px;
  transition:color var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.langtoggle button.is-on{color:#fff}
.langtoggle button:not(.is-on):hover{color:var(--ink)}
.langtoggle button:active{transform:scale(.94)}

.burger{
  display:none;flex-direction:column;gap:5px;background:none;border:0;
  cursor:pointer;padding:8px;border-radius:10px;
  transition:background-color var(--t) var(--ease);
}
.burger:hover{background:var(--tint)}
.burger span{
  display:block;width:22px;height:2px;background:var(--blue-900);border-radius:2px;
  transition:transform var(--t-slow) var(--ease),opacity var(--t) var(--ease);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-wrap{padding:clamp(12px,1.6vw,22px)}
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  min-height:min(78vh,660px);
  background:var(--red-800);
}

.hero-panel{
  position:relative;z-index:5;
  padding:clamp(48px,6vw,78px) clamp(26px,4vw,58px) clamp(52px,6vw,78px);
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(152deg,var(--red-700) 0%,var(--red-800) 46%,var(--red-900) 100%);
  color:#fff;
}
.hero-panel > *:not(.waves){
  position:relative;z-index:3;
  animation:riseIn 800ms var(--ease) both;
  animation-delay:var(--d,0ms);
}
.hero-panel > *:nth-child(1){--d:100ms}
.hero-panel > *:nth-child(2){--d:200ms}
.hero-panel > *:nth-child(3){--d:310ms}
.hero-panel > *:nth-child(4){--d:410ms}
.hero-panel > *:nth-child(5){--d:500ms}

.eyebrow{
  font-size:.8rem;letter-spacing:.06em;
  color:rgba(255,255,255,.72);margin-bottom:1.5rem;font-weight:500;
}
.hero h1{
  font-size:clamp(2.25rem,4.9vw,4.15rem);
  line-height:1.03;font-weight:200;letter-spacing:-.035em;color:#fff;
}
/* keep the tinted phrase together so it never orphans a single word */
.hero h1 em{font-style:normal;color:var(--rose-300);font-weight:200;white-space:nowrap}
.hero-sub{
  margin-top:1.5rem;max-width:34ch;
  color:rgba(255,255,255,.82);font-size:1rem;line-height:1.7;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.hero-cta .btn svg{transition:transform var(--t-slow) var(--ease-back)}
.hero-cta .btn:hover svg{transform:rotate(-14deg) scale(1.12)}
.hero-flag{
  margin-top:2rem;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.82rem;color:rgba(255,255,255,.8);letter-spacing:.01em;
}
.hero-flag .dot{
  width:7px;height:7px;border-radius:50%;background:#7BD48E;flex-shrink:0;
  animation:pulseDot 2.6s var(--ease-io) infinite;
}

.waves{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(140px,20vw,230px);z-index:1;pointer-events:none}
/* each band drifts at its own pace so the hero is never fully static */
.waves path{transform-origin:center;animation:drift var(--dur,20s) var(--ease-io) infinite alternate}
.waves path:nth-child(1){--dur:22s}
.waves path:nth-child(2){--dur:17s;animation-direction:alternate-reverse}
.waves path:nth-child(3){--dur:13s}

.hero-photo{position:relative;min-height:340px;animation:photoIn 900ms var(--ease) both;animation-delay:120ms}
.hero-photo img{object-position:62% 45%}
.hero-photo::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(110,17,25,.34),rgba(110,17,25,0) 26%);
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.strip{padding:clamp(28px,4vw,52px) var(--pad) 0}
.strip-list{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.strip-list li{
  background:#fff;display:flex;align-items:center;gap:.75rem;
  padding:1.25rem 1.4rem;font-size:.88rem;color:var(--ink);line-height:1.4;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease);
}
.strip-list li:hover{background:var(--tint)}
.strip-list svg{
  color:var(--red-600);flex-shrink:0;
  transition:transform var(--t-slow) var(--ease-back),color var(--t) var(--ease);
}
.strip-list li:hover svg{transform:scale(1.18) rotate(-6deg);color:var(--red-800)}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{max-width:1320px;margin:0 auto;padding:clamp(64px,9vw,120px) var(--pad)}
.section--tint{
  max-width:none;background:var(--tint);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.section--tint > *{max-width:1320px;margin-inline:auto}

.sec-head{max-width:640px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{font-size:clamp(2rem,3.3vw,2.9rem);line-height:1.12;font-weight:300}
.sec-sub{margin-top:1rem;color:var(--muted);font-size:1rem;max-width:52ch}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.about-copy h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.1;font-weight:300}
.about-body p{color:var(--muted);font-size:1.02rem;line-height:1.8}
.about-body p + p{margin-top:1.1rem}
.about-body strong{color:var(--ink);font-weight:600}

.checks{margin-top:2rem;display:grid;gap:.7rem}
.checks li{
  position:relative;padding-left:2rem;font-size:.95rem;color:var(--ink);
  transition:transform var(--t) var(--ease),color var(--t) var(--ease);
}
.checks li:hover{transform:translateX(4px);color:var(--red-800)}
.checks li::before{
  content:"";position:absolute;left:0;top:.28em;width:19px;height:19px;border-radius:50%;
  background:var(--red-700) center/11px 11px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  transition:transform var(--t-slow) var(--ease-back),background-color var(--t) var(--ease);
}
.checks li:hover::before{transform:scale(1.15);background-color:var(--red-600)}

/* ---------- doctor card ---------- */
.doccard{
  margin-top:clamp(48px,6vw,84px);
  display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,26px);
  box-shadow:0 22px 50px -34px rgba(110,17,25,.4);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);
}
.doccard:hover{transform:translateY(-4px);box-shadow:0 34px 66px -36px rgba(110,17,25,.5)}
/* 4:5 keeps the card height close to the copy beside it; the crop takes a
   little off the chest, not the face */
.doccard-photo{border-radius:var(--r-md);aspect-ratio:4/5;min-height:280px}
.doccard-photo img{object-position:50% 28%}
.doccard:hover .doccard-photo img{transform:scale(1.04)}
.doccard-copy{padding-right:clamp(8px,3vw,48px)}
.doccard-copy h3{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:300;line-height:1.1;margin-top:.2rem}
.doccard-copy h3 span{color:var(--blue-700);font-weight:400}
.doccard-role{
  margin-top:.6rem;font-size:.86rem;letter-spacing:.02em;
  color:var(--muted);font-weight:500;
}
.doccard-quote{
  margin-top:1.5rem;font-family:var(--display);font-weight:200;
  font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.45;color:var(--ink);
  border-left:3px solid var(--rose-300);padding-left:1.3rem;
  transition:border-color var(--t-slow) var(--ease),padding-left var(--t-slow) var(--ease);
}
.doccard:hover .doccard-quote{border-color:var(--red-600);padding-left:1.6rem}

/* ---------- gallery ---------- */
/* every photo is 3:2, so the tiles are too — no faces cropped off */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);
}
.g{
  border-radius:var(--r-md);position:relative;aspect-ratio:3/2;
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);
}
.g:hover{transform:translateY(-5px);box-shadow:0 26px 46px -28px rgba(36,26,27,.55);z-index:5}
.g:hover img{transform:scale(1.07)}
.g .cap{
  position:absolute;left:14px;bottom:14px;z-index:4;
  background:rgba(255,255,255,.93);backdrop-filter:blur(6px);
  color:var(--blue-900);font-size:.74rem;font-weight:500;letter-spacing:.01em;
  padding:.34rem .78rem;border-radius:999px;
  transition:transform var(--t-slow) var(--ease),background-color var(--t) var(--ease);
}
.g:hover .cap{transform:translateY(-3px);background:#fff}
.g::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(18,40,63,.32),rgba(18,40,63,0) 42%);
  transition:opacity var(--t-slow) var(--ease);
}
.g:hover::after{opacity:.7}
.g.is-missing::after{display:none}

/* ---------- locations ---------- */
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px)}
.loc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;
  box-shadow:0 22px 50px -38px rgba(18,40,63,.45);
  transition:transform var(--t-slow) var(--ease),
             box-shadow var(--t-slow) var(--ease),
             border-color var(--t-slow) var(--ease);
}
.loc:hover{transform:translateY(-5px);border-color:#DCC9C6;box-shadow:0 34px 64px -36px rgba(18,40,63,.55)}
.loc-top h3{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:300;margin-top:.7rem}
.loc address{font-style:normal;color:var(--muted);margin-top:.6rem;font-size:.95rem;line-height:1.6}
.tag{
  display:inline-block;font-size:.76rem;letter-spacing:.02em;
  font-weight:600;padding:.32rem .8rem;border-radius:999px;
  transition:transform var(--t) var(--ease-back),filter var(--t) var(--ease);
}
.loc:hover .tag{transform:translateY(-1px) scale(1.04)}
.tag--red{background:#F7E6E7;color:var(--red-800)}
.tag--blue{background:#E4EDF5;color:var(--blue-700)}

.contact{margin:1.5rem 0 0;display:grid;gap:.5rem}
.contact > div{display:flex;gap:.9rem;align-items:baseline;font-size:.93rem}
.contact dt{
  flex:0 0 74px;color:var(--muted);font-size:.82rem;letter-spacing:.01em;font-weight:500;
}
.contact dd{margin:0;font-weight:500}
.contact dd a{
  color:var(--blue-700);text-decoration:none;
  border-bottom:1px solid rgba(28,110,164,.3);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.contact dd a:hover{border-bottom-color:var(--blue-700);color:var(--blue-800)}
.contact small{color:var(--muted);font-weight:400;font-size:.78rem;margin-left:.4rem}

.hours{width:100%;border-collapse:collapse;margin-top:1.6rem}
.hours caption{
  text-align:left;font-size:.82rem;letter-spacing:.01em;
  color:var(--muted);font-weight:600;padding-bottom:.5rem;
}
.hours th,.hours td{
  text-align:left;font-weight:400;font-size:.92rem;
  padding:.5rem .4rem;border-bottom:1px solid var(--line);
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease);
}
.hours th{color:var(--ink);font-weight:500;border-radius:6px 0 0 6px}
.hours td{text-align:right;color:var(--blue-700);font-variant-numeric:tabular-nums;border-radius:0 6px 6px 0}
.hours tr:hover th,.hours tr:hover td{background:var(--tint)}
.hours .is-closed th{color:var(--muted)}
.hours .is-closed td{color:var(--muted);font-style:italic}

.loc-map{
  margin:1.7rem 0 1.2rem;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/10;background:var(--tint);
  transition:border-color var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);
}
.loc:hover .loc-map{border-color:#DCC9C6;box-shadow:0 10px 24px -18px rgba(18,40,63,.6)}
.loc-map iframe{
  width:100%;height:100%;border:0;display:block;
  opacity:0;transition:opacity var(--t-reveal) var(--ease);
}
.loc-map iframe.is-loaded{opacity:1}
.loc .btn--block{margin-top:auto}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{
  position:relative;overflow:hidden;
  margin:0 clamp(12px,1.6vw,22px) clamp(12px,1.6vw,22px);
  border-radius:var(--r-lg);
  background:linear-gradient(152deg,var(--red-700),var(--red-900));
  color:#fff;text-align:center;
  padding:clamp(64px,8vw,110px) var(--pad) clamp(96px,11vw,150px);
}
.waves--cta{height:clamp(160px,22vw,280px)}
.cta-inner{position:relative;z-index:5;max-width:720px;margin:0 auto}
.cta h2{font-size:clamp(2.1rem,4vw,3.3rem);font-weight:200;line-height:1.1;color:#fff}
.cta-sub{margin-top:1.1rem;color:rgba(255,255,255,.8);font-size:1.02rem}
.cta-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.2rem}
.cta-note{margin-top:1.8rem;font-size:.84rem;color:rgba(255,255,255,.76)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  background:var(--blue-900);color:rgba(255,255,255,.72);
  margin:0 clamp(12px,1.6vw,22px) clamp(12px,1.6vw,22px);
  border-radius:var(--r-lg);
  padding:clamp(44px,6vw,72px) var(--pad) clamp(24px,3vw,34px);
}
.foot-top{text-align:center;padding-bottom:clamp(32px,4vw,48px);border-bottom:1px solid rgba(255,255,255,.12)}
.foot-top .brand{justify-content:center;color:#fff}
.foot-tag{margin-top:1rem;font-size:.9rem;color:rgba(255,255,255,.6)}
.foot-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px);
  padding:clamp(32px,4vw,48px) 0;
}
.foot-cols h4{
  font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em;
  font-weight:500;color:#fff;margin-bottom:.9rem;
}
.foot-cols p{font-size:.88rem;line-height:1.7}
.foot-cols p + p{margin-top:.7rem}
.foot-cols a{
  color:rgba(255,255,255,.86);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.foot-cols a:hover{border-bottom-color:#fff;color:#fff}
.foot-cols small{color:rgba(255,255,255,.5);font-size:.76rem}
.social{
  display:inline-flex;align-items:center;gap:.55rem;border:0!important;
  background:rgba(255,255,255,.1);padding:.5rem .95rem;border-radius:999px;
  font-size:.84rem;
  transition:background-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.social svg{transition:transform var(--t-slow) var(--ease-back)}
.social:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.social:hover svg{transform:scale(1.15)}
.social:active{transform:scale(.97);transition-duration:var(--t-fast)}
.foot-base{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:center;
  padding-top:clamp(18px,2.4vw,26px);border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem;color:rgba(255,255,255,.45);
}
.foot-mock{
  font-size:.72rem;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.2);padding:.24rem .7rem;border-radius:999px;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.foot-mock:hover{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.7)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .strip-list{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  :root{--bar:62px}
  .links{display:none}
  .burger{display:flex;margin-left:auto}
  .nav-actions{display:none}

  .hero{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0}
  .hero-panel{grid-row:2;grid-column:1;padding-top:clamp(44px,7vw,64px)}
  .hero-photo{grid-row:1;grid-column:1;min-height:min(56vh,420px)}
  .hero-photo::before{background:linear-gradient(to bottom,rgba(110,17,25,.42),rgba(110,17,25,0) 45%)}

  .about{grid-template-columns:1fr}
  .doccard{grid-template-columns:1fr}
  .doccard-photo{aspect-ratio:16/11;min-height:0}
  .doccard-copy{padding:0 clamp(6px,2vw,20px) clamp(10px,2vw,18px)}
  .loc-grid{grid-template-columns:1fr}

  /* mobile menu — panel slides open, items stagger in */
  .topbar-inner{flex-wrap:wrap}
  .topbar.is-open .links,
  .topbar.is-open .nav-actions{display:flex}
  .topbar.is-open .links{
    flex-direction:column;gap:.2rem;order:4;
    width:100%;margin:.9rem 0 .2rem;padding-top:.9rem;
    border-top:1px solid var(--line);
  }
  .topbar.is-open .links a{
    padding:.6rem 0;
    animation:riseIn 460ms var(--ease) both;
    animation-delay:var(--d,0ms);
  }
  .topbar.is-open .links a:nth-child(1){--d:40ms}
  .topbar.is-open .links a:nth-child(2){--d:80ms}
  .topbar.is-open .links a:nth-child(3){--d:120ms}
  .topbar.is-open .links a:nth-child(4){--d:160ms}
  .topbar.is-open .links a:nth-child(5){--d:200ms}
  .topbar.is-open .nav-actions{
    order:5;width:100%;margin:.3rem 0 .7rem;
    justify-content:space-between;align-items:center;
    animation:riseIn 460ms var(--ease) both;animation-delay:220ms;
  }
  .topbar.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .topbar.is-open .burger span:nth-child(2){opacity:0;transform:scaleX(.2)}
  .topbar.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media (max-width:620px){
  .strip-list{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr;text-align:center}
  .foot-top .brand,.foot-cols .social{justify-content:center}
  .foot-base{justify-content:center;text-align:center}
  .hero-cta,.cta-btns{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .nav-actions .btn{width:auto}
  .contact > div{flex-direction:column;gap:.1rem}
  .contact dt{flex:none}
}

/* ==========================================================================
   REDUCED MOTION — keep state changes visible, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .hero-panel > *,.hero-photo,.topbar{animation:none!important;opacity:1!important;transform:none!important}
  .waves path{animation:none!important}
  .ph img{opacity:1!important}
  .loc-map iframe{opacity:1!important}
}