/* =========================================================
   Sushil Saluja — Alderman, Coleman Street Ward
   Site stylesheet (homepage redesign, October 2026)
   Palette unchanged from campaign_rewrite.css
========================================================= */
:root{
  --navy:#193B6E;
  --red:#751C30;
  --red-deep:#5E1626;
  --ink:#040F16;
  --pink:#E0AC9D;
  --sky:#BCD4DE;
  --slate:#5C6D70;
  --white:#FFFFFF;

  --navy-2:#14305A;
  --sky-soft:#D6E5EB;
  --line-dark:rgba(188,212,222,.18);
  --line-light:rgba(4,15,22,.12);

  --on-dark:rgba(255,255,255,.94);
  --on-dark-muted:rgba(255,255,255,.74);
  --on-light:rgba(4,15,22,.92);
  --on-light-muted:rgba(4,15,22,.70);

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius:14px;
  --radius-lg:22px;
  --shadow:0 24px 60px rgba(4,15,22,.35);
  --shadow-soft:0 14px 36px rgba(4,15,22,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--navy);
  color:var(--on-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--pink); text-underline-offset:3px}
a:hover{color:var(--white)}
::selection{background:var(--pink); color:var(--ink)}

.serif{font-family:var(--serif)}
.section{padding:6rem 0; position:relative; scroll-margin-top:80px}
@media (max-width:767px){ .section{padding:4.25rem 0} }

/* Colour bands */
.band-navy{background:var(--navy); color:var(--on-dark)}
.band-ink{background:var(--ink); color:var(--on-dark)}
.band-red{background:var(--red); color:var(--on-dark)}
.band-sky{background:var(--sky); color:var(--on-light)}
.band-sky a{color:var(--red)}
.band-sky a:hover{color:var(--navy)}

/* Section headings */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pink);
}
.eyebrow::before{content:""; width:28px; height:2px; background:currentColor; display:inline-block}
.band-sky .eyebrow{color:var(--red)}
.display{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.08;
  font-size:clamp(2rem, 3.6vw, 3.1rem);
  margin:.6rem 0 1rem;
}
.display em{font-style:italic; color:var(--pink)}
.band-sky .display em{color:var(--red)}
.lede{font-size:1.12rem; line-height:1.7; color:var(--on-dark-muted); max-width:44rem}
.band-sky .lede{color:var(--on-light-muted)}

/* ---------- Buttons ---------- */
.btn{border-radius:999px; font-weight:800; padding:.8rem 1.4rem; letter-spacing:.01em; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s}
.btn-red{background:var(--red); color:var(--white); border:2px solid var(--red); box-shadow:0 6px 0 var(--red-deep)}
.btn-red:hover{background:var(--red-deep); border-color:var(--red-deep); color:var(--white); transform:translateY(-2px); box-shadow:0 10px 0 rgba(224,172,157,.35)}
.btn-ghost{background:transparent; color:var(--white); border:2px solid rgba(188,212,222,.55)}
.btn-ghost:hover{background:rgba(188,212,222,.12); border-color:var(--sky); color:var(--white); transform:translateY(-2px)}
.btn-ink{background:var(--ink); color:var(--white); border:2px solid var(--ink)}
.btn-ink:hover{background:var(--navy); border-color:var(--navy); color:var(--white); transform:translateY(-2px)}
.btn-pink{background:var(--pink); color:var(--ink); border:2px solid var(--pink)}
.btn-pink:hover{background:var(--white); border-color:var(--white); color:var(--ink); transform:translateY(-2px)}
.btn svg{width:1.05em; height:1.05em; margin-left:.4rem; vertical-align:-2px}

