/* ============================================================
   Lion Force Investment Company Ltd , Design System
   Light theme. Fonts: Fraunces (display) + Manrope (body/UI).
   ============================================================ */

:root{
  /* White */
  --paper:#ffffff;
  --surface:#ffffff;
  --surface-2:#f4f2ee;
  --surface-3:#eae7e0;

  /* Ash (text + neutrals , warm grey, no green bias) */
  --ink:#1c1b19;
  --ink-soft:#5f5c54;
  --ink-faint:#928e83;
  --ash-tint:#efece5;

  /* Dark (footer / contrast bands) */
  --dark:#151412;
  --dark-2:#201e1a;
  --on-dark:#f6f4ef;
  --on-dark-soft:#b3aea1;
  --line-on-dark:#38352e;

  /* Gold (the one accent) */
  --accent:#b3852f;
  --accent-dark:#8a6423;
  --accent-light:#d6ab63;
  --accent-tint:#f2e6c9;

  --line:#e5e1d8;

  --success:#7a6a2e;
  --error:#9c4a3a;

  --shadow-sm:0 1px 2px rgba(28,27,25,.07), 0 2px 8px rgba(28,27,25,.05);
  --shadow-md:0 10px 28px rgba(28,27,25,.10);
  --shadow-lg:0 24px 56px rgba(28,27,25,.18);

  --radius-lg:20px;
  --radius:14px;
  --radius-sm:8px;

  --container:1180px;
  --header-h:84px;
  --header-h-mobile:70px;

  --ease:cubic-bezier(.22,.8,.32,1);
  --dur-fast:.22s;
  --dur:.45s;
  --dur-slow:.9s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:"Manrope",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure{margin:0;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea{font:inherit;}
svg{display:block;}

h1,h2,h3,h4,.font-display{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:600;
  letter-spacing:-0.01em;
  text-wrap:balance;
  color:var(--ink);
}

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

.eyebrow{
  display:inline-block;
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
}

.section{padding:60px 0;}
.section--tight{padding:44px 0;}
.section--alt{background:var(--surface-2);}
.section--dark{background:var(--dark);color:var(--on-dark);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark);}
.section--dark .eyebrow{color:var(--accent-light);}

.text-lead{
  font-size:clamp(17px,2vw,19px);
  color:var(--ink-soft);
  max-width:62ch;
}

@media (max-width:640px){
  .section{padding:44px 0;}
  .section-head{margin-bottom:24px;}
}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible{opacity:1;transform:none;}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.01em;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:translateY(102%);
  transition:transform var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:hover::before{transform:translateY(0);}

.btn--primary{background:var(--accent);color:#fff;}
.btn--primary::before{background:var(--accent-dark);}

.btn--ghost{border:1.5px solid var(--line);color:var(--ink);}
.btn--ghost::before{background:var(--ink);}
.btn--ghost:hover{color:#fff;border-color:var(--ink);}

.btn--ghost-dark{border:1.5px solid var(--line-on-dark);color:var(--on-dark);}
.btn--ghost-dark::before{background:var(--accent);}
.btn--ghost-dark:hover{color:#fff;border-color:var(--accent);}

.btn--sm{padding:10px 18px;font-size:13.5px;}

/* ---------- image zoom + placeholder ---------- */
.media{
  position:relative;
  overflow:hidden;
  background:var(--surface-3);
  border-radius:var(--radius);
}
.media--dark{background:var(--dark);}
.media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s var(--ease);
}
.media:hover img{transform:scale(1.08);}
.media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,33,23,0) 55%,rgba(28,33,23,.35) 100%);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
  pointer-events:none;
}
.media:hover::after{opacity:1;}

img.img-missing{
  object-fit:cover;
  filter:saturate(.85);
}

/* ---------- header ---------- */
header.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(247,244,236,.86);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--dur-fast), border-color var(--dur-fast), padding var(--dur-fast);
}
header.site-header.is-scrolled{
  box-shadow:var(--shadow-sm);
  border-color:var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  transition:padding var(--dur-fast);
}
header.site-header.is-scrolled .nav{padding:12px 0;}

.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:40px;height:40px;
  flex:none;
  object-fit:contain;
  display:block;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text strong{
  font-family:"Fraunces",serif;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}
.brand-text span{
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-dark);
  font-weight:700;
}

.nav-links{display:flex;align-items:center;gap:36px;}
/* both shown only at mobile widths , see the 920px block below */
.nav-link-mobile{display:none;}
.lang-switch{display:none;}
.nav-links a{
  position:relative;
  font-weight:600;
  font-size:14.5px;
  color:var(--ink-soft);
  padding:6px 0;
  transition:color var(--dur-fast);
}
.nav-links a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform var(--dur) var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left;}

/* ---------- language switcher ---------- */
.nav-lang{position:relative;}
.lang-toggle{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:14.5px;color:var(--ink-soft);
  padding:6px 0;
  transition:color var(--dur-fast);
}
.lang-toggle:hover{color:var(--ink);}
.lang-current{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:5px;
  background:var(--accent-tint);color:var(--accent-dark);
}
.lang-caret{transition:transform var(--dur-fast);flex:none;}
.nav-lang.is-open .lang-caret{transform:rotate(180deg);}

