/* ===========================================================
   Escem Water Engineers — shared stylesheet
   Light, brochure-matched. Single committed theme.
   =========================================================== */

:root{
  /* brochure palette */
  --white:#FFFFFF;
  --mist:#F3F8FB;
  --mist-deep:#E8F2F8;
  --line:#DBE7EF;

  --navy:#123A63;
  --ink:#435663;
  --muted:#7B8FA0;

  --blue-deep:#2B4E9B;
  --blue:#2E7CC0;
  --sky:#56BEDC;
  --green:#7CB92E;
  --green-deep:#4E9B3C;

  --display:"Avenir Next","Avenir","Futura","Century Gothic","Segoe UI",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  --t-hero:clamp(2.3rem,5vw,3.9rem);
  --t-h1:clamp(2rem,4vw,3rem);
  --t-h2:clamp(1.55rem,2.9vw,2.25rem);
  --t-h3:1.35rem;
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  --hero-pt:clamp(100px,12vw,124px);
  --water-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='66' viewBox='0 0 132 66'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M0 22c16.5 0 16.5 13 33 13s16.5-13 33-13 16.5 13 33 13 16.5-13 33-13'/%3E%3Cpath d='M0 48c16.5 0 16.5 13 33 13s16.5-13 33-13 16.5 13 33 13 16.5-13 33-13'/%3E%3C/g%3E%3C/svg%3E");
  --gut:clamp(20px,4vw,48px);
  --maxw:1180px;
  --r:6px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--display);
  color:var(--navy);
  font-weight:600;
  line-height:1.15;
  text-wrap:balance;
  letter-spacing:-.01em;
}
/* One size per level, set here and nowhere else. Component rules below only
   adjust margins — the moment one of them sets its own font-size, that heading
   drifts from its siblings on other pages. */
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}

p{margin:0}
img{max-width:100%;display:block}

a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- shared type roles ---------- */

.eyebrow{
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin-bottom:14px;
}
.eyebrow--green{color:var(--green-deep)}

.lede{font-size:1.125rem;color:var(--ink);max-width:62ch}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:var(--t-sm);
  font-weight:600;
  text-decoration:none;
  padding:13px 26px;
  border-radius:var(--r);
  border:1.5px solid var(--blue);
  color:var(--blue);
  background:transparent;
  transition:background .2s,color .2s,border-color .2s;
  cursor:pointer;
}
.btn:hover{background:var(--blue);color:var(--white)}

.btn--solid{background:var(--blue);color:var(--white)}
.btn--solid:hover{background:var(--blue-deep);border-color:var(--blue-deep)}

.btn--green{border-color:var(--green-deep);color:var(--green-deep)}
.btn--green:hover{background:var(--green-deep);color:var(--white)}

.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- floating brand + right-hand icon rail ---------- */

.hdr{display:contents}

.brandfloat{
  position:fixed;
  top:clamp(14px,1.8vw,26px);
  left:clamp(16px,2.4vw,40px);
  z-index:70;
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  border:1px solid rgba(18,58,99,.10);
  border-radius:100px;
  padding:8px 20px 8px 10px;
  box-shadow:0 8px 24px -14px rgba(18,58,99,.55);
  transition:box-shadow .25s,background .25s;
}
.brandfloat:hover{background:#FFFFFF;box-shadow:0 12px 30px -14px rgba(18,58,99,.6)}

.brand__mark{display:block;width:auto;height:56px;flex:none}
.brandfloat__txt{display:flex;flex-direction:column;line-height:1.1}
.brandfloat__name{
  font-family:var(--display);font-weight:600;font-size:1.25rem;
  color:var(--blue-deep);letter-spacing:.06em;
}
/* the descriptor stands alone now that ESCEM lives inside the mark, so it
   carries a little more weight than a subtitle would */
.brandfloat__sub{font-family:var(--display);font-weight:600;font-size:.6875rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep)}

/* the rail itself */
.railnav{
  position:fixed;
  right:clamp(14px,1.6vw,28px);
  /* first icon lines up with the page's eyebrow line; JS refines the
     exact value since the hero centres its content vertically */
  top:var(--rail-top, calc(var(--hero-pt) - 16px));
  z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;
  gap:12px;
}

