/* Your Dream Event by 4A - deep emerald, antique gold, warm ivory */
:root{
  /* Owner-approved tokens: identical to the Lovable build's design system. */
  --emerald:#1d4034; --emerald-deep:#0f2820; --moss:#2f5a4a; --ink:#12241c;
  --ivory:#fbf7ee; --cream:#f2e8d6; --stone:#e7dcc6;
  --gold:#c2934f; --gold-soft:#ddc08c; --gold-deep:#8a6122;
  --muted:#5d6d63; --muted-light:rgba(251,247,238,.76);
  --line:rgba(29,64,52,.13); --line-light:rgba(251,247,238,.2);
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --script:"Allura","Snell Roundhand",cursive;
  --quote:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1360px; --ease:cubic-bezier(.22,.61,.36,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
/* grid/flex children must be allowed to shrink below intrinsic image width */
.split>*,.band-grid>*,.cta-grid>*,.disciplines>*,.cards>*,.occ>*{min-width:0}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);font-weight:400;line-height:1.08;
  letter-spacing:-.016em}
h1,h2,h3{font-weight:400}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
@media(min-width:768px){.wrap{padding:0 44px}}

/* ---- type helpers ---- */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  line-height:1.6;color:var(--gold-deep);display:block}
.dark .eyebrow,.hero .eyebrow,.page-hero .eyebrow,.band .eyebrow,.sec-emerald .eyebrow,
.foot .eyebrow,.cta-card .eyebrow{color:var(--gold-soft)}
.rule{display:inline-block;height:1px;width:34px;background:var(--gold);
  vertical-align:middle;margin-right:14px}
.hairline{height:1px;background:linear-gradient(to right,transparent,var(--gold) 18%,var(--gold) 82%,transparent)}
em{font-style:italic}
h1 em,h2 em,h3 em{color:var(--gold-deep)}
.dark h1 em,.dark h2 em,.hero h1 em,.page-hero h1 em,.band h2 em,
.sec-emerald h2 em,.cta-card h2 em{color:var(--gold-soft)}
.lede{font-size:1.14rem;color:var(--muted);max-width:40rem}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;
  border-radius:999px;padding:14px 32px;font-size:11.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;border:1px solid transparent;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#20160a}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{border-color:rgba(250,246,237,.4);color:var(--ivory)}
.btn-ghost:hover{background:var(--ivory);color:var(--emerald)}
.btn-emerald{background:var(--emerald);color:var(--ivory)}
.btn-emerald:hover{background:var(--moss)}
.arrow{width:13px;height:13px;flex:none;display:inline-block;vertical-align:-1px;
  transition:transform .35s var(--ease)}
.go .arrow{width:11px;height:11px;margin-left:2px}
.mobile-nav .arrow{width:16px;height:16px}
.btn:hover .arrow,.tlink:hover .arrow,.crow:hover .arrow{transform:translate(3px,-3px)}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:11.5px;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--emerald);
  border-bottom:1px solid var(--gold);transition:color .3s,border-color .3s}
.tlink:hover{color:var(--gold-deep)}
.tlink-light{color:var(--ivory);border-color:var(--gold-soft)}
.tlink-light:hover{color:var(--gold-soft)}

/* ---- header ---- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(12,31,24,.88);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(250,246,237,.1);transition:background .4s var(--ease)}
.site-head.stuck{background:rgba(12,31,24,.94)}
.nav{max-width:var(--wrap);margin:0 auto;padding:0 22px;height:68px;display:flex;align-items:center;gap:14px}
@media(min-width:768px){.nav{padding:0 44px;height:84px;gap:22px}}
.brand{display:flex;align-items:baseline;gap:11px;min-width:0}
.brand b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--ivory);
  line-height:1;white-space:nowrap}
.brand .eyebrow{color:var(--gold-soft);display:none}
@media(min-width:560px){.brand .eyebrow{display:inline}}
@media(min-width:768px){.brand b{font-size:25px}}
.nav-links{display:none;margin:0 auto;padding:0;list-style:none;gap:32px;font-size:14px;
  color:var(--ivory)}
@media(min-width:1080px){.nav-links{display:flex}}
.nav-links a{position:relative;padding:6px 0;transition:color .25s}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .35s var(--ease)}
.nav-links a:hover:after,.nav-links a[aria-current=page]:after{right:0}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--gold-soft)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:8px;
  border-radius:999px;border:1px solid rgba(196,154,78,.65);background:rgba(196,154,78,.14);
  padding:10px 18px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory);white-space:nowrap;transition:background .3s,color .3s}
.nav-cta:hover{background:var(--gold);color:#20160a}
@media(max-width:1079px){.nav-cta{display:none}}
.mobile-nav a.mnav-cta{color:var(--gold-soft)}
.mobile-nav a.mnav-cta:hover{color:var(--gold)}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;background:none;
  border:0;width:46px;height:46px;padding:0;cursor:pointer;flex:none}
@media(min-width:1080px){.burger{display:none}}
.burger i{display:block;width:23px;height:1.5px;background:var(--ivory);transition:transform .3s,opacity .3s}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-nav{display:none;border-top:1px solid rgba(250,246,237,.1);background:rgba(12,31,24,.99)}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none;margin:0 auto;padding:12px 22px 30px;max-width:var(--wrap)}
.mobile-nav a{display:flex;justify-content:space-between;align-items:center;min-height:56px;
  padding:12px 0;font-family:var(--display);font-size:27px;color:var(--ivory);
  border-bottom:1px solid rgba(250,246,237,.1)}
.mobile-nav a:hover{color:var(--gold-soft)}

/* ---- hero (home) ---- */
.hero{position:relative;min-height:100svh;display:flex;background:var(--emerald-deep);
  color:var(--ivory);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(168deg,rgba(12,31,24,.82),rgba(12,31,24,.5) 46%,rgba(12,31,24,.93))}