/* ---------- Navigation ---------- */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:1030;
  padding:1.1rem 0;
  transition:padding .3s var(--ease), background .3s, box-shadow .3s;
}
.site-nav.is-scrolled{
  padding:.55rem 0;
  background:rgba(4,15,22,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line-dark);
}
.brand{display:flex; flex-direction:column; line-height:1.05; text-decoration:none}
.brand-name{font-family:var(--serif); font-weight:700; font-size:1.35rem; color:var(--white)}
.brand-name span{color:var(--pink)}
.brand-sub{font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-muted)}
.site-nav .nav-link{
  color:var(--on-dark); font-weight:700; font-size:.95rem;
  padding:.5rem .85rem !important; position:relative;
}
.site-nav .nav-link::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.2rem; height:2px;
  background:var(--pink); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.site-nav .nav-link:hover, .site-nav .nav-link.active{color:var(--white)}
.site-nav .nav-link:hover::after, .site-nav .nav-link.active::after{transform:scaleX(1)}
.site-nav .navbar-toggler{border:0; color:var(--white)}
.site-nav .navbar-toggler:focus{box-shadow:none}
@media (max-width:991px){
  .site-nav .navbar-collapse{background:var(--ink); margin:.75rem -.75rem 0; padding:1rem; border-radius:var(--radius)}
  .site-nav{background:rgba(4,15,22,.86)}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:8rem 0 6rem; overflow:hidden; background:var(--navy);
}
.hero-shapes{position:absolute; inset:0; pointer-events:none}
.hero-shapes .slab{
  position:absolute; top:-10%; right:-12%; width:58%; height:130%;
  background:linear-gradient(160deg, var(--red) 0%, var(--red-deep) 100%);
  transform:skewX(-12deg); transform-origin:top;
}
.hero-shapes .ring{
  position:absolute; width:520px; height:520px; border-radius:50%;
  border:2px solid rgba(224,172,157,.28); left:-180px; bottom:-220px;
}
.hero-shapes .ring.two{width:300px; height:300px; left:-60px; bottom:-120px; border-color:rgba(188,212,222,.18)}
.hero-shapes .grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(188,212,222,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(188,212,222,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg, #000 0%, transparent 55%);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, transparent 55%);
}
@media (max-width:991px){ .hero-shapes .slab{width:100%; right:-60%; opacity:.55} }

.hero-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .95rem .45rem .5rem; border-radius:999px;
  background:rgba(4,15,22,.35); border:1px solid var(--line-dark);
  font-size:.82rem; font-weight:700; color:var(--on-dark);
}
.hero-pill .dot{width:22px; height:22px; border-radius:50%; background:var(--pink); display:grid; place-items:center; color:var(--ink)}
.hero-pill .dot svg{width:12px; height:12px}
.hero h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2.7rem, 6vw, 5.3rem); margin:1.4rem 0 1.4rem; color:var(--white);
}
.hero h1 em{display:block; font-style:italic; color:var(--pink)}
.hero .lede{font-size:1.2rem; color:var(--on-dark-muted)}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.surgery{
  display:flex; gap:.9rem; align-items:flex-start; margin-top:2.4rem; max-width:30rem;
  padding:1rem 1.1rem; border-left:3px solid var(--pink); background:rgba(4,15,22,.28); border-radius:0 var(--radius) var(--radius) 0;
}
.surgery svg{flex:none; width:22px; height:22px; color:var(--pink); margin-top:2px}
.surgery strong{display:block; color:var(--white)}
.surgery span{font-size:.92rem; color:var(--on-dark-muted)}

.portrait-wrap{position:relative; max-width:440px; margin:0 auto}
.portrait-wrap::before{
  content:""; position:absolute; inset:28px -22px -22px 28px; border-radius:var(--radius-lg);
  border:2px solid var(--pink);
}
.portrait{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--ink);
  box-shadow:var(--shadow); aspect-ratio:4/5;
}
.portrait img{width:100%; height:100%; object-fit:cover; display:block}
.role-card{
  position:absolute; left:-28px; bottom:34px; max-width:270px;
  background:var(--white); color:var(--on-light); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--shadow);
}
.role-card .label{font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red)}
.role-card .title{font-family:var(--serif); font-weight:600; font-size:1.1rem; line-height:1.25; margin-top:.2rem}
@media (max-width:575px){ .role-card{left:12px; right:12px; bottom:12px; max-width:none} .portrait-wrap::before{inset:18px -10px -10px 18px} }

