/* GPO London, shared stylesheet for all service and property pages
   Cormorant Garamond + Jost · green #29454A · gold #DEAC69
   Generated by build.py. Edit the source layers, not this file. */

:root{
  /* --- these eight are lifted verbatim from the gpo.london homepage --- */
  --green:#29454A;      /* homepage --green / --green-d       */
  --gold:#DEAC69;       /* homepage --gold                    */
  --gold-l:#ECC98A;     /* homepage --gold-l  (button hover)  */
  --lteal:#9EC1BD;      /* homepage --teal                    */
  --cream:#F8F5EF;      /* homepage --off                     */
  --cream2:#EDE8DF;     /* homepage --light                   */
  --muted:#736F66;      /* homepage --mid #888780, darkened to pass AA on cream */
  --body:#2A2A28;       /* homepage --text  (main prose)      */
  /* --- added for the property pages, which the homepage has no equivalent of --- */
  --green-dk:#1B3236;   /* gallery ground                     */
  --green-xdk:#0D191C;  /* mobile action bar, lightbox        */
  --gold-dk:#8F6930;    /* small gold TEXT on light grounds, 4.5:1 on cream */
  --ink:#29454A;        /* = --green, kept as a heading alias */
  --hair:#EDE8DF; --rule:#DCD5C8;
  --page:#fff; --card:#fff;
  --maxw:1200px;        /* homepage .section-inner            */
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--body);font-family:Jost,system-ui,sans-serif;
  font-weight:300;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block} a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
h1,h2,h3{font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-weight:400;color:var(--ink);
  line-height:1.1;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--gold-dk)}
.eyebrow{font-family:Jost,sans-serif;font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.btn{display:inline-block;font-family:Jost,sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:16px 34px;
  border:1px solid transparent;cursor:pointer;text-align:center;transition:background .25s,color .25s}
.btn-primary{background:var(--gold);color:var(--green)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--gold-l)}
.btn-ghost{border-color:rgba(222,172,105,.55);color:var(--gold);background:none;padding:15px 28px}
.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(222,172,105,.14)}