.hero:before{content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background:
    radial-gradient(120% 80% at 78% 8%,rgba(196,154,78,.34),transparent 58%),
    radial-gradient(90% 70% at 8% 92%,rgba(43,83,68,.85),transparent 62%),
    linear-gradient(158deg,#173a2e 0%,#0c1f18 62%,#0a1a14 100%)}
.hero:after{content:"";position:absolute;inset:0;z-index:1;background-image:var(--grain);
  opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.hero-arcs{position:absolute;z-index:1;right:-16%;top:-8%;width:78vmax;height:78vmax;
  border-radius:50%;border:1px solid rgba(230,205,151,.16);pointer-events:none}
.hero-arcs:before,.hero-arcs:after{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(230,205,151,.13)}
.hero-arcs:before{inset:11%}
.hero-arcs:after{inset:24%;border-color:rgba(230,205,151,.09)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:136px 22px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:52px}
@media(min-width:768px){.hero-inner{padding:180px 44px 62px}}
.hero h1{margin:24px 0 0;font-size:clamp(3rem,8.4vw,7.6rem);line-height:.94;
  letter-spacing:-.032em;max-width:15ch;text-wrap:balance}
.hero-sub{margin-top:28px;max-width:35rem;font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--muted-light)}
.hero-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-stats{padding-top:30px;border-top:1px solid var(--line-light);
  display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(min-width:768px){.hero-stats{display:flex;justify-content:space-between;gap:44px}}
.hero-stats .v{font-family:var(--display);font-size:clamp(1.8rem,2.7vw,2.5rem);line-height:1;
  color:var(--gold-soft)}
.hero-stats .k{margin-top:9px;color:rgba(250,246,237,.6)}
.h-line{display:block;height:1px;width:0;background:var(--gold);margin-bottom:6px;
  animation:grow 1.5s var(--ease) .3s forwards}
@keyframes grow{to{width:92px}}
.fade{opacity:0;transform:translateY(20px);animation:rise .95s var(--ease) forwards}
.fade-1{animation-delay:.12s}.fade-2{animation-delay:.26s}.fade-3{animation-delay:.4s}
.fade-4{animation-delay:.54s}.fade-5{animation-delay:.68s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---- page hero (inner) ---- */
.page-hero{position:relative;background:var(--emerald-deep);color:var(--ivory);overflow:hidden}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.page-hero .veil{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(12,31,24,.74) 0%,rgba(12,31,24,.40) 52%,rgba(12,31,24,.14) 78%),
    linear-gradient(172deg,rgba(12,31,24,.72),rgba(12,31,24,.50) 50%,rgba(12,31,24,.92))}
.page-hero .veil:before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 85% at 50% 40%,transparent 45%,rgba(8,20,15,.36) 100%)}
.page-hero .veil:after{content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.05;mix-blend-mode:overlay}
.page-hero-inner{position:relative;z-index:2;padding-block:146px 80px}
@media(min-width:768px){.page-hero-inner{padding-block:196px 108px}}
.page-hero h1{margin-top:0;font-size:clamp(2.7rem,6vw,5.2rem);max-width:19ch;
  letter-spacing:-.028em;text-wrap:balance}
/* The service-and-place label sits inside the H1 so search engines read
   "Wedding decoration in Cyprus" as part of the heading, but it keeps the
   small eyebrow look above the slogan. */
.page-hero h1 .kicker{font-family:var(--sans);font-style:normal;margin-bottom:22px;max-width:none;
  display:flex;align-items:center}
.page-hero h1 .kicker .rule{flex:none}
.page-hero p{margin-top:26px;max-width:46rem;color:var(--muted-light);font-size:1.09rem}

/* ---- sections ---- */
.sec{padding:88px 0}
@media(min-width:768px){.sec{padding:132px 0}}
.sec-cream{background:var(--cream);border-top:1px solid rgba(29,64,52,.09);
  border-bottom:1px solid rgba(29,64,52,.09)}
.sec-emerald{background:var(--emerald);color:var(--ivory);position:relative;overflow:hidden}
.sec-emerald:before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 88% 6%,rgba(196,154,78,.2),transparent 60%)}
.sec-emerald>*{position:relative;z-index:2}
.sec-emerald p,.sec-emerald .lede{color:var(--muted-light)}
.sec-head{max-width:54rem}
.sec-head h2{margin-top:22px;font-size:clamp(2.2rem,4.6vw,4rem);text-wrap:balance;letter-spacing:-.026em}
.sec-head p{margin-top:24px;max-width:40rem;color:var(--muted);font-size:1.09rem}
.sec-emerald .sec-head p,.sec-emerald .sec-head .lede,.band .sec-head p,
.dark .sec-head p{color:var(--muted-light)}
.sec-emerald .sec-head h2{color:var(--ivory)}
.sec-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}

/* ---- occasion grid (home) ---- */
.occ{margin-top:56px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media(min-width:640px){.occ{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1020px){.occ{grid-template-columns:repeat(3,minmax(0,1fr))}}
.occ a{display:flex;flex-direction:column;gap:12px;background:var(--ivory);padding:34px 28px 32px;
  min-height:196px;transition:background .4s var(--ease),color .4s var(--ease)}
.occ a:hover{background:var(--emerald);color:var(--ivory)}
.occ .n{font-family:var(--display);font-style:italic;font-size:15px;color:var(--gold-deep);
  transition:color .4s}
.occ a:hover .n{color:var(--gold-soft)}
.occ h3{font-size:1.85rem;letter-spacing:-.018em}
.occ p{font-size:14.5px;color:var(--muted);flex:1;transition:color .4s}
.occ a:hover p{color:rgba(250,246,237,.78)}
.occ .go{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);transition:color .4s}
.occ a:hover .go{color:var(--gold-soft)}

/* ---- marquee ---- */
.marq{background:var(--emerald-deep);color:var(--gold-soft);padding:20px 0;overflow:hidden;
  border-block:1px solid rgba(230,205,151,.18)}
.marq-track{display:flex;gap:48px;width:max-content;animation:slide 26s linear infinite}
@media(min-width:900px){.marq-track{animation-duration:38s}}
@media(hover:hover){.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}}
.marq span{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,2vw,1.7rem);
  white-space:nowrap;opacity:.86}
