/* =========================================================
   AXVENTIC LIFESCIENCES MAIN STYLESHEET
   Brand: #445CA5 blue · #2B2A29 black · #D42326 red
   Fonts: Plus Jakarta Sans (headings) + Inter (body)
   ========================================================= */

:root{
  --blue:#445CA5;--blue-dk:#33457C;--blue-dp:#1E2A4E;--blue-lt:#EEF1F9;--blue-mid:#8296D6;
  --ink:#2B2A29;--red:#D42326;--red-dk:#A81A1D;--red-lt:#FDEDED;
  --grey:#65696F;--line:#E3E7F0;--soft:#F5F7FB;
  --h:'Plus Jakarta Sans',sans-serif;--b:'Inter',sans-serif;
  --shadow:0 6px 26px rgba(30,42,78,.09);--shadow-lg:0 20px 55px rgba(30,42,78,.18);
  --secpad:80px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--b);color:var(--ink);line-height:1.72;font-size:15.5px;background:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;letter-spacing:-.002em}
/* text-wrap:balance evens out the line lengths instead of filling each line to
   the edge and dropping whatever is left onto the last one. It is what stops
   "Committed to Quality Healthcare Across India" breaking with "India" alone
   on its own line at certain widths. The browser applies it to short blocks
   only, which is exactly what headings are. Older browsers ignore it and wrap
   as before, so there is nothing to fall back to. */
h1,h2,h3,h4,h5{font-family:var(--h);line-height:1.24;font-weight:700;letter-spacing:-.018em;
  text-wrap:balance}
/* Body copy gets "pretty" instead: it leaves the line breaks alone and only
   prevents a single word being stranded on the final line. */
p,.stitle p,.slide p{text-wrap:pretty}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1250px;margin:0 auto;padding:0 24px}
/* Section rhythm. Driven by one variable so every section, and anything that
   borrows the value, steps down together at each breakpoint. */
.sec{padding:var(--secpad) 0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;z-index:999;padding:12px 20px;background:var(--red);color:#fff;font-family:var(--h);font-weight:600}
.skip-link:focus{left:12px;top:12px}

.stitle{text-align:center;margin-bottom:56px}
.stitle .sub,.pcd .sub{text-wrap:balance}
.stitle .sub{font-family:var(--h);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.stitle h2{font-size:clamp(27px,3.6vw,42px);color:var(--blue-dp);margin-bottom:18px;display:inline-block;padding-bottom:18px;position:relative}
.stitle h2::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:76px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--blue-dk) 0%,var(--blue) 58%,var(--red) 100%)}
/* Section intro copy.
   Every one of these is written to land on two lines inside the 690px cap. The
   min-height holds two lines open regardless, so if someone later edits one
   down to a single line the gap below the heading does not jump. Expressed in
   em, so it follows the font size down at each breakpoint. */
.stitle p{color:var(--grey);max-width:690px;margin:0 auto;font-size:16px;
  line-height:1.65;min-height:3.3em}
.stitle.lft{text-align:left}.stitle.lft h2::after{left:0;transform:none}.stitle.lft p{margin:0}

/* Buttons.
   Trimmed from 15px/32px padding at 14.5px type. line-height is pinned at 1.35
   because the inherited body value of 1.72 was adding roughly 6px of invisible
   height inside every button. The result is about 46px tall, which stays above
   the 44px minimum a finger needs on a touch screen. */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 26px;font-family:var(--h);font-weight:600;font-size:14px;line-height:1.35;border-radius:4px;transition:.3s;border:2px solid transparent;cursor:pointer;letter-spacing:.01em}
