/* ==========================================================================
   Cardox India — cardoxindia.in
   Brand navy #00285D (sampled from logo), green #138556
   ========================================================================== */

:root {
  --navy:        #00285D;
  --navy-deep:   #001B3F;
  --navy-mid:    #0A3A7A;
  --green:       #138556;
  --green-light: #1BA86C;
  --amber:       #F5A623;
  --ink:         #12202F;
  --body:        #43535F;
  --muted:       #6B7C8A;
  --line:        #DFE5EA;
  --bg-soft:     #F4F7F9;
  --white:       #FFFFFF;

  --max:    1200px;
  --gutter: 24px;

  /* System font stack, deliberately. Every visitor gets the best-drawn face their
     device already has — SF Pro on Apple, Segoe UI on Windows, Roboto on Android —
     with no download, no layout shift and no third-party request. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable",
          "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  /* Modular scale, 1.25 ratio, fluid between 380px and 1200px viewports */
  --step--1: clamp(0.87rem, 0.85rem + 0.10vw, 0.94rem);
  --step-0:  clamp(1.03rem, 1.00rem + 0.16vw, 1.13rem);
  --step-1:  clamp(1.19rem, 1.13rem + 0.29vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.30rem + 0.55vw, 1.78rem);
  --step-3:  clamp(1.69rem, 1.47rem + 0.98vw, 2.31rem);
  --step-4:  clamp(2.02rem, 1.63rem + 1.72vw, 3.00rem);
  --step-5:  clamp(2.41rem, 1.75rem + 2.87vw, 3.75rem);

  --shadow-sm: 0 1px 3px rgba(0,40,93,.08), 0 1px 2px rgba(0,40,93,.06);
  --shadow-md: 0 4px 16px rgba(0,40,93,.10);
  --shadow-lg: 0 12px 40px rgba(0,40,93,.16);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* proportional figures in prose, tabular in tables — set per element below */
  font-variant-numeric: proportional-nums;
  font-feature-settings: "kern" 1, "liga" 1;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;          /* stops one orphaned word on its own line */
}

/* Larger type needs tighter tracking and tighter leading; small type needs the
   opposite. Weight steps down as size steps down so hierarchy comes from scale,
   not from everything shouting at 800. */
h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.028em; line-height: 1.06; }
h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.022em; line-height: 1.12; }
h3 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.012em; line-height: 1.22; }
h4 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.008em; line-height: 1.3; }

p { margin: 0 0 1.15em; }

/* Measure: 60–75 characters is the readable range. Unconstrained text in a
   1200px container runs to 130+ and is genuinely tiring to read. */
.prose p, .prose li { max-width: 68ch; }
.section-head p     { max-width: 62ch; }
.section-head.center p { margin-left: auto; margin-right: auto; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow { max-width: 820px; }

section { padding: 84px 0; }
section.tight { padding: 56px 0; }

/* Two PLAIN sections stacked give 84px + 84px = 168px of nothing, which reads as
   a mistake rather than breathing room. Sections that carry a background class
   (.dark, .problems, .alt, .clients) still need their own padding, so this only
   targets the unstyled ones. */
section:not([class]) + section:not([class]) { padding-top: 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}
.eyebrow.on-dark { color: #6FD6A6; }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--body);
  font-weight: 400;
  letter-spacing: -0.004em;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 4px;
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.005em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--green-light); box-shadow: var(--shadow-lg); }

/* .btn-ghost is WHITE text — it only works on the navy hero and dark sections.
   On a light background it is invisible. Use .btn-outline there instead. */
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-mid); }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.topbar {
  background: var(--navy-deep);
  color: rgba(255,255,255,.82);
  font-size: .84rem;
  padding: 9px 0;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,.82); }
