/* ==========================================================================
   Himalayan Plein-Air — layout.css
   Containers, header + navigation, footer, dividers, shared components.
   ========================================================================== */

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,128px);position:relative}
.section-head{margin-bottom:clamp(40px,5vw,64px)}
.section-head.center{text-align:center}
.section-head.center p{margin-inline:auto}
.dark{background:var(--alpine)}

/* --- Header -------------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);
  transition:background .35s,box-shadow .35s,transform .4s var(--ease);
}
.site-header.is-solid{background:rgba(31,42,36,.97);box-shadow:0 1px 0 var(--line-dark);backdrop-filter:blur(10px)}
.site-header.is-hidden{transform:translateY(-100%)}
.header-inner{height:100%;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);flex-shrink:0}
.brand img{width:44px;height:auto;transition:transform .4s var(--ease)}
.brand:hover img{transform:rotate(-6deg) scale(1.05)}
.brand span{font:600 13px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.main-nav{margin-left:auto}
.main-nav>ul{display:flex;align-items:center;gap:6px;list-style:none}
.main-nav a,.main-nav .nav-toggle{
  display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--r);
  color:var(--on-dark);text-decoration:none;font-size:15px;font-weight:500;transition:color .2s,background .2s;
}
.main-nav a:hover,.main-nav .nav-toggle:hover{color:var(--paper);background:rgba(249,248,245,.08)}
.main-nav [aria-current="page"],.main-nav .is-current>.nav-toggle{color:var(--paper);box-shadow:inset 0 -2px 0 var(--snow)}
.nav-toggle svg{width:12px;height:12px;transition:transform .25s}
.has-menu{position:relative}
.has-menu.open .nav-toggle svg{transform:rotate(180deg)}
.submenu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:260px;list-style:none;
  background:var(--paper);border-radius:6px;padding:8px;
  box-shadow:0 24px 48px -16px rgba(20,28,24,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s;
}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-menu.open .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{color:var(--ink);padding:12px 14px;border-radius:4px;flex-direction:column;align-items:flex-start;gap:2px}
.submenu a:hover{background:var(--paper-2);color:var(--alpine)}
.submenu a small{font-size:13px;color:var(--ink-3);font-weight:400}
.submenu a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--snow-deep);background:var(--paper-2)}
.header-cta{margin-left:8px}
.menu-btn{display:none;width:48px;height:48px;align-items:center;justify-content:center;color:var(--paper);margin-left:auto;border-radius:var(--r)}
.menu-btn span{display:block;width:24px;height:2px;background:currentColor;position:relative;transition:background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.menu-btn span::before{top:-8px}.menu-btn span::after{top:8px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(8px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-8px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:90;background:var(--alpine);padding:calc(var(--header-h) + 16px) 20px 28px;
  display:flex;flex-direction:column;overflow-y:auto;
  clip-path:circle(0 at calc(100% - 44px) 38px);visibility:hidden;transition:clip-path .55s var(--ease),visibility .55s;
}
.menu-open .drawer{clip-path:circle(150% at calc(100% - 44px) 38px);visibility:visible}
.drawer ul{list-style:none}
.drawer>ul>li{border-bottom:1px solid var(--line-dark)}
.drawer ul a,.drawer .d-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 0;font:400 30px/1.1 var(--display);color:var(--paper);text-decoration:none;text-align:left}
.drawer .d-toggle svg{width:18px;height:18px;transition:transform .3s}
.drawer .d-open .d-toggle svg{transform:rotate(45deg)}
.drawer .d-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.drawer .d-open .d-sub{grid-template-rows:1fr}
.drawer .d-sub>ul{overflow:hidden}
.drawer .d-sub a{font:500 17px/1.3 var(--sans);padding:12px 0 12px 16px;color:var(--on-dark);border-left:2px solid var(--line-dark)}
.drawer .d-sub li:last-child a{margin-bottom:16px}
.drawer [aria-current="page"]{color:var(--snow)!important}
.drawer .btn{margin-top:32px}
.drawer-foot{margin-top:24px;font-size:14px;color:var(--on-dark-2)}
.drawer-foot a{font:inherit;padding:0;display:inline;color:var(--paper)}

/* --- Section divider: Dhauladhar ridge -----------------------------------
   The svg sits at the top of the darker section and paints the sky (the colour
   of the section above) down to the ridgeline, so the mountains rise out of the
   dark section. Class sets the colour of the section above.                    */
