/* ==========================================================================
   EAW — DESIGN SYSTEM
   Loaded after everything else, so it re-skins the site without a rebuild.

   THE COLOUR ARGUMENT, IN SHORT
   Every water site is blue. Blue backgrounds, blue headers, blue buttons, blue
   cards. It is the single reason the category all looks the same, and it is why
   this site reads as ordinary however good the content is.

   So: the page stops being blue. The logo stays blue.

   Ink is a deep blue-black with a green undertone — the colour of water at
   depth, not the colour of a water logo. Paper is warm off-white rather than
   clinical white, which is the cheapest premium signal there is and almost
   nobody in Indian B2B uses it. Brass is the accent, because it reads as
   editorial authority and legacy — and because in a room full of blue, warm
   metal is the thing that gets noticed.

   The logo's #0F5696 becomes structural: links, the mark itself. Used as an
   accent rather than a wash.
   ========================================================================== */

:root {
  /* --- ink: depth, not navy ------------------------------------------- */
  --ink:        #0A1620;   /* headlines, dark sections */
  --ink-2:      #12222E;   /* raised dark surfaces */
  --ink-3:      #1B2F3D;   /* dark borders */

  /* --- paper: warm, not clinical -------------------------------------- */
  --paper:      #FDFCFA;
  --surface:    #F4F1EC;   /* warm section bands */
  --surface-2:  #EDE8E0;
  --line:       #DED7CC;
  --line-soft:  #EDE8E0;

  /* --- brand blue, kept for the mark and for links -------------------- */
  --brand:      #0F5696;   /* exactly the logo */
  --brand-lift: #1A6FBB;
  --brand-wash: #EAF1F8;

  /* --- brass: the accent that makes it not-another-water-site --------- */
  --brass:      #A8781F;
  --brass-lift: #C89434;
  --brass-wash: #F7F0E1;

  /* --- supporting ------------------------------------------------------ */
  --steel:      #5A6B76;
  --steel-soft: #8A99A3;
  --green:      #1B6B4A;
  --red:        #A32B22;

  /* legacy names still referenced across the older stylesheets */
  --deep: var(--ink-2);
  --blue: var(--brand);
  --blue-dk: #0C4578;
  --blue-wash: var(--brand-wash);
  --gold: var(--brass);
  --gold-wash: var(--brass-wash);

  --r: 5px;
  --r-lg: 10px;
  --shadow-1: 0 1px 2px rgba(10,22,32,.05), 0 4px 14px rgba(10,22,32,.05);
  --shadow-2: 0 2px 6px rgba(10,22,32,.07), 0 18px 44px rgba(10,22,32,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- TYPE
   One scale, fluid, with tighter tracking as the size goes up. Large type
   set at default letter-spacing is the commonest reason a site reads as
   amateur — headlines need to be pulled in, not left at body spacing. */
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased }

h1, .h1 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.028em; font-weight: 700 }
h2, .h2 { font-size: clamp(23px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.021em; font-weight: 700 }
h3, .h3 { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.28; letter-spacing: -.012em; font-weight: 600 }
.lede   { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62; color: var(--steel) }

.kicker {
  font: 600 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass);
}

/* ------------------------------------------------------------- SURFACES
   Depth from layered shadow and a warm base, not from borders. The old site
   had 47 border rules; borders everywhere is what makes a page look like a
   form rather than a publication. */
.card, .widget, .rec {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.card:hover, .rec:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--line);
}