.topbar a:hover { color: #fff; }
.topbar-social { display: flex; gap: 16px; align-items: center; }

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
}
.logo img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: -0.003em;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a.active {
  color: #fff;
  border-bottom-color: var(--green-light);
  text-decoration: none;
}
.nav .btn { padding: 11px 22px; font-size: .92rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 4px;
  color: #fff;
  font-size: 1.4rem;
  padding: 4px 12px;
  cursor: pointer;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
/* The photograph was at .30 opacity under a heavy gradient, which left it a
   barely-visible smudge — part of why the page read as flat. Raised, and the
   gradient now stays opaque on the LEFT (so the headline keeps full contrast)
   while clearing on the right to let the vessels actually show. */
.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: .62;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              var(--navy) 26%,
              rgba(0,40,93,.86) 48%,
              rgba(0,27,63,.42) 78%,
              rgba(0,27,63,.28) 100%);
}
@media (max-width: 860px) {
  /* on mobile the text runs the full width, so the image must stay well back */
  .hero-media { opacity: .34; }
  .hero::after { background: linear-gradient(180deg, rgba(0,40,93,.92), rgba(0,27,63,.80)); }
}
.hero .wrap { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 96px; }
.hero-inner { max-width: 760px; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 .accent { color: #6FD6A6; display: block; }
.hero p {
  font-size: var(--step-1);
  line-height: 1.5;
  color: rgba(255,255,255,.9);
  max-width: 620px;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* A third button wrapped onto its own row and read as a mistake. The diagnostic
   sits under the buttons as a deliberate secondary line instead. */
.hero-aside {
  margin: 20px 0 0;
  color: #B9CBE2;
  font-size: var(--step--1);
}
.hero-aside a {
  color: #A9E9C9;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(169,233,201,.45);
  padding-bottom: 1px;
}
.hero-aside a:hover { border-bottom-color: #A9E9C9; }

.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(19,133,86,.22);
  border: 1px solid rgba(111,214,166,.45);
  color: #A9E9C9;
  border-radius: 100px;
  padding: 7px 18px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* ── Stats band ────────────────────────────────────────────────────────── */

.stats {
  background: var(--green);
  color: #fff;
  padding: 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.stat {
  padding: 34px 18px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.22);
}
.stat:last-child { border-right: none; }
.stat-num {
  display: block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.9);
  font-weight: 600;
}

/* ── Section headers ───────────────────────────────────────────────────── */

.section-head { max-width: 760px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: var(--step-1); line-height: 1.5; margin-bottom: 0; }

/* ── Problem cards ─────────────────────────────────────────────────────── */

.problems { background: var(--bg-soft); }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.problem {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber);
  border-radius: 6px;
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
}
.problem h3 { margin-bottom: .4em; }
.problem p { font-size: .97rem; margin-bottom: 0; color: var(--body); }

/* ── Service cards ─────────────────────────────────────────────────────── */

/* Flex rather than grid so a trailing part-row centres itself. Five cards in a
   3-wide grid left two hard left with a wide gap beside them; centring the
   orphans reads as deliberate instead of unfinished. */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
.card-grid > * {
  flex: 1 1 290px;
  max-width: 380px;
}
@media (max-width: 620px) {
  .card-grid > * { max-width: 100%; }
}

/* exactly two, side by side, rather than whatever the wrap decides */
.card-grid.two { max-width: 900px; margin: 0 auto; }
.card-grid.two > * { flex: 1 1 380px; max-width: none; }

/* ── Tool links under the enquiry form ─────────────────────────────────────
   The form column is much shorter than the column beside it, which left a tall
   white void. These fill it with the two things a visitor can do right there. */
.tool-links { margin-top: 26px; }
.tool-links h3 { margin: 0 0 4px; font-size: 1.14rem; color: var(--ink); }
.tool-links > p { margin: 0 0 16px; font-size: var(--step--1); color: var(--muted); }

.tool-link {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 12px;
  text-decoration: none;
  transition: box-shadow .14s ease, transform .14s ease;
}
.tool-link:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tool-link:last-child { margin-bottom: 0; }
.tl-title {
  display: block;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 3px;
}
.tl-title::after { content: " →"; color: var(--green); }
.tl-sub {
  display: block;
  font-size: var(--step--1);
  color: var(--body);
  line-height: 1.5;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-img { aspect-ratio: 16/10; background: var(--navy) center/cover; }
.card-body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .45em; }
.card-body p { font-size: var(--step-0); line-height: 1.55; flex: 1; }
.card-link { font-weight: 700; font-size: .95rem; }
.card-link::after { content: " →"; }

/* cards and page heads for topics with no genuine photograph yet —
   better an honest blank than the same picture reused everywhere */
.card.no-img .card-body { border-top: 4px solid var(--green); }
.page-head.plain { padding: 72px 0 66px; }
.page-head.plain::after { background: linear-gradient(100deg, var(--navy) 45%, var(--navy-mid) 100%); }

/* ── Before / after ────────────────────────────────────────────────────── */

.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.ba-grid figure { display: flex; flex-direction: column; }
/* photos are a mix of portrait and landscape — never force an aspect ratio,
   or portrait shots get their top and bottom cropped off */
.ba-grid img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
}

/* inside a narrow prose column the pair was cramped — break it out wider */
.prose .ba-grid {
  margin: 40px 0;
  width: 100vw;
  max-width: 1100px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 1180px) {
  .prose .ba-grid { width: 100%; max-width: 100%; left: auto; transform: none; }
}
@media (max-width: 620px) {
  .ba-grid { grid-template-columns: 1fr; }
}
.ba figure { margin: 0; }
.ba img { border-radius: 6px; border: 1px solid var(--line); width: 100%; }

/* ── Before / after slider ─────────────────────────────────────────────────
   Progressive enhancement over two stacked images. Until site.js adds .ready
   the two simply sit one above the other, which is what the page showed
   before the slider existed. */
.ba-slider {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  line-height: 0;
  margin: 32px 0 12px;
}
.ba-slider img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
/* The top layer is laid out at exactly the same width as the base image and
   then CLIPPED, rather than being resized to a pinned pixel width. Resizing it
   meant the two images could differ by a fraction of a pixel in height and
   leave a hairline of the wrong photo along the bottom edge. Clipping cannot
   drift: both images are always laid out identically. */
.ba-slider .ba-top {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 50% 0 0);
}
.ba-slider .ba-top img { width: 100%; max-width: none; }
.ba-slider .ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,40,93,.25);
  cursor: ew-resize;
}
.ba-slider .ba-handle:focus-visible { outline: 3px solid var(--green); }
.ba-slider .ba-handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300285D'%3E%3Cpath d='M8.5 7 4 12l4.5 5V7zm7 0v10l4.5-5-4.5-5z'/%3E%3C/svg%3E") center/24px no-repeat;
  box-shadow: 0 2px 8px rgba(0,40,93,.3);
}
.ba-slider .ba-tag {
  position: absolute;
  bottom: 10px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,27,63,.82);
  border-radius: 4px;
  line-height: 1.6;
  pointer-events: none;
}
.ba-slider .ba-tag.l { left: 10px; }
.ba-slider .ba-tag.r { right: 10px; }

