/* ═══════════════════════════════════════════════════════════════
   site-header.css — the one header used on every page.
   Previously the redesigned header existed only on the homepage
   (scoped .vx .xh) while every other page still rendered the old one.
   These rules are deliberately NOT scoped to a page class so the same
   markup works sitewide, and they carry enough specificity to beat the
   legacy `header {}` rules in new-style.css.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --shd-red:#ee3038;
  --shd-red-dk:#d0242c;
  --shd-red-lo:#fdecec;
  --shd-ink:#1f2328;
  --shd-line:#dde1e6;
  --shd-line-2:#cfcfcf;
  --shd-grey:#5f6368;
  --shd-t:.28s;
  --shd-ease:cubic-bezier(.22,1,.36,1);
  --shd-pad:clamp(1rem,3.5vw,2rem);
  --shd-maxw:1280px;
}

/* ── thin contact strip ── */
.shd-top{background:var(--shd-ink);color:#fff;font-size:.78rem}
.shd-top-in{max-width:var(--shd-maxw);margin:0 auto;padding:.42rem var(--shd-pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.shd-top a{color:rgba(255,255,255,.86);text-decoration:none;white-space:nowrap;
  transition:color var(--shd-t) var(--shd-ease)}
.shd-top a:hover{color:#fff}
.shd-top i{color:var(--shd-red);margin-right:.32rem}
.shd-top-l,.shd-top-r{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
@media(max-width:760px){ .shd-top-in{justify-content:center} .shd-top-r{display:none} }

/* ── main bar ── */
header.shd{position:sticky;top:0;z-index:70;background:#fff;
  border-bottom:1px solid var(--shd-line);box-shadow:none}
header.shd .shd-in{max-width:var(--shd-maxw);margin:0 auto;
  padding:.62rem var(--shd-pad);display:flex;align-items:center;
  gap:clamp(.5rem,1.4vw,1.1rem)}

header.shd .shd-logo{display:flex;align-items:center;flex:none}
header.shd .shd-logo img{height:38px;width:auto;display:block}

/* Search — capped rather than flex:1 so it stops dominating the bar and
   leaves room for the menu items. */
header.shd .shd-search{flex:0 1 clamp(160px,22vw,280px);min-width:0;
  display:flex;align-items:center;border:1px solid var(--shd-line-2);
  border-radius:999px;padding:.12rem .12rem .12rem .9rem;background:#fff;
  transition:border-color var(--shd-t) var(--shd-ease)}
header.shd .shd-search:focus-within{border-color:var(--shd-red)}
header.shd .shd-search input{flex:1;min-width:0;border:0;background:transparent;
  padding:.5rem .2rem;font:inherit;font-size:.86rem;color:var(--shd-ink)}
header.shd .shd-search input:focus{outline:none}
header.shd .shd-search button{flex:none;border:0;background:var(--shd-red);color:#fff;
  cursor:pointer;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;transition:background var(--shd-t) var(--shd-ease)}
header.shd .shd-search button:hover{background:var(--shd-red-dk)}

/* nav */
header.shd .shd-nav{display:flex;align-items:center;gap:clamp(.4rem,1vw,1rem);
  margin-left:auto;flex:none}
header.shd .shd-link{font-size:.84rem;font-weight:600;color:var(--shd-ink);
  text-decoration:none;white-space:nowrap;padding:.35rem .1rem;
  border-bottom:2px solid transparent;transition:color var(--shd-t) var(--shd-ease),
  border-color var(--shd-t) var(--shd-ease)}
header.shd .shd-link:hover{color:var(--shd-red)}
header.shd .shd-link.active{color:var(--shd-red);border-bottom-color:var(--shd-red)}

header.shd .shd-pill{display:inline-flex;align-items:center;gap:.32rem;
  background:var(--shd-red);color:#fff;border:0;border-radius:999px;
  padding:.55rem 1.05rem;font:inherit;font-size:.82rem;font-weight:600;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background var(--shd-t) var(--shd-ease)}
header.shd .shd-pill:hover{background:var(--shd-red-dk);color:#fff}

/* dropdown */
header.shd .shd-dd{position:relative}
header.shd .shd-menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:250px;
  background:#fff;border:1px solid var(--shd-line);border-radius:12px;
  box-shadow:0 18px 40px rgba(31,35,40,.15);padding:.35rem;display:none;z-index:5}
header.shd .shd-dd[data-open] .shd-menu{display:block}
header.shd .shd-menu a{display:block;padding:.58rem .78rem;border-radius:8px;
  font-size:.85rem;font-weight:500;color:var(--shd-ink);text-decoration:none;
  transition:background var(--shd-t) var(--shd-ease),color var(--shd-t) var(--shd-ease)}
header.shd .shd-menu a:hover{background:var(--shd-red-lo);color:var(--shd-red)}

/* burger — flex, not grid: a grid container stretches its rows and the bars drift apart */
header.shd .shd-burger{flex:none;width:40px;height:40px;border:0;background:transparent;
  cursor:pointer;padding:0;border-radius:8px;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background var(--shd-t) var(--shd-ease)}
header.shd .shd-burger:hover{background:var(--shd-red-lo)}
header.shd .shd-burger span{display:block;width:22px;height:2px;background:var(--shd-ink);
  border-radius:2px;transition:transform var(--shd-t) var(--shd-ease),opacity var(--shd-t) var(--shd-ease)}
header.shd .shd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.shd .shd-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
header.shd .shd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* slide-down panel */
header.shd .shd-panel{display:none;border-top:1px solid var(--shd-line);background:#fff}
header.shd .shd-panel[data-open]{display:block}
header.shd .shd-panel .in{max-width:var(--shd-maxw);margin:0 auto;
  padding:.5rem var(--shd-pad) 1rem;display:flex;flex-direction:column}
header.shd .shd-panel a{padding:.72rem .2rem;font-size:.93rem;font-weight:500;
  color:var(--shd-ink);text-decoration:none;border-bottom:1px solid var(--shd-line)}
header.shd .shd-panel a:last-child{border-bottom:0}
header.shd .shd-panel a:hover{color:var(--shd-red)}
header.shd .shd-panel .grp{font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--shd-grey);padding:.9rem .2rem .3rem}

/* Progressive collapse: links go first, then the dropdown, then search. */
@media(max-width:1180px){ header.shd .shd-link{display:none} header.shd .shd-burger{display:flex} }
@media(max-width:900px){ header.shd .shd-dd{display:none} }
@media(max-width:620px){
  header.shd .shd-search{display:none}
  header.shd .shd-logo img{height:32px}
  header.shd .shd-nav{margin-left:auto}
}
/* Search moves into the panel once it is hidden from the bar. */
header.shd .shd-panel .shd-search{display:none;flex:1 1 auto;margin:.6rem 0 .2rem}
@media(max-width:620px){ header.shd .shd-panel .shd-search{display:flex} }

/* ══════════ ENQUIRY MODAL ══════════
   Opened by any [data-enquire] element; ships with the header so it exists
   on every page.

   Layout is a fixed dark header + a scrolling body, rather than one scrolling
   box. On a phone the form is taller than the viewport, and when the whole
   card scrolled the title and close button rode away with it — you could end
   up mid-form with no visible way out.

   Every inner rule is scoped `.enq .enq-*`, not bare `.enq-*`. The modal is
   printed inside the page wrapper, so on the homepage it inherits `.vx h2`
   from home-v10.css — identical specificity to `.enq-top h2`, but that file
   loads later, so it won. The title rendered ink-on-ink and vanished into the
   dark band. The extra `.enq` puts modal rules out of reach of any page
   stylesheet that styles bare elements under a wrapper class. */
.enq-backdrop{position:fixed;inset:0;z-index:200;background:rgba(16,19,23,.62);
  backdrop-filter:blur(3px);animation:enqFade .22s var(--shd-ease) both}
.enq{position:fixed;z-index:201;top:50%;left:50%;
  width:min(580px,calc(100vw - 1.5rem));max-height:min(92vh,880px);
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:18px;
  box-shadow:0 2px 6px rgba(20,24,28,.08),0 34px 80px rgba(20,24,28,.4);
  animation:enqIn .34s var(--shd-ease) both}
.enq[hidden],.enq-backdrop[hidden]{display:none}
@keyframes enqFade{from{opacity:0}to{opacity:1}}
@keyframes enqIn{
  from{opacity:0;transform:translate(-50%,-46%) scale(.97)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .enq,.enq-backdrop{animation:none}
  .enq{transform:translate(-50%,-50%)}
}

/* ── dark header band ── */
.enq .enq-top{flex:none;position:relative;background:var(--shd-ink);color:#fff;
  padding:clamp(1.5rem,4vw,1.9rem) clamp(1.3rem,4vw,2rem) clamp(1.3rem,3.5vw,1.6rem);
  border-bottom:3px solid var(--shd-red)}
.enq .enq-eyebrow{display:inline-block;font-size:.63rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#ff9ea2;margin-bottom:.6rem}
.enq .enq-top h2{margin:0 0 .45rem;font-family:var(--f-display,Georgia,serif);
  font-size:clamp(1.55rem,4.4vw,1.95rem);line-height:1.15;font-weight:600;color:#fff}
.enq .enq-top p{margin:0;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.74);
  max-width:42ch}
.enq .enq-x{position:absolute;top:.85rem;right:.85rem;width:36px;height:36px;border:0;
  border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  display:grid;place-items:center;padding:0;
  transition:background var(--shd-t) var(--shd-ease),transform var(--shd-t) var(--shd-ease)}
.enq .enq-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.enq .enq-x:hover{background:var(--shd-red);transform:rotate(90deg)}

/* ── scrolling body ── */
.enq .enq-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 clamp(1.3rem,4vw,2rem) clamp(1.4rem,4vw,1.9rem)}

/* ── reassurance strip ── */
.enq .enq-trust{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;list-style:none;
  margin:0 -.2rem 1.35rem;padding:.85rem .2rem;border-bottom:1px solid var(--shd-line)}
.enq .enq-trust li{display:flex;align-items:center;gap:.4rem;font-size:.76rem;
  font-weight:600;color:var(--shd-grey);white-space:nowrap}
.enq .enq-trust svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--shd-red);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── form ── */
.enq .enq-form{display:flex;flex-direction:column;gap:1rem}
.enq .enq-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){ .enq .enq-row{grid-template-columns:1fr} }
.enq .enq-f{display:block}
/* Sentence case at 400/600 weight. Seven stacked ALL-CAPS letterspaced labels
   shouted over the heading and made a short form look like paperwork. */
.enq .enq-lb{display:block;font-size:.79rem;font-weight:600;color:var(--shd-ink);
  margin-bottom:.34rem;letter-spacing:0;text-transform:none}
.enq .enq-lb b{color:var(--shd-red);font-weight:600}
.enq .enq-lb em{font-style:normal;font-weight:400;color:var(--shd-grey);font-size:.74rem}

.enq .enq-form input,.enq .enq-form select,.enq .enq-form textarea{width:100%;
  font:inherit;font-size:.92rem;font-weight:400;color:var(--shd-ink);background:#fff;
  border:1px solid var(--shd-line-2);border-radius:10px;padding:.72rem .85rem;
  transition:border-color var(--shd-t) var(--shd-ease),box-shadow var(--shd-t) var(--shd-ease)}
.enq .enq-form textarea{resize:vertical;min-height:84px;line-height:1.6}
/* Placeholders were inheriting the input's colour and weight, so hint text read
   as an already-filled value — the form looked pre-populated. */
.enq .enq-form ::placeholder{color:#9aa0a6;font-weight:400;opacity:1}
.enq .enq-form input:focus,.enq .enq-form select:focus,.enq .enq-form textarea:focus{
  outline:none;border-color:var(--shd-red);box-shadow:0 0 0 3px rgba(238,48,56,.14)}

/* phone: real +91 prefix inside the field */
.enq .enq-tel{display:flex;align-items:stretch;border:1px solid var(--shd-line-2);
  border-radius:10px;overflow:hidden;background:#fff;
  transition:border-color var(--shd-t) var(--shd-ease),box-shadow var(--shd-t) var(--shd-ease)}
.enq .enq-tel i{flex:none;display:grid;place-items:center;padding:0 .7rem;font-style:normal;
  font-size:.88rem;font-weight:600;color:var(--shd-grey);background:#f4f5f7;
  border-right:1px solid var(--shd-line)}
.enq .enq-tel input{border:0!important;border-radius:0!important;box-shadow:none!important}
.enq .enq-tel:focus-within{border-color:var(--shd-red);box-shadow:0 0 0 3px rgba(238,48,56,.14)}

/* select: custom caret so it stops looking like a raw OS control */
.enq .enq-sel{position:relative;display:block}
.enq .enq-sel::after{content:"";position:absolute;right:.95rem;top:50%;width:8px;height:8px;
  margin-top:-6px;border-right:2px solid var(--shd-grey);border-bottom:2px solid var(--shd-grey);
  transform:rotate(45deg);pointer-events:none}
.enq .enq-sel select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer}

/* honeypot — off-screen rather than display:none, which some bots detect */
.enq .enq-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}

.enq .enq-submit{position:relative;margin-top:.35rem;border:0;border-radius:12px;
  background:var(--shd-red);color:#fff;font:inherit;font-size:.98rem;font-weight:600;
  letter-spacing:.01em;padding:.95rem 1.6rem;cursor:pointer;
  box-shadow:0 6px 16px rgba(238,48,56,.28);
  transition:background var(--shd-t) var(--shd-ease),transform var(--shd-t) var(--shd-ease),
    box-shadow var(--shd-t) var(--shd-ease)}
/* arrow is a pseudo-element: the submit handler swaps the label with
   .textContent, which would wipe out a real child node */
.enq .enq-submit::after{content:"→";margin-left:.5rem;display:inline-block;
  transition:transform var(--shd-t) var(--shd-ease)}
.enq .enq-submit:hover:not(:disabled){background:var(--shd-red-dk);transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(238,48,56,.34)}
.enq .enq-submit:hover:not(:disabled)::after{transform:translateX(3px)}
.enq .enq-submit:disabled{opacity:.62;cursor:default;box-shadow:none}
.enq .enq-submit:disabled::after{display:none}
@media(prefers-reduced-motion:reduce){ .enq .enq-submit,.enq .enq-submit::after,.enq .enq-x{transition:none} }

.enq .enq-note{margin:0;font-size:.79rem;color:var(--shd-grey);text-align:center;line-height:1.5}
.enq .enq-note.err{color:var(--shd-red);font-weight:600}

/* fallback for people who would rather not fill a form */
.enq .enq-alt{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.35rem .9rem;padding-top:1rem;margin-top:.15rem;border-top:1px solid var(--shd-line);
  font-size:.82rem;color:var(--shd-grey)}
.enq .enq-alt a{color:var(--shd-ink);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--shd-line-2);
  transition:color var(--shd-t) var(--shd-ease),border-color var(--shd-t) var(--shd-ease)}
.enq .enq-alt a:hover{color:var(--shd-red);border-bottom-color:var(--shd-red)}
.enq .enq-alt a.wa:hover{color:#1faa53;border-bottom-color:#1faa53}

/* ── success state ── */
.enq .enq-done{text-align:center;padding:1.8rem .5rem 1rem}
.enq .enq-done::before{content:"✓";display:grid;place-items:center;width:52px;height:52px;
  margin:0 auto 1rem;border-radius:50%;background:var(--shd-red-lo);color:var(--shd-red);
  font-size:1.5rem;font-weight:700}
.enq .enq-done strong{display:block;font-family:var(--f-display,Georgia,serif);
  font-size:1.25rem;font-weight:600;color:var(--shd-ink);margin-bottom:.55rem}
.enq .enq-done p{margin:0;font-size:.9rem;color:var(--shd-grey);line-height:1.7}
.enq .enq-done a{color:var(--shd-red);font-weight:600}