.railnav a{
  display:flex;align-items:center;justify-content:flex-end;
  height:52px;
  text-decoration:none;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(18,58,99,.10);
  border-radius:100px;
  box-shadow:0 8px 24px -14px rgba(18,58,99,.55);
  overflow:hidden;
  transition:background .25s,box-shadow .25s,border-color .25s;
}
.railnav a:hover,
.railnav a.is-open{background:#FFFFFF;box-shadow:0 14px 32px -14px rgba(18,58,99,.62)}

.railnav__ico{
  flex:none;width:52px;height:52px;
  display:grid;place-items:center;
  color:var(--green-deep);
  transition:color .25s;
}

.railnav__label{
  max-width:0;opacity:0;padding-left:0;
  white-space:nowrap;overflow:hidden;
  font-family:var(--display);font-weight:600;font-size:var(--t-sm);
  color:var(--navy);
  transition:max-width .42s cubic-bezier(.22,.9,.3,1),
             opacity .28s ease,
             padding-left .42s cubic-bezier(.22,.9,.3,1);
}

.railnav a:hover .railnav__label,
.railnav a:focus-visible .railnav__label,
.railnav a.is-open .railnav__label{max-width:230px;opacity:1;padding-left:21px}

.railnav__short{display:none}

/* current page: a green ring and tint, so the icon colour never changes */
.railnav a[aria-current="page"]{
  background:#EDF7E1;
  border-color:rgba(78,155,60,.55);
  box-shadow:0 8px 24px -14px rgba(78,155,60,.55);
}
.railnav a[aria-current="page"]:hover{background:#E4F3D3;border-color:rgba(78,155,60,.75)}

/* keep page content clear of the rail */
.wrap{padding-right:calc(var(--gut) + 62px)}

/* narrow screens keep the rail on the side, just smaller */
@media(max-width:899px){
  .railnav{right:10px;gap:9px}
  .railnav a{height:44px}
  .railnav__ico{width:44px;height:44px}
  .railnav__ico svg{width:20px;height:20px}
  .railnav a:hover .railnav__label,
  .railnav a:focus-visible .railnav__label,
  .railnav a.is-open .railnav__label{max-width:200px;padding-left:17px}
  .wrap{padding-right:calc(var(--gut) + 50px)}
  .brandfloat{padding:6px 14px 6px 8px}
  .brand__mark{height:42px}
  .brandfloat__sub{font-size:.5625rem}
}

@media(max-width:480px){
  .railnav{right:8px;gap:8px}
  .railnav a{height:40px}
  .railnav__ico{width:40px;height:40px}
  .railnav__ico svg{width:18px;height:18px}
  .wrap{padding-right:calc(var(--gut) + 44px)}
}

/* ---------- wave ribbon ---------- */

.waves{display:block;width:100%;height:auto;line-height:0}
.waves svg{display:block;width:100%;height:auto}

.waveband{animation:drift linear infinite}
.waveband--a{animation-duration:26s}
.waveband--b{animation-duration:38s;animation-direction:reverse}
.waveband--c{animation-duration:52s}

@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-720px)}}

/* ---------- hero: full-bleed sunlit water ---------- */

.hero{
  position:relative;
  min-height:clamp(500px,76vh,760px);
  display:flex;align-items:center;
  overflow:hidden;
  background:#1B7FB5;
  padding:0;
}

#poolwater{position:absolute;inset:0;width:100%;height:100%;display:block}

.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,
      rgba(4,42,68,.74) 0%,
      rgba(4,42,68,.50) 34%,
      rgba(4,42,68,.16) 62%,
      rgba(4,42,68,0) 88%),
    linear-gradient(180deg, rgba(4,42,68,.30) 0%, rgba(4,42,68,0) 34%);
}

.hero__in{
  position:relative;z-index:2;width:100%;
  padding-top:var(--hero-pt);
  padding-bottom:clamp(76px,11vw,120px);
}