.ba-slider:not(.ready) .ba-handle { display: none; }
.ba-slider:not(.ready) .ba-top { position: static; width: 100%; }
.ba-slider:not(.ready) .ba-tag { display: none; }

.ba-slider + figcaption,
.ba-caption {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.5;
  margin: 12px 0 0;
}
/* on the navy proof band the caption needs to be legible against the dark */
.dark .ba-caption { color: rgba(255,255,255,.72); }

/* ── Technical cutaway diagram ─────────────────────────────────────────────
   Wider than the prose column so the labels stay legible, and it scrolls
   sideways on narrow screens rather than shrinking the text to nothing. */
.cutaway {
  margin: 32px 0 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 22px 20px;
}
.prose .cutaway {
  width: 100vw;
  max-width: 1000px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 1060px) {
  .prose .cutaway { width: 100%; max-width: 100%; left: auto; transform: none; }
}
.cutaway img { display: block; width: 100%; min-width: 720px; height: auto; }
.cutaway > div { overflow-x: auto; }
.cutaway figcaption {
  margin-top: 16px;
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.55;
  text-align: center;
}

/* ── A single site photograph inside prose ─────────────────────────────────
   Portrait phone shots would run the full column height and dominate the page,
   so a portrait photo is capped and floated alongside the text on wide screens
   and simply stacks on mobile. */