.nav{position:sticky;top:0;z-index:60;background:rgba(41,69,74,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(222,172,105,.2)}
.nav .row{max-width:none;margin:0;padding:1.4rem 4rem;display:flex;align-items:center;
  justify-content:space-between;gap:18px}
.nav .links{margin-left:auto;margin-right:26px}
.brand{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.brand img{width:44px}
.brand span{font-family:Jost,sans-serif;font-weight:400;font-size:1rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
.nav .tel{font-family:Jost,sans-serif;font-weight:400;font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.75);text-decoration:none}
.nav .tel:hover{color:var(--gold)}
@media(max-width:900px){.nav .row{padding:1.2rem 2rem}}
@media(max-width:600px){.nav .row{padding:1rem 1.2rem}.brand img{width:34px}.brand span{font-size:.8rem}}

.gallery{position:relative;background:var(--green)}
.stage{position:relative;width:100%;height:min(62.5vw,74vh);min-height:300px;overflow:hidden}
@media(max-width:700px){.stage{height:min(75vw,58vh);min-height:250px}}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.slide figcaption{position:absolute;left:0;bottom:0;padding:9px 18px;background:rgba(13,25,28,.62);
  font-family:Jost,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;
  background:rgba(13,25,28,.5);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s}
.arw:hover{background:var(--gold);color:var(--green);border-color:var(--gold)}
.arw.prev{left:18px} .arw.next{right:18px}
.count{position:absolute;right:18px;bottom:16px;z-index:3;background:rgba(13,25,28,.62);
  font-family:Jost,sans-serif;font-size:11px;letter-spacing:.14em;color:#fff;padding:8px 14px;
  font-variant-numeric:tabular-nums}
.rail{display:flex;overflow-x:auto;padding:8px;background:var(--cream);border-bottom:1px solid var(--hair);scrollbar-width:thin}
.railin{display:flex;gap:6px;margin:0 auto}
.th{flex:0 0 108px;height:70px;padding:0;border:0;background:none;cursor:pointer;opacity:.55;transition:opacity .2s}
.th img{width:100%;height:100%;object-fit:cover}
.th.is-on,.th:hover{opacity:1;outline:2px solid var(--gold);outline-offset:-2px}
@media(max-width:700px){.th{flex:0 0 76px;height:52px} .arw{width:42px;height:42px}}

.head{border-bottom:1px solid var(--hair);padding:34px 0 30px}
.head .in{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.head h1{font-size:clamp(30px,4.2vw,46px)}
.head .sub{font-family:Jost,sans-serif;font-weight:400;font-size:13.5px;letter-spacing:.06em;color:var(--body);margin-top:9px}
.price{text-align:right}
.price .p{font-family:"Cormorant Garamond",serif;font-size:clamp(28px,3.6vw,40px);color:var(--ink)}
.price .pm{font-family:Jost,sans-serif;font-size:12.5px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats > div{padding:15px 16px 16px 0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats > div:nth-child(2n){border-right:0}
.stats > div:nth-child(n+5){border-bottom:0}
@media(min-width:620px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .stats > div:nth-child(3n){border-right:0}
  .stats > div:nth-child(n+4){border-bottom:0}
}
@media(min-width:980px){
  .stats{grid-template-columns:repeat(6,1fr)}
  .stats > div{border-bottom:0;border-right:1px solid var(--rule);padding:15px 16px 16px 0}
  .stats > div:last-child{border-right:0;padding-right:0}
}
.stats .k{font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.18em;
  line-height:1.2;text-transform:uppercase;color:var(--gold-dk)}
.stats .v{font-family:"Cormorant Garamond",serif;font-size:27px;line-height:1.05;
  color:var(--ink);margin-top:7px}
.stats .v .lin{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-size:.74em}

.main{display:grid;gap:56px;padding:56px 0 80px}
@media(min-width:1000px){.main{grid-template-columns:minmax(0,1fr) 356px;gap:72px}}
.block{margin-bottom:52px}
.block h2{font-size:clamp(24px,3vw,34px);margin:14px 0 22px}
.klist{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:560px){.klist{grid-template-columns:1fr 1fr;column-gap:40px}}
.klist li{list-style:none;padding:11px 0 11px 26px;position:relative;border-bottom:1px solid var(--hair);
  font-size:15px;color:#2A2A28}
.klist li::before{content:"";position:absolute;left:0;top:22px;width:13px;height:1px;background:var(--gold)}
.strap{font-family:"Cormorant Garamond",serif;font-size:clamp(23px,2.9vw,32px);line-height:1.32;
  color:var(--ink);margin:0 0 30px;max-width:26ch}
.prose p{margin:0 0 18px;max-width:66ch}
.dl{border-top:1px solid var(--hair)}
.dl .r{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--hair)}
@media(max-width:560px){.dl .r{grid-template-columns:1fr;gap:2px}}
.dl dt{font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);padding-top:5px}
.dl dd{margin:0;font-family:"Cormorant Garamond",serif;font-size:21px;color:var(--ink)}
.inc{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:560px){.inc{grid-template-columns:1fr 1fr;column-gap:40px}}
.inc li{list-style:none;padding:10px 0 10px 26px;position:relative;border-bottom:1px solid var(--hair);
  font-size:15px;color:#2A2A28}
.inc li::before{content:"";position:absolute;left:0;top:21px;width:13px;height:1px;background:var(--gold)}
.panels{display:grid;gap:24px}
@media(min-width:640px){.panels{grid-template-columns:1.5fr 1fr;align-items:start}}
.panel{background:var(--cream);border:1px solid var(--hair);padding:24px;color:var(--body)}
.panel .fine{color:var(--muted)}
.panel.plan{padding:26px 22px}
.panel img.zoom{cursor:zoom-in}
.tl{border-top:1px solid var(--hair)}
.tl .r{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--hair)}
.tl .n{font-size:15px;color:#2A2A28}
.tl .n em{font-style:normal;display:block;font-size:12.5px;color:var(--body)}
.tl .m{font-family:"Cormorant Garamond",serif;font-size:20px;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fine{font-size:11.5px;line-height:1.7;color:var(--muted)}

.side{position:relative}
@media(min-width:1000px){.side .card{position:sticky;top:110px}}
.card{background:var(--cream);border:1px solid var(--hair);color:var(--body);padding:32px}
.card .mark{width:44px;margin-bottom:20px;filter:saturate(1.05)}
.card h3{color:var(--ink);font-size:25px;margin-bottom:10px}
.card p{font-size:14px;margin:0 0 22px;color:var(--muted)}
.card .btn{display:block;width:100%}
.card .lines{margin-top:22px;border-top:1px solid var(--hair)}
.card .lines a,.card .lines span{display:block;padding:12px 0;border-bottom:1px solid var(--hair);
  color:#2A2A28;text-decoration:none;font-size:15px}
.card .lines a:hover{color:var(--gold-dk)}
.card .lines .k{display:block;font-family:Jost,sans-serif;font-weight:500;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk);border:0;padding:0;margin-bottom:2px}

.foot{background:var(--cream);border-top:1px solid var(--hair);padding:34px 0;color:var(--muted)}
.foot .row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.fcon{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;padding-bottom:30px;margin-bottom:28px;
  border-bottom:1px solid var(--rule)}
@media(min-width:820px){.fcon{grid-template-columns:repeat(3,1fr);justify-items:center;text-align:center}}
.fcon .k{font-family:Jost,sans-serif;font-weight:500;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dk);margin-bottom:6px}
.fcon a,.fcon span{color:#2A2A28;text-decoration:none;font-size:15px;line-height:1.6}
.fcon a:hover{color:var(--gold-dk)}
.foot .brand img{width:22px} .foot .brand span{font-size:12px;color:var(--gold-dk)}
.foot .legal{font-size:11px;line-height:1.7;max-width:66ch;opacity:.85}
.disc{margin-top:22px;font-size:10.5px;line-height:1.7;color:var(--muted);opacity:.85}

.lb{position:fixed;inset:0;z-index:90;background:rgba(8,17,19,.95);display:none;
  align-items:center;justify-content:center;padding:28px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;background:#F8F5EF;padding:22px}
.lb .x{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}

.bar{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--green-xdk);z-index:70;
  border-top:1px solid rgba(222,172,105,.3)}
.bar a{flex:1;text-align:center;padding:15px 6px;color:#fff;text-decoration:none;font-family:Jost,sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.bar a+a{border-left:1px solid rgba(158,193,189,.18)}
.bar a:first-child{color:var(--gold)}
@media(min-width:1000px){.bar{display:none}}
@media(max-width:999px){.foot{padding-bottom:78px}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ============================================================
   ENQUIRY MODAL
   ============================================================ */
/* ---- centred call-to-action band ---- */
.cta{background:var(--cream);border-top:1px solid var(--hair);padding:70px 0 76px;text-align:center}
.cta h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 18px}
.cta p{margin:0 auto 30px;max-width:52ch;color:var(--body)}
.cta .btn{padding:18px 46px}

/* ---- modal ---- */
.eqm{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,17,19,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.eqm.open{display:flex}
.eqm .box{position:relative;width:100%;max-width:720px;max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--page);border:1px solid var(--hair);padding:44px 48px 40px;text-align:center;
  -webkit-overflow-scrolling:touch}
@media(max-width:640px){.eqm{padding:0}.eqm .box{max-width:none;max-height:100vh;min-height:100vh;padding:56px 22px 40px;border:0}}
.eqm .x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);
  font-size:28px;line-height:1;cursor:pointer;padding:6px 10px}
.eqm .x:hover{color:var(--ink)}
.eqm h2{font-size:clamp(26px,3.2vw,36px);margin:10px 0 14px}
.eqm .lede{margin:0 auto 30px;max-width:46ch;font-size:15px;color:var(--body)}

form.eq{text-align:left}
.eq .fg{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:560px){.eq .fg.two{grid-template-columns:1fr 1fr}}
.eq label{display:block;font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dk);margin-bottom:7px}
.eq label .req{color:var(--muted);letter-spacing:0}
.eq input,.eq select,.eq textarea{width:100%;font-family:Jost,sans-serif;font-weight:300;font-size:15px;
  color:#2A2A28;background:var(--page);border:0;border-bottom:1px solid #A89E8C;padding:9px 2px;
  border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.eq select{background-image:linear-gradient(45deg,transparent 50%,var(--gold-dk) 50%),linear-gradient(135deg,var(--gold-dk) 50%,transparent 50%);
  background-position:calc(100% - 13px) 18px,calc(100% - 8px) 18px;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:26px}
.eq textarea{min-height:88px;resize:vertical;line-height:1.6}
.eq input:focus,.eq select:focus,.eq textarea:focus{outline:none;border-bottom-color:var(--gold)}
.eq input::placeholder,.eq textarea::placeholder{color:#A5A197}
.eq input:invalid:not(:placeholder-shown),.eq select:invalid:not([value=""]){border-bottom-color:#A89E8C}
.eq .full{margin-top:18px}
.eq .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.eq .send{margin-top:30px;text-align:center}
.eq .send .btn{border:0;min-width:230px}
.eq .note{font-size:11.5px;line-height:1.6;color:var(--muted);margin:16px 0 0;text-align:center}
.eq .msg{margin-top:18px;font-size:15px;line-height:1.65;display:none;text-align:center}
.eq .msg.ok{display:block;color:var(--ink)}
.eq .msg.err{display:block;color:#A3352F}
.eq[data-sent="1"] .fg,.eq[data-sent="1"] .full,.eq[data-sent="1"] .send,.eq[data-sent="1"] .note{display:none}

/* ============================================================
   HUB PAGES, service landing pages
   ============================================================ */

/* --- breadcrumb --- */
.crumb{padding:22px 0 0;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--gold-dk)}
.crumb .sep{margin:0 8px;opacity:.5}
.crumb .here{color:var(--ink)}

/* --- hub hero --- */
.hero{padding:52px 0 46px;border-bottom:1px solid var(--hair)}
.hero .num{font-family:Jost,sans-serif;font-weight:500;font-size:10px;letter-spacing:.22em;
  color:var(--gold);border:1px solid var(--gold);padding:4px 9px;display:inline-block;
  margin-bottom:18px}
.hero h1{font-size:clamp(36px,5.4vw,64px);line-height:1.02;max-width:17ch}
.hero .lede{font-size:clamp(16px,1.9vw,19px);line-height:1.6;color:var(--body);
  max-width:60ch;margin:24px 0 0}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
@media(max-width:560px){.hero{padding:34px 0 34px}.hero .actions .btn{width:100%}}

/* --- figure strip: the numbers that prove capability --- */
.figs{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
@media(min-width:760px){.figs{grid-template-columns:repeat(4,1fr)}}
/* Tiles sat flush against the divider on their left. Every tile now has even
   padding both sides; the one that starts a row loses its left padding so its
   text still lines up with the page margin and the heading above. */
.figs > div{padding:24px 26px 26px 26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column}
.figs > div:nth-child(2n+1){padding-left:0}
.figs > div:nth-child(2n){border-right:0}
@media(min-width:760px){
  .figs > div{border-bottom:0;border-right:1px solid var(--rule)}
  /* this must match the specificity of the two-up :nth-child(2n+1) rule above,
     or that rule keeps winning and tiles 1 and 3 sit flush against the divider */
  .figs > div:nth-child(n){padding-left:26px}
  .figs > div:first-child{padding-left:0}
  .figs > div:nth-child(2n){border-right:1px solid var(--rule)}
  .figs > div:last-child{border-right:0}
}
.figs .k{font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dk)}
.figs .v{font-family:"Cormorant Garamond",serif;font-size:clamp(30px,3.4vw,40px);
  line-height:1.02;color:var(--ink);margin-top:8px}
/* a long value (a range, say) gets its own size rather than wrapping to two
   lines and making its tile taller than the other three */
.figs .v.fit{font-size:clamp(21px,2.3vw,28px);white-space:nowrap}
.figs .n{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:auto;padding-top:9px}

/* Two light sections running together read as one long page: cream sits only
   3% off white, so the join is invisible without a rule. Dark sections need no
   help and are excluded. */
.sec:not(.dark) + .sec:not(.dark){border-top:1px solid var(--hair)}

/* The drawing runs the full width as a band, with the prose beneath it in two
   columns. Prose beside the drawing read awkwardly and left the measure too short. */
.intro-art{display:block}
.intro-art .ia-art{margin:34px 0 4px}
.intro-art .ia-art img{display:block;width:100%;height:auto;color:var(--ink);opacity:.52}
.intro-art .ia-text p{margin:0 0 16px}
/* Stacked and full width. Two columns made the unequal paragraph lengths obvious;
   stacking hides the mismatch and the long measure gets a little more leading. */
@media(min-width:860px){
  .intro-art .ia-text p{max-width:none;line-height:1.78}
}


/* --- hero line drawing ---------------------------------------------------
   Each service page carries an archetype drawing set behind its hero text.
   Page 01 still declares its own copy inline; this is the shared version. */
.hero{position:relative;overflow:hidden}
.hero-art{position:absolute;right:4%;top:50%;transform:translateY(-50%);
  width:min(33vw,388px);color:var(--ink);opacity:.48;pointer-events:none;z-index:1}
.hero-art svg{width:100%;height:auto;display:block}
.hero .wrap{position:relative;z-index:2}
@media (max-width:1100px){.hero-art{right:-5%;width:300px;opacity:.28}}
@media (max-width:760px){.hero-art{display:none}}

/* A page can opt into a larger hero drawing. The hero needs matching height or
   overflow:hidden crops the drawing, which is what was happening at the old size. */
/* Short Lets and Long Lets run a three-line lede, so their text block is about
   70px taller than the other three. At the shared 388px the drawing finishes well
   above the text and reads small against it. A modest step up puts their overhang
   back in line with Capital Advisory without crowding the lede, which a bigger
   jump did: measured, at 480px these two overlapped their own text below 1230px. */
.hero.art-lg .hero-art{width:min(33vw,424px)}
.hero.tall{min-height:648px}
.hero.tall .hero-art{width:min(46vw,540px)}

/* --- generic section rhythm --- */
.sec{padding:76px 0;scroll-margin-top:72px}
.sec + .sec{border-top:1px solid var(--hair)}
.sec h2{font-size:clamp(34px,4vw,52px);margin:14px 0 22px}
.sec .intro{max-width:64ch;margin:0 0 8px}
.sec .intro.intro-art{max-width:none}
.sec .intro p{margin:0 0 16px}

/* --- two column: copy + aside --- */
.split{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:960px){.split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:start}}

/* --- pillars: the four-up service breakdown --- */
.pillars{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule);margin-top:26px}
@media(min-width:820px){.pillars{grid-template-columns:1fr 1fr;column-gap:56px}
/* A two-up grid orphans the last item on any odd count, and the hairline under it
   then stops halfway across the page. Sections of three take this instead. */
.pillars.three{grid-template-columns:repeat(3,1fr);column-gap:44px}
.pillars.three p{max-width:40ch}}
.pillars article{padding:26px 0;border-bottom:1px solid var(--rule)}
.pillars h3{font-size:22px;margin-bottom:9px}
.pillars p{margin:0;font-size:14.5px;max-width:52ch}
.pillars .pn{font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.2em;
  color:var(--gold-dk);display:block;margin-bottom:8px}

/* --- process: numbered steps --- */
.steps{display:grid;grid-template-columns:1fr;gap:0;margin-top:24px;border-top:1px solid var(--rule)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);column-gap:32px}}
.steps .st{padding:24px 0 28px;border-bottom:1px solid var(--rule)}
@media(min-width:900px){.steps .st{border-bottom:0;border-top:2px solid var(--gold);margin-top:-1px;padding-top:20px}}
.steps .sn{font-family:"Cormorant Garamond",serif;font-size:30px;color:var(--gold-dk);line-height:1}
.steps h3{font-family:Jost,sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin:12px 0 9px}
.steps p{margin:0;font-size:13.5px;line-height:1.6;color:var(--body)}

/* --- audience cards --- */
/* An equal-height grid was wrong for this content: the descriptions vary from
   two lines to six, so full rows left dead space and a row of five left a hole.
   Rows instead, each taking its own height, working at any number of entries. */
.aud{display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--rule);margin-top:26px}
.aud article{background:none;padding:20px 0 22px;
  border-bottom:1px solid var(--rule)}
@media(min-width:760px){
  .aud article{display:grid;grid-template-columns:232px minmax(0,660px);
    column-gap:44px;padding:24px 0 26px}
}
.aud h3{font-size:20px;margin:0 0 8px}
@media(min-width:760px){.aud h3{margin-bottom:0}}
.aud p{margin:0;font-size:14px;color:var(--body)}

/* --- property grid on the letting hubs --- */
.pgrid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:30px}
@media(min-width:680px){.pgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.pgrid{grid-template-columns:1fr 1fr 1fr}}
.pcard{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--hair);
  background:var(--page);transition:border-color .25s}
