/* ===================================================================
   Design tokens & shared styles
   Palette pulls the brand pink from the existing booking form
   (#e60076 / #ff4da0) and the rainbow dots from the logo, used as
   small confetti accents rather than big competing blocks.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&family=Baloo+2:wght@500;600;700&family=Nunito:wght@400;600;700&family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@500;600;700&family=Sora:wght@500;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root{
  /* Color */
  --bg:            #fffdf9;
  --bg-panel:      #fff8fc;
  --ink:           #20293a;
  --ink-soft:      #5b6472;
  --pink:          #e60076;
  --pink-2:        #ff4da0;
  --pink-wash:     #ffeaf5;
  --sun:           #ffb627;
  --sky:           #2fa8e0;
  --grass:         #22b573;
  --violet:        #8b5cf6;
  --line:          #f4c6de;
  --paper:         #ffffff;

  /* Type */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 10px 30px -12px rgba(32,41,58,.18);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--ink);
}

h1{ font-size:clamp(2.2rem, 4.4vw, 3.4rem); font-weight:700; }
h2{ font-size:clamp(1.7rem, 3vw, 2.35rem); }
h3{ font-size:1.3rem; }

p{ margin:0 0 1em; color:var(--ink-soft); max-width:62ch; }

a{ color:var(--pink); text-decoration:none; }
a:hover{ text-decoration:underline; }

.text-em{ font-weight:700; font-size:1.15em; color:var(--ink); }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

