/* Fonts are stored on this site (assets/fonts) rather than loaded from Google, so text never jumps as fonts arrive and no visitor data goes to Google. latin-ext only downloads if a page uses an accented character it covers. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(../assets/fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(../assets/fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/marcellus-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/marcellus-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Makan Real Estate — site styles
   Layout: quiet off-white pages, generous margins, one dark band per page for contrast.
   Brand: Marcellus (display), Jost (text), deep gold on porcelain. */
:root{
  --porcelain:#F6F5F2; --paper:#FFFFFF; --sand:#ECE9E3;
  --onyx:#141311; --graphite:#2B2A27; --slate:#47433E; --stone:#8A867F; --mist:#D9D6D0;
  --gold:#C2A06B; --gold-deep:#9C7B48;
  --line:rgba(43,42,39,.12); --line-dark:rgba(194,160,107,.22);
  --display:"Marcellus","Optima","Palatino Linotype",serif;
  --text:"Jost","Helvetica Neue",Arial,sans-serif;
  --max:1200px;
  color-scheme:light;
}
*{box-sizing:border-box}
/* no blue flash when tapping buttons and links on phones */
html{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--porcelain);color:var(--graphite);font-family:var(--text);font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--onyx);margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(38px,5.4vw,68px);line-height:1.06}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.12}
h3{font-size:24px;line-height:1.25}
p{margin:0;max-width:62ch}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
/* section label: centred, with a divider-style underline that runs past both ends of the text */
.eyebrow{display:inline-block;font-size:14px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);justify-self:center;padding:0 56px 12px;border-bottom:1px solid currentColor;max-width:100%}
@media (max-width:480px){.eyebrow{padding-inline:28px}}

/* centred section headings and intros (the hero keeps its own alignment) */
.section-head{text-align:center;justify-items:center;margin-inline:auto}
.section-head p{margin-inline:auto}
.split .copy,.contact-card{text-align:center;justify-items:center}
.split .copy p,.contact-card p{margin-inline:auto}
.split .copy .btns{justify-content:center}
.contact-card .contact-lines{width:100%;text-align:left}
.included h3{text-align:center}
.lede{font-size:19px;color:var(--slate)}
.muted{color:var(--slate)}
.skip{position:absolute;left:-999px;top:8px;background:var(--onyx);color:var(--porcelain);padding:8px 14px;z-index:100}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:16px 26px;border:1px solid var(--onyx);background:var(--onyx);color:var(--porcelain);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn.ghost{background:transparent;color:var(--onyx)}
.btn.ghost:hover{background:var(--onyx);color:var(--porcelain);border-color:var(--onyx)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--onyx)}
.btn.gold:hover{background:var(--porcelain);border-color:var(--porcelain)}
.btn.line-light{background:transparent;border-color:var(--line-dark);color:var(--porcelain)}
.btn.line-light:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(246,245,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(20,19,17,.1)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.brand img{width:150px;height:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-size:13px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);padding-block:6px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--onyx)}
/* desktop menu: the gold underline grows out from the centre on hover (and stays under the current page) */
@media (min-width:981px){
  .nav a:not(.btn){position:relative;border-bottom:0}
  .nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-deep);transform:scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.33,1,.68,1)}
  .nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
}
.nav .btn{padding:12px 18px;border-bottom:1px solid var(--onyx);color:var(--porcelain)}
.nav .btn:hover{color:var(--porcelain)}
/* three gold bars (the "sandwich"); while the menu is open the top and bottom bars turn into a cross and the middle one fades */
.menu-btn{display:none;position:relative;width:46px;height:46px;margin-right:-8px;padding:0;background:none;border:0;cursor:pointer;color:var(--gold-deep)}
.menu-btn .bar{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .25s ease}
.menu-btn .bar:nth-child(1){top:15px}
.menu-btn .bar:nth-child(2){top:22px}
.menu-btn .bar:nth-child(3){top:29px}
.menu-btn[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bar:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-btn[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-btn:focus:not(:focus-visible){outline:none}
@media (max-width:980px){
  .menu-btn{display:block;flex:none}
  /* the menu slides down from under the header: clipped to nothing when closed, revealed top to bottom when open */
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--porcelain);border-bottom:1px solid var(--line);padding:8px max(20px,env(safe-area-inset-right,0px)) 20px max(20px,env(safe-area-inset-left,0px));
    clip-path:inset(0 0 100% 0);visibility:hidden;opacity:0;transform:translateY(-6px);will-change:clip-path,transform,opacity;
    transition:clip-path .5s cubic-bezier(.33,1,.68,1),transform .5s cubic-bezier(.33,1,.68,1),opacity .35s ease,visibility 0s linear .5s}
  .site-header.open .nav{clip-path:inset(0 0 0 0);visibility:visible;opacity:1;transform:none;transition:clip-path .55s cubic-bezier(.33,1,.68,1),transform .55s cubic-bezier(.33,1,.68,1),opacity .3s ease,visibility 0s}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:16px}
}

/* sections */
section{padding-block:clamp(56px,7.5vw,96px)}
.section-head{display:grid;gap:18px;margin-bottom:44px;max-width:760px}
.band-dark{background:var(--onyx);color:var(--mist)}
.band-dark h2,.band-dark h3{color:var(--porcelain)}
.band-dark .eyebrow{color:var(--gold)}
.band-dark .muted{color:#CBC6BD}
.band-dark .lede{color:#D6D1C8}
.band-sand{background:var(--sand)}

/* photo hero: text sits over the darker left side, with a gradient to keep it readable */
.hero-photo{position:relative;isolation:isolate;min-height:min(78vh,760px);display:flex;align-items:flex-end;padding-block:clamp(96px,14vw,160px) clamp(56px,8vw,96px);background:var(--onyx);color:var(--mist);overflow:hidden}
.hero-photo .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;z-index:-2}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(20,19,17,.88) 0%,rgba(20,19,17,.66) 42%,rgba(20,19,17,.15) 75%,rgba(20,19,17,0) 100%),
  linear-gradient(0deg,rgba(20,19,17,.7) 0%,rgba(20,19,17,0) 45%)}