.pcard:hover{border-color:var(--gold)}
.pcard .shot{aspect-ratio:3/2;overflow:hidden;background:var(--cream2)}
.pcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .shot img{transform:scale(1.03)}
.pcard .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.pcard .area{font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dk)}
.pcard h3{font-size:24px;margin:7px 0 4px}
.pcard .sub{font-size:13px;color:var(--muted);margin:0 0 16px}
.pcard .facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--hair)}
.pcard .facts span{font-size:12.5px;color:var(--body)}
.pcard .facts b{font-family:Jost,sans-serif;font-weight:500;color:var(--ink)}
.pcard .go{font-family:Jost,sans-serif;font-weight:500;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dk);margin-top:16px}
.pgrid.two{grid-template-columns:1fr}
@media(min-width:680px){.pgrid.two{grid-template-columns:1fr 1fr}}

/* placeholder card when a section has no live stock */
.pcard.soon{border-style:dashed;background:var(--cream)}
.pcard.soon .body{justify-content:center;text-align:center;padding:52px 26px}
.pcard.soon h3{color:var(--ink)}
.pcard.soon p{font-size:13.5px;color:var(--muted);margin:8px 0 0}

/* --- FAQ --- */
.faq{margin-top:26px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:"Cormorant Garamond",serif;font-size:21px;color:var(--ink);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:29px;width:11px;height:11px;
  border-right:1px solid var(--gold-dk);border-bottom:1px solid var(--gold-dk);
  transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .a{padding:0 0 22px;max-width:70ch}
.faq .a p{margin:0 0 12px;font-size:14.5px}
.faq .a p:last-child{margin-bottom:0}
.faq .a ul{margin:0 0 12px;padding-left:18px}
.faq .a li{font-size:14.5px;margin-bottom:6px}

/* --- pull quote / positioning band --- */
.band{background:var(--cream);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:52px 0}
.band .q{font-family:"Cormorant Garamond",serif;font-size:clamp(24px,3.2vw,34px);line-height:1.35;
  color:var(--ink);max-width:26ch;margin:0}
.band .who{font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dk);margin-top:18px}