.lang-menu{
  position:absolute;top:100%;left:50%;
  transform:translate(-50%,8px);
  min-width:170px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  padding:6px;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
  z-index:80;
}
.nav-lang:hover .lang-menu,
.nav-lang.is-open .lang-menu{
  opacity:1;visibility:visible;transform:translate(-50%,4px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lang-option{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:9px 12px;
  border-radius:6px;
  font-size:14px;font-weight:600;color:var(--ink-soft);
  transition:background var(--dur-fast), color var(--dur-fast);
}
.lang-option:hover{background:var(--surface-2);color:var(--ink);}
.lang-option.is-active{color:var(--accent-dark);}
.lang-option .lang-check{opacity:0;font-weight:700;transition:opacity var(--dur-fast);}
.lang-option.is-active .lang-check{opacity:1;}

@media (max-width:920px){
  .nav-lang{width:100%;}
  .lang-toggle{width:100%;justify-content:space-between;padding:14px 0;font-size:17px;border-bottom:1px solid var(--line);color:var(--ink);}
  .lang-menu{
    position:static;
    transform:none;
    box-shadow:none;
    border:none;
    background:transparent;
    padding:0;
    max-height:0;
    opacity:1;visibility:visible;
    overflow:hidden;
    transition:max-height var(--dur) var(--ease);
  }
  .nav-lang:hover .lang-menu{max-height:0;}
  .nav-lang.is-open .lang-menu{max-height:140px;padding:4px 0 8px 12px;}
  /* the shared (desktop) hover/open rule below sets a translate() on .lang-menu
     that outranks the plain "transform:none" above (3 classes vs. 1) , pin it
     back down so the dropdown stays put under the toggle instead of sliding
     off sideways over the page content. */
  .nav-lang:hover .lang-menu,
  .nav-lang.is-open .lang-menu{transform:none;}
  .lang-option{color:var(--ink);}
}

.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-toggle{
  display:none;
  width:46px;height:46px;
  flex:none;
  align-items:center;justify-content:center;
  border-radius:50%;
  transition:background var(--dur-fast);
}
.nav-toggle:hover{background:var(--surface-2);}
.nav-toggle .bar{
  stroke:var(--ink);
  stroke-width:2;
  stroke-linecap:round;
  transform-origin:12px 12px;
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle.is-open .bar1{transform:translateY(6px) rotate(45deg);}
.nav-toggle.is-open .bar2{opacity:0;}
.nav-toggle.is-open .bar3{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:920px){
  .nav{padding-left:20px;padding-right:20px;}
  .nav-links{
    position:fixed;inset:0 0 0 auto;
    width:min(340px,80vw);
    height:100vh;
    background:var(--surface);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:6px;
    padding:100px 32px 32px;
    box-shadow:var(--shadow-lg);
    transform:translateX(100%);
    transition:transform var(--dur) var(--ease);
    z-index:60;
  }
  .nav-links.is-open{transform:translateX(0);}
  .nav-links a{width:100%;padding:14px 0;font-size:17px;border-bottom:1px solid var(--line);}
  /* the Get in Touch pill is hidden at this width, so the drawer carries
     the same destination as a plain link , otherwise there'd be no route
     to the contact page from the mobile nav at all */
  .nav-cta .btn--primary{display:none;}
  .nav-links .nav-link-mobile{display:block;}

  /* Language lives inside the drawer on mobile, which a French speaker
     would never see if they just scroll. Surface it in the header itself
     as a two-flag segmented toggle sitting beside the menu button. */
  .nav-cta .lang-switch{
    display:inline-flex;
    align-items:center;
    gap:2px;
    flex:none;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:999px;
    padding:3px;
  }
  .nav-cta .lang-switch-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:auto;
    padding:5px 9px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.03em;
    color:var(--ink-faint);
    background:transparent;
    transition:background var(--dur-fast), color var(--dur-fast);
  }
  .nav-cta .lang-switch-btn:hover{background:transparent;color:var(--ink-soft);}
  .nav-cta .lang-switch-btn.is-active{
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow-sm);
  }
  .nav-cta .lang-switch-btn .lang-flag{
    width:17px;height:12px;
    flex:none;
    border-radius:2px;
    box-shadow:0 0 0 1px rgba(28,27,25,.14);
    /* the inactive flag is dimmed so the chosen one reads as selected */
    opacity:.45;
    transition:opacity var(--dur-fast);
  }
  .nav-cta .lang-switch-btn.is-active .lang-flag{opacity:1;}
  .nav-cta .lang-switch-btn .lang-check{display:none;}
}
@media (max-width:600px){
  /* on phones the labels cost ~40px the brand name needs, and the two
     flags carry the meaning on their own , keep the words for screen
     readers via aria-label */
  .nav-cta .lang-switch-btn span{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .nav-cta .lang-switch-btn{padding:5px 8px;}
  .nav-cta .lang-switch-btn .lang-flag{width:19px;height:13px;}
  .nav-toggle{display:flex;position:relative;z-index:70;}
  .nav-backdrop{
    position:fixed;inset:0;
    background:rgba(15,14,12,.45);
    opacity:0;visibility:hidden;
    transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
    z-index:55;
  }
  .nav-backdrop.is-open{
    opacity:1;visibility:visible;
    transition:opacity var(--dur) var(--ease);
  }
}

@media (max-width:480px){
  .container{padding:0 18px;}
  .brand{gap:8px;}
  .brand-mark{width:34px;height:34px;}
  .brand-text strong{font-size:15px;}
  .nav{padding:14px 18px;}
  .nav-cta{gap:8px;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  color:#fff;
}
.hero-media{
  position:absolute;inset:0;
  z-index:0;
}
.hero-media img{
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 3s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.12) translate(-1.5%,-1.5%);}
}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(20,24,16,.92) 15%,rgba(20,24,16,.62) 55%,rgba(20,24,16,.4) 100%);
  z-index:1;
}
.hero-content{
  position:relative;z-index:2;padding:64px 24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-content .eyebrow{color:var(--accent-light);}
.hero h1{
  color:#fff;
  font-size:clamp(30px,5vw,58px);
  line-height:1.12;
  margin:18px 0 22px;
  max-width:min(52rem,92%);
  width:100%;
}
.hero p.text-lead{color:rgba(243,239,226,.86);max-width:min(54rem,92%);width:100%;margin-left:auto;margin-right:auto;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:36px;}

@media (max-width:640px){
  .hero{min-height:calc(100vh - var(--header-h-mobile));}
  .hero-content{padding:40px 20px;}
  .hero h1{font-size:clamp(24px,7.5vw,36px);max-width:none;}
  .hero p.text-lead{font-size:15px;max-width:none;}
  .hero-actions{flex-direction:row;flex-wrap:nowrap;gap:10px;margin-top:24px;}
  .hero-actions .btn{flex:none;justify-content:center;padding:12px 14px;font-size:13px;white-space:nowrap;}
}

/* stagger children of hero on load */
.hero-content > *{
  opacity:0;
  animation:rise .8s var(--ease) forwards;
}
.hero-content .eyebrow{animation-delay:.05s;}
.hero-content h1{animation-delay:.18s;}
.hero-content .text-lead{animation-delay:.32s;}
.hero-content .hero-actions{animation-delay:.46s;}
@keyframes rise{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- statement section (big typewriter headline) ---------- */
.statement{
  position:relative;
  overflow:hidden;
  background:var(--dark);
  color:var(--on-dark);
  padding:110px 0;
  text-align:center;
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  justify-content:center;
}
.statement-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  z-index:0;
  pointer-events:none;
}
.statement-blob--a{width:440px;height:440px;background:radial-gradient(circle,rgba(179,133,47,.30),transparent 70%);top:-180px;left:-140px;}
.statement-blob--b{width:400px;height:400px;background:radial-gradient(circle,rgba(179,133,47,.22),transparent 70%);bottom:-180px;right:-120px;}
.statement-watermark{
  position:absolute;
  top:52%;left:50%;
  transform:translate(-50%,-50%);
  font-family:"Fraunces",serif;
  font-weight:700;
  font-size:min(46vw,560px);
  line-height:1;
  color:rgba(246,244,239,.035);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.statement-inner{position:relative;z-index:1;}
.statement .eyebrow{color:var(--accent-light);display:block;margin-bottom:18px;}
.statement-headline{
  font-family:"Fraunces",serif;
  font-weight:700;
  color:#fff;
  font-size:clamp(38px,8vw,104px);
  letter-spacing:.01em;
  line-height:1.04;
  min-height:1.15em;
  text-wrap:balance;
}
.statement-headline::after{
  content:"";
  display:inline-block;
  width:.07em;
  height:.8em;
  margin-left:6px;
  background:var(--accent-light);
  vertical-align:-0.08em;
  animation:caret-blink 1s step-end infinite;
}
.statement-sub{
  margin:22px auto 0;
  max-width:52ch;
  color:var(--on-dark-soft);
  font-size:17px;
}
@keyframes caret-blink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .statement-headline::after{animation:none;}
}
@media (max-width:640px){
  .statement{padding:64px 0;min-height:calc(100vh - var(--header-h-mobile));}
  .statement-blob{width:260px;height:260px;}
}

/* ---------- fact / stat strip ---------- */
.facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.fact{
  background:var(--surface);
  padding:26px 24px;
  text-align:left;
}
.fact strong{
  display:block;
  font-family:"Fraunces",serif;
  font-size:clamp(22px,3vw,30px);
  color:var(--accent-dark);
  margin-bottom:4px;
}
.fact span{font-size:13.5px;color:var(--ink-soft);}

/* ---------- section headers ---------- */
.section-head{max-width:680px;margin-bottom:32px;}
.section-head h2{font-size:clamp(28px,4vw,40px);margin:8px 0 14px;}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- grids ---------- */
.grid{display:grid;gap:28px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--5{grid-template-columns:repeat(4,1fr);gap:20px;}
/* property cards carry a caption and an enquiry button, so they need more
   room per card than the plain gallery tiles do */
.grid--projects{grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:1100px){
  .grid--5,.grid--projects{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:920px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid--2,.grid--3{grid-template-columns:1fr;}
  /* service cards stay 2-up on phones , they're image-led and read fine
     narrow, unlike the contact cards which hold long emails/addresses */
  .grid--services{grid-template-columns:repeat(2,1fr);gap:14px;}
  .grid--4{grid-template-columns:repeat(3,1fr);gap:12px;}
  .grid--5{grid-template-columns:repeat(3,1fr);gap:10px;}
  .grid--projects{grid-template-columns:repeat(2,1fr);gap:14px;}
}

/* ---------- split layout (image + text) ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.split.reverse .split-media{order:2;}
.split-media .media{aspect-ratio:4/5;}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:36px;}
  .split.reverse .split-media{order:0;}
  /* stacked full-width, a 4:5 portrait runs nearly the full viewport height
     , go landscape so the image stays a band rather than a whole screen */
  .split-media .media{aspect-ratio:16/10;}
}

/* Round logo-style media. The LFIC mark is a circle drawn on a square
   canvas, so the default cover-crop inside a 4:5 box cut its top and
   bottom off and read as "zoomed in". Square the frame, clip it to a
   circle, and switch to contain so the whole mark is visible , the
   white canvas corners fall outside the circular clip. Declared after
   the breakpoint above so the 1:1 ratio holds at every width. */
.split-media .media--round{aspect-ratio:1/1;}
.media--round{
  border-radius:50%;
  background:var(--paper);
  max-width:440px;
  margin:0 auto;
}
.media--round img{object-fit:contain;}
/* the photo scrim is meant for photographs , on a logo it just dirties it */
.media--round::after{display:none;}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 26px;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}

.icon-badge{
  width:52px;height:52px;
  flex:none;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-tint);
  margin-bottom:18px;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.icon-badge svg{
  width:24px;height:24px;
  stroke:var(--accent-dark);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke var(--dur-fast) var(--ease);
}
.card:hover .icon-badge{transform:rotate(-6deg) scale(1.06);background:var(--accent);}
.card:hover .icon-badge svg{stroke:#fff;}

.icon-badge--sm{width:38px;height:38px;border-radius:10px;margin-bottom:0;}
.icon-badge--sm svg{width:18px;height:18px;stroke-width:2;}

/* ash variant , used where a second, still-neutral badge tone is wanted */
.icon-badge--ash{background:var(--ash-tint);}
.icon-badge--ash svg{stroke:var(--ink);}

/* solid brand glyphs (e.g. WhatsApp) instead of line-icon strokes */
.icon-badge svg.icon-fill{fill:var(--accent-dark);stroke:none;}

.card h3{font-size:19px;margin-bottom:10px;}
.card p{color:var(--ink-soft);font-size:14.5px;}

/* service preview card (home) with image */
.service-card{
  display:flex;flex-direction:column;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.service-card .media{border-radius:0;aspect-ratio:4/3;}
.service-card-body{padding:24px 22px 26px;}
.service-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.service-card-body .tag{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-dark);
}
.service-card-body h3{font-size:18px;margin-bottom:8px;}
.service-card-body p{font-size:14px;color:var(--ink-soft);}
.service-card-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;font-weight:700;font-size:13.5px;color:var(--accent-dark);
}
.service-card-link svg{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease);}
.service-card:hover .service-card-link svg{transform:translateX(4px);}