.btn svg{flex:none}
.btn-p{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;box-shadow:0 8px 22px rgba(68,92,165,.32)}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(68,92,165,.42);color:#fff}
.btn-r{background:linear-gradient(135deg,var(--red),var(--red-dk));color:#fff;box-shadow:0 8px 22px rgba(212,35,38,.3)}
.btn-r:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(212,35,38,.4);color:#fff}
.btn-gw{border-color:rgba(255,255,255,.75);color:#fff}.btn-gw:hover{background:#fff;color:var(--blue-dp)}
.btn-ob{border-color:var(--blue);color:var(--blue)}.btn-ob:hover{background:var(--blue);color:#fff}
.dia{position:absolute;transform:rotate(45deg);border-radius:6px;pointer-events:none}

/* ---------------------------------------------------------------
   Icon tiles: one hover rule for the whole site.
   Hovering a card turns its icon tile red with a white glyph, so the
   interaction reads the same in every section.
   --------------------------------------------------------------- */
.wcard:hover .wi,
.seg:hover .si,
.pb:hover .pi,
a.ci:hover .ci-ic,
.cnt:hover .cnt-ic{background:var(--red);border-color:var(--red)}
/* Reach Us has no tile behind the glyph, so only the stroke changes. */
.f-contact li:hover .fc-ic{color:var(--red)}

/* Tick marker used by every bulleted list on the site. Defined once: it had
   drifted to 28px, 26px and 24px in three different places, and at those sizes
   a diamond beside a 14px line of text reads as a button rather than a bullet.
   The glyph is counter-rotated so only the box sits at 45 degrees. */
.tk{width:20px;height:20px;flex:none;background:var(--blue);border-radius:3px;display:grid;
  place-items:center;margin-top:2px;transform:rotate(45deg)}
.tk svg{transform:rotate(-45deg)}

.wi,.si,.pi,.ci-ic,.fc-ic,.cnt-ic{transition:background .28s,border-color .28s,box-shadow .28s}
.wi svg,.si svg,.pi svg,.ci-ic svg,.fc-ic svg,.cnt-ic svg{transition:stroke .28s,color .28s}

.wcard:hover .wi svg,
.seg:hover .si svg,
.pb:hover .pi svg,
a.ci:hover .ci-ic svg,
.cnt:hover .cnt-ic svg{stroke:#fff;color:#fff}
.f-contact li:hover .fc-ic svg{stroke:var(--red)}

/* ================= TOP BAR + HEADER ================= */
.topbar{background:linear-gradient(90deg,var(--blue-dp),var(--blue-dk));color:#fff;font-size:12.6px;padding:0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;min-height:42px}
.topbar ul{list-style:none;display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:0;padding:0}
.topbar li{display:inline-flex;align-items:center;gap:9px;line-height:1;opacity:.92;letter-spacing:.01em}
/* Small filled badge reads far better than a bare 13px stroke tick. */
.topbar li .tb-ic{width:16px;height:16px;border-radius:50%;background:var(--red);display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 3px rgba(212,35,38,.22)}
.topbar li .tb-ic svg{display:block;color:#fff;margin:0}
.topbar .tb-mail{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#fff;line-height:1}
.topbar .tb-mail svg{display:block;color:var(--red);flex:none}
.topbar .tb-mail:hover{color:var(--blue-mid)}
.topbar .tb-mail:hover svg{color:#fff}
.site-header{position:sticky;top:0;z-index:70;background:#fff;box-shadow:0 2px 22px rgba(30,42,78,.09)}
.nav{display:flex;align-items:center;height:88px;gap:18px}
.logo img{height:52px;width:auto}
/* The bar holds three things: logo, menu, actions. With space-between the menu
   landed in the middle of the header. An auto left margin soaks up the free
   space instead, so the logo stays left and the menu sits against the CTA. */
.menu{display:flex;list-style:none;gap:1px;align-items:center;margin:0 0 0 auto;padding:0}
.nav-actions{display:flex;gap:12px;align-items:center;flex:none}
.nav-cta{padding:10px 20px;font-size:13.6px}
.menu li{position:relative}
.menu>li>a{font-family:var(--h);font-weight:600;font-size:14.6px;padding:32px 14px;display:block;letter-spacing:-.005em;position:relative;transition:.25s;color:var(--blue-dp);white-space:nowrap}
.menu>li>a::after{content:"";position:absolute;bottom:26px;left:14px;right:14px;height:3px;background:var(--red);border-radius:3px;transform:scaleX(0);transition:.25s}
.menu>li>a:hover{color:var(--red)}
.menu>li>a:hover::after,.menu>li.current-menu-item>a::after,.menu>li.current_page_item>a::after{transform:scaleX(1)}
.menu>li.current-menu-item>a,.menu>li.current_page_item>a{color:var(--red)}
.menu .sub-menu{position:absolute;top:100%;left:0;min-width:230px;background:#fff;box-shadow:var(--shadow-lg);border-radius:0 0 6px 6px;padding:8px 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:.26s;z-index:20}
.menu li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu .sub-menu a{display:block;padding:11px 20px;font-family:var(--h);font-size:13.4px;font-weight:500;color:var(--blue-dp);transition:.2s}
.menu .sub-menu a:hover{background:var(--blue-lt);color:var(--red);padding-left:25px}
.burger{display:none;background:var(--blue);border:none;border-radius:5px;padding:12px 13px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
.burger span+span{margin-top:5px}
/* ---------------------------------------------------------------
   Mobile drawer

   Fixed, so it sits over the page instead of pushing it down. The panel is
   a column: header, scrollable links, pinned footer. Only the link list
   scrolls, so the call to action stays reachable however long the menu gets.
   --------------------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:120}
.drawer[hidden]{display:none}
.drawer-back{position:absolute;inset:0;background:rgba(14,16,22,.55);opacity:0;
  transition:opacity .3s;-webkit-tap-highlight-color:transparent}
.drawer.is-open .drawer-back{opacity:1}

.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);
  background:#fff;box-shadow:-14px 0 40px rgba(30,42,78,.22);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.8,.3,1)}
.drawer.is-open .drawer-panel{transform:none}

.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:none}
.drawer-logo img{height:38px;width:auto}
.drawer-x{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--blue-dp);display:grid;place-items:center;cursor:pointer;transition:.22s}
.drawer-x:hover{background:var(--red);border-color:var(--red);color:#fff}

/* The only scrolling region, so the footer below never drifts off screen. */
.drawer-nav{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0}
.drawer-list,.drawer-list .sub-menu{list-style:none;margin:0;padding:0}
.drawer-list a{display:block;font-family:var(--h);font-weight:600;font-size:15.4px;
  color:var(--blue-dp);padding:14px 18px;border-bottom:1px solid var(--line);transition:.2s}
.drawer-list a:hover{background:var(--blue-lt);color:var(--red);padding-left:24px}
.drawer-list>li.current-menu-item>a,
.drawer-list>li.current_page_item>a{color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
.drawer-list .sub-menu a{padding-left:34px;font-weight:500;font-size:14.2px;color:var(--grey)}

.drawer-foot{flex:none;padding:18px;border-top:1px solid var(--line);background:var(--soft)}
.drawer-cta{width:100%;justify-content:center;padding:13px 20px}
.drawer-mail{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13.4px;
  color:var(--blue);word-break:break-all}
.drawer-mail svg{flex:none;color:var(--red)}
.drawer-note{margin-top:12px;font-size:11.6px;line-height:1.6;color:var(--grey)}

/* Scroll lock. Applied to <html> while the drawer is open. */
.axv-lock,.axv-lock body{overflow:hidden}

/* ================= HERO SLIDER ================= */
/* Height is capped by the viewport, not just by a fixed number.
   A 1366x768 notebook has roughly 640 usable pixels after browser chrome, so a
   flat 660px hero would fill the screen and hide the fact that the page
   continues. svh is the small viewport height, which ignores the collapsing
   mobile address bar and so does not jump while scrolling. */
.hero{position:relative;height:660px;height:clamp(460px,calc(100svh - 130px),660px);
  overflow:hidden;background:#0E1016}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;display:grid;place-items:center}
.slide.on{opacity:1}
.slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 7s ease}
.slide.on .bg{transform:scale(1)}
/* Neutral scrim, not a blue wash: the photograph keeps its own colour and the
   overlay only does what it has to do, which is keep the text readable. */
.slide::after{content:"";position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(60% 70% at 50% 50%,rgba(14,16,22,.62) 0%,transparent 100%),
    linear-gradient(100deg,rgba(14,16,22,.8) 0%,rgba(14,16,22,.62) 48%,rgba(14,16,22,.48) 100%)}
.slide .wrap{position:relative;z-index:4;text-align:center;color:#fff}
.slide .tg{display:inline-block;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);padding:8px 22px;border-radius:100px;font-family:var(--h);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px;backdrop-filter:blur(6px)}
/* The client wants the tagline on one line, so the size is capped to what the
   longest headline needs and wrapping is only allowed on narrow screens. */
.slide .slide-title{font-family:var(--h);font-size:clamp(26px,4.4vw,54px);font-weight:800;line-height:1.16;
  text-wrap:balance;
  margin-bottom:20px;color:#fff;white-space:nowrap;
  text-shadow:0 2px 4px rgba(0,0,0,.35),0 6px 30px rgba(0,0,0,.5)}
.slide .slide-title span{color:#fff}
.slide p{font-size:17.5px;color:#fff;max-width:730px;margin:0 auto 34px;
  text-shadow:0 2px 4px rgba(0,0,0,.4),0 4px 20px rgba(0,0,0,.45)}
.slide .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .dia1{width:300px;height:300px;background:rgba(255,255,255,.05);top:-90px;right:7%;z-index:3}
.hero .dia2{width:180px;height:180px;background:rgba(255,255,255,.05);bottom:-58px;left:5%;z-index:3}
.hero .dia3{width:120px;height:120px;border:2px solid rgba(255,255,255,.16);top:20%;left:10%;z-index:3}
.dots{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:8}
.dots .dot{width:11px;height:11px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s;display:block}
.dots .dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dots .dot.on{background:var(--red);width:34px;border-radius:6px}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.28s;backdrop-filter:blur(6px)}
.arrow:hover{background:var(--red);border-color:var(--red)}
.arrow.pv{left:22px}.arrow.nx{right:22px}

/* ================= PAGE HEADER (inner pages) ================= */
.phead{position:relative;overflow:hidden;background:var(--blue-dp);color:#fff;padding:74px 0}
.phead .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(30,42,78,.93),rgba(68,92,165,.72));z-index:2}
.phead .dia1{width:280px;height:280px;background:rgba(255,255,255,.05);top:-110px;right:6%;z-index:3}
.phead .wrap{position:relative;z-index:4}
.phead .phead-title{font-family:var(--h);font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.2;margin-bottom:12px;color:#fff;text-wrap:balance}
.crumbs{font-size:13.4px;opacity:.8;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.crumbs a:hover{color:var(--red)}
.crumbs span{opacity:.55}

/* ================= COUNTERS ================= */
/* Compact strip: icon and figure sit side by side so the band stays short. */
.counters{background:linear-gradient(115deg,var(--blue-dp) 0%,var(--blue-dk) 52%,var(--blue) 100%);
  color:#fff;position:relative;overflow:hidden}
.counters::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 55%,rgba(255,255,255,.05) 100%);pointer-events:none}
.counters .wrap{position:relative;z-index:2;padding-block:25px}

.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
/* Dividers are keyed to the column count. :first-child only ever clears the
   very first cell, which is right for one row and wrong for every other
   layout, so each breakpoint restates the rule for its own grid. */
.cnt{display:flex;align-items:center;gap:15px;padding:8px 26px;border-left:1px solid rgba(255,255,255,.15)}
.cnt:nth-child(4n+1){border-left:none;padding-left:0}
.cnt:nth-child(4n){padding-right:0}

.cnt-ic{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16)}
.cnt-txt{display:block;min-width:0}
.cnt-num{display:flex;align-items:baseline;font-family:var(--h);font-size:30px;font-weight:800;
  line-height:1;letter-spacing:-.035em;margin-bottom:4px}
.cnt-num .num{font:inherit;letter-spacing:inherit}
.cnt-num .plus{font-style:normal;font-size:.62em;font-weight:800;margin-left:1px;
  letter-spacing:inherit;line-height:1;opacity:.8}
.cnt-label{display:block;font-family:var(--h);font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;line-height:1.35;opacity:.72}

/* ================= ABOUT ================= */
/* Stretch, not centre. The text column sets the row height; the visual fills
   it, so both columns start and finish on the same line. Centring left a band
   of dead space above and below the image. */
.about{display:grid;grid-template-columns:1fr 1.08fr;gap:70px;align-items:stretch}
.about>div>p{text-align:justify}
.ab-vis{position:relative;padding:0 34px 46px 0;display:flex}
.ab-main{flex:1;min-height:430px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.ab-main img{width:100%;height:100%;object-fit:cover}
.ab-main::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(30,42,78,.18),rgba(68,92,165,.28))}
.ab-sub{position:absolute;right:0;bottom:0;width:54%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:7px solid #fff;box-shadow:var(--shadow-lg)}
.ab-sub img{width:100%;height:100%;object-fit:cover}
.ab-badge{position:absolute;left:-16px;top:32px;background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;border-radius:8px;padding:18px 22px;text-align:center;box-shadow:var(--shadow-lg);z-index:4}
.ab-badge b{font-family:var(--h);font-size:30px;font-weight:800;display:block;line-height:1}
.ab-badge span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.ablist{list-style:none;display:grid;gap:18px;margin-top:26px}
.ablist li{display:flex;gap:15px;align-items:flex-start}
.ablist b{font-family:var(--h);color:var(--blue-dp);font-size:15.5px;display:block;margin-bottom:2px}
.ablist span{color:var(--grey);font-size:14.5px;line-height:1.62;text-align:justify;display:block}

/* ================= WHY ================= */
.why{background:var(--soft);position:relative;overflow:hidden}
.why .dia1{width:340px;height:340px;background:rgba(68,92,165,.05);top:-140px;right:-90px}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:2}
.wcard{background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:.35s;border-bottom:4px solid transparent}
.wcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-bottom-color:var(--red)}
.wimg{aspect-ratio:16/9;overflow:hidden;position:relative}
.wimg img{width:100%;height:100%;object-fit:cover;transition:.5s}
.wcard:hover .wimg img{transform:scale(1.07)}
.wimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,42,78,.1),rgba(30,42,78,.42))}
/* The icon sits in .wbody, not .wimg: .wimg has overflow:hidden to contain the
   image zoom, which would clip a negatively-positioned child. */
.wbody{padding:44px 26px 30px;position:relative}
.wbody .wi{position:absolute;top:-28px;left:26px;width:56px;height:56px;background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-radius:8px;display:grid;place-items:center;z-index:3;box-shadow:0 8px 20px rgba(30,42,78,.28);transition:.35s}
.wcard:hover .wbody .wi{background:var(--red);box-shadow:0 8px 20px rgba(212,35,38,.32)}
.wbody h4{font-size:19px;color:var(--blue-dp);margin-bottom:10px}
.wbody p{font-size:14.5px;color:var(--grey)}

/* ---------------------------------------------------------------
   Certificates

   The frame is 7:10, the exact proportion of the scans, so the page lands in it
   corner to corner. Nothing is cropped off the edges and there is no grey
   margin down the sides either. Every other ratio tried here traded one of
   those away: 4:3 cut the bottom off the document, square left it floating in a
   band of surface.

   Height is the price of that, and it is worth paying. These are the documents
   the whole section exists to show; shrinking them to fit a tidier row is
   solving the wrong problem.

   What keeps it from becoming a wall is the cap on the column, not the ratio.
   The cards stop growing at 330px and the row centres itself in the page
   instead of stretching to fill it, which reads as a deliberate measure rather
   than three panels pushed as wide as they will go.
   --------------------------------------------------------------- */
.cgrid-certs{display:grid;grid-template-columns:repeat(3,minmax(0,330px));
  justify-content:center;gap:28px;align-items:stretch}

/* Soft, deep, close to the surface. A single flat shadow is the giveaway of an
   older card; two layers, one tight and one wide and heavily offset, is what
   makes it sit on the page rather than hover above it. */
.cert{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(30,42,78,.05),0 14px 30px -20px rgba(30,42,78,.4);
  transition:transform .32s,box-shadow .32s,border-color .32s}
.cert:hover{transform:translateY(-5px);border-color:#C3CDE6;
  box-shadow:0 2px 4px rgba(30,42,78,.06),0 30px 56px -24px rgba(30,42,78,.5)}

.cert-shot{position:relative;aspect-ratio:7/10;background:#fff;overflow:hidden;cursor:zoom-in}
.cert-shot img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .55s}
.cert:hover .cert-shot img{transform:scale(1.03)}
/* A hairline where the page ends, so the document meets the text on an edge
   instead of dissolving into it. Drawn over the image, hence the pseudo. */
.cert-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line)}

.cert-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.cert-body h4{font-size:17.5px;letter-spacing:-.012em;color:var(--blue-dp);
  margin-bottom:8px;line-height:1.28}
/* Held to two lines' worth whether it fills them or not. The ISO scope runs to
   two lines and the other two fit on one, which left everything below it
   sitting at a different height on every card. */
.cert-scope{font-size:13.2px;line-height:1.62;color:var(--grey);margin-bottom:14px;
  min-height:calc(2 * 1.62em)}
/* The issuer line and the reference pill used to live between the scope and the
   button. Both are printed on the certificate itself, so on the card they were
   the same fact twice over, and between them they were the longest thing in the
   block. The markup for them is gone from the template, and so are their rules. */
.cert-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;
  align-items:stretch}

/* Filled, not outlined. This is the one thing the card is asking to be pressed,
   and an outline button under a document the visitor cannot read is too quiet
   to be the answer to it. Red on hover, the same as the search button. */
.cert-view{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:10px;border:none;cursor:pointer;
  font-family:var(--h);font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));transition:.25s}
.cert-view:hover{background:linear-gradient(135deg,var(--red),var(--red-dk));
  box-shadow:0 8px 18px rgba(212,35,38,.26)}

/* Lightbox */
.cert-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:28px}
.cert-modal[hidden]{display:none}
.cert-modal-back{position:absolute;inset:0;background:rgba(14,16,22,.8);cursor:zoom-out}
.cert-modal-box{position:relative;z-index:2;display:flex;flex-direction:column;
  width:100%;max-width:820px;max-height:calc(100svh - 56px);
  background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lg)}