/* --- cross-links to the other hubs --- */
.also{border-top:1px solid var(--hair);padding:48px 0 4px}
.also h2{font-size:26px;margin-bottom:22px}
/* Cross-links: a plain list, not a grid of boxes. The numbers were page indices,
   which meant nothing to a reader and collided with the pillar numbering. */
.alist{display:grid;grid-template-columns:1fr;gap:0;background:none;border:0;
  border-top:1px solid var(--hair)}
.alist a{background:none;padding:18px 0 20px;text-decoration:none;display:block;
  border-bottom:1px solid var(--hair)}
@media(min-width:620px){.alist{grid-template-columns:1fr 1fr}
  .alist a{padding-right:26px}}
/* Four across on a wide screen, divided like the figures row at the top of the
   page. The first column keeps the page margin so it lines up with the heading. */
@media(min-width:900px){
  .alist{grid-template-columns:repeat(4,1fr)}
  .alist a{padding:20px 22px 2px;border-bottom:0;border-left:1px solid var(--hair)}
  .alist a:first-child{padding-left:0;border-left:0}
  .alist h3{font-size:18px}
  .alist p{font-size:13px}
}
.alist a:hover h3{color:var(--gold-dk)}
.alist .an{font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.2em;
  color:var(--gold-dk)}
.alist h3{font-size:21px;margin:6px 0 5px}
.alist p{margin:0;font-size:13.5px;color:var(--muted)}

