/* ============================================================
   Cochran & Chhabra — site navigation, shared block
   /assets/css/nav-20260909.css  ·  pairs with /assets/js/nav-20260909.js
   Desktop (>1024px) is untouched: the mobile-only markup below is hidden
   and .nav-sheet uses display:contents so the flex row is unchanged.
   Hamburger from 1024px down — the desktop row needs ~990px and used to
   overflow (horizontal scroll, cut-off CTA) on every iPad in portrait.
   /assets/* is cached immutable — any edit ships under a NEW filename.
   ============================================================ */

/* ---- shared (all widths) ---- */
#nav .nav-sheet{display:contents;}
#nav .sub-toggle,#nav .sub-all,#nav .nav-foot{display:none;}
#nav .hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:10px;margin:0 -10px 0 0;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;}
#nav .hamburger span{display:block;width:24px;height:2px;background:var(--forest,#102217);transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease;transform-origin:center;}
#nav .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#nav .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2);}
#nav .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#nav .hamburger:focus-visible{outline:2px solid var(--gold,#A9BAC0);outline-offset:2px;}
/* desktop dropdown: the current page keeps the cream cell, but the same row height as its neighbours */
#nav .subnav a.cur{padding:.62rem 1.2rem;border-bottom:0;}

/* ---- mobile ---- */
@media (max-width:1024px){
  #nav{padding:0 20px;}
  #nav .hamburger{display:flex;}

  /* While open: the header pins to the top and the sheet owns the viewport */
  html.nav-open{overflow:hidden;}
  html.nav-open body{overflow:hidden;}
  html.nav-open #nav{position:fixed;top:0;left:0;right:0;z-index:1600;background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
  html.nav-open .mobile-cta-bar{display:none!important;}

  /* The sheet */
  #nav .nav-sheet{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;top:72px;bottom:0;
    background:var(--forest,#102217);color:#fff;
    padding:.35rem max(24px,calc((100vw - 560px)/2)) calc(28px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .18s ease,transform .22s cubic-bezier(.4,0,.2,1),visibility 0s linear .22s;
  }
  html.nav-open #nav .nav-sheet{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .22s ease,transform .26s cubic-bezier(.4,0,.2,1),visibility 0s;}

  /* Top level: one serif line per row, hairline between, left-aligned */
  #nav .nav-links{display:block;position:static;width:auto;margin:0;padding:0;gap:0;background:transparent;list-style:none;}
  #nav .nav-links>li{display:block;border-bottom:1px solid rgba(255,255,255,.12);}
  #nav .nav-links>li.nav-cta{display:none;}
  #nav .nav-links>li>a,#nav .sub-toggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:60px;padding:.9rem 0;margin:0;background:none;border:0;text-align:left;
    font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-size:1.75rem;font-weight:400;letter-spacing:.005em;line-height:1.1;text-transform:none;
    color:#fff;text-decoration:none;cursor:pointer;white-space:normal;-webkit-tap-highlight-color:transparent;
  }
  #nav .nav-links>li>a.cur{color:#fff;border-bottom:0;padding-bottom:.9rem;}
  #nav .nav-links>li>a:hover,#nav .sub-toggle:hover{color:#fff;}
  #nav .nav-links>li>a:focus-visible,#nav .sub-toggle:focus-visible,#nav .subnav a:focus-visible,#nav .nf-btn:focus-visible{outline:2px solid var(--gold,#A9BAC0);outline-offset:3px;border-radius:1px;}
  /* mobile shows the button, hides the desktop hover link */
  #nav .nav-links>li.has-sub>a{display:none;}
  #nav .nav-links>li.has-sub>.sub-toggle{display:flex;}
  #nav .has-sub::after{display:none;}
  #nav .sub-toggle .chev{flex:none;width:.55em;height:.55em;margin:-.3em .25em 0 1rem;border-right:1.5px solid rgba(255,255,255,.7);border-bottom:1.5px solid rgba(255,255,255,.7);transform:rotate(45deg);transition:transform .25s cubic-bezier(.4,0,.2,1);}
  #nav .sub-toggle[aria-expanded="true"] .chev{transform:rotate(225deg);margin-top:.25em;}
  #nav .sub-toggle[aria-expanded="true"]{color:var(--gold,#A9BAC0);}

  /* Accordion panels */
  #nav .subnav{
    display:block;position:static;min-width:0;margin:0;padding:0 0 0 1rem;
    background:transparent;border:0;box-shadow:none;list-style:none;
    opacity:1;visibility:visible;transform:none;
    max-height:0;overflow:hidden;
    transition:max-height .3s cubic-bezier(.4,0,.2,1),padding-bottom .3s ease;
  }
  #nav .sub-toggle[aria-expanded="true"]+.subnav{max-height:480px;padding-bottom:.8rem;}
  #nav .subnav li{display:block;}
  #nav .subnav a{
    display:flex;align-items:center;min-height:46px;padding:.55rem 0;
    font-family:'Inter',system-ui,sans-serif;font-size:1rem;font-weight:300;letter-spacing:.01em;text-transform:none;line-height:1.35;
    color:rgba(255,255,255,.82);background:transparent;white-space:normal;text-decoration:none;border:0;
  }
  #nav .subnav a:hover{background:transparent;color:#fff;}
  #nav .subnav a.cur{background:transparent;color:var(--gold,#A9BAC0);font-weight:400;padding-bottom:.55rem;border-bottom:0;}
  #nav .subnav a.cur::before{content:"";display:inline-block;width:14px;height:1px;background:var(--gold,#A9BAC0);margin-right:.6rem;}
  #nav .subnav li.sub-all{display:block;}
  #nav .subnav li.sub-all a{color:#fff;font-weight:400;}
  #nav .subnav li.sub-all a::after{content:"\2192";margin-left:.45rem;opacity:.7;}

  /* Sheet footer: the two CTAs + firm line. Sits at the bottom when the list is short,
     flows below it when a group is expanded. */
  #nav .nav-foot{display:block;margin-top:auto;padding-top:2rem;}
  #nav .nf-btn{
    display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:52px;margin:0 0 .6rem;
    font-family:'Inter',system-ui,sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    text-decoration:none;border-radius:2px;-webkit-tap-highlight-color:transparent;
  }
  #nav .nf-call{color:#fff;border:1px solid rgba(255,255,255,.45);background:transparent;}
  #nav .nf-call:hover{border-color:#fff;}
  #nav .nf-consult{color:var(--forest,#102217);background:var(--gold,#A9BAC0);border:1px solid var(--gold,#A9BAC0);}
  #nav .nf-consult:hover{background:#c2cfd3;border-color:#c2cfd3;}
  #nav .nf-meta{margin:1.25rem 0 0;font-family:'Inter',system-ui,sans-serif;font-size:.78rem;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62);}
  #nav .nf-meta .nf-k{display:flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:.25rem;}
  #nav .nf-meta .nf-k::before{content:"";width:6px;height:6px;border-radius:50%;background:#7fc99a;}
}

/* Short viewports (landscape phones): tighten rows so four groups + footer fit */
@media (max-width:1024px) and (max-height:560px){
  #nav .nav-links>li>a,#nav .sub-toggle{min-height:50px;padding:.6rem 0;font-size:1.5rem;}
  #nav .nav-foot{padding-top:1.25rem;}
}

@media (prefers-reduced-motion:reduce){
  #nav .nav-sheet,#nav .subnav,#nav .sub-toggle .chev,#nav .hamburger span{transition:none!important;}
}