.scroll-cue{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-muted);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-decoration:none;
}
.scroll-cue::after{content:""; width:2px; height:34px; background:linear-gradient(var(--pink), transparent); animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- Stats strip ---------- */
.stats{padding:3rem 0}
.stat{padding:.5rem 1rem; border-left:1px solid rgba(255,255,255,.2)}
.stat:first-child{border-left:0}
.stat .num{font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem, 4vw, 3.2rem); line-height:1; color:var(--white)}
.stat .num sup{font-size:.5em; color:var(--pink); top:-.8em}
.stat .lbl{margin-top:.5rem; font-size:.9rem; color:var(--on-dark-muted); max-width:14rem}
@media (max-width:767px){ .stat{border-left:0; border-top:1px solid rgba(255,255,255,.2); padding:1rem 0} .stat:first-child{border-top:0} }

/* ---------- About ---------- */
.pull{
  font-family:var(--serif); font-size:clamp(1.35rem, 2.2vw, 1.75rem); line-height:1.4; font-weight:500;
  color:var(--ink); border-left:4px solid var(--red); padding-left:1.25rem; margin:1.5rem 0 1.75rem;
}
.prose p{line-height:1.8; color:var(--on-light-muted); margin-bottom:1.1rem}
.timeline{list-style:none; padding:0; margin:0; position:relative}
.timeline::before{content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:rgba(117,28,48,.25)}
.timeline li{position:relative; padding:0 0 1.5rem 2.5rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:""; position:absolute; left:4px; top:5px; width:16px; height:16px; border-radius:50%;
  background:var(--sky); border:3px solid var(--red);
}
.timeline li.now::before{background:var(--red); box-shadow:0 0 0 6px rgba(117,28,48,.18)}
.timeline .when{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red)}
.timeline .what{font-weight:800; color:var(--ink); margin-top:.15rem}
.timeline .detail{font-size:.92rem; color:var(--on-light-muted)}
.panel-white{background:var(--white); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-soft)}
.panel-white h3{font-family:var(--serif); font-weight:600; font-size:1.35rem; color:var(--ink); margin-bottom:1.25rem}
.tick-list{list-style:none; padding:0; margin:0}
.tick-list li{position:relative; padding:.55rem 0 .55rem 1.9rem; border-bottom:1px solid var(--line-light); color:var(--on-light)}
.tick-list li:last-child{border-bottom:0}
.tick-list li::before{
  content:""; position:absolute; left:0; top:.85rem; width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/70% no-repeat;
}
.band-dark .tick-list li, .band-navy .tick-list li{color:var(--on-dark); border-color:var(--line-dark)}

/* ---------- Video ---------- */
.video-frame{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); outline:1px solid var(--line-dark); outline-offset:10px}
.video-link{display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:var(--pink); text-decoration:none; margin-top:2rem}
.video-link:hover{color:var(--white)}
.video-link svg{width:1.4rem; height:1.4rem}