/* --- nav dropdown --- */
.nav .links{display:flex;align-items:center;gap:26px}
.nav .links > a,.nav .drop > button{font-family:Jost,sans-serif;font-weight:400;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.78);text-decoration:none;
  background:none;border:0;cursor:pointer;padding:6px 0;white-space:nowrap}
.nav .links > a:hover,.nav .drop > button:hover,.nav .drop[data-open="1"] > button{color:var(--gold)}
.nav .drop{position:relative}
.nav .drop > button::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);
  vertical-align:2px}
/* The menu used to sit 14px clear of the button. That gap belonged to neither
   element, so crossing it fired mouseleave and the menu shut before you reached
   it. The offset is now a transparent top border on the menu itself, which the
   cursor can travel through without leaving the element. background-clip keeps
   the green from painting under it. */
.nav .menu{position:absolute;top:100%;left:-18px;min-width:268px;background:var(--green);
  border:1px solid rgba(222,172,105,.28);border-top:15px solid transparent;
  background-clip:padding-box;padding:8px 0;display:none;z-index:70;
  box-shadow:0 18px 44px rgba(8,17,19,.32)}
.nav .drop[data-open="1"] .menu{display:block}
.nav .menu a{display:block;padding:11px 20px;text-decoration:none;color:rgba(255,255,255,.85);
  font-family:Jost,sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.nav .menu a:hover{background:rgba(222,172,105,.13);color:var(--gold)}
.nav .menu a span{display:block;text-transform:none;letter-spacing:0;font-size:.7rem;
  color:rgba(255,255,255,.5);margin-top:3px}
@media(max-width:1000px){
  .nav .links{gap:16px}
  .nav .links > a:not(.tel){display:none}
  .nav .drop > button{font-size:.66rem}
  .nav .menu{left:auto;right:-10px}
}

/* --- footer nav --- */
.foot .fnav{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:10px 26px;padding-bottom:24px;margin-bottom:24px;
  border-bottom:1px solid var(--hair)}
.foot .fnav a{font-family:Jost,sans-serif;font-weight:500;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dk);text-decoration:none}
.foot .fnav a:hover{color:var(--ink)}

