/* ==========================================================================
   Stonebank Group — Design System
   Senior-led property development advisory and delivery
   ========================================================================== */

:root{
  /* Colour system — Stonebank Brand Guidelines V3 (June 2024).
     Primary: Navy #17335B, Black, White. Secondary sets (Camel/Burnt
     Orange/Slate/etc) are reserved in the guide for graphs and data only,
     so they are deliberately not used here as decorative UI colour. */
  --ink:        #17335b;   /* Stonebank Navy — primary dark colour */
  --ink-70:     rgba(23,51,91,.72);
  --ink-50:     rgba(23,51,91,.5);
  --stone-050:  #f6f7f9;   /* neutral cool grey, not warm */
  --stone-100:  #eef0f3;
  --stone-200:  #dfe3e8;
  --stone-300:  #c7ccd4;
  --charcoal-800:#122845;
  --charcoal-900:#0e2038;
  --white:      #ffffff;
  --accent:     #17335b;   /* navy stands in as the single brand accent */
  --accent-dark:#0e2038;
  --accent-light:#8fa6c4;  /* lighter navy tint, for emphasis text on dark backgrounds */
  --line:       #dfe3e8;
  --success:    #4c7a5c;

  --font-head: 'Albert Sans', Arial, 'Arial Nova', sans-serif;
  --font-body: 'Albert Sans', Arial, 'Arial Nova', sans-serif;

  --container: 1240px;
  --radius: 2px;
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem,5vw,4.2rem); font-weight:400; }
h2{ font-size:clamp(1.9rem,3.4vw,2.75rem); font-weight:400; }
h3{ font-size:1.4rem; }
p{ color:var(--ink-70); }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
section{ padding:96px 0; }
@media (max-width:768px){
  section{ padding:64px 0; }
  .container{ padding:0 20px; }
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:18px;
}
/* On dark/navy backgrounds the default navy eyebrow colour has no
   contrast — lighten it wherever it sits on a dark section. */
.hero .eyebrow,
.page-header .eyebrow,
.bg-ink .eyebrow,
.cta-banner .eyebrow{ color:var(--accent-light); }
.hero .eyebrow::before,
.page-header .eyebrow::before,
.bg-ink .eyebrow::before,
.cta-banner .eyebrow::before{ background:var(--accent-light); }

.eyebrow::before{
  content:'';
  width:26px; height:1px;
  background:var(--accent);
  display:inline-block;
}

.lede{
  font-size:1.15rem;
  color:var(--ink-70);
  max-width:640px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:var(--radius);
  transition:var(--transition);
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:var(--white); }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-outline{ border:1px solid var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--white); }
.btn-light{ border:1px solid rgba(255,255,255,.5); color:var(--white); }
.btn-light:hover{ background:var(--white); color:var(--ink); }
.btn-accent{ background:var(--accent); color:var(--white); }
.btn-accent:hover{ background:var(--accent-dark); }
.btn svg{ width:16px; height:16px; transition:transform var(--transition); }
.btn:hover svg{ transform:translateX(4px); }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--charcoal-900);
  color:rgba(255,255,255,.75);
  font-size:.8rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  height:40px;
}
.topbar a{ color:rgba(255,255,255,.75); transition:color var(--transition); }
.topbar a:hover{ color:var(--white); }
.topbar-links{ display:flex; gap:24px; }
.topbar-social{ display:flex; gap:16px; }
.topbar-social a{ display:flex; }
.topbar-social svg{ width:15px; height:15px; }
@media (max-width:768px){ .topbar{ display:none; } }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  transition:var(--transition);
}
.site-header.is-transparent{
  background:transparent;
  border-bottom-color:transparent;
}
.site-header .nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:88px;
}
.logo{ display:flex; align-items:center; }
.logo-img{ height:26px; width:auto; display:block; }
.logo-img.logo-white{ display:none; }
.site-header.is-transparent .logo-img.logo-navy{ display:none; }
.site-header.is-transparent .logo-img.logo-white{ display:block; }

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > li{ position:relative; }
.main-nav > li > a{
  display:flex; align-items:center; gap:6px;
  padding:14px 18px;
  font-size:.86rem; font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:color var(--transition);
}
.site-header.is-transparent .main-nav > li > a{ color:var(--white); }
.main-nav > li > a:hover{ color:var(--accent); }
.main-nav > li > a svg{ width:11px; height:11px; }

.dropdown{
  position:absolute; top:100%; left:0;
  background:var(--white);
  min-width:270px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  padding:10px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:var(--transition);
}
.main-nav > li:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li a{
  display:block; padding:12px 16px; color:var(--ink);
  font-size:.88rem; font-weight:500; text-transform:none; letter-spacing:0;
  border-radius:var(--radius);
}
.dropdown li a:hover{ background:var(--stone-100); color:var(--accent-dark); }
.dropdown li a small{ display:block; color:var(--ink-50); font-size:.78rem; margin-top:2px; font-weight:400;}