/* ---------- Priorities ---------- */
.commit{
  background:rgba(4,15,22,.32); border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:1.25rem 1.4rem; display:flex; gap:1rem; align-items:flex-start;
}
.commit svg{flex:none; width:28px; height:28px; color:var(--pink)}
.commit .t{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--pink)}
.commit p{margin:.25rem 0 0; color:var(--on-dark)}
.prio{
  height:100%; position:relative; overflow:hidden;
  background:var(--navy-2); border:1px solid var(--line-dark); border-radius:var(--radius-lg);
  padding:2rem 1.75rem 1.75rem; transition:transform .35s var(--ease), border-color .35s, background .35s;
}
.prio:hover{transform:translateY(-6px); border-color:rgba(224,172,157,.55); background:#173661}
.prio .n{
  font-family:var(--serif); font-weight:600; font-size:3.4rem; line-height:1; color:transparent;
  -webkit-text-stroke:1.5px var(--pink); opacity:.85;
}
.prio .ico{position:absolute; top:1.75rem; right:1.75rem; width:46px; height:46px; border-radius:12px; background:var(--red); display:grid; place-items:center}
.prio .ico svg{width:24px; height:24px; color:var(--white)}
.prio h3{font-family:var(--serif); font-weight:600; font-size:1.35rem; line-height:1.25; margin:1rem 0 1rem; color:var(--white)}
.prio ul{padding-left:1.1rem; margin:0 0 1.1rem}
.prio li{margin-bottom:.45rem; color:var(--on-dark-muted); line-height:1.5}
.prio li::marker{color:var(--pink)}
.prio .why{font-size:.9rem; font-style:italic; color:var(--sky); border-top:1px solid var(--line-dark); padding-top:.9rem; margin:0}
.prio.cta{background:var(--red); border-color:var(--red); display:flex; flex-direction:column; justify-content:space-between}
.prio.cta:hover{background:var(--red-deep)}
.prio.cta h3{font-size:1.6rem}
.prio.cta p{color:var(--on-dark)}

/* ---------- Testimonials ---------- */
.quote-card{
  display:grid; grid-template-columns:220px 1fr; gap:2.5rem; align-items:center;
  background:var(--white); border-radius:var(--radius-lg); padding:2.75rem; box-shadow:var(--shadow-soft);
  min-height:360px;
}
.quote-card .avatar{width:220px; height:220px; border-radius:50%; overflow:hidden; background:var(--sky-soft); outline:6px solid var(--sky); outline-offset:-6px}
.quote-card .avatar img{width:100%; height:100%; object-fit:contain}
.quote-card blockquote{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem, 1.8vw, 1.5rem); line-height:1.45;
  color:var(--ink); margin:0 0 1.5rem; position:relative;
}
.quote-card blockquote::before{
  content:"“"; position:absolute; left:-.15em; top:-.75em; font-size:5rem; line-height:1; color:var(--pink); font-family:var(--serif);
}
.quote-card .who strong{display:block; font-weight:800; color:var(--red); font-size:1.05rem}
.quote-card .who span{font-size:.92rem; color:var(--on-light-muted)}
@media (max-width:767px){
  .quote-card{grid-template-columns:1fr; text-align:center; padding:2rem 1.5rem; gap:1.5rem}
  .quote-card .avatar{width:130px; height:130px; margin:0 auto}
  .quote-card blockquote::before{left:50%; transform:translateX(-50%); top:-.9em}
}
.quote-nav{display:flex; align-items:center; gap:1rem; margin-top:1.75rem}
.quote-nav .arrow{
  width:52px; height:52px; border-radius:50%; border:2px solid var(--ink); background:transparent; color:var(--ink);
  display:grid; place-items:center; transition:background .25s, color .25s;
}
.quote-nav .arrow:hover{background:var(--ink); color:var(--white)}
.quote-nav .arrow svg{width:20px; height:20px}
.quote-dots{display:flex; gap:.45rem; flex-wrap:wrap}
.quote-dots button{width:10px; height:10px; border-radius:999px; border:0; padding:0; background:rgba(4,15,22,.25); transition:width .3s var(--ease), background .3s}
.quote-dots button.active{width:32px; background:var(--red)}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:210px; gap:14px}
.gallery figure{position:relative; margin:0; border-radius:var(--radius); overflow:hidden; cursor:zoom-in; background:var(--navy-2)}
.gallery figure.wide{grid-column:span 2}
.gallery figure.tall{grid-row:span 2}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease)}
.gallery figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.5rem 1rem .9rem;
  background:linear-gradient(transparent, rgba(4,15,22,.88)); color:var(--white); font-size:.88rem; font-weight:600; line-height:1.35;
  transform:translateY(100%); transition:transform .4s var(--ease);
}
.gallery figure:hover img, .gallery figure:focus-visible img{transform:scale(1.06)}
.gallery figure:hover figcaption, .gallery figure:focus-visible figcaption{transform:none}
.gallery figure:focus-visible{outline:3px solid var(--pink); outline-offset:3px}
.gallery figure.is-hidden{display:none}
@media (hover:none){ .gallery figcaption{transform:none} }
@media (max-width:991px){ .gallery{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:575px){ .gallery{grid-template-columns:repeat(2, 1fr); grid-auto-rows:160px} .gallery figure.wide{grid-column:span 2} }

.lightbox .modal-content{background:transparent; border:0}
.lightbox img{max-height:78vh; width:auto; max-width:100%; border-radius:var(--radius); margin:0 auto; display:block}
.lightbox .cap{color:var(--white); text-align:center; margin-top:1rem; font-weight:600}
.lightbox .lb-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%;
  border:0; background:rgba(255,255,255,.14); color:var(--white); display:grid; place-items:center;
}
.lightbox .lb-btn:hover{background:var(--red)}
.lightbox .lb-prev{left:-10px} .lightbox .lb-next{right:-10px}
.lightbox .lb-btn svg{width:22px; height:22px}
.lightbox .btn-close{position:absolute; right:0; top:-44px}
.modal-backdrop.show{opacity:.9; background:var(--ink)}