.drip{position:absolute;left:0;right:0;top:-1px;width:100%;height:clamp(64px,9.5vw,140px);color:var(--paper);pointer-events:none;z-index:2;display:block}
.drip.from-paper2{color:var(--paper-2)}
.drip.from-terra{color:var(--terracotta)}
.drip+.wrap{padding-top:clamp(36px,5.5vw,84px)}
.js .drip{transform-origin:top;transform:scaleY(1.3);transition:transform 1.6s var(--ease)}   /* peaks rise into place */
.js .drip.in{transform:none}

/* --- CTA band + footer --------------------------------------------------- */
.cta-band{background:var(--terracotta);color:var(--paper);padding-block:clamp(56px,7vw,88px)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{color:var(--paper);margin:0;font-size:clamp(30px,3.6vw,46px)}
.cta-band p{color:rgba(249,248,245,.85);margin-top:10px}
.btn-paper{--bg:transparent;--fg:var(--paper);--bd:var(--paper)}
.btn-paper:hover{--bg:var(--paper);--fg:var(--terracotta)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.site-footer{position:relative;background:var(--alpine);color:var(--on-dark-2);padding:clamp(96px,10vw,128px) 0 36px}
.footer-top{display:grid;grid-template-columns:1fr 1.2fr 1.2fr auto;gap:48px;align-items:start}
.site-footer h4{color:var(--snow);margin-bottom:18px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px}
.site-footer a{text-decoration:none;color:var(--on-dark);transition:color .2s}
.site-footer a:hover{color:var(--snow)}
.site-footer address{font-style:normal;line-height:1.8}
.site-footer address strong{display:block;color:var(--paper);font-weight:600}
.footer-logo{justify-self:end}
.footer-logo a{display:block;transition:transform .5s var(--ease)}
.footer-logo a:hover{transform:rotate(-4deg) scale(1.04)}
.footer-logo img{width:clamp(120px,11vw,150px);height:auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.35))}
.socials{display:flex;gap:10px}
.socials a{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-dark);display:grid;place-items:center;transition:border-color .2s,background .2s}
.socials a:hover{border-color:var(--snow);background:rgba(255,198,32,.1)}
.socials svg{width:18px;height:18px}
.footer-base{margin-top:64px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px}