.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; z-index:1100; }
.nav-toggle span{ width:26px; height:2px; background:var(--ink); transition:var(--transition); }
.site-header.is-transparent .nav-toggle span{ background:var(--white); }

@media (max-width:1080px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(360px,86vw); height:100vh;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:110px 32px 40px; gap:0;
    transform:translateX(100%); transition:transform var(--transition);
    overflow-y:auto;
    z-index:1050; /* must sit above .nav-overlay (999) or its links can't be clicked */
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav > li{ width:100%; border-bottom:1px solid rgba(255,255,255,.1); }
  .main-nav > li > a{ color:var(--white); padding:16px 0; justify-content:space-between; width:100%; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; background:transparent; box-shadow:none; display:none; padding:0 0 10px; }
  .dropdown.is-open{ display:block; }
  .dropdown li a{ color:rgba(255,255,255,.75); padding:10px 0 10px 16px; }
  .dropdown li a small{ color:rgba(255,255,255,.4); }
  .nav-toggle{ display:flex; }
  .nav-cta .btn{ display:none; }
  body.nav-open{ overflow:hidden; }
  .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:var(--transition); z-index:999; }
  .nav-overlay.is-open{ opacity:1; visibility:visible; }
}
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ----------
   The header is position:sticky, which only overlaps content once the
   user scrolls past it — on initial load it sits in normal flow ABOVE
   the hero, not over it. Pulling the hero up by the header's own height
   (88px) makes it slide underneath the sticky header on first paint too,
   so the "transparent header over hero" look is correct at scroll:0 and
   not just after scrolling. Header z-index:1000 keeps it painted on top. */
.hero{
  position:relative;
  margin-top:-88px;
  min-height:92vh;
  display:flex; align-items:center;
  background:
    linear-gradient(160deg, rgba(14,32,56,.90) 0%, rgba(23,51,91,.78) 55%, rgba(14,32,56,.92) 100%),
    url('../img/photography/hero-stclare.jpg') center 30%/cover no-repeat;
  color:var(--white);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(169,116,63,.25), transparent 45%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:2; padding-top:158px; padding-bottom:60px; }
.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.25);
  padding:8px 18px; border-radius:40px;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:28px; color:rgba(255,255,255,.85);
}
.hero h1{ color:var(--white); max-width:900px; margin-bottom:26px; }
.hero h1 em{ font-style:normal; color:inherit; }
.hero .lede{ color:rgba(255,255,255,.75); font-size:1.2rem; max-width:600px; margin-bottom:40px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:70px; }
.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:32px; border-top:1px solid rgba(255,255,255,.15); padding-top:36px;
  max-width:680px;
}
.hero-stats .num{ font-family:var(--font-head); font-size:2.2rem; color:var(--white); display:block; }
.hero-stats .label{ font-size:.8rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:900px){
  .hero{ min-height:auto; }
  .hero .container{ padding-top:138px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Page header (non-home hero) ---------- */
.page-header{
  background:linear-gradient(160deg,var(--charcoal-900) 0%,var(--ink) 100%);
  color:var(--white);
  padding:170px 0 80px;
  position:relative;
  overflow:hidden;
}
.page-header::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 88% 10%, rgba(169,116,63,.3), transparent 50%);
}
.page-header .container{ position:relative; z-index:2; }
.page-header h1{ color:var(--white); max-width:760px; font-size:clamp(2rem,3.4vw,3rem); }
.page-header .lede{ color:rgba(255,255,255,.7); }
.breadcrumb{ font-size:.82rem; color:rgba(255,255,255,.55); margin-bottom:20px; letter-spacing:.03em; text-transform:uppercase;}
.breadcrumb a{ color:rgba(255,255,255,.8); }
.breadcrumb a:hover{ color:var(--accent-light); }

/* ---------- Sections & grids ---------- */
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.bg-stone{ background:var(--stone-050); }
.bg-ink{ background:var(--ink); color:var(--white); }
.bg-ink .lede,.bg-ink p{ color:rgba(255,255,255,.7); }
.bg-ink h2{ color:var(--white); }

/* Service cards */
.card{
  background:var(--white);
  border:1px solid var(--line);
  padding:40px 34px;
  transition:var(--transition);
  height:100%;
}
.card:hover{ border-color:var(--accent); box-shadow:0 20px 45px rgba(21,23,26,.08); transform:translateY(-4px); }
.card .num-tag{ font-family:var(--font-head); font-size:.85rem; color:var(--accent); letter-spacing:.08em; }
.card h3{ margin:16px 0 14px; }
.card .card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
.card .card-link svg{ width:14px; height:14px; transition:transform var(--transition); }
.card:hover .card-link svg{ transform:translateX(4px); }
.card-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:var(--stone-100); color:var(--accent);
  margin-bottom:8px;
}
.card-icon svg{ width:26px; height:26px; }