/* ------------------------------------------------------------ mobile nav */
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px 4px;
  width:42px;height:42px;align-items:center;justify-content:center;flex:0 0 auto}
.burger i{display:block;position:relative;width:22px;height:1px;background:var(--gold);
  transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1px;
  background:var(--gold);transition:transform .25s}
.burger i::before{top:-7px} .burger i::after{top:7px}
body[data-mnav="1"] .burger i{background:transparent}
body[data-mnav="1"] .burger i::before{transform:translateY(7px) rotate(45deg)}
body[data-mnav="1"] .burger i::after{transform:translateY(-7px) rotate(-45deg)}

.mnav{position:fixed;inset:0;top:0;z-index:59;background:var(--green);display:none;
  padding:88px 26px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch}
body[data-mnav="1"] .mnav{display:block}
body[data-mnav="1"]{overflow:hidden}
.mnav a{display:block;text-decoration:none;color:#fff;font-family:"Cormorant Garamond",serif;
  font-size:27px;padding:15px 0;border-bottom:1px solid rgba(222,172,105,.18)}
.mnav a span{display:block;font-family:Jost,sans-serif;font-weight:300;font-size:12.5px;
  color:rgba(255,255,255,.5);margin-top:3px}
.mnav a:hover{color:var(--gold)}
.mnav .grp{font-family:Jost,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:30px 0 4px}
.mnav .mtel{margin-top:34px}
.mnav .mtel .btn{display:block;width:100%}

