/* Mirembe Junior School — Design System, Phase 1/2
   Self-hosted fonts already loaded on the live site (Playfair Display, Rubik) —
   this just formalizes the pairing and stops pulling them from Google's CDN. */

/* Native cross-document view transitions — smooth fade/cross-fade between full
   page loads on every nav click, no JS or client-side routing required.
   Supported in Chromium browsers; a no-op (plain navigation) everywhere else. */
@view-transition {
  navigation: auto;
}

@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/playfair-display-700.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:900; font-display:swap; src:url('fonts/playfair-display-900.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/playfair-display-400italic.woff2') format('woff2'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/rubik-400.woff2') format('woff2'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/rubik-500.woff2') format('woff2'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/rubik-700.woff2') format('woff2'); }

:root{
  /* Color — Sunshine & Marigold: a brighter repaint for a children's school,
     built from the school's own colors (yellow, orange, white). Dark navy is
     gone from every large surface — it only remains, warmed, as body-text ink. */
  --color-ink:#3A2B18;              /* warm espresso — text only, never a big fill anymore */
  --color-canvas:#FFFCF5;           /* warm ivory paper — page ground */
  --color-surface:#FFFFFF;          /* card ground */
  --color-yellow:#FFC72C;           /* Sunshine Yellow — primary brand color */
  --color-yellow-soft:#FFF3D1;      /* pale yellow tint for soft section backgrounds/chips */
  --color-orange:#FF7A1A;           /* Marigold Orange — secondary brand color */
  --color-orange-deep:#E8600A;      /* deep orange — nav/footer/hero bands, text-safe on white */
  --color-brand:#FFC72C;            /* = yellow; kept for existing component styles */
  --color-brand-ink:#3A2B18;        /* text on yellow/light backgrounds */
  --color-accent:#E8600A;           /* burnt orange — eyebrows, links, small accents */
  --color-text-secondary:#8A7360;   /* warm taupe, replacing cool grey */
  --color-border:rgba(58,43,24,0.13);
  --color-danger:#C0392B;

  --gradient-sunshine:linear-gradient(135deg, var(--color-orange) 0%, var(--color-yellow) 100%);

  --shadow-card:0 1px 2px rgba(58,43,24,0.07), 0 8px 24px rgba(232,96,10,0.09);
  --shadow-card-hover:0 6px 14px rgba(58,43,24,0.12), 0 18px 40px rgba(232,96,10,0.20);

  /* Spacing — 8px base unit */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px;
  --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;

  /* Type */
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;

  --size-display-1: clamp(2.25rem, 1.7rem + 2.6vw, 4.25rem);
  --size-display-2: clamp(1.85rem, 1.55rem + 1.4vw, 2.75rem);
  --size-display-3: clamp(1.4rem, 1.25rem + 0.7vw, 2rem);
  --size-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --size-eyebrow: 0.8125rem;
  --size-body-lg: 1.125rem;
  --size-body: 1rem;
  --size-caption: 0.875rem;
  --size-micro: 0.75rem;
}

/* ---------- Base ---------- */
/* Legacy stylesheets never set a body background (page defaulted to plain
   white behind every section) — setting it here is what actually makes the
   warm-ivory canvas show through site-wide, not just inside components that
   explicitly opt into var(--color-canvas). */
body{ background:var(--color-canvas); }
::selection{ background:var(--color-brand); color:var(--color-brand-ink); }
:focus-visible{ outline:3px solid var(--color-brand); outline-offset:2px; }

h1, h2, h3{ font-family:var(--font-display); text-wrap:balance; }
.eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:var(--size-eyebrow);
  text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent);
  display:inline-flex; align-items:center; gap:8px; margin:0 0 var(--space-3);
  background:var(--color-yellow-soft); padding:6px 14px 6px 11px; border-radius:99px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--color-orange); display:inline-block; flex:none; }
/* On a colored band (CTA sections, page-hero) an inline color:#fff override needs a
   matching frosted pill instead of the pale-yellow one above, or white-on-pale-yellow
   would be unreadable. */
.eyebrow[style*="color:#fff"]{ background:rgba(255,255,255,0.18); }
.eyebrow[style*="color:#fff"]::before{ background:var(--color-yellow); }