.hero-photo .wrap{width:100%}
.hero-photo .hero-copy{max-width:none}
/* each headline phrase always stays on its own single line; the size scales with the screen so it fits */
.hero-photo h1{color:var(--porcelain);text-shadow:0 2px 24px rgba(0,0,0,.35);font-size:clamp(20px,5.4vw,52px);line-height:1.15}
.hero-photo h1 span{display:block;white-space:nowrap}
.hero-photo .lede{color:#E2DED6}
.hero-photo .credit{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:12px;font-size:11px;letter-spacing:.06em;color:rgba(246,245,242,.55)}
.hero-copy{display:grid;gap:28px;align-content:center}
@media (max-width:700px){
  .hero-photo{min-height:auto}
  .hero-photo .bg{object-position:28% 50%}
  .hero-photo::before{background:linear-gradient(0deg,rgba(20,19,17,.92) 0%,rgba(20,19,17,.75) 55%,rgba(20,19,17,.35) 100%)}
}
.skyline{width:100%;height:auto;aspect-ratio:4/5;max-width:340px;max-height:425px;object-fit:cover;object-position:center 70%;justify-self:center}
@media (max-width:860px){.skyline{aspect-ratio:1/1;max-width:340px;max-height:none}}
.features.centered .feature{text-align:center;justify-items:center}
.features.centered .feature p{margin-inline:auto}

/* downloadable guide */
.guide-cover { display: block; justify-self: center; width: 100%; max-width: 360px; transition: transform .3s ease; }
.guide-cover img { width: 100%; height: auto; box-shadow: 0 24px 50px rgba(0,0,0,.5); border: 1px solid rgba(194,160,107,.35); }
.guide-cover:hover { transform: translateY(-4px); }
.guide-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 46ch; margin-inline: auto; }
.guide-points li { color: #D6D1C8; }
.guide-points li::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); margin: 0 10px 2px 0; }
.guide-meta { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #A8A39A; }
@media (max-width: 860px) { .guide-cover { max-width: 280px; } }
/* phones and tablets: "Your free guide" sits above the cover picture; computers show it beside the cover */
.guide-eyebrow-top { display: none; }
@media (max-width: 860px) { .guide-eyebrow-top { display: inline-block; justify-self: center; } .guide .copy .guide-eyebrow { display: none; } }
/* guide sign-up: name and email on one line with the button on computers, stacked on phones */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.guide-form { display: grid; gap: 14px; width: 100%; max-width: 620px; justify-self: center; }
.guide-cta { color: #D6D1C8; max-width: 52ch; }
.guide-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.guide-fields input { font: inherit; font-size: 16px; font-weight: 300; color: var(--onyx); background: var(--porcelain); border: 1px solid var(--line-dark); border-radius: var(--r-sm, 8px); padding: 13px 16px; width: 100%; min-width: 0; }
.guide-fields input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(194,160,107,.3); }
.guide-fields .btn { white-space: nowrap; }
.guide-fine { font-size: 13px; color: #A8A39A; }
.guide-fine a, .guide-other a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.guide-form.sending .btn { opacity: .6; pointer-events: none; }
.guide-error { font-size: 14px; color: #E8A598; }
.guide-ready { display: grid; gap: 18px; justify-items: center; }
.guide-ready[hidden], .guide-form[hidden] { display: none; }
.guide-thanks { color: var(--porcelain); max-width: 52ch; }
.guide-other { font-size: 14px; color: #A8A39A; }
@media (max-width: 640px) { .guide-fields { grid-template-columns: 1fr; } .guide-fields .btn { width: 100%; justify-content: center; } }

/* About: founder portrait and message */
/* the portrait's background matches the page (porcelain), so it sits straight on the section: no frame, no crop */
.founder { width: 100%; height: auto; max-width: 340px; justify-self: center; border-radius: 0 !important; background: none; }
.founder-word { margin: 0; display: grid; gap: 16px; }
.founder-word p { font-family: var(--display); font-size: 21px; line-height: 1.55; color: var(--onyx); margin-inline: auto; }
.founder-word p + p { font-family: var(--text); font-size: 17px; color: var(--slate); }
.founder-sign { display: grid; gap: 2px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.founder-sign span { font-family: var(--display); font-size: 22px; letter-spacing: .02em; text-transform: none; font-weight: 400; color: var(--onyx); }
@media (max-width: 860px) { .founder { max-width: 280px; } .founder-word p { font-size: 19px; } }
/* phones and tablets: gold heading, title, the founder's words, then the portrait, then name, role and button
   (desktop keeps the portrait beside the text) */
@media (max-width: 860px) {
  #about .split { gap: 24px; justify-items: center; text-align: center; }
  #about .copy { display: contents; }
  #about .copy .eyebrow { order: 1; justify-self: center; }
  #about .copy h2 { order: 2; }
  #about .founder-word { order: 3; }
  #about .founder { order: 4; margin-block: 8px 0; }
  #about .founder-sign { order: 5; }
  #about .copy .btns { order: 6; justify-content: center; }
}

/* legal pages: privacy policy, complaints procedure, terms of business */
.legal-hero { background: var(--onyx); color: var(--mist); padding-block: clamp(48px, 6.5vw, 80px); text-align: center; }
.legal-hero .wrap { display: grid; gap: 18px; justify-items: center; }
.legal-hero h1 { color: var(--porcelain); font-size: clamp(34px, 4.6vw, 54px); }
.legal-hero .eyebrow { color: var(--gold); }
.legal-hero p { color: #E2DED6; margin-inline: auto; font-size: 20px; line-height: 1.5; }
@media (max-width: 560px) { .legal-hero p { font-size: 18px; } }
.legal-doc { padding-block: clamp(48px, 6.5vw, 80px); }
.legal-doc .wrap { max-width: 820px; }
.legal-doc .doc { display: grid; gap: 18px; }
.legal-doc h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc h3 { font-size: 20px; margin-top: 8px; }
.legal-doc p, .legal-doc li { max-width: none; color: var(--graphite); }
.legal-doc ul, .legal-doc ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.legal-doc ul li::marker { color: var(--gold-deep); }
.legal-doc .meta { font-size: 14px; color: var(--slate); }
.legal-doc .box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r, 14px); padding: 22px 24px; display: grid; gap: 10px; }
.legal-doc .box.gold { border-color: var(--gold-deep); }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.legal-doc th { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.legal-doc .toc { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-doc .toc a { font-size: 14px; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .legal-doc table, .legal-doc tbody, .legal-doc tr, .legal-doc td { display: block; } .legal-doc thead { display: none; } .legal-doc td { border: 0; padding: 4px 0; } .legal-doc tr { padding-block: 12px; border-bottom: 1px solid var(--line); } .legal-doc td:first-child { font-weight: 500; color: var(--onyx); } }

/* printing or saving a legal page as PDF: keep the brand header, drop the menu and floating button */
@media print {
  @page { size: A4; margin: 12mm 0 14mm; background: #F6F5F2; }
  .wrap { padding-left: 16mm; padding-right: 16mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav, .menu-btn, .float-wrap, .skip { display: none !important; }
  .site-header { position: static; backdrop-filter: none; }
  .site-header .wrap { justify-content: center; } /* logo centred at the top of the document */
  .legal-doc h2, .legal-doc h3, .legal-doc .box, .legal-doc tr { break-inside: avoid; break-after: auto; }
  .legal-doc h2, .legal-doc h3 { break-after: avoid; }
  .legal-doc .doc { display: block; } /* block layout so headings stay with the text that follows */
  .legal-doc .doc > * + * { margin-top: 16px; }
}

/* "Makan" in brand gold within running text */
.brand-gold { color: var(--gold-deep); }

/* ===== Dark top bar (trial) =====
   Onyx bar with the reversed logo (gold MAKAN, light REAL ESTATE) and off-white menu. To go back to the light bar,
   delete this block and switch the header logo back to assets/makan-logo-primary.svg (the light version is saved in
   website-versions/v2-light-header). */
.site-header { background: rgba(20,19,17,.97); border-bottom-color: rgba(194,160,107,.28); box-shadow: 0 4px 20px rgba(20,19,17,.28); }
.nav a { color: #E2DED6; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--porcelain); }
.nav a:not(.btn)::after { background: var(--gold); }
.nav .btn { background: var(--gold); border-color: var(--gold); color: var(--onyx); }
.nav .btn:hover { background: var(--porcelain); border-color: var(--porcelain); color: var(--onyx); }
.menu-btn { color: var(--gold); }
@media (max-width: 980px) {
  .nav { background: var(--onyx); border-bottom-color: rgba(194,160,107,.28); }
  .nav a { border-bottom-color: rgba(246,245,242,.12); }
  .nav .btn { border-bottom: 1px solid var(--gold); }
}

/* floating "Contact us" button, bottom right on every page; opens two choices above it: WhatsApp or the online form */
.float-wrap { position: fixed; z-index: 40; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; transition: opacity .25s, transform .25s; }
.float-wrap.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.float-options { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.float-opt { display: flex; align-items: center; gap: 10px; text-decoration: none;
  opacity: 0; transform: translateY(14px) scale(.9); transform-origin: right bottom; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .3s cubic-bezier(.33,1,.68,1), visibility 0s linear .3s; }
.float-wrap.open .float-opt { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .25s ease, transform .35s cubic-bezier(.33,1,.68,1), visibility 0s; }
.float-wrap.open .float-opt:nth-child(2) { transition-delay: .05s; } /* the lower one first, the upper one just after */
.float-wrap.open .float-opt:nth-child(1) { transition-delay: .1s; }
.float-label { padding: 7px 12px; border-radius: var(--r-sm); background: var(--onyx); color: var(--porcelain); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(20,19,17,.12), 0 8px 18px rgba(20,19,17,.16); }
.float-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--onyx); border: 1.5px solid var(--gold); color: var(--gold);
  box-shadow: 0 3px 8px rgba(20,19,17,.12), 0 14px 30px rgba(20,19,17,.2); transition: background .2s, color .2s; }
.float-ic svg { width: 26px; height: 26px; }
.float-ic .ic-wa { width: 28px; height: 28px; }
/* the icons keep their own colours (WhatsApp's green logo, the white form), so a press or hover just lifts the ring */
.float-opt:active .float-ic { background: var(--graphite); border-color: var(--porcelain); }
@media (hover: hover) { .float-opt:hover .float-ic { background: var(--graphite); border-color: var(--porcelain); } }
.float-opt:focus:not(:focus-visible) { outline: none; }
.float-contact { display: inline-flex; cursor: pointer; font-family: inherit; align-items: center; gap: 10px; padding: 14px 20px; border: 1.5px solid var(--gold); border-radius: 14px;
  background: var(--onyx); color: var(--porcelain); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 3px 8px rgba(20,19,17,.12), 0 14px 30px rgba(20,19,17,.2); /* soft shadow so it looks like it floats */
  transition: opacity .25s, transform .25s, background .2s, color .2s; }
.float-contact::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
/* gold only while pressed (a brief flash when tapped), or on hover with a mouse; phones keep "hover" after a tap,
   so hover is limited to devices with a real pointer */
.float-contact:active, .float-contact.is-pressed { background: var(--gold); color: var(--onyx); }
.float-contact:active::before, .float-contact.is-pressed::before { background: var(--onyx); }
@media (hover: hover) { .float-contact:hover { background: var(--gold); color: var(--onyx); } .float-contact:hover::before { background: var(--onyx); } }
.float-contact:focus:not(:focus-visible) { outline: none; }
.float-contact::before { transition: transform .35s cubic-bezier(.33,1,.68,1); }
.float-contact[aria-expanded="true"]::before { transform: rotate(225deg); } /* the diamond turns while the choices are open */
@media (max-width: 560px) { .float-contact { padding: 12px 16px; font-size: 12px; } .float-ic { width: 50px; height: 50px; } }

/* full service list */
.included{margin-top:56px;display:grid;gap:24px}
.included h3{font-size:26px}
.included ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.included li{position:relative;padding:16px 0 16px 26px;border-bottom:1px solid var(--line);color:var(--graphite)}
.included li::before{content:"";position:absolute;left:2px;top:26px;width:7px;height:7px;background:var(--gold-deep);transform:rotate(45deg)}
@media (max-width:760px){.included ul{grid-template-columns:1fr}}

/* photo placeholders (stock photography to be licensed) */
.photo{position:relative;max-width:100%;overflow:hidden;background:
  radial-gradient(120% 80% at 70% 10%,rgba(255,255,255,.55),transparent 60%),
  linear-gradient(160deg,#D8D2C7 0%,#BDB4A6 55%,#9E9485 100%)}
.photo.tall{aspect-ratio:4/5}
.photo.wide{aspect-ratio:16/10}
.photo.dark{background:radial-gradient(120% 80% at 30% 0%,rgba(194,160,107,.22),transparent 60%),linear-gradient(160deg,#3A3732,#1B1A18)}
.photo svg.terrace{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;opacity:.55}
.photo .tag{position:absolute;left:16px;bottom:16px;background:rgba(246,245,242,.92);color:var(--slate);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px}
.photo.dark .tag{background:rgba(20,19,17,.8);color:var(--mist)}
.hero .photo::after{content:"";position:absolute;inset:18px;border:1px solid rgba(246,245,242,.6);pointer-events:none}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.feature{background:var(--porcelain);padding:34px 28px;display:grid;gap:14px;align-content:start}
.feature .ico{width:36px;height:36px;color:var(--gold-deep)}
.band-sand .feature{background:var(--sand)}
.features.two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Who we help: two plain centred columns with diamond bullets */
.who-help{display:grid;grid-template-columns:1fr 1fr;gap:48px;text-align:center}
.who-help h3{margin-bottom:20px}
.who-help ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:var(--slate);font-size:16px}
.who-help li::before{content:"";display:inline-block;width:7px;height:7px;background:var(--gold-deep);transform:rotate(45deg);margin:0 12px 2px 0}
@media (max-width:760px){.who-help{grid-template-columns:1fr}}
@media (max-width:860px){.features,.features.two{grid-template-columns:1fr}}

/* steps (a real sequence, so numbered) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0;border-top:1px solid var(--line-dark)}
.steps li{padding-block:28px 8px;padding-inline:0 24px;display:grid;gap:10px;align-content:start;position:relative}
.steps .n{font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.steps h3{font-size:21px}
.steps p{font-size:15px}
.steps li::before{content:"";position:absolute;top:-4px;inset-inline-start:0;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
/* desktop: six steps read down two columns (1–3 left, 4–6 right) so none sits on its own */
@media (min-width:761px){
  /* each column is a vertical timeline: one unbroken line on the left, a diamond marking each step */
  .steps.cols2{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:72px;row-gap:0;border-top:0}
  .steps.cols2 li{border-left:1px solid rgba(194,160,107,.5);padding:0 0 40px 40px}
  .steps.cols2 li:nth-child(3),.steps.cols2 li:nth-child(6){padding-bottom:0;border-left-color:transparent;background:linear-gradient(rgba(194,160,107,.5),rgba(194,160,107,.5)) left top / 1px 6px no-repeat}
  .steps.cols2 li::before{top:2px;inset-inline-start:-5px;width:9px;height:9px}
}
/* wider screens: one horizontal timeline, left to right. Steps alternate above (1, 3, 5) and below (2, 4, 6)
   the line, centred on a diamond that sits on the line. */
@media (min-width:961px){
  .steps.cols2{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto 26px auto;grid-auto-flow:row;column-gap:0}
  .steps.cols2::before{content:"";grid-row:2;grid-column:1/-1;align-self:center;height:1px;background:rgba(194,160,107,.5)}
  .steps.cols2 li,.steps.cols2 li:nth-child(3),.steps.cols2 li:nth-child(6){grid-row:1;align-self:end;border:0;background:none;padding:0 12px 24px;text-align:center;justify-items:center}
  .steps.cols2 li:nth-child(even){grid-row:3;align-self:start;padding:24px 12px 0}
  .steps.cols2 li:nth-child(1){grid-column:1}.steps.cols2 li:nth-child(2){grid-column:2}.steps.cols2 li:nth-child(3){grid-column:3}
  .steps.cols2 li:nth-child(4){grid-column:4}.steps.cols2 li:nth-child(5){grid-column:5}.steps.cols2 li:nth-child(6){grid-column:6}
  .steps.cols2 li::before{top:auto;bottom:-17px;inset-inline-start:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px}
  .steps.cols2 li:nth-child(even)::before{top:-17px;bottom:auto}
  .steps.cols2 p{margin-inline:auto}
}

/* phones: a centred vertical timeline. The line runs down the middle and each
   step's text box (same colour as the band) hides it, so the line shows only between steps. */
@media (max-width:760px){
  .steps{grid-template-columns:1fr;border-top:0;position:relative;gap:44px;padding-block:28px 0;text-align:center} /* no padding below the last step, so the line stops there instead of trailing on */
  .steps::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(194,160,107,.45);transform:translateX(-50%)}
  .steps li{position:relative;z-index:1;background:var(--onyx);padding:18px 12px;justify-items:center;max-width:34ch;margin-inline:auto}
  .steps li::before{top:-32px;inset-inline-start:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px}
  .steps p{margin-inline:auto}
  .section-head:has(+ .steps){text-align:center;margin-inline:auto;justify-items:center}
  .section-head:has(+ .steps) .eyebrow{justify-self:center}
}

/* areas */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.area{display:grid;gap:10px;padding-top:20px;border-top:1px solid var(--line);align-content:start}
.area .meta{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.area p{font-size:15px;color:var(--slate)}
@media (max-width:860px){.areas{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.areas{grid-template-columns:1fr}}

/* split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.split .copy{display:grid;gap:24px}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.review{margin:0;background:var(--paper);border:1px solid var(--line);padding:32px;display:grid;gap:18px;align-content:start;position:relative}
.review .q{margin:0;font-family:var(--display);font-size:20px;line-height:1.45;color:var(--onyx)}
.review .who{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.review .sample{justify-self:start;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);background:rgba(194,160,107,.18);padding:4px 8px}
@media (max-width:860px){.reviews{grid-template-columns:1fr}}
.note-box{margin-top:24px;font-size:14px;color:var(--slate);border-left:2px solid var(--gold-deep);padding-left:16px;max-width:70ch}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .full{grid-column:1/-1}
.field{display:grid;gap:8px;min-width:0}
.field label{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;font-weight:300;color:var(--onyx);background:var(--paper);border:1px solid var(--mist);border-radius:0;padding:14px 16px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(156,123,72,.15)}
/* dropdown lists in brand colours (faded gold highlight instead of the browser's blue). Browsers that can style
   the open list (Chrome, Edge) get this; others keep their own list, so the form works everywhere. */
@supports (appearance: base-select) {
  .field select, .slot-row select { appearance: base-select; display: flex; align-items: center; cursor: pointer; }
  .field select::picker-icon, .slot-row select::picker-icon { content: ""; width: 8px; height: 8px; margin-inline: auto 4px; border-right: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
  .field select:open::picker-icon, .slot-row select:open::picker-icon { transform: translateY(2px) rotate(225deg); }
  .field select::picker(select), .slot-row select::picker(select) { appearance: base-select; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-sm, 8px); padding: 6px 0; margin-block: 4px; box-shadow: 0 14px 34px rgba(20,19,17,.16); }
  .field select option, .slot-row select option { padding: 10px 16px; font-size: 15px; color: var(--graphite); background: transparent; transition: background-color .15s; }
  .field select option:hover, .field select option:focus-visible, .slot-row select option:hover, .slot-row select option:focus-visible { background: rgba(194,160,107,.2); color: var(--onyx); outline: none; }
  .field select option:checked, .slot-row select option:checked { background: rgba(194,160,107,.34); color: var(--onyx); font-weight: 400; }
  /* the selected option is marked with the brand's gold diamond instead of a tick */
  .field select option::checkmark, .slot-row select option::checkmark { content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-end: 4px; background: var(--gold-deep); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
}
/* option dots (radio buttons): no square glow when clicked; keyboard users get a gold outline around the whole option instead */
.choice input:focus,.choice input:focus-visible{outline:none;box-shadow:none}
.choice label:has(input:focus-visible){outline:2px solid var(--gold-deep);outline-offset:2px}
.choice{display:flex;flex-wrap:wrap;gap:10px}
.choice label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--mist);background:var(--paper);padding:10px 16px;font-size:14px;letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--graphite);cursor:pointer}
.choice input{accent-color:var(--gold-deep);width:auto;margin:0}
.form .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.form .fine{font-size:13px;color:var(--stone);max-width:52ch}
.form-done{grid-column:1/-1;padding:20px;border:1px solid var(--gold-deep);background:var(--paper);color:var(--graphite)}
.form-done.error{border-color:#9B3B2F;color:#7A2E24}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.contact-card{display:grid;gap:24px;align-content:start}
.contact-lines{display:grid;gap:0;border-top:1px solid var(--line)}
.contact-lines div{display:flex;justify-content:space-between;gap:16px;padding-block:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.contact-lines dt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.contact-lines dd{margin:0;color:var(--onyx);font-variant-numeric:tabular-nums}
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,88px)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* footer */
.site-footer{background:var(--onyx);color:#CBC6BD;font-size:14px;padding-block:60px 36px;text-align:center}
.site-footer .top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-dark);justify-items:center}
.site-footer .top>div{justify-items:center}
.site-footer p{margin-inline:auto}
.site-footer img{width:170px;margin-inline:auto}
.site-footer h4{margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--porcelain)}
.legal{padding-top:28px;display:grid;gap:8px;font-size:12.5px;line-height:1.7;color:#B3AEA5}
.foot-contact{font-variant-numeric:tabular-nums}
.legal p{max-width:none}
@media (min-width:900px){.legal .oneline{white-space:nowrap}}
@media (max-width:860px){.site-footer .top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer .top{grid-template-columns:1fr}}

/* placeholder highlight for details still to be supplied */
.ph{background:rgba(194,160,107,.18);padding:0 .25em;border-radius:2px}
.band-dark .ph,.site-footer .ph{background:rgba(194,160,107,.16);color:var(--gold)}

/* ===== Buying from abroad ===== */
.abroad-hero{background:var(--onyx);color:var(--mist);padding-block:clamp(48px,6.5vw,88px)}
.abroad-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,88px);align-items:center}
.abroad-hero h1{color:var(--porcelain)}
.abroad-hero .eyebrow{color:var(--gold);justify-self:start;padding-left:0}
.abroad-hero .lede{color:#D6D1C8}
.abroad-hero .hero-copy{display:grid;gap:28px}
@media (max-width:860px){.abroad-hero .wrap{grid-template-columns:1fr}}

.clocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-dark)}
.clock{padding:24px 18px;display:grid;gap:6px;min-width:0;text-align:center;justify-items:center}
.clock+.clock{border-inline-start:1px solid var(--line-dark)}
.clock .city{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.clock .t{font-family:var(--display);font-size:clamp(26px,3.4vw,42px);color:var(--porcelain);font-variant-numeric:tabular-nums;line-height:1.1}
.clock .d{font-size:13px;color:#C2BDB3}
.clocks-note{grid-column:1/-1;border-top:1px solid var(--line-dark);padding:16px 24px;font-size:14px;color:#D6D1C8}

.audience{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.aud{background:var(--paper);border:1px solid var(--line);padding:40px 36px;display:grid;gap:16px;align-content:start}
.aud ul{margin:0;padding-inline-start:20px;display:grid;gap:6px;color:var(--slate);font-size:16px}
@media (max-width:760px){.audience{grid-template-columns:1fr}}

.costs{width:100%;border-collapse:collapse;font-size:16px}
.costs th,.costs td{text-align:start;padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.costs th{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.costs td:first-child{font-family:var(--display);font-size:19px;color:var(--onyx);width:34%}
.costs .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--gold-deep);font-weight:500}
.costs tr.group th{font-family:var(--display);font-size:15px;letter-spacing:.12em;color:var(--gold-deep);padding-top:32px;border-bottom:1px solid var(--gold-deep)}
.costs td.sub{padding-inline-start:36px;font-size:17px}
.table-scroll{overflow-x:auto}
/* phones: each cost becomes a small block, name and rate on one line, explanation below */
@media (max-width:640px){
  .costs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .costs tbody,.costs tr.group th{display:block}
  .costs tr:not(.group){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding-block:16px;border-bottom:1px solid var(--line)}
  .costs td{border:0;padding:0}
  .costs td:first-child{width:auto}
  .costs td.sub{padding-inline-start:0}
  .costs td:last-child{grid-column:1/-1;font-size:15px;color:var(--slate)}
  .costs tr.group th{padding:28px 0 10px}
  .example{padding:22px 20px}
}
.example{margin-top:40px;background:var(--paper);border:1px solid var(--line);padding:28px 32px;display:grid;gap:16px;max-width:640px}
.example h3{font-size:20px}
/* Stamp Duty calculator */
.sdlt{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border:1px solid var(--line);background:var(--paper)}
.sdlt-form{padding:32px;display:grid;gap:24px;align-content:start}
.sdlt-form h3{font-size:24px}
.sdlt-form > p{margin-top:-16px;font-size:15px}
.sdlt fieldset{border:0;margin:0;padding:0}
.sdlt legend{font-size:15px;color:var(--graphite);margin-bottom:12px;padding:0}
.sdlt .choice.stack{flex-direction:column;align-items:stretch}
.sdlt .choice.stack label{line-height:1.4}
.money{position:relative}
.money span{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--slate);pointer-events:none}
.field .money input{padding-inline-start:34px;font-family:var(--display);font-size:22px}
.sdlt-result{background:var(--onyx);color:var(--porcelain);padding:32px;display:grid;gap:8px;align-content:start}
.sdlt-result .label{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sdlt-result .total{font-family:var(--display);font-size:clamp(40px,6vw,56px);line-height:1.1;font-variant-numeric:tabular-nums}
.sdlt-result .rate{color:var(--stone);font-size:15px}
.sdlt-result .bands{margin-top:20px;width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.sdlt-result .bands th{text-align:start;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);padding:0 0 8px;border-bottom:1px solid rgba(194,160,107,.35)}
.sdlt-result .bands td{padding:10px 0;border-bottom:1px solid rgba(246,245,242,.1)}
.sdlt-result .bands th:not(:first-child),.sdlt-result .bands td:not(:first-child){text-align:end}
.sdlt-notes{margin-top:12px;font-size:14px;color:#C9C5BD;line-height:1.55}
@media (max-width:860px){.sdlt{grid-template-columns:1fr}.sdlt-form,.sdlt-result{padding:24px 20px}}
.example dl{margin:0;display:grid}
.example dl div{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.example dt{color:var(--slate)}
.example dd{margin:0;font-family:var(--display);font-size:20px;color:var(--onyx);font-variant-numeric:tabular-nums}

.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-family:var(--display);font-size:21px;color:var(--onyx)}
.faq summary::-webkit-details-marker{display:none}
/* the plus is two thin gold bars in a fixed square, lined up with the question's first line. Opening turns it and
   folds the upright bar away, so it becomes a minus in the same spot, on one-line and two-line questions alike. */
.faq summary{line-height:1.4}
.faq summary::after{content:"";flex:none;align-self:flex-start;width:16px;height:16px;margin-top:calc(.7em - 8px);
  background:linear-gradient(var(--gold-deep),var(--gold-deep)) center/100% 1.5px no-repeat,linear-gradient(var(--gold-deep),var(--gold-deep)) center/1.5px 100% no-repeat;
  transition:transform .35s ease,background-size .35s ease}
.faq details[open] summary::after{transform:rotate(180deg);background-size:100% 1.5px,1.5px 0}
.faq details p{padding-bottom:24px;color:var(--slate);overflow:hidden}

/* centred blocks: neighbourhoods, client reviews and every feature grid */
.feature,.area,.review{text-align:center;justify-items:center}
.feature p,.area p{margin-inline:auto}
.review .sample{justify-self:center}

[hidden]{display:none!important}

/* availability picker */
.slots{gap:10px}
.slots-label{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.slots .hint{display:block;margin-top:4px;font-size:13px;font-weight:300;letter-spacing:0;text-transform:none;color:var(--stone)}
.slot-rows{display:grid;gap:10px}
.slot-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:10px;align-items:center}
.slot-row input,.slot-row select{font:inherit;font-size:16px;font-weight:300;color:var(--onyx);background:var(--paper);border:1px solid var(--mist);border-radius:0;padding:13px 14px;width:100%;min-width:0}
.slot-row input:focus,.slot-row select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(156,123,72,.15)}
.remove-slot,.add-slot{font:inherit;font-size:13px;background:none;border:0;padding:6px 0;color:var(--gold-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.add-slot{justify-self:start}
/* selected or highlighted text anywhere on the site (including while typing in a form) uses faded gold */
::selection{background:rgba(194,160,107,.35);color:var(--onyx)}

/* branded date picker (built by main.js): type dd/mm/yyyy or pick from the calendar */
.date-field{position:relative;min-width:0}
.date-field .slot-date{padding-right:46px !important;cursor:pointer}
.cal-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;background:none;color:var(--gold-deep);cursor:pointer;border-radius:8px}
.cal-btn svg{width:19px;height:19px}
.cal-btn:hover{background:rgba(194,160,107,.18)}
.cal{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:300px;max-width:calc(100vw - 40px);background:var(--paper);border:1px solid var(--mist);border-radius:var(--r,14px);box-shadow:0 16px 38px rgba(20,19,17,.18);padding:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-title{font-family:var(--display);font-size:17px;color:var(--onyx)}
.cal-nav{width:34px;height:34px;border:1px solid transparent;border-radius:8px;background:none;color:var(--gold-deep);font-size:22px;line-height:1;cursor:pointer;transition:background-color .15s,border-color .15s}
.cal-nav:hover:not(:disabled){background:rgba(194,160,107,.18);border-color:var(--gold)}
.cal-nav:disabled{color:var(--mist);cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal-wd{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);padding-bottom:6px}
.cal-day{aspect-ratio:1;border:1px solid transparent;border-radius:8px;background:none;font:inherit;font-size:14px;color:var(--graphite);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.cal-day:hover:not(:disabled),.cal-day:focus-visible{background:rgba(194,160,107,.2);border-color:var(--gold);color:var(--onyx);outline:none}
.cal-day.is-today{font-weight:500;color:var(--gold-deep)}
.cal-day.is-selected,.cal-day.is-selected:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.cal-day:disabled{color:#C9C5BE;cursor:default}
/* past date or time chosen: message under that option */
.slot-error{grid-column:1/-1;margin:0;font-size:13px;color:#9B3B2F}
.slot-row input[aria-invalid],.slot-row select[aria-invalid]{border-color:#9B3B2F}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){.slot-row{grid-template-columns:1fr}.remove-slot{justify-self:start}}
.choice.intent label{font-size:15px;padding:12px 18px}
.contact-lines a{text-decoration:none;color:inherit}
.contact-lines a:hover{color:var(--gold-deep)}

/* ===== Rounded corners =====
   Softer, more modern corners on buttons, fields, cards, panels and photos.
   To go back to square corners, delete this block (the square version is saved in website-versions/v1-square-corners). */
:root{--r-sm:8px;--r:14px}
.btn,.menu-btn,
.field input,.field select,.field textarea,.slot-row input,.slot-row select,
.choice label,.form-done{border-radius:var(--r-sm)}
.review .sample,.photo .tag{border-radius:4px}
.features,.clocks,.sdlt,.review,.example,.aud,.photo,
.skyline,.guide-cover,.guide-cover img{border-radius:var(--r)}
.features,.clocks,.sdlt{overflow:hidden}


/* ===== About page ===== */
.about-story p { font-size: 19px; line-height: 1.7; color: var(--slate); max-width: 680px; }
.about-story .founder-sign { margin-top: 4px; }
.feature .eyebrow { justify-self: center; }
.feature .btn { justify-self: center; margin-top: 6px; }
.about-legal { max-width: 640px; margin: 12px auto 0; font-size: 14px; line-height: 1.7; color: #A8A399; }
.about-legal a { color: var(--gold); }
.about-cta .btns { justify-content: center; }

.about-hero h1 { color: var(--gold); padding: 0 48px 16px; border-bottom: 1px solid currentColor; } /* large gold title with the gold underline used on the small headings */
/* About: Gulf band, a Riyadh photo on the right fading into black so the text on the left stays readable */
.gulf-band { position: relative; overflow: hidden; background: var(--onyx); color: var(--mist); }
.gulf-band .bg { position: absolute; top: 0; right: 0; width: 62%; height: 100%; object-fit: cover; object-position: center 40%; border-radius: 0 !important; }
.gulf-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--onyx) 0%, var(--onyx) 38%, rgba(20,19,17,.82) 52%, rgba(20,19,17,.35) 75%, rgba(20,19,17,.15) 100%); }
.gulf-band .wrap { position: relative; z-index: 2; }
.gulf-band .band-copy { display: grid; gap: 22px; max-width: 520px; text-align: left; }
.gulf-band .eyebrow { color: var(--gold); justify-self: start; padding-left: 0; }
.gulf-band .lede { color: #D6D1C8; }
.gulf-band .btns { justify-content: flex-start; }
@media (max-width: 860px) {
  .gulf-band .bg { width: 100%; }
  .gulf-band::before { background: linear-gradient(180deg, rgba(20,19,17,.72), rgba(20,19,17,.9)); }
  .gulf-band .band-copy { max-width: none; text-align: center; justify-items: center; }
  .gulf-band .eyebrow { justify-self: center; padding-left: 28px; }
  .gulf-band .btns { justify-content: center; }
}
/* About: charity band, the Barakah Foundation emblem as a soft, enlarged watermark behind the text */
.charity-band { position: relative; overflow: hidden; }
.charity-band .emblem { position: absolute; right: -60px; top: 50%; width: 440px; height: auto; transform: translateY(-50%); opacity: .14; pointer-events: none; border-radius: 0 !important; }
.charity-band .wrap { position: relative; z-index: 1; }
.charity-band .section-head { margin-bottom: 0; }
.charity-band .btns { justify-content: center; }
@media (max-width: 860px) { .charity-band .emblem { right: 50%; width: 320px; transform: translate(50%, -50%); opacity: .09; } }

/* charity button: on hover or tap it turns black and a large slice of the Barakah emblem shows inside it, right of centre */
.charity-band .btn.ghost { position: relative; overflow: hidden; isolation: isolate; }
.charity-band .btn.ghost::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 70%; width: 160px; height: 167px; transform: translate(-50%, -50%) scale(.85); opacity: 0;
  background: url(../assets/img/barakah-emblem.png) center / contain no-repeat; transition: opacity .3s ease, transform .4s ease; pointer-events: none; }
.charity-band .btn.ghost:hover::after, .charity-band .btn.ghost:active::after, .charity-band .btn.ghost:focus-visible::after { opacity: .38; transform: translate(-50%, -50%) scale(1); }
.charity-band .btn.ghost:active { background: var(--onyx); color: var(--porcelain); border-color: var(--onyx); }.gulf-band h2 { color: var(--porcelain); }
.home-gulf .bg { object-position: center 68%; } /* keeps Tower Bridge and the river in view */
.home-gulf .band-copy { max-width: 560px; }

/* costs on the Buying from the Gulf page: each group is a gold header bar that opens to show its table.
   "View details" / "Hide details" plus the FAQ's plus-to-minus icon make it clear the bar can be tapped. */
.cost-group { border-bottom: 1px solid var(--gold-deep); }
.cost-group + .cost-group { margin-top: 8px; }
.cost-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px 16px; }
.cost-group summary::-webkit-details-marker { display: none; }
.cost-group .cg-title { font-family: var(--display); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.cost-group .cg-hint { display: inline-flex; align-items: center; gap: 12px; flex: none; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); transition: color .2s; }
.cost-group .cg-hint::before { content: "View details"; }
.cost-group[open] .cg-hint::before { content: "Hide details"; }
.cost-group .cg-hint::after { content: ""; width: 14px; height: 14px; background: linear-gradient(var(--gold-deep),var(--gold-deep)) center/100% 1.5px no-repeat, linear-gradient(var(--gold-deep),var(--gold-deep)) center/1.5px 100% no-repeat; transition: transform .35s ease, background-size .35s ease; }
.cost-group[open] .cg-hint::after { transform: rotate(180deg); background-size: 100% 1.5px, 1.5px 0; }
@media (hover: hover) { .cost-group summary:hover .cg-hint { color: var(--gold-deep); } }
.cost-group summary:focus:not(:focus-visible) { outline: none; }
.cost-group .costs { margin-bottom: 8px; }
.cost-group .costs tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) { .cost-group .cg-title { font-size: 15px; letter-spacing: .08em; } .cost-group .cg-hint { font-size: 11px; letter-spacing: .12em; gap: 10px; } }
details.cost-group:last-of-type { margin-bottom: 16px; }

/* About: Gulf band as three tall city panels (Riyadh, Dubai, Doha) on the right, blended into black behind the text */
.gulf-collage { position: absolute; top: 0; right: 0; bottom: 0; width: 70%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gulf-collage figure { position: relative; margin: 0; overflow: hidden; }
.gulf-collage img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }
.gulf-collage figcaption { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(246,245,242,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.gulf-collage-band::before { background: linear-gradient(90deg, var(--onyx) 0%, var(--onyx) 26%, rgba(20,19,17,.9) 34%, rgba(20,19,17,.6) 42%, rgba(20,19,17,.22) 52%, rgba(20,19,17,0) 62%); } /* one long soft fade over the Doha night panel, no hard edge */
.gulf-collage-band .wrap { padding-block: clamp(24px, 4vw, 48px); }
@media (max-width: 860px) {
  .gulf-collage { width: 100%; gap: 4px; }
  .gulf-collage figcaption { bottom: 12px; font-size: 10px; letter-spacing: .18em; }
  .gulf-collage-band::before { background: linear-gradient(180deg, rgba(20,19,17,.8), rgba(20,19,17,.9) 70%, rgba(20,19,17,.55)); }
}
@media (min-width: 861px) { .gulf-collage-band .band-copy { max-width: min(520px, 38vw); } }

/* a line break used only on phones, so a long gold heading splits neatly and its underline stays as short as the others */
.phone-br { display: none; }
@media (max-width: 480px) { .phone-br { display: inline; } }
/* phones: the Barakah Foundation button always shows its pressed look, black with the gold emblem inside */
@media (max-width: 860px) {
  .charity-band .btn.ghost { background: var(--onyx); color: var(--porcelain); border-color: var(--onyx); }
  .charity-band .btn.ghost::after { opacity: .38; transform: translate(-50%, -50%) scale(1); }
}

/* ===== Readability: small text ===== 
   The brand golds and stone grey stay for headings, lines and large text. Small text on the light backgrounds uses
   a slightly deeper gold and grey so it meets the accessibility standard for contrast (4.5:1). */
:root { --gold-text: #9C7B48; --stone-text: #696560; } /* small gold text uses the brand deep gold (preferred by Ali); the darker test shade #7F633A was dropped */
.eyebrow, .founder-sign, .costs .num, .cost-group .cg-title, .legal-doc a { color: var(--gold-text); }
.eyebrow { border-bottom-color: var(--gold-deep); }
.band-dark .eyebrow, .legal-hero .eyebrow, .gulf-band .eyebrow, .abroad-hero .eyebrow, .hero-photo .eyebrow { border-bottom-color: currentColor; }
.area .meta, .form .fine, .contact-lines dt, .costs th, .slots .hint, .cal-wd, .cost-group .cg-hint, .legal-doc th { color: var(--stone-text); }
.toc a { color: var(--gold-text); }
@media (max-width:480px){.who-help ul{font-size:15px}} /* phones: lets each Who we help point fit on one line on most handsets (390 px and wider) */

/* About Us, Our story: text only, centred, sitting on its own band */
.section-head.about-story { margin-bottom: 0; }

/* Phone timelines (homepage 5 steps, Buying from the Gulf 6 steps): every step has the same length of line above it,
   and its diamond sits further down that line the further through the process it is: step 1 at the top,
   the middle step halfway, the last step at the bottom, in equal steps. --f is how far down (0 to 1). */
@media (max-width:760px){
  .steps{padding-top:44px}
  .steps li::before{top:calc(-42px + var(--f, 0) * 30px)}
  .steps li:nth-child(1){--f:0}
  .steps li:nth-child(2):nth-last-child(4){--f:.25} .steps li:nth-child(3):nth-last-child(3){--f:.5} .steps li:nth-child(4):nth-last-child(2){--f:.75} .steps li:nth-child(5):nth-last-child(1){--f:1}
  .steps li:nth-child(2):nth-last-child(5){--f:.2} .steps li:nth-child(3):nth-last-child(4){--f:.4} .steps li:nth-child(4):nth-last-child(3){--f:.6} .steps li:nth-child(5):nth-last-child(2){--f:.8} .steps li:nth-child(6):nth-last-child(1){--f:1}
  /* About Us, giving back: no faded emblem behind the text on phones (the button keeps its emblem) */
  .charity-band .emblem{display:none}
}
/* Desktop timelines: the homepage's five selling steps use the same layout as the six steps on Buying from the Gulf
   ("five" adjusts the column count). The horizontal line now starts at the first diamond and ends at the last one. */
@media (min-width:761px){
  .steps.cols2.five li:nth-child(5){padding-bottom:0;border-left-color:transparent;background:linear-gradient(rgba(194,160,107,.5),rgba(194,160,107,.5)) left top / 1px 6px no-repeat}
}
@media (min-width:961px){
  .steps.cols2.five{grid-template-columns:repeat(5,minmax(0,1fr))}
  .steps.cols2.five li:nth-child(5){background:none}
  .steps.cols2::before{margin-inline:calc(100% / 12)}
  .steps.cols2.five::before{margin-inline:calc(100% / 10)}
}
.areas-note { max-width: 640px; margin: 36px auto 0; text-align: center; color: var(--slate); font-size: 17px; line-height: 1.6; }
.areas-note a { color: var(--gold-text); }

/* FAQ answers use the full width of the question row on desktop, instead of the general 62-character limit */
.faq details p { max-width: none; }/* grey supporting text (answers, descriptions, intros): a touch heavier than the light body weight so it reads clearly on the light backgrounds */
.muted, .lede, .faq details p, .area p, .who-help ul, .aud ul, .about-story p, .areas-note, .costs td:last-child, .legal-doc p, .legal-doc li { font-weight: 350; }
/* Our story on PC: a wider centred column so the paragraph uses more of the page (still well clear of the edges) */
@media (min-width:861px){ .section-head.about-story { max-width: 1000px; } .section-head.about-story p { max-width: 940px; } }
/* menu underline: kept on its own drawing layer at all times, so it looks exactly the same while it grows and once it has stopped
   (otherwise the browser redraws it sharper and thinner at the end of the animation) */
@media (min-width:981px){ .nav a:not(.btn)::after { will-change: transform; backface-visibility: hidden; } }
/* keeps "South-West London" together instead of breaking after "South-" */
.nw { white-space: nowrap; }
/* top menu on one line: "South-West London" is long, so smaller laptops get tighter spacing instead of two-line labels */
@media (min-width:981px){ .nav a { white-space: nowrap; } }
@media (min-width:981px) and (max-width:1120px){ .nav { gap: 18px; } .nav a { letter-spacing: .1em; } .nav .btn { padding: 12px 14px; } }
.area .meta { color: var(--slate); } /* postcodes match the area descriptions below them */
/* Where we work on desktop: a wider intro so it sits on two lines */
@media (min-width:1100px){ #areas .section-head { max-width: 1080px; } #areas .section-head .lede { max-width: none; } }
.desk-br { display: none; } @media (min-width:1100px){ .desk-br { display: inline; } } /* line break used only on wide screens */