@media (max-width:640px){
  /* two-up on phones , tighten the internals so the narrower card
     doesn't read as mostly padding */
  .grid--services .service-card-body{padding:14px 13px 16px;}
  .grid--services .service-card-head{gap:7px;margin-bottom:8px;}
  .grid--services .service-card-body .tag{font-size:9.5px;letter-spacing:.05em;}
  .grid--services .service-card-body h3{font-size:14.5px;margin-bottom:5px;}
  .grid--services .service-card-body p{font-size:12px;line-height:1.5;}
  .grid--services .service-card-link{font-size:11.5px;margin-top:10px;gap:4px;}
  .grid--services .icon-badge--sm{display:none;}
}

/* full service section (services page) */
.service-block{padding:64px 0;border-bottom:1px solid var(--line);}
.service-block:last-child{border-bottom:none;}
.service-block .split-media .media{aspect-ratio:4/3;}

/* value card */
.value-card{padding:26px 22px;}
.value-card .icon-badge{background:var(--ash-tint);}
.value-card .icon-badge svg{stroke:var(--ink);}
.value-card:hover .icon-badge{background:var(--dark);}
.value-card:hover .icon-badge svg{stroke:var(--on-dark);}

/* ---------- management team (home) ----------
   Deliberately three different card *forms* rather than one grid repeated:
   large overlay portraits for leadership, staggered mid-size cards for
   partners, and compact horizontal chips for specialists , so the visual
   weight of each tier reads as its place in the hierarchy. */