/* Sector cards */
.sector-card{
  position:relative;
  padding:34px 30px;
  background:var(--charcoal-900);
  background-size:cover;
  background-position:center;
  color:var(--white);
  min-height:230px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.sector-card::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(200deg, var(--accent-dark), var(--charcoal-900) 65%);
  opacity:.72;
  transition:opacity var(--transition);
}
.sector-card:hover::before{ opacity:.92; }
.sector-card .sector-index{ position:absolute; top:26px; right:30px; font-family:var(--font-head); font-size:.85rem; color:rgba(255,255,255,.4); }
.sector-card h3{ color:var(--white); margin-bottom:10px; }
.sector-card p{ color:rgba(255,255,255,.72); font-size:.94rem; line-height:1.6; min-height:96px; display:flex; align-items:flex-end; }

/* Portfolio */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.filter-btn{
  padding:10px 20px; border:1px solid var(--line);
  font-size:.82rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  transition:var(--transition);
}
.filter-btn:hover{ border-color:var(--accent); color:var(--accent-dark); }
.filter-btn.is-active{ background:var(--ink); color:var(--white); border-color:var(--ink); }

.project-card{
  border:1px solid var(--line);
  overflow:hidden;
  transition:var(--transition);
  display:flex;
  flex-direction:column;
}
.project-card:hover{ box-shadow:0 20px 45px rgba(21,23,26,.1); transform:translateY(-4px); }
.project-thumb{
  height:230px;
  flex-shrink:0;
  background:linear-gradient(135deg,var(--stone-200),var(--stone-300));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  color:var(--ink-50);
}
.project-thumb span{ font-family:var(--font-head); font-size:2.4rem; letter-spacing:.02em; }
.project-thumb.has-photo{ background-size:cover; background-position:center; color:transparent; }
.project-thumb.has-graphic{ background-color:var(--stone-100); background-size:contain; background-position:center; background-repeat:no-repeat; padding:24px; color:transparent; }
.project-thumb .sector-pills{ position:absolute; top:16px; left:16px; display:flex; gap:6px; flex-wrap:wrap; max-width:calc(100% - 32px); }
.project-thumb .sector-pill{
  background:var(--ink); color:var(--white);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  padding:6px 12px;
}
.project-body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.project-body h3{ font-size:1.15rem; margin-bottom:6px; }
.project-body .loc{ font-size:.85rem; color:var(--ink-50); text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; display:block; }
.project-meta{ display:flex; flex-direction:column; gap:5px; font-size:.86rem; color:var(--ink-70); border-top:1px solid var(--line); padding-top:14px; margin-top:auto; }
.project-meta span{ font-weight:600; color:var(--ink); }