.marq span:after{content:"\2022";margin-left:48px;color:var(--gold);opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- discipline / split / cards ---- */
.disciplines{margin-top:56px;display:grid;gap:28px}
@media(min-width:900px){.disciplines{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}}
.disc{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(255,255,255,.5)}
.disc-media{position:relative;aspect-ratio:5/6;overflow:hidden}
.disc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.disc:hover .disc-media img{transform:scale(1.05)}
.disc-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,31,24,.82),rgba(12,31,24,.06) 56%,transparent)}
.disc-index{position:absolute;top:26px;left:26px;z-index:2;display:flex;align-items:center;gap:8px;color:var(--ivory)}
.disc-index .num{font-family:var(--display);font-style:italic;font-size:21px;color:var(--gold-soft)}
.disc-index .eyebrow{color:var(--gold-soft)}
.disc-title{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;color:var(--ivory);
  font-size:clamp(2rem,3.4vw,3rem)}
.disc-body{padding:28px}
@media(min-width:768px){.disc-body{padding:40px}}
.disc-body>p{color:rgba(15,30,24,.82)}
.ticks{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:12px}
@media(min-width:560px){.ticks{grid-template-columns:1fr 1fr;gap:12px 26px}}
.ticks li{display:flex;gap:13px;font-size:15px;color:rgba(15,30,24,.8)}
.ticks li:before{content:"";flex:none;margin-top:11px;width:16px;height:1px;background:var(--gold)}
.disc-body .tlink{margin-top:28px}

.split{display:grid;gap:44px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:84px}}
.split img{width:100%;border-radius:4px;object-fit:cover;aspect-ratio:4/5}
.split.wide img{aspect-ratio:5/4}
.split h2{font-size:clamp(2.1rem,4vw,3.5rem);letter-spacing:-.024em}
.split .body{color:var(--muted)}
.sec-emerald .split .body{color:var(--muted-light)}
.split .body p+p{margin-top:18px}
.split .tlink{margin-top:30px}
.frame{position:relative}
.frame:before{content:"";position:absolute;inset:-14px -14px auto auto;width:52%;height:58%;
  border-top:1px solid var(--gold);border-right:1px solid var(--gold);border-radius:0 4px 0 0;
  pointer-events:none;opacity:.6}

.cards{margin-top:54px;display:grid;gap:24px}
@media(min-width:700px){.cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1100px){.cards.four{grid-template-columns:repeat(4,1fr)}
  .cards.three{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(255,255,255,.58);
  display:flex;flex-direction:column;transition:border-color .35s,transform .35s var(--ease)}
.card:hover{border-color:var(--gold);transform:translateY(-4px)}
.card .cmedia{overflow:hidden;display:block}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.3s var(--ease)}
.card:hover img{transform:scale(1.045)}
.card .cbody{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.75rem;margin-bottom:11px;letter-spacing:-.018em}
.card p{font-size:15px;color:var(--muted);flex:1}
.card .tlink{margin-top:20px;align-self:flex-start}
/* one link per card, stretched over the whole card */
.card .tlink:after{content:"";position:absolute;inset:0;border-radius:4px}
.card:focus-within{border-color:var(--gold)}