.team-lead{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  max-width:860px;
  margin:0 auto;
}
.team-figure{position:relative;}
.team-figure-media{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--surface-3);
  box-shadow:var(--shadow-md);
}
.team-figure-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 22%;
  display:block;
  transition:transform 1.1s var(--ease);
}
.team-figure:hover .team-figure-media img{transform:scale(1.06);}
.team-figure-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,20,18,0) 42%,rgba(21,20,18,.88) 100%);
}

/* tier 1 , leadership: caption sits over the portrait */
.team-figure--lead .team-figure-media{aspect-ratio:4/5;}
.team-figure--lead .team-figure-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px;
  z-index:1;
  color:#fff;
}
.team-figure--lead .team-figure-body h3{
  color:#fff;
  font-size:21px;
  line-height:1.25;
  margin-bottom:3px;
}
.team-figure--lead .team-figure-body p{
  font-size:13.5px;
  font-weight:600;
  color:var(--accent-light);
}
.team-rank{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(179,133,47,.9);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:12px;
}

/* tier divider label */
.team-tier-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin:56px 0 26px;
}
.team-tier-label span{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-dark);
  flex:none;
}
.team-tier-label::before,.team-tier-label::after{
  content:"";
  height:1px;
  background:var(--line);
  flex:1;
}