/* ---------- Buttons ---------- */
.ds-btn{
  font-family:var(--font-body); font-weight:600; font-size:var(--size-body);
  border-radius:8px; padding:13px 26px; border:2px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; line-height:1.2;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.ds-btn:active{ transform:scale(.96); }
.ds-btn-primary{ background:var(--color-yellow); color:var(--color-brand-ink); }
.ds-btn-primary:hover{ box-shadow:0 10px 22px rgba(255,138,26,0.4); transform:translateY(-2px) scale(1.015); color:var(--color-brand-ink); }
.ds-btn-secondary{ background:transparent; border-color:rgba(255,255,255,0.7); color:#fff; }
.ds-btn-secondary:hover{ background:#fff; color:var(--color-orange-deep); border-color:#fff; transform:translateY(-2px); }
.ds-btn-outline-ink{ background:transparent; border-color:var(--color-ink); color:var(--color-ink); }
.ds-btn-outline-ink:hover{ background:var(--color-ink); color:var(--color-canvas); transform:translateY(-2px); }

/* ---------- Badges ---------- */
.ds-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:var(--size-micro); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; padding:5px 11px; border-radius:99px;
}
.ds-badge-brand{ background:var(--color-brand); color:var(--color-brand-ink); }
.ds-badge-outline-light{ border:1.5px solid rgba(255,255,255,0.6); color:#fff; }

/* ---------- Nav ---------- */
.ds-nav{
  position:sticky; top:0; z-index:50; background:var(--color-orange-deep); color:#fff;
  border-top:4px solid; border-image:var(--gradient-sunshine) 1;
  box-shadow:0 2px 14px rgba(58,43,24,0.18);
}
.ds-nav .ds-nav-inner{
  max-width:1180px; margin:0 auto; padding:var(--space-3) var(--space-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.ds-nav .ds-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--color-canvas); flex:none; }
.ds-nav .ds-brand img{ height:2.6rem; width:auto; }
.ds-nav .ds-brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; white-space:nowrap; }
.ds-nav .ds-links{ display:flex; align-items:center; gap:var(--space-4); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.ds-nav .ds-links > li{ position:relative; }
.ds-nav .ds-links a{
  text-decoration:none; font-size:var(--size-caption); font-weight:500; color:var(--color-canvas);
  position:relative; padding:8px 0; display:inline-block;
}
.ds-nav .ds-links a::after{
  content:""; position:absolute; left:0; bottom:2px; height:2px; width:0; background:var(--color-brand);
  transition:width .2s ease;
}
.ds-nav .ds-links a:hover::after, .ds-nav .ds-links a:focus-visible::after{ width:100%; }
.ds-nav .ds-social{ display:flex; gap:10px; flex:none; }
.ds-nav .ds-social a{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); color:var(--color-canvas); text-decoration:none; transition:background .15s ease, color .15s ease;
}
.ds-nav .ds-social a:hover{ background:var(--color-brand); color:var(--color-brand-ink); }
.ds-nav .ds-social svg{ width:16px; height:16px; fill:currentColor; }

/* dropdown */
.ds-nav .ds-dropdown{ position:relative; }
.ds-nav .ds-dropdown > a::after{ content:" ▾"; font-size:.7em; opacity:.7; }
/* Bridges the visual gap between the trigger link and the menu below it — without this,
   the mouse briefly leaves every hoverable element while crossing the gap and :hover drops. */
.ds-nav .ds-dropdown::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.ds-nav .ds-dropdown-menu{
  position:absolute; top:100%; left:0; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:12px; padding:6px; min-width:170px; list-style:none; margin:14px 0 0; display:none; box-shadow:var(--shadow-card-hover);
}
.ds-nav .ds-dropdown:hover .ds-dropdown-menu,
.ds-nav .ds-dropdown:focus-within .ds-dropdown-menu,
.ds-nav .ds-dropdown.is-dropdown-open .ds-dropdown-menu{ display:block; }
.ds-nav .ds-dropdown-menu li a{ display:block; padding:9px 12px; border-radius:8px; color:var(--color-ink) !important; font-weight:600; }
.ds-nav .ds-dropdown-menu li a:hover{ background:var(--color-yellow-soft); color:var(--color-orange-deep) !important; }
.ds-nav .ds-dropdown-menu li a::after{ display:none; }

.ds-nav-toggle{ display:none; align-items:center; justify-content:center; background:none; border:none; color:var(--color-canvas); cursor:pointer; padding:4px 8px; }
.ds-hamburger{ position:relative; width:22px; height:16px; display:inline-block; }
.ds-hamburger span{
  position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.ds-hamburger span:nth-child(1){ top:0; }
.ds-hamburger span:nth-child(2){ top:7px; }
.ds-hamburger span:nth-child(3){ top:14px; }
.ds-nav.is-open .ds-hamburger span:nth-child(1){ top:7px; transform:rotate(45deg); }
.ds-nav.is-open .ds-hamburger span:nth-child(2){ opacity:0; }
.ds-nav.is-open .ds-hamburger span:nth-child(3){ top:7px; transform:rotate(-45deg); }

@media (max-width:900px){
  .ds-nav .ds-nav-inner{ flex-wrap:wrap; }
  .ds-nav-toggle{ display:flex; margin-left:auto; }
  .ds-nav .ds-links{
    flex-basis:100%; flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .ds-nav.is-open .ds-links{ max-height:480px; }
  .ds-nav .ds-links > li{ width:100%; border-top:1px solid rgba(255,255,255,0.1); }
  .ds-nav .ds-links a{ width:100%; padding:12px 0; }
  .ds-nav .ds-dropdown-menu{ position:static; display:block; box-shadow:none; border:none; background:rgba(255,255,255,0.08); }
  .ds-nav .ds-dropdown-menu li a{ color:#fff !important; }
  .ds-nav .ds-dropdown-menu li a:hover{ background:rgba(255,255,255,0.12); color:#fff !important; }
}

/* ---------- Sections / layout ---------- */
.ds-section{ padding:var(--space-8) var(--space-4); }
.ds-container{ max-width:1180px; margin:0 auto; }
.ds-section-head{ max-width:62ch; margin:0 0 var(--space-6); }
.ds-section-head h2{ font-weight:700; font-size:var(--size-display-2); margin:0 0 var(--space-2); }
.ds-section-head p{ color:var(--color-text-secondary); font-size:var(--size-body-lg); margin:0; }

/* ---------- Hero ---------- */
.ds-hero{ position:relative; min-height:min(88vh, 720px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.ds-hero img.ds-hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  animation:ds-kenburns 22s ease-in-out infinite alternate;
}
@keyframes ds-kenburns{ 0%{ transform:scale(1); } 100%{ transform:scale(1.12); } }
.ds-hero .ds-hero-tint{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(58,30,4,0.45) 0%, rgba(58,30,4,0.28) 40%, rgba(120,50,4,0.90) 100%);
}
.ds-hero .ds-hero-content{ position:relative; z-index:2; padding:var(--space-7) var(--space-4) var(--space-8); max-width:1180px; margin:0 auto; width:100%; }
.ds-hero h1{ font-weight:900; font-size:var(--size-display-1); line-height:1.05; margin:0 0 var(--space-3); max-width:min(16ch, 100%); overflow-wrap:break-word; }
.ds-hero .ds-hero-lede{ font-size:var(--size-body-lg); max-width:min(52ch, 100%); margin:0 0 var(--space-5); color:rgba(255,255,255,0.92); overflow-wrap:break-word; }
.ds-hero .ds-hero-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.ds-scroll-cue{
  position:absolute; left:50%; bottom:var(--space-4); transform:translateX(-50%); z-index:2;
  color:#fff; opacity:.85; font-size:1.4rem; animation:ds-bounce 1.8s ease-in-out infinite;
}
@keyframes ds-bounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* ---------- Stats strip ---------- */
.ds-stats{
  background:var(--color-yellow); color:var(--color-ink); position:relative; overflow:hidden;
}
.ds-stats::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(58,43,24,0.12) 2px, transparent 2px);
  background-size:26px 26px;
}
.ds-stats .ds-container{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-5); text-align:center; }
.ds-stats .stat-num{ font-family:var(--font-display); font-weight:900; font-size:var(--size-display-2); color:var(--color-orange-deep); }
.ds-stats .stat-label{ font-size:var(--size-caption); text-transform:uppercase; letter-spacing:.08em; color:rgba(58,43,24,0.75); margin-top:6px; }

/* ---------- Program cards ---------- */
.ds-grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-4); }

/* ---------- Two-column layout (image+text pairs, crest+copy, etc.) ---------- */
/* min-width:0 is required here: grid items default to min-width:auto, which lets
   long unbroken text/headings force the track wider than its 1fr share and overflow
   the viewport horizontally rather than wrap. */
.ds-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:center; }
.ds-grid-2 > *{ min-width:0; }
/* Grid items stretch to fill their track by default — except replaced elements
   like <img>, which size to their own intrinsic dimensions unless told otherwise,
   and can overflow their column as a result. */