.photo { margin: 32px 0; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.photo figcaption {
  margin-top: 10px;
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.5;
}
.photo.portrait { max-width: 380px; }
@media (min-width: 860px) {
  .photo.portrait.right { float: right; margin: 6px 0 24px 32px; }
  .photo.portrait.left  { float: left;  margin: 6px 32px 24px 0; }
}
/* stop a float bleeding past the section that owns it */
.prose h2 { clear: both; }
.ba figcaption {
  margin-top: 12px;
  font-size: .92rem;
  color: var(--muted);
  font-weight: 600;
}

/* ── Clients ───────────────────────────────────────────────────────────── */

.clients { background: var(--bg-soft); }
.client-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}
.client-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 30px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .04em;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
}
/* Was 0.95rem running the full container width, so it read as a stray caption
   and its right edge ran under the fixed contact rail. Constrained, centred and
   brought up to body size so it reads as a proper closing line. */
.client-note {
  text-align: center;
  margin: 34px auto 0;
  max-width: 62ch;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--body);
}

/* ── Dark CTA / split ──────────────────────────────────────────────────── */

.dark { background: var(--navy); color: rgba(255,255,255,.88); }
.dark h2, .dark h3 { color: #fff; }
.dark .lead { color: rgba(255,255,255,.85); }

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.checklist { list-style: none; padding: 0; margin: 0 0 28px; }
.checklist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 13px;
  font-size: 1.02rem;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 21px; height: 21px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Form ──────────────────────────────────────────────────────────────── */

.form-card {
  background: #fff;
  border-radius: 8px;
  padding: 38px;
  box-shadow: var(--shadow-lg);
  color: var(--body);
}
.form-card h3 { margin-bottom: .3em; }
.form-card > p { font-size: .96rem; color: var(--muted); }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: .86rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(19,133,86,.14);
}
.field textarea { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .82rem; color: var(--muted); margin: 12px 0 0; }

/* ── Video ─────────────────────────────────────────────────────────────── */

.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy-deep);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Breadcrumb ────────────────────────────────────────────────────────── */