/* tier 2 , partners: staggered so the row never reads as a plain grid */
.team-partners{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  max-width:920px;
  margin:0 auto;
  align-items:start;
}
.team-partners .team-figure:nth-child(even){margin-top:38px;}
.team-figure--partner .team-figure-media{aspect-ratio:1/1;border-radius:var(--radius);}
.team-figure--partner .team-figure-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px;
  z-index:1;
  color:#fff;
}
.team-figure--partner .team-figure-body h3{color:#fff;font-size:16px;line-height:1.3;margin-bottom:2px;}
.team-figure--partner .team-figure-body p{font-size:12px;font-weight:600;color:var(--accent-light);}

/* tier 3 , specialists: compact horizontal chips, a different form again */
.team-specialists{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  max-width:980px;
  margin:0 auto;
}
.team-chip{
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:14px 30px 14px 14px;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast);
}
.team-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-light);}
.team-chip img{
  width:92px;height:92px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  object-position:center 22%;
  /* a thin ring lifts the portrait off the white card */
  box-shadow:0 0 0 3px var(--surface), 0 0 0 4px var(--line);
}
.team-chip:hover img{box-shadow:0 0 0 3px var(--surface), 0 0 0 4px var(--accent-light);}
.team-chip h3{font-size:17px;line-height:1.3;margin-bottom:3px;}
.team-chip p{font-size:13.5px;font-weight:600;color:var(--accent-dark);}

@media (max-width:860px){
  .team-lead{gap:18px;}
  .team-figure--lead .team-figure-body{padding:18px;}
  .team-figure--lead .team-figure-body h3{font-size:16px;}
  .team-figure--lead .team-figure-body p{font-size:12px;}
  .team-rank{margin-bottom:8px;font-size:9.5px;padding:3px 8px;}
  .team-partners{gap:16px;}
  .team-partners .team-figure:nth-child(even){margin-top:24px;}
  .team-specialists{grid-template-columns:1fr;}
  .team-tier-label{margin:40px 0 20px;}
}
/* On phones the cards get small enough that an overlaid caption hides the
   face it sits on , so drop the name/role out of the image and set it
   underneath as ordinary text, and remove the scrim it needed. */
@media (max-width:640px){
  .team-figure--lead .team-figure-body,
  .team-figure--partner .team-figure-body{
    position:static;
    padding:9px 2px 0;
    color:inherit;
  }
  .team-figure--lead .team-figure-body h3,
  .team-figure--partner .team-figure-body h3{
    color:var(--ink);
    font-size:13.5px;
    line-height:1.3;
    margin-bottom:1px;
  }
  .team-figure--lead .team-figure-body p,
  .team-figure--partner .team-figure-body p{
    color:var(--accent-dark);
    font-size:11.5px;
    line-height:1.35;
  }
  .team-figure-media::after{opacity:0;}
  /* the pill badge reads as clutter once the caption is outside the image */
  .team-rank{
    background:none;
    color:var(--accent-dark);
    padding:0;
    margin-bottom:3px;
    font-size:9.5px;
    letter-spacing:.14em;
  }
  .team-chip{padding:11px 20px 11px 11px;gap:15px;}
  .team-chip img{width:72px;height:72px;}
  .team-chip h3{font-size:15px;}
  .team-chip p{font-size:12.5px;}
}

/* founder / people card */
.people{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:44px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
}
.people .media{aspect-ratio:1/1;border-radius:var(--radius);}
.people h3{font-size:24px;margin-bottom:2px;}

/* auto-advancing crossfade carousel (e.g. founder photo) */
.carousel-slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity 1s var(--ease);
}
.carousel-slide.is-active{opacity:1;}
.people .role{color:var(--accent-dark);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:block;}
@media (max-width:720px){
  .people{grid-template-columns:1fr;text-align:left;padding:26px;}
}

/* ---------- values list (numbered, since these are 7 distinct named principles) ---------- */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:920px){.values-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.values-grid{grid-template-columns:1fr;}}