.ds-grid-2 > img{ width:100%; height:auto; display:block; }
.ds-grid-2.ds-grid-2-auto{ grid-template-columns:auto 1fr; }
@media (max-width:760px){
  .ds-grid-2, .ds-grid-2.ds-grid-2-auto{ grid-template-columns:1fr; }
}
.ds-prog-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px;
  padding:var(--space-4); box-shadow:var(--shadow-card); text-decoration:none; color:var(--color-ink); display:block;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.ds-prog-card:hover, .ds-prog-card:focus-visible{
  transform:translateY(-6px); box-shadow:var(--shadow-card-hover); border-color:var(--color-brand);
}
.ds-prog-card img{ width:100%; display:block; }
.ds-prog-card .ds-prog-num{ font-family:var(--font-display); font-weight:900; font-size:1.75rem; color:var(--color-accent); margin-bottom:var(--space-2); }
.ds-prog-card h3{ font-family:var(--font-body); font-size:var(--size-h4); font-weight:700; margin:0 0 8px; }
.ds-prog-card p{ font-size:var(--size-caption); color:var(--color-text-secondary); margin:0 0 var(--space-3); }
.ds-prog-card .ds-prog-link{ font-size:var(--size-caption); font-weight:600; color:var(--color-ink); }

/* Photo-backed program card variant — homepage "Our structure" */
.ds-prog-photo{
  position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:3/4;
  box-shadow:var(--shadow-card); text-decoration:none; color:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.ds-prog-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ds-prog-photo .ds-prog-tint{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(58,30,4,0.05) 0%, rgba(58,30,4,0.32) 45%, rgba(120,50,4,0.92) 100%);
}
.ds-prog-photo .ds-prog-content{ position:absolute; left:0; right:0; bottom:0; padding:var(--space-4); }
.ds-prog-photo .ds-prog-num{ font-family:var(--font-display); font-weight:900; font-size:1.5rem; color:var(--color-brand); margin-bottom:6px; }
.ds-prog-photo h3{ font-family:var(--font-body); font-weight:700; font-size:var(--size-h4); margin:0 0 6px; color:#fff; }
.ds-prog-photo p{ font-size:var(--size-caption); color:rgba(255,255,255,0.85); margin:0 0 10px; }
.ds-prog-photo .ds-prog-link{ font-size:var(--size-caption); font-weight:600; color:#fff; }
.ds-prog-photo:hover, .ds-prog-photo:focus-visible{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); }
.ds-prog-photo:hover img, .ds-prog-photo:focus-visible img{ transform:scale(1.08); }

/* ---------- Interior page hero (About/History/Team/etc.) ---------- */
.ds-page-hero{
  background:var(--color-orange-deep); color:#fff;
  padding:var(--space-8) var(--space-4) calc(var(--space-6) + 24px); text-align:center;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
}
.ds-page-hero .ds-container{ max-width:760px; }
.ds-page-hero .eyebrow{ justify-content:center; color:var(--color-orange-deep); background:#fff; }
.ds-page-hero .eyebrow::before{ background:var(--color-orange); }
.ds-page-hero h1{ font-weight:800; font-size:var(--size-display-2); margin:0 0 var(--space-2); color:#fff; }
.ds-page-hero p{ color:rgba(255,255,255,0.92); font-size:var(--size-body-lg); margin:0; }

/* ---------- Team ---------- */
.ds-team-card{ text-align:center; }
.ds-team-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:50%; margin-bottom:var(--space-3); box-shadow:var(--shadow-card); }
.ds-team-card h3{ font-family:var(--font-body); font-size:var(--size-body); font-weight:700; margin:0 0 4px; }
.ds-team-card p{ font-size:var(--size-caption); color:var(--color-text-secondary); margin:0; }

/* ---------- Timeline ---------- */
.ds-timeline{ position:relative; padding-left:var(--space-5); border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:var(--space-5); }
.ds-timeline-item{ position:relative; }
.ds-timeline-item::before{
  content:""; position:absolute; left:calc(-1 * var(--space-5) - 5px); top:4px;
  width:10px; height:10px; border-radius:50%; background:var(--color-brand); border:2px solid var(--color-surface);
}
.ds-timeline-item .ds-timeline-date{ font-size:var(--size-eyebrow); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); margin:0 0 4px; }
.ds-timeline-item h3{ font-family:var(--font-body); font-size:var(--size-h4); font-weight:700; margin:0 0 6px; }
.ds-timeline-item p{ color:var(--color-text-secondary); margin:0; max-width:60ch; }

/* ---------- Tabs ---------- */
.ds-tabs-nav{ display:flex; gap:var(--space-2); flex-wrap:wrap; border-bottom:2px solid var(--color-border); margin-bottom:var(--space-5); }
.ds-tab-btn{
  font-family:var(--font-body); font-weight:600; font-size:var(--size-body); color:var(--color-text-secondary);
  background:none; border:none; border-bottom:3px solid transparent; padding:10px 4px; margin-bottom:-2px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.ds-tabs-nav{ gap:var(--space-5); }
.ds-tab-btn:hover{ color:var(--color-ink); }
.ds-tab-btn[aria-selected="true"]{ color:var(--color-ink); border-bottom-color:var(--color-brand); }
.ds-tab-panel[hidden]{ display:none; }

.ds-mini-card{ padding:var(--space-4); background:var(--color-canvas); border-radius:14px; border:1px solid var(--color-border); }
.ds-mini-card h4{ font-family:var(--font-body); font-weight:700; font-size:var(--size-body); margin:0 0 var(--space-3); }

/* ---------- Fee table ---------- */
table.ds-fee-table{ width:100%; border-collapse:collapse; font-size:var(--size-body); }
table.ds-fee-table th, table.ds-fee-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--color-border); }
table.ds-fee-table td:last-child, table.ds-fee-table th:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.ds-fee-table th{ color:var(--color-text-secondary); font-weight:600; text-transform:uppercase; font-size:var(--size-micro); letter-spacing:.06em; }
table.ds-fee-table tr:last-child td{ border-bottom:none; }
.ds-content-needed{ color:var(--color-danger); font-style:italic; }