.cert-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex:none}
.cert-modal-head b{font-family:var(--h);font-size:14.6px;color:var(--blue-dp)}
.cert-modal-x{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--blue-dp);display:grid;place-items:center;cursor:pointer;transition:.22s}
.cert-modal-x:hover{background:var(--red);border-color:var(--red);color:#fff}
/* Only the image area scrolls, so the title and close button stay put while a
   tall scan is read. */
.cert-modal-img{flex:1;min-height:0;overflow:auto;background:var(--soft);padding:18px;
  display:grid;place-items:start center}
.cert-modal-img img{max-width:100%;height:auto;display:block;border-radius:4px;
  box-shadow:0 6px 20px rgba(30,42,78,.16)}

/* Fit mode, set by the script when the opener carries data-cert-fit.
   Used by product photographs. The scrolling above is right for a certificate,
   which is a page of text opened to be read; a packshot is opened to be looked
   at, and a square photograph you have to scroll to see the bottom of has been
   shown at the wrong size. Here the whole picture is sized to the panel. */
.cert-modal.is-fit .cert-modal-img{overflow:hidden;place-items:center;background:#fff}
.cert-modal.is-fit .cert-modal-img img{max-height:100%;width:auto;height:auto;
  object-fit:contain;box-shadow:none}

/* ================= SEGMENTS ================= *//* ================= SEGMENTS ================= *//* ================= SEGMENTS ================= */
.segs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.seg{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 22px;transition:.35s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.seg::before{content:"";position:absolute;inset:auto 0 0 0;height:0;background:linear-gradient(135deg,var(--blue-dp),var(--blue));transition:.35s;z-index:0}
.seg:hover::before{height:100%}
.seg>*{position:relative;z-index:2;transition:.35s}
.seg .si{width:52px;height:52px;background:var(--blue-lt);border-radius:8px;display:grid;place-items:center;margin-bottom:15px}
.seg:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.seg:hover .si{background:var(--red)}
.seg:hover .si svg{stroke:#fff}
.seg:hover h4{color:#fff}
.seg h4{font-size:16.5px;color:var(--blue-dp);margin:0;line-height:1.35}

/* ================= PRODUCTS ================= */
.prods{background:var(--soft)}
.tabs{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:44px;background:#fff;border-radius:6px;padding:6px;box-shadow:var(--shadow);width:fit-content;margin-inline:auto;max-width:100%;gap:2px}
.tab{padding:10px 18px;font-family:var(--h);font-size:13.2px;font-weight:600;color:var(--grey);cursor:pointer;border:none;background:none;border-radius:4px;transition:.25s;white-space:nowrap}
.tab:hover{color:var(--blue)}
.tab.on{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pgrid.is-loading{opacity:.35;pointer-events:none;transition:.2s}
.pcard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column}
/* Square, because that is how product photography is shot and how the client
   is supplying it: 2000x2000. A 4:3 frame took a square photograph and threw
   away the top and the bottom of it. */
.pimg{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--blue-lt);display:block}
.pimg img{width:100%;height:100%;object-fit:cover;transition:.5s}

/* A real photograph fills the frame, on white.
   No padding. The packshots already carry their own white margin around the
   pack, so adding 18px more only widened a gap that was in the file to begin
   with, and it read as the image failing to fill its box.
   contain rather than cover so nothing is ever cut: the files are square and a
   square image in a square frame fills it exactly either way, but the day a
   photograph arrives that is not square, contain shows all of it and cover
   would quietly trim the edges.
   The stock placeholders keep cover: they are landscape scenes, not packshots,
   and letterboxing those inside a square frame would look like a fault. */
.pimg-photo{background:#fff}
.pimg-photo img{object-fit:contain}
/* Lift and zoom only where there is a pointer. On a touch screen :hover latches
   on after a tap and stays there, so a card was left sitting 6px above its
   neighbours with no way to put it back. Worst in the carousel, where the swipe
   itself starts on top of a card. */
@media (hover:hover) and (pointer:fine){
  .pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
  .pcard:hover .pimg img{transform:scale(1.07)}
}
/* Waiting on its photograph: no link, so no pointer and no hover lift either.
   The card is still a card, it just does not pretend to lead anywhere. */
.pimg-soon{cursor:default}
.pcard-soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
/* Says why the picture is generic, in the same corner the dosage form sits in
   on the opposite side. Without it a stock photo of loose tablets just looks
   like the wrong photograph rather than a placeholder. */
/* No backdrop-filter on either of these two, and the colours are now opaque.
   This is what was softening the product photographs.
   A backdrop-filter makes the browser take everything painted behind the
   element, the photograph included, and render it into a texture it can blur.
   That texture is rasterised once, and not always at the screen's pixel
   density, so the whole picture came out slightly soft. Hovering applied a
   transform to the same subtree, the layer was invalidated and re-rasterised at
   the right scale, and the image visibly snapped into focus. That is the "sharp
   on hover, blurry otherwise" effect exactly.
   Nothing is lost by dropping it. Both labels already sat on a 92 to 94 percent
   background, so there was almost no backdrop showing through to blur. */
.psoon{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;
  background:#fff;color:var(--blue-dp);border:1px solid var(--line);
  padding:7px 10px;border-radius:5px;font-family:var(--h);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;z-index:3}

.ptag{position:absolute;top:12px;left:12px;background:var(--blue-dp);color:#fff;
  padding:5px 11px;border-radius:5px;font-family:var(--h);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;z-index:3}

/* Composition is not shown here, so every card is the same height and the
   enquiry buttons line up across the whole grid. */
.pbody{padding:20px;flex:1;display:flex;flex-direction:column;text-align:center}
.ptitle{font-size:17.5px;color:var(--blue-dp);margin-bottom:8px;line-height:1.3}
.ptitle a:hover{color:var(--blue)}
.pseg{display:block;font-family:var(--h);font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);opacity:.8;line-height:1.5;margin-bottom:18px}
.pfoot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.pmeta{display:none}
.p-enq{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:11px 16px;border-radius:8px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--h);font-size:13px;font-weight:700;color:var(--blue);letter-spacing:-.005em;
  transition:background .22s,border-color .22s,color .22s,box-shadow .22s}
.p-enq svg{transition:transform .22s}
.p-enq:hover{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 16px rgba(212,35,38,.26)}
.p-enq:hover svg{transform:translateX(3px)}
.no-res{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--grey);font-size:15px}

/* Archive filter card: search across the top, then segment and dosage form.
   The search field used to sit outside the card, full page width, which made
   it look like part of the page header rather than part of the filtering. */
.pfilter{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:end;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow)}
.pf-search{grid-column:1/-1;display:flex;flex-direction:column;min-width:0;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.pf-field{display:flex;flex-direction:column;min-width:0}
.pf-lbl,
.pf-field label{font-family:var(--h);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-dp);margin-bottom:8px}
.pf-field select{width:100%;height:48px;padding:0 40px 0 15px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--b);font-size:14.4px;color:var(--ink);background-color:#FAFBFD;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2365696F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;transition:.22s}
.pf-field select:focus{outline:none;border-color:var(--blue);background-color:#fff;box-shadow:0 0 0 3px rgba(68,92,165,.12)}
.pf-reset{height:46px;padding:0 20px;border-radius:8px;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  font-family:var(--h);font-size:13.4px;font-weight:700;color:var(--grey);transition:.22s}
.pf-reset:hover{border-color:var(--red);color:var(--red)}
.pf-count{margin:22px 0 26px;font-size:14px;color:var(--grey)}
.pf-count b{color:var(--blue-dp);font-family:var(--h);font-weight:700}
.pf-more{text-align:center;margin-top:44px}
.pf-more[hidden]{display:none}
.pf-more .btn.is-loading{opacity:.6;pointer-events:none}

/* ================= PCD ================= */
.pcd{position:relative;overflow:hidden;color:#fff}
.pcd .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.pcd::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(30,42,78,.96) 0%,rgba(51,69,124,.92) 48%,rgba(68,92,165,.8) 100%);z-index:2}
.pcd .dia1{width:420px;height:420px;background:rgba(255,255,255,.05);top:-180px;right:-100px;z-index:3}
.pcd .dia2{width:260px;height:260px;background:rgba(255,255,255,.06);bottom:-140px;left:4%;z-index:3}
.pcd .wrap{position:relative;z-index:5;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding-block:var(--secpad)}
/* White for the same contrast reason as the enquiry band. */
.pcd .sub{font-family:var(--h);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.pcd h2{font-size:clamp(27px,3.5vw,42px);margin-bottom:18px;color:#fff}
.pcd-intro{opacity:.92;font-size:16.4px;margin-bottom:32px;max-width:530px}
.pben{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pb{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:24px;backdrop-filter:blur(10px);transition:.3s}
.pb:hover{background:rgba(255,255,255,.18);transform:translateY(-5px)}
.pb .pi{transition:background .3s}
.pb .pi{width:44px;height:44px;background:rgba(255,255,255,.16);border-radius:6px;display:grid;place-items:center;margin-bottom:14px}
.pb b{font-family:var(--h);font-size:15.5px;display:block;margin-bottom:5px}
.pb span{font-size:13px;opacity:.85;line-height:1.55}

/* ================= QUALITY ================= */
/* The reference-number pill was declared a second time here, with different
   padding, and being later in the file it quietly won. One copy now, up with
   the rest of the certificate card. */

/* ================= TESTIMONIALS ================= */
.testi{background:var(--soft)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tcard{background:#fff;border-radius:8px;padding:34px 30px;box-shadow:var(--shadow);transition:.35s}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tcard .q{font-family:var(--h);font-size:60px;font-weight:800;color:var(--blue-lt);line-height:.62;margin-bottom:16px}
.tcard p{font-size:14.4px;color:var(--grey);font-style:italic;margin-bottom:22px}
.tauth{display:flex;gap:14px;align-items:center;padding-top:18px;border-top:1px solid var(--line)}
.tav{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;display:grid;place-items:center;font-family:var(--h);font-weight:700;font-size:18px;flex:none}
.tauth b{font-family:var(--h);font-size:14.4px;display:block;color:var(--blue-dp)}
.tauth span{font-size:12.4px;color:var(--grey)}

/* ================= BLOG ================= */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bcard{background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:.35s}
.bcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.bimg{aspect-ratio:16/9;overflow:hidden;position:relative;display:block;background:var(--blue-lt)}
.bimg img{width:100%;height:100%;object-fit:cover;transition:.5s}
.bcard:hover .bimg img{transform:scale(1.07)}
.bimg .dt{position:absolute;bottom:0;left:0;background:var(--blue-dp);color:#fff;padding:8px 16px;font-family:var(--h);font-size:11.2px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-top-right-radius:8px;z-index:3}
.bbody{padding:24px}
.bbody h4{font-size:17.5px;color:var(--blue-dp);margin-bottom:10px;line-height:1.4}
.bbody h4 a:hover{color:var(--red)}
.bbody p{font-size:14px;color:var(--grey);margin-bottom:16px}
.bbody .more{font-family:var(--h);font-size:12.6px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;display:inline-flex;gap:6px;align-items:center}
.bbody .more:hover{gap:10px}

/* ================= ENQUIRY ================= */
/* Heading centred like every other section, then two columns that start on the
   same baseline. Previously the heading lived inside the left column, so the
   form card had nothing to align to. */
.enq{position:relative;overflow:hidden;color:#fff}
.enq .bg{position:absolute;inset:0;background-size:cover;background-position:center}
/* Same diagonal blue wash as the PCD band, so the two dark sections read as a
   pair. The old overlay was a flat 97 percent navy, which hid the photograph
   completely and left the section looking like a plain coloured block.

   One deliberate difference from PCD: the lightest stop is 90 percent rather
   than 80. PCD's text is left aligned and sits in the dark end of the
   gradient. This heading is centred and runs the full width, so it crosses the
   pale end, where 80 percent leaves white body copy at 3.7:1 over a bright
   photo. At 90 percent it clears 4.5:1 whatever the photograph is doing. */
.enq::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(110deg,rgba(30,42,78,.97) 0%,rgba(51,69,124,.94) 48%,rgba(68,92,165,.9) 100%)}
.enq .dia1{width:420px;height:420px;background:rgba(255,255,255,.05);top:-180px;right:-110px;z-index:3}
.enq .dia2{width:260px;height:260px;background:rgba(255,255,255,.06);bottom:-150px;left:3%;z-index:3}
.enq .wrap{position:relative;z-index:5}
.enq .stitle h2{color:#fff}
/* White, not red. Brand red on this navy measures 2.7:1, well under the 4.5:1
   minimum, and it reads as a muddy brown rather than a colour. White is 14:1. */
.enq .stitle .sub{color:#fff}
.enq .stitle p{color:rgba(255,255,255,.85)}

.enq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:center}

/* Contact details: three separate cards, stacked.
   Label beside the icon on line one, value full width on line two. An indented
   text column beside a tile wastes roughly 58px on every line, which a long
   address cannot afford in a half-width column. */
.enq-info{display:grid;gap:14px;align-content:center}

.ci{position:relative;display:block;padding:20px 22px;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:background .25s,border-color .25s}
/* Accent bar wipes in from the left on hover. */
.ci::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .3s}
a.ci:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
a.ci:hover::before{transform:scaleY(1)}

.ci-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ci-ic{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;
  color:var(--blue-mid);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}
.ci-head b{flex:1;min-width:0;font-family:var(--h);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#fff}
.ci-go{flex:none;display:inline-flex;color:rgba(255,255,255,.28);transition:color .25s,transform .25s}
a.ci:hover .ci-go{color:#fff;transform:translateX(3px)}

/* Left aligned on purpose. Justifying a three-line address inside a narrow
   column opens visible rivers of white space between the words. */
.ci-val{display:block;font-size:13.8px;line-height:1.7;color:rgba(255,255,255,.68);
  overflow-wrap:anywhere;transition:color .25s}
a.ci:hover .ci-val{color:rgba(255,255,255,.92)}

.ci-tags{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:4px 2px 0}
.ci-tags b{font-family:var(--h);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.ci-chips{display:flex;flex-wrap:wrap;gap:8px}
.ci-chips span{font-family:var(--h);font-size:12.2px;font-weight:600;color:#fff;
  padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);transition:.25s}
.ci-chips span:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}

/* form card */
.form{background:#fff;border-radius:14px;padding:32px;box-shadow:var(--shadow-lg)}
.form-head{padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.form-head h3{font-size:21px;color:var(--blue-dp);margin-bottom:5px}
.form-head p{font-size:13.2px;color:var(--grey)}

.fgrid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:flex;flex-direction:column}
.fld-full{grid-column:1/-1}
/* Field labels are read, not seen.
   Every field repeats its label word for word in the placeholder, so printing
   both put the same text on the screen twice and added roughly 19px to each
   row. Across six rows that is most of a screen on a phone, which is why the
   client kept calling the form long.
   Hidden with the screen-reader pattern rather than display:none on purpose:
   display:none takes the label out of the accessibility tree as well, leaving
   a screen reader with nothing but the placeholder, and a placeholder vanishes
   the moment the visitor starts typing.
   The consent line is excluded. That is legal wording the visitor has to be
   able to read, not a caption for a box. */
.fld:not(.fld-consent)>label{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;margin:0}
.fld label i{font-style:normal;color:var(--red)}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--b);font-size:14.4px;background:#FAFBFD;color:var(--ink);transition:.22s;height:46px}
.fld textarea{height:auto;min-height:112px;resize:vertical;line-height:1.6}
.fld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2365696F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.fld input::placeholder,.fld textarea::placeholder{color:#A6ABB4}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(68,92,165,.12)}
.form-submit{width:100%;justify-content:center;margin-top:22px}

.hp-field{position:absolute!important;left:-9999px}
.notice-ok,.notice-err{border-radius:8px;padding:14px 18px;font-size:13.6px;margin-bottom:20px;
  font-family:var(--h);font-weight:500;line-height:1.55}
.notice-ok{background:#E8F6EC;border:1px solid #B7E2C4;color:#1B6B33}
.notice-err{background:var(--red-lt);border:1px solid #F3BDBE;color:var(--red-dk)}


/* =========================================================
   SCROLL REVEAL
   Sections lift into place as they enter the viewport.

   The .axv-reveal class is set on <html> by an inline capability check in
   header.php, so this hidden starting state only exists where the browser can
   animate it away again. No JavaScript, or reduced motion requested, means
   none of these rules ever match and the page renders flat.

   The hero and the inner-page header are excluded on purpose. They are already
   on screen at load, and animating the first thing a visitor sees just delays
   it. The reveal begins with whatever follows them.

   The selector list is wrapped in :where() so it contributes no specificity.
   Written plainly, ".axv-reveal .about>div:last-child" scores higher than
   ".axv-reveal .is-in" and the column would stay invisible forever. With
   :where() the hidden state is always exactly one class, so .is-in always wins
   no matter how long a selector gets added to the list later.
   ========================================================= */
.axv-reveal :where(
  .stitle, .ab-vis, .about>div:last-child, .cnt, .wcard, .seg, .pcard, .cert,
  .tcard, .bcard, .pb, .pcd-intro, .pfilter, .enq-info, .form, .enq-map,
  .disc, .sp-body
){opacity:0;transform:translateY(26px);will-change:opacity,transform;
  transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}

/* The product gallery is position:sticky. Sliding it on the Y axis fights its
   own positioning while the transition runs, so that one fades only. */
.axv-reveal :where(.sp-media){opacity:0;will-change:opacity;
  transition:opacity .7s cubic-bezier(.16,.84,.44,1)}

.axv-reveal .is-in{opacity:1;transform:none}
/* Carousel cards never take part in the reveal.
   IntersectionObserver clips against every scrolling ancestor, so a card off to
   the right of the track counts as not intersecting and never gets .is-in,
   which left the strip full of invisible cards. The JavaScript now switches
   them on directly; this rule is the safety net for the case where the script
   fails after the inline check in the head has already armed .axv-reveal.
   Three classes, so it outranks the :where() list above. */
.axv-reveal .carousel-track .pcard{opacity:1;transform:none}
/* Dropped once the animation has run so the compositor can release the layer. */
.axv-reveal .is-done{will-change:auto}

/* ================= SINGLE PRODUCT ================= */
.sp{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px;align-items:start}

.sp-media{position:sticky;top:120px}
/* Square for the same reason as the card, and this is the one place a visitor
   actually looks at the product, so cropping it here was the worst of the two. */
.sp-img{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--blue-lt);aspect-ratio:1/1;box-shadow:var(--shadow)}
.sp-img img{width:100%;height:100%;object-fit:cover}
/* Fills the frame, same reasoning as the card: the white margin is already in
   the photograph, so padding here was a second one on top of it. */
.sp-img-photo{background:#fff;cursor:zoom-in}
.sp-img-photo img{object-fit:contain}
.sp-img .ptag{top:14px;left:14px}

/* Coming-soon product page. Narrow and centred: there is not much to say, and
   spreading three rows of a table across a full-width page would make the page
   look emptier than it is. */
.sp-soon{max-width:640px;margin:0 auto;text-align:center}
.sp-soon-tag{display:inline-block;font-family:var(--h);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  background:var(--red-lt);padding:8px 16px;border-radius:100px;margin-bottom:18px}
.sp-soon h2{font-size:clamp(24px,3vw,32px);color:var(--blue-dp);margin-bottom:14px}
.sp-soon>p{font-size:15.4px;line-height:1.75;color:var(--grey);margin-bottom:30px}
/* The table itself is left aligned inside the centred block. Centred label and
   value columns would not line up with each other down the page. */
.sp-soon .sp-table{text-align:left;margin-bottom:30px}
.sp-soon-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.sp-head{margin-bottom:22px}
.sp h1{font-size:clamp(26px,3.2vw,36px);color:var(--blue-dp);margin-bottom:12px;line-height:1.2}
.sp .chips{display:flex;gap:9px;flex-wrap:wrap}
.sp .chips a{background:var(--blue-lt);color:var(--blue);font-family:var(--h);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:100px;
  border:1px solid var(--line);transition:.24s}
.sp .chips a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

.sp-table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:26px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sp-table th,.sp-table td{text-align:left;padding:14px 18px;font-size:14.2px;vertical-align:top;
  border-bottom:1px solid var(--line)}
.sp-table tr:last-child th,.sp-table tr:last-child td{border-bottom:none}
.sp-table th{background:var(--soft);font-family:var(--h);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-dp);width:190px;border-right:1px solid var(--line);white-space:nowrap}
.sp-table td{color:var(--grey);line-height:1.65}

.sp-block{margin-bottom:26px}
.sp-block h3{font-size:17px;color:var(--blue-dp);margin-bottom:8px}
.sp-block p{color:var(--grey);font-size:14.6px;text-align:justify}

.sp-disc{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:0 8px 8px 0;padding:16px 20px;font-size:12.8px;color:var(--grey);line-height:1.7;
  margin-bottom:26px;text-align:justify}
.sp-disc b{color:var(--blue-dp)}

.sp-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ================= ARCHIVE / CONTENT ================= */
.entry{max-width:820px;margin:0 auto}
.entry h2{font-size:28px;color:var(--blue-dp);margin:34px 0 14px}
.entry h3{font-size:22px;color:var(--blue-dp);margin:28px 0 12px}
.entry p{margin-bottom:18px;color:var(--grey);font-size:16px;text-align:justify}
.entry ul,.entry ol{margin:0 0 18px 22px;color:var(--grey)}
.entry li{margin-bottom:9px}
.entry img{border-radius:10px;margin:22px 0}
.entry blockquote{border-left:4px solid var(--blue);background:var(--soft);padding:18px 24px;margin:22px 0;
  font-style:italic;color:var(--blue-dp);border-radius:0 8px 8px 0}
.entry a{color:var(--blue);text-decoration:underline}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:50px;flex-wrap:wrap}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:8px;font-family:var(--h);font-weight:600;font-size:14px;
  color:var(--blue-dp);transition:.25s}
.pagination .page-numbers:hover,.pagination .current{background:var(--blue);border-color:var(--blue);color:#fff}

/* Contact page variant. The page header above is dark navy, so the enquiry
   band here runs light instead of stacking two dark slabs. */
.enq-light{background:var(--soft);color:var(--ink)}
.enq-light::after{display:none}
.enq-light .dia{display:none}
.enq-light .stitle h2{color:var(--blue-dp)}
.enq-light .stitle .sub{color:var(--red)}
.enq-light .stitle p{color:var(--grey)}
.enq-light .ci{background:#fff;border-color:var(--line)}
.enq-light a.ci:hover{background:#fff;border-color:var(--blue-mid);box-shadow:var(--shadow)}
.enq-light .ci-ic{background:var(--blue-lt);border-color:var(--line);color:var(--blue)}
.enq-light .ci-head b{color:var(--blue-dp)}
.enq-light .ci-val{color:var(--grey)}
.enq-light a.ci:hover .ci-val{color:var(--ink)}
.enq-light .ci-go{color:var(--line)}
.enq-light a.ci:hover .ci-go{color:var(--blue)}
.enq-light .ci-tags b{color:var(--grey)}
.enq-light .ci-chips span{color:var(--blue-dp);background:#fff;border-color:var(--line)}
.enq-light .ci-chips span:hover{border-color:var(--blue);background:var(--blue-lt)}
.enq-light .form{border:1px solid var(--line)}
.enq-map{margin-top:32px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);line-height:0;background:var(--blue-lt)}
/* Overrides the width and height on the tag itself, which are there only so the
   space is reserved before the map loads. */
.enq-map iframe{width:100%;height:340px;border:0;display:block;filter:grayscale(.25)}

/* ================= ENQUIRY POPUP ================= */
.axv-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.axv-modal[hidden]{display:none}
.axv-modal-backdrop{position:absolute;inset:0;background:rgba(14,16,22,.66);backdrop-filter:blur(3px);
  animation:axvFade .22s ease}
.axv-modal-box{position:relative;z-index:2;width:100%;max-width:560px;max-height:calc(100vh - 48px);overflow-y:auto;
  background:#fff;border-radius:16px;padding:34px;box-shadow:0 30px 80px rgba(14,16,22,.4);
  animation:axvPop .26s cubic-bezier(.2,.9,.3,1)}
@keyframes axvFade{from{opacity:0}to{opacity:1}}
@keyframes axvPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

.axv-modal-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--grey);display:grid;place-items:center;cursor:pointer;transition:.22s}
.axv-modal-x:hover{background:var(--red);border-color:var(--red);color:#fff}

.axv-modal-head{padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.axv-modal-tag{display:inline-block;font-family:var(--h);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:8px}
.axv-modal-head h3{font-size:21px;color:var(--blue-dp);margin-bottom:8px}
.axv-modal-prod{font-family:var(--h);font-size:14px;font-weight:700;color:var(--blue);
  background:var(--blue-lt);border-radius:8px;padding:9px 14px;display:inline-block}
.axv-modal-prod:empty{display:none}

.axv-modal-submit{width:100%;justify-content:center;margin-top:22px}
.axv-modal-submit.is-loading{opacity:.65;pointer-events:none}
.axv-modal-note{margin-top:16px;font-size:11.8px;line-height:1.6;color:var(--grey);text-align:center}
.axv-modal-msg{border-radius:8px;padding:14px 18px;font-size:13.6px;margin-bottom:20px;
  font-family:var(--h);font-weight:500;line-height:1.55}
.axv-modal-msg[hidden]{display:none}
.axv-modal-msg.ok{background:#E8F6EC;border:1px solid #B7E2C4;color:#1B6B33}
.axv-modal-msg.err{background:var(--red-lt);border:1px solid #F3BDBE;color:var(--red-dk)}
body.axv-locked{overflow:hidden}

/* ================= FOOTER ================= */
/* Light footer on client request. The copyright bar underneath sits on brand
   navy so the page still closes on a defined edge instead of fading into white. */
.site-footer{position:relative;overflow:hidden;background:#fff;color:var(--ink);border-top:1px solid var(--line)}
.f-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.f-glow-1{width:520px;height:520px;top:-260px;right:-140px;background:radial-gradient(circle,rgba(68,92,165,.09) 0%,transparent 70%)}
.f-glow-2{width:420px;height:420px;bottom:-200px;left:-120px;background:radial-gradient(circle,rgba(68,92,165,.07) 0%,transparent 70%)}
.site-footer .wrap{position:relative;z-index:2}

/* certification strip */
.f-strip{position:relative;z-index:2;background:var(--soft);border-bottom:1px solid var(--line)}
.f-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:28px 0}
.f-badge{display:flex;align-items:center;gap:14px}
.f-badge .fb-ic{width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));box-shadow:0 6px 16px rgba(68,92,165,.24)}
.f-badge b{display:block;font-family:var(--h);font-size:13.6px;font-weight:700;color:var(--blue-dp);line-height:1.35;margin-bottom:2px}
.f-badge span{display:block;font-size:12px;color:var(--grey);line-height:1.4}

/* main grid */
/* Equal-width columns made the gutters look uneven, because the link columns
   hold much shorter text than the columns beside them, so the leftover space
   inside a column read as extra gap.
   The two link columns are now sized to their own content and the two text
   columns share whatever is left, which makes every visible gutter the same
   56px. Each column header still occupies the same 35px block, so all four
   columns start their content on exactly the same line. */
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content minmax(0,1fr);
  column-gap:56px;row-gap:40px;padding:50px 0}
.fcol{min-width:0}

.fcol h5{font-family:var(--h);font-size:14.5px;font-weight:700;color:var(--blue-dp);letter-spacing:-.01em;
  line-height:20px;margin:0 0 24px}
.fcol h5::after{content:"";display:block;width:38px;height:3px;border-radius:3px;margin-top:12px;
  background:linear-gradient(90deg,var(--blue-dk) 0%,var(--blue) 58%,var(--red) 100%)}

/* The brand column has no heading of its own, so instead of pinning it to the
   header baseline it is centred against the taller columns beside it. */
.fcol-brand{align-self:center}
.flogo{display:inline-flex;align-items:center;margin:0 0 22px;transition:.25s}
.flogo:hover{transform:translateY(-2px)}
.flogo img{height:56px;width:auto}
.f-about{font-size:13.8px;line-height:1.85;color:var(--grey);margin-bottom:24px;
  text-align:justify}

.f-social{display:flex;gap:10px}
.f-social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--blue);
  background:var(--blue-lt);border:1px solid var(--line);transition:.25s}
.f-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(68,92,165,.28)}

.f-list{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.f-list a{font-size:13.8px;color:var(--grey);transition:.25s;display:inline-flex;align-items:flex-start;gap:10px;line-height:1.5}
.f-list a::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;
  background:var(--red);transition:.25s}
.f-list a:hover{color:var(--red);transform:translateX(4px)}
.f-list a:hover::before{background:var(--blue);transform:scale(1.35)}

/* reach us */
.f-contact{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.f-contact li{display:flex;gap:13px;align-items:flex-start}
.f-contact .fc-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:20px;margin-top:2px;color:var(--red)}
.f-contact b{display:block;font-family:var(--h);font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--blue-dp);margin-bottom:5px}
.f-contact a,.f-contact span{font-size:13.6px;line-height:1.7;color:var(--grey);display:block}
.f-contact a:hover{color:var(--red)}

/* disclaimer */
.disc{position:relative;z-index:2;background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:0 8px 8px 0;padding:18px 22px;font-size:12.6px;line-height:1.75;color:var(--grey);margin-bottom:40px;
  text-align:justify}
.disc b{color:var(--blue-dp)}

/* copyright bar, its own colour */
.fbot-bar{position:relative;z-index:2;background:var(--blue-dp);color:#fff}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:20px 0;font-size:12.8px}
/* Copyright and the credit read as one line, split by a divider. They wrap
   together on narrow screens instead of stacking oddly. Held at 0.72 opacity
   against the navy, which is where a footer credit belongs: findable, not
   competing with the legal links opposite it. */
.fbot-copy{display:flex;align-items:center;gap:0 14px;flex-wrap:wrap;opacity:.72}
.fbot-reg{position:relative;padding-left:15px;letter-spacing:.02em}
/* Underlined on hover only. The credit sits inside a block already held at 0.72
   opacity, so a permanent underline would make it the loudest thing in the bar,
   ahead of the legal links it sits opposite. */
.fbot-by{color:#fff;text-decoration:none;transition:.22s}
.fbot-by:hover{color:var(--blue-mid);text-decoration:underline;text-underline-offset:3px}
.fbot-reg::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:rgba(255,255,255,.28)}
.fbot-links{display:flex;gap:24px;flex-wrap:wrap}
.fbot-links a{color:#fff;opacity:.72;transition:.22s}
.fbot-links a:hover{opacity:1;color:var(--blue-mid)}

/* floating actions */
/* Floating controls.
   They sit low while the page scrolls, then step up so they never land on top
   of the copyright bar at the very bottom. The lift is measured in JS and fed
   in through --fab-lift, because the height of that bar changes with the
   breakpoint and with how the legal line wraps. Nothing to keep in sync by
   hand, and no permanently wasted space higher up the page. */
.fabs{--fab-lift:0px;position:fixed;right:20px;bottom:26px;z-index:90;display:grid;gap:10px;
  justify-items:end;transform:translateY(calc(var(--fab-lift) * -1));
  transition:transform .28s ease}
/* Both floating controls are the same 48px circle, so they read as a pair. */
.fab-e{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--red),var(--red-dk));
  box-shadow:0 8px 24px rgba(212,35,38,.34);transition:.28s}
.fab-e:hover{transform:translateY(-3px);color:#fff;box-shadow:0 12px 30px rgba(212,35,38,.44)}
.fab-t{width:48px;height:48px;border-radius:50%;background:var(--blue-dp);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(30,42,78,.3);transition:.28s;opacity:0;pointer-events:none;border:none;cursor:pointer}
.fab-t.show{opacity:1;pointer-events:auto}
.fab-t:hover{transform:translateY(-3px);background:var(--blue)}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.abt-lead{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;
  align-items:center}
.abt-vis{border-radius:10px;box-shadow:var(--shadow-lg);position:relative;aspect-ratio:4/3}
.abt-vis img{width:100%;height:100%;object-fit:cover;border-radius:10px}
/* Clipped to the image only, so the badge hanging off the left edge survives. */
.abt-vis::after{content:"";position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(160deg,rgba(30,42,78,.16),rgba(68,92,165,.24))}
.abt-body>p{color:var(--grey);margin-bottom:16px;text-align:justify}
/* Primary action plus a plain email link. The email wraps to its own line on a
   narrow column rather than squeezing the button. */
.abt-cta{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:26px}
.abt-mail{display:inline-flex;align-items:center;gap:9px;font-family:var(--h);font-size:14px;
  font-weight:600;color:var(--blue);transition:.22s;overflow-wrap:anywhere}
.abt-mail svg{flex:none;color:var(--red);transition:.22s}
.abt-mail:hover{color:var(--red)}
.abt-body>p:last-of-type{margin-bottom:0}

/* Company facts band.
   A slim full-bleed strip, not a grid of cards. It sits directly on top of the
   certificate cards, and two card grids stacked on each other compete instead
   of leading into one another. Same shape as the footer certification strip,
   which has been on every page since the start without needing a change. */
.abt-facts{background:var(--soft);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.abt-facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 0}
.abt-fact{display:flex;align-items:center;gap:13px}
.abt-fact-ic{width:42px;height:42px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  box-shadow:0 6px 16px rgba(68,92,165,.24);transition:.28s}
.abt-fact:hover .abt-fact-ic{background:linear-gradient(135deg,var(--red),var(--red-dk));
  box-shadow:0 6px 16px rgba(212,35,38,.26)}
/* Value first, label under it. The value is what a reader scans for; the label
   only tells them what they are looking at.
   Sized so all four values stay on one line in a 281px cell. nowrap is not used
   on purpose: if the client ever types a longer value it should wrap rather
   than overflow the band. */
.abt-fact b{display:block;font-family:var(--h);font-size:13.2px;font-weight:700;
  color:var(--blue-dp);line-height:1.35;margin-bottom:2px}
.abt-fact>div>span{display:block;font-size:12px;color:var(--grey);line-height:1.4}

/* Stat badge on the image, matching the one on the home page block. */
.abt-vis{position:relative;overflow:visible}
.abt-vis img{border-radius:10px}
.abt-badge{position:absolute;left:-16px;bottom:26px;z-index:4;padding:16px 20px;border-radius:8px;
  text-align:center;color:#fff;box-shadow:var(--shadow-lg);
  background:linear-gradient(135deg,var(--blue),var(--blue-dk))}
.abt-badge b{display:block;font-family:var(--h);font-size:28px;font-weight:800;line-height:1}
.abt-badge b i{font-style:normal;font-size:.6em;font-weight:800;margin-left:1px}
.abt-badge span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.92}

/* Vision and mission */
.abt-vm-sec{background:var(--soft)}
.abt-vm{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.vm{background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px 30px;
  border-top:4px solid var(--blue);transition:.32s}
.vm:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-top-color:var(--red)}
.vm-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:10px;margin-bottom:18px;
  color:var(--blue);background:var(--blue-lt);border:1px solid var(--line);transition:.28s}
.vm:hover .vm-ic{background:var(--red);border-color:var(--red);color:#fff}
.vm-label{display:block;font-family:var(--h);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.vm h3{font-size:20px;color:var(--blue-dp);margin-bottom:12px}
.vm p{font-size:14.6px;line-height:1.7;color:var(--grey)}

/* How we work */
.abt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:30px 24px 26px;transition:.32s;overflow:hidden}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
/* Oversized ghost numeral rather than a connector line between the cards. A
   line has to be redrawn every time the grid wraps; a number in the corner
   reads the same at four across, two across or one. */
.step-n{position:absolute;top:10px;right:16px;font-family:var(--h);font-size:46px;font-weight:800;
  line-height:1;color:var(--blue-lt);z-index:0;transition:color .32s}
.step:hover .step-n{color:var(--red-lt)}
.step-ic,.step h4,.step p{position:relative;z-index:2}
.step-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:9px;margin-bottom:16px;
  color:var(--blue);background:var(--blue-lt);border:1px solid var(--line);transition:.28s}
.step:hover .step-ic{background:var(--red);border-color:var(--red);color:#fff}
.step h4{font-size:16.5px;color:var(--blue-dp);margin-bottom:9px;line-height:1.35}
.step p{font-size:13.8px;line-height:1.65;color:var(--grey)}

/* =========================================================
   PCD FRANCHISE PAGE
   ========================================================= */
/* Tick list, reused from the About list styling but on its own class so the
   two can diverge later without one breaking the other. */
.pcd-list{list-style:none;display:grid;gap:14px;margin-top:22px;padding:0}
.pcd-list li{display:flex;gap:14px;align-items:flex-start}
.pcd-list span{font-size:14.6px;line-height:1.62;color:var(--grey)}

.pcdben{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pben-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 26px;
  transition:.32s;border-bottom:4px solid transparent}
.pben-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-bottom-color:var(--red)}
.pben-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:9px;margin-bottom:16px;
  color:var(--blue);background:var(--blue-lt);border:1px solid var(--line);transition:.28s}
.pben-card:hover .pben-ic{background:var(--red);border-color:var(--red);color:#fff}
.pben-card h4{font-size:17px;color:var(--blue-dp);margin-bottom:10px;line-height:1.35}
.pben-card p{font-size:13.8px;line-height:1.68;color:var(--grey)}

/* Eligibility, two plain columns */
.elig{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.elig-col{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 28px;
  display:flex;flex-direction:column}
.elig-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:18px;
  border-bottom:1px solid var(--line)}
.elig-ic{flex:none;width:42px;height:42px;border-radius:9px;display:grid;place-items:center;
  color:var(--blue);background:var(--blue-lt);border:1px solid var(--line)}
.elig-head h3{font-size:17.5px;color:var(--blue-dp)}
.elig-col ul{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.elig-col li{display:flex;gap:13px;align-items:flex-start}
.elig-col li span{font-size:14.2px;line-height:1.6;color:var(--grey)}
/* Pinned to the bottom so both columns end level even though one has a note. */
.elig-note{margin-top:auto;padding-top:20px;font-size:12.6px;line-height:1.6;color:var(--grey);
  opacity:.85}

/* FAQ. No JavaScript: <details> handles the toggling, keyboard access and
   find-in-page on its own. */
.faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq-i{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:border-color .25s,box-shadow .25s}
.faq-i[open]{border-color:var(--blue-mid);box-shadow:var(--shadow)}
.faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 22px;cursor:pointer;list-style:none;font-family:var(--h);font-size:15.4px;
  font-weight:600;color:var(--blue-dp);transition:color .22s}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:hover{color:var(--red)}
/* Plus turning into a minus, drawn in CSS so there is no icon to swap. */
.faq-x{position:relative;flex:none;width:20px;height:20px;transition:transform .28s}
.faq-x::before,.faq-x::after{content:"";position:absolute;top:50%;left:50%;background:var(--blue);
  border-radius:2px;transform:translate(-50%,-50%);transition:.28s}
.faq-x::before{width:13px;height:2px}
.faq-x::after{width:2px;height:13px}
.faq-i[open] .faq-x{transform:rotate(90deg)}
.faq-i[open] .faq-x::after{opacity:0}
.faq-i summary:hover .faq-x::before,.faq-i summary:hover .faq-x::after{background:var(--red)}
.faq-a{padding:0 22px 20px}
.faq-a p{font-size:14.4px;line-height:1.72;color:var(--grey)}

/* Highlighted note, used for the adverse event route on the Quality page.
   Set apart from the numbered steps beside it because it is a different
   channel, not the next step in the same one. */
.qnote{display:flex;gap:16px;align-items:flex-start;margin-top:26px;padding:22px 24px;
  border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 8px 8px 0;
  background:var(--red-lt)}
.qnote-ic{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--red),var(--red-dk))}
.qnote b{display:block;font-family:var(--h);font-size:15px;color:var(--blue-dp);margin-bottom:6px}
.qnote>div>span{display:block;font-size:13.8px;line-height:1.7;color:var(--ink)}

/* =========================================================
   CAROUSEL
   Native scroll with scroll-snap. The arrows call scrollBy, so the track is a
   normal swipeable scroller with or without JavaScript.
   ========================================================= */
.carousel{position:relative}
/* Flex, not grid.
   This was grid-auto-flow:column with grid-auto-columns:minmax(0,calc(25% - 18px)).
   The track sizing never took, so all twelve cards fell back to auto columns and
   were squeezed down to their min-content width, about 78px each, with the
   titles and segment names clipped. Grid tracks are also the wrong tool here:
   they distribute the container's width between themselves, which is the exact
   opposite of what a scroller needs.
   flex-shrink:0 is what actually fixes it. A flex item with a fixed basis and no
   shrink cannot be talked out of its width, so the row overflows on purpose and
   the container scrolls. */
.carousel-track{display:flex;gap:24px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  /* Keeps the swipe inside the strip. Without it, reaching either end hands the
     gesture to the browser, which on iOS and Chrome for Android is the back
     navigation. Swiping a product carousel should never leave the page. */
  overscroll-behavior-x:contain;
  /* Matches the side padding below, so a snapped card lands exactly on the
     content edge instead of inside it. */
  scroll-padding-left:16px;
  /* Room for the hover shadow. Setting overflow on one axis makes the other
     axis clip too, so the old 4px of side padding sliced the shadow off flat
     down both edges of every card and left a hard vertical line where it was
     cut. Negative margins pull the track back into line afterwards, so the
     cards still start on the content edge.
     16px is the ceiling on the sides: the page gutter narrows to 18px on small
     phones, and anything wider than that would push the scroller past it and
     give the whole page a horizontal scrollbar. */
  padding:18px 16px 30px;margin:-18px -16px -30px}
.carousel-track::-webkit-scrollbar{display:none}
/* A tighter shadow than the grid uses. --shadow-lg blurs over 55px, which needs
   about 27px of clearance on each side, and there is only 16px to give. Drawn
   smaller, it fits inside the padding instead of being cut off by it. */
.carousel-track .pcard:hover{box-shadow:0 10px 24px rgba(30,42,78,.17)}
/* Three across, matching the product grid: 3 x (33.333% - 16px) + 2 x 24px = 100%.
   Tied to .pgrid on purpose. The grid moved from four columns to three, and a
   related-products strip showing cards at a different size to the catalogue
   page they came from reads as two different components.
   min-width is the floor if calc() is ever dropped, so the worst case is a card
   slightly narrower than intended rather than the collapse this replaces. */
.carousel-track>*{flex:0 0 calc(33.333% - 16px);min-width:220px;scroll-snap-align:start}

/* Overlapping the track rather than sitting beside it, so the cards keep the
   full content width.

   Off by default and switched on only where there is a real pointer. A touch
   screen scrolls this strip by swiping, and the swipe starts on the cards, so a
   44px button parked on top of the first one is only ever something to press by
   mistake. This replaces the old rule that hid the arrows below 620px: the
   deciding factor is the input device, not the width, and a 700px tablet is a
   touch screen even though it is nowhere near a phone. */
.carousel-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--blue-dp);place-items:center;cursor:pointer;
  box-shadow:var(--shadow);transition:.24s}
@media (hover:hover) and (pointer:fine){
  .carousel-nav{display:grid}
}
.carousel-nav:hover{background:var(--red);border-color:var(--red);color:#fff}
.carousel-nav.pv{left:-20px}
.carousel-nav.nx{right:-20px}
/* Faded out at either end instead of removed, so the track does not jump. */
.carousel-nav[disabled]{opacity:0;pointer-events:none}

/* =========================================================
   SEARCH
   ========================================================= */
/* One form, three contexts: the header bar, the products archive and the
   results page. Sized by its container rather than by a fixed width, so the
   same markup works in all three without a variant class. */
.axv-search{position:relative;display:flex;align-items:center;gap:0;width:100%}
.axv-search-ic{position:absolute;left:16px;display:inline-flex;color:var(--grey);
  pointer-events:none;transition:color .22s}
.axv-search:focus-within .axv-search-ic{color:var(--blue)}
.axv-search input[type=search]{flex:1;min-width:0;height:48px;padding:0 116px 0 44px;
  border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  font-family:var(--b);font-size:14.6px;transition:.22s;-webkit-appearance:none}
.axv-search input::placeholder{color:#A6ABB4}
.axv-search input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(68,92,165,.12)}
/* Sits inside the field so the control reads as one object. */
.axv-search button{position:absolute;right:5px;height:38px;padding:0 20px;border:none;
  border-radius:6px;cursor:pointer;font-family:var(--h);font-size:13.4px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dk));transition:.25s;
  display:inline-flex;align-items:center;justify-content:center}
.axv-search button:hover{background:linear-gradient(135deg,var(--red),var(--red-dk))}
/* The magnifier inside the button is the phone-only form of the label. */
.axv-search-go{display:none}

/* Header toggle */
.nav-search{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--blue-dp);display:grid;place-items:center;cursor:pointer;
  transition:.22s}