/* ---------- commitment / cta band ---------- */
.cta-band{
  border-radius:var(--radius-lg);
  padding:56px;
  background:linear-gradient(155deg,var(--dark),var(--dark-2));
  color:var(--on-dark);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute;
  width:360px;height:360px;
  right:-120px;top:-140px;
  background:radial-gradient(circle,rgba(169,99,31,.4),transparent 70%);
}
.cta-band h2{color:#fff;font-size:clamp(24px,3vw,32px);max-width:22ch;position:relative;}
.cta-band p{color:var(--on-dark-soft);margin-top:10px;max-width:44ch;position:relative;}
.cta-band .btn{position:relative;}

/* ---------- contact page ---------- */
.contact-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:26px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.contact-card .icon-badge{margin-bottom:0;flex:none;}
.contact-card h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:6px;}
.contact-card a,.contact-card p{font-size:15.5px;font-weight:600;color:var(--ink);}
.contact-card a:hover{color:var(--accent-dark);}

.map-media{aspect-ratio:21/9;}
.map-frame{
  width:100%;height:100%;
  min-height:340px;
  border:0;
  border-radius:var(--radius);
  filter:grayscale(.25) contrast(1.05);
}

@media (max-width:640px){
  /* double the mobile map height: half the width/height ratio of the
     desktop 21/9 strip so it renders at ~2x the visible height at any
     mobile width, instead of being clipped down to a thin sliver. */
  .map-media{aspect-ratio:7/6;}
}

/* ---------- contact form ---------- */
.contact-form{display:flex;flex-direction:column;gap:20px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);
}
.field input,.field textarea{
  border:1.5px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius-sm);
  padding:13px 15px;
  font-family:inherit;font-size:15px;color:var(--ink);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);
}
.field textarea{resize:vertical;min-height:150px;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.form-status{font-size:14px;font-weight:600;}
.form-status.is-success{color:var(--success);}
.form-status.is-error{color:var(--error);}
.form-status-link{text-decoration:underline;text-underline-offset:2px;color:inherit;}
.contact-form button[disabled]{opacity:.65;cursor:progress;}

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--dark);
  color:var(--on-dark-soft);
  padding-top:72px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:52px;
  border-bottom:1px solid var(--line-on-dark);
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}
.footer-grid h4{
  color:var(--on-dark);
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:18px;
}
.footer-brand p{color:var(--on-dark-soft);font-size:14.5px;margin-top:14px;max-width:34ch;}
.footer-links{display:flex;flex-direction:column;gap:11px;}
.footer-links a{font-size:14.5px;transition:color var(--dur-fast),padding-left var(--dur-fast);}
.footer-links a:hover{color:var(--accent-light);padding-left:4px;}
.footer-social{display:flex;gap:12px;margin-top:20px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-on-dark);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px);}
.footer-social svg{width:16px;height:16px;}
.footer-bottom{
  padding:22px 0 30px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
  font-size:12.5px;
  color:var(--ink-faint);
}

/* ---------- scroll to top ---------- */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(12px) scale(.9);
  pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast);
}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--accent);}
.to-top svg{width:18px;height:18px;}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--line);border:0;margin:0;}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;}
.badge{
  font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:999px;
  background:var(--accent-tint);color:var(--accent-dark);
  letter-spacing:.02em;
}

/* ---------- video card (home + gallery) ---------- */
.video-card{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:6/5;
  border-radius:var(--radius);
  overflow:hidden;
  border:none;
  padding:0;
  cursor:pointer;
  background:linear-gradient(155deg,var(--dark),var(--dark-2));
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.video-card:focus-visible{outline:3px solid var(--accent-light);outline-offset:3px;}
.video-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events:none;
  z-index:2;
}
.video-card-preview{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.8;
}
.video-card-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,20,18,.1) 40%,rgba(21,20,18,.8) 100%);
  transition:background var(--dur-fast);
}
.video-card:hover .video-card-scrim{background:linear-gradient(180deg,rgba(21,20,18,.2) 40%,rgba(21,20,18,.85) 100%);}
.video-card-play{
  position:absolute;top:44%;left:50%;
  transform:translate(-50%,-50%);
  width:76px;height:76px;
  border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 32px rgba(0,0,0,.35);
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast);
  z-index:1;
}
.video-card-play svg{width:24px;height:24px;fill:#fff;margin-left:4px;}
.video-card:hover .video-card-play{transform:translate(-50%,-50%) scale(1.08);background:var(--accent-dark);}
.video-card-play::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:50%;
  border:2px solid rgba(214,171,99,.55);
  animation:video-pulse 2.6s ease-out infinite;
}
@keyframes video-pulse{
  0%{transform:scale(.9);opacity:.8;}
  100%{transform:scale(1.35);opacity:0;}
}
.video-card-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px;
  text-align:left;
  color:#fff;
  z-index:1;
}
.video-card-caption strong{
  display:block;
  font-family:"Fraunces",serif;
  font-weight:600;
  font-size:19px;
  margin-bottom:4px;
}
.video-card-caption span{
  font-size:13px;
  color:rgba(246,244,239,.75);
}
@media (prefers-reduced-motion:reduce){
  .video-card-play::after{animation:none;}
}