/* ---------- Form fields ---------- */
.ds-field{ margin-bottom:var(--space-4); }
.ds-field label{ display:block; font-size:var(--size-caption); font-weight:600; margin-bottom:6px; }
.ds-field input{
  width:100%; padding:11px 14px; border-radius:8px; border:1.5px solid var(--color-border);
  background:var(--color-canvas); color:var(--color-ink); font-family:var(--font-body); font-size:var(--size-body);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ds-field input:focus, .ds-field textarea:focus{ border-color:var(--color-orange); box-shadow:0 0 0 3px rgba(255,122,26,0.25); outline:none; }

/* ---------- Flag / callout ---------- */
.ds-flag{
  border:1px solid var(--color-border); border-left:4px solid var(--color-danger);
  border-radius:4px 12px 12px 4px; padding:var(--space-4); background:var(--color-surface);
}
.ds-flag h4{ margin:0 0 6px; font-size:var(--size-body); font-family:var(--font-body); font-weight:700; }
.ds-flag p{ margin:0; color:var(--color-text-secondary); }

/* ---------- Photo grid ---------- */
.ds-photo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-3); }
.ds-photo-grid a{ display:block; border-radius:10px; overflow:hidden; box-shadow:var(--shadow-card); }
.ds-photo-grid img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .3s ease; }
.ds-photo-grid a:hover img, .ds-photo-grid a:focus-visible img{ transform:scale(1.06); }

