/* The Bombay Nest: shared styles.
   Change the brand colours here, in one place. */
:root{
  --navy:#1B2A47;
  --navy-deep:#121C33;
  --ivory:#F7F3EC;
  --stone:#ECE6DA;
  --accent:#B08D4F;        /* brass. To try a warmer coral, use #C2674F */
  --accent-deep:#876A36;
  --muted:#4A5670;
  --line:rgba(27,42,71,.16);
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:17px;line-height:1.65;color:var(--navy);background:var(--ivory);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:min(1160px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--ivory);padding:10px 16px;z-index:50}
.skip:focus{left:8px}

/* Header */
.site-header{background:var(--ivory);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.nav .logo img{height:54px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none}
.nav ul a{text-decoration:none;font-weight:500;font-size:16px;padding:6px 0;border-bottom:2px solid transparent}
.nav ul a:hover,.nav ul a[aria-current="page"]{border-color:var(--accent)}
.menu-btn{display:none;font:inherit;font-weight:600;background:none;border:1px solid var(--navy);padding:8px 16px;color:var(--navy);cursor:pointer}

/* Buttons and links */
.btn{display:inline-block;font:inherit;font-weight:600;font-size:16px;text-decoration:none;padding:14px 26px;border:1px solid var(--navy);background:var(--navy);color:var(--ivory);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--navy-deep)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--ivory)}
.btn.light{background:var(--ivory);color:var(--navy);border-color:var(--ivory)}
.btn.light:hover{background:var(--stone)}
.btn.ghost-light{background:transparent;color:var(--ivory);border-color:var(--ivory)}
.btn.ghost-light:hover{background:var(--ivory);color:var(--navy)}
.btn.small{padding:10px 20px;font-size:15px}
.textlink{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}

/* Type */
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.012em;line-height:1.1}
h1{font-size:clamp(40px,5.6vw,76px)}
h2{font-size:clamp(32px,3.8vw,50px)}
h3{font-size:26px;font-weight:400;line-height:1.2}
.lead{font-size:19px;max-width:46ch;color:var(--muted)}
section{padding:92px 0}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px;margin-bottom:44px}