/* smaller cards in the dense gallery grid need a proportionally smaller
   play button and caption than the one large featured card on the homepage */
.grid--5 .video-card-play,.grid--projects .video-card-play{width:46px;height:46px;}
.grid--5 .video-card-play svg,.grid--projects .video-card-play svg{width:16px;height:16px;margin-left:2px;}
.grid--5 .video-card-caption,.grid--projects .video-card-caption{padding:14px;}
.grid--5 .video-card-caption strong,.grid--projects .video-card-caption strong{font-size:14px;margin-bottom:1px;}
.grid--5 .video-card-caption span,.grid--projects .video-card-caption span{font-size:10.5px;}

@media (max-width:640px){
  /* 3-per-row on mobile means much smaller cards , the caption text
     doesn't have room to breathe, so the play icon alone carries it.
     Square them up to match the photo cards, otherwise the landscape
     ratio leaves the tile too squat to read at this width. */
  .grid--5 .video-card{aspect-ratio:1/1;}
  .grid--5 .video-card-play{width:34px;height:34px;top:50%;}
  .grid--5 .video-card-play svg{width:13px;height:13px;margin-left:1px;}
  .grid--5 .video-card-play::after{display:none;}
  .grid--5 .video-card-caption{display:none;}
  /* properties sit 2-up so there IS room for the label , keep it, just
     scale it (and the play button) down to suit the smaller tile */
  .grid--projects .video-card{aspect-ratio:1/1;}
  .grid--projects .video-card-play{width:40px;height:40px;top:44%;}
  .grid--projects .video-card-play svg{width:14px;height:14px;margin-left:1px;}
  .grid--projects .video-card-play::after{display:none;}
  .grid--projects .video-card-caption{padding:10px;}
  .grid--projects .video-card-caption strong{font-size:12px;}
  .grid--projects .video-card-caption span{font-size:9.5px;}
  .gallery-card-menu-toggle{width:24px;height:24px;}
  .gallery-card-menu-toggle svg{width:12px;height:12px;}
  .gallery-card-menu{top:6px;right:6px;}
  .gallery-card-menu-panel{min-width:130px;padding:4px;}
  .gallery-card-menu-item{padding:8px;font-size:12.5px;}
}

/* ---------- video modal (lightbox) ---------- */
.video-modal{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.video-modal.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity var(--dur) var(--ease);
}
.video-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(12,11,10,.9);
}
.video-modal-dialog{
  position:relative;
  z-index:1;
  width:100%;
  max-width:980px;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:scale(.94);
  transition:transform var(--dur) var(--ease);
}
.video-modal.is-open .video-modal-dialog{transform:scale(1);}
.video-modal-player{
  width:100%;height:100%;
  display:block;
  background:#000;
}
.video-modal-close{
  position:absolute; top:14px; right:14px;
  z-index:2;
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(21,20,18,.7);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast);
}
.video-modal-close:hover{background:var(--accent);}
.video-modal-close svg{width:18px;height:18px;}

body.no-scroll{overflow:hidden;}

@media (max-width:640px){
  .video-modal{padding:0;}
  .video-modal-dialog{border-radius:0;aspect-ratio:auto;height:100%;max-width:100%;}
}

/* ---------- loading skeletons ----------
   Shown the moment the page renders, while the gallery works out which
   files exist. Each variant mirrors the real card it stands in for, at
   every breakpoint, so nothing jumps when the actual cards arrive. */
@keyframes skeleton-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.skeleton-card{
  border-radius:var(--radius);
  background:linear-gradient(
    100deg,
    var(--surface-3) 30%,
    var(--ash-tint) 48%,
    var(--surface-3) 66%
  );
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s linear infinite;
}
.skeleton-card--photo{aspect-ratio:1/1;}
.skeleton-card--video,.skeleton-card--project{aspect-ratio:6/5;}
/* the property cards carry an enquiry button underneath, so their
   placeholder reserves that height too and the grid doesn't reflow */
.skeleton-card--project{
  margin-bottom:50px;
  position:relative;
}
.skeleton-card--project::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-50px;
  height:40px;
  border-radius:999px;
  background:var(--surface-3);
}
@media (max-width:640px){
  .skeleton-card--video,.skeleton-card--project{aspect-ratio:1/1;}
  .skeleton-card--project{margin-bottom:42px;}
  .skeleton-card--project::after{bottom:-42px;height:34px;}
}
/* keep the shimmer on a photo card until that photo has actually decoded */
.gallery-photo-card-wrap.is-loading .gallery-photo-card{
  background:linear-gradient(
    100deg,
    var(--surface-3) 30%,
    var(--ash-tint) 48%,
    var(--surface-3) 66%
  );
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s linear infinite;
}
.gallery-photo-card-wrap.is-loading img{opacity:0;}
.gallery-photo-card-wrap img{transition:opacity .4s var(--ease);}
@media (prefers-reduced-motion:reduce){
  .skeleton-card,
  .gallery-photo-card-wrap.is-loading .gallery-photo-card{animation:none;}
}