/* ---------- Bento photo mosaic ---------- */
.ds-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:var(--space-3); }
.ds-bento a{
  display:block; position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card);
  transition:box-shadow .25s ease;
}
.ds-bento a:hover, .ds-bento a:focus-visible{ box-shadow:var(--shadow-card-hover); }
.ds-bento img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.ds-bento a:hover img, .ds-bento a:focus-visible img{ transform:scale(1.08); }
.ds-bento .ds-bento-feature{ grid-column:span 2; grid-row:span 2; }
.ds-bento .ds-bento-tall{ grid-row:span 2; }
.ds-bento .ds-bento-wide{ grid-column:span 2; }
@media (max-width:760px){
  .ds-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .ds-bento .ds-bento-feature{ grid-column:span 2; grid-row:span 2; }
  .ds-bento .ds-bento-tall{ grid-row:span 1; }
  .ds-bento .ds-bento-wide{ grid-column:span 2; }
}

/* ---------- Testimonial ---------- */
.ds-quote{
  background:var(--color-surface); border-left:4px solid var(--color-brand);
  border-radius:4px 14px 14px 4px; padding:var(--space-5); box-shadow:var(--shadow-card);
}
.ds-quote blockquote{ margin:0 0 var(--space-3); font-family:var(--font-display); font-style:italic; font-size:1.15rem; line-height:1.5; border:none; padding:0; }
.ds-quote cite{ font-style:normal; font-size:var(--size-caption); color:var(--color-text-secondary); display:block; }
.ds-quote cite b{ color:var(--color-ink); display:block; font-size:var(--size-body); font-style:normal; }