.nav-search:hover,.nav-search[aria-expanded=true]{background:var(--red);border-color:var(--red);color:#fff}

/* Search overlay.
   Sits above everything, so the page underneath is untouched and does not
   shift when it opens. Anchored towards the top rather than centred: the
   field lands close to where the eye already is after pressing the icon in
   the header, and there is room for the segment shortcuts below it. */
.srch-ov{position:fixed;inset:0;z-index:210;display:grid;justify-items:center;
  align-content:start;padding:12vh 24px 24px}
.srch-ov[hidden]{display:none}
.srch-ov-back{position:absolute;inset:0;background:rgba(14,16,22,.72);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .28s}
.srch-ov.is-open .srch-ov-back{opacity:1}

.srch-ov-box{position:relative;z-index:2;width:100%;max-width:620px;background:#fff;
  border-radius:14px;padding:38px 40px 34px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-14px);transition:opacity .28s,transform .28s cubic-bezier(.22,.8,.3,1)}
.srch-ov.is-open .srch-ov-box{opacity:1;transform:none}

.srch-ov-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--blue-dp);display:grid;
  place-items:center;cursor:pointer;transition:.22s}
.srch-ov-x:hover{background:var(--red);border-color:var(--red);color:#fff}

.srch-ov-lbl{display:block;font-family:var(--h);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.srch-ov-box h2{font-size:24px;color:var(--blue-dp);margin-bottom:8px}
.srch-ov-box p{font-size:14.2px;line-height:1.65;color:var(--grey);margin-bottom:22px}

.srch-ov-quick{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.srch-ov-quick b{display:block;font-family:var(--h);font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.srch-ov-chips{display:flex;flex-wrap:wrap;gap:8px}
.srch-ov-chips a{font-family:var(--h);font-size:12.6px;font-weight:600;color:var(--blue-dp);
  background:var(--soft);border:1px solid var(--line);border-radius:100px;padding:8px 15px;
  transition:.22s}
.srch-ov-chips a:hover{background:var(--red);border-color:var(--red);color:#fff}

/* Results page. The field leads, the count sits under it as a caption. */
.srch-bar{max-width:640px;margin:0 auto 46px}
.srch-count{margin-top:14px;font-size:14.4px;color:var(--grey);text-align:center}
.srch-count b{color:var(--blue-dp);font-weight:600}
.srch-group{font-size:18px;color:var(--blue-dp);margin-bottom:22px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}

.srch-empty{max-width:560px;margin:0 auto;text-align:center;padding:20px}
.srch-empty-ic{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 22px;
  border-radius:50%;color:var(--blue);background:var(--blue-lt);border:1px solid var(--line)}
.srch-empty h2{font-size:22px;color:var(--blue-dp);margin-bottom:12px}
.srch-empty p{font-size:15px;line-height:1.75;color:var(--grey);margin-bottom:26px}
.srch-empty-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Long unbroken strings cannot push the legal column past its track. */
.legal-body{min-width:0}

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:52px;align-items:start}

/* Sticky contents list. A privacy policy is eleven sections long and nobody
   scrolls back to the top to find clause four. */
.legal-toc{position:sticky;top:110px;background:var(--soft);border:1px solid var(--line);
  border-radius:10px;padding:22px 20px}
.legal-toc b{display:block;font-family:var(--h);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue-dp);margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.legal-toc ul{list-style:none;display:grid;gap:9px;margin:0;padding:0;counter-reset:toc}
.legal-toc a{display:block;font-size:13.2px;line-height:1.45;color:var(--grey);transition:.22s;
  padding-left:22px;position:relative}
.legal-toc li{counter-increment:toc}
.legal-toc a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--h);font-size:10.5px;font-weight:700;color:var(--blue-mid);letter-spacing:.02em}
.legal-toc a:hover{color:var(--red)}
.legal-toc a:hover::before{color:var(--red)}

.legal-date{display:inline-flex;align-items:center;gap:8px;font-family:var(--h);font-size:11.6px;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);
  background:var(--blue-lt);border:1px solid var(--line);border-radius:100px;padding:7px 15px;
  margin-bottom:22px}
.legal-intro{font-size:16.4px;line-height:1.75;color:var(--blue-dp);padding-bottom:28px;
  margin-bottom:8px;border-bottom:1px solid var(--line)}

.legal-sec{padding-top:34px}
/* Offsets the sticky header when a contents link jumps to a clause, so the
   heading does not land underneath it. */
.legal-sec{scroll-margin-top:110px}
.legal-sec h2{display:flex;align-items:baseline;gap:12px;font-size:19.5px;color:var(--blue-dp);
  margin-bottom:14px;line-height:1.35}
.legal-n{flex:none;font-size:12.5px;font-weight:800;color:var(--blue-mid);letter-spacing:.02em}
.legal-sec p{font-size:14.8px;line-height:1.8;color:var(--grey);margin-bottom:14px;text-align:justify}
.legal-sec p:last-child{margin-bottom:0}
.legal-list{list-style:none;display:grid;gap:10px;margin:0 0 14px;padding:0}
.legal-list li{position:relative;padding-left:20px;font-size:14.6px;line-height:1.75;color:var(--grey)}
.legal-list li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--blue-mid)}