/* ---------- gallery: photo cards + lightbox ---------- */
.gallery-photo-card{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  border:none;
  padding:0;
  cursor:pointer;
  background:var(--surface-3);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gallery-photo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.gallery-photo-card:focus-visible{outline:3px solid var(--accent-light);outline-offset:3px;}
.gallery-photo-card img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s var(--ease);
}
.gallery-photo-card:hover img{transform:scale(1.08);}
.gallery-photo-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,33,23,0) 60%,rgba(28,33,23,.4) 100%);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
  pointer-events:none;
}
.gallery-photo-card:hover::after{opacity:1;}

/* ---------- gallery card "more options" menu (download / share) ----------
   The menu button lives as a sibling of the card's own <button> (not nested
   inside it , buttons can't nest), absolutely positioned over its corner via
   this shared wrap element. Works the same for photo cards and video cards. */
.gallery-photo-card-wrap,.video-card-wrap{position:relative;}
.gallery-photo-card-wrap .gallery-photo-card,.video-card-wrap .video-card{width:100%;}
.gallery-card-menu{position:absolute; top:10px; right:10px; z-index:5;}
.gallery-card-menu-toggle{
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(21,20,18,.55);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  transition:background var(--dur-fast);
}
.gallery-card-menu-toggle:hover,
.gallery-card-menu.is-open .gallery-card-menu-toggle{background:var(--accent);}
.gallery-card-menu-toggle svg{width:15px;height:15px;}
.gallery-card-menu-panel{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:152px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  padding:6px;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.gallery-card-menu.is-open .gallery-card-menu-panel{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gallery-card-menu-item{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:9px 10px;
  border-radius:6px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:background var(--dur-fast), color var(--dur-fast);
}
.gallery-card-menu-item svg{width:16px;height:16px;flex:none;}
.gallery-card-menu-item:hover{background:var(--surface-2); color:var(--ink);}

/* ---------- partnership section (contact) ---------- */
.partner-card{
  display:flex;
  flex-direction:column;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast);
}
.partner-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-light);}
.partner-card h3{font-size:19px;margin-top:14px;}
.partner-card p{margin-top:8px;}
.partner-actions{
  margin-top:34px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface-2);
  text-align:center;
}
.partner-actions > p{
  font-size:15.5px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.partner-actions-row{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
@media (max-width:560px){
  .partner-actions{padding:20px 16px;}
  .partner-actions-row{flex-direction:column;}
  .partner-actions-row .btn{justify-content:center;width:100%;}
}

/* WhatsApp enquiry button under each property card */
.wa-enquire{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  padding:9px 12px;
  border-radius:999px;
  border:1.5px solid #25d366;
  color:#128c3f;
  background:transparent;
  font-size:12.5px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.wa-enquire svg{width:15px;height:15px;flex:none;}
.wa-enquire:hover{background:#25d366;color:#fff;transform:translateY(-2px);}
.wa-enquire:focus-visible{outline:3px solid var(--accent-light);outline-offset:2px;}
@media (max-width:640px){
  .wa-enquire{font-size:11px;padding:8px 8px;gap:5px;margin-top:8px;}
  .wa-enquire svg{width:13px;height:13px;}
}

.gallery-toast{
  position:fixed; left:50%; bottom:28px;
  transform:translate(-50%,12px);
  background:var(--dark);
  color:var(--on-dark);
  padding:12px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  box-shadow:var(--shadow-lg);
  opacity:0;
  z-index:300;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events:none;
}
.gallery-toast.is-visible{opacity:1;transform:translate(-50%,0);}

.photo-lightbox{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.photo-lightbox.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity var(--dur) var(--ease);
}
.photo-lightbox-backdrop{
  position:absolute; inset:0;
  background:rgba(12,11,10,.92);
}
.photo-lightbox-img{
  position:relative;
  z-index:1;
  max-width:min(1100px,92vw);
  max-height:86vh;
  width:auto;height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  transform:scale(.96);
  transition:transform var(--dur) var(--ease);
}
.photo-lightbox.is-open .photo-lightbox-img{transform:scale(1);}
.photo-lightbox-close{
  position:absolute; top:18px; right:18px;
  z-index:2;
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(21,20,18,.7);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast);
}
.photo-lightbox-close:hover{background:var(--accent);}
.photo-lightbox-close svg{width:18px;height:18px;}
.photo-lightbox-nav{
  position:absolute; top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(21,20,18,.55);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast);
}
.photo-lightbox-nav:hover{background:var(--accent);}
.photo-lightbox-nav svg{width:22px;height:22px;}
.photo-lightbox-prev{left:18px;}
.photo-lightbox-next{right:18px;}

@media (max-width:640px){
  .photo-lightbox{padding:12px;}
  .photo-lightbox-nav{width:44px;height:44px;}
  .photo-lightbox-nav svg{width:18px;height:18px;}
  .photo-lightbox-prev{left:8px;}
  .photo-lightbox-next{right:8px;}
  .photo-lightbox-close{top:10px;right:10px;}
}