/* ---------- Social proof tease ---------- */
.ds-social-proof{ background:var(--color-canvas); }
.ds-social-links{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.ds-social-card{
  flex:1 1 200px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px;
  padding:var(--space-4); text-decoration:none; color:var(--color-ink); display:flex; align-items:center; gap:var(--space-3);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ds-social-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.ds-social-card .ds-social-icon{
  width:44px; height:44px; border-radius:50%; background:var(--color-orange-deep); color:var(--color-yellow);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.ds-social-card .ds-social-icon svg{ width:20px; height:20px; fill:currentColor; }
.ds-social-card .ds-social-name{ font-weight:700; font-size:var(--size-body); }
.ds-social-card .ds-social-handle{ font-size:var(--size-caption); color:var(--color-text-secondary); }

/* ---------- Footer ---------- */
.ds-footer{ background:var(--color-ink); color:var(--color-canvas); }
.ds-footer .ds-container{ padding:var(--space-7) var(--space-4) var(--space-5); display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:var(--space-6); }
@media (max-width:800px){ .ds-footer .ds-container{ grid-template-columns:1fr 1fr; } }
.ds-footer .ds-footer-brand img{ height:3.2rem; margin-bottom:var(--space-3); }
.ds-footer .ds-footer-brand p{ font-size:var(--size-caption); color:rgba(255,247,232,0.7); max-width:32ch; }
.ds-footer h4{ font-family:var(--font-body); font-size:var(--size-eyebrow); text-transform:uppercase; letter-spacing:.08em; color:var(--color-brand); margin:0 0 var(--space-3); }
.ds-footer ul{ list-style:none; margin:0; padding:0; }
.ds-footer ul li{ margin-bottom:10px; }
.ds-footer a{ text-decoration:none; color:rgba(255,247,232,0.85); font-size:var(--size-caption); }
.ds-footer a:hover{ color:var(--color-brand); }
.ds-footer .ds-social{ display:flex; gap:10px; margin-top:var(--space-3); }
.ds-footer .ds-social a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,247,232,0.08);
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;
}
.ds-footer .ds-social a:hover{ background:var(--color-brand); color:var(--color-brand-ink); }
.ds-footer .ds-social svg{ width:16px; height:16px; fill:currentColor; }
.ds-footer .ds-map{ border-radius:10px; overflow:hidden; border:1px solid rgba(255,247,232,0.15); }
.ds-footer-bottom{
  border-top:1px solid rgba(255,247,232,0.12); padding:var(--space-3) var(--space-4);
  text-align:center; font-size:var(--size-micro); color:rgba(255,247,232,0.55);
}

/* ---------- Motion / reveal ---------- */
.ds-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.ds-reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .ds-reveal{ opacity:1 !important; transform:none !important; }
  .ds-scroll-cue{ animation:none !important; }
}