/* =========================================================================
   One Group Realty — site stylesheet
   Ported from the approved design concept.

   Loaded only on the homepage for now (see functions.php). As each page is
   rebuilt, add it to the condition in ogr_child_assets().

   Three class names from the concept were renamed, because each was already
   taken and would have fought with something on the live site:

     hero       -> ogr-hero        custom.css forces padding-bottom:750px on the
                                   old hero, with !important, which no amount of
                                   specificity can beat.
     search-btn -> ogr-search-btn  custom.css pins it to a fixed 101x48px.
     page       -> ogr-page        WordPress puts "page" on the body element, so
                                   the concept's display:none rule would have
                                   hidden the entire site.

   Everything else is byte-for-byte the approved concept.
   ========================================================================= */

/* ============ TOKENS ============ */
:root{
  --ink:#0F2438;
  --ink-deep:#071522;
  --paper:#FAF9F7;
  --stone:#E6E3DE;
  --blue:#2E6FA7;
  --brass:#B5893F;

  --t-90:rgba(15,36,56,.90);
  --t-62:rgba(15,36,56,.62);
  --t-42:rgba(15,36,56,.42);
  --line:rgba(15,36,56,.13);
  --line-soft:rgba(15,36,56,.07);

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,56px);
  --band:clamp(76px,11vw,140px);
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============ RESET ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ============ TYPE ============ */
.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-42);display:block;margin-bottom:22px;
}
.eyebrow.on-dark{color:rgba(255,255,255,.5)}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:-.018em;line-height:1.08}
h1{font-size:clamp(2.5rem,5.6vw,4.5rem)}
h2{font-size:clamp(1.85rem,3.3vw,2.85rem);line-height:1.12}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:400;line-height:1.25}
h4{font-size:1.02rem;font-weight:500;letter-spacing:-.005em}
p{color:var(--t-62);font-size:.975rem}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.68;color:var(--t-62);max-width:56ch}
.small{font-size:.8125rem;line-height:1.6;color:var(--t-42)}
.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ============ LAYOUT ============ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.band{padding:var(--band) 0}
.band-sm{padding:calc(var(--band)*.6) 0}
.dark{background:var(--ink);color:#fff}
.dark p,.dark .small{color:rgba(255,255,255,.6)}
.deep{background:var(--ink-deep);color:#fff}
.deep p{color:rgba(255,255,255,.6)}
.rule{height:1px;background:var(--line);border:0}
.stack>*+*{margin-top:18px}
.max-60{max-width:60ch}

.head-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,68px);
}
.head-row h2{max-width:20ch}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-size:.8125rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  border-radius:var(--r);cursor:pointer;transition:.35s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-light{background:#fff;border-color:#fff;color:var(--ink)}
.btn-light:hover{background:transparent;color:#fff}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-brass{background:var(--brass);border-color:var(--brass);color:#fff}
.btn-brass:hover{background:transparent;color:var(--brass)}

.link-u{
  display:inline-flex;align-items:center;gap:9px;font-size:.8125rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;padding-bottom:5px;
  border-bottom:1px solid var(--line);transition:.3s var(--ease);white-space:nowrap;
}
.link-u:hover{border-color:var(--brass);color:var(--brass)}
.link-u.on-dark{border-color:rgba(255,255,255,.25);color:#fff}
.link-u.on-dark:hover{border-color:var(--brass);color:var(--brass)}
.arw{transition:transform .3s var(--ease)}
.link-u:hover .arw,.btn:hover .arw{transform:translateX(4px)}

/* ============ DEMO BAR ============ */
.demobar{
  background:var(--ink-deep);color:rgba(255,255,255,.72);
  font-size:12px;letter-spacing:.03em;padding:9px 0;position:relative;z-index:120;
}
.demobar .wrap{display:flex;align-items:center;gap:14px;justify-content:center;text-align:center;flex-wrap:wrap}
.demobar b{color:var(--brass);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
.demobar button{background:none;border:0;color:rgba(255,255,255,.4);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}
.demobar button:hover{color:#fff}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:100;background:var(--ink);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.hdr.float{background:transparent}
.hdr.float.stuck{background:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.08)}
body.ogr-heropage .ogr-hero,body.ogr-heropage .ogr-page>.vband:first-child{margin-top:-76px}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;height:76px}
.brand img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.66);padding:6px 0;position:relative;transition:color .3s var(--ease);
}
.nav a:hover,.nav a.on{color:#fff}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass)}
.hdr-cta{
  font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28);color:#fff;padding:11px 20px;border-radius:var(--r);
  transition:.3s var(--ease);white-space:nowrap;
}
.hdr-cta:hover{background:var(--brass);border-color:var(--brass)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:1.5px;background:#fff;transition:.3s var(--ease)}

@media(max-width:1040px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,84vw);background:var(--ink-deep);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
    padding:0 36px;transform:translateX(100%);transition:transform .45s var(--ease);z-index:110;
  }
  .nav.open{transform:none}
  .nav a{font-family:var(--display);font-size:1.5rem;text-transform:none;letter-spacing:-.01em;font-weight:300;padding:11px 0;color:rgba(255,255,255,.8)}
  .nav a.on::after{display:none}
  .nav a.on{color:var(--brass)}
  .burger{display:flex;z-index:115}
  .burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .hdr-cta{display:none}
}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============ PAGE WRAPPER ============ */
.ogr-page{display:block}

/* ============ HERO ============ */
.ogr-hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-deep)}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,21,34,.62) 0%,rgba(7,21,34,.30) 34%,rgba(7,21,34,.86) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,7vw,88px);padding-top:150px;color:#fff}
.ogr-hero h1{color:#fff;max-width:16ch;margin-bottom:24px}
.ogr-hero .lede{color:rgba(255,255,255,.74);max-width:44ch}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:clamp(38px,5vw,58px)}
.vidtoggle{
  display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);color:#fff;padding:11px 20px;border-radius:100px;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.3s var(--ease);
  backdrop-filter:blur(8px);
}
.vidtoggle:hover{background:rgba(255,255,255,.16)}
.vidtoggle .dot{width:6px;height:6px;border-radius:50%;background:var(--brass)}

/* search */
.search{
  position:relative;z-index:5;margin-top:-46px;background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 60px -34px rgba(7,21,34,.5);
}
.search-in{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:0}
.search-f{padding:20px 24px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:5px;min-width:0}
.search-f:last-of-type{border-right:0}
.search-f label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-42);font-weight:500}
.search-f select{border:0;background:none;font-size:.925rem;font-weight:500;cursor:pointer;width:100%;padding:1px 0}
.ogr-search-btn{
  background:var(--ink);color:#fff;border:0;padding:0 34px;cursor:pointer;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;transition:.3s var(--ease);
}
.ogr-search-btn:hover{background:var(--brass)}
@media(max-width:900px){
  .search{margin-top:-24px}
  .search-in{grid-template-columns:1fr 1fr}
  .search-f{border-bottom:1px solid var(--line-soft)}
  .search-f:nth-child(odd){border-right:1px solid var(--line-soft)}
  .ogr-search-btn{grid-column:1/-1;padding:18px}
}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--paper);padding:clamp(26px,3vw,40px) clamp(18px,2.4vw,32px)}
.dark .stat{background:var(--ink)}
.stat .v{font-family:var(--display);font-size:clamp(2.1rem,3.6vw,3.1rem);font-weight:200;line-height:1;letter-spacing:-.03em;margin-bottom:12px}
.stat .k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--t-42);line-height:1.5}
.dark .stat .k{color:rgba(255,255,255,.45)}
.stat .v .suf{color:var(--brass)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* ============ LISTINGS ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.4vw,34px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3vw,48px)}
@media(max-width:960px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:transparent;cursor:pointer;display:block;text-align:left;border:0;width:100%;font:inherit}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card-img img{transform:scale(1.045)}
.tag{
  position:absolute;top:16px;left:16px;background:#fff;color:var(--ink);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;
}
.tag.sold{background:var(--brass);color:#fff}
.tag.auction{background:var(--ink);color:#fff}
.tag.uo{background:var(--blue);color:#fff}
.card-body{padding:20px 2px 0}
.card-body .sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-42);margin-bottom:9px}
.card-body h3{margin-bottom:11px}
.card-price{font-size:.925rem;font-weight:500;margin-bottom:14px;color:var(--t-90)}
.specs{display:flex;gap:20px;padding-top:14px;border-top:1px solid var(--line-soft)}
.spec{display:flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--t-62)}
.spec svg{width:15px;height:15px;stroke:var(--t-42);fill:none;stroke-width:1.4}

/* ============ SOLD LEDGER (signature) ============ */
.ledger{border-top:1px solid var(--line)}
.led{
  display:grid;grid-template-columns:minmax(0,2.3fr) 1fr .9fr .9fr;gap:24px;align-items:center;
  padding:24px 4px;border-bottom:1px solid var(--line-soft);position:relative;
  transition:padding-left .4s var(--ease);
}
.led::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--brass);transition:width .8s var(--ease)}
.led.in::before{width:100%}
.led:hover{padding-left:14px}
.led .addr{font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:400;letter-spacing:-.01em}
.led .sb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-42);margin-top:5px}
.led .mt{font-size:.8125rem;color:var(--t-62);letter-spacing:.02em}
.led .pr{font-family:var(--display);font-size:clamp(1rem,1.5vw,1.22rem);font-weight:400;color:var(--brass);text-align:right}
.dark .led{border-color:rgba(255,255,255,.09)}
.dark .led .sb,.dark .led .mt{color:rgba(255,255,255,.45)}
@media(max-width:800px){
  .led{grid-template-columns:1fr auto;gap:10px 18px;padding:20px 4px}
  .led .mt:nth-of-type(2){display:none}
  .led .pr{grid-column:2;grid-row:1}
}

/* ============ VIDEO BAND ============ */
.vband{position:relative;overflow:hidden;background:var(--ink-deep);isolation:isolate}
.vband-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.vband-bg iframe{
  position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;
  transform:translate(-50%,-50%);border:0;
}
.vband-still{
  position:absolute;inset:-4%;background-size:cover;background-position:center;z-index:0;
  animation:kb 30s ease-in-out infinite alternate;
}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.16) translate(-1.4%,-1%)}}
.vband-bg iframe{opacity:0;transition:opacity 1.2s var(--ease);z-index:1}
.vband-bg iframe.on{opacity:1}
.vband-bg::after{content:"";position:absolute;inset:0;background:rgba(7,21,34,.76);z-index:2}
@media(prefers-reduced-motion:reduce){.vband-still{animation:none}}
.vband .wrap{position:relative;z-index:2}
.vband-tall{min-height:min(78vh,720px);display:flex;align-items:center}

/* split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:38px}}
.split-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.split-media img,.split-media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.split-media.video iframe{width:177.77%;height:100%;left:50%;transform:translateX(-50%)}

/* ============ DIRECTORY / TEAM ============ */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
@media(max-width:900px){.people{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.people{grid-template-columns:1fr}}
.person-img{aspect-ratio:3/4;overflow:hidden;background:var(--stone);position:relative}
.person-img img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(1);transition:filter .7s var(--ease),transform 1.1s var(--ease)}
.person:hover .person-img img{filter:none;transform:scale(1.03)}
.person h4{margin:18px 0 5px}
.person .role{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--t-42);margin-bottom:12px}
.person .cts{display:flex;flex-direction:column;gap:3px}
.person .cts a{font-size:.8125rem;color:var(--t-62);transition:color .25s}
.person .cts a:hover{color:var(--brass)}

/* ============ SERVICE CARDS ============ */
.svc{border-top:1px solid var(--line);padding-top:26px}
.dark .svc{border-color:rgba(255,255,255,.14)}
.svc .n{font-family:var(--display);font-size:.95rem;color:var(--brass);margin-bottom:20px;letter-spacing:.04em}
.svc h3{margin-bottom:14px}
.svc p{margin-bottom:22px}