@media(max-width:1000px){
  .nav .links{display:none}
  .burger{display:flex}
  .nav .row{gap:12px}
}
@media(min-width:1001px){.burger,.mnav{display:none!important}}

/* --- keeps the hub pages clear of the fixed mobile bar --- */
body[data-bar="1"] .foot{padding-bottom:78px}

/* --- section intro width helper + generic media figure --- */
.shot-wide{margin:26px 0 0;border:1px solid var(--hair)}
.shot-wide img{width:100%;height:auto;display:block}

/* --- ghost button on light grounds --- */
.cta .btn-ghost,.hero .btn-ghost,.sec .btn-ghost,.card .btn-ghost,.band .btn-ghost,
.main .btn-ghost{color:var(--gold-dk);border-color:var(--gold)}
.card .btn-ghost{display:block;width:100%;margin-top:12px}

/* ============================================================================
   SECTION GROUNDS. The homepage alternates white / off-white / green, and is
   roughly half green. These give the hub pages the same rhythm.
   Colours on green are exactly the ones the homepage uses: white headings,
   gold italic emphasis, teal small labels, white-at-65% prose.
   ========================================================================== */
.sec.cream{background:var(--cream)}
.sec.cream + .sec.cream{border-top:1px solid var(--rule)}

.sec.dark{background:var(--green);color:rgba(255,255,255,.72);border-top:0}
.sec.dark + .sec.dark{padding-top:0}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark h1 em,.sec.dark h2 em{color:var(--gold)}
.sec.dark .eyebrow{color:var(--gold)}
.sec.dark p,.sec.dark li,.sec.dark .intro p{color:rgba(255,255,255,.72)}
.sec.dark .fine{color:rgba(158,193,189,.85)}