.legal-foot{margin-top:44px;padding:26px 28px;border-radius:10px;background:var(--soft);
  border:1px solid var(--line);border-left:4px solid var(--blue)}
.legal-foot b{display:block;font-family:var(--h);font-size:15.4px;color:var(--blue-dp);margin-bottom:7px}
.legal-foot p{font-size:14px;line-height:1.7;color:var(--grey);margin-bottom:16px}

/* Consent checkbox, on both enquiry forms */
/* Deliberately not a card. Boxed and padded it took as much vertical space as
   a real field while carrying no input, which made the form look longer than
   it is. A checkbox and one line of small print is all the Act needs. */
/* flex-direction is restated because the element also carries .fld, which sets
   column for normal label-over-input fields. Without it the checkbox lands
   above the text instead of beside it. */
.fld-consent{grid-column:1/-1;display:flex;flex-direction:row;gap:9px;align-items:flex-start;
  margin-top:-4px}
.fld-consent input{flex:none;width:15px;height:15px;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.fld-consent label{font-size:11.8px;line-height:1.5;color:var(--grey);cursor:pointer;
  font-family:var(--b);font-weight:400;letter-spacing:0;text-transform:none;margin:0}
.fld-consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.fld-consent a:hover{color:var(--red)}

/* =========================================================
   SHARED CTA BAND
   Used at the foot of every inner page. Ending each one with the full enquiry
   form would repeat a long form five times and leave no reason to visit the
   Contact page.
   ========================================================= */
.ctaband{position:relative;overflow:hidden;color:#fff}
.ctaband .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ctaband::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(110deg,rgba(30,42,78,.97) 0%,rgba(51,69,124,.94) 48%,rgba(68,92,165,.9) 100%)}
.ctaband .dia1{width:340px;height:340px;background:rgba(255,255,255,.05);top:-150px;right:-90px;z-index:3}
.ctaband .wrap{position:relative;z-index:5}
.ctaband-in{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding-block:calc(var(--secpad) * .72)}
.ctaband-txt{flex:1;min-width:280px}
.ctaband h2{font-size:clamp(23px,2.6vw,31px);color:#fff;margin-bottom:10px}
.ctaband p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.85);max-width:620px}
.ctaband-btns{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* =========================================================
   RESPONSIVE

   Six steps. Each number is where something actually breaks, not a round
   figure copied from a framework.

   1400  Small laptops. A 1366x768 notebook has about 640 usable pixels of
         height, so the section rhythm drops or only one band fits on screen.
   1280  Four-across grids fall under 260px per card. Segments and products
         step down to three.
   1080  The seven-item menu stops fitting beside the logo, so it becomes a
         burger. Every two-column page layout stacks here as well.
    860  Three-across segments fall under 200px, which is too narrow for a
         name like Gastroenterology.
    620  Phones. Card grids go single file and justified text is turned off,
         because justifying a 300px column opens rivers between the words.
    420  Small phones. Gutters, type and the floating buttons tighten.
   ========================================================= */

/* ---- Small laptops ---- */
@media(max-width:1400px){
  /* Display type is capped for a desktop monitor, and on a 1265px laptop every
     clamp was still pinned to its maximum: 42px section headings and a 54px
     hero line. Correct for a 27 inch screen, oversized for a notebook.
     Everything steps down one notch here. */
  :root{--secpad:70px}
  body{font-size:15px}

  .nav{height:78px}
  .logo img{height:46px}

  .slide .slide-title{font-size:clamp(25px,3.3vw,42px)}
  .slide p{font-size:16.2px}
  .phead{padding:58px 0}
  .phead .phead-title{font-size:clamp(25px,2.9vw,36px)}

  .stitle{margin-bottom:44px}
  .stitle h2{font-size:clamp(25px,2.85vw,35px);padding-bottom:16px;margin-bottom:16px}
  .stitle p{font-size:15.2px}
  .pcd h2{font-size:clamp(25px,2.85vw,35px)}

  .cnt-num{font-size:27px}
  .ab-badge b{font-size:26px}
  .wbody h4{font-size:17.6px}
  .bbody h4{font-size:16.4px}
  .cert-body h4{font-size:17.5px}
  .form-head h3{font-size:19px}
  .sp h1{font-size:clamp(25px,2.7vw,32px)}

  .about{gap:52px}
  .pcd .wrap{gap:48px}
  .enq-grid{gap:32px}
}

/* ---- Short screens ----
   Keyed to height, not width. The client's notebook reports 1265x551, so the
   width breakpoints above never fire hard enough: the problem is that a 660px
   hero and 80px section padding do not fit in 551px of viewport. A 1366x768
   laptop lands around 640px of usable height and has the same problem.
   min-width keeps phones and tablets out, they are handled by width. */
@media (max-height:680px) and (min-width:861px){
  :root{--secpad:54px}

  .topbar .wrap{min-height:34px}
  .nav{height:68px}
  .logo img{height:40px}
  .menu>li>a{padding:23px 10px}
  .menu>li>a::after{bottom:19px}

  /* Leaves a strip of the next section visible, which is what tells someone
     the page continues. A hero that exactly fills the screen does not. */
  .hero{height:min(400px,calc(100svh - 104px))}
  .slide .slide-title{font-size:clamp(24px,2.9vw,34px);margin-bottom:14px}
  .slide p{font-size:15.2px;margin-bottom:22px}
  .slide .tg{margin-bottom:14px;padding:6px 16px;font-size:11px}
  .dots{bottom:20px}
  .arrow{width:40px;height:40px}

  .stitle{margin-bottom:34px}
  .stitle h2{font-size:clamp(24px,2.5vw,30px);padding-bottom:13px;margin-bottom:13px}
  .stitle p{font-size:14.8px}
  .pcd h2{font-size:clamp(24px,2.5vw,30px)}

  .phead{padding:40px 0}
  .phead .phead-title{font-size:clamp(24px,2.6vw,32px)}

  .counters .wrap{padding-block:20px}
  .cnt-num{font-size:25px}
  .ab-main{min-height:360px}
  .wbody{padding:38px 22px 24px}
  .form{padding:26px}
  .fgrid{padding:40px 0 34px}
}

/* ---- Large tablets and narrow laptops ---- */
@media(max-width:1280px){
  .menu>li>a{padding:32px 11px;font-size:14px}
  .segs,.pgrid{grid-template-columns:repeat(3,1fr)}
  .about{gap:44px}
  .fgrid{column-gap:40px}
  .f-strip-in{gap:20px}
}

/* ---- Tablets: the menu no longer fits ---- */
@media(max-width:1080px){
  .menu{display:none}.burger{display:block}
  /* Search sits beside the burger on mobile. Both are 42px so the pair reads
     as one control group rather than two odd-sized buttons. */
  .nav-search{width:42px;height:42px;border-radius:5px}
  .nav-actions{gap:8px}
  /* The menu carried the auto margin. With it gone, the actions need their own. */
  .nav-actions{margin-left:auto}
  .nav-cta{padding:9px 16px;font-size:13.2px;white-space:nowrap}
  .nav-search{width:40px;height:40px}
  .topbar ul{gap:20px}

  /* Two across, so the divider clears every odd cell rather than only the
     first one. Without this, cells 3 and 4 keep a stray left border. */
  .cgrid{grid-template-columns:1fr 1fr;gap:22px 0}
  .cnt:nth-child(2n+1){border-left:none;padding-left:0}
  .cnt:nth-child(2n){padding-right:0;border-left:1px solid rgba(255,255,255,.15)}

  .about,.pcd .wrap{grid-template-columns:1fr;gap:48px}
  .legal{grid-template-columns:1fr;gap:32px}
  .legal-toc{position:static}
  .abt-lead{grid-template-columns:1fr;gap:40px}
  .abt-steps{grid-template-columns:repeat(2,1fr)}
  .abt-facts-in{grid-template-columns:repeat(2,1fr);gap:22px}
  .pcdben{grid-template-columns:repeat(2,1fr)}
  /* With no text column beside it there is nothing left to match, so the
     image takes a ratio of its own again instead of a stretched min-height. */
  .ab-main{min-height:0;aspect-ratio:4/3}

  .sp{grid-template-columns:1fr;gap:32px}
  .sp-media{position:static}
  .enq-grid{grid-template-columns:1fr;gap:26px}
  .wgrid,.tgrid,.bgrid{grid-template-columns:repeat(2,1fr)}
  /* Two across, plus a sliver of the third.
     50% would have filled the row exactly, which on a tablet left nothing to
     suggest the strip moved: the arrows are off on touch, and two cards sitting
     flush edge to edge look like a finished grid. 46% leaves the next card
     showing, which is the same cue the phone layout uses. */
  .carousel-track>*{flex-basis:calc(46% - 12px)}
  .carousel-nav.pv{left:-8px}
  .carousel-nav.nx{right:-8px}
  /* Still three. Two columns would make each card 500px wide and, at 7:10, a
     720px document above the text. The cap on the column does the work here:
     the cards simply shrink below 330px and the row stays a row. */
  .cgrid-certs{gap:22px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pfilter{grid-template-columns:1fr 1fr;gap:16px}
  .pf-actions{grid-column:1/-1}
  .pf-reset{width:100%}
  .fgrid{grid-template-columns:1fr 1fr;gap:40px 44px}
  .f-strip-in{grid-template-columns:1fr 1fr;gap:22px}
  .arrow{display:none}
  .phead{padding:60px 0}
}

/* ---- Small tablets ---- */
@media(max-width:860px){
  .nav{height:76px}
  .logo img{height:44px}
  .segs{grid-template-columns:repeat(2,1fr)}
  .pben{grid-template-columns:1fr}
  .topbar ul{gap:16px}
  .slide p{font-size:16px}

  /* One column here, not at 620px. Three across an 800px screen leaves a 250px
     card, and a certificate at 250px is a stamp: nobody can tell one document
     from another, which is the only job the picture has. Capped and centred so
     a single card does not grow to fill a tablet either. */
  .cgrid-certs{grid-template-columns:minmax(0,360px);justify-content:center;gap:22px}
}

/* ---- Phones ---- */
@media(max-width:620px){
  :root{--secpad:66px}
  .hero{height:540px;height:clamp(420px,calc(100svh - 104px),540px)}
  .slide .slide-title{white-space:normal}
  .slide p{font-size:15.4px;margin-bottom:28px}
  .slide .tg{margin-bottom:18px}

  /* One column, so a left divider has nothing to divide. Horizontal rules
     between rows read as deliberate instead of as leftover borders. */
  .cgrid{grid-template-columns:1fr;gap:0}
  /* The nth-child selectors above score higher than a bare .cnt, so a plain
     .cnt{border-left:none} here would lose to them no matter that it comes
     later. Every selector that set a border has to be named again. */
  .cnt,
  .cnt:nth-child(2n),
  .cnt:nth-child(2n+1),
  .cnt:nth-child(4n+1){border-left:none;padding:16px 0}
  .cnt+.cnt{border-top:1px solid rgba(255,255,255,.15)}

  .pgrid,.fgrid-2,.wgrid,.tgrid,.bgrid{grid-template-columns:1fr}
  /* One and a bit cards visible, which is the cue that the strip scrolls. */
  /* One whole card, nothing else. A sliver of the next one was doing the job of
     telling the visitor the strip moved, but it also meant no card on a phone
     was ever shown in full. The arrows below take over that job instead. */
  .carousel-track{gap:14px}
  .carousel-track>*{flex-basis:100%;min-width:0}

  /* Arrows on the left and right edges of the card, the same as the desktop
     overlay, only smaller. They sit just inside the card rather than outside
     it, because at one card per screen the card is the full width of the page
     and there is no outside left. */
  /* Raised off centre so they land on the product photograph rather than on
     the title underneath it. Half the card height is roughly where the image
     ends and the text begins, which is the one place they should not sit. */
  .carousel-nav{display:grid;width:38px;height:38px;top:34%}
  .carousel-nav.pv{left:6px}
  .carousel-nav.nx{right:6px}
  /* Dimmed rather than hidden at the ends. On the desktop overlay a vanishing
     arrow is tidy, but down here the pair is the only sign the strip scrolls,
     and half of it disappearing on the first card defeats the point. */
  .carousel-nav[disabled]{opacity:.35}
  .abt-vm,.abt-steps,.pcdben,.elig{grid-template-columns:1fr}
  .abt-facts-in{grid-template-columns:1fr;gap:18px;padding:24px 0}
  .qnote{padding:20px;gap:13px}
  .elig-col{padding:26px 22px}
  .faq-i summary{padding:17px 18px;font-size:14.8px}
  .faq-a{padding:0 18px 18px}
  .abt-facts{margin-top:36px;padding-top:32px}
  .abt-body>p,.legal-sec p{text-align:left}
  .legal-foot{padding:22px 20px}
  .vm{padding:28px 24px}
  .ctaband-btns{width:100%}
  .ctaband-btns .btn{flex:1;justify-content:center}
  /* Already one column from 860px down. Nothing to change here. */
  .cert-modal{padding:12px}
  .cert-modal-head{padding:12px 14px}
  .cert-modal-img{padding:10px}
  .cert-modal-box{max-height:calc(100svh - 24px)}
  /* Segments stay two across. Each card is only an icon and a name, and
     twelve of them stacked single file is a long scroll for little content. */
  .segs{grid-template-columns:repeat(2,1fr);gap:14px}
  .seg{padding:24px 14px}
  .seg h4{font-size:15px}

  .pfilter{grid-template-columns:1fr;gap:16px;padding:18px}
  .pf-search{padding-bottom:16px}
  .pf-reset{width:100%}
  .tabs{width:100%;overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap}

  /* Justified text needs a wide measure. At this width it opens visible
     gaps between words, so every justified block falls back to left. */
  .about>div>p,.ablist span,.f-about,.disc,.ci-val,
  .sp-block p,.entry p{text-align:left}

  /* The field was lopsided on a phone: the magnifier sat 16px in on the left
     while the blue button block stopped 5px short of the right edge, and the
     two padding values left the placeholder about 140px to live in. The
     decorative icon goes, the label becomes a magnifier, and what is left is
     16px of text inset on the left against a square button inset 4px on the
     right, which reads as even. */
  .axv-search-ic{display:none}
  .axv-search input[type=search]{height:46px;padding:0 50px 0 16px;font-size:14px}
  .axv-search button{width:38px;height:38px;padding:0;right:4px}
  .axv-search-txt{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(1px,1px,1px,1px);white-space:nowrap}
  .axv-search-go{display:inline-flex}

  .srch-ov{padding:8vh 16px 16px}
  .srch-ov-box{padding:30px 20px 26px}
  /* Matched to the box padding, so the close button is inset the same amount
     on the right as the heading is on the left. */
  .srch-ov-x{top:13px;right:13px;width:34px;height:34px}
  .srch-ov-box h2{font-size:21px}
  .srch-ov-box p{font-size:13.8px;margin-bottom:20px}
  .axv-modal{padding:14px}
  .axv-modal-box{padding:24px;max-height:calc(100svh - 28px)}
  .enq-map iframe{height:260px}
  .form{padding:24px}

  .fgrid{grid-template-columns:1fr;gap:34px;padding:48px 0 40px}
  .f-strip-in{grid-template-columns:1fr;gap:18px;padding:22px 0}
  .fbot{justify-content:flex-start}
  .topbar ul{display:none}
  .topbar .wrap{justify-content:center}
  /* "Enquire Now" was breaking across two lines beside the burger. Rather
     than shrink it into illegibility, it is dropped here: the same action is
     the first thing in the drawer footer, and the floating red button is on
     screen throughout. */
  .nav-cta{display:none}

  .ab-vis{padding:0 0 66px}
  .ab-sub{width:62%}
  .ab-main{aspect-ratio:4/3.2}
  .ab-badge{left:12px;top:16px;padding:14px 18px}
  .ab-badge b{font-size:24px}

  /* The table stops being a table and becomes a stacked list.
     Two columns cannot work here: the label column is 190px and set not to
     wrap, which on a 324px screen leaves about 100px for a composition that
     runs to ninety characters, so the value came out one or two words per line
     against a label that would not give way.
     Unstacking it was already half done, but the label kept the grey fill it
     had as a column header. Full width, that turned every label into a grey bar
     and the panel into a set of stripes. The label is now just a label: small,
     uppercase, sitting directly above its value, one row per fact. */
  .sp-table,.sp-table tbody,.sp-table tr,.sp-table th,.sp-table td{display:block}
  .sp-table tr{padding:13px 16px;border-bottom:1px solid var(--line)}
  .sp-table tr:last-child{border-bottom:none}
  .sp-table th{width:auto;background:none;border:none;padding:0 0 5px;
    white-space:normal;font-size:10.4px}
  .sp-table td{border:none;padding:0;font-size:14.4px;line-height:1.6}
  .phead{padding:48px 0}
}

/* ---- Small phones ---- */
@media(max-width:420px){
  :root{--secpad:54px}
  .wrap{padding:0 18px}
  .stitle{margin-bottom:40px}

  /* Stacked full-width buttons beat two cramped ones side by side. */
  .slide .cta{flex-direction:column;align-items:stretch}
  .slide .cta .btn{justify-content:center}
  .btn{padding:11px 20px;font-size:13.4px}
  .slide .tg{font-size:11px;padding:7px 16px;letter-spacing:.12em}

  .cnt-num{font-size:26px}
  .cnt-ic{width:38px;height:38px}
  .ab-badge{padding:12px 15px}
  .ab-badge b{font-size:21px}
  .form,.axv-modal-box{padding:20px}
  .ci{padding:18px 16px}

  /* Keep the floating pair clear of the thumb zone on a small screen. */

  .fabs{right:14px;bottom:14px;gap:8px}
  .fab-e,.fab-t{width:44px;height:44px}
}