/* Hero */
.hero{background:var(--stone);padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{max-width:14ch}
.hero .lead{margin-top:26px}
.hero .actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.nest{justify-self:end;width:min(100%,460px);aspect-ratio:1;border-radius:50%;background:var(--ivory);display:grid;place-items:center}
.nest img{width:82%}

/* Residential / commercial split */
.split{padding:0}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:none;margin:0}
.panel{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:72px max(24px,calc((100vw - 1160px)/2)) 72px 56px;text-decoration:none;min-height:340px}
.panel:first-child{padding-left:max(24px,calc((100vw - 1160px)/2));padding-right:56px}
.panel h2{font-size:clamp(30px,3.4vw,44px)}
.panel p{max-width:34ch;margin-top:14px}
.panel.res{background:var(--ivory)}
.panel.com{background:var(--navy);color:var(--ivory)}
.panel .textlink{align-self:start}
.panel.com .textlink{text-decoration-color:var(--accent)}
.panel:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:28px;margin-bottom:36px}
.fgroup{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fgroup span{font-size:15px;color:var(--muted);margin-right:4px}
.chip{font:inherit;font-weight:500;font-size:15px;padding:8px 18px;border:1px solid var(--line);background:transparent;color:var(--navy);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.empty{display:none;padding:40px 0;color:var(--muted)}
.empty.show{display:block}

/* Listing cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:44px 32px}
.card{display:block;text-decoration:none}
.card[hidden]{display:none}
.thumb{position:relative;aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;background:var(--navy);display:grid;place-items:center}
.thumb img.ph{width:62%;opacity:.28}
.thumb img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .soon{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:14px;color:#DCD3C0}
.card h3{margin-top:22px}
.card .where{margin-top:6px;color:var(--muted);font-size:16px}
.card .price{margin-top:10px;font-weight:600;font-size:18px}
.card .tags{margin-top:6px;font-size:14px;color:var(--accent-deep);font-weight:600}
.card:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.note{margin-top:40px;font-size:15px;color:var(--muted);max-width:70ch}

/* Approach */
.approach{background:var(--stone)}
.approach .cols{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.approach dl{display:grid;gap:0;border-top:1px solid var(--line)}
.approach dt{font-family:var(--display);font-size:26px;font-weight:400;padding-top:24px}
.approach dd{padding:6px 0 24px;border-bottom:1px solid var(--line);max-width:52ch;color:var(--muted)}

/* Quote band */
.quote{background:var(--navy);color:var(--ivory);text-align:left}
.quote blockquote{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.2;max-width:24ch}
.quote .textlink{display:inline-block;margin-top:32px}

/* CTA band */
.cta{background:var(--stone)}
.cta .wrap{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:center}
.cta .actions{display:flex;gap:14px;flex-wrap:wrap}

/* Inner pages */
.page-head{background:var(--stone);padding:64px 0 56px}
.page-head p{margin-top:18px}
.page-head h1{font-size:clamp(36px,4.8vw,62px)}
.crumbs{font-size:15px;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.prose{max-width:62ch}
.prose p + p{margin-top:20px}
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.about-photo{aspect-ratio:4/5;border-radius:999px 999px 0 0;background:var(--navy);display:grid;place-items:center;overflow:hidden}
.about-photo img{width:60%;opacity:.3}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:8px}
.vm h3{margin-bottom:12px}

/* Property page */
.prop{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.gallery{display:grid;gap:16px}
.gallery .big{aspect-ratio:4/3;background:var(--navy);display:grid;place-items:center;position:relative;overflow:hidden}
.gallery .big img.ph{width:34%;opacity:.28}
.gallery .big img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery .big .soon{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:14px;color:#DCD3C0}
.facts{margin-top:32px;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted)}
.facts dd{font-weight:600;text-align:right}
.aside{background:var(--stone);padding:32px;position:sticky;top:24px}
.aside .price{font-family:var(--display);font-size:38px;font-weight:300;margin:6px 0 4px}
.aside .sub{color:var(--muted);margin-bottom:24px}
.aside .btn{width:100%;text-align:center;margin-bottom:12px}

/* Forms */
form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:7px;font-weight:500;font-size:15px}
input,select,textarea{font:inherit;font-weight:400;padding:13px 14px;border:1px solid rgba(27,42,71,.35);background:var(--ivory);color:var(--navy);border-radius:0;width:100%}
textarea{min-height:120px;resize:vertical}
.form-msg{font-size:15px;color:var(--accent-deep);min-height:1.5em}
.hp{position:absolute;left:-9999px}
.details{margin-top:28px;display:grid;gap:8px}
.details a{text-underline-offset:4px}

/* Footer */
.site-footer{background:var(--navy-deep);color:#C9D0DE;padding:64px 0 36px;font-size:15px}
.site-footer .top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px}
.site-footer img{height:64px;width:auto}
.site-footer h4{font-family:var(--body);font-size:16px;font-weight:600;color:var(--ivory);margin-bottom:12px}
.site-footer ul{list-style:none;display:grid;gap:8px}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .fine{margin-top:48px;padding-top:24px;border-top:1px solid rgba(247,243,236,.16);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:14px;color:#9AA4BA}

@media (max-width:900px){
  .hero .wrap,.approach .cols,.two,.prop,.vm{grid-template-columns:1fr;gap:44px}
  .nest{justify-self:start;width:min(100%,340px)}
  .split .wrap{grid-template-columns:1fr}
  .panel,.panel:first-child{padding:56px 24px}
  .aside{position:static}
  .site-footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  body{font-size:16px}
  section{padding:68px 0}
  .menu-btn{display:block}
  .nav{flex-wrap:wrap}
  .nav nav{display:none;width:100%;order:3}
  .nav nav.open{display:block}
  .nav ul{flex-direction:column;gap:6px;padding:12px 0}
  .nav .enquire{display:none}
  .grid,.row2,.site-footer .top{grid-template-columns:1fr}
  .nav .logo img{height:46px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}