/* Fort Kochi Homes — shared styles */
:root{
  --sea:#0D3A42;        /* Arabian sea at dusk */
  --deep:#07262C;       /* deep water */
  --sand:#EDE4CF;       /* shore sand */
  --sand-2:#E3D7BC;     /* wet sand */
  --brass:#C79136;      /* net lanterns, temple brass */
  --brass-soft:#DDB061;
  --chilli:#A8402B;     /* spice-trade red */
  --ink:#16292D;
  --line:rgba(13,58,66,.18);
  --line-light:rgba(237,228,207,.22);
  --radius:14px;
  --display:'Fraunces',Georgia,serif;
  --body:'Karla',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--sand);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--chilli)}
.on-dark .eyebrow{color:var(--brass-soft)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.5rem 0 1rem}
h3{font-size:1.35rem}
p.lede{max-width:56ch}
.btn{display:inline-block;font-family:var(--body);font-weight:700;font-size:.95rem;letter-spacing:.03em;
  padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .15s ease,background .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-brass{background:var(--brass);color:var(--deep)}
.btn-brass:hover{background:var(--brass-soft)}
.btn-ghost{background:transparent;color:var(--sand);border-color:var(--sand)}
.btn-ghost:hover{background:rgba(237,228,207,.12)}
.btn-outline{background:transparent;color:var(--sea);border-color:var(--sea)}
.btn-outline:hover{background:var(--sea);color:var(--sand)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--deep);border-bottom:1px solid var(--line-light)}
.nav{display:flex;align-items:center;gap:1.5rem;padding:.7rem 24px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand svg{width:46px;height:46px;flex:none}
.brand-name{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--sand);line-height:1.05}
.brand-tag{font-size:.6rem;letter-spacing:.26em;color:var(--brass-soft);text-transform:uppercase}
nav.links{display:flex;gap:1.4rem;align-items:center}
nav.links a{color:var(--sand);text-decoration:none;font-size:.92rem;font-weight:500;opacity:.85}
nav.links a:hover,nav.links a[aria-current=page]{opacity:1;color:var(--brass-soft)}
.menu-btn{display:none;background:none;border:0;color:var(--sand);font-size:1.7rem;cursor:pointer;line-height:1}
@media(max-width:900px){
  nav.links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--deep);
    flex-direction:column;padding:1rem 24px 1.4rem;gap:1rem;border-bottom:1px solid var(--line-light)}
  nav.links.open{display:flex}
  .menu-btn{display:block}
}

/* ---------- home hero (compact, art behind text) ---------- */
.hero{background:linear-gradient(180deg,#082129 0%,#0A2E37 45%,var(--sea) 100%);color:var(--sand);
  position:relative;overflow:hidden;min-height:clamp(430px,56vh,560px);display:flex;align-items:center}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:2.5rem;padding-bottom:2.5rem}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:16ch}
.hero h1 em{font-style:italic;color:var(--brass-soft)}
.hero p{max-width:48ch;margin:.9rem 0 1.4rem;font-size:1.03rem;opacity:.95}
.hero h1,.hero p{text-shadow:0 2px 18px rgba(7,33,41,.75)}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-art{position:absolute;right:0;bottom:0;height:100%;width:auto;aspect-ratio:1200/560;
  max-width:none;z-index:1;pointer-events:none;opacity:.9;overflow:visible}
.net-arm{transform-box:view-box;transform-origin:430px 300px;animation:dip 9s ease-in-out infinite}
.net-arm-far{transform-box:view-box;transform-origin:118px 384px;animation:dip 11s ease-in-out -3s infinite}
@keyframes dip{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.6deg)}}
@media(prefers-reduced-motion:reduce){.net-arm,.net-arm-far{animation:none}.btn:hover{transform:none}}

