/* Belledox — hi-fi shared styles
   Palette: cream #F3EFE9, ink #0A1F3A, hairline #E5DFD4
   Type:    Instrument Serif (H1/H2 + pull quotes) + Inter (everything else)
*/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#0A1F3A;
  --ink-2:#1a2b47;
  --ink-soft:#3a4a66;
  --muted:#6b7890;
  --cream:#F3EFE9;
  --cream-2:#EBE6DC;
  --paper:#FAF7F1;
  --line:#E5DFD4;
  --line-2:#D9D1C0;
  --serif:'Instrument Serif', 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv11";
}
a{ color:inherit; text-decoration:none;}
img{ max-width:100%; display:block;}

/* ─── Type scale ─────────────────────────────────────────── */
.display{
  font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(64px, 9vw, 136px); line-height:0.94;
  letter-spacing:-0.035em;
}
.display-i{ font-style:italic; }
.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(40px, 5.5vw, 72px); line-height:0.98;
  letter-spacing:-0.03em;
}
.h2-i{ font-style:italic; }
.eyebrow{
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.lede{
  font-size:17px; line-height:1.55; color:var(--ink-2);
  max-width:56ch;
}
.body{ font-size:15px; line-height:1.6; color:var(--ink-2); }
.small{ font-size:13px; line-height:1.55; color:var(--ink-soft); }
.mono{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ─── Atoms ──────────────────────────────────────────────── */
.hairline{ height:1px; background:var(--line); width:100%; border:0; }
.hairline-ink{ height:1px; background:var(--ink); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 20px; font-size:13px; font-weight:500; letter-spacing:0.005em;
  border-radius:4px; border:1px solid transparent; cursor:pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  text-decoration:none; white-space:nowrap;
  font-family:var(--sans);
}
.btn--solid{ background:var(--ink); color:var(--cream);}
.btn--solid:hover{ background:#132a4d; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream);}
.btn--inv{ background:var(--cream); color:var(--ink);}
.btn--inv:hover{ background:#fff;}
.btn--hair{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--hair:hover{ border-color:var(--ink); }

.link-u{
  display:inline-flex; gap:8px; align-items:center;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
  font-size:13px; letter-spacing:0.005em;
  transition: gap .25s var(--ease);
}
.link-u:hover{ gap:12px; }

/* ─── Layout ─────────────────────────────────────────────── */
.container{ max-width:1280px; margin:0 auto; padding:0 48px; }
@media (max-width:640px){ .container{ padding:0 20px; } }
.section{ padding:120px 0; }
@media (max-width:900px){ .section{ padding:72px 0; } }

.section-head{
  display:grid; grid-template-columns: 1fr 2fr; gap:80px; align-items:end;
  margin-bottom:64px;
}
@media (max-width:900px){
  .section-head{ grid-template-columns:1fr; gap:24px; margin-bottom:40px; }
}

/* ─── Nav height variable (used for body offset + hero pull-up) ── */
:root{ --nav-h: 88px; }
@media (max-width:640px){ :root{ --nav-h: 72px; } }

/* ─── Navigation — fixed + liquid glass on scroll ──────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:transparent;
  border-bottom:1px solid transparent;
  transition: border-color .35s var(--ease), background .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease);
}
.nav--scrolled{
  border-bottom-color:rgba(10,31,58,0.09);
  background:rgba(243,239,233,0.58);
  backdrop-filter:saturate(200%) blur(22px);
  -webkit-backdrop-filter:saturate(200%) blur(22px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 8px 24px -12px rgba(10,31,58,0.12);
}
.nav__inner{
  max-width:1280px; margin:0 auto; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}

/* Body offset for fixed nav. Hero (.wow) pulls back up behind nav. */
body{ padding-top: var(--nav-h); }
.wow{ margin-top: calc(-1 * var(--nav-h)); }

.brand{
  font-family:var(--serif); font-style:italic; font-size:24px;
  letter-spacing:-0.01em; line-height:1;
  display:flex; align-items:center; gap:14px;
  color:var(--ink);
}
.brand__logo{
  height:44px; width:auto; display:block;   /* 2× — Desktop default */
  color:var(--ink);
}
/* „Est. 2023 · Berlin" subtitle is now hidden everywhere; logo speaks for itself. */
.brand small{ display:none; }

@media (max-width:640px){
  .brand__logo{ height:34px; }
  .nav__inner{ padding:14px 20px; }
}

.nav__links{ display:flex; gap:28px; font-size:13px; }
.nav__links a{
  color:var(--ink-2); transition:color .25s var(--ease); position:relative;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:var(--ink);
}
@media (max-width:900px){ .nav__links{ display:none; } }

.nav__right{ display:flex; gap:12px; align-items:center; }
.nav__hamburger{
  display:none; width:44px; height:44px;
  background:transparent; border:0; cursor:pointer; padding:0;
  position:relative;
  z-index:61;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:900px){ .nav__hamburger{ display:block; } }
.nav__hamburger::before, .nav__hamburger::after{
  content:''; position:absolute; left:10px; right:10px; height:1.5px;
  background:var(--ink); transition:transform .3s var(--ease), top .3s var(--ease);
  pointer-events:none;
}
.nav__hamburger::before{ top:17px; } .nav__hamburger::after{ top:25px; }

/* ── Mobile menu overlay (toggled by body.nav-open) ───────── */
@media (max-width:900px){
  body.nav-open{ overflow:hidden; position:fixed; width:100%; }
  body.nav-open .nav__links{
    display:flex !important;
    position:fixed;
    top:0; right:0; bottom:0; left:0;
    /* dynamic viewport height handles mobile browser chrome */
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    box-sizing:border-box;
    background:var(--cream);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:calc(var(--nav-h, 78px) + 8px) 28px calc(env(safe-area-inset-bottom, 24px) + 40px);
    gap:0;
    z-index:55;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    animation: navFade .28s var(--ease);
  }
  body.nav-open .nav__links a{
    display:block;
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:32px; letter-spacing:-0.02em; line-height:1.2;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    color:var(--ink);
  }
  body.nav-open .nav__links a.active{
    color:var(--ink);
  }
  body.nav-open .nav__links a.active::after{ display:none; }
  /* Nav-bar must still receive taps (so the hamburger can close the menu) */
  body.nav-open .nav{ z-index:60; position:fixed; }
  body.nav-open .nav__hamburger{ z-index:62; position:relative; }
  body.nav-open .nav__hamburger::before{ top:21px; transform:rotate(45deg); }
  body.nav-open .nav__hamburger::after{  top:21px; transform:rotate(-45deg); }
  /* Termin-Button verschwindet während das Menü offen ist, damit es nicht überlappt */
  body.nav-open .nav__right > .btn--solid{ display:none; }
  /* Booking-bar verstecken, damit sie das Menü nicht überlagert */
  body.nav-open .booking-bar{ display:none; }
}
@keyframes navFade{
  from{ opacity:0; transform:translateY(-6px); }
  to{   opacity:1; transform:none; }
}

/* ─── Booking Bar (sticky) ───────────────────────────────── */
.booking-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--ink); color:var(--cream);
  transform:translateY(100%); transition:transform .45s var(--ease);
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.booking-bar.show{ transform:translateY(0); }
.booking-bar .label{
  font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:#9AA7BF;
}
.booking-bar .state{ font-size:14px; margin-top:2px; }
.booking-bar .btn{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.booking-bar .btn:hover{ background:#fff; }

@media (min-width:900px){
  .booking-bar{
    bottom:24px; left:auto; right:24px;
    width:320px; border-radius:6px;
    padding:18px 20px; flex-direction:column; align-items:stretch; gap:14px;
    box-shadow: 0 24px 60px rgba(10,31,58,0.25);
  }
  .booking-bar .btn{ width:100%; }
}

/* ─── Footer — elegant editorial ─────────────────────────── */
.footer{
  background:var(--ink); color:var(--cream);
  padding:96px 0 36px;
}
.footer .container{ max-width:1280px; }

/* Top row: brand (left) + 3 nav columns (right) */
.footer__top{
  display:grid; grid-template-columns: 1.15fr 3fr;
  gap:80px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(229,223,212,0.10);
}
.footer__logo{
  height:30px; width:auto; display:block;
  color:var(--cream); margin-bottom:22px;
}
.footer__tagline{
  max-width:38ch; font-size:13px; line-height:1.6;
  color:rgba(243,239,233,0.64); margin:0;
}
.footer__tagline em{ font-style:italic; color:rgba(243,239,233,0.88); }

.footer__nav-cols{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:40px;
}
.footer h4{
  font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:#9AA7BF; margin:0 0 16px;
  font-weight:500;
}
.footer a{
  display:block; font-size:13px; color:var(--cream);
  padding:4px 0;
  opacity:0.68; transition:opacity .2s var(--ease);
}
.footer a:hover{ opacity:1; }

/* Address strip: 3 equal columns, full width, hairline dividers between */
.footer__locs{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:0;
  padding:40px 0;
  border-bottom:1px solid rgba(229,223,212,0.10);
}
.footer__loc{
  display:flex !important; flex-direction:column; gap:8px;
  padding:4px 32px;
  border-left:1px solid rgba(229,223,212,0.10);
  text-decoration:none; opacity:1;
  position:relative; transition:background .25s var(--ease);
}
.footer__loc:first-child{ border-left:0; padding-left:0; }
.footer__loc:hover{ opacity:1; }
.footer__loc:hover .footer__loc-city{ letter-spacing:0; }

.footer__loc-head{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:4px;
}
.footer__loc-num{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color:#9AA7BF;
}
.footer__loc-city{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:22px; letter-spacing:-0.015em; line-height:1;
  color:var(--cream);
  transition:letter-spacing .3s var(--ease);
}
.footer__loc-addr{
  font-size:12px; line-height:1.55;
  color:rgba(243,239,233,0.80);
  padding:0 !important;
}
.footer__loc-addr--muted{ color:rgba(243,239,233,0.50); }
.footer__loc-hrs{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:#9AA7BF;
  margin-top:6px;
}

.footer__foot{
  padding-top:24px;
  display:flex; justify-content:space-between; gap:16px;
  font-size:11px; color:rgba(243,239,233,0.48);
  flex-wrap:wrap;
  letter-spacing:0.02em;
}
.footer__foot-meta{
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase;
}

/* Responsive */
@media (max-width:900px){
  .footer{ padding:64px 0 28px; }
  .footer__top{ grid-template-columns:1fr; gap:40px; padding-bottom:40px; }
  .footer__nav-cols{ grid-template-columns:repeat(3, 1fr); gap:24px; }
  .footer__locs{ grid-template-columns:1fr; padding:24px 0; }
  .footer__loc{
    padding:20px 0; border-left:0;
    border-top:1px solid rgba(229,223,212,0.10);
  }
  .footer__loc:first-child{ border-top:0; padding-top:4px; }
}
@media (max-width:520px){
  .footer__nav-cols{ grid-template-columns:1fr; gap:28px; }
  .footer__foot{ flex-direction:column; gap:8px; }
}

/* ─── Image placeholders (hand-drawn editorial stand-ins) ────
   Pattern-URL: geschwungene SVG-Striche statt gerader Linien
   (wirkt wie Graphit-Schraffur, nicht wie Druckraster). */
.edit-ph{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,31,58,0.02) 0%, rgba(10,31,58,0.08) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><path d='M-4 30 Q 3 22 9 15 T 22 2 M-2 32 Q 5 24 11 17 T 24 4' stroke='%23C4B8A2' stroke-width='1' stroke-linecap='round' fill='none' opacity='0.85'/></svg>"),
    #EDE6D6;
  background-size: auto, 26px 26px, auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:16px;
}
/* Fotos: kein Rahmen, keine Pattern-Background, kein Glow —
   das Bild füllt 100% aus, bleibt überschreibbar per Inline-Style. */
.edit-ph--photo{
  padding:0;
  background:none;
}
.edit-ph::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(60% 55% at 30% 35%, rgba(10,31,58,0.12) 0%, rgba(10,31,58,0) 70%);
  pointer-events:none;
}
.edit-ph--photo::after{ display:none; }
.edit-ph .cap{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft);
  background:rgba(243,239,233,0.88); padding:5px 8px; border-radius:2px;
  position:relative; z-index:1;
}
.edit-ph .cap b{ color:var(--ink); font-weight:600; }
.edit-ph--dark{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><path d='M-4 30 Q 3 22 9 15 T 22 2 M-2 32 Q 5 24 11 17 T 24 4' stroke='%23253759' stroke-width='1' stroke-linecap='round' fill='none' opacity='0.9'/></svg>"),
    #0f2340;
  background-size: auto, 26px 26px, auto;
}
.edit-ph--dark::after{
  background: radial-gradient(60% 55% at 25% 35%, rgba(243,239,233,0.14) 0%, rgba(0,0,0,0) 70%);
}
.edit-ph--dark .cap{ background:rgba(10,31,58,0.72); color:#C7CEDB;}
.edit-ph--dark .cap b{ color:#fff; }

/* ─── Underline-on-word gesture for headlines ────────────── */
.under{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.12em;
}

/* ─── Hover reveal rows ──────────────────────────────────── */
.row-reveal{
  display:grid; grid-template-columns: 60px 2.4fr 1.5fr 1fr 120px;
  gap:24px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--line);
  transition: padding .3s var(--ease), background .3s var(--ease);
  cursor:pointer; position:relative;
}
.row-reveal:hover{ padding-left:12px; background:var(--cream-2); }
.row-reveal .num{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.row-reveal .name{ font-size:21px; letter-spacing:-0.01em; font-weight:400; }
.row-reveal .tag{ font-size:13px; color:var(--ink-soft); }
.row-reveal .price{ font-family:var(--mono); font-size:13px; color:var(--ink);}
.row-reveal .go{ text-align:right; font-size:11px; font-family:var(--mono); letter-spacing:0.08em; color:var(--ink-soft);}
.row-reveal:hover .go{ color:var(--ink); }

@media (max-width:720px){
  .row-reveal{ grid-template-columns: 28px 1fr auto; gap:14px; padding:20px 0; }
  .row-reveal .tag, .row-reveal .go{ display:none; }
  .row-reveal .name{ font-size:16px; }
}

/* ─── Fade-in on scroll ──────────────────────────────────── */
.fade-in{ opacity:0; transform:translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fade-in.visible{ opacity:1; transform:none; }

/* ─── Utility ─────────────────────────────────────────────── */
.stack-8{ display:flex; flex-direction:column; gap:8px; }
.stack-16{ display:flex; flex-direction:column; gap:16px; }
.stack-24{ display:flex; flex-direction:column; gap:24px; }
.row{ display:flex; align-items:center; gap:12px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.bottom-pad{ padding-bottom:96px; }

/* scrollbars */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }

/* Footer 3-location address grid: stack on mobile */
@media (max-width: 900px){
  .footer-addrs{ grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 520px){
  .footer-addrs{ grid-template-columns: 1fr !important; }
}

/* ═══ Feature Blocks — Gradient-BG accent elements ═══════════
   Wiederverwendbare Störer mit 8px-Radius, die einen der 6 Gradient-
   Backgrounds zeigen. Variants: wide / split / square / tall. */

.fb{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;
  color:var(--ink);
  margin:0;
}
.fb__bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.015);
}
.fb__scrim{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
}
.fb__inner{
  position:relative; z-index:2;
  padding:44px 32px;
}
@media (min-width:760px){ .fb__inner{ padding:64px 48px; } }
@media (min-width:1100px){ .fb__inner{ padding:80px 72px; } }

/* ── Typography inside FB ── */
.fb__eyebrow{
  display:inline-block;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  margin-bottom:16px;
  color:rgba(10,31,58,0.7);
}
.fb__title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(32px, 4.5vw, 56px);
  line-height:0.98; letter-spacing:-0.025em;
  margin:0 0 18px;
  color:var(--ink);
  max-width:22ch;
}
.fb__title em{ font-style:italic; }
.fb__lede{
  font-size:16px; line-height:1.55;
  max-width:54ch;
  margin:0;
  color:var(--ink-2);
}
.fb__bullets{
  list-style:none; padding:0; margin:26px 0 0;
  display:grid; gap:12px;
}
.fb__bullets li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:14.5px; line-height:1.55;
  color:var(--ink-2);
  font-weight:500;
}
.fb__bullets li svg{
  width:18px; height:18px; flex-shrink:0; margin-top:2px;
  color:var(--ink);
  stroke-width:1.8;
}
.fb__cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:28px;
  padding:14px 22px;
  background:var(--ink); color:var(--cream);
  border-radius:6px;
  font-size:13px; font-weight:500; letter-spacing:0.01em;
  text-decoration:none;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.fb__cta:hover{ background:#132a4d; transform:translateY(-1px); }
.fb__cta svg{ width:14px; height:14px; transition:transform .25s ease; }
.fb__cta:hover svg{ transform:translateX(3px); }

/* ── Default scrim: subtle cream wash for text-legibility over
   pastel gradients. Für kräftigere Gradients (wie 01) optional
   per .fb--scrim-strong erhöhen. */
.fb__scrim{
  background:linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.45) 100%);
}
.fb--scrim-strong .fb__scrim{
  background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.65) 100%);
}
.fb--scrim-none .fb__scrim{ display:none; }