/* --- Toast --------------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:300;width:min(520px,calc(100% - 32px));transform:translate(-50%,calc(100% + 48px));visibility:hidden;
  background:var(--alpine);color:var(--paper);padding:16px 20px;border-left:3px solid var(--snow);border-radius:4px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.45);font-size:15px;transition:transform .4s var(--ease),visibility .4s}
.toast.show{transform:translate(-50%,0);visibility:visible}
.toast a{color:var(--snow)}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .main-nav,.header-cta{display:none}
  .menu-btn{display:inline-flex}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-logo{justify-self:start;grid-column:2;grid-row:2}
}
@media (max-width:640px){
  :root{--gutter:16px;--header-h:68px}
  .brand img{width:38px}
  .brand span{font-size:11.5px;letter-spacing:.12em}
  .footer-top{grid-template-columns:1fr;gap:36px}
  .footer-logo{grid-column:auto;grid-row:1}
  .footer-logo img{width:110px}
  .footer-base{flex-direction:column;align-items:flex-start}
  .cta-band .btn{flex:1}
}
@media (min-width:1081px){.drawer{display:none}}

/* --- Enquiry form (Artist / Sponsor pop-up) ------------------------------ */
.dialog-open body{overflow:hidden}
.enquiry{border:0;padding:0;margin:auto;width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 24px);border-radius:12px;background:var(--paper);color:var(--ink-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:auto;overscroll-behavior:contain}
.enquiry::backdrop{background:rgba(13,18,15,.72);backdrop-filter:blur(4px)}
.enquiry[open]{animation:enq-in .45s var(--ease)}
.enquiry[open]::backdrop{animation:enq-fade .35s ease}
@keyframes enq-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes enq-fade{from{opacity:0}}
.enq-form,.enq-done{position:relative;padding:clamp(24px,4vw,40px)}
.enquiry::before{content:"";display:block;height:6px;background:var(--snow)}
.enquiry[data-type="sponsor"]::before{background:var(--terracotta)}
.enq-close{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--alpine);transition:background .2s}
.enq-close:hover{background:var(--paper-2)}
.enq-close svg{width:22px;height:22px}
.enq-head{margin-bottom:26px;padding-right:40px}
.enq-head h2{font-size:clamp(28px,4vw,36px);margin:14px 0 8px}
.enq-head p{font-size:15px;color:var(--ink-3)}
.enquiry[data-type="sponsor"] .badge.snow{background:var(--terracotta);color:var(--paper)}
.enq-fields{display:grid;gap:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font:600 13px/1.3 var(--sans);color:var(--alpine);margin-bottom:7px}
.field label b{color:var(--terracotta)}
.field .opt{font-weight:400;color:var(--ink-3);margin-left:4px}
.field input,.field textarea{width:100%;padding:13px 14px;border-radius:6px;border:1.5px solid rgba(31,42,36,.18);background:#fff;font-size:16px;line-height:1.4;color:var(--ink);transition:border-color .2s,box-shadow .2s;resize:vertical}
.field input:hover,.field textarea:hover{border-color:rgba(31,42,36,.35)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(74,115,156,.18)}
.field.invalid input,.field.invalid textarea{border-color:var(--terracotta);box-shadow:0 0 0 4px rgba(192,92,70,.12)}
.field .err{font-size:13px;color:var(--terracotta-deep);min-height:0;margin-top:6px}
.field .err:empty{display:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.enq-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.enq-submit{min-width:150px;position:relative}
.enq-submit .spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(249,248,245,.4);border-top-color:var(--paper);animation:spin .8s linear infinite}
.enq-submit.is-busy .lbl{opacity:.6}
.enq-submit.is-busy .spin{display:inline-block}
.enq-submit:disabled{cursor:wait}
@keyframes spin{to{transform:rotate(360deg)}}
.enq-note{font-size:13px;color:var(--ink-3)}
.enq-status{margin-top:14px;font-size:14px;color:var(--ink-3)}
.enq-status:empty{display:none}
.enq-status.is-error{padding:12px 14px;border-radius:6px;background:rgba(192,92,70,.1);color:var(--terracotta-deep)}
.enq-status a{color:inherit;font-weight:600}
.enq-done{text-align:center;padding-block:clamp(40px,7vw,64px)}
.enq-done .done-ic{width:72px;height:72px;margin:0 auto 18px;color:var(--sage)}
.enq-done .done-ic circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw .7s var(--ease) forwards}
.enq-done .done-ic path{stroke-dasharray:50;stroke-dashoffset:50;animation:draw .5s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.enq-done h2{font-size:34px;margin-bottom:10px}
.enq-done p{margin:0 auto 26px;color:var(--ink-3)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}.enq-submit{width:100%}}

/* --- Header over a light background (Home page sky) ---------------------- */
.site-header.header-light:not(.is-solid) .brand,
.site-header.header-light:not(.is-solid) .main-nav a,
.site-header.header-light:not(.is-solid) .main-nav .nav-toggle,
.site-header.header-light:not(.is-solid) .menu-btn{color:var(--alpine)}
.site-header.header-light:not(.is-solid) .main-nav a:hover,
.site-header.header-light:not(.is-solid) .main-nav .nav-toggle:hover{background:rgba(31,42,36,.07);color:var(--alpine)}
.site-header.header-light:not(.is-solid) .main-nav [aria-current="page"]{color:var(--alpine);box-shadow:inset 0 -2px 0 var(--terracotta)}
.menu-open .site-header.header-light .menu-btn{color:var(--paper)}
.btn-row.center{justify-content:center}

/* --- Footer without a host column: the logo takes the space, larger ------ */
.footer-top.no-host{grid-template-columns:1fr 1.2fr 1.4fr}
.footer-top.no-host .footer-logo{justify-self:end;align-self:center}
.footer-top.no-host .footer-logo img{width:clamp(180px,17vw,250px)}
@media (max-width:1080px){
  .footer-top.no-host{grid-template-columns:1fr 1fr}
  .footer-top.no-host .footer-logo{grid-column:1/-1;grid-row:auto;justify-self:start}
  .footer-top.no-host .footer-logo img{width:180px}
}
@media (max-width:640px){
  .footer-top.no-host{grid-template-columns:1fr}
  .footer-top.no-host .footer-logo{grid-row:1}
  .footer-top.no-host .footer-logo img{width:150px}
}