/* Shared by every page: the footer and the buttons. One place, so they cannot drift. */
/* ---- Footer ---- */
.socials{ display:flex; justify-content:flex-start; gap:10px; flex-wrap:wrap; margin-top:20px; }
.social-badge{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:rgba(255,255,255,0.1); color:#fff; font-size:12px; font-weight:600;
  padding:9px 15px; border-radius:999px; transition:.15s;
}
.social-badge:hover{ background:var(--blue,#0047AB); }
.social-badge svg{ flex-shrink:0; }
/* Footer. The end label of the box: wordmark, where we are, the small print,
   a ticket barcode, and Dexign Studio's maker's mark. .dx-sign is the studio's
   signature on every site it builds, so it is self-contained and lifts out whole. */
.foot-top{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; padding-top:8px; }
.foot-brand{ container-type:inline-size; }
.foot-word{ display:block; font-family:'Bungee',sans-serif; font-size:clamp(30px,13cqi,92px); white-space:nowrap; line-height:0.95; letter-spacing:0.5px; color:#fff; }
.foot-line{ margin:10px 0 0; font-size:13px; line-height:1.6; color:rgba(255,255,255,0.86); max-width:34ch; }
.foot-barcode{ height:30px; margin:30px 0 18px; opacity:0.22;
  background-image:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 9px,#fff 9px 11px,transparent 11px 14px); }
.foot-base{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; padding-bottom:64px; }
@media (min-width:760px){ .foot-base{ padding-bottom:6px; } }
.footer-note{ margin:0; font-size:11px; line-height:1.7; color:rgba(255,255,255,0.86); }
.dx-sign{ margin:0; display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border:1px dashed rgba(255,255,255,0.5); border-radius:8px; color:#fff; line-height:1; }
.dx-sign::before{ content:""; width:9px; height:9px; background:#fff; transform:rotate(45deg); flex:none; }
/* Border Beam, ported from Magic UI (border-beam.tsx) to plain CSS: a masked
   ring that shows only the border, with a gradient travelling it on offset-path. */
.dx-sign{ position:relative; }
.dx-beam{ position:absolute; inset:0; border-radius:inherit; border:1px solid transparent; pointer-events:none;
  -webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#000,#000); -webkit-mask-clip:padding-box,border-box; -webkit-mask-composite:destination-in;
  mask:linear-gradient(transparent,transparent),linear-gradient(#000,#000); mask-clip:padding-box,border-box; mask-composite:intersect; }
.dx-beam::before{ content:""; position:absolute; aspect-ratio:1; width:50px; offset-path:rect(0 auto auto 0 round 50px);
  background:linear-gradient(to left,#fff,#8fc0ff,transparent); animation:dxBeam 6s linear infinite; }
@keyframes dxBeam{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
@media (prefers-reduced-motion:reduce){ .dx-beam{ display:none; } }
.dx-by{ font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.8); }
.dx-name{ font-size:11px; font-weight:800; letter-spacing:0.24em; white-space:nowrap; }

.policy-link-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px; align-content:start; }
.policy-link{ color:#fff; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; padding:8px 0; width:max-content; max-width:100%;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size .3s cubic-bezier(.22,1,.36,1); }
.policy-link:hover, .policy-link:focus-visible{ background-size:100% 1.5px; }
.policy-link:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:2px; }
@media (min-width:760px){
  .foot-top{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; gap:40px; }
  .foot-base{ flex-wrap:nowrap; }
}
@media (max-width:420px){ .policy-link-row{ grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce){ .policy-link{ transition:none; } }

.site-foot{ text-align:left; font-size:inherit; line-height:inherit; }
.site-foot a{ font-weight:inherit; }

/* ---- Buttons. Ported from Magic UI to plain CSS, no framework.
   Primary = Shimmer Button: a light sweeps the perimeter (a conic gradient whose
   angle is animated, masked to a 2px ring by the inset face).
   Secondary = Interactive Hover Button: a dot at the left grows to fill. ---- */
@property --km-a{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes kmSpin{ to{ --km-a:360deg; } }

.primary, .info-cta:not(.info-cta-ghost), .btn-book{
  --shim-bg:var(--brand,#065BC6); --shim-spark:#fff;
  position:relative; isolation:isolate; overflow:hidden; background:var(--shim-bg);
  transition:transform .15s, background .2s;
}
.btn-book{ --shim-bg:#fff; --shim-spark:var(--brand,#065BC6); }
.primary:hover, .info-cta:not(.info-cta-ghost):hover{ --shim-bg:var(--brand-hover,#1858A7); }
.btn-book:hover{ --shim-bg:#EAF2FF; }
.primary::before, .info-cta:not(.info-cta-ghost)::before, .btn-book::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:conic-gradient(from var(--km-a), transparent 0 68%, var(--shim-spark) 100%);
  animation:kmSpin 3s linear infinite;
}
.primary::after, .info-cta:not(.info-cta-ghost)::after, .btn-book::after{
  content:""; position:absolute; inset:2px; z-index:-1; pointer-events:none; border-radius:inherit;
  background:var(--shim-bg); box-shadow:inset 0 -8px 10px rgba(255,255,255,0.14);
  transition:box-shadow .3s, background .2s;
}
.primary:hover::after, .info-cta:not(.info-cta-ghost):hover::after{ box-shadow:inset 0 -6px 10px rgba(255,255,255,0.26); }
.primary:active::after, .info-cta:not(.info-cta-ghost):active::after{ box-shadow:inset 0 -10px 10px rgba(255,255,255,0.26); }
.primary:disabled::before{ animation:none; opacity:0; }

.ghost, .info-cta-ghost{
  --fill:var(--brand,#065BC6); --fill-text:#fff;
  position:relative; isolation:isolate; overflow:hidden;
  transition:color .35s cubic-bezier(.22,1,.36,1), border-color .35s;
}
.info-cta-ghost{ --fill:#fff; --fill-text:var(--brand,#065BC6); }
.ghost::before, .info-cta-ghost::before{
  content:""; position:absolute; left:14px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%;
  background:var(--fill); z-index:-1; pointer-events:none; transform:scale(0);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .ghost:hover:not(:disabled), .info-cta-ghost:hover{ color:var(--fill-text); border-color:var(--fill); }
  .ghost:hover:not(:disabled)::before, .info-cta-ghost:hover::before{ transform:scale(90); }
}
.primary:focus-visible, .ghost:focus-visible, .info-cta:focus-visible, .btn-book:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .primary::before, .info-cta::before, .btn-book::before{ animation:none; opacity:0; }
  .ghost::before, .info-cta-ghost::before, .ghost, .info-cta-ghost{ transition:none; }
}

/* ---- More Magic UI ports. ---- */
/* Glare Hover: a diagonal sheen crosses the service cards. */
.svc-link, .svc-card{ position:relative; overflow:hidden; }
.svc-link::before, .svc-card::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:linear-gradient(-45deg, transparent 60%, rgba(255,255,255,0.32) 70%, transparent 100%);
  background-size:250% 250%; background-repeat:no-repeat; background-position:-100% -100%;
  transition:background-position .65s ease-in-out;
}
@media (hover:hover){ .svc-link:hover::before, .svc-card:hover::before{ background-position:100% 100%; } }

/* Shine Border: a light drifts round the promo banner and the welcome offer. */
.promo-banner, .welcome-card{ position:relative; }
.promo-banner::after, .welcome-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background-image:radial-gradient(transparent, transparent, #7EC6FF, #fff, transparent, transparent);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude;
  animation:kmShine 10s linear infinite;
}
.welcome-card::after{ background-image:radial-gradient(transparent, transparent, #065BC6, #7EC6FF, transparent, transparent); }
@keyframes kmShine{ 0%,100%{ background-position:0% 0%; } 50%{ background-position:100% 100%; } }

/* Animated List: the "How it works" steps arrive one by one (magic.js adds the classes). */
.km-seq .step{ opacity:0; transform:translateY(14px) scale(0.96); }
.km-seq.in .step{ animation:kmPop .55s cubic-bezier(.22,1,.36,1) forwards; }
.km-seq.in .step:nth-child(2){ animation-delay:.2s; }
.km-seq.in .step:nth-child(3){ animation-delay:.4s; }
.km-seq.in .step:nth-child(4){ animation-delay:.6s; }
@keyframes kmPop{ to{ opacity:1; transform:none; } }

/* Lens: the magnifier over the before and after photos. */
.km-lens{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; border-radius:10px;
  --x:50%; --y:50%;
  -webkit-mask-image:radial-gradient(circle 64px at var(--x) var(--y), #000 99%, transparent 100%);
  mask-image:radial-gradient(circle 64px at var(--x) var(--y), #000 99%, transparent 100%); }
.km-lens img{ transform:scale(1.9); transform-origin:var(--x) var(--y); }

/* Scroll Progress: a reading bar on the blog posts, CSS only. */
@supports (animation-timeline:scroll()){
  .km-read::after{ content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:900; pointer-events:none;
    background:linear-gradient(90deg,#7EC6FF,#fff); transform-origin:0 50%; transform:scaleX(0);
    animation:kmProg linear both; animation-timeline:scroll(root); }
  @keyframes kmProg{ to{ transform:scaleX(1); } }
}
@media (prefers-reduced-motion:reduce){
  .promo-banner::after, .welcome-card::after{ animation:none; }
  .svc-link::before, .svc-card::before{ display:none; }
  .km-read::after{ display:none; }
}