/* Insights */
.insight-card{ border:1px solid var(--line); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; }
.insight-card:hover{ box-shadow:0 20px 45px rgba(21,23,26,.1); transform:translateY(-4px); }
.insight-thumb{ height:200px; background-size:cover; background-position:center; background-color:var(--stone-200); }
.insight-body{ padding:24px 26px 28px; flex:1; display:flex; flex-direction:column; }
.insight-body .date{ font-size:.78rem; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:10px; }
.insight-body h3{ font-size:1.1rem; margin-bottom:12px; line-height:1.35; }
.insight-body .read-more{ margin-top:auto; font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.insight-body .read-more svg{ width:14px; height:14px; transition:transform var(--transition); }
.insight-card:hover .read-more svg{ transform:translateX(4px); }

.article-body{ max-width:720px; margin:0 auto; }
.article-body p{ margin-bottom:20px; line-height:1.75; }
.article-hero{ width:100%; height:420px; object-fit:cover; margin-top:-48px; position:relative; z-index:3; }
.article-meta{ display:flex; gap:16px; align-items:center; font-size:.85rem; color:var(--ink-50); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.article-signoff{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line); font-size:.95rem; color:var(--ink-70); }

/* Stats strip */
.stats-strip{ background:var(--stone-100); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-strip .grid-4{ text-align:center; }
.stats-strip .num{ font-family:var(--font-head); font-size:2.6rem; color:var(--accent-dark); display:block; }
.stats-strip .label{ font-size:.85rem; color:var(--ink-70); text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }

/* Team */
.team-card{ text-align:left; }
.team-photo{
  width:100%; aspect-ratio:1/1;
  background:linear-gradient(150deg,var(--stone-200),var(--stone-300));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  font-family:var(--font-head); font-size:2.4rem; color:var(--ink-50);
}
.team-card h3{ font-size:1.15rem; margin-bottom:2px; }
.team-card .role{ color:var(--accent-dark); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin-bottom:12px; }
.team-linkedin{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin-top:14px; border-radius:50%; background:var(--stone-100); color:var(--ink-70); transition:background .15s,color .15s; }
.team-linkedin svg{ width:16px; height:16px; }
.team-linkedin:hover{ background:var(--ink); color:var(--white); }

/* Values / process list */
.process-step{ display:flex; gap:24px; padding:30px 0; border-top:1px solid var(--line); }
.process-step:first-of-type{ border-top:none; }
.process-step .step-num{ font-family:var(--font-head); font-size:1.6rem; color:var(--accent); min-width:56px; }
.value-item{ display:flex; gap:16px; align-items:flex-start; margin-bottom:26px; }
.value-item .dot{ width:8px; height:8px; background:var(--accent); border-radius:50%; margin-top:10px; flex-shrink:0; }

/* CTA banner */
.cta-banner{
  background:var(--ink); color:var(--white);
  padding:80px 0; text-align:center;
}
.cta-banner h2{ color:var(--white); max-width:700px; margin:0 auto 24px; }
.cta-banner .btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:36px; }

/* Certifications badges */
.cert-row{ display:flex; gap:18px; flex-wrap:wrap; }
.cert-badge{
  border:1px solid var(--line); padding:14px 22px;
  font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.cert-badge svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; }
@media (max-width:640px){
  .cert-row{ flex-direction:column; }
  .cert-badge{ width:100%; box-sizing:border-box; }
}

/* Office / contact cards */
.office-card{ background:var(--stone-050); border:1px solid var(--line); padding:36px; }
.office-card h3{ margin-bottom:18px; }
.office-card .row{ display:flex; gap:12px; margin-bottom:14px; font-size:.95rem; }
.office-card .row svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.office-card a:hover{ color:var(--accent-dark); }

/* Forms */
.form-field{ margin-bottom:22px; }
.form-field label{ display:block; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.form-field input,.form-field textarea,.form-field select{
  width:100%; padding:14px 16px; border:1px solid var(--line);
  background:var(--white); font-family:var(--font-body); font-size:.95rem;
  transition:var(--transition);
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{ outline:none; border-color:var(--accent); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.8rem; color:var(--ink-50); margin-top:10px; }
.form-success{ display:none; background:var(--stone-100); border:1px solid var(--accent); padding:20px 24px; margin-top:20px; font-size:.92rem; }
.form-success.is-visible{ display:block; }

/* Clients strip */
.clients-strip{ padding:70px 0; background:var(--white); }
.clients-grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:36px 48px; margin-top:36px; }
.client-logo{ display:flex; align-items:center; justify-content:center; height:56px; }
.client-logo img{ max-height:44px; max-width:150px; width:auto; height:auto; object-fit:contain; filter:grayscale(100%); opacity:.55; transition:filter .2s ease, opacity .2s ease; }
.client-logo img:hover{ filter:grayscale(0%); opacity:1; }
@media (max-width:640px){
  .clients-grid{ gap:24px 32px; }
  .client-logo{ height:40px; }
  .client-logo img{ max-height:32px; max-width:110px; }
}

/* Map */
.map-frame{ width:100%; height:320px; border:0; filter:grayscale(15%); }

/* Footer */
.site-footer{ background:var(--charcoal-900); color:rgba(255,255,255,.65); padding-top:80px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-top h4{ color:var(--white); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:22px; font-family:var(--font-body); font-weight:600; }
.footer-top li{ margin-bottom:12px; font-size:.92rem; }
.footer-top a:hover{ color:var(--white); }
.footer-logo{ font-family:var(--font-head); font-size:1.6rem; color:var(--white); margin-bottom:16px; display:block; }
.footer-about{ max-width:320px; font-size:.92rem; margin-bottom:24px; color:rgba(255,255,255,.7); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.82rem; flex-wrap:wrap; gap:12px; }
.footer-bottom a:hover{ color:var(--white); }
.acknowledgement{ font-size:.8rem; color:rgba(255,255,255,.45); max-width:640px; margin-top:10px; }
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* Reveal animation — progressive enhancement only.
   Content is visible by default; it is only hidden pre-animation once the
   'js' class confirms script has run, so a slow/blocked script never
   leaves real content invisible. */
.reveal{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
.js .reveal{ opacity:0; transform:translateY(24px); }
.js .reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal, .js .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* Placeholder banner for site-wide notice (dev/preview only) */
.build-note{
  background:var(--accent); color:var(--white); text-align:center;
  font-size:.78rem; padding:8px 16px; letter-spacing:.03em;
}
.build-note a{ text-decoration:underline; }