/* ---------- City of London ---------- */
.fact{
  height:100%; border-radius:var(--radius-lg); padding:1.6rem 1.5rem;
  background:rgba(4,15,22,.32); border:1px solid var(--line-dark);
}
.fact .num{font-family:var(--serif); font-weight:600; font-size:2.6rem; line-height:1; color:var(--pink)}
.fact .lbl{margin-top:.5rem; color:var(--on-dark-muted); font-size:.95rem}
.role-panel{background:var(--red); border-radius:var(--radius-lg); padding:2rem; height:100%; box-shadow:var(--shadow)}
.role-panel h3, .gov-panel h3{font-family:var(--serif); font-weight:600; font-size:1.4rem; margin-bottom:1rem; color:var(--white)}
.role-panel p{color:var(--on-dark)}
.gov-panel{background:var(--navy-2); border:1px solid var(--line-dark); border-radius:var(--radius-lg); padding:2rem; height:100%}
.gov-panel ul{padding-left:1.1rem}
.gov-panel li{color:var(--on-dark-muted); margin-bottom:.55rem; line-height:1.55}
.gov-panel li::marker{color:var(--pink)}
.gov-sub{font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--pink); margin:1.4rem 0 .6rem}
.ward-card{border-radius:var(--radius-lg); overflow:hidden; background:var(--ink); box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column}
.ward-card img{width:100%; height:280px; object-fit:cover}
.ward-card .body{padding:1.75rem}
.ward-card h3{font-family:var(--serif); font-weight:600; font-size:1.35rem; color:var(--white)}
.ward-card p{font-size:.94rem; color:var(--on-dark-muted); line-height:1.65}
.ward-card .fact-line{border-top:1px solid var(--line-dark); padding-top:1rem; margin-top:1rem}

/* ---------- News ---------- */
.news-card{
  height:100%; display:flex; flex-direction:column;
  background:var(--white); border-radius:var(--radius-lg); padding:1.75rem; box-shadow:var(--shadow-soft);
  border-top:5px solid var(--red); transition:transform .35s var(--ease), box-shadow .35s;
}
.news-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.news-card .date{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--slate)}
.news-card h3{font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.3; color:var(--ink); margin:.55rem 0 .8rem}
.news-card p{color:var(--on-light-muted); font-size:.96rem; line-height:1.65; flex:1}
.news-card .more{font-weight:800; color:var(--red); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; margin-top:.5rem}
.news-card .more:hover{color:var(--navy)}
.news-card .more svg{width:1rem; height:1rem; transition:transform .25s}
.news-card .more:hover svg{transform:translateX(4px)}
.news-card.featured{background:var(--navy); border-top-color:var(--pink)}
.news-card.featured h3{color:var(--white); font-size:1.6rem}
.news-card.featured p{color:var(--on-dark-muted)}
.news-card.featured .date{color:var(--pink)}
.news-card.featured .more{color:var(--pink)}
.news-card.featured .more:hover{color:var(--white)}
.newsletter{
  margin-top:3rem; border-radius:var(--radius-lg); padding:2.25rem 2.5rem;
  background:var(--red); color:var(--white); display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow);
}
.newsletter h3{font-family:var(--serif); font-weight:600; font-size:1.6rem; margin:0 0 .3rem}
.newsletter p{margin:0; color:var(--on-dark-muted)}

