:root{
  --green:#001a03; --green2:#0a2a0d; --green3:#0d3312;
  --gold:#C5A059; --gold2:#E5C687;
  --cream:#FDFCFB; --sand:#F4F1EA; --muted:#6b7280; --muted2:#9ca3af;
  --line:rgba(197,160,89,.28);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--green);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--gold);color:var(--green)}
img{display:block}
@keyframes kburns{0%{transform:scale(1.06)}50%{transform:scale(1.14) translate(-1.2%,-1%)}100%{transform:scale(1.06)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gpulse{0%,100%{box-shadow:0 0 0 0 rgba(197,160,89,.45)}50%{box-shadow:0 0 0 16px rgba(197,160,89,0)}}
@keyframes tbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes scrolldot{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(14px);opacity:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* accordion */
.kat-acc-item{border-bottom:1px solid var(--line)}
.kat-acc-btn{width:100%;background:none;border:none;text-align:left;padding:1.4rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:'Playfair Display',serif;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--green);transition:color .3s var(--ease)}
.kat-acc-btn:hover{color:var(--gold)}
.kat-acc-btn i{color:var(--gold);transition:transform .4s var(--ease);font-size:.85rem}
.kat-acc-item.open .kat-acc-btn i{transform:rotate(180deg)}
.kat-acc-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.kat-acc-body-inner{padding:0 0 1.6rem;color:var(--muted);font-weight:300;line-height:1.85;font-size:.98rem;max-width:52rem}

/* focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* footer link drop columns */
.kat-foot-drop{margin:0}
.kat-foot-drop summary{list-style:none;cursor:default;font-size:10px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.kat-foot-drop summary::-webkit-details-marker{display:none}
.kat-foot-drop summary::after{content:'';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.7rem;color:var(--gold);opacity:0;transition:transform .3s var(--ease);margin-left:auto}
.kat-foot-drop ul{transition:opacity .3s var(--ease)}

/* ═══ MOBILE ═══ */
@media (max-width: 900px){
  /* nav padding tighter */
  #kat-nav{padding:1rem 1.2rem !important}
  #kat-nav img{height:52px !important}
  /* section paddings shrink */
  section{padding-left:1.2rem !important;padding-right:1.2rem !important}
  #kat-nav, #kat-nav *{padding-left:unset;padding-right:unset}
  #kat-drawer, #kat-drawer *{padding-left:unset;padding-right:unset}
  /* hero content centered on mobile */
  #top > div:not([id]), #top > div[style*="z-index:3"]{text-align:center}
  #top [style*="max-width:760px"]{max-width:100% !important;margin:0 auto}
  #top h1{text-align:center}
  #top p{text-align:center;margin-left:auto !important;margin-right:auto !important}
  #top [style*="display:flex"][style*="align-items:center"][style*="gap:.85rem"]{justify-content:center}
  #top [style*="display:flex"][style*="flex-wrap:wrap"]{justify-content:center}
  /* feature rail items centered */
  #top [style*="max-width:96px"]{align-items:center !important;text-align:center}
  /* stats band cells lose right borders (they look wrong when stacked) */
  #top [style*="border-right:1px solid rgba(197,160,89"]{border-right:none !important;padding-right:0 !important}
  /* villa scroll — reveal the scroll affordance */
  #kat-villa-scroll, #kat-video-scroll{scroll-snap-type:x mandatory}
  #kat-villa-scroll > div, #kat-video-scroll > div{scroll-snap-align:start}
  /* horizontal-scroll rows: allow container to overflow the padded body */
  #kat-villa-scroll{padding-left:1.2rem;padding-right:1.2rem}
  /* prevent all images from busting the layout */
  img{max-width:100%;height:auto}
  /* video hero: keep the video 16:9-ish so it isn't stretched */
  #kat-hero-video{object-position:center 30%}
  /* News side-by-side becomes stack */
  [style*="grid-template-columns:repeat(auto-fit,minmax(320px"]{grid-template-columns:1fr !important}
  /* Any two-col hero/lifestyle grids */
  [style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr !important}
  /* reduce oversized top padding on hero */
  #top{padding-top:5rem !important;padding-bottom:1.5rem !important}
  /* CTA buttons full-ish width */
  #top a[href="/villa-collection/"], #top a[href="/contact/"]{flex:1 1 auto;justify-content:center}
  /* footer drop columns become collapsible */
  .kat-foot-drop summary{cursor:pointer;justify-content:center}
  .kat-foot-drop summary::after{content:'\f107';opacity:1;margin-left:.4rem}
  .kat-foot-drop[open] summary::after{transform:rotate(180deg)}
  .kat-foot-drop:not([open]) ul{display:none}

  /* footer grid stacks + fully centered */
  footer [style*="grid-template-columns:repeat(auto-fit,minmax(200px"]{grid-template-columns:1fr !important;text-align:center}
  footer [style*="display:flex"][style*="gap:.7rem"]{justify-content:center}
  footer ul{align-items:center}
  footer h5, footer p, footer a{text-align:center}
  footer p{max-width:none !important;margin-left:auto !important;margin-right:auto !important}
  footer img{margin-left:auto;margin-right:auto}
  footer [style*="display:flex;flex-wrap:wrap"][style*="justify-content:space-between"]{justify-content:center !important;text-align:center}

  /* Stats band items centered on mobile */
  #top [style*="display:flex"][style*="align-items:center"][style*="gap:1.1rem"]{justify-content:center}

  /* All section content centered on mobile by default (inherits down) */
  section{text-align:center}
  /* But horizontal-scroll rows keep their layout */
  #kat-villa-scroll, #kat-video-scroll{text-align:left}

  /* Flex rows with icon-left / text-right (address, contact rows) — stack vertically */
  section [style*="display:flex"][style*="align-items:flex-start"][style*="gap:1rem"]{flex-direction:column !important;align-items:center !important;text-align:center}
  section [style*="display:flex"][style*="align-items:flex-start"][style*="gap:1rem"] i{margin-top:0 !important}

  /* Broad content-centering: cards, stat rows, icon columns */
  section [style*="background:#fff"][style*="padding"],
  section [style*="background:var(--sand)"][style*="padding"],
  section [style*="border-top:2px solid var(--gold)"],
  section [style*="border:1px solid rgba(197,160,89"],
  section [style*="border-left:1px solid var(--line)"]{text-align:center !important}
  section [style*="background:#fff"][style*="padding"] *,
  section [style*="background:var(--sand)"][style*="padding"] *,
  section [style*="border-top:2px solid var(--gold)"] *,
  section [style*="border:1px solid rgba(197,160,89"] *,
  section [style*="border-left:1px solid var(--line)"] *{text-align:center !important}

  /* inner headings, paragraphs, spans center */
  section h3, section h4, section h5{text-align:center}
  section [style*="border-top:2px solid var(--gold)"] p,
  section [style*="background:#fff"][style*="padding"] p,
  section [style*="background:var(--sand)"][style*="padding"] p{text-align:center}

  /* icons that sit as block-level markers — force block full-width with text-align center on the icon itself so its glyph centers */
  section i[style*="display:block"]{display:block !important;width:100% !important;text-align:center !important}

  /* flex rows inside cards / lists become centered */
  section [style*="display:flex"][style*="align-items:center"]{justify-content:center !important}
  /* extra: reset any left-hugging gap items so icon+text group sits centered */
  section [style*="display:flex"][style*="align-items:center"][style*="border-right"]{border-right:none !important;padding-right:0 !important}

  /* Hero stat rows (masterplan/homepage): stack icon on top, text below, all centered */
  section [style*="display:flex"][style*="align-items:center"][style*="gap:1rem"],
  section [style*="display:flex"][style*="align-items:center"][style*="gap:1.1rem"]{flex-direction:column !important;text-align:center;gap:.5rem !important;padding-right:0 !important}
  section [style*="display:flex"][style*="align-items:baseline"]{justify-content:center !important}

  /* Story left border strip removed on mobile since text is centered */
  section [style*="border-left:1px solid var(--line)"]{border-left:none !important;padding-left:0 !important}

  /* labels/tags with left-aligned decorative rule bars — center them */
  section [style*="width:44px;height:1px"], section [style*="width:54px;height:1px"]{margin-left:auto;margin-right:auto}

  /* Our Story: image before text on mobile */
  #story{grid-template-columns:1fr !important}
  #story > div:first-child{order:2}
  #story > div:last-child{order:1}
  /* chat widget doesn't dominate */
  #kat-chat{width:calc(100vw - 2rem) !important;right:1rem !important;left:1rem !important}
}

@media (max-width: 560px){
  /* Section padding even tighter */
  section{padding-left:1rem !important;padding-right:1rem !important}
  /* Concierge button smaller */
  #kat-chat-toggle{width:3rem !important;height:3rem !important;font-size:1.1rem !important;bottom:1rem !important;right:1rem !important}
  #kat-top{bottom:1rem !important;left:1rem !important;width:2.6rem !important;height:2.6rem !important}
  /* Hero H1 tighter still */
  #top h1{font-size:clamp(1.9rem,7.5vw,2.4rem) !important;line-height:1.1 !important}
}