/* ── Light-text variante (über dunklen Gradient-Bereichen) ── */
.fb--light{ color:var(--cream); }
.fb--light .fb__eyebrow{ color:rgba(255,255,255,0.82); }
.fb--light .fb__title,
.fb--light .fb__lede,
.fb--light .fb__bullets li{ color:var(--cream); }
.fb--light .fb__bullets li svg{ color:var(--cream); }
.fb--light .fb__scrim{
  background:linear-gradient(180deg, rgba(10,31,58,0.15) 0%, rgba(10,31,58,0.5) 100%);
}
.fb--light .fb__cta{ background:var(--cream); color:var(--ink); }
.fb--light .fb__cta:hover{ background:#fff; }

/* ── Variants ── */
/* Wide banner — full width horizontal section */
.fb--wide{ min-height:240px; display:grid; align-items:center; }
@media (min-width:760px){ .fb--wide{ min-height:320px; } }

/* Split — 2-col (image + content) */
.fb--split{
  display:grid; grid-template-columns:1fr;
  min-height:auto;
}
.fb--split .fb__media{
  background-size:cover; background-position:center;
  min-height:280px;
  position:relative; z-index:2;
}
.fb--split .fb__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  min-height:280px;
}
.fb--split .fb__inner{ align-self:center; }
@media (min-width:900px){
  .fb--split{ grid-template-columns:1fr 1fr; min-height:480px; }
  .fb--split .fb__media,
  .fb--split .fb__media img{ min-height:480px; }
}

/* Square card (grid friendly) */
.fb--square{ display:grid; align-items:end; }
.fb--square .fb__inner{ padding:32px 28px; }
@media (min-width:760px){ .fb--square{ aspect-ratio:1/1; } .fb--square .fb__inner{ padding:40px 36px; } }

/* Tall portrait card */
.fb--tall{ aspect-ratio:4/5; display:grid; align-items:end; }
.fb--tall .fb__inner{ padding:36px 32px; }

/* Row utility: place multiple squares/talls side-by-side */
.fb-row{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:760px){ .fb-row--2{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .fb-row--3{ grid-template-columns:repeat(3,1fr); } }

/* Soft entrance on scroll (reuses fade-in pattern) */
.fb.fade-in{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.fb.fade-in.visible{ opacity:1; transform:none; }