/* ---------- Contact ---------- */
.form-panel{background:var(--white); color:var(--on-light); border-radius:var(--radius-lg); padding:2.25rem; box-shadow:var(--shadow)}
.form-panel .form-label{font-weight:700; font-size:.9rem; color:var(--ink)}
.form-panel .form-control, .form-panel .form-select{
  border:2px solid rgba(4,15,22,.12); border-radius:10px; padding:.75rem .9rem; background:#F7FAFB;
}
.form-panel .form-control:focus, .form-panel .form-select:focus{border-color:var(--navy); box-shadow:0 0 0 4px rgba(25,59,110,.15); background:var(--white)}
.form-note{font-size:.85rem; color:var(--on-light-muted)}
.contact-line{display:flex; gap:1rem; align-items:center; padding:1.1rem 0; border-bottom:1px solid var(--line-dark)}
.contact-line .ic{flex:none; width:48px; height:48px; border-radius:12px; background:var(--red); display:grid; place-items:center}
.contact-line .ic svg{width:22px; height:22px; color:var(--white)}
.contact-line .k{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--pink)}
.contact-line a, .contact-line .v{color:var(--white); font-weight:700; text-decoration:none; font-size:1.05rem}
.contact-line a:hover{color:var(--pink)}
.map{border-radius:var(--radius-lg); overflow:hidden; margin-top:1.5rem; box-shadow:var(--shadow); border:1px solid var(--line-dark)}
.map iframe{width:100%; height:260px; border:0; display:block; filter:saturate(.75)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); padding:4rem 0 2rem; color:var(--on-dark-muted)}
.site-footer h4{font-size:.75rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--pink); margin-bottom:1rem}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:var(--on-dark); text-decoration:none}
.site-footer a:hover{color:var(--pink)}
.site-footer .legal{border-top:1px solid var(--line-dark); margin-top:3rem; padding-top:1.5rem; font-size:.85rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem}

.to-top{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:1020; width:48px; height:48px; border-radius:50%;
  border:0; background:var(--red); color:var(--white); display:grid; place-items:center; box-shadow:var(--shadow);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s, transform .3s var(--ease);
}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{background:var(--red-deep)}
.to-top svg{width:20px; height:20px}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .scroll-cue::after{animation:none}
  *{transition-duration:.01ms !important}
}
.no-js .reveal{opacity:1; transform:none}

/* Gallery packing + Bootstrap indicator overrides */
.gallery{grid-auto-flow:dense}
.quote-dots.carousel-indicators{position:static; margin:0; padding:0; justify-content:flex-start; z-index:auto}
.quote-dots.carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:999px; border:0; margin:0; padding:0; text-indent:0;
  background:rgba(4,15,22,.25); opacity:1; transition:width .3s var(--ease), background .3s;
}
.quote-dots.carousel-indicators .active{width:32px; background:var(--red)}
#quotesCarousel .carousel-item{transition:transform .7s var(--ease)}

/* Button colours inside light bands (override .band-sky link colour) */
.band-sky .btn-ink, .band-sky .btn-ink:hover, .band-sky .btn-red, .band-sky .btn-red:hover{color:var(--white)}
.band-sky .btn-pink, .band-sky .btn-pink:hover{color:var(--ink)}
.role-panel .tick-list li::before{background-color:var(--ink)}