/* ============ FORM ============ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form .full{grid-column:1/-1}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.field label{display:block;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--t-42);font-weight:500;margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:11px 0;font-size:.95rem;transition:border-color .3s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brass)}
.field textarea{resize:vertical;min-height:96px}
.dark .field label{color:rgba(255,255,255,.45)}
.dark .field input,.dark .field select,.dark .field textarea{border-color:rgba(255,255,255,.2);color:#fff}

/* ============ QUOTES ============ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,50px)}
@media(max-width:880px){.quotes{grid-template-columns:1fr}}
.quote p{font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.24rem);font-weight:300;line-height:1.55;color:var(--ink);margin-bottom:22px;letter-spacing:-.008em}
.dark .quote p{color:#fff}
.quote .who{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--t-42)}
.dark .quote .who{color:rgba(255,255,255,.45)}
.stars{color:var(--brass);letter-spacing:.22em;font-size:.8rem;margin-bottom:20px}

/* ============ PROPERTY DETAIL ============ */
.gal{display:grid;grid-template-columns:2fr 1fr;gap:8px;height:clamp(320px,52vh,560px)}
.gal>*{overflow:hidden;background:var(--stone)}
.gal img{width:100%;height:100%;object-fit:cover}
.gal-side{display:grid;grid-template-rows:1fr 1fr;gap:8px}
@media(max-width:760px){.gal{grid-template-columns:1fr;height:auto}.gal-side{grid-template-columns:1fr 1fr;grid-template-rows:none;height:140px}}
.detail{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(34px,5vw,72px);align-items:start}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.agentbox{border:1px solid var(--line);padding:clamp(24px,3vw,34px);position:sticky;top:100px;background:#fff}
@media(max-width:900px){.agentbox{position:static}}
.agentbox .ph{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:top;margin-bottom:16px;background:var(--stone)}
.specrow{display:flex;gap:34px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:28px 0}
.specrow .s .v{font-family:var(--display);font-size:1.6rem;font-weight:300;line-height:1}
.specrow .s .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-42);margin-top:7px}
.inspect{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
.inspect span:last-child{color:var(--t-62)}

/* ============ FILTER BAR ============ */
.fbar{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:34px;margin-bottom:44px;border-bottom:1px solid var(--line)}
.chip{
  border:1px solid var(--line);background:transparent;padding:9px 18px;cursor:pointer;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;transition:.3s var(--ease);
}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============ FOOTER ============ */
.ftr{background:var(--ink-deep);color:#fff;padding:clamp(60px,7vw,96px) 0 34px}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,3.4vw,54px);padding-bottom:clamp(44px,5vw,70px)}
@media(max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr h5{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:500;margin-bottom:20px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ftr ul a{font-size:.875rem;color:rgba(255,255,255,.68);transition:color .25s}
.ftr ul a:hover{color:var(--brass)}
.ftr-logo{height:26px;margin-bottom:22px}
.ftr-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;color:rgba(255,255,255,.38)}

/* ============ CTA BAND ============ */
.cta-band{text-align:center}
.cta-band h2{max-width:18ch;margin:0 auto 22px;color:#fff}
.cta-band .lede{margin:0 auto 40px;color:rgba(255,255,255,.62)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.mark{opacity:.05;height:120px;margin:0 auto 34px;filter:brightness(0) invert(1)}

/* ---- AWARDS ---- */
.awards{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(34px,5vw,76px);align-items:center}
@media(max-width:860px){.awards{grid-template-columns:1fr;gap:44px}}
.badge-lg{max-width:190px;width:100%;margin:0 auto}
.award-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.13)}
@media(max-width:560px){.award-grid{grid-template-columns:1fr}}
.award{background:var(--ink);padding:clamp(22px,2.6vw,32px)}
.award .yr{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.award h4{color:#fff;font-family:var(--display);font-weight:300;font-size:1.06rem;line-height:1.35;letter-spacing:-.01em}
.award .src{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.34);margin-top:12px}

/* ---- OPEN HOMES ---- */
.oh{display:grid;grid-template-columns:74px minmax(0,1fr) auto auto;gap:clamp(16px,2.4vw,32px);
    align-items:center;padding:22px 4px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:padding-left .4s var(--ease)}
.oh:hover{padding-left:12px}
.oh .dt{text-align:center}
.oh .dt .d{font-family:var(--display);font-size:1.7rem;font-weight:300;line-height:1}
.oh .dt .m{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--t-42);margin-top:5px}
.oh .ad{font-family:var(--display);font-size:clamp(1rem,1.5vw,1.18rem);font-weight:400}
.oh .sb{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--t-42);margin-top:4px}
.oh .tm{font-size:.85rem;color:var(--t-62);white-space:nowrap}
.oh .go{font-size:1.1rem;color:var(--t-42);transition:transform .3s var(--ease)}
.oh:hover .go{transform:translateX(4px);color:var(--brass)}
@media(max-width:640px){.oh{grid-template-columns:58px 1fr;gap:14px}.oh .tm{grid-column:2}.oh .go{display:none}}

/* ---- AREAS ---- */
.areas{display:flex;flex-wrap:wrap;gap:9px}
.area{border:1px solid var(--line);padding:11px 19px;font-size:.85rem;cursor:pointer;background:transparent;transition:.3s var(--ease)}
.area:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line-soft)}
.faq-q{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:26px 0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:28px;
  font-family:var(--display);font-size:clamp(1.02rem,1.5vw,1.22rem);font-weight:400;letter-spacing:-.01em}
.faq-q .pm{color:var(--brass);font-size:1.4rem;line-height:1;transition:transform .4s var(--ease);flex:none}
.faq-i.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.faq-a p{padding-bottom:28px;max-width:70ch}

/* ---- VERTICAL CTA VIDEO ---- */
.cta-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(38px,5vw,84px);align-items:center;text-align:left}
@media(max-width:860px){.cta-split{grid-template-columns:1fr;gap:48px}}
.cta-split h2{margin:0 0 22px;max-width:16ch}
.cta-split .lede{margin:0 0 38px}
.cta-split .cta-actions{justify-content:flex-start}
.vert{
  position:relative;aspect-ratio:9/16;width:100%;max-width:322px;margin-left:auto;overflow:hidden;
  background:linear-gradient(158deg,#12293f 0%,#061320 100%);border:1px solid rgba(255,255,255,.13);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:32px;
}
@media(max-width:860px){.vert{margin:0 auto}}
.vert::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 50% 32%,rgba(181,137,63,.16),transparent 62%)}
.vert video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vert .play{width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  display:grid;place-items:center;position:relative;z-index:2}
.vert .play span{width:0;height:0;border-left:13px solid rgba(255,255,255,.85);
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.vert .cap{position:relative;z-index:2;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.45);line-height:1.7}
.vert .ratio{position:absolute;top:16px;left:16px;z-index:2;font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.3)}

/* ---- OFFICES ---- */
.oswitch{display:inline-flex;border:1px solid rgba(255,255,255,.3);border-radius:100px;overflow:hidden;backdrop-filter:blur(8px)}
.oswitch button{padding:10px 24px;background:none;border:0;color:rgba(255,255,255,.72);cursor:pointer;
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500;transition:.3s var(--ease)}
.oswitch button.on{background:#fff;color:var(--ink)}
.infostrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.infostrip .i{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.infostrip .k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-42);margin-bottom:11px}
.infostrip .v{font-size:.94rem;line-height:1.6}
@media(max-width:760px){.infostrip{grid-template-columns:1fr 1fr}}
.ocards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px)}
@media(max-width:700px){.ocards{grid-template-columns:1fr}}
.ocard{position:relative;overflow:hidden;cursor:pointer;background:var(--stone);border:0;padding:0;width:100%;font:inherit;display:block}
.ocard img{aspect-ratio:16/11;object-fit:cover;width:100%;transition:transform 1.2s var(--ease)}
.ocard:hover img{transform:scale(1.05)}
.ocard .ov{position:absolute;inset:0;text-align:left;
  background:linear-gradient(180deg,rgba(7,21,34,.1) 26%,rgba(7,21,34,.88) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,3vw,36px);color:#fff}
.ocard .ov h3{color:#fff;margin-bottom:8px}
.ocard .ov .m{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ---- BACK BAR ---- */
.backbar{display:none;position:sticky;top:76px;z-index:80;background:var(--paper);border-bottom:1px solid var(--line-soft)}
.backbar.show{display:block}
.backbar .wrap{display:flex;align-items:center;height:54px}
.backbar button{display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--t-62);transition:.3s var(--ease)}
.backbar button:hover{color:var(--brass)}
.backbar button .bk{transition:transform .3s var(--ease)}
.backbar button:hover .bk{transform:translateX(-4px)}
.backbar.over{position:fixed;top:92px;left:0;right:0;background:none;border:0}
.backbar.over .wrap{height:auto}
.backbar.over button{color:#fff;background:rgba(7,21,34,.45);border:1px solid rgba(255,255,255,.24);
  padding:11px 20px;border-radius:100px;backdrop-filter:blur(10px)}
.backbar.over button:hover{background:rgba(7,21,34,.7);color:#fff}

/* ---- STICKY MOBILE BAR ---- */
.mbar{display:none}
@media(max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:var(--ink);border-top:1px solid rgba(255,255,255,.14)}
  .mbar a{padding:17px 10px;text-align:center;font-size:.72rem;letter-spacing:.11em;
    text-transform:uppercase;color:#fff;font-weight:500}
  .mbar a+a{background:var(--brass)}
  body{padding-bottom:54px}
}

/* =========================================================================
   ADDITIONS FOR THE LIVE BUILD
   Placeholders and states the concept did not need because its data was fake.
   Same visual language as the concept's other placeholders.
   ========================================================================= */

/* Office photo placeholder — used for Mernda until a photo is supplied.
   Matches the team monogram tiles rather than using stock photography. */
.ogr-place{
  position:relative;background:linear-gradient(158deg,#12293f 0%,#061320 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:32px;color:#fff;
}
.ogr-place::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 34%,rgba(181,137,63,.15),transparent 64%)}
.ogr-place .mono{position:relative;z-index:2;font-family:var(--display);font-size:2.6rem;
  font-weight:300;letter-spacing:.05em;color:rgba(255,255,255,.9);line-height:1}
.ogr-place .cap{position:relative;z-index:2;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.34);line-height:1.7}
.ocard .ogr-place{aspect-ratio:16/11}
.card-img .ogr-place{position:absolute;inset:0}

/* Empty state — shown if the CRM returns nothing for a section */
.ogr-empty{padding:44px 4px;border-bottom:1px solid var(--line-soft);
  font-size:.925rem;color:var(--t-42)}

/* Admin bar: the sticky header must sit under it when logged in */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){body.admin-bar .hdr{top:46px}}
body.admin-bar .backbar{top:108px}

/* The concept's global reset must not fight the WP admin bar */
#wpadminbar *{box-sizing:content-box}

/* ---- PAGINATION (inner pages) ---- */
.ogr-pager{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(38px,4vw,60px);
  padding-top:30px;border-top:1px solid var(--line)}
.ogr-pager .chip{text-decoration:none}
.ogr-pager .chip.is-off{opacity:.32;cursor:default}
.ogr-pager-count{font-size:.8125rem;color:var(--t-42);letter-spacing:.04em}

/* chips are links on the live site, not buttons */
a.chip{display:inline-block;text-decoration:none}
a.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
a.area{display:inline-block;text-decoration:none}

/* ---- SOLD STATE on a property page ---- */
.soldban{background:var(--brass);color:#fff;padding:14px 0;text-align:center;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.soldban .amt{font-family:var(--display);text-transform:none;letter-spacing:-.01em;
  font-size:1.05rem;margin-left:10px}
.gal .ogr-place{position:absolute;inset:0}
.gal>div{position:relative}

/* ---- FORM feedback ---- */
.ogr-note{padding:16px 20px;border-left:2px solid var(--brass);background:rgba(181,137,63,.07);
  font-size:.9rem;margin-bottom:26px}