.section.band { background: var(--surface) }
.hubhead {
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(15,86,150,.22), transparent 58%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  padding-block: clamp(38px, 5vw, 70px);
}
.hubhead h1, .hubhead h2 { color: #fff }
.hubhead .lede { color: #A9BDCA }
.hubhead .kicker { color: var(--brass-lift) }

/* ------------------------------------------------------------- CONTROLS */
.btn {
  border-radius: var(--r); font-weight: 600; letter-spacing: -.005em;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px) }
.btn:active { transform: translateY(0) }
.btn.gold, .btn.brass {
  background: var(--brass); border-color: var(--brass); color: #fff;
  box-shadow: 0 2px 10px rgba(168,120,31,.28);
}
.btn.gold:hover, .btn.brass:hover { background: var(--brass-lift); border-color: var(--brass-lift) }

/* A link should say it is a link without shouting. */
a { color: var(--brand) }
.prose a, .dek a {
  background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s var(--ease);
  text-decoration: none;
}
.prose a:hover, .dek a:hover { background-size: 100% 1.5px }

/* ---------------------------------------------------------------- LOGO
   Vector, so it is sharp at any size and on any screen. The PNG it replaces
   was 155 KB and soft on a retina display; this is 7.5 KB and exact. */
.brand-logo, .brand img { height: 46px; width: auto; display: block }
@media (max-width: 860px) { .brand-logo, .brand img { height: 36px } }
.foot .brand-logo, .foot img.brand-logo { height: 40px }

/* --------------------------------------------------------------- MOTION */
@media (prefers-reduced-motion: no-preference) {
  .section > .wrap > * { animation: eawRise .6s var(--ease) both }
  @keyframes eawRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
}

/* Focus that is visible without being ugly — this is also the accessibility
   requirement people skip. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .card, .card:hover, .btn, .btn:hover { transform: none !important; transition: none !important }
  .section > .wrap > * { animation: none }
}

/* ===================== THE ECOSYSTEM BAND =====================
   Four properties, one family. The publisher's own card is visually anchored
   so a visitor understands where they are and what the rest belong to. */
.family { background: var(--ink); color: #fff; padding-block: clamp(46px, 5.5vw, 80px); position: relative; overflow: hidden }
.family::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 15% -10%, rgba(15,86,150,.30), transparent 62%);
}
.family > .wrap { position: relative; z-index: 1 }
.family-head { max-width: 62ch; margin-bottom: clamp(26px, 3vw, 44px) }
.family-head h2 { color: #fff; margin: 6px 0 12px }
.family-head .lede { color: #A9BDCA }

.family-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-lg); overflow: hidden }
.fam { background: var(--ink); padding: 26px 24px 24px; display: flex; flex-direction: column;
  transition: background .3s var(--ease) }
.fam:hover { background: var(--ink-2) }
.fam-home { background: var(--ink-2); box-shadow: inset 3px 0 0 var(--brass) }
.fam-tag { font: 600 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-lift); margin: 0 0 12px }
.fam-home .fam-tag { color: var(--brass-lift) }
.fam h3 { color: #fff; font-size: 18px; margin: 0 0 9px; letter-spacing: -.015em }
.fam p { color: #93A9B8; font-size: 14px; line-height: 1.58; margin: 0 0 18px; flex: 1 }
.fam-go { color: #fff; font: 600 13px var(--sans); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 2px; align-self: flex-start;
  transition: border-color .25s var(--ease), color .25s }
.fam-go:hover { color: var(--brass-lift); border-color: var(--brass-lift) }

@media (max-width: 1000px) { .family-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 600px)  { .family-grid { grid-template-columns: 1fr } }

/* ===================== MEGA MENU =====================
   Six items means each menu can afford to breathe. */
.mainnav .mega {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-2);
  padding: 26px 30px;
}
.mainnav .mega h5 {
  font: 600 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel-soft); margin: 0 0 12px;
}
.mainnav .mega a { color: var(--ink); text-decoration: none; transition: color .2s }
.mainnav .mega a:hover { color: var(--brand) }
.mainnav .mega .promo { background: var(--surface); border-radius: var(--r); padding: 18px 20px }
.mainnav .mega .promo p { font-size: 13.5px; line-height: 1.55; color: var(--steel) }
.mainnav > div > ul > li > a { letter-spacing: .01em }

/* ===================== CARD INTERNALS =====================
   The base .card was written as a list item: a bottom border and bottom
   padding, no side padding, because nothing was ever drawn down the sides.
   Turning it into a boxed card without adding that padding is what pushed the
   text against the edge. */
.card {
  padding: 0 18px 18px;
  border-bottom: 1px solid var(--line-soft);   /* the box border, not a divider */
  gap: 8px;
  overflow: hidden;
}

/* The image still runs edge to edge — a boxed card with a floating, inset
   thumbnail looks weaker than a full-bleed one. Pull it back out through the
   padding rather than removing the padding. */
.card > a:first-child,
.card > img:first-child,
.card > .ph:first-child {
  margin: 0 -18px 10px;
  width: calc(100% + 36px);
  max-width: none;
  border-radius: 0;
}
.card > a:first-child img { border-radius: 0 }

/* First text element after the image needs no extra top margin. */
.card > .kicker:first-child { margin-top: 18px }
.card > h3:first-child { margin-top: 18px }

.card h3 { font-size: 17px; line-height: 1.32; letter-spacing: -.012em; margin: 0 }
.card .dek { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0 }
.card .kicker { margin: 0 }
.card > p.sm.muted:last-child { margin: 0; padding-top: 2px; font-size: 12.5px }

/* The compact variant carries no image, so it needs its own top padding. */
.card.compact { padding-top: 18px }

/* Cards used inside a plain list, with no grid around them, keep the old
   divider behaviour rather than becoming boxes. */
.sitem .card, .list-plain .card {
  padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none; background: none;
}
.sitem .card > a:first-child, .list-plain .card > a:first-child { margin: 0 0 10px; width: 100% }

/* Visually hidden, still read by search engines and screen readers. Used for
   the homepage h1: the page needs to declare what it is without a banner
   headline competing with the lead story. */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Filter row on a listing page. Dark headers need light controls. */