/* pillars, steps and audience cards on the dark ground */
.sec.dark .pillars,.sec.dark .pillars article,
.sec.dark .steps,.sec.dark .steps .st{border-color:rgba(222,172,105,.28)}
.sec.dark .pillars .pn,.sec.dark .steps .sn{color:var(--gold)}
.sec.dark .steps h3{color:var(--lteal)}
@media(min-width:900px){.sec.dark .steps .st{border-top-color:var(--gold)}}
.sec.dark .aud{background:rgba(222,172,105,.28)}
.sec.dark .aud article{background:none;border-color:rgba(222,172,105,.28)}
.sec.dark .aud{border-color:rgba(222,172,105,.28)}
.sec.dark .aud h3{color:#fff}
.sec.dark .aud p{color:rgba(255,255,255,.72)}

/* the four-up figure strip */
.sec.dark .figs,.sec.dark .figs > div{border-color:rgba(222,172,105,.28)}
.sec.dark .figs .k{color:var(--lteal)}
.sec.dark .figs .v{color:var(--gold)}
.sec.dark .figs .n{color:rgba(255,255,255,.6)}

/* FAQ on the dark ground */
.sec.dark .faq,.sec.dark .faq details{border-color:rgba(222,172,105,.28)}
.sec.dark .faq summary{color:#fff}
.sec.dark .faq summary::after{border-color:var(--gold)}
.sec.dark .faq .a p,.sec.dark .faq .a li{color:rgba(255,255,255,.72)}
.sec.dark .faq .a b{color:var(--gold)}
.sec.dark .faq .a a{color:var(--gold)}

/* buttons on the dark ground revert to the homepage's own treatment */
.sec.dark .btn-ghost{color:var(--gold);border-color:rgba(222,172,105,.55)}
.sec.dark .btn-ghost:hover{background:rgba(222,172,105,.14)}

/* the pull quote sits on green and runs straight on from the section above it */
.band{background:var(--green);border:0;padding:56px 0 60px}
.band .q{color:#fff}
.band .q em{color:var(--gold);font-style:italic}
.band .who{color:var(--lteal)}
.sec.dark + .band{padding-top:8px}

/* the closing call to action, likewise */
.cta{background:var(--green);border-top:0;color:rgba(255,255,255,.72)}
.cta h2{color:#fff}
.cta h2 em{color:var(--gold)}
.cta .eyebrow{color:var(--gold)}
.cta p{color:rgba(255,255,255,.72)}
.cta .btn-ghost{color:var(--gold);border-color:rgba(222,172,105,.55)}
.cta .btn-ghost:hover{background:rgba(222,172,105,.14)}
.band + .cta,.sec.dark + .cta{border-top:1px solid rgba(222,172,105,.22)}

/* property pages keep their light enquiry band, which follows a white column */
body[data-bar="1"] .cta{background:var(--cream);color:var(--body);border-top:1px solid var(--hair)}
body[data-bar="1"] .cta h2{color:var(--ink)}
body[data-bar="1"] .cta .eyebrow{color:var(--gold-dk)}
body[data-bar="1"] .cta p{color:var(--body)}

/* property cards keep a white card face when the section behind them is green */
.sec.dark .pcard{background:var(--page);border-color:rgba(222,172,105,.3)}
.sec.dark .pcard:hover{border-color:var(--gold)}
.sec.dark .pcard h3,.sec.dark .pcard .facts b{color:var(--ink)}
.sec.dark .pcard .sub{color:var(--muted)}
.sec.dark .pcard .facts{border-top-color:var(--hair)}
.sec.dark .pcard .facts span{color:var(--body)}
.sec.dark .pcard .area,.sec.dark .pcard .go{color:var(--gold-dk)}
.sec.dark .pcard.soon{background:rgba(255,255,255,.055);border-color:rgba(222,172,105,.45)}
.sec.dark .pcard.soon h3{color:#fff}
.sec.dark .pcard.soon p{color:rgba(255,255,255,.72)}

/* ---------------------------------------------------------------- people */
.person{display:grid;grid-template-columns:1fr;gap:26px;padding:44px 0;
  border-bottom:1px solid var(--rule)}
@media(min-width:820px){.person{grid-template-columns:232px minmax(0,1fr);gap:52px;
  align-items:start;padding:52px 0}}
.person:last-child{border-bottom:0}
.person .shot{width:180px;max-width:100%;background:var(--cream2)}
@media(min-width:820px){.person .shot{width:100%}}
.person .shot img{width:100%;height:auto;display:block;filter:grayscale(1)}
.person .nm{font-family:"Cormorant Garamond",serif;font-size:clamp(28px,3.2vw,38px);
  color:var(--ink);line-height:1.1}
.person .ro{font-family:Jost,sans-serif;font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dk);margin-top:9px}
.person .bio{margin-top:20px}
.person .bio p{margin:0 0 15px;max-width:62ch}
.person .bio p:last-child{margin-bottom:0}
.person .covers{margin:24px 0 0;padding:18px 0 0;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:8px 10px}
.person .covers a,.person .covers span{font-family:Jost,sans-serif;font-weight:500;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk);text-decoration:none;
  border:1px solid var(--rule);padding:7px 13px}
.person .covers a:hover{border-color:var(--gold);background:var(--cream)}
.person .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sec.dark .person{border-bottom-color:rgba(222,172,105,.28)}
.sec.dark .person .nm{color:#fff}
.sec.dark .person .ro{color:var(--gold)}
.sec.dark .person .bio p{color:rgba(255,255,255,.72)}
.sec.dark .person .covers{border-top-color:rgba(222,172,105,.28)}
.sec.dark .person .covers a,.sec.dark .person .covers span{color:var(--gold);
  border-color:rgba(222,172,105,.4)}
.sec.dark .person .covers a:hover{background:rgba(222,172,105,.14)}