.ogr-note.bad{border-color:#b23b3b;background:rgba(178,59,59,.07)}
.field .req{color:var(--brass)}
.ogr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   OVERRIDE LAYER
   =========================================================================

   custom.css is 27KB with ~105 !important declarations, and Elementor's kit
   stylesheet sets global typography and colour from Site Settings. Both were
   winning over the ported design.

   !important cannot be beaten by specificity alone — an !important
   declaration only loses to another !important declaration with higher
   specificity. So everything below is scoped to body.ogr-styled (which the
   header adds, and only on rebuilt pages) and marked !important. That gives
   0,2,x against custom.css's 0,0,x and Elementor's 0,1,x, so these win on
   both counts and cannot be beaten by source order either.

   Nothing here leaks onto pages that have not been rebuilt: without the
   ogr-styled class on <body>, none of these selectors match.
   ====================================================================== */

/* ---- TYPE ---- */
body.ogr-styled,
body.ogr-styled p,
body.ogr-styled li,
body.ogr-styled a,
body.ogr-styled span,
body.ogr-styled div,
body.ogr-styled button,
body.ogr-styled input,
body.ogr-styled select,
body.ogr-styled textarea,
body.ogr-styled label{
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif !important;
}

body.ogr-styled h1,
body.ogr-styled h2,
body.ogr-styled h3,
body.ogr-styled h4,
body.ogr-styled .addr,
body.ogr-styled .led .pr,
body.ogr-styled .stat .v,
body.ogr-styled .oh .dt .d,
body.ogr-styled .faq-q,
body.ogr-styled .quote p,
body.ogr-styled .specrow .s .v,
body.ogr-styled .award h4,
body.ogr-styled .oh .ad,
body.ogr-styled .svc .n,
body.ogr-styled .vert .mono,
body.ogr-styled .ogr-place .mono{
  font-family:'Newsreader',Georgia,'Times New Roman',serif !important;
}

/* the concept's weights — Newsreader at 200/300/400, never bold */
body.ogr-styled h1,
body.ogr-styled h2{font-weight:300 !important}
body.ogr-styled h3{font-weight:400 !important}
body.ogr-styled h4{font-weight:500 !important}
body.ogr-styled .stat .v{font-weight:200 !important}

body.ogr-styled h1{font-size:clamp(2.5rem,5.6vw,4.5rem) !important;line-height:1.08 !important;letter-spacing:-.018em !important}
body.ogr-styled h2{font-size:clamp(1.85rem,3.3vw,2.85rem) !important;line-height:1.12 !important;letter-spacing:-.018em !important}
body.ogr-styled h3{font-size:clamp(1.2rem,1.7vw,1.45rem) !important;line-height:1.25 !important}
body.ogr-styled h4{font-size:1.02rem !important}

body.ogr-styled{
  font-size:16px !important;
  line-height:1.75 !important;
  font-weight:400 !important;
  background:var(--paper) !important;
  color:var(--ink) !important;
}
body.ogr-styled p{font-size:.975rem !important;color:var(--t-62) !important}
body.ogr-styled .lede{font-size:clamp(1.02rem,1.5vw,1.16rem) !important;line-height:1.68 !important;color:var(--t-62) !important}
body.ogr-styled .small{font-size:.8125rem !important;color:var(--t-42) !important}

/* ---- COLOUR ----
   The live brand accent is bright pink/magenta. The approved concept is navy
   and brass, so the pink has to be overridden rather than left to leak through
   from custom.css and Elementor's global colours.

   The first version of this did it with one blunt rule:

       body.ogr-styled a { color: inherit !important }

   That killed the pink, and it also made the header navigation invisible. Nav
   links then inherited from body, which this file sets to navy, so they were
   navy text on the navy header. The appraisal button went the same way.

   inherit is only safe where the parent's colour is already correct, and on a
   dark header it is not. So every context now states its own colour. It is
   more lines, but nothing can go invisible by inheriting the wrong thing. */

/* content areas: links take the ink colour of their surroundings */
body.ogr-styled .ogr-page a{color:inherit !important}
body.ogr-styled .ogr-page a:hover{color:inherit}

/* --- header --- */
body.ogr-styled .hdr{color:#fff !important}
body.ogr-styled .nav a{color:rgba(255,255,255,.66) !important}
body.ogr-styled .nav a:hover,
body.ogr-styled .nav a.on{color:#fff !important}

/* the appraisal button: a solid brass pill, so it reads as the one action in
   the header rather than another link */
body.ogr-styled .hdr-cta{
  background:var(--brass) !important;
  border:1px solid var(--brass) !important;
  color:#fff !important;
  border-radius:100px !important;
  font-weight:600 !important;
}
body.ogr-styled .hdr-cta:hover{
  background:transparent !important;
  border-color:rgba(255,255,255,.55) !important;
  color:#fff !important;
}

/* --- footer --- */
body.ogr-styled .ftr{color:#fff !important}
body.ogr-styled .ftr a{color:rgba(255,255,255,.68) !important}
body.ogr-styled .ftr a:hover{color:var(--brass) !important}
body.ogr-styled .ftr .link-u.on-dark{color:#fff !important}
body.ogr-styled .ftr .link-u.on-dark:hover{color:var(--brass) !important}
body.ogr-styled .ftr-bot,
body.ogr-styled .ftr-bot a{color:rgba(255,255,255,.38) !important}
body.ogr-styled .ftr-bot a:hover{color:var(--brass) !important}

/* --- underlined links --- */
body.ogr-styled .link-u{color:var(--ink) !important}
body.ogr-styled .link-u:hover{color:var(--brass) !important}
body.ogr-styled .link-u.on-dark{color:#fff !important}
body.ogr-styled .link-u.on-dark:hover{color:var(--brass) !important}

/* --- dark sections --- */
body.ogr-styled .dark a,
body.ogr-styled .deep a{color:#fff !important}
body.ogr-styled .dark a:hover,
body.ogr-styled .deep a:hover{color:var(--brass) !important}
body.ogr-styled .dark .btn,
body.ogr-styled .deep .btn{color:#fff !important}

/* --- cards and rows that are whole links --- */
body.ogr-styled a.card,
body.ogr-styled a.led,
body.ogr-styled a.oh,
body.ogr-styled a.area,
body.ogr-styled a.chip{color:var(--ink) !important;text-decoration:none !important}
body.ogr-styled a.area:hover{color:#fff !important}
body.ogr-styled a.chip.on{color:#fff !important}
body.ogr-styled .ocard,
body.ogr-styled .ocard .ov,
body.ogr-styled .ocard .ov h3{color:#fff !important}

/* --- sticky mobile bar --- */
body.ogr-styled .mbar a{color:#fff !important}

/* --- people --- */
body.ogr-styled .person .cts a{color:var(--t-62) !important}
body.ogr-styled .person .cts a:hover{color:var(--brass) !important}

/* --- office switch --- */
body.ogr-styled .oswitch a,
body.ogr-styled .oswitch button{color:rgba(255,255,255,.72) !important}
body.ogr-styled .oswitch button.on{background:#fff !important;color:var(--ink) !important}

/* position:sticky stops working when an ancestor is overflow-x:hidden, which
   the concept sets on body. clip does the same job without creating a scroll
   container, so the header keeps sticking. Browsers without clip fall back to
   the hidden already declared above. */
body.ogr-styled{overflow-x:clip !important}
body.ogr-styled .hdr{position:sticky !important;top:0 !important;z-index:100 !important}

body.ogr-styled .dark,
body.ogr-styled .dark p,
body.ogr-styled .dark h1,
body.ogr-styled .dark h2,
body.ogr-styled .dark h3,
body.ogr-styled .dark h4{color:#fff !important}
body.ogr-styled .dark{background:var(--ink) !important}
body.ogr-styled .deep{background:var(--ink-deep) !important;color:#fff !important}
body.ogr-styled .hdr{background:var(--ink) !important}
body.ogr-styled .hdr.float{background:transparent !important}
body.ogr-styled .hdr.float.stuck{background:var(--ink) !important}
body.ogr-styled .ftr{background:var(--ink-deep) !important;color:#fff !important}

body.ogr-styled .btn{background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important}
body.ogr-styled .btn:hover{background:transparent !important;color:var(--ink) !important}
body.ogr-styled .btn-ghost{background:transparent !important;color:var(--ink) !important;border-color:var(--line) !important}
body.ogr-styled .btn-ghost:hover{background:var(--ink) !important;color:#fff !important}
body.ogr-styled .btn-light{background:#fff !important;border-color:#fff !important;color:var(--ink) !important}
body.ogr-styled .btn-light:hover{background:transparent !important;color:#fff !important}
body.ogr-styled .btn-outline-light{background:transparent !important;border-color:rgba(255,255,255,.32) !important;color:#fff !important}
body.ogr-styled .btn-outline-light:hover{background:#fff !important;color:var(--ink) !important}
body.ogr-styled .btn-brass{background:var(--brass) !important;border-color:var(--brass) !important;color:#fff !important}
body.ogr-styled .btn-brass:hover{background:transparent !important;color:var(--brass) !important}

body.ogr-styled .tag{background:#fff !important;color:var(--ink) !important}
body.ogr-styled .tag.sold{background:var(--brass) !important;color:#fff !important}
body.ogr-styled .tag.auction{background:var(--ink) !important;color:#fff !important}
body.ogr-styled .tag.uo{background:var(--blue) !important;color:#fff !important}

body.ogr-styled .led .pr,
body.ogr-styled .stars,
body.ogr-styled .svc .n,
body.ogr-styled .award .yr,
body.ogr-styled .faq-q .pm{color:var(--brass) !important}

body.ogr-styled .chip.on,
body.ogr-styled a.chip.on{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}
body.ogr-styled .ogr-search-btn{background:var(--ink) !important;color:#fff !important;
  width:auto !important;height:auto !important;border:0 !important;border-radius:0 !important}
body.ogr-styled .ogr-search-btn:hover{background:var(--brass) !important}

/* custom.css sizes .search-btn and pads .hero; neither may reach these */
body.ogr-styled .ogr-hero{padding-bottom:0 !important;height:auto !important}

/* ---- NINE NAV ITEMS ----
   The live nav has more items than the concept mocked, so the spacing is
   tightened to fit them all on one line, and the mobile breakpoint moves up
   so it collapses before it can crowd the logo. */
body.ogr-styled .nav{gap:clamp(13px,1.5vw,26px) !important}
body.ogr-styled .nav a{font-size:.735rem !important;letter-spacing:.08em !important;white-space:nowrap !important}
body.ogr-styled .hdr .wrap{gap:18px !important}
body.ogr-styled .hdr-cta{font-size:.7rem !important;padding:10px 15px !important;white-space:nowrap !important}

@media(max-width:1180px){
  body.ogr-styled .nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,84vw);background:var(--ink-deep);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:6px !important;
    padding:0 36px;transform:translateX(100%);transition:transform .45s var(--ease);z-index:110;
    overflow-y:auto;
  }
  body.ogr-styled .nav.open{transform:none}
  body.ogr-styled .nav a{
    font-family:'Newsreader',Georgia,serif !important;font-size:1.32rem !important;
    text-transform:none !important;letter-spacing:-.01em !important;font-weight:300 !important;
    padding:9px 0 !important;color:rgba(255,255,255,.8) !important;
  }
  body.ogr-styled .nav a.on::after{display:none}
  body.ogr-styled .nav a.on{color:var(--brass) !important}
  body.ogr-styled .burger{display:flex !important;z-index:115}
  body.ogr-styled .hdr-cta{display:none !important}
}
@media(min-width:1181px){
  body.ogr-styled .burger{display:none !important}
}

/* ---- keep Elementor's own widgets untouched where they still appear ---- */
body.ogr-styled .elementor-widget-container,
body.ogr-styled .elementor-widget-container *{font-family:inherit}

/* ---- admin-only note (never shown to the public) ---- */
body.ogr-styled .ogr-adminnote{
  margin-top:22px !important;padding:12px 16px !important;
  border-left:2px solid var(--brass) !important;background:rgba(181,137,63,.08) !important;
  font-size:.8rem !important;color:var(--t-62) !important;
}

/* ---- LOCATIONS: suburbs with stock ---- */
body.ogr-styled .area.has-stock{position:relative;padding-right:30px !important}
body.ogr-styled .area .dot{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--brass);
}
body.ogr-styled .area.has-stock:hover .dot{background:#fff}
body.ogr-styled .ogr-key-dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--brass);margin-right:7px;vertical-align:middle;
}

/* ---- OFFICE SWITCHER ----
   The other office is a link rather than a button, so it navigates. It has to
   sit in the pill looking identical to the active half. */
body.ogr-styled .oswitch{display:inline-flex;align-items:stretch}
body.ogr-styled .oswitch a,
body.ogr-styled .oswitch button{
  padding:10px 24px !important;background:none !important;border:0 !important;
  font-size:.74rem !important;letter-spacing:.11em !important;text-transform:uppercase !important;
  font-weight:500 !important;line-height:1.4 !important;cursor:pointer;
  display:inline-flex;align-items:center;text-decoration:none !important;
  transition:.3s var(--ease);
}
body.ogr-styled .oswitch a:hover{background:rgba(255,255,255,.12) !important;color:#fff !important}
body.ogr-styled .oswitch button.on{background:#fff !important;color:var(--ink) !important}

/* =========================================================================
   PAGE CONTENT
   The page's own copy, rendered inside the design.

   The concept's reset zeroes margins on everything, which is right for the
   built sections and wrong for flowing body copy. This gives the content back
   its rhythm without touching anything Elementor styles itself — Elementor's
   own rules are more specific than the reset, so they already survive it.
   ====================================================================== */
body.ogr-styled .ogr-content{max-width:74ch}
body.ogr-styled .ogr-content.is-wide{max-width:none}

body.ogr-styled .ogr-content > *:first-child{margin-top:0 !important}

body.ogr-styled .ogr-content h1,
body.ogr-styled .ogr-content h2,
body.ogr-styled .ogr-content h3,
body.ogr-styled .ogr-content h4,
body.ogr-styled .ogr-content h5,
body.ogr-styled .ogr-content h6{
  font-family:var(--display) !important;font-weight:300 !important;
  letter-spacing:-.018em !important;line-height:1.14 !important;
  margin:1.9em 0 .55em !important;color:var(--ink) !important;
}
body.ogr-styled .ogr-content h1{font-size:clamp(2rem,3.6vw,2.9rem) !important}
body.ogr-styled .ogr-content h2{font-size:clamp(1.55rem,2.6vw,2.1rem) !important}
body.ogr-styled .ogr-content h3{font-size:clamp(1.15rem,1.7vw,1.38rem) !important;font-weight:400 !important}
body.ogr-styled .ogr-content h4,
body.ogr-styled .ogr-content h5,
body.ogr-styled .ogr-content h6{font-size:1.02rem !important;font-weight:500 !important;font-family:var(--sans) !important;letter-spacing:0 !important}

body.ogr-styled .ogr-content p{margin:0 0 1.15em !important;color:var(--t-62) !important;font-size:1rem !important;line-height:1.75 !important}
body.ogr-styled .ogr-content ul,
body.ogr-styled .ogr-content ol{margin:0 0 1.3em 1.15em !important;padding-left:.6em !important;color:var(--t-62) !important}
body.ogr-styled .ogr-content li{margin-bottom:.5em !important;line-height:1.7 !important}
body.ogr-styled .ogr-content ul{list-style:disc !important}
body.ogr-styled .ogr-content ol{list-style:decimal !important}

body.ogr-styled .ogr-content a{color:var(--ink) !important;border-bottom:1px solid var(--line);transition:.25s var(--ease)}
body.ogr-styled .ogr-content a:hover{color:var(--brass) !important;border-color:var(--brass)}
body.ogr-styled .ogr-content a.btn,
body.ogr-styled .ogr-content a.elementor-button,
body.ogr-styled .ogr-content .elementor-button{border-bottom:0 !important}

body.ogr-styled .ogr-content img{margin:1.4em 0;height:auto}
body.ogr-styled .ogr-content blockquote{
  margin:1.6em 0 !important;padding-left:22px !important;border-left:2px solid var(--brass);
  font-family:var(--display) !important;font-size:1.15rem !important;color:var(--ink) !important;
}
body.ogr-styled .ogr-content hr{margin:2.2em 0 !important;height:1px;background:var(--line);border:0}
body.ogr-styled .ogr-content table{width:100%;border-collapse:collapse;margin:1.5em 0}
body.ogr-styled .ogr-content th,
body.ogr-styled .ogr-content td{padding:11px 12px;border-bottom:1px solid var(--line-soft);text-align:left;font-size:.925rem}

/* Forms inside page content keep their own structure — only the type and the
   controls are restyled, never the markup. */
body.ogr-styled .ogr-content input[type=text],
body.ogr-styled .ogr-content input[type=email],
body.ogr-styled .ogr-content input[type=tel],
body.ogr-styled .ogr-content input[type=number],
body.ogr-styled .ogr-content select,
body.ogr-styled .ogr-content textarea{
  background:transparent !important;border:0 !important;
  border-bottom:1px solid var(--line) !important;border-radius:0 !important;
  padding:11px 0 !important;font-size:.95rem !important;width:100%;
  font-family:var(--sans) !important;color:var(--ink) !important;
}
body.ogr-styled .ogr-content input:focus,
body.ogr-styled .ogr-content select:focus,
body.ogr-styled .ogr-content textarea:focus{outline:0 !important;border-color:var(--brass) !important}
body.ogr-styled .ogr-content label{
  font-size:10.5px !important;letter-spacing:.17em !important;text-transform:uppercase !important;
  color:var(--t-42) !important;font-weight:500 !important;margin-bottom:8px !important;display:block;
}
body.ogr-styled .ogr-content button[type=submit],
body.ogr-styled .ogr-content input[type=submit],
body.ogr-styled .ogr-content .elementor-button[type=submit]{
  background:var(--ink) !important;border:1px solid var(--ink) !important;color:#fff !important;
  padding:15px 30px !important;border-radius:var(--r) !important;
  font-size:.8125rem !important;font-weight:500 !important;letter-spacing:.09em !important;
  text-transform:uppercase !important;cursor:pointer;width:auto !important;
}
body.ogr-styled .ogr-content button[type=submit]:hover,
body.ogr-styled .ogr-content input[type=submit]:hover{background:transparent !important;color:var(--ink) !important}

/* a split whose left column is long-form copy should not vertically centre */
body.ogr-styled .split.is-top{align-items:flex-start !important}

/* ---- LINK GRID (restored "How can we help?" and "About OGR") ---- */
body.ogr-styled .linkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:900px){body.ogr-styled .linkgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){body.ogr-styled .linkgrid{grid-template-columns:1fr}}
body.ogr-styled .linkgrid a{
  background:var(--paper);padding:clamp(20px,2.4vw,28px);display:flex;align-items:center;
  justify-content:space-between;gap:14px;font-size:.95rem;color:var(--ink) !important;
  transition:.3s var(--ease);text-decoration:none !important;
}
body.ogr-styled .linkgrid a:hover{background:var(--ink);color:#fff !important}
body.ogr-styled .linkgrid a .arw{transition:transform .3s var(--ease)}
body.ogr-styled .linkgrid a:hover .arw{transform:translateX(4px)}
body.ogr-styled .dark .linkgrid{background:rgba(255,255,255,.13)}
body.ogr-styled .dark .linkgrid a{background:var(--ink);color:#fff !important}
body.ogr-styled .dark .linkgrid a:hover{background:var(--ink-deep);color:var(--brass) !important}

/* ---- NEWS ---- */
body.ogr-styled .newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.4vw,34px)}
@media(max-width:900px){body.ogr-styled .newsgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){body.ogr-styled .newsgrid{grid-template-columns:1fr}}
body.ogr-styled .newsitem{display:block;border-top:1px solid var(--line);padding-top:22px;text-decoration:none !important}
body.ogr-styled .newsitem .d{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--t-42);margin-bottom:12px}
body.ogr-styled .newsitem h3{font-family:var(--display) !important;font-size:1.12rem !important;font-weight:400 !important;
  line-height:1.32 !important;color:var(--ink) !important;margin:0 0 12px !important;transition:color .25s}
body.ogr-styled .newsitem:hover h3{color:var(--brass) !important}
body.ogr-styled .newsitem p{font-size:.9rem !important;color:var(--t-62) !important;margin:0 !important}

/* the search bar sits under its own heading on the live homepage */
body.ogr-styled .ogr-searchhead{
  margin:clamp(46px,5vw,70px) 0 22px !important;
  font-size:clamp(1.55rem,2.6vw,2.1rem) !important;
}
body.ogr-styled .ogr-searchhead + .search{margin-top:0 !important}

/* hero title when the page's own content already provides the H1 */
body.ogr-styled .ogr-herotitle{
  font-family:var(--display) !important;font-weight:300 !important;
  font-size:clamp(2.2rem,4.6vw,3.6rem) !important;line-height:1.08 !important;
  letter-spacing:-.018em !important;color:#fff !important;margin:0 !important;
  max-width:18ch;
}

/* ---- SEARCH: the extra filters ---- */
body.ogr-styled .ogr-morefilters{
  background:none !important;border:0 !important;cursor:pointer;
  padding:14px 24px !important;font-size:11px !important;letter-spacing:.16em !important;
  text-transform:uppercase !important;color:var(--t-42) !important;font-weight:500 !important;
  border-top:1px solid var(--line-soft) !important;width:100%;text-align:left;
  display:flex;align-items:center;gap:10px;
}
body.ogr-styled .ogr-morefilters:hover{color:var(--brass) !important}
body.ogr-styled .ogr-morefilters .pm{color:var(--brass);font-size:1.1rem;line-height:1;transition:transform .3s var(--ease)}
body.ogr-styled .ogr-morefilters[aria-expanded="true"] .pm{transform:rotate(45deg)}
/* :not([hidden]) — a plain author display:grid beats the browser's own
   [hidden]{display:none}, so this panel was open from the moment the search
   was built. It was open in the screenshots and nobody spotted it. */
body.ogr-styled .ogr-advanced:not([hidden]){
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line-soft);
}
body.ogr-styled .ogr-advanced[hidden]{display:none}
@media(max-width:900px){body.ogr-styled .ogr-advanced:not([hidden]){grid-template-columns:1fr 1fr}}
body.ogr-styled .ogr-advanced .search-f{border-right:1px solid var(--line-soft)}
body.ogr-styled .ogr-advanced .search-f:last-child{border-right:0}

/* page title when the page's own content already provides the H1 */
body.ogr-styled .ogr-pagetitle{
  font-family:var(--display) !important;font-weight:300 !important;
  font-size:clamp(2rem,3.6vw,2.9rem) !important;line-height:1.1 !important;
  letter-spacing:-.018em !important;color:var(--ink) !important;
  margin:0 0 8px !important;max-width:20ch;
}
body.ogr-styled a.eyebrow{text-decoration:none !important;transition:color .25s}
body.ogr-styled a.eyebrow:hover{color:var(--brass) !important}

/* ---- DAY-GROUPED LISTS (auctions, inspections) ---- */
body.ogr-styled .ogr-day{margin-bottom:clamp(34px,4vw,54px)}
body.ogr-styled .ogr-day-head{
  font-size:clamp(1.1rem,1.7vw,1.35rem) !important;font-weight:400 !important;
  padding-bottom:14px !important;margin:0 0 4px !important;
  border-bottom:1px solid var(--line) !important;
}
body.ogr-styled .ogr-day-rows .oh{grid-template-columns:74px minmax(0,1fr) auto auto}
body.ogr-styled .ogr-day-rows .oh .dt .d{font-size:1.35rem}
body.ogr-styled .ogr-day-rows a.ad{
  font-family:var(--display) !important;font-size:clamp(1rem,1.5vw,1.18rem) !important;
  font-weight:400 !important;color:var(--ink) !important;text-decoration:none !important;
  border-bottom:0 !important;transition:color .25s;
}
body.ogr-styled .ogr-day-rows a.ad:hover{color:var(--brass) !important}
@media(max-width:760px){
  body.ogr-styled .ogr-day-rows .oh{grid-template-columns:58px 1fr;gap:12px 14px}
  body.ogr-styled .ogr-day-rows .oh .tm{grid-column:2}
}

/* =========================================================================
   ═══════════════ VISUAL REDESIGN — BARRY PLANT DIRECTION ═══════════════
   =========================================================================

   White and off-white throughout. No dark sections anywhere.

   Almost all of this is done by redefining the design tokens rather than
   rewriting rules. Every rule in this file already reads its colour from a
   token, so changing five values re-colours the whole site consistently and
   leaves the layout untouched. That matters the night before launch: the CRM
   layer, the templates and the markup are not touched at all by this change.

   --brass becomes navy rather than red on purpose. Brass was the general
   accent — link hovers, sold prices, numbers, the FAQ plus sign — and putting
   red in all of those would make the page shout. Red is reserved for exactly
   what was asked for: sold badges, auction tags, and one CTA style.
   ====================================================================== */

body.ogr-styled{
  --ink:#0B2333;
  --ink-deep:#0B2333;
  --paper:#FFFFFF;
  --stone:#F6F3EE;
  --red:#B4383C;

  /* the old accent, now navy */
  --brass:#0B2333;
  --blue:#0B2333;

  --t-90:rgba(11,35,51,.92);
  --t-62:rgba(11,35,51,.68);
  --t-42:rgba(11,35,51,.50);
  --line:rgba(11,35,51,.15);
  --line-soft:rgba(11,35,51,.08);

  background:#FFFFFF !important;
  color:var(--ink) !important;
}

/* ---- NO DARK SECTIONS ----
   .dark and .deep were the navy bands. They become off-white with navy text,
   so the page reads as one continuous surface instead of being cut in two. */
body.ogr-styled .dark,
body.ogr-styled .deep,
body.ogr-styled .band.dark,
body.ogr-styled .band.deep{
  background:var(--stone) !important;
  color:var(--ink) !important;
}
body.ogr-styled .dark h1, body.ogr-styled .dark h2,
body.ogr-styled .dark h3, body.ogr-styled .dark h4,
body.ogr-styled .deep h1, body.ogr-styled .deep h2,
body.ogr-styled .deep h3, body.ogr-styled .deep h4,
body.ogr-styled .cta-band h2{color:var(--ink) !important}
body.ogr-styled .dark p, body.ogr-styled .deep p,
body.ogr-styled .dark .small, body.ogr-styled .deep .small,
body.ogr-styled .cta-band .lede{color:var(--t-62) !important}
body.ogr-styled .dark a, body.ogr-styled .deep a{color:var(--ink) !important}
body.ogr-styled .dark a:hover, body.ogr-styled .deep a:hover{color:var(--red) !important}
body.ogr-styled .eyebrow.on-dark,
body.ogr-styled .dark .eyebrow,
body.ogr-styled .deep .eyebrow{color:var(--t-42) !important}
body.ogr-styled .dark .stat{background:var(--stone) !important}
body.ogr-styled .dark .stat .k{color:var(--t-42) !important}
body.ogr-styled .dark .svc{border-color:var(--line) !important}
body.ogr-styled .dark .led{border-color:var(--line-soft) !important}
body.ogr-styled .dark .led .sb,
body.ogr-styled .dark .led .mt{color:var(--t-42) !important}
body.ogr-styled .dark .quote p{color:var(--ink) !important}
body.ogr-styled .dark .quote .who{color:var(--t-42) !important}
body.ogr-styled .dark .linkgrid{background:var(--line) !important}
body.ogr-styled .dark .linkgrid a{background:var(--stone) !important;color:var(--ink) !important}
body.ogr-styled .dark .linkgrid a:hover{background:var(--ink) !important;color:#fff !important}
body.ogr-styled .link-u.on-dark{color:var(--ink) !important;border-color:var(--line) !important}
body.ogr-styled .link-u.on-dark:hover{color:var(--red) !important;border-color:var(--red) !important}

/* alternate white / off-white so sections still separate without going dark */
body.ogr-styled .band-sm:nth-of-type(even){background:var(--stone)}

/* ---- VIDEO BANDS ----
   Heavy white scrim, navy text.

   Contrast, since this is the easy one to get wrong: at 92% white over the
   darkest possible frame the effective background is about #EBEBEB, and
   #0B2333 on #EBEBEB measures roughly 13:1 — comfortably past WCAG AAA, which
   wants 7:1 for body text. Over a bright frame it only gets better. The scrim
   is deliberately heavier than it looks like it needs to be, because a video
   frame is not a fixed colour and the text has to hold on every frame. */
body.ogr-styled .vband{background:var(--stone) !important;isolation:isolate}
body.ogr-styled .vband-bg::after{background:rgba(255,255,255,.92) !important}
body.ogr-styled .vband-still{opacity:.55}
body.ogr-styled .vband h1, body.ogr-styled .vband h2,
body.ogr-styled .vband h3, body.ogr-styled .vband h4{color:var(--ink) !important}
body.ogr-styled .vband p{color:var(--t-62) !important}
body.ogr-styled .vband .eyebrow,
body.ogr-styled .vband .eyebrow.on-dark{color:var(--t-42) !important}

/* ---- BUTTONS ---- */
body.ogr-styled .btn{
  background:var(--ink) !important;border:1px solid var(--ink) !important;
  color:#fff !important;border-radius:2px !important;
}
body.ogr-styled .btn:hover{background:transparent !important;color:var(--ink) !important}
body.ogr-styled .btn-ghost{background:transparent !important;color:var(--ink) !important;border-color:var(--line) !important}
body.ogr-styled .btn-ghost:hover{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}
body.ogr-styled .btn-light{background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important}
body.ogr-styled .btn-light:hover{background:transparent !important;color:var(--ink) !important}
body.ogr-styled .btn-outline-light{background:transparent !important;border-color:var(--ink) !important;color:var(--ink) !important}
body.ogr-styled .btn-outline-light:hover{background:var(--ink) !important;color:#fff !important}

/* the one red CTA style */
body.ogr-styled .btn-brass{
  background:var(--red) !important;border-color:var(--red) !important;color:#fff !important;
}
body.ogr-styled .btn-brass:hover{background:transparent !important;color:var(--red) !important;border-color:var(--red) !important}

/* ---- BADGES AND TAGS — the other place red belongs ---- */
body.ogr-styled .tag{background:#fff !important;color:var(--ink) !important;font-weight:600 !important}
body.ogr-styled .tag.sold{background:var(--red) !important;color:#fff !important}
body.ogr-styled .tag.auction{background:var(--red) !important;color:#fff !important}
body.ogr-styled .tag.uo{background:var(--ink) !important;color:#fff !important}
body.ogr-styled .soldban{background:var(--red) !important;color:#fff !important}

/* everything the old brass accent coloured is navy now, not red */
body.ogr-styled .led .pr,
body.ogr-styled .svc .n,
body.ogr-styled .award .yr,
body.ogr-styled .faq-q .pm,
body.ogr-styled .stars{color:var(--ink) !important}
body.ogr-styled .link-u:hover{color:var(--red) !important;border-color:var(--red) !important}
body.ogr-styled .ogr-content a:hover{color:var(--red) !important;border-color:var(--red) !important}

/* ---- HEADER: off-white, solid, never transparent ----
   The old header sat transparent over the hero and turned navy on scroll.
   With an off-white header that trick has nowhere to go, and Barry Plant's is
   solid at all times, so .float is neutralised rather than removed from the
   markup — less to break the night before launch. */
body.ogr-styled .hdr,
body.ogr-styled .hdr.float,
body.ogr-styled .hdr.float.stuck{
  background:var(--stone) !important;
  color:var(--ink) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  transition:transform .35s var(--ease) !important;
}
body.ogr-styled.ogr-heropage .ogr-hero,
body.ogr-styled.ogr-heropage .ogr-page > .vband:first-child{margin-top:0 !important}

body.ogr-styled .nav a{color:var(--ink) !important;font-weight:500 !important}
body.ogr-styled .nav a:hover,
body.ogr-styled .nav a.on{color:var(--red) !important}
body.ogr-styled .nav a.on::after{background:var(--red) !important}
body.ogr-styled .burger span{background:var(--ink) !important}

/* the logo is white artwork for dark backgrounds — until the navy version
   arrives it is inverted so it is at least legible on the off-white header */
body.ogr-styled .brand img,
body.ogr-styled .ftr-logo{filter:brightness(0) saturate(100%)}
body.ogr-styled.ogr-logo-ready .brand img,
body.ogr-styled.ogr-logo-ready .ftr-logo{filter:none}

/* ---- HEADER HIDES ON SCROLL DOWN, RETURNS ON SCROLL UP ---- */
body.ogr-styled .hdr{will-change:transform}
body.ogr-styled .hdr.ogr-hdr-hidden{transform:translateY(-100%)}
body.admin-bar.ogr-styled .hdr.ogr-hdr-hidden{transform:translateY(calc(-100% - 32px))}

/* ---- NAV DROPDOWNS ---- */
body.ogr-styled .nav{align-items:center}
body.ogr-styled .navitem{position:relative;display:flex;align-items:center}
body.ogr-styled .navitem > a{display:inline-flex;align-items:center;gap:6px}
body.ogr-styled .navitem > a .cx{
  width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.55;transition:transform .25s var(--ease);
}
body.ogr-styled .navitem:hover > a .cx,
body.ogr-styled .navitem:focus-within > a .cx{transform:rotate(180deg)}

body.ogr-styled .subnav{
  position:absolute;top:100%;left:-18px;min-width:246px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 22px 48px -30px rgba(11,35,51,.45);
  padding:10px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  z-index:120;
}
body.ogr-styled .navitem:hover > .subnav,
body.ogr-styled .navitem:focus-within > .subnav,
body.ogr-styled .navitem.open > .subnav{opacity:1;visibility:visible;transform:none}
body.ogr-styled .subnav a{
  display:block;padding:9px 22px;font-size:.8rem !important;
  letter-spacing:.04em !important;text-transform:none !important;
  color:var(--ink) !important;white-space:nowrap;font-weight:400 !important;
}
body.ogr-styled .subnav a:hover{background:var(--stone) !important;color:var(--red) !important}

/* ---- JOIN button, top right, distinct from the nav ---- */
body.ogr-styled .hdr-join{
  background:var(--ink) !important;color:#fff !important;
  border:1px solid var(--ink) !important;border-radius:2px !important;
  padding:11px 22px !important;font-size:.72rem !important;font-weight:600 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  white-space:nowrap;transition:.3s var(--ease);text-decoration:none !important;
}
body.ogr-styled .hdr-join:hover{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important}

/* ---- FOOTER: off-white ---- */
body.ogr-styled .ftr{background:var(--stone) !important;color:var(--ink) !important;border-top:1px solid var(--line)}
body.ogr-styled .ftr h5{color:var(--t-42) !important}
body.ogr-styled .ftr a,
body.ogr-styled .ftr ul a{color:var(--t-62) !important}
body.ogr-styled .ftr a:hover{color:var(--red) !important}
body.ogr-styled .ftr .link-u.on-dark{color:var(--ink) !important;border-color:var(--line) !important}
body.ogr-styled .ftr-bot{border-top-color:var(--line) !important}
body.ogr-styled .ftr-bot,
body.ogr-styled .ftr-bot a{color:var(--t-42) !important}
body.ogr-styled .mbar{background:var(--ink) !important;border-top-color:var(--ink) !important}
body.ogr-styled .mbar a+a{background:var(--red) !important}

/* ---- HERO: restrained, self-hosted video ---- */
body.ogr-styled .ogr-hero{min-height:min(78vh,720px) !important;background:var(--stone) !important}
body.ogr-styled .ogr-hero .hero-media::after{
  background:linear-gradient(180deg,rgba(11,35,51,.42) 0%,rgba(11,35,51,.30) 45%,rgba(11,35,51,.62) 100%) !important;
}
body.ogr-styled .ogr-hero h1{max-width:20ch;margin-bottom:18px}
body.ogr-styled .ogr-hero .lede{max-width:52ch}
body.ogr-styled .hero-in{padding-bottom:clamp(64px,8vw,104px)}

/* the search sits under the hero on white, not overlapping */
body.ogr-styled .search{
  margin-top:0 !important;border:1px solid var(--line) !important;
  box-shadow:none !important;background:#fff !important;
}
body.ogr-styled .ogr-searchhead{margin:clamp(40px,4.5vw,60px) 0 18px !important}

/* ---- AWARDS reduced to one line ---- */
body.ogr-styled .ogr-awardline{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.82rem !important;color:var(--t-62) !important;letter-spacing:.02em;
}
body.ogr-styled .ogr-awardline img{height:30px;width:auto;filter:none}
body.ogr-styled .ogr-awardline a{color:var(--ink) !important;border-bottom:1px solid var(--line)}
body.ogr-styled .ogr-awardline a:hover{color:var(--red) !important;border-color:var(--red)}

/* ---- PROPERTY GALLERY: every photo, full width ---- */
body.ogr-styled .ogr-gallery{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:24px;
}
body.ogr-styled .ogr-gallery .g{overflow:hidden;background:var(--stone);aspect-ratio:4/3}
body.ogr-styled .ogr-gallery .g:first-child{grid-column:1/-1;aspect-ratio:16/9}
body.ogr-styled .ogr-gallery img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){
  body.ogr-styled .ogr-gallery{grid-template-columns:1fr}
  body.ogr-styled .ogr-gallery .g:first-child{aspect-ratio:4/3}
}

/* ---- AGENT PROFILE ---- */
body.ogr-styled .agenthead{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,64px);align-items:start}
@media(max-width:820px){body.ogr-styled .agenthead{grid-template-columns:1fr}}
body.ogr-styled .agentphoto{aspect-ratio:3/4;overflow:hidden;background:var(--stone);position:relative;
  display:flex;align-items:center;justify-content:center}
body.ogr-styled .agentphoto img{width:100%;height:100%;object-fit:cover;object-position:top center}
body.ogr-styled .agentphoto .mono{font-family:var(--display);font-size:3.4rem;font-weight:300;color:var(--t-42)}
body.ogr-styled .agentmeta .role{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--t-42);margin:8px 0 20px}
body.ogr-styled .agentcts{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
body.ogr-styled .agentsocial{display:flex;gap:14px;margin-top:18px}
body.ogr-styled .agentsocial a{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62) !important}
body.ogr-styled .agentsocial a:hover{color:var(--red) !important}

@media(max-width:1180px){
  body.ogr-styled .subnav{
    position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    background:transparent;padding:0 0 8px 14px;min-width:0;display:none;
  }
  body.ogr-styled .navitem.open > .subnav{display:block}
  body.ogr-styled .subnav a{color:rgba(255,255,255,.72) !important;padding:7px 0;font-size:.95rem !important}
  body.ogr-styled .subnav a:hover{background:transparent !important;color:var(--red) !important}
  body.ogr-styled .navitem{display:block;width:100%}
  body.ogr-styled .hdr-join{display:none !important}
}

/* =========================================================================
 * MOBILE DRAWER — light, to match the rest of the redesign
 *
 * The concept's drawer was navy with white text, which was right when the
 * whole site was navy. It is the last dark surface left, so it goes light
 * too. This block sits after the one above so it wins on source order at
 * the same specificity.
 * ====================================================================== */
@media(max-width:1180px){
  body.ogr-styled .nav{
    background:#FFFFFF !important;
    justify-content:flex-start !important;
    padding:96px 32px 48px !important;
    border-left:1px solid var(--line);
    box-shadow:-24px 0 60px -40px rgba(11,35,51,.5);
  }
  body.ogr-styled .nav a{color:var(--ink) !important}
  body.ogr-styled .nav a.on{color:var(--red) !important}
  body.ogr-styled .navitem{border-bottom:1px solid var(--line-soft)}
  body.ogr-styled .navitem:last-child{border-bottom:0}
  body.ogr-styled .navitem > a{width:100%;justify-content:space-between}
  body.ogr-styled .navitem > a .cx{
    border-top-width:5px;border-left-width:4.5px;border-right-width:4.5px;opacity:.4;
  }
  /* on a touch screen there is no hover, so only the .open class turns it */
  body.ogr-styled .navitem:hover > a .cx,
  body.ogr-styled .navitem:focus-within > a .cx{transform:none}
  body.ogr-styled .navitem.open > a .cx{transform:rotate(180deg)}
  body.ogr-styled .subnav a{color:var(--t-62) !important;padding:8px 0 !important;font-size:.95rem !important}
  body.ogr-styled .subnav a:hover{color:var(--red) !important}

  /* JOIN stays reachable on mobile rather than disappearing with the
     desktop nav — /opportunities/ keeps its internal link either way */
  body.ogr-styled .hdr-join{
    display:inline-flex !important;align-items:center;
    padding:9px 15px !important;font-size:.66rem !important;letter-spacing:.12em !important;
    margin-left:auto;
  }
  body.ogr-styled .burger{margin-left:6px}
}
@media(max-width:420px){
  body.ogr-styled .hdr-join{display:none !important}
}

/* the drawer sits under a scrim so the page behind it is clearly inactive */
body.ogr-styled .ogr-navscrim{
  position:fixed;inset:0;background:rgba(11,35,51,.34);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  z-index:105;
}
body.ogr-styled.ogr-nav-open .ogr-navscrim{opacity:1;visibility:visible}
@media(min-width:1181px){
  body.ogr-styled .ogr-navscrim{display:none}
}
body.ogr-styled.ogr-nav-open{overflow:hidden}

/* ---- closing CTA with the 9:16 slot removed: one centred column ---- */
body.ogr-styled .ogr-cta-solo{max-width:740px;margin:0 auto;text-align:center}
body.ogr-styled .ogr-cta-solo h2{max-width:18ch;margin:0 auto 20px}
body.ogr-styled .ogr-cta-solo .lede{margin:0 auto 36px}
body.ogr-styled .ogr-cta-solo .cta-actions{justify-content:center}

/* ---- property gallery: edge to edge ---- */
body.ogr-styled .ogr-gallery-full{
  width:100%;margin-left:0;margin-right:0;
  padding:0 clamp(8px,1.4vw,20px);
}
body.ogr-styled .ogr-gallery .g .ogr-place{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
}

/* ---- card badges ----
   Red is the accent and it is spent on the two states that change what a
   buyer can do: Sold and Under offer. Auction goes navy so the three are
   still told apart at a glance; the labels are spelled out either way. */
body.ogr-styled .tag.sold{background:var(--red) !important;color:#fff !important}
body.ogr-styled .tag.uo{background:var(--red) !important;color:#fff !important}
body.ogr-styled .tag.auction{background:var(--ink) !important;color:#fff !important}

/* ---- agent profile: the facts list and the page's own content ---- */
body.ogr-styled .agentfacts{
  display:grid;gap:0;margin:24px 0 0;border-top:1px solid var(--line);
}
body.ogr-styled .agentfacts > div{
  display:grid;grid-template-columns:120px 1fr;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line-soft);
}
body.ogr-styled .agentfacts dt{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--t-42);margin:0;
}
body.ogr-styled .agentfacts dd{margin:0;font-size:.98rem;color:var(--ink)}
body.ogr-styled .agentfacts dd a{color:var(--ink) !important;border-bottom:1px solid var(--line)}
body.ogr-styled .agentfacts dd a:hover{color:var(--red) !important;border-color:var(--red)}
@media(max-width:520px){
  body.ogr-styled .agentfacts > div{grid-template-columns:1fr;gap:4px}
}
body.ogr-styled .ogr-agentbody{margin-top:8px}
body.ogr-styled .ogr-agentbody p{color:var(--t-62)}

/* team cards become links to the profile pages that already exist */
body.ogr-styled .person-link{display:block;color:inherit !important;text-decoration:none !important}
body.ogr-styled .person-link h4{transition:color .25s var(--ease)}
body.ogr-styled .person-link:hover h4{color:var(--red) !important}
body.ogr-styled .person-link .person-img img{transition:transform .6s var(--ease)}
body.ogr-styled .person-link:hover .person-img img{transform:scale(1.03)}

/* ---- .btn-outline ----
   Used where a dark band became light and .btn-outline-light no longer
   describes what it is. Identical in appearance to .btn-outline-light under
   this redesign, so the two are interchangeable and nothing looks different
   depending on which a template happens to use. */
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
body.ogr-styled .btn-outline{
  background:transparent !important;border-color:var(--ink) !important;color:var(--ink) !important;
}
body.ogr-styled .btn-outline:hover{background:var(--ink) !important;color:#fff !important}

/* =========================================================================
 * FINAL_3 — THE WALKTHROUGH FIXES
 * Appended last so it wins on source order. Every selector is scoped to
 * body.ogr-styled, so nothing here can reach the WordPress admin.
 * ====================================================================== */

/* ---- A1. the hero line was navy on a dark photograph ----
   body.ogr-styled p and .lede both set navy with !important, and they were
   winning inside the hero. The hero is the one place on the site with light
   text on a dark image, so it states its own colours rather than inheriting
   the page's. */
body.ogr-styled .ogr-hero h1{color:#fff !important}
body.ogr-styled .ogr-hero .lede,
body.ogr-styled .ogr-hero p{color:rgba(255,255,255,.88) !important}
body.ogr-styled .ogr-hero .eyebrow{color:rgba(255,255,255,.62) !important}

/* ---- A2. the search: small, and on the hero ---- */
body.ogr-styled .ogr-hero{
  min-height:min(84vh,760px) !important;
  display:flex;align-items:flex-end;
}
body.ogr-styled .ogr-hero .hero-in{width:100%;padding-bottom:clamp(34px,5vw,64px)}
body.ogr-styled .ogr-hero h1{
  font-size:clamp(2.1rem,4.4vw,3.6rem) !important;max-width:19ch;margin-bottom:14px;
}
body.ogr-styled .ogr-hero .lede{max-width:46ch;margin-bottom:clamp(22px,3vw,34px)}

body.ogr-styled .search-hero{
  background:rgba(255,255,255,.94) !important;
  border:0 !important;border-radius:3px !important;
  box-shadow:0 26px 60px -34px rgba(11,35,51,.55) !important;
  backdrop-filter:blur(6px);
  max-width:1000px;margin:0 !important;padding:0 !important;
}
body.ogr-styled .search-hero .search-in{
  display:grid !important;
  grid-template-columns:1.05fr 1.5fr 1.2fr 1fr auto !important;
  align-items:stretch !important;gap:0 !important;
}
body.ogr-styled .search-hero .search-f{
  padding:9px 14px !important;border:0 !important;
  border-right:1px solid var(--line-soft) !important;
  display:flex;flex-direction:column;justify-content:center;min-width:0;
}
body.ogr-styled .search-hero .search-f label{
  font-size:9.5px !important;letter-spacing:.15em !important;text-transform:uppercase !important;
  color:var(--t-42) !important;margin:0 0 1px !important;
}
body.ogr-styled .search-hero .search-f select,
body.ogr-styled .search-hero .search-f input{
  border:0 !important;background:transparent !important;padding:0 !important;
  font-size:.9rem !important;height:26px !important;color:var(--ink) !important;
  width:100%;min-width:0;
}
body.ogr-styled .search-hero .search-f input::placeholder{color:var(--t-42) !important}
body.ogr-styled .search-hero .ogr-search-btn{
  background:var(--red) !important;color:#fff !important;border:0 !important;
  padding:0 30px !important;font-size:.72rem !important;font-weight:600 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;cursor:pointer;
  transition:.3s var(--ease);
}
body.ogr-styled .search-hero .ogr-search-btn:hover{background:var(--ink) !important}
body.ogr-styled .search-hero .ogr-morefilters{
  background:transparent !important;border:0 !important;
  border-top:1px solid var(--line-soft) !important;
  width:100%;text-align:left;padding:8px 14px !important;
  font-size:9.5px !important;letter-spacing:.15em !important;text-transform:uppercase !important;
  color:var(--t-42) !important;cursor:pointer;display:flex;align-items:center;gap:7px;
}
body.ogr-styled .search-hero .ogr-morefilters:hover{color:var(--red) !important}
/* :not([hidden]) matters. display:grid !important beats the browser's own
   [hidden]{display:none}, which left the extra filters permanently open. */
body.ogr-styled .search-hero .ogr-advanced:not([hidden]){
  display:grid !important;grid-template-columns:repeat(4,1fr) !important;
  border-top:1px solid var(--line-soft) !important;background:rgba(11,35,51,.03) !important;
}
body.ogr-styled .search-hero .ogr-advanced[hidden]{display:none !important}
@media(max-width:900px){
  body.ogr-styled .search-hero .search-in{grid-template-columns:1fr 1fr !important}
  body.ogr-styled .search-hero .ogr-search-btn{grid-column:1/-1;padding:13px !important}
  body.ogr-styled .search-hero .ogr-advanced:not([hidden]){grid-template-columns:1fr 1fr !important}
  body.ogr-styled .ogr-hero{min-height:min(90vh,720px) !important}
}
@media(max-width:520px){
  body.ogr-styled .search-hero .search-in{grid-template-columns:1fr !important}
  body.ogr-styled .search-hero .search-f{border-right:0 !important;border-bottom:1px solid var(--line-soft) !important}
}

/* ---- A3. the track record band is white; its boxes are the off-white ---- */
body.ogr-styled .ogr-band-white{background:#FFFFFF !important}
body.ogr-styled .ogr-band-white .stats{background:transparent !important;border:0 !important;gap:10px !important}
body.ogr-styled .ogr-band-white .stat{
  background:var(--stone) !important;border:1px solid var(--line-soft) !important;
  padding:clamp(24px,3vw,38px) clamp(18px,2.4vw,30px) !important;
}
body.ogr-styled .ogr-band-white .stat .v{color:var(--ink) !important}
body.ogr-styled .ogr-band-white .stat .k{color:var(--t-62) !important}
body.ogr-styled .ogr-searchhead{margin:0 0 clamp(26px,3vw,40px) !important;text-align:center}

/* ---- A4. bigger photograph on the homepage cards ---- */
body.ogr-styled #listings .card-img,
body.ogr-styled #sold .card-img{aspect-ratio:5/4 !important}
body.ogr-styled #listings .grid,
body.ogr-styled #sold .grid{gap:clamp(20px,2.2vw,32px) !important}

/* ---- A5. the video wash lifts so the footage reads through it ---- */
body.ogr-styled .vband-bg::after{background:rgba(246,243,238,.80) !important}
body.ogr-styled .vband-still{opacity:.9}

/* ---- A6. the About OGR photograph, cropped in on the group ---- */
body.ogr-styled .ogr-aboutphoto{aspect-ratio:4/3;overflow:hidden}
body.ogr-styled .ogr-aboutphoto img{
  width:100%;height:100%;object-fit:cover;
  object-position:52% 18%;transform:scale(1.8);transform-origin:52% 18%;
}

/* ---- A7. the FAQ was pink ----
   .faq-q is a <button>, and the live site styles every button with the brand
   pink rgb(237,18,95). The concept's own rule had no !important, so the old
   stylesheet won. It does now. */
body.ogr-styled .faq-q,
body.ogr-styled .faq-q:hover,
body.ogr-styled .faq-q:focus{
  background:transparent !important;background-image:none !important;
  color:var(--ink) !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:24px 0 !important;
}
body.ogr-styled .faq-i{background:transparent !important}
body.ogr-styled .faq-q .pm{color:var(--red) !important}
body.ogr-styled .faq-a p{color:var(--t-62) !important}

/* ---- A8. the footer, tightened ---- */
body.ogr-styled .ftr{padding:clamp(44px,4.4vw,58px) 0 0 !important}
body.ogr-styled .ftr-top{
  gap:clamp(24px,3vw,44px) !important;
  padding-bottom:clamp(26px,3vw,36px) !important;
}
body.ogr-styled .ftr h5{margin:0 0 10px !important;font-size:10px !important;letter-spacing:.16em !important}
body.ogr-styled .ftr ul li{margin-bottom:5px !important}
body.ogr-styled .ftr ul a{font-size:.83rem !important;line-height:1.5 !important}
body.ogr-styled .ftr-logo{width:170px !important;height:auto !important;margin-bottom:12px !important}
body.ogr-styled .ftr-bot{padding:14px 0 16px !important;font-size:.72rem !important}

/* ---- A9. "Call 03 9401 4004" was white on white ----
   body.ogr-styled .deep .btn sets colour:#fff with !important, and beats a
   single-class .btn-outline rule. Same weight, more specific, so it wins. */
body.ogr-styled .deep .btn-outline,
body.ogr-styled .dark .btn-outline,
body.ogr-styled .cta-band .btn-outline,
body.ogr-styled .deep .btn-outline-light,
body.ogr-styled .dark .btn-outline-light,
body.ogr-styled .cta-band .btn-outline-light{
  color:var(--ink) !important;border-color:var(--ink) !important;background:transparent !important;
}
body.ogr-styled .deep .btn-outline:hover,
body.ogr-styled .dark .btn-outline:hover,
body.ogr-styled .cta-band .btn-outline:hover,
body.ogr-styled .deep .btn-outline-light:hover,
body.ogr-styled .dark .btn-outline-light:hover,
body.ogr-styled .cta-band .btn-outline-light:hover{
  color:#fff !important;background:var(--ink) !important;border-color:var(--ink) !important;
}
body.ogr-styled .deep .btn-brass,
body.ogr-styled .dark .btn-brass,
body.ogr-styled .cta-band .btn-brass{color:#fff !important;background:var(--red) !important;border-color:var(--red) !important}
body.ogr-styled .deep a,
body.ogr-styled .dark a{color:var(--ink) !important}
body.ogr-styled .deep a:hover,
body.ogr-styled .dark a:hover{color:var(--red) !important}
body.ogr-styled .deep .eyebrow,
body.ogr-styled .dark .eyebrow,
body.ogr-styled .eyebrow.on-dark{color:var(--t-42) !important}

/* ---- B2/B3. the property show reel ---- */
body.ogr-styled .ogr-reel{position:relative;background:var(--stone);margin-top:20px}
body.ogr-styled .ogr-reel-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
body.ogr-styled .ogr-reel-track::-webkit-scrollbar{display:none}
body.ogr-styled .ogr-reel-track:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
body.ogr-styled .ogr-reel-s{
  flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/9;background:var(--stone);
}
body.ogr-styled .ogr-reel-s img{width:100%;height:100%;object-fit:cover;display:block}
body.ogr-styled .ogr-reel.is-empty{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
}
body.ogr-styled .ogr-reel-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9) !important;color:var(--ink) !important;
  font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:.25s var(--ease);z-index:3;
}
body.ogr-styled .ogr-reel-nav:hover{background:#fff !important;color:var(--red) !important}
body.ogr-styled .ogr-reel-nav.prev{left:14px}
body.ogr-styled .ogr-reel-nav.next{right:14px}
body.ogr-styled .ogr-reel-count{
  position:absolute;right:14px;bottom:14px;z-index:3;
  background:rgba(11,35,51,.72);color:#fff;font-size:.72rem;letter-spacing:.08em;
  padding:5px 11px;border-radius:2px;
}
body.ogr-styled .ogr-reel-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;justify-content:center;gap:7px;flex-wrap:wrap;padding:0 90px;
}
body.ogr-styled .ogr-reel-dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55) !important;transition:.25s var(--ease);
}
body.ogr-styled .ogr-reel-dots button.on{background:#fff !important;transform:scale(1.5)}
@media(max-width:700px){
  body.ogr-styled .ogr-reel-s{aspect-ratio:4/3}
  body.ogr-styled .ogr-reel-nav{width:38px;height:38px}
  body.ogr-styled .ogr-reel-dots{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.ogr-styled .ogr-reel-track{scroll-behavior:auto}
}

/* ---- C. pages that render their own content ----
   Two faults, both visible on ten pages:

   1. The column was 74ch wide with margin 0, so it sat hard against the left
      edge of a 1240px page. It is centred now.
   2. Elementor containers keep the old site's navy (rgb(25,40,65)) as their
      background, and this stylesheet sets text navy. Navy on navy. The
      backgrounds are found at runtime and turned off-white — see the
      normaliser in ogr-footer.php — and this is what it applies. */
body.ogr-styled .ogr-content{margin-left:auto !important;margin-right:auto !important}
body.ogr-styled .ogr-content.is-wide{max-width:none !important}

body.ogr-styled .ogr-was-dark{
  background-color:var(--stone) !important;
  background-image:none !important;
  color:var(--ink) !important;
}
body.ogr-styled .ogr-was-dark h1,
body.ogr-styled .ogr-was-dark h2,
body.ogr-styled .ogr-was-dark h3,
body.ogr-styled .ogr-was-dark h4,
body.ogr-styled .ogr-was-dark h5,
body.ogr-styled .ogr-was-dark h6,
body.ogr-styled .ogr-was-dark .elementor-heading-title{color:var(--ink) !important}
body.ogr-styled .ogr-was-dark p,
body.ogr-styled .ogr-was-dark li,
body.ogr-styled .ogr-was-dark .elementor-widget-text-editor{color:var(--t-62) !important}
body.ogr-styled .ogr-was-dark a:not(.elementor-button){color:var(--ink) !important}

/* pink, wherever it survived, becomes the one red */
body.ogr-styled .ogr-was-pink{color:var(--red) !important}
body.ogr-styled .ogr-was-pink-bg{background-color:var(--red) !important;color:#fff !important}

/* Elementor's own buttons inside rendered content, brought into the system */
body.ogr-styled .ogr-content .elementor-button{
  background-color:var(--ink) !important;color:#fff !important;
  border-radius:2px !important;border:1px solid var(--ink) !important;
  letter-spacing:.09em !important;text-transform:uppercase !important;
}
body.ogr-styled .ogr-content .elementor-button:hover{
  background-color:transparent !important;color:var(--ink) !important;
}

/* ---- F1. YouTube embeds removed outside the homepage; close the gap ---- */
body.ogr-styled .ogr-yt-removed{display:none !important}

/* ---- the page's own content is never allowed to sit invisible ----
   It used to carry the reveal class. A 2,000px block fading in as one unit
   leaves the whole page part-transparent if the transition is interrupted —
   which is what a background tab does to it. Belt and braces: even if the
   class is still on the element, the content is opaque. */
body.ogr-styled .ogr-content,
body.ogr-styled .ogr-content.rv{opacity:1 !important;transform:none !important}

/* the pink arrives as borders, dividers, icon outlines and SVG paint too */
body.ogr-styled .ogr-was-pink-border{border-color:var(--red) !important;outline-color:var(--red) !important}
body.ogr-styled .ogr-was-pink-fill{fill:var(--red) !important}
body.ogr-styled .ogr-was-pink-stroke{stroke:var(--red) !important}
body.ogr-styled .ogr-content .elementor-divider-separator{border-top-color:var(--red) !important}

/* ---- video bands: the wash lifted, so the text weight goes up to match ----
   At 80% wash over a fully black frame the background sits at #C5C2BE. Body
   copy at 68% navy measures 4.28:1 there — under the 4.5:1 AA needs for small
   text. At 92% it clears it with room to spare, and on any real frame (which
   is lighter than black) it is higher still. */
body.ogr-styled .vband p,
body.ogr-styled .vband li{color:var(--t-90) !important}

/* =========================================================================
 * PROPERTY GALLERY — the Barry Plant layout, and the story viewer
 * ====================================================================== */

body.ogr-styled .ogr-pgal{
  display:grid;grid-template-columns:1.62fr 1fr;gap:10px;margin-top:22px;
}
body.ogr-styled .ogr-pgal-main,
body.ogr-styled .ogr-pgal-t{
  position:relative;padding:0;border:0;cursor:pointer;overflow:hidden;
  background:var(--stone);display:block;width:100%;
}
body.ogr-styled .ogr-pgal-main{aspect-ratio:4/3;border-radius:0 0 90px 0}
body.ogr-styled .ogr-pgal-side{display:grid;grid-template-rows:1fr 1fr;gap:10px}
body.ogr-styled .ogr-pgal-t{height:100%}
body.ogr-styled .ogr-pgal img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
body.ogr-styled .ogr-pgal-t.is-plan img{object-fit:contain;background:#fff;padding:8px}
body.ogr-styled .ogr-pgal-main:hover img,
body.ogr-styled .ogr-pgal-t:hover img{transform:scale(1.03)}

/* the photo count, bottom left of the big one */
body.ogr-styled .ogr-pgal-n{
  position:absolute;left:16px;bottom:16px;z-index:2;
  background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;
  letter-spacing:.06em;padding:6px 12px 6px 30px;border-radius:2px;
}
body.ogr-styled .ogr-pgal-n::before{
  content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:13px;height:10px;border:1.5px solid #fff;border-radius:2px;
}
body.ogr-styled .ogr-pgal-tag{position:absolute;left:16px;top:16px;z-index:2}

/* "+ 24" */
body.ogr-styled .ogr-pgal-more{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(11,35,51,.42);color:#fff;
  font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:300;
  letter-spacing:-.01em;transition:background .35s var(--ease);
}
body.ogr-styled .ogr-pgal-t:hover .ogr-pgal-more{background:rgba(11,35,51,.58)}

body.ogr-styled .ogr-pgal-main.is-empty{
  display:flex;align-items:center;justify-content:center;cursor:default;
}
@media(max-width:820px){
  body.ogr-styled .ogr-pgal{grid-template-columns:1fr;gap:8px}
  body.ogr-styled .ogr-pgal-main{border-radius:0}
  body.ogr-styled .ogr-pgal-side{grid-template-rows:none;grid-template-columns:1fr 1fr;height:130px}
}

/* ---- the story viewer ---- */
body.ogr-styled.ogr-story-open{overflow:hidden}
body.ogr-styled .ogr-story{
  position:fixed;inset:0;z-index:2000;background:#fff;
  display:grid;grid-template-columns:310px 1fr;
}
body.ogr-styled .ogr-story[hidden]{display:none !important}

body.ogr-styled .ogr-story-side{
  padding:26px 28px;display:flex;flex-direction:column;gap:0;
  border-right:1px solid var(--line);overflow-y:auto;
}
body.ogr-styled .ogr-story-back{
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font-size:.85rem;color:var(--ink) !important;text-decoration:underline;
  text-underline-offset:3px;margin-bottom:26px;
}
body.ogr-styled .ogr-story-back:hover{color:var(--red) !important}
body.ogr-styled .ogr-story-count{
  position:absolute;top:26px;right:28px;font-size:.85rem;color:var(--t-62);
}
body.ogr-styled .ogr-story-addr{
  font-family:var(--display) !important;font-weight:300 !important;
  font-size:1.32rem !important;line-height:1.25 !important;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink) !important;margin:0 0 14px !important;
}
body.ogr-styled .ogr-story-addr span{display:block;color:var(--t-62)}
body.ogr-styled .ogr-story-addr strong{font-weight:500;color:var(--ink)}
body.ogr-styled .ogr-story-specs{
  display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--t-62);
  padding-bottom:22px;border-bottom:1px solid var(--line-soft);
}
body.ogr-styled .ogr-story-acts{display:flex;flex-direction:column;gap:10px;margin-top:26px}
body.ogr-styled .ogr-story-btn{
  display:block;width:100%;text-align:center;border:0;cursor:pointer;
  padding:12px 18px;border-radius:100px;color:#fff !important;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none !important;transition:.3s var(--ease);
}
body.ogr-styled .ogr-story-btn.red{background:var(--red) !important}
body.ogr-styled .ogr-story-btn.navy{background:var(--ink) !important}
body.ogr-styled .ogr-story-btn:hover{opacity:.86}
body.ogr-styled .ogr-story-pause{
  margin-top:auto;align-self:flex-start;background:none;border:0;cursor:pointer;padding:8px 0;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-42) !important;
}
body.ogr-styled .ogr-story-pause:hover{color:var(--red) !important}

body.ogr-styled .ogr-story-stage{position:relative;overflow:hidden;background:#0B2333}
body.ogr-styled .ogr-story-track{
  display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
body.ogr-styled .ogr-story-track::-webkit-scrollbar{display:none}
body.ogr-styled .ogr-story-s{
  flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;background:#0B2333;
}
body.ogr-styled .ogr-story-s img{width:100%;height:100%;object-fit:cover;display:block}
body.ogr-styled .ogr-story-s.is-plan img{object-fit:contain;background:#fff}

/* the progress bars along the top — this is the "story" part */
body.ogr-styled .ogr-story-bars{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;gap:3px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(11,35,51,.45),transparent);
}
body.ogr-styled .ogr-story-bars span{
  flex:1 1 0;height:3px;background:rgba(255,255,255,.32);cursor:pointer;
  border-radius:2px;overflow:hidden;min-width:2px;
}
body.ogr-styled .ogr-story-bars i{display:block;height:100%;width:0;background:#fff}
body.ogr-styled .ogr-story-bars span.done i{width:100%}
body.ogr-styled .ogr-story-bars span.on i{width:100%;transition:width 4.2s linear}
@media(prefers-reduced-motion:reduce){
  body.ogr-styled .ogr-story-bars span.on i{transition:none}
}

body.ogr-styled .ogr-story-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9) !important;color:var(--ink) !important;
  font-size:1.6rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:.25s var(--ease);
}
body.ogr-styled .ogr-story-nav:hover{background:#fff !important;color:var(--red) !important}
body.ogr-styled .ogr-story-nav.prev{left:16px}
body.ogr-styled .ogr-story-nav.next{right:16px}

@media(max-width:900px){
  body.ogr-styled .ogr-story{grid-template-columns:1fr;grid-template-rows:1fr auto}
  body.ogr-styled .ogr-story-side{
    order:2;border-right:0;border-top:1px solid var(--line);
    padding:16px 18px;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap;
  }
  body.ogr-styled .ogr-story-back{margin:0}
  body.ogr-styled .ogr-story-count{position:static;margin-left:auto}
  body.ogr-styled .ogr-story-addr{font-size:1rem !important;margin:0 !important;width:100%}
  body.ogr-styled .ogr-story-specs{border:0;padding:0;width:100%}
  body.ogr-styled .ogr-story-acts{flex-direction:row;margin:0;width:100%}
  body.ogr-styled .ogr-story-btn{padding:10px 14px;font-size:.7rem}
  body.ogr-styled .ogr-story-pause{margin:0}
  body.ogr-styled .ogr-story-nav{width:38px;height:38px}
}

/* =========================================================================
 * FOOTER — trimmed again, and the socials
 * ====================================================================== */
body.ogr-styled .ftr{padding:clamp(30px,3vw,40px) 0 0 !important}
body.ogr-styled .ftr-top{
  gap:clamp(18px,2.2vw,34px) !important;
  padding-bottom:clamp(18px,2vw,24px) !important;
  align-items:start !important;
}
body.ogr-styled .ftr h5{
  margin:0 0 7px !important;font-size:9.5px !important;letter-spacing:.16em !important;
}
body.ogr-styled .ftr ul{margin:0 !important}
body.ogr-styled .ftr ul li{margin-bottom:2px !important}
body.ogr-styled .ftr ul a{font-size:.79rem !important;line-height:1.45 !important}
body.ogr-styled .ftr-logo{width:140px !important;height:auto !important;margin-bottom:8px !important}
body.ogr-styled .ftr-addr{font-size:.79rem !important;max-width:26ch;margin:0 0 8px !important;line-height:1.45 !important}
body.ogr-styled .ftr .link-u.on-dark{font-size:.78rem !important;padding-bottom:3px !important}
body.ogr-styled .ftr-bot{padding:10px 0 12px !important;font-size:.7rem !important}

body.ogr-styled .ogr-social{display:flex;gap:8px;margin-top:14px}
body.ogr-styled .ogr-social a{
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink) !important;color:#fff !important;
  transition:.28s var(--ease);
}
body.ogr-styled .ogr-social a:hover{background:var(--red) !important;transform:translateY(-2px)}
body.ogr-styled .ogr-social svg{width:19px;height:19px;fill:#fff;display:block}

/* paused: the current bar sits full rather than crawling on with no photo
   changing behind it, which reads as broken */
body.ogr-styled .ogr-story.is-held .ogr-story-bars span.on i{width:100%;transition:none}

/* =========================================================================
 * REVISION 3
 * ====================================================================== */

/* ---- FOOTER: halved again ----
   Same links, same words, same order. Only the space around them changes:
   the four columns pull together, the type steps down, the logo halves and
   the bottom bar loses its padding. */
body.ogr-styled .ftr{padding:22px 0 0 !important}
body.ogr-styled .ftr-top{
  gap:10px clamp(14px,1.8vw,26px) !important;
  padding-bottom:12px !important;
}
body.ogr-styled .ftr h5{margin:0 0 4px !important;font-size:9px !important;letter-spacing:.15em !important}
body.ogr-styled .ftr ul li{margin-bottom:0 !important}
body.ogr-styled .ftr ul a{font-size:.735rem !important;line-height:1.35 !important}
body.ogr-styled .ftr-logo{width:104px !important;margin-bottom:5px !important}
body.ogr-styled .ftr-addr{font-size:.735rem !important;margin:0 0 5px !important;line-height:1.35 !important}
body.ogr-styled .ftr .link-u.on-dark{font-size:.735rem !important;padding-bottom:2px !important}
body.ogr-styled .ftr-bot{padding:7px 0 8px !important;font-size:.66rem !important;gap:8px}
body.ogr-styled .ogr-social{margin-top:9px;gap:6px}
body.ogr-styled .ogr-social a{width:26px;height:26px}
body.ogr-styled .ogr-social svg{width:16px;height:16px}

/* ---- HEADER SITS INSIDE THE HERO ----
   On a page that opens with a hero the header has no background of its own —
   it floats on the photograph, the way Barry Plant's does. The logo goes back
   to its original white artwork there (no inversion), and the nav goes white.

   The moment you scroll past the hero it becomes the off-white bar again,
   because white type on white page content is unreadable. That is what .stuck
   is for and it is already wired up. */
body.ogr-styled.ogr-heropage .hdr:not(.stuck),
body.ogr-styled .hdr.float:not(.stuck){
  background:transparent !important;
  border-bottom-color:transparent !important;
}
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .nav > .navitem > a,
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .burger span{color:#fff !important}
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .burger span{background:#fff !important}
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .nav > .navitem > a:hover,
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .nav > .navitem > a.on{color:#fff !important;opacity:.72}
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .nav a.on::after{background:#fff !important}
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .hdr-join{
  background:transparent !important;border-color:rgba(255,255,255,.6) !important;color:#fff !important;
}
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .hdr-join:hover{
  background:#fff !important;border-color:#fff !important;color:var(--ink) !important;
}
/* the white logo is the original artwork — stop inverting it over the photo */
body.ogr-styled.ogr-heropage .hdr:not(.stuck) .brand img{filter:none !important}

/* the hero starts under the header again, so the photograph runs to the top */
body.ogr-styled.ogr-heropage .ogr-hero{margin-top:-76px !important;padding-top:76px}
body.admin-bar.ogr-styled.ogr-heropage .ogr-hero{margin-top:-76px !important}
/* dropdown panels stay white with navy text wherever the header is */
body.ogr-styled .hdr .subnav a{color:var(--ink) !important}

/* ---- SEARCH: about a quarter smaller ---- */
body.ogr-styled .search-hero{max-width:820px}
body.ogr-styled .search-hero .search-f{padding:6px 11px !important}
body.ogr-styled .search-hero .search-f label{font-size:8.5px !important;letter-spacing:.13em !important}
body.ogr-styled .search-hero .search-f select,
body.ogr-styled .search-hero .search-f input{font-size:.79rem !important;height:21px !important}
body.ogr-styled .search-hero .ogr-search-btn{padding:0 23px !important;font-size:.65rem !important}
body.ogr-styled .search-hero .ogr-morefilters{padding:6px 11px !important;font-size:8.5px !important}
body.ogr-styled .ogr-hero h1{font-size:clamp(1.85rem,3.7vw,3rem) !important;max-width:21ch}
body.ogr-styled .ogr-hero .lede{font-size:clamp(.92rem,1.15vw,1.02rem) !important;max-width:50ch}
@media(max-width:900px){
  body.ogr-styled .search-hero{max-width:none}
}

/* ---- the agent box: two matching outlined buttons ---- */
body.ogr-styled .agentbox .btn-ghost{
  background:#fff !important;border-color:var(--line) !important;color:var(--ink) !important;
}
body.ogr-styled .agentbox .btn-ghost:hover{
  background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important;
}

/* =========================================================================
 * REVISION 4 — the white line, the nav flash, and a much tighter build
 * ====================================================================== */

/* ---- THE WHITE LINE ACROSS THE TOP OF THE HERO ----
   Not a light, not a border: a one pixel gap. The header measures 77px (76
   plus a 0.8px bottom border that rounds up) and the hero was pulled up by
   exactly 76, so a single pixel of the white page background showed above the
   photograph.

   Two fixes, because one alone is fragile: the border comes off the header
   over a hero (it is transparent there anyway, so it was only ever adding
   height), and the hero is pulled up two pixels further than the header is
   tall. Overlapping by a pixel is invisible — the header is transparent and
   the photograph runs behind it — where falling a pixel short is the line. */
body.ogr-styled.ogr-heropage .hdr:not(.stuck){border-bottom:0 !important}
body.ogr-styled.ogr-heropage .ogr-hero{
  margin-top:-78px !important;padding-top:78px !important;
}

/* ---- SECTIONS: tighter everywhere ----
   --band drove the padding on every section on the site: 140px top and bottom
   at desktop width. That is what made the pages feel long rather than
   composed. Down by a third. */
body.ogr-styled{--band:clamp(48px,6.4vw,92px)}
body.ogr-styled h2{font-size:clamp(1.42rem,2.3vw,1.92rem) !important;line-height:1.2 !important}
body.ogr-styled h3{font-size:clamp(1.08rem,1.5vw,1.24rem) !important}
body.ogr-styled .eyebrow{margin-bottom:10px !important}

/* ---- THE CLOSING CTA ----
   596px tall for one heading, one line and two buttons. Now about 240. */
body.ogr-styled .cta-band{padding:clamp(34px,4.2vw,50px) 0 !important}
body.ogr-styled .cta-band .eyebrow{margin-bottom:8px !important}
body.ogr-styled .cta-band h2{
  /* 28ch, not 20 — the wider measure keeps it on one line, and one line is
     shorter than a smaller font wrapped onto two */
  font-size:clamp(1.32rem,2.1vw,1.7rem) !important;margin:0 auto 10px !important;max-width:28ch;
}
body.ogr-styled .cta-band .lede{
  font-size:.9rem !important;margin:0 auto 18px !important;max-width:62ch;line-height:1.55 !important;
}
body.ogr-styled .cta-band .btn{padding:11px 22px !important;font-size:.72rem !important}
body.ogr-styled .ogr-cta-solo .cta-actions{gap:9px}

/* ---- THE FOOTER ----
   The link rows were the whole problem. Each <li> was inheriting a 16px font
   and a 28px line-height from its <ul>, plus a flex gap — so an 11.76px link
   sat in a 37px box. Styling the <a> was never going to fix that; the <li>
   and the <ul> had to be told as well. Nine rows go from ~340px to ~150px. */
body.ogr-styled .ftr{padding:18px 0 0 !important}
body.ogr-styled .ftr-top{
  gap:6px clamp(12px,1.6vw,24px) !important;padding-bottom:10px !important;
}
body.ogr-styled .ftr h5{
  font-size:8.5px !important;line-height:1.4 !important;margin:0 0 6px !important;
  letter-spacing:.15em !important;
}
body.ogr-styled .ftr ul{
  gap:0 !important;font-size:.73rem !important;line-height:1.5 !important;margin:0 !important;
}
body.ogr-styled .ftr ul li{
  font-size:.73rem !important;line-height:1.5 !important;margin:0 !important;padding:0 !important;
}
body.ogr-styled .ftr ul a{font-size:.73rem !important;line-height:1.5 !important}
body.ogr-styled .ftr-logo{width:96px !important;margin-bottom:6px !important}
body.ogr-styled .ftr-addr{font-size:.72rem !important;margin:0 0 4px !important;line-height:1.4 !important}
body.ogr-styled .ftr .link-u.on-dark{font-size:.72rem !important;padding-bottom:2px !important}
body.ogr-styled .ogr-social{margin-top:8px;gap:6px}
body.ogr-styled .ogr-social a{width:24px;height:24px}
body.ogr-styled .ogr-social svg{width:15px;height:15px}
body.ogr-styled .ftr-bot{
  padding:8px 0 10px !important;font-size:.66rem !important;line-height:1.5;
}