/* ---- packages ---- */
.packs{margin-top:54px;display:grid;gap:22px}
@media(min-width:700px){.packs{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{border:1px solid var(--line);border-radius:4px;padding:34px;background:rgba(255,255,255,.58);
  transition:border-color .35s,transform .35s var(--ease)}
.pack:hover{border-color:var(--gold);transform:translateY(-4px)}
.pack .n{font-family:var(--display);font-style:italic;color:var(--gold-deep);font-size:21px}
.pack h3{margin-top:12px;font-size:1.85rem;letter-spacing:-.018em}
.pack p{margin-top:13px;font-size:15px;color:var(--muted)}
.pack ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.pack li{display:flex;gap:13px;font-size:14.5px;color:rgba(15,30,24,.8)}
.pack li:before{content:"";flex:none;margin-top:10px;width:14px;height:1px;background:var(--gold)}
.pack-dark{background:var(--emerald);border-color:transparent;color:var(--ivory)}
.pack-dark .n{color:var(--gold-soft)}
.pack-dark h3{color:var(--ivory)}
.pack-dark p{color:var(--muted-light)}

/* ---- steps ---- */
.steps{margin-top:54px;display:grid;gap:36px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:46px}}
.steps.six{gap:34px}
@media(min-width:900px){.steps.six{grid-template-columns:repeat(3,1fr)}}
.step{border-top:1px solid var(--gold);padding-top:24px}
.step .n{font-family:var(--display);font-style:italic;color:var(--gold-deep);font-size:23px}
.sec-emerald .step .n{color:var(--gold-soft)}
.step h3{margin-top:11px;font-size:1.6rem;letter-spacing:-.016em}
.step p{margin-top:13px;color:var(--muted);font-size:15.5px}
.sec-emerald .step p{color:var(--muted-light)}

/* ---- origins (countries) ---- */
.origins{margin-top:54px;display:grid;gap:1px;background:var(--line-light);
  border:1px solid var(--line-light);border-radius:4px;overflow:hidden}
@media(min-width:700px){.origins{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.origins{grid-template-columns:repeat(3,1fr)}}
.origin{background:rgba(12,31,24,.55);padding:30px 28px}
.origin h3{font-size:1.5rem;color:var(--ivory);letter-spacing:-.014em}
.origin .meta{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-soft)}
.origin p{margin-top:14px;font-size:14.5px;color:var(--muted-light)}

/* ---- seasons ---- */
.seasons{margin-top:54px;display:grid;gap:20px}
@media(min-width:700px){.seasons{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.seasons{grid-template-columns:repeat(4,1fr)}}
.season{border:1px solid var(--line);border-radius:4px;padding:28px;background:rgba(255,255,255,.5)}
.season .mon{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.season h3{margin-top:12px;font-size:1.5rem}
.season p{margin-top:12px;font-size:14.5px;color:var(--muted)}

/* ---- portfolio ---- */
.grid-work{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:900px){.grid-work{grid-template-columns:repeat(4,1fr);gap:22px}
  .grid-work .tile:nth-child(even){margin-top:44px}}
.tile{position:relative;margin:0;border-radius:3px;overflow:hidden;background:rgba(20,52,42,.06);
  border:0;padding:0;cursor:pointer;display:block;width:100%;text-align:left;color:inherit}
.tile img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.5s var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{position:absolute;inset:auto 0 0 0;padding:18px 15px 15px;
  background:linear-gradient(to top,rgba(12,31,24,.93),transparent);color:rgba(250,246,237,.92);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.tile:hover figcaption,.tile:focus-visible figcaption{opacity:1;transform:none}
@media(hover:none){.tile figcaption{opacity:1;transform:none}}
.gallery{margin-top:50px;columns:2;column-gap:16px}
@media(min-width:900px){.gallery{columns:3;column-gap:22px}}
.gallery .tile{break-inside:avoid;margin-bottom:16px}
@media(min-width:900px){.gallery .tile{margin-bottom:22px}}
.gallery .tile img{aspect-ratio:auto}

/* ---- band ---- */
.band{position:relative;background:var(--emerald-deep);color:var(--ivory);overflow:hidden}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26}
.band .veil{position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(12,31,24,.95),rgba(12,31,24,.84));}
.band .veil:after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 88% 10%,rgba(196,154,78,.22),transparent 60%)}
.band-inner{position:relative;z-index:2;padding-block:88px}
@media(min-width:768px){.band-inner{padding-block:132px}}
.band-grid{display:grid;gap:46px}
@media(min-width:900px){.band-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:68px}}
.band h2{font-size:clamp(2.1rem,4.2vw,3.6rem);letter-spacing:-.024em}
.chips{margin-top:34px;display:flex;flex-wrap:wrap;gap:9px}
.chips span{border:1px solid var(--line-light);border-radius:999px;padding:8px 16px;font-size:10.5px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,246,237,.76)}
.points{list-style:none;margin:0;padding:0;display:grid;gap:38px}
@media(min-width:640px){.points{grid-template-columns:1fr 1fr;gap:42px 36px}}
.points .n{font-family:var(--display);font-style:italic;color:var(--gold-soft);font-size:24px}
.points h3{margin-top:14px;font-size:1.6rem;color:var(--ivory)}
.points p{margin-top:12px;font-size:15px;color:var(--muted-light)}

/* ---- credit ---- */
.credit{text-align:center}
.credit > *{max-width:54rem;margin-inline:auto}
.credit blockquote{margin:26px auto 0;font-family:var(--quote);font-style:italic;
  font-size:clamp(1.9rem,3.8vw,3.3rem);line-height:1.12;letter-spacing:-.01em;
  text-wrap:balance}

/* ---- greek block ---- */
.gr-block{position:relative;border:1px solid var(--line);border-radius:4px;
  background:rgba(255,255,255,.55);padding:34px 30px;max-width:56rem}
@media(min-width:768px){.gr-block{padding:44px 46px}}
.gr-block h2{font-size:clamp(1.9rem,3.2vw,2.7rem);letter-spacing:-.02em}
.gr-block h2:after{content:"";display:block;width:74px;height:1px;
  margin-top:22px;background:var(--gold)}
.gr-block p{margin-top:18px;color:var(--muted);font-size:1.02rem}
.gr-block ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
@media(min-width:640px){.gr-block ul{grid-template-columns:1fr 1fr}}
.gr-block li{display:flex;gap:12px;font-size:15px;color:rgba(15,30,24,.8)}
.gr-block li:before{content:"";flex:none;margin-top:11px;width:14px;height:1px;background:var(--gold)}

/* ---- faq ---- */
.faq{max-width:58rem;margin-top:46px}
details{border-bottom:1px solid var(--line);padding:8px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:26px;
  align-items:baseline;font-family:var(--display);font-size:clamp(1.32rem,2vw,1.68rem);
  min-height:52px;padding:14px 0;letter-spacing:-.014em}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--gold-deep);font-family:var(--sans);font-weight:400;font-size:24px;flex:none}
details[open] summary:after{content:"\2013"}
details p{margin:0 0 20px;color:var(--muted);max-width:70ch;font-size:16px}

/* ---- cta ---- */
.cta-card{position:relative;border-radius:6px;background:var(--emerald);color:var(--ivory);
  padding:46px 28px;overflow:hidden}
@media(min-width:768px){.cta-card{padding:80px 68px}}
.cta-card:after{content:"";position:absolute;top:-140px;right:-140px;width:420px;height:420px;
  border-radius:50%;background:rgba(196,154,78,.26);filter:blur(80px)}