.hero .eyebrow{color:#B9ECFF}
.hero h1{color:#FFFFFF;font-size:var(--t-hero);margin-bottom:18px;max-width:26ch}
.hero h1 em{font-style:normal;color:#9FE6FF}
.hero__vision{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.2rem,2.15vw,1.7rem);
  color:#FFFFFF;
  letter-spacing:.005em;
  margin-bottom:8px;
  text-shadow:0 1px 14px rgba(4,42,68,.4);
}

.hero .lede{color:rgba(255,255,255,.92);max-width:52ch;font-size:1.0625rem;
  text-shadow:0 1px 14px rgba(4,42,68,.35)}

.hero .btn{border-color:#FFFFFF;color:#FFFFFF}
.hero .btn:hover{background:#FFFFFF;color:var(--blue-deep)}
.hero .btn--solid{background:#FFFFFF;color:var(--blue-deep);border-color:#FFFFFF}
.hero .btn--solid:hover{background:rgba(255,255,255,.86);color:var(--blue-deep)}

.hero__foam{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0}


/* ---------- sections ---------- */

.sec{padding:clamp(56px,8vw,96px) 0}
/* Services carries more sections, so it runs on a tighter rhythm */
.sec--tight{padding:clamp(38px,4.6vw,60px) 0}
.sec--mist{background:var(--mist)}
.sec--tint{background:linear-gradient(180deg,var(--white),var(--mist))}

.sec__head{max-width:62ch;margin-bottom:clamp(32px,5vw,52px)}
.sec__head h2{margin-bottom:16px}

.pagehead{padding:clamp(104px,11vw,140px) 0 clamp(30px,4vw,44px);background:var(--mist)}
.pagehead h1{margin-bottom:16px}

/* ---------- cards ---------- */

/* four service cards: hold a 2x2 so none is ever left stranded on a row */
.grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:660px){.grid{grid-template-columns:repeat(2,1fr)}}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:28px 26px 30px;
  transition:box-shadow .25s,transform .25s,border-color .25s;
}
.card:hover{
  box-shadow:0 10px 28px -18px rgba(18,58,99,.45);
  border-color:#C3DBEA;
  transform:translateY(-2px);
}
.card__icon{
  width:48px;height:48px;border-radius:10px;
  display:grid;place-items:center;margin-bottom:18px;
  background:var(--mist-deep);color:var(--blue);
}
.card--green .card__icon{background:#EEF7E3;color:var(--green-deep)}
.card h3{margin-bottom:10px}
.card p{font-size:var(--t-sm);color:var(--ink)}

/* ---------- "why clients stay with us" tiles ---------- */

.why{
  list-style:none;margin:0;padding:0;
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}

.why li{
  background:var(--mist);
  border:1px solid transparent;
  border-radius:14px;
  padding:26px 24px 28px;
  display:grid;gap:15px;align-content:start;
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.why li:hover{
  background:var(--mist-deep);
  border-color:#CBE2EF;
  transform:translateY(-2px);
  box-shadow:0 14px 32px -22px rgba(18,58,99,.6);
}

.why__ico{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--white);
  color:var(--blue);
  box-shadow:0 4px 12px -6px rgba(18,58,99,.4);
}
.why li:nth-child(even) .why__ico{color:var(--green-deep)}

.why p{margin:0;font-size:var(--t-sm);color:var(--ink);line-height:1.6}

/* ---------- stats ---------- */

.stats{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat{background:var(--white);padding:30px 24px;text-align:center}
.stat__v{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3rem);line-height:1;
  color:var(--blue-deep);font-variant-numeric:tabular-nums;
}
.stat__k{display:block;margin-top:10px;font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- split prose ---------- */

.split{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr;gap:56px}}
.split h3{margin-bottom:12px}
.split p + p{margin-top:12px}

.prose p + p{margin-top:16px}
.prose h3{margin:32px 0 12px}

/* ---------- "how we work" — water flows along the timeline ---------- */

.flow{display:grid;gap:34px}

.flow__track{position:relative;padding-top:6px}

/* the channel the water runs through */
.flow__rail{
  position:absolute;left:0;right:0;top:24px;
  height:10px;border-radius:99px;
  background:#DFEDF5;
  box-shadow:inset 0 1px 2px rgba(18,58,99,.12);
  overflow:hidden;
}

.flow__water{
  position:absolute;inset:0 auto 0 0;
  width:var(--fill,8%);
  border-radius:99px;
  background:
    var(--water-pattern),
    linear-gradient(90deg,var(--blue-deep),var(--blue) 42%,var(--sky) 74%,var(--green) 118%);
  background-size:66px 33px, 100% 100%;
  background-position:0 center, 0 0;
  transition:width .95s cubic-bezier(.33,.9,.28,1);
  animation:flowdrift 3.2s linear infinite;
}
@keyframes flowdrift{from{background-position:0 center,0 0}to{background-position:-66px center,0 0}}

/* brighter cap where the water is currently reaching */
.flow__crest{
  position:absolute;top:0;bottom:0;right:0;width:16px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75));
  border-radius:99px;
}

.flow__nodes{position:relative;display:flex;gap:0}

.flow__node{
  flex:1;
  display:grid;justify-items:center;gap:11px;
  background:none;border:0;padding:0 4px;
  cursor:pointer;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}

.flow__dot{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--white);
  border:1.5px solid #CBE2EF;
  color:var(--muted);
  font-family:var(--display);font-weight:600;font-size:.8125rem;
  font-variant-numeric:tabular-nums;
  transition:background .3s,border-color .3s,color .3s,transform .3s,box-shadow .3s;
}

.flow__name{
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:var(--muted);text-align:center;line-height:1.25;
  transition:color .3s;
}

.flow__node:hover .flow__dot{border-color:var(--sky);transform:translateY(-2px)}
.flow__node:hover .flow__name{color:var(--navy)}
.flow__node:focus-visible .flow__dot{outline:2px solid var(--blue);outline-offset:3px}

/* steps the water has already passed */
.flow__node.is-done .flow__dot{background:var(--sky);border-color:var(--sky);color:#FFFFFF}
.flow__node.is-done .flow__name{color:var(--ink)}

/* where the water is now */
.flow__node.is-on .flow__dot{
  background:var(--blue-deep);border-color:var(--blue-deep);color:#FFFFFF;
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 10px 24px -12px rgba(43,78,155,.85);
}
.flow__node.is-on .flow__name{color:var(--navy)}

.flow__panels{position:relative;min-height:96px}

.flow__panel{
  max-width:62ch;
  animation:flowin .45s ease-out both;
}
.flow__panel[hidden]{display:none}
.flow__panel h3{margin-bottom:10px}
.flow__panel p{margin:0;color:var(--ink)}

@keyframes flowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* narrow screens: the channel stands up and the water falls down it */
@media(max-width:719px){
  .flow__track{padding-top:0}
  .flow__rail{
    left:21px;right:auto;top:10px;bottom:10px;
    width:10px;height:auto;
  }
  .flow__water{
    inset:0 0 auto 0;width:auto;height:var(--fill,8%);
    background:
      var(--water-pattern),
      linear-gradient(180deg,var(--blue-deep),var(--blue) 42%,var(--sky) 74%,var(--green) 118%);
    transition:height .95s cubic-bezier(.33,.9,.28,1);
  }
  .flow__crest{top:auto;left:0;right:0;bottom:0;width:auto;height:14px;
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75))}
  .flow__nodes{flex-direction:column;gap:14px}
  .flow__node{
    grid-template-columns:44px 1fr;justify-items:start;align-items:center;
    gap:16px;padding:0;width:100%;
  }
  .flow__name{text-align:left}
}