.page-head {
  background: var(--navy);
  color: #fff;
  padding: 62px 0 58px;
  position: relative;
  overflow: hidden;
}
.page-head-media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; }
.page-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--navy) 40%, rgba(0,40,93,.7) 100%); }
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: #fff; max-width: 850px; }
.page-head p { color: rgba(255,255,255,.88); max-width: 700px; font-size: 1.12rem; margin-bottom: 0; }
.crumb { font-size: .86rem; color: rgba(255,255,255,.66); margin-bottom: 16px; }
.crumb a { color: rgba(255,255,255,.66); }
.crumb a:hover { color: #fff; }

/* ── Prose ─────────────────────────────────────────────────────────────── */

.prose h2 { margin-top: 1.9em; margin-bottom: .45em; }
.prose h3 { margin-top: 1.5em; margin-bottom: .4em; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose table { font-variant-numeric: tabular-nums; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .96rem; }
.prose th, .prose td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { background: var(--bg-soft); font-weight: 700; color: var(--ink); }
/* Row headers (the sector / material name in the first column) read as plain
   body text otherwise. Bold and dark, but no grey fill — that belongs to the
   header row alone, or the whole first column looks like a second header. */
.prose tbody th[scope="row"] {
  background: transparent;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .prose tbody th[scope="row"] { white-space: normal; }
}

.callout {
  background: var(--bg-soft);
  border-left: 4px solid var(--green);
  padding: 24px 28px;
  border-radius: 0 6px 6px 0;
  margin: 32px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* ── Spec table ────────────────────────────────────────────────────────── */

.spec { width: 100%; border-collapse: collapse; }
.spec td { font-variant-numeric: tabular-nums; }
.spec th, .spec td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.spec th { width: 42%; font-weight: 700; color: var(--ink); background: var(--bg-soft); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.7); padding: 66px 0 0; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 46px; }
.site-footer h3 {
  color: #fff;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: #fff; }
.footer-logo img { height: 44px; margin-bottom: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .86rem;
  color: rgba(255,255,255,.5);
}
.social-row { display: flex; gap: 12px; margin-top: 16px; }
.social-row a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.social-row a:hover { background: var(--green); border-color: var(--green); }
.social-row svg { width: 18px; height: 18px; fill: currentColor; }

/* ── Problem diagrams ──────────────────────────────────────────────────── */

.diagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.diagram {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
/* illustrations are stills from the Cardox India animations, on white */
.diagram-img { background: #fff; border-bottom: 1px solid var(--line); }
.diagram-img img { width: 100%; height: auto; display: block; }
.diagram-body { padding: 22px 22px 26px; }
.diagram-body h3 { font-size: var(--step-2); margin-bottom: .4em; }
.diagram-body p { font-size: var(--step-0); line-height: 1.55; margin-bottom: 0; }
.diagram-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #B4741A;
  background: #FDF3E2;
  border-radius: 3px;
  padding: 4px 9px;
  margin-bottom: 10px;
}

/* ── Benefit grid ──────────────────────────────────────────────────────── */

/* Centres a trailing part-row instead of leaving it hard left with a gap. The
   column count shifts with viewport width, so removing a card can never
   guarantee a full last row on its own — this handles every width. */
.benefit-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.benefit-grid > * {
  flex: 1 1 220px;
  max-width: 300px;
}

/* Inside the narrow prose column only three cards fit, so a fourth dropped onto
   its own line. Break the grid out wider than the text column — same trick the
   before/after pairs use — so four sit side by side on a desktop. */
.prose .benefit-grid {
  width: 100vw;
  max-width: 1100px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 30px 0;
}
.prose .benefit-grid > * { flex: 1 1 210px; }

@media (max-width: 1180px) {
  .prose .benefit-grid { width: 100%; max-width: 100%; left: auto; transform: none; }
}
/* tablet: two up, which is comfortable rather than four cramped columns */
@media (max-width: 900px) {
  .benefit-grid > * { flex: 1 1 260px; max-width: none; }
  .prose .benefit-grid > * { flex: 1 1 260px; }
}
/* phone: one per row, full width */
@media (max-width: 560px) {
  .benefit-grid > * { flex: 1 1 100%; max-width: 100%; }
  .prose .benefit-grid > * { flex: 1 1 100%; }
}
.benefit {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 0 6px 6px 0;
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.benefit h3 {
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .4em;
  letter-spacing: -0.01em;
}
.benefit p { font-size: var(--step-0); line-height: 1.55; margin: 0; }
.dark .benefit {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  border-left-color: var(--green-light);
  box-shadow: none;
}
.dark .benefit h3 { color: #fff; }
.dark .benefit p { color: rgba(255,255,255,.82); }

/* ── Video cards ───────────────────────────────────────────────────────── */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.video-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Animations are square (1080×1080); explainer is 16:9. `contain` on a navy
   field shows every frame in full instead of cropping the top and bottom. */
.video-card video {
  width: 100%;
  display: block;
  background: var(--navy-deep);
  aspect-ratio: 4/3;
  object-fit: contain;
}
.video-card-body { padding: 22px 24px 26px; }
.video-card-body h3 { font-size: var(--step-1); margin-bottom: .35em; }
.video-card-body p { font-size: .94rem; margin-bottom: 0; }
.dark .video-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.dark .video-card-body p { color: rgba(255,255,255,.82); }

/* ── Client strip (upgraded) ───────────────────────────────────────────── */

/* Ten names on a fixed 5-wide grid, so both rows fill completely. auto-fit left
   ragged empty cells at common widths and the band read as half-finished. */
.client-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.client-cell {
  padding: 34px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  transition: background .16s ease;
}
.client-cell:hover { background: var(--bg-soft); }
.client-name {
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.client-sub {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 700;
}
/* 10 names divide cleanly by 5 and by 2 — never by 3 or 4, so no other step. */
@media (max-width: 860px) {
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .client-cell { padding: 24px 14px; }
  .client-name { font-size: 1.02rem; }
}

/* ── Sectors band ──────────────────────────────────────────────────────────
   Cement is the nameable work; everything else is under confidentiality. A
   single grey sentence made the rest of the business look like it did not
   exist, so the sectors are stated properly with what we actually do in each. */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.sector {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 8px;
  padding: 22px 22px 24px;
}
.sector h3 {
  margin: 0 0 8px;
  font-size: 1.06rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.sector p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--body);
  line-height: 1.55;
}
.sector .sector-tag {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── Comparison table ──────────────────────────────────────────────────── */

.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.compare th, .compare td {
  padding: 17px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: .98rem;
}
.compare thead th {
  background: var(--navy);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-bottom: none;
}
.compare thead th:first-child { background: var(--navy-deep); }
.compare thead th.ours { background: var(--green); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: none; }
.compare tbody th {
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-soft);
  width: 24%;
}
.compare td.old { color: var(--body); }
.compare td.ours {
  background: rgba(19,133,86,.05);
  color: var(--ink);
  font-weight: 600;
  border-left: 3px solid rgba(19,133,86,.28);
}
.compare-note { font-size: .9rem; color: var(--muted); margin-top: 16px; text-align: center; }

/* ── Scale / capability band ───────────────────────────────────────────── */

.scale-band {
  background: var(--navy-deep);
  color: #fff;
  border-radius: 8px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.scale-item .scale-num {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  color: #6FD6A6;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.scale-item p { margin: 8px 0 0; font-size: .95rem; color: rgba(255,255,255,.82); }

/* ── Flow-problem cards ────────────────────────────────────────────────── */

/* Seven cards never divide evenly into a grid — the last row left two cards
   hard left with a wide empty gap beside them. Flex-wrap centres the orphans
   instead, so the trailing row sits under the middle of the row above.
   max-width stops those last two stretching to fill the line. */
.flow-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 24px;
}
.flow-grid > .flow-card {
  flex: 1 1 200px;
  max-width: 260px;
}
@media (max-width: 620px) {
  .flow-grid > .flow-card { max-width: 100%; }
}
.flow-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 22px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.flow-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.flow-img { text-align: center; margin-bottom: 18px; }
.flow-img img { width: 84px; height: auto; display: inline-block; }
.flow-card h3 {
  font-size: var(--step-1);
  margin-bottom: .4em;
  text-align: center;
}
.flow-card p { font-size: .96rem; line-height: 1.5; margin: 0; }

@media (max-width: 700px) {
  .flow-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 16px; }
  .flow-card { padding: 20px 16px 22px; }
  .flow-img img { width: 66px; }
}

/* ── Process line figure + numbered points ─────────────────────────────── */

.line-figure {
  margin: 0 0 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.line-figure img { width: 100%; min-width: 620px; height: auto; display: block; }

.point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px 30px;
}
.point-list li { display: flex; gap: 14px; align-items: flex-start; }
.pt-num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--navy);
  font-weight: 800;
  font-size: .92rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.pt-body { font-size: var(--step-0); line-height: 1.5; }
.pt-body strong { color: var(--ink); }

/* ── Alphabetical material list ────────────────────────────────────────── */

.mat-list {
  columns: 4;
  column-gap: 34px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mat-list li {
  break-inside: avoid;
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--body);
}
.mat-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 14px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
}
@media (max-width: 980px) { .mat-list { columns: 3; } }
@media (max-width: 700px) { .mat-list { columns: 2; column-gap: 22px; } }
@media (max-width: 420px) { .mat-list { columns: 1; } }

/* ── Material columns ──────────────────────────────────────────────────── */

.mat-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.mat-col h3 {
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--green);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}
.mat-col ul { list-style: none; padding: 0; margin: 0; }
.mat-col li {
  padding: 7px 0 7px 22px;
  position: relative;
  font-size: .97rem;
  border-bottom: 1px solid var(--line);
}
.mat-col li:last-child { border-bottom: none; }
.mat-col li::before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* ── Countries ─────────────────────────────────────────────────────────── */

.country-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.country-chip {
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 100px;
  padding: 8px 18px;
  font-size: .9rem;
  font-weight: 600;
}

/* ── FAQ accordion ─────────────────────────────────────────────────────── */

.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 54px 20px 24px;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  list-style: none;
  position: relative;
  transition: background .14s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-soft); }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--green);
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.faq-answer { padding: 20px 24px 4px; }
.faq-answer p { font-size: 1rem; }
.faq-answer p:last-child { margin-bottom: 1.1em; }