.art-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; max-width: 620px }
.art-filter input, .art-filter select {
  padding: 9px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r);
  background: rgba(255,255,255,.07); color: #fff; font: 14px var(--sans); min-width: 0;
}
.art-filter input { flex: 1; min-width: 180px }
.art-filter input::placeholder { color: rgba(255,255,255,.5) }
.art-filter select option { color: var(--ink) }
.art-filter input:focus, .art-filter select:focus {
  outline: none; border-color: var(--brass); background: rgba(255,255,255,.12);
}

/* ===================== POSITIONING LINE =====================
   Under the nav, above the hero. Its whole job is to answer "what is this
   site" before the lead story asks for attention. Deliberately quiet — a big
   brand banner here pushes the journalism below the fold, which is what makes
   most trade sites read as brochures. */
.posline { background: var(--paper); border-bottom: 1px solid var(--line-soft);
  padding: clamp(18px, 2.2vw, 30px) 0 }
.posline h1 {
  font-size: clamp(19px, 2vw, 27px); line-height: 1.2; letter-spacing: -.022em;
  margin: 0 0 6px; font-weight: 700; color: var(--ink);
}
.posline h1 em { font-style: normal; color: var(--brand) }
.posline p { margin: 0; font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.55;
  color: var(--steel); max-width: 76ch }
@media (max-width: 640px) {
  .posline { padding: 15px 0 }
  .posline h1 { font-size: 18px }
  .posline p { font-size: 13px }
}

/* ===================== WATER ANSWERS (/ufaq/) =====================
   76,130 impressions a year arrive here. The old page was a plugin list;
   this is the same content given a reason to be read. */
.faq-head {
  background:
    radial-gradient(80% 120% at 12% -20%, rgba(15,86,150,.26), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff; padding-block: clamp(40px, 5vw, 76px);
}
.faq-head h1 { color: #fff; margin: 6px 0 14px; max-width: 20ch }
.faq-head .lede { color: #A9BDCA; max-width: 60ch }
.faq-head .kicker { color: var(--brass-lift) }

.faq-list { max-width: 78ch; margin: 0 auto }
.faq-item {
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 22px 48px 22px 0; position: relative;
  font: 600 clamp(17px, 1.5vw, 21px)/1.35 var(--display); letter-spacing: -.015em;
  color: var(--ink); transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary:hover { color: var(--brand) }
/* The marker is drawn, not a font glyph, so it never shifts between platforms. */
.faq-item summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass);
  transform: translateY(-70%) rotate(45deg); transition: transform .28s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg) }
.faq-item[open] summary { color: var(--brand) }

.faq-body { padding: 0 48px 26px 0; max-width: 68ch }
.faq-body p {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.7;
  color: #1A2A35; margin: 0 0 16px;
}
.faq-more {
  font: 600 13px var(--sans); color: var(--brand); text-decoration: none;
  border-bottom: 1px solid rgba(15,86,150,.3); padding-bottom: 2px;
  transition: border-color .2s var(--ease);
}
.faq-more:hover { border-color: var(--brand) }

.faq-ask {
  max-width: 78ch; margin: clamp(36px, 4vw, 60px) auto 0;
  background: var(--surface); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px);
}
.faq-ask h3 { margin: 0 0 8px }
.faq-ask p { color: var(--steel); margin: 0 0 18px; max-width: 56ch }

@media (max-width: 640px) {
  .faq-item summary { font-size: 16.5px; padding-right: 38px }
  .faq-body { padding-right: 0 }
  .faq-body p { font-size: 16.5px }
}

/* ===================== COOKIE NOTICE =====================
   Bottom bar, not a modal. Google demotes pages that cover the content with an
   interstitial on mobile, and 1.35M impressions ride on that. */
.eaw-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--ink); color: #D6E2EA;
  border-top: 2px solid var(--brass);
  padding: 14px clamp(16px, 3vw, 32px);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  box-shadow: 0 -8px 30px rgba(10,22,32,.22);
}
.eaw-consent[hidden] { display: none }
.eaw-consent p { margin: 0; flex: 1; min-width: 240px; font-size: 13.5px; line-height: 1.55 }
.eaw-consent a { color: var(--brass-lift); text-decoration: underline }
.eaw-consent-btns { display: flex; gap: 8px; flex-shrink: 0 }
.eaw-consent .btn.ghost { color: #D6E2EA; border-color: rgba(255,255,255,.3); background: none }
.eaw-consent .btn.ghost:hover { border-color: #fff; color: #fff }
@media (max-width: 520px) {
  .eaw-consent { padding: 12px 16px; gap: 10px }
  .eaw-consent p { font-size: 12.5px }
  .eaw-consent-btns { width: 100%; }
  .eaw-consent-btns .btn { flex: 1 }
}