@media(prefers-reduced-motion:reduce){
  .flow__water{animation:none;transition:none}
  .flow__panel{animation:none}
}

/* ---------- client wall ---------- */

.clientgroup + .clientgroup{margin-top:38px}

.clientgroup h3{
  display:flex;align-items:baseline;gap:10px;
  font-size:1.05rem;margin-bottom:16px;
  padding-bottom:11px;border-bottom:2px solid var(--sky);
}
.clientgroup__n{
  font-family:var(--body);font-weight:400;font-size:var(--t-xs);
  color:var(--muted);font-variant-numeric:tabular-nums;
}

.logos{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(164px,1fr));
  list-style:none;margin:0;padding:0;
}

/* each cell is a logo slot: drop an <img> in and it sizes itself */
.logocard{
  height:104px;
  display:grid;place-items:center;
  padding:16px 18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
}

/* logos sit in full colour, exactly as the brand supplies them.
   A fixed box with object-fit:contain evens out wildly different aspect
   ratios — max-* alone leaves square marks looking half the size of wide ones. */
.logocard img{
  width:100%;height:62px;
  object-fit:contain;
  object-position:center;
}

/* fallback while a logo file is missing */
.logocard__name{
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:var(--navy);text-align:center;line-height:1.3;letter-spacing:.01em;
}