/* ---------- subpage hero ---------- */
.page-hero{background:linear-gradient(180deg,#082129,var(--sea));color:var(--sand);padding:3.2rem 0 2.6rem;border-bottom:4px solid var(--brass)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:20ch}
.page-hero p{max-width:58ch;margin-top:1rem;opacity:.92}
.crumbs{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:1rem}
.crumbs a{color:var(--brass-soft);text-decoration:none}

/* ---------- intro strip ---------- */
.strip{background:var(--sand);padding:3.2rem 0 2.6rem;border-bottom:1px solid var(--line)}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1.6rem}
.strip-item{border-top:2px solid var(--brass);padding-top:.9rem}
.strip-item strong{font-family:var(--display);font-size:1.15rem;display:block;margin-bottom:.25rem;color:var(--sea)}
@media(max-width:720px){.strip-grid{grid-template-columns:1fr}}

/* ---------- stays ---------- */
.stays{padding:4rem 0 3.5rem;background:var(--sand)}
.stay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.8rem;margin-top:2rem}
.stay-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.stay-card .photo{aspect-ratio:16/10;object-fit:cover;width:100%}
.stay-card .body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.stay-card .tagline{color:var(--chilli);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{font-size:.78rem;font-weight:500;background:var(--sand);border:1px solid var(--line);padding:.28rem .7rem;border-radius:999px}
.stay-card .actions{margin-top:auto;display:flex;gap:.7rem;flex-wrap:wrap;padding-top:.4rem}

/* ---------- property page ---------- */
.property{padding:3.5rem 0}
.prop-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.prop-head p{max-width:60ch;margin-top:.6rem}
.amenities{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 2rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:2.6rem}
.gallery img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:10px;cursor:zoom-in;transition:transform .2s}
.gallery img:hover{transform:scale(1.02)}
.gallery img:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
@media(max-width:720px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* tariff table */
.tariff{background:var(--deep);color:var(--sand);border-radius:var(--radius);padding:1.8rem;overflow-x:auto}
.tariff h3{color:var(--brass-soft);display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.tariff .season{font-family:var(--body);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
table{width:100%;border-collapse:collapse;margin-top:1rem;font-variant-numeric:tabular-nums;min-width:560px}
th{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;text-align:left;color:var(--brass-soft);
  padding:.6rem .8rem;border-bottom:1px solid var(--line-light)}
td{padding:.85rem .8rem;border-bottom:1px solid rgba(237,228,207,.1);font-size:.97rem}
td.rate{font-family:var(--display);font-size:1.15rem;color:var(--brass-soft);white-space:nowrap}
td.note{opacity:.75;font-size:.88rem}
tr:last-child td{border-bottom:0}
.tariff-foot{font-size:.82rem;opacity:.65;margin-top:1rem}

/* ---------- booking ---------- */
.booking{background:var(--sea);color:var(--sand);padding:4.5rem 0}
.book-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;align-items:start;margin-top:2rem}
@media(max-width:860px){.book-grid{grid-template-columns:1fr}}
.book-side p{opacity:.9;max-width:44ch;margin-bottom:1.2rem}
.book-side .contact-line{display:flex;gap:.7rem;align-items:baseline;margin:.5rem 0;font-size:.98rem}
.book-side .contact-line span{color:var(--brass-soft);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;min-width:64px}
form{background:var(--deep);border-radius:var(--radius);padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:560px){form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1/-1}
label{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-soft)}
input,select,textarea{font-family:var(--body);font-size:.98rem;color:var(--sand);background:rgba(237,228,207,.07);
  border:1px solid var(--line-light);border-radius:8px;padding:.7rem .85rem}
input::placeholder,textarea::placeholder{color:rgba(237,228,207,.4)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23DDB061' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
select option{color:var(--ink)}
textarea{resize:vertical;min-height:90px}
.form-actions{grid-column:1/-1;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.form-note{font-size:.82rem;opacity:.7;grid-column:1/-1}
.mail-fallback{color:var(--brass-soft)}

/* ---------- reach + footer ---------- */
.reach{padding:4rem 0;background:var(--sand)}
.reach-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;margin-top:1.5rem}
@media(max-width:820px){.reach-grid{grid-template-columns:1fr}}
.reach-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.reach-card h3{color:var(--sea);margin-bottom:.6rem}
footer{background:var(--deep);color:var(--sand);padding:3rem 0 2rem}
.foot-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:start}
.foot-brand{display:flex;gap:.9rem;align-items:center}
.foot-brand svg{width:56px;height:56px}
footer small{display:block;margin-top:2rem;opacity:.55;font-size:.8rem}
footer a{color:var(--brass-soft);text-decoration:none}

/* ---------- content pages (Fort Kochi / Things to do) ---------- */
.article{padding:3.6rem 0;background:var(--sand)}
.article .wrap{max-width:880px}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:2.4rem;color:var(--sea)}
.article p{margin:.9rem 0;max-width:68ch}
.article .fact{border-left:3px solid var(--brass);background:#fff;padding:1rem 1.3rem;border-radius:0 10px 10px 0;margin:1.4rem 0;font-size:.97rem}
.todo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem;margin-top:2rem}
.todo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.todo-card h3{color:var(--sea);font-size:1.2rem}
.todo-card .meta{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--chilli)}
.todo-card p{font-size:.95rem}
.todo-card .dist{margin-top:auto;padding-top:.7rem;font-size:.82rem;color:var(--sea);opacity:.8;border-top:1px dashed var(--line)}
.cta-band{background:var(--deep);color:var(--sand);padding:3rem 0;text-align:center}
.cta-band h2{margin-bottom:1.4rem}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(7,38,44,.93);display:none;align-items:center;justify-content:center;z-index:100;padding:4vw;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-height:88vh;max-width:92vw;border-radius:10px}