@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600;700;800;900&display=swap');
/* Shared mobile chrome per the design handoff: MENU button + glass panel. */
.burger{display:none;border:1px solid rgba(251,249,243,.35);background:rgba(251,249,243,.1);
  color:#F2EFE4;font:600 11px/1 'Instrument Sans',sans-serif;letter-spacing:.12em;
  padding:13px 16px;cursor:pointer}
@media (max-width:1180px){
  .navr{display:none !important}
  .burger{display:block}
  .pagehead h1{font-size:34px !important}
}
@media (max-width:700px){
  .pagehead h1{font-size:29px !important}
}

/* The nav items are real links now, so they need the span styling back */
.navr a{text-decoration:none;color:inherit;cursor:pointer}
.navr a.on{color:#FBF9F3;font-weight:700}

/* Separate workflow links share the main navigation. */
.navr.expanded-nav{gap:14px!important;font-size:11px!important;letter-spacing:.04em!important}
.navr.expanded-nav .login{padding-left:12px!important;padding-right:12px!important}

/* No BACK button: the browser has one and the nav is always visible */
/* Title band, every screen: heading at the left, back button at the right. */
.backbar{display:none !important}
.pagehead .in.has-back{display:flex !important;align-items:center;
  justify-content:flex-start;gap:20px;flex-wrap:wrap;text-align:left !important}
.backbtn{order:1;flex:0 0 auto;margin-left:auto;
  background:rgba(251,249,243,.16);border:1px solid rgba(34,48,31,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#22301F;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  padding:7px 12px;text-decoration:none;white-space:nowrap;line-height:1;
  display:inline-flex;align-items:center;min-height:30px}
.backbtn:hover{background:rgba(251,249,243,.3);color:#22301F}
.pagehead .in.has-back > h1,
.pagehead .in.has-back > .bc{order:0;margin-left:0 !important;text-align:left}
.pagehead .in.has-back > .sub,
.pagehead .in.has-back > .note{order:2;flex:1 0 100%;text-align:left;margin:0}
.pagehead .eyebrow{display:none}

/* ---- Wordmark and the brown bands -------------------------------------
   The entrance sign is a serif with square, blocky slabs, so the wordmark is
   set in a slab serif at its heaviest weight, apart from the body sans.
   The header and footer brown drops from #2E241C to #231B14.            */
/* The wordmark is an anchor on every page but the home page, so it needs its
   own colour and no underline; otherwise it inherits the body link style. */
.brand{font-family:'Roboto Slab','Instrument Sans',Georgia,serif !important;
  font-weight:900 !important;letter-spacing:.005em !important;
  -webkit-text-stroke:0.6px currentColor !important;font-size:24px !important;
  color:#FBF9F3 !important;text-decoration:none !important;cursor:pointer}
.brand:hover{color:#FFFFFF !important}
.topbar,.top,.foot{background:#231B14 !important}
.menu-panel{background:rgba(35,27,20,.68) !important}
/* Shared management footer: the reference composition, with Lane Ranch's
   actual management details. */
.foot.hoa-foot{background:#231B14 !important;color:#C9C2B0 !important;
  font-family:'Instrument Sans',system-ui,sans-serif}
.foot.hoa-foot *{box-sizing:border-box}
.foot.hoa-foot .footer-primary{padding:34px clamp(32px,4.4vw,84px) 26px;
  display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:start;
  gap:56px}
.foot.hoa-foot .footer-brand{font-family:'Roboto Slab','Instrument Sans',Georgia,serif;
  font-weight:900;font-size:29px;line-height:1;letter-spacing:.005em;
  text-transform:uppercase;color:#FBF9F3;text-decoration:none;
  -webkit-text-stroke:.5px currentColor;width:max-content}
.foot.hoa-foot .footer-brand:hover{color:#FFFFFF}
.foot.hoa-foot .footer-columns{display:grid;
  grid-template-columns:minmax(330px,1fr) minmax(210px,max-content);gap:64px}
.foot.hoa-foot .footer-column{min-width:0}
.foot.hoa-foot .footer-label{margin-bottom:8px;font-size:10.5px;line-height:1.2;
  letter-spacing:.18em;font-weight:700;color:#B8C0A8}
.foot.hoa-foot address{margin:0;font-style:normal;font-size:13.5px;line-height:1.7;
  color:#C9C2B0}
.foot.hoa-foot .footer-reach{display:flex;flex-direction:column;gap:4px;
  font-size:14px;line-height:1.35;font-weight:700}
.foot.hoa-foot .footer-reach a{color:#FBF9F3;text-decoration:none;width:max-content;
  max-width:100%;overflow-wrap:anywhere}
.foot.hoa-foot .footer-reach a:hover{text-decoration:underline;text-underline-offset:3px;
  color:#FFFFFF}
.foot.hoa-foot .footer-legal{margin:0 clamp(32px,4.4vw,84px);
  border-top:1px solid rgba(251,249,243,.14);padding:15px 0 28px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:12px;line-height:1.45;color:#C9C2B0}
.foot.hoa-foot .footer-dim{opacity:.7}

@media(max-width:1100px){
  .foot.hoa-foot .footer-primary{grid-template-columns:1fr;gap:30px}
  .foot.hoa-foot .footer-columns{grid-template-columns:minmax(300px,1fr) minmax(210px,auto);
    gap:40px}
}

/* ---- Summary cards inside a band (63e) --------------------------------
   label, title, one meta line, one action. Light type on the dark grounds. */
.cardt{font-size:20px;font-weight:700;color:#24382A;line-height:1.25}
.cardm{font-size:13.5px;color:#514E44;margin-top:6px;line-height:1.5}
.carda{display:inline-block;font-size:13px;font-weight:700;color:#3E5C41;
  text-decoration:none;margin-top:14px;padding:12px 0;min-height:44px}
.carda:hover{color:#24382A}
.band[style*="#24382A"] .lab,.band[style*="#3E5C41"] .lab{color:#A9B49B}
.band[style*="#24382A"] .cardt,.band[style*="#3E5C41"] .cardt{color:#FBF9F3}
.band[style*="#24382A"] .cardm,.band[style*="#3E5C41"] .cardm{color:#C9CFBB}
.band[style*="#24382A"] .carda,.band[style*="#3E5C41"] .carda{color:#E4E8D8}
.band[style*="#24382A"] .carda:hover,.band[style*="#3E5C41"] .carda:hover{color:#FBF9F3}

/* ---- The frame ---------------------------------------------------------
   Header and footer are full-bleed brown bands across the screen. The
   content container floats between them with padding and a shadow.

     content box   max-width 1440px  (from the design handoff - this is what
                   keeps the type at its intended size)
     inner pad     64px desktop / 32px tablet / 20px phone   (--pad)
     side rails    10% of screen width, or whatever is left once the box
                   hits 1440px, whichever is larger
     top + bottom  a percentage of screen HEIGHT, sized so the header, the
                   box and the footer all land inside one screen

   On a short laptop the box scrolls inside its own frame, keeping the
   footer on the screen.
   -------------------------------------------------------------------- */
:root{--pad:64px;--rail:10vw;--vpad:clamp(28px,5vh,68px)}
body,.page{gap:0 !important}
body,.page{background:#FDFCFA !important}

/* Breathing room above the container and above the footer. */
.topbar,.top{margin-bottom:var(--vpad) !important}
.foot{margin-top:var(--vpad) !important}
.backbar{width:min(calc(100vw - 2*var(--rail)),1440px) !important;max-width:1440px !important;
  margin:0 auto !important;padding:0 0 14px !important}
.backbar+.wrap{margin-top:0 !important}
.wrap{width:min(calc(100vw - 2*var(--rail)),1440px) !important;max-width:1440px !important;
  margin:0 auto !important;display:flex !important;flex-direction:column !important}
.wrap > *{min-width:0}
.in{padding-left:var(--pad) !important;padding-right:var(--pad) !important}
.topbar .in{padding-top:64px !important;padding-bottom:64px !important}
.top{padding:64px 0 !important}
.foot .in{padding-top:34px !important;padding-bottom:30px !important}
.page > .foot{padding:0 !important}

/* ---- One scroller, and padding that gives way -------------------------
   The container used to be a fixed-height box with its own scrollbar inside
   the page's scrollbar, so a long page scrolled internally while empty
   padding sat above it. The document is now the only scroller: the container
   is as tall as its content, and the padding above and below shrinks as the
   screen gets shorter, keeping the page to one scroller.

   The home page is the exception - it keeps its own fit-to-screen rules.  */
@media (min-width:701px){
  html,body{height:auto !important;overflow:visible !important}
  /* Most pages hang their sections straight off body; only a few wrap them in
     .page. Make whichever one is the container the flex column, so the footer
     pins to the bottom of a short page either way. */
  body{min-height:100vh;display:flex !important;flex-direction:column}
  .page{flex:1 1 auto;min-height:0;height:auto !important;overflow:visible !important;
    display:flex;flex-direction:column}
  .topbar,.top,.foot{flex:0 0 auto !important}
  .wrap{flex:0 0 auto !important;min-height:0 !important;overflow:visible !important;
    margin-bottom:auto !important}
}

/* Short screens: trim the bands so the box keeps its proportions */
@media (max-height:1000px){
  :root{--vpad:clamp(26px,4.6vh,56px)}
  .topbar .in,.top{padding-top:30px !important;padding-bottom:30px !important}
  .foot .in{padding-top:12px !important;padding-bottom:11px !important}
}
@media (max-height:840px){
  :root{--vpad:clamp(22px,3.6vh,40px)}
  .topbar .in,.top{padding-top:20px !important;padding-bottom:20px !important}
  .foot .in{padding-top:10px !important;padding-bottom:9px !important}
}
@media (max-width:1180px){
  :root{--pad:32px;--rail:7vw;--vpad:6vh}
  .topbar .in{padding-top:44px !important;padding-bottom:44px !important}
  .top{padding:44px 0 !important}
  .foot .in{padding-top:26px !important;padding-bottom:23px !important}
}
@media (max-width:700px){
  :root{--pad:20px;--rail:4vw;--vpad:clamp(24px,3.4vh,38px)}
  /* Short pages still fill the screen, so no white sits under the footer. */
  html{min-height:100%}
  body{min-height:100vh;display:flex !important;flex-direction:column}
  .page{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .wrap{margin-bottom:auto !important}
  .topbar,.top,.foot{flex:0 0 auto !important}
  .foot{margin-top:auto}
  .topbar .in{padding-top:32px !important;padding-bottom:32px !important}
  .top{padding:32px 0 !important}
  .foot .in{padding-top:30px !important;padding-bottom:27px !important}
}

.menu{position:fixed;inset:0;background:rgba(25,25,24,.45);z-index:50;display:none}
.menu.open{display:block}
.menu-panel{position:absolute;top:8px;right:12px;width:max-content;min-width:172px;max-width:70vw;
  max-height:calc(100dvh - 16px);overflow:hidden;
  background:rgba(46,36,28,.62);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(251,249,243,.22);
  display:flex;flex-direction:column;box-shadow:0 18px 44px rgba(25,25,24,.4)}
.menu-top{display:flex;align-items:center;justify-content:flex-end;padding:11px 14px 7px}
.menu-close{border:none;background:none;color:#E4DFD2;font-size:14px;font-weight:600;
  line-height:1;padding:0;cursor:pointer}
.menu-close:hover{color:#F2EFE4}
.menu nav{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow-y:auto}
.menu nav a{display:block;color:#F2EFE4;font-size:12.5px;font-weight:600;letter-spacing:.1em;
  padding:11px 15px;border-bottom:1px solid rgba(251,249,243,.14);text-decoration:none}
.menu nav a:last-child{border-bottom:none}
.menu nav a:hover{background:rgba(251,249,243,.07);color:#FBF9F3}

/* ---- Phone layout, per the 63e / 63f / 63g / 62a references -----------
   The references show the inside of the content container: sections stacked
   full-width WITHIN the container, alternating dark and light, separated by a
   hairline. The container itself keeps its padding and shadow, as on desktop.
   -------------------------------------------------------------------- */
@media (max-width:700px){
  /* A label sitting flush on its heading read as one run-on line. */
  .kick,.lab{margin-bottom:6px}
  /* sections run edge to edge inside the container, hairline between them */
  .wrap .band{border-top:1px solid rgba(46,36,28,.16)}
  .wrap .band:first-child{border-top:0}
  /* One title in its own sage band. The eyebrow repeated the heading word
     for word, and Minutes carried a breadcrumb saying it a third time. */
  .pagehead{background:#9CAD8A !important}
  .pagehead .in{padding-top:10px !important;padding-bottom:11px !important;
    display:block !important;text-align:left}
  .pagehead .eyebrow{display:none !important}
  .pagehead .sub{display:none !important}
  /* Minutes carried a breadcrumb that named the page a third time. */
  .pagehead .bc{display:none !important}
  .pagehead h1,.pagehead .bc h1{color:#22301F !important;margin:0 !important;
    display:block !important;font-size:26px !important;line-height:1.15 !important}
}

@media (max-width:700px){
  .foot.hoa-foot .footer-primary{padding:15px 18px 9px;gap:0}
  .foot.hoa-foot .footer-brand{font-size:20px}
  .foot.hoa-foot .footer-columns{display:none}
  .foot.hoa-foot .footer-legal{margin:0 18px;gap:4px 12px;padding:8px 0 16px;
    font-size:10px;flex-direction:row;justify-content:space-between}
  .foot.hoa-foot .footer-dim{text-align:right}
}

/* A phone or tablet turned sideways needs the same compact footer treatment
   even when its width is above the phone breakpoint. */
@media (max-height:700px){
  .foot.hoa-foot .footer-primary{padding:11px 18px 7px;gap:0}
  .foot.hoa-foot .footer-brand{font-size:20px}
  .foot.hoa-foot .footer-columns{display:none}
  .foot.hoa-foot .footer-legal{margin:0 18px;gap:4px 12px;padding:7px 0 14px;
    font-size:10px;flex-direction:row;justify-content:space-between}
  .foot.hoa-foot .footer-dim{text-align:right}
}

/* Back to top: a line above the footer, clear of the text. */
.totop-bar{width:min(calc(100vw - 2*var(--rail)),1440px);max-width:1440px;
  margin:0 auto;display:flex;justify-content:flex-end;padding:18px 0 26px}
.totop{font-size:11px;font-weight:700;letter-spacing:.14em;color:#3E5C41;
  text-decoration:none;padding:9px 14px;border:1px solid #C9CFBB;background:#FBF9F3;
  min-height:38px;display:inline-flex;align-items:center}
.totop:hover{color:#24382A;border-color:#7C8B6F}

/* Shared back arrow sits on its own line above the page title. */
.pagehead .in.has-back .backbtn{order:-1;margin-left:0;padding:0;width:36px;min-height:32px;justify-content:flex-start;background:transparent;border:0;backdrop-filter:none;font-size:22px;letter-spacing:0}
.pagehead .in.has-back{row-gap:4px}
.pagehead .in.has-back > h1,.pagehead .in.has-back > .bc{flex-basis:100%}

/* Keep navigation labels intact; use the compact menu before they crowd. */
.topbar .brand,.top .brand,.navr a{white-space:nowrap;flex-shrink:0}
@media(max-width:1450px){.navr.expanded-nav{display:none!important}.burger{display:block}}