/* ---------- project mosaic: the brochure's diamond tessellation ----------
   Squares clipped to diamonds rather than rotated, so the photograph itself
   stays upright and only its corners are cut. Columns overlap by half a tile
   and every second column drops half a tile, which is what makes the diamonds
   interlock instead of sitting in a plain grid. */

.mosaic{
  position:relative;
  max-width:100%;
  /* The band is --span diamonds wide ((columns + 1) / 2, set on the element by
     the builder), so the tile size is derived from the space available rather
     than guessed — otherwise a phone-width screen is forced into sideways
     scrolling by a band that cannot fit. */
  --span:3;
  --d:clamp(74px,calc((100vw - 92px) / var(--span)),264px);
  --gap:6px;
  display:flex;justify-content:center;
  margin-top:30px;
  padding-block:calc(var(--d)/2);
  overflow:hidden;
}

.mosaic__col{display:flex;flex-direction:column;flex:none}
.mosaic__col + .mosaic__col{margin-left:calc(var(--d)/-2)}
/* every second column nests into the notches left by its neighbours */
.mosaic__col:nth-child(even){margin-top:calc(var(--d)/2)}

.mosaic__t{
  position:relative;
  width:var(--d);height:var(--d);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:var(--mist-deep);
  transform:scale(calc(1 - (var(--gap) / var(--d))));
  transition:transform .35s cubic-bezier(.22,.9,.3,1);
}
.mosaic__t img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic__t:hover{transform:scale(1.02);z-index:2}

/* spacers: hold a slot open under the hero so its neighbours still interlock */
.mosaic__t--blank{visibility:hidden}

/* the hero: one project at double size, centred on the point where the four
   slots it replaces meet. Every value derives from --d, so it scales with the
   band and fits a phone the same way the small tiles do. */
.mosaic__t--hero{
  position:absolute;z-index:1;
  width:calc(var(--d)*2);height:calc(var(--d)*2);
  left:calc(50% - var(--d));top:var(--d);
  transform:scale(calc(1 - (var(--gap) / (var(--d)*2))));
}
.mosaic__t--hero:hover{transform:scale(1.01);z-index:2}

/* the brochure drops solid aqua diamonds among the photographs */
.mosaic__t--accent{background:linear-gradient(150deg,var(--sky),#7FD3E4)}
.mosaic__t--accent:hover{transform:scale(calc(1 - (var(--gap) / var(--d))))}

/* a caption sits under the band rather than on the tiles, where a diamond
   would clip it */
.mosaic__cap{
  margin-top:22px;text-align:center;
  font-size:var(--t-xs);color:var(--muted);
}

@media(prefers-reduced-motion:reduce){.mosaic__t{transition:none}}

/* ---------- sector chips ---------- */

.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chips li{
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;
  font-size:var(--t-sm);color:var(--navy);background:var(--white);
}

/* ---------- sector cards (category tiles with a media layer) ---------- */

.sectorcards{
  list-style:none;margin:0;padding:0;
  display:grid;gap:16px;
  grid-template-columns:1fr;
}
/* nine categories, so hold a 3x3 grid rather than leaving one stranded */
@media(min-width:560px){.sectorcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.sectorcards{grid-template-columns:repeat(3,1fr)}}

.sectorcard{
  position:relative;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  display:flex;align-items:flex-end;
  box-shadow:0 10px 26px -18px rgba(18,58,99,.6);
}

/* the image slot — swap --img for url(...) when real photography lands */
.sectorcard__media{
  position:absolute;inset:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  transition:transform .55s cubic-bezier(.22,.9,.3,1);
}
.sectorcard--placeholder .sectorcard__media{
  background-image:var(--water-pattern), var(--img);
  background-size:132px 66px, cover;
}
.sectorcard:hover .sectorcard__media{transform:scale(1.07)}

/* scrim so the label stays legible over any photograph */
.sectorcard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,40,66,0) 34%,rgba(6,40,66,.30) 62%,rgba(6,40,66,.78) 100%);
  pointer-events:none;
}

