/* Wali Home Care: shared styles for every page
   1. Header on tablets   2. Menu drawer   3. Sticky side columns
   4. Page-load motion    5. Scroll reveals
   Page-specific design stays in each page's own <style> block. */

/* Self-hosted fonts (variable files from Google Fonts, latin + latin-ext only).
   The two latin files are preloaded in every page's <head>. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 700;font-stretch:100%;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 700;font-stretch:100%;font-display:swap;src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Keeps sideways reveal motion from ever causing horizontal scroll */
main{overflow-x:clip}

/* ---------------------------------------------------------------- 1. Header on tablets
   The full nav only fits from 1160px. Below that, show the call icon and menu button. */
.show-md{display:none !important}
@media (max-width:1159px){
  .hide-md{display:none !important}
  .show-md{display:flex !important}
}
/* Tighter nav links on small laptops, so all seven links still fit on one line */
@media (max-width:1279px){.navlink{padding-left:10px;padding-right:10px}}

/* ---------------------------------------------------------------- 2. Menu drawer
   A top-layer popover holding a horizontal scroll-snap track: the spacer is the
   "closed" stop and the sheet is the "open" stop, so swiping right closes it. */
.drawer{
  --dw:min(24rem,88vw);
  --drawer-backdrop:0;
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:#172A55;
  display:none;
}
.drawer:popover-open,.drawer.is-open{display:block}
.drawer::backdrop{background:#0B1530;opacity:calc(var(--drawer-backdrop,1) * .55)}
.drawer-scroller{
  display:grid;grid-template-columns:100% var(--dw);height:100%;
  overflow-x:scroll;overflow-y:hidden;overscroll-behavior:none;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.drawer-scroller::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:no-preference){.drawer-scroller{scroll-behavior:smooth}}
.drawer-spacer{scroll-snap-align:start}
.drawer-sheet{
  scroll-snap-align:end;height:100%;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
  display:flex;flex-direction:column;gap:24px;
  padding:16px 16px calc(24px + env(safe-area-inset-bottom));
  background:radial-gradient(420px 320px at 100% 0%,rgba(196,226,205,.7),transparent 70%),radial-gradient(420px 360px at 0% 100%,rgba(186,206,238,.55),transparent 70%),#F7F8F6;
  border-radius:28px 0 0 28px;box-shadow:-24px 0 64px rgba(11,21,48,.28);
  font-family:'Figtree',system-ui,sans-serif;outline:none;
}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0 8px 8px}
.drawer-top img{height:40px;width:auto;display:block}
.drawer-close{width:48px;height:48px;border-radius:999px;border:0;background:#FFFFFF;color:#172A55;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 1px 2px rgba(23,42,85,.08)}
.drawer-close:hover{background:#EEF2F7}
.drawer-close:focus-visible,.drawer a:focus-visible{outline:2px solid #4C8C5E;outline-offset:2px}
.drawer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.drawer-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:16px;font-family:'Bricolage Grotesque',Georgia,serif;font-size:26px;font-weight:600;letter-spacing:-.02em;color:#172A55;text-decoration:none}
.drawer-links a:hover{background:rgba(255,255,255,.75)}
.drawer-links a[aria-current="page"]{background:#FFFFFF;box-shadow:0 1px 2px rgba(23,42,85,.08)}
.drawer-links svg{color:#4C8C5E;flex:none}
.drawer-group{display:flex;flex-direction:column;gap:12px;padding:0 16px}
.drawer-label{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3B7149}
.drawer-sub{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.drawer-sub a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:#FFFFFF;font-size:14px;font-weight:600;color:#172A55;text-decoration:none}
.drawer-sub a::before{content:"";width:8px;height:8px;border-radius:999px;background:#4C8C5E}
.drawer-sub a[aria-current="page"]{background:#172A55;color:#FFFFFF}
.drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.drawer-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#172A55;color:#FFFFFF;text-decoration:none;border-radius:999px;padding:8px 8px 8px 24px;font-weight:600;font-size:16px}
.drawer-cta:hover{background:#22386B;color:#FFFFFF}
.drawer-cta span{width:40px;height:40px;border-radius:999px;background:#4C8C5E;display:flex;align-items:center;justify-content:center}
.drawer-call{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;border-radius:999px;background:#FFFFFF;color:#3B7149;text-decoration:none;font-weight:600;font-size:16px}
.drawer-note{margin:8px 0 0;text-align:center;font-size:13px;line-height:1.5;color:#52617F}
html.drawer-open{overflow:hidden}

@supports (animation-timeline: scroll()){
  @property --drawer-backdrop{syntax:'<number>';inherits:true;initial-value:0}
  .drawer{timeline-scope:--drawer-fade;animation:drawer-fade linear both;animation-timeline:--drawer-fade}
  .drawer-scroller{scroll-timeline:--drawer-fade x}
  @keyframes drawer-fade{0%{--drawer-backdrop:0}100%{--drawer-backdrop:1}}
}

/* ---------------------------------------------------------------- 3. Sticky side columns
   Only when the two columns sit side by side and the screen is tall enough. */
@media (min-width:1024px) and (min-height:640px){
  .stick{position:sticky;top:120px;align-self:flex-start}
}
@media (min-width:1024px) and (min-height:860px){
  .stick-tall{position:sticky;top:120px;align-self:flex-start}
}

/* ---------------------------------------------------------------- Blog
   Filtered-out cards, the copy-link button and its confirmation. */
.post[hidden],[data-post-empty][hidden]{display:none !important}
button.shr{position:relative;cursor:pointer;padding:0;font:inherit}
.shr.copied::after{content:"Link copied";position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;white-space:nowrap;background:#172A55;color:#FFFFFF;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;pointer-events:none}

/* ---------------------------------------------------------------- 4. Page-load motion (hero) */
@media (prefers-reduced-motion:no-preference){
  @keyframes hero-in{from{opacity:0;translate:0 24px}}
  @keyframes hero-side{from{opacity:0;translate:40px 0}}
  @keyframes hero-img{from{scale:1.08}}
  :is(#top,#m-top) :is(nav[aria-label="Breadcrumb"],h1,h1 ~ *){animation:hero-in .8s cubic-bezier(.2,.7,.2,1) both}
  :is(#top,#m-top) h1{animation-delay:.06s}
  :is(#top,#m-top) h1 ~ *{animation-delay:.18s}
  :is(#top,#m-top) h1 ~ * ~ *{animation-delay:.3s}
  :is(#top,#m-top) h1 ~ * ~ * ~ *{animation-delay:.42s}
  #top .glass.pad-card{animation:hero-side .9s .28s cubic-bezier(.2,.7,.2,1) both}
  .ph-hero{overflow:hidden}
  .ph-hero > img{animation:hero-img 1.6s cubic-bezier(.2,.7,.2,1) both}
  .ph-hero > .glass{animation:hero-in .8s .5s cubic-bezier(.2,.7,.2,1) both}
}

/* ---------------------------------------------------------------- 5. Scroll reveals
   Native scroll-driven animations, tied to each element entering the screen.
   Browsers without support (and anyone who prefers reduced motion) simply see
   the content in place: nothing is ever hidden waiting for a script. */
@media (prefers-reduced-motion:no-preference){
@supports ((animation-timeline: view()) and (animation-range: entry)){
  @keyframes rv-up{from{opacity:0;translate:0 48px}}
  @keyframes rv-left{from{opacity:0;translate:-64px 0}}
  @keyframes rv-right{from{opacity:0;translate:64px 0}}
  @keyframes rv-zoom{from{opacity:0;scale:.94}}
  @keyframes rv-img{from{scale:1.14}}

  /* Section headings, their eyebrow labels and intro lines */
  main h2,
  main span:has(+ h2),
  main h2 + p,
  main div:has(> h2.h2) + p,
  /* Cards, steps, accordions and approach items */
  main .lift:not(.slide),
  main ol > li.pad-card,
  main ol > li.glass-dark,
  main details,
  main .map{
    animation:rv-up linear both;
    animation-timing-function:cubic-bezier(.25,.6,.3,1);
    animation-timeline:view();
    animation-range:entry 0% entry 100%;
  }
  main h2 + p,main div:has(> h2.h2) + p{animation-range:entry 10% entry 100%}

  /* Stagger items that enter side by side */
  main :is(.lift,ol > li.pad-card,ol > li.glass-dark,details):nth-child(4n+2){animation-range:entry 6% entry 100%}
  main :is(.lift,ol > li.pad-card,ol > li.glass-dark,details):nth-child(4n+3){animation-range:entry 12% entry 100%}
  main :is(.lift,ol > li.pad-card,ol > li.glass-dark,details):nth-child(4n+4){animation-range:entry 18% entry 100%}

  /* Two-column feature rows: halves rise in (side by side on wide screens, below) */
  main section.sec > div[style*="flex-wrap: wrap"] > :is(.pad-card,form):not(.lift):not(.stick):not(.stick-tall),
  main section.end > .pad-card{
    animation:rv-up linear both;
    animation-timing-function:cubic-bezier(.25,.6,.3,1);
    animation-timeline:view();
    animation-range:entry 0% entry 60%;
  }
  main section.end > .pad-card{animation-name:rv-zoom}

  /* Photos settle into their frames */
  .ph-why{overflow:hidden}
  .ph-why > img{animation:rv-img linear both;animation-timeline:view();animation-range:entry 0% cover 50%}

  @media (min-width:1024px){
    main section.sec > div[style*="flex-wrap: wrap"] > :is(.pad-card,form):not(.lift):not(.stick):not(.stick-tall):first-child{animation-name:rv-left}
    main section.sec > div[style*="flex-wrap: wrap"] > :is(.pad-card,form):not(.lift):not(.stick):not(.stick-tall):last-child:not(:first-child){animation-name:rv-right}
  }
}
}