/* ── Inline contact icons ──────────────────────────────────────────────── */

.ico-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.13em;
  margin-right: .5em;
  fill: currentColor;
  opacity: .75;
  flex: none;
}
a:hover .ico-inline { opacity: 1; }
.site-footer .ico-inline { opacity: .6; }
.site-footer a:hover .ico-inline { opacity: .9; }

/* ── Inline social links with brand mark ───────────────────────────────── */

.social-links { list-style: none; padding: 0; margin: 0; }
.social-links li { margin-bottom: 12px; }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 18px 12px 12px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.social-link:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.social-link .mark {
  width: 34px; height: 34px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.social-link .mark svg { width: 19px; height: 19px; fill: #fff; }
.social-link .yt { background: #FF0000; }
.social-link .li { background: #0A66C2; }
.social-link:hover .yt { box-shadow: 0 0 0 3px rgba(255,0,0,.15); }
.social-link:hover .li { box-shadow: 0 0 0 3px rgba(10,102,194,.15); }
.social-link .label { display: block; line-height: 1.3; }
.social-link .label small {
  display: block;
  font-weight: 500;
  font-size: .86rem;
  color: var(--muted);
}

/* ── FAQ table of contents ─────────────────────────────────────────────── */

.faq-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.faq-toc a {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: background .14s ease, border-color .14s ease;
}
.faq-toc a:hover { background: var(--green); border-color: var(--green); color: #fff; text-decoration: none; }
.faq-toc a span { font-weight: 600; opacity: .6; }
.faq-toc a:hover span { opacity: .85; }

/* question sits in an h3 for semantic weight, but must look like the summary */
.faq-item summary h3 {
  display: inline;
  margin: 0;
  font-size: var(--step-1);
  font-weight: 700;
  color: inherit;
  letter-spacing: 0;
  line-height: inherit;
}
.faq-item:target { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,133,86,.16); }

/* ── Fixed contact rail (right edge) ───────────────────────────────────── */

.rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 190;
  display: flex;
  flex-direction: column;
  border-radius: 6px 0 0 6px;
  overflow: hidden;
  box-shadow: -3px 4px 18px rgba(0,40,93,.22);
}
.rail a {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: background .16s ease, width .16s ease;
}
.rail a:last-child { border-bottom: none; }
.rail a:hover { text-decoration: none; }
.rail svg { width: 21px; height: 21px; fill: currentColor; }
.rail .r-call { background: var(--green); }
.rail .r-call:hover { background: var(--green-light); }
.rail .r-yt:hover { background: #C4302B; }
.rail .r-li:hover { background: #0A66C2; }
.rail .r-mail:hover { background: var(--navy-mid); }

/* ── Sticky mobile CTA ─────────────────────────────────────────────────── */

.sticky-cta { display: none; }

@media (max-width: 780px) {
  .rail { display: none; }   /* sticky bar carries Call + Contact on mobile */
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3) { border-right: none; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  section { padding: 60px 0; }

  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow-lg);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav a:hover, .nav a.active { border-bottom-color: rgba(255,255,255,.08); }
  .nav .btn { margin-top: 14px; text-align: center; }
  .nav-toggle { display: block; }
  .site-header .wrap { position: relative; min-height: 66px; }

  .topbar { font-size: .78rem; }
  .topbar .wrap { justify-content: center; }

  .hero .wrap { padding-top: 62px; padding-bottom: 62px; }
  .hero p { font-size: 1.08rem; }
  .hero-actions .btn { width: 100%; text-align: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.22); padding: 24px 12px; }

  .ba-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .footer-grid { grid-template-columns: 1fr; }

  body { padding-bottom: 68px; }
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,.14);
    padding: 10px 14px;
    gap: 10px;
  }
  .sticky-cta a {
    flex: 1;
    text-align: center;
    padding: 13px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: .92rem;
  }
  .sticky-cta .s-quote { background: var(--green); color: #fff; }
  .sticky-cta .s-wa { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
}