.sectorcard__ico{
  position:absolute;top:16px;left:18px;z-index:1;
  color:#FFFFFF;opacity:.92;
  filter:drop-shadow(0 1px 6px rgba(4,42,68,.55));
  line-height:0;
}

.sectorcard__label{
  position:relative;z-index:1;
  padding:18px 20px;
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  color:#FFFFFF;
  text-shadow:0 1px 12px rgba(4,42,68,.55);
}

/* ---------- checklist ---------- */

.checks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-sm)}
.checks svg{flex:none;margin-top:4px;color:var(--green)}

/* ---------- verse ---------- */

.verse{text-align:center;padding-block:clamp(52px,7vw,84px)}
.verse p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.85;color:var(--blue-deep);
}
.verse p span{display:block}
.verse p span:last-child{color:var(--green-deep)}

/* ---------- contact ---------- */

.contact{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:900px){.contact{grid-template-columns:1fr 1fr;gap:60px}}

.detail{display:grid;gap:22px}
.detail__row{display:flex;gap:16px;align-items:flex-start}
.detail__ico{
  flex:none;width:40px;height:40px;border-radius:8px;background:var(--mist-deep);
  color:var(--blue);display:grid;place-items:center;
}
.detail__k{font-family:var(--display);font-weight:600;color:var(--navy);font-size:var(--t-sm);margin-bottom:3px}
.detail__v{font-size:var(--t-sm);color:var(--ink)}
.detail__v a{color:var(--ink);text-decoration:none}
.detail__v a:hover{color:var(--blue);text-decoration:underline}

.form{background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:30px 28px}
.form .field{display:grid;gap:6px;margin-bottom:16px}
.form label{font-family:var(--display);font-weight:600;font-size:var(--t-sm);color:var(--navy)}
.form input,.form select,.form textarea{
  font-family:var(--body);font-size:var(--t-sm);color:var(--ink);
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);width:100%;
}
.form textarea{resize:vertical;min-height:110px}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);
}
.consent{
  display:flex;align-items:flex-start;gap:11px;
  margin:4px 0 18px;
  font-size:var(--t-sm);color:var(--ink);line-height:1.55;cursor:pointer;
}
.consent input{
  flex:none;width:18px;height:18px;margin-top:2px;
  accent-color:var(--blue);cursor:pointer;
}
.consent input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.form__note{font-size:var(--t-xs);color:var(--muted);margin-top:14px}

/* ---------- CTA band ---------- */

.cta{
  background:linear-gradient(100deg,var(--blue-deep),var(--blue) 45%,var(--sky) 78%,var(--green) 130%);
  color:var(--white);border-radius:14px;padding:clamp(36px,5vw,56px);
  display:grid;gap:22px;align-items:center;
}
@media(min-width:820px){.cta{grid-template-columns:1.4fr auto;gap:36px}}
.cta h2{color:var(--white);margin-bottom:10px}
.cta p{color:rgba(255,255,255,.92);font-size:var(--t-sm);max-width:56ch}
.cta .btn{border-color:var(--white);color:var(--white)}
.cta .btn:hover{background:var(--white);color:var(--blue-deep)}
.cta .btn--solid{background:var(--white);color:var(--blue-deep)}
.cta .btn--solid:hover{background:rgba(255,255,255,.88);color:var(--blue-deep)}

/* ---------- footer ---------- */

.ftr{background:var(--navy);color:rgba(255,255,255,.78);padding:52px 0 30px;margin-top:0}
.ftr__grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:760px){.ftr__grid{grid-template-columns:1.5fr 1fr 1.3fr}}
.ftr h4{color:var(--white);font-size:var(--t-sm);margin-bottom:14px;letter-spacing:.06em;text-transform:uppercase}
.ftr a{color:rgba(255,255,255,.78);text-decoration:none}
.ftr a:hover{color:var(--white);text-decoration:underline}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:var(--t-sm)}
.ftr p{font-size:var(--t-sm)}
.ftr__brand{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--white);letter-spacing:.06em;margin-bottom:10px}
.ftr__base{
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:var(--t-xs);
  color:rgba(255,255,255,.6);
}

/* ---------- reveal ---------- */

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease-out,transform .7s ease-out}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}