section{ padding:74px 0; }

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  padding:14px 28px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ text-decoration:none; }
.btn-primary{
  background:linear-gradient(90deg,var(--pink),var(--pink-2));
  color:#fff;
  box-shadow:0 10px 22px -8px rgba(230,0,118,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -8px rgba(230,0,118,.6); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:2px solid var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-light{
  background:#fff;
  color:var(--pink);
  border:2px solid var(--pink-wash);
}
.btn-light:hover{ background:var(--pink-wash); transform:translateY(-2px); }

/* -------------------- Trustpilot banner (optional, top of page) -------------------- */
.trustpilot-banner{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#20293a; color:#fff;
  padding:9px 16px;
  font-size:.85rem; font-weight:600;
  text-decoration:none;
  text-align:center;
}
.trustpilot-banner:hover{ background:var(--pink); }
.trustpilot-banner-image{ background:var(--bg); padding:6px 16px; }
.trustpilot-banner-image:hover{ background:var(--bg-panel); }
.events-banner{
  display:block;
  background:var(--pink); color:#fff;
  padding:11px 16px;
  font-size:.9rem; font-weight:700;
  text-decoration:none;
  text-align:center;
}
.events-banner:hover{ background:var(--pink-2,#c2185b); filter:brightness(1.08); }
.trustpilot-banner-image img{ max-height:28px; width:auto; display:block; }
.trustpilot-stars{ color:#ffb627; letter-spacing:1px; font-size:.9rem; }

/* -------------------- Navigation -------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,249,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  row-gap:10px;
  padding:16px 24px 12px;
  max-width:var(--maxw);
  margin:0 auto;
  position:relative;
}
.nav-brand{
  order:1;
  flex:0 0 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.nav-brand img{
  height:72px;
  width:auto;
  max-width:320px;
  object-fit:contain;
  flex-shrink:0;
}
.nav-brand-text{ display:flex; flex-direction:column; gap:2px; line-height:1.25; text-align:center; align-items:center; }
.nav-brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); }
.nav-brand-slogan{ font-weight:400; font-size:.76rem; color:var(--ink-soft); max-width:360px; text-align:center; }
.nav-links{
  order:2;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:30px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  color:var(--ink);
  font-weight:500;
  font-size:.98rem;
  position:relative;
  padding-bottom:4px;
}
.nav-links a:hover{ text-decoration:none; color:var(--pink); }
.nav-links a.active{ color:var(--pink); }
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:4px; border-radius:3px;
  background-color:var(--pink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6'%3E%3Cpath d='M0 4 Q 10 0 20 4 T 40 4' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6'%3E%3Cpath d='M0 4 Q 10 0 20 4 T 40 4' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
}
.nav-cta{ order:3; position:absolute; right:24px; top:20px; display:flex; align-items:center; gap:18px; }
.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  width:40px; height:40px;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2.5px; background:var(--ink);
  border-radius:2px; position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

/* -------------------- Confetti dots (brand motif) -------------------- */
.confetti{ position:relative; }
.confetti .dot-pink, .confetti .dot-sun, .confetti .dot-sky, .confetti .dot-grass, .confetti .dot-violet{
  position:absolute;
  border-radius:50%;
  opacity:.9;
}
.dot-pink{ background:var(--pink-2); }
.dot-sun{ background:var(--sun); }
.dot-sky{ background:var(--sky); }
.dot-grass{ background:var(--grass); }
.dot-violet{ background:var(--violet); }

/* -------------------- Brush-stroke divider -------------------- */
.brush-divider{
  width:100%; max-width:calc(var(--maxw) - 48px); margin:0 auto;
  height:26px;
  background-color:var(--line);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26'%3E%3Cpath d='M0 18 Q 17 4 35 18 T 70 18 T 105 18 T 140 18' stroke='%23000' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26'%3E%3Cpath d='M0 18 Q 17 4 35 18 T 70 18 T 105 18 T 140 18' stroke='%23000' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  -webkit-mask-size:140px 26px;
  mask-size:140px 26px;
}

/* -------------------- Hero -------------------- */
.hero{
  padding:64px 0 40px;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero .container:not(:has(> .hero-figure)){
  grid-template-columns:1fr;
  max-width:720px;
}
.hero-eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--pink);
  background:var(--pink-wash);
  padding:6px 16px;
  border-radius:999px;
  font-size:.88rem;
  margin-bottom:18px;
}
.hero h1{ margin-bottom:.4em; }
.hero p.lead{ font-size:1.15rem; max-width:46ch; }
.hero-ctas{ display:flex; gap:16px; margin-top:26px; flex-wrap:wrap; }
.hero-figure{
  position:relative;
  justify-self:center;
}

/* -------------------- USP strip -------------------- */
.usp-strip{
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.usp-strip .container{
  display:flex;
  flex-wrap:wrap;
  gap:20px 40px;
  justify-content:space-between;
}
.usp-item{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.98rem;
  color:var(--ink);
}
.usp-item .ico{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem; flex:none;
}

/* -------------------- Section headers -------------------- */
.section-head{
  max-width:640px;
  margin:0 0 44px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* -------------------- Steps -------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.step-card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px 26px;
  position:relative;
}
.step-num{
  width:40px; height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink-2));
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}

/* -------------------- Gallery preview / grid -------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
  justify-items:stretch;
}
.polaroid{
  margin:0;
  background:#fff;
  border-radius:14px;
  padding:10px 10px 16px;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.polaroid.polaroid-framed{
  box-shadow:none;
}
.polaroid:hover{ transform:translateY(-6px); }
.polaroid .tile{
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-size:3rem;
  cursor:pointer;
  min-width:224px;
  width:100%;
  padding:20px 0;
}
.polaroid .tile.tile-placeholder{
  flex-direction:column;
  gap:6px;
  background:var(--bg-panel);
  border:2px dashed var(--line);
  cursor:default;
  padding:10px;
  min-height:220px;
}
.polaroid .tile.tile-framed{ background:transparent; }
.tile-placeholder-icon{ font-size:1.4rem; opacity:.6; }
.tile-placeholder-text{
  font-family:var(--font-display);
  font-size:.74rem;
  font-weight:500;
  line-height:1.3;
  color:var(--ink-soft);
  text-align:center;
}
.polaroid figcaption{
  font-family:var(--font-display);
  font-size:.92rem;
  text-align:center;
  padding-top:10px;
  color:var(--ink-soft);
  overflow-wrap:break-word;
  word-break:break-word;
  min-width:0;
}

/* -------------------- Testimonials -------------------- */
.testimonials{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:900px){
  .testimonials{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .testimonials{ grid-template-columns:1fr; }
}
.t-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px;
  min-width:0;
  box-sizing:border-box;
}
.t-card p{ overflow-wrap:break-word; word-break:break-word; }
.t-card .stars{ color:var(--sun); letter-spacing:2px; margin-bottom:10px; }
.t-card .who{ font-family:var(--font-display); font-weight:600; margin-top:14px; }

/* -------------------- CTA band -------------------- */
.cta-band{
  background:linear-gradient(120deg,var(--pink) 0%, var(--pink-2) 100%);
  border-radius:var(--radius-lg);
  padding:56px 48px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}
.cta-band h2{ color:#fff; margin-bottom:.2em; }
.cta-band p{ color:rgba(255,255,255,.9); margin-bottom:0; }
.cta-btn{ background:#fff; color:var(--pink); }

/* -------------------- Footer -------------------- */
.site-footer{
  background:var(--ink);
  color:#cfd5df;
  padding:56px 0 26px;
  margin-top:40px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:32px;
  padding-bottom:36px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ width:40px; height:40px; border-radius:50%; }
.footer-brand span{ font-family:var(--font-display); font-weight:700; color:#fff; }
.site-footer h4{ color:#fff; font-size:1rem; margin-bottom:14px; }
.site-footer a{ color:#cfd5df; }
.site-footer a:hover{ color:var(--pink-2); }
.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.88rem; color:#8b94a3;
}

/* -------------------- Page hero (interior pages) -------------------- */
.page-hero{
  padding:56px 0 40px;
  position:relative;
}
.page-hero .container{ max-width:900px; }
.page-hero p.lead{ font-size:1.08rem; }

/* -------------------- Panels (matches booking form language) -------------------- */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px;
}
.contact-highlight{ background:var(--pink-wash); border-color:var(--line); }
.contact-highlight-text{ margin:0; color:var(--ink); }

/* -------------------- Utility -------------------- */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.flex-center{ display:flex; align-items:center; justify-content:center; }

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width: 1140px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; }
  .steps{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .testimonials{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    padding:20px 24px 26px;
    gap:16px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-links.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-toggle{ display:flex; }
  .nav-cta{ position:static; order:3; width:100%; justify-content:center; margin-top:14px; }
  .nav-toggle{ position:absolute; top:16px; right:20px; z-index:2; }
  .nav-cta .btn-primary{ padding:10px 18px; font-size:.92rem; }
  section{ padding:52px 0; }
  .cta-band{ flex-direction:column; text-align:center; padding:40px 28px; }
  .footer-grid{ grid-template-columns:1fr; }
}

@media (max-width: 590px){
  .gallery-grid{ grid-template-columns:1fr 1fr; gap:14px; }
}

/* -------------------- Lightbox -------------------- */
.lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(32,41,58,.86);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:200;
  padding:24px;
}
.lightbox-overlay.show{ opacity:1; pointer-events:auto; }
.lightbox-inner{
  width:min(680px, 92vw, 92vh);
  aspect-ratio:1/1;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel);
}
/* The popup shows the photo much larger than the grid tile, and the
   surrounding box is sized to closely match the photo itself (not a
   big fixed box with lots of empty space around a smaller circle). */
.lightbox-inner .framed-photo{
  width:640px; height:640px;
  background-size:640px 640px;
}
.lightbox-inner .framed-photo .photo-clip{
  top:32px; left:32px; width:576px; height:576px;
}
.lightbox-inner .framed-photo.frame-solid .photo-clip{
  top:0; left:0; width:640px; height:640px;
}
@media (max-width:600px){
  .lightbox-inner{ width:min(360px, 92vw, 92vh); }
  .lightbox-inner .framed-photo{ width:320px; height:320px; background-size:320px 320px; }
  .lightbox-inner .framed-photo .photo-clip{ top:16px; left:16px; width:288px; height:288px; }
  .lightbox-inner .framed-photo.frame-solid .photo-clip{ top:0; left:0; width:320px; height:320px; }
}
/* -------------------- Contact block -------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-family:var(--font-display); font-weight:500; margin-bottom:6px; font-size:.95rem; }
.form-field input, .form-field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font:inherit; background:#fff; color:#20293a;
}
.form-field textarea{ min-height:190px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--pink-2); outline-offset:1px; }
.contact-info-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-info-item .ico{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* -------------------- Framed photo (rainbow ring, repositionable) -------------------- */
/* Fixed pixel sizing throughout, on purpose: every framed photo is the
   same set size no matter what dimensions the uploaded file is. Zoom
   only changes which part of the photo shows inside that fixed circle
   — it never changes the circle's own size.

   Plain hardcoded pixel values are used throughout (rather than CSS
   custom properties) — deliberately avoiding var()-based sizing here,
   since it did not reliably paint correctly on first load in some
   browsers.

   IMPORTANT: the ring graphic (picture-template.png) has its own inner
   margin before its transparent "hole" starts — the ring isn't a thin
   line sitting exactly at the box edge. photo-clip's size/position match
   that hole exactly (with a couple of px of safe overlap tucked under
   the ring), so no sliver of photo can ever show at the boundary. */
.framed-photo{
  position:relative;
  width:220px; height:220px;
  flex:none;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:220px 220px;
}
/* This wrapper is the STABLE clip boundary — it is never itself scaled
   or transformed, so its clip can never grow. Only the <img> inside it
   gets the zoom transform applied. */
.framed-photo .photo-clip{
  position:absolute;
  top:11px; left:11px;
  width:198px; height:198px;
  border-radius:50%;
  overflow:hidden;
}
.framed-photo .photo-clip img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.framed-photo .photo-clip video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.framed-photo.framed-photo-lg{ width:320px; height:320px; background-size:320px 320px; }
.framed-photo.framed-photo-lg .photo-clip{ top:16px; left:16px; width:288px; height:288px; }

@media (max-width:590px){
  .framed-photo{ width:128px; height:128px; background-size:128px 128px; }
  .framed-photo .photo-clip{ top:6.5px; left:6.5px; width:115px; height:115px; }

  .framed-photo.framed-photo-lg{ width:200px; height:200px; background-size:200px 200px; }
  .framed-photo.framed-photo-lg .photo-clip{ top:10px; left:10px; width:180px; height:180px; }

  .polaroid .tile{ min-width:144px; }
  .polaroid .tile.tile-placeholder{ min-height:128px; }
}
@media (max-width:410px){
  .framed-photo{ width:104px; height:104px; background-size:104px 104px; }
  .framed-photo .photo-clip{ top:5px; left:5px; width:94px; height:94px; }

  .framed-photo.framed-photo-lg{ width:160px; height:160px; background-size:160px 160px; }
  .framed-photo.framed-photo-lg .photo-clip{ top:8px; left:8px; width:144px; height:144px; }

  .polaroid .tile{ min-width:120px; }
  .polaroid .tile.tile-placeholder{ min-height:104px; }
}

/* ---- Shape: square (rounded corners, rather than a circle) ---- */
.framed-photo.shape-square .photo-clip{ border-radius:4px; }

/* ---- Frame style: solid colour instead of the rainbow ring image ----
   With no separate ring graphic to align to, the photo simply fills the
   whole box and the border is drawn directly on it — no offset needed. */
.framed-photo.frame-solid .photo-clip{
  top:0; left:0; width:220px; height:220px;
  border:7px solid var(--pink);
  box-sizing:border-box;
}
.framed-photo.frame-solid.framed-photo-lg .photo-clip{ width:320px; height:320px; }
@media (max-width:590px){
  .framed-photo.frame-solid .photo-clip{ width:128px; height:128px; }
  .framed-photo.frame-solid.framed-photo-lg .photo-clip{ width:200px; height:200px; }
}
@media (max-width:410px){
  .framed-photo.frame-solid .photo-clip{ width:104px; height:104px; }
  .framed-photo.frame-solid.framed-photo-lg .photo-clip{ width:160px; height:160px; }
}
.framed-photo.frame-solid .frame-overlay{ display:none; }

/* ---- Depth: 3D (raised, glossy) vs flat (default, no extra effect) ----
   Kept entirely INSIDE the circle on purpose (inset shadow + gloss
   highlight) rather than an outer drop-shadow — that way the 3D look
   can never spill out past the ring into the blank card area. */
.framed-photo.depth-3d .photo-clip{
  position:relative;
  box-shadow:
    inset 0 -8px 12px rgba(0,0,0,.28),
    inset 0 6px 10px rgba(255,255,255,.35);
}
.framed-photo.depth-3d .photo-clip::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.4), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* -------------------- Social icons (footer) -------------------- */
.social-icons{ display:flex; gap:10px; margin-top:14px; }
.social-icon{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem; font-weight:700;
  text-decoration:none; flex:none;
  transition:transform .15s ease;
  overflow:hidden;
}
.social-icon img{ width:100%; height:100%; object-fit:cover; }
.social-icon:hover{ transform:translateY(-2px); text-decoration:none; }

.lightbox-close{
  position:absolute; top:26px; right:32px;
  background:#fff; border:0; border-radius:50%;
  width:44px; height:44px; font-size:1.6rem; line-height:1;
  cursor:pointer; color:var(--ink);
}