.cta-grid{position:relative;z-index:2;display:grid;gap:42px;align-items:end}
@media(min-width:900px){.cta-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:68px}}
.cta-grid h2{font-size:clamp(2.1rem,4vw,3.5rem);text-wrap:balance;letter-spacing:-.024em;color:var(--ivory)}
.cta-grid p{margin-top:24px;max-width:33rem;color:var(--muted-light)}
.contact-rows{display:grid;gap:14px}
.crow{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:76px;
  border:1px solid var(--line-light);border-radius:4px;background:rgba(250,246,237,.07);
  padding:20px 26px;transition:background .35s,color .35s}
.crow:hover{background:var(--gold);color:#20160a}
.crow .k{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.crow:hover .k{color:rgba(32,22,10,.72)}
.crow .v{margin-top:7px;font-family:var(--display);font-size:1.4rem;word-break:break-word;line-height:1.2}
.crow-light{background:var(--cream);border-color:var(--line);color:var(--ink)}
.crow-light .k{color:var(--gold-deep)}

/* ---- form ---- */
.form{display:grid;gap:22px}
@media(min-width:700px){.form{grid-template-columns:1fr 1fr}}
.form{align-items:start}   /* a field with a hint must not stretch its neighbour */
.form label{display:grid;gap:9px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.form .full{grid-column:1/-1}
/* The label text and its marker live in one span, because the label itself is a
   grid and a bare <i> beside the text would become a row of its own. */
.form .lb{display:block}
.form .lb em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:.02em;
  font-size:12.5px;opacity:.72}
.form .rq{display:inline-block;width:5px;height:5px;margin-left:7px;border-radius:50%;
  background:var(--gold);vertical-align:middle}
.req-note{grid-column:1/-1;margin:0 0 2px;font-size:14px;line-height:1.65;
  color:var(--muted);max-width:62ch}
/* Dialling code beside the number. The code column is sized in ch so it holds
   the longest country name without the number field collapsing. */
.form .tel{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:10px}
@media(min-width:560px){.form .tel{grid-template-columns:minmax(0,24ch) minmax(0,1fr)}}
.form .tel select{text-overflow:ellipsis}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:3px;padding:14px 15px;width:100%;min-height:50px}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px rgba(196,154,78,.18)}
textarea{min-height:150px;resize:vertical}
.form small{color:var(--muted);font-size:13px;text-transform:none;letter-spacing:0;font-weight:400}

/* ---- footer ---- */
.foot{background:var(--emerald-deep);color:var(--ivory);padding:78px 0 36px;position:relative;overflow:hidden}
.foot:before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 92% 0%,rgba(196,154,78,.14),transparent 62%)}
.foot .wrap{position:relative;z-index:2}
.foot-grid{display:grid;gap:44px}
@media(min-width:900px){.foot-grid{grid-template-columns:4fr 3fr 2fr 3fr;gap:50px}}
.fbrand{font-family:var(--display);font-size:2.1rem;line-height:1.04}
.fbrand em{color:var(--gold-soft)}
.fnote{margin-top:13px;color:rgba(250,246,237,.55)}
.fabout{margin-top:24px;color:rgba(250,246,237,.72);max-width:32rem;font-size:15px}
.foot h3{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:rgba(250,246,237,.8);font-size:15px}
.foot a{transition:color .25s}
.foot a:hover{color:var(--gold-soft)}
.foot-base{margin-top:54px;padding-top:28px;border-top:1px solid rgba(250,246,237,.13);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:10.5px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,237,.62)}

/* ---- motion ---- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-motion .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Keep state-change feedback, remove travel and looping motion. */
  *,*:before,*:after{animation-iteration-count:1!important;
    animation-duration:.01ms!important;transition-duration:.12s!important}
  .reveal,.fade{opacity:1!important;transform:none!important}
  .h-line{width:92px;animation:none}
  .btn:hover,.card:hover,.pack:hover{transform:none}
  /* The marquee keeps its single-row shape and height; it simply stops moving
     and becomes swipeable by hand. Wrapping it turned a 60px strip into a
     full screen of text. */
  .marq{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .marq::-webkit-scrollbar{display:none}
  .marq-track{animation:none;width:max-content;flex-wrap:nowrap;padding-right:24px}
  .marq-track span:nth-child(n+13){display:none}
}

/* ---- lightbox ---- */
dialog#lb{border:0;padding:16px;background:var(--emerald-deep);max-width:94vw;max-height:95vh;
  border-radius:4px}
dialog#lb::backdrop{background:rgba(8,20,15,.95)}
dialog#lb img{max-width:88vw;max-height:76vh;width:auto;margin:0 auto}
dialog#lb .lbclose{display:block;margin:0 0 12px auto;min-height:44px;background:var(--ivory);
  color:var(--emerald);border:0;padding:10px 20px;font:inherit;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:3px}
dialog#lb figcaption{margin-top:14px;color:rgba(250,246,237,.78);font-size:13px;text-align:center}

/* ---- misc ---- */
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:14px 20px;z-index:99}
.skip:focus{left:12px;top:12px}
.note{margin-top:34px;font-size:14px;color:var(--muted);max-width:54rem}

/* ---------- brand mark ---------- */
.brand{gap:12px;min-height:44px;align-items:center}
.brandmark text{font-family:var(--display)}
/* The diamond's top point is a hairline, so the badge reads lower than its box:
   pull it up until its upper frame sits level with the column headings. */
.fbadge{width:200px;height:auto;aspect-ratio:480/483;display:block;margin:-30px 0 0 -2px}
/* Address: quiet, on the same left edge as the paragraph under it. */
.faddr{margin:22px 0 0;font-size:13.5px;line-height:1.6;color:var(--gold-soft)}
@media(min-width:900px){.fbadge{width:224px;margin-top:-44px}}

/* ---- cookie bar: full width along the bottom of the screen ---- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:var(--emerald-deep);color:var(--ivory);border-top:1px solid rgba(221,192,140,.32);
  box-shadow:0 -14px 34px -14px rgba(0,0,0,.45);font-size:14px;line-height:1.55;
  padding:14px 0 calc(14px + env(safe-area-inset-bottom))}
.ck[hidden]{display:none}
/* Same box as .wrap: the text starts on the footer's left edge and the buttons
   end on the same right edge as the header's Enquire button. */
.ck-in{max-width:var(--wrap);margin:0 auto;padding:0 22px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:12px 32px}
.ck p{margin:0;flex:1 1 300px;color:rgba(250,246,237,.86);font-size:13.5px}
.ck-btns{display:flex;gap:8px;flex:none}
/* While the bar is open, lift the WhatsApp button above it instead of hiding it. */
.ck-on .wa-float{bottom:calc(var(--ckh,0px) + 14px)}
/* Sized like the header's Enquire button, not like a page CTA. */
.ck button{font:inherit;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  min-height:38px;padding:0 18px;border-radius:999px;cursor:pointer;background:transparent;
  white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.ck button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.ck-no{color:var(--ivory);border:1px solid rgba(250,246,237,.42)}
.ck-yes{color:var(--ivory);border:1px solid rgba(196,154,78,.65);background:rgba(196,154,78,.14)}
@media(max-width:559px){.ck-btns{width:100%}.ck button{flex:1;min-height:42px}}
@media(min-width:768px){.ck-in{padding:0 44px}}
.ck button:hover{background:var(--gold-soft);color:#20160a;border-color:var(--gold-soft)}
.ck-open{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;cursor:pointer}
.ck-open:hover{color:var(--gold-soft)}
.ck p a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}
.foot-base a{color:inherit}
.foot-base a:hover{color:var(--gold-soft)}

/* ---- legal pages ---- */
.page-hero.plain .page-hero-inner{padding-block:150px 64px}
.legal{max-width:46rem;font-size:1.02rem;line-height:1.75;color:var(--ink)}
.legal h2{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.2;margin:48px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p,.legal ul{margin:0 0 16px}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:8px}
.legal a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:.95rem}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--stone)}
.legal th{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.legal .meta{color:var(--muted);font-size:.92rem}
@media(max-width:600px){.legal table,.legal tbody,.legal tr,.legal td{display:block}
  .legal thead{display:none}.legal td{padding:4px 0;border:0}.legal tr{padding:12px 0;border-bottom:1px solid var(--stone)}}
.brandmark{width:40px;height:40px;flex:none;color:var(--gold-soft)}
@media(min-width:768px){.brandmark{width:48px;height:48px}}
.brandtext{display:flex;align-items:baseline;gap:10px;min-width:0}
.fmark{width:46px;height:46px;color:var(--gold-soft);margin-bottom:16px}

/* ---------- hero photography ---------- */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(12,31,24,.80) 0%,rgba(12,31,24,.46) 48%,rgba(12,31,24,.14) 76%),
    linear-gradient(178deg,rgba(12,31,24,.60),rgba(12,31,24,.34) 40%,rgba(12,31,24,.92))}
.hero-veil:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 82% at 52% 38%,transparent 42%,rgba(8,20,15,.40) 100%)}

/* ---------- occasion cards ---------- */
.occ{margin-top:56px;display:grid;gap:22px;background:none;border:0;border-radius:0}
@media(min-width:640px){.occ{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1020px){.occ{grid-template-columns:repeat(3,minmax(0,1fr))}}
.occ a{position:relative;display:block;overflow:hidden;border-radius:4px;
  background:var(--emerald-deep);min-height:0;padding:0;isolation:isolate}
.occ a img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.5s var(--ease)}
.occ a:hover img,.occ a:focus-visible img{transform:scale(1.055)}
.occ a:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(12,31,24,.93),rgba(12,31,24,.38) 54%,rgba(12,31,24,.1))}
.occ .oc{position:absolute;z-index:2;inset:auto 0 0 0;padding:26px 24px 24px;color:var(--ivory)}
.occ .n{font-family:var(--display);font-style:italic;font-size:14px;color:var(--gold-soft)}
.occ h3{margin-top:8px;font-size:1.8rem;color:var(--ivory);letter-spacing:-.014em}
.occ p{margin-top:10px;font-size:14.5px;color:rgba(251,247,238,.84)}
.occ .go{margin-top:14px;display:inline-block;font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}

/* ---------- portfolio ---------- */
.pf-bar{margin-top:44px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pf-btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;padding:11px 22px;min-height:44px;font:inherit;font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.pf-btn:hover{border-color:var(--gold);color:var(--ink)}
.pf-btn[aria-pressed=true]{background:var(--emerald);border-color:var(--emerald);color:var(--ivory)}
.pf-count{margin-left:auto;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:560px){.pf-count{margin-left:0;width:100%}}

/* ---- portfolio: editorial masonry ----
   Photographs run in multi-column so each keeps its true proportions and the
   columns close up under it. The full-width plates sit OUTSIDE the columns,
   between runs, rather than using column-span: a span inside multicol makes the
   browser balance the columns above it, which left tall holes beside the
   portraits. Each run balances on its own and closes cleanly. */
.pf-grid{margin-top:40px}
.pf-run{--cols:1;--gap:20px;columns:1;column-gap:var(--gap)}
@media(min-width:620px){.pf-run{--cols:2;--gap:26px;columns:2}}
@media(min-width:1100px){.pf-run{--cols:3;--gap:32px;columns:3}}
.pf-run[hidden]{display:none}
/* With JavaScript the items are dealt into real columns, shortest-first, so the
   three column bottoms finish level. Multi-column is the no-JS fallback: it
   balances by its own rules and can leave one column 450px longer, which is
   what made the grid look misaligned. */
.pf-run.pf-cols{columns:auto;display:flex;align-items:flex-start;gap:0 var(--gap)}
.pf-col{flex:1 1 0;min-width:0}
.pf-item{break-inside:avoid;margin:0 0 26px;display:block;width:100%;padding:0;border:0;
  background:none;text-align:left;color:inherit;cursor:zoom-in}
@media(min-width:620px){.pf-item{margin-bottom:34px}}
@media(min-width:1100px){.pf-item{margin-bottom:46px}}
.pf-item[hidden]{display:none}

/* The full-width plate. A change of scale, the way a magazine turns to a single
   picture after a run of smaller ones. */
.pf-feature{margin:4px auto 34px;max-width:min(100%,1060px)}
@media(min-width:620px){.pf-feature{margin:10px auto 46px}}
@media(min-width:1100px){.pf-feature{margin:14px auto 62px}}
.pf-feature .pf-media{aspect-ratio:var(--ar,16/7)}
.pf-feature .pf-media img{height:100%;object-fit:cover}
.pf-feature .pf-cap{padding-top:16px}
.pf-feature .pf-cap .t{font-size:clamp(1.15rem,2vw,1.6rem)}

.pf-media{position:relative;display:block;overflow:hidden;border-radius:3px;
  background:rgba(29,64,52,.07)}
.pf-media img{display:block;width:100%;height:auto;
  transition:transform 1.4s var(--ease)}
.pf-item:hover .pf-media img,.pf-item:focus-visible .pf-media img{transform:scale(1.045)}
.pf-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,31,24,.22),rgba(12,31,24,0) 46%);
  opacity:0;transition:opacity .5s var(--ease)}
.pf-item:hover .pf-media:after,.pf-item:focus-visible .pf-media:after{opacity:1}
.pf-cap{display:flex;gap:12px;align-items:baseline;padding:14px 2px 0}
.pf-cap .t{font-family:var(--display);font-size:1.05rem;line-height:1.28;color:var(--ink);
  letter-spacing:-.006em}
.pf-cap .k{margin-left:auto;flex:none;font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);opacity:.75}
.pf-empty{margin-top:40px;color:var(--muted)}

/* Scroll-driven entrance and a slow drift inside the frame. Chrome, Edge and
   Safari run these off the scroll timeline with no JavaScript; Firefox ignores
   the block entirely and every photograph is simply there, which is a perfectly
   good way to look at a gallery. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pf-item{animation:pf-rise linear both;animation-timeline:view();
      animation-range:entry 0% entry 58%}
    .pf-media img{animation:pf-drift linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    .pf-item:hover .pf-media img{animation-play-state:paused}
  }
}
@keyframes pf-rise{
  from{opacity:0;transform:translateY(30px) scale(.987)}
  to{opacity:1;transform:none}}
@keyframes pf-drift{
  from{transform:scale(1.055) translateY(-1.3%)}
  to{transform:scale(1.055) translateY(1.3%)}}

/* Scroll-driven entrance and a slow drift inside the frame. Chrome, Edge and
   Safari run these off the scroll timeline with no JavaScript; Firefox ignores
   the whole block and every photograph is simply there, which is a fine way to
   look at a gallery. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pf-item{animation:pf-rise linear both;animation-timeline:view();
      animation-range:entry 0% entry 62%}
    .pf-media img{animation:pf-drift linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    .pf-item:hover .pf-media img{animation-play-state:paused}
  }
}
@keyframes pf-rise{
  from{opacity:0;transform:translateY(34px) scale(.985)}
  to{opacity:1;transform:none}}
@keyframes pf-drift{
  from{transform:scale(1.06) translateY(-1.4%)}
  to{transform:scale(1.06) translateY(1.4%)}}

/* portfolio viewer */
dialog#pfx{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100vw;height:100dvh;overflow:hidden}
dialog#pfx::backdrop{background:rgba(8,20,15,.96)}
.pfx-wrap{position:relative;width:100vw;height:100dvh;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;color:var(--ivory)}
.pfx-top{display:flex;align-items:center;gap:16px;padding:14px 16px}
.pfx-idx{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.pfx-x{margin-left:auto;width:46px;height:46px;border-radius:999px;
  border:1px solid rgba(251,247,238,.3);background:transparent;color:var(--ivory);
  font-size:20px;line-height:1;cursor:pointer;transition:background .3s,color .3s}
.pfx-x:hover{background:var(--ivory);color:var(--emerald)}
.pfx-stage{position:relative;display:block;padding:0 6px;min-height:0;overflow:hidden}
.pfx-stage img{display:block;width:100%;height:100%;object-fit:contain;border-radius:3px}
.pfx-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:999px;border:1px solid rgba(251,247,238,.28);background:rgba(12,31,24,.6);
  color:var(--ivory);font-size:20px;cursor:pointer;display:grid;place-items:center;
  transition:background .3s,color .3s}
.pfx-nav:hover{background:var(--gold);color:#20160a;border-color:var(--gold)}
.pfx-prev{left:8px}.pfx-next{right:8px}
@media(min-width:900px){.pfx-prev{left:26px}.pfx-next{right:26px}}
.pfx-foot{padding:12px 20px 20px;text-align:center}
.pfx-foot .t{font-family:var(--display);font-size:1.25rem}
.pfx-foot .d{margin-top:6px;font-size:13.5px;color:rgba(251,247,238,.72);
  max-width:60ch;margin-inline:auto}
@media(max-width:640px){.pfx-foot .d{display:none}}

/* ---------- whatsapp ---------- */
/* Right edge sits on the content edge (the header's Enquire button), not the
   screen edge, so on wide screens it lines up with everything above it.
   % in a fixed element's `right` is the viewport minus its scrollbar. */
.wa-float{position:fixed;right:max(22px,calc((100% - var(--wrap)) / 2 + 22px));bottom:18px;z-index:70;display:inline-flex;align-items:center;
  gap:10px;min-height:54px;padding:0 22px 0 17px;border-radius:999px;
  background:var(--gold);color:#20160a;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 14px 34px -10px rgba(20,52,42,.5);transition:transform .3s var(--ease),background .3s}
.wa-float:hover{background:var(--gold-soft);transform:translateY(-2px)}
.wa-float svg{width:23px;height:23px;flex:none;fill:currentColor}
@media(min-width:768px){.wa-float{right:max(44px,calc((100% - var(--wrap)) / 2 + 44px))}}
@media(max-width:559px){.wa-float{padding:0;width:56px;height:56px;justify-content:center}
  .wa-float .lbl{display:none}}
@media print{.wa-float{display:none}}
.btn-wa{background:var(--emerald);color:var(--ivory);border-color:var(--emerald)}
.btn-wa:hover{background:var(--moss);color:var(--ivory)}
.btn-wa svg{width:17px;height:17px;fill:currentColor}
.pack .btn{margin-top:24px;width:100%;justify-content:center;font-size:10.5px}
.form .actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pre-note{grid-column:1/-1;display:none;gap:12px;align-items:flex-start;border:1px solid var(--gold);
  background:rgba(194,147,79,.11);border-radius:4px;padding:14px 17px;font-size:14.5px;
  letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.5}
.pre-note.on{display:flex}
.form .hint{display:block;margin-top:7px;font-size:12.5px;letter-spacing:0;
  text-transform:none;color:var(--muted);line-height:1.5}
.form .err{display:block;margin-top:7px;font-size:13px;letter-spacing:0;text-transform:none;
  color:#8f2f22;font-weight:500}
.form [aria-invalid=true]{border-color:#8f2f22;box-shadow:0 0 0 3px rgba(143,47,34,.12)}
.pre-note svg{width:17px;height:17px;flex:none;margin-top:2px;fill:var(--gold-deep)}

/* ---------- package detail ---------- */
.pkg-open{cursor:pointer;font:inherit;width:100%;text-align:center}
.pkg-modal{border:0;padding:0;background:transparent;max-width:min(760px,94vw);width:100%;
  max-height:92svh;color:var(--ink)}
.pkg-modal::backdrop{background:rgba(8,20,15,.72);backdrop-filter:blur(3px)}
.pkg-sheet{position:relative;background:var(--ivory);border-radius:5px;overflow:auto;
  max-height:92svh;box-shadow:0 30px 90px rgba(8,20,15,.44)}
.pkg-x{position:sticky;top:0;float:right;margin:10px 12px 0 0;z-index:3;width:40px;height:40px;
  border:0;border-radius:50%;background:rgba(29,64,52,.08);color:var(--emerald);
  font-size:24px;line-height:1;cursor:pointer}
.pkg-x:hover{background:rgba(29,64,52,.16)}
.pkg-head{padding:34px 28px 0}
@media(min-width:700px){.pkg-head{padding:44px 46px 0}}
.pkg-n{display:inline-block;font-family:var(--display);font-size:15px;letter-spacing:.24em;
  color:var(--gold-deep)}
.pkg-head h3{margin-top:10px;font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.02em}
.pkg-head p{margin-top:16px;color:var(--muted);line-height:1.65;max-width:46rem}
.pkg-body{padding:8px 28px 0}
@media(min-width:700px){.pkg-body{padding:8px 46px 0}}
.pkg-body h4{margin-top:34px;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.pkg-list{margin:14px 0 0;display:grid;gap:0}
.pkg-list dt{font-family:var(--display);font-size:1.12rem;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--line)}
.pkg-list dt:first-of-type{border-top:0;padding-top:0}
.pkg-list dd{margin:7px 0 0;color:var(--muted);font-size:15px;line-height:1.62}
.pkg-foot{position:sticky;bottom:0;margin-top:34px;padding:22px 28px 26px;
  background:var(--cream);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:700px){.pkg-foot{padding:24px 46px 28px}}
.pkg-note{flex:1 1 100%;margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.55}

/* ---------- thank you ---------- */
.ty{position:relative;overflow:hidden;background:var(--emerald);color:var(--ivory);
  display:grid;place-items:center;text-align:center}
.ty-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.30}
.ty-veil{position:absolute;inset:0;z-index:1;
  background:radial-gradient(96% 74% at 50% 30%,rgba(29,64,52,.62),rgba(15,40,32,.95) 78%)}
.ty-in{position:relative;z-index:2;max-width:44rem;padding:168px 22px 104px}
@media(min-width:768px){.ty-in{padding:210px 44px 128px}}
.ty .mark{width:72px;height:72px;margin:0 auto;color:var(--gold-soft)}
.ty .mark text{font-family:var(--display)}
.ty h1{margin-top:26px;font-size:clamp(2.3rem,5vw,3.9rem);letter-spacing:-.022em;
  line-height:1.08}
.ty h1 em{display:block;color:var(--gold-soft);font-style:italic}
.ty p{margin-top:22px;color:var(--muted-light);font-size:1.06rem;line-height:1.65}
.ty-acts{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ty-meta{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-light);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light)}
.ty-meta span{display:inline-flex;align-items:center;gap:9px}
.ty-meta i{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}