/* ==========================================================================
   JP Global Engineering — the Contact page
   Direction: THE FRONT DESK.

   Everything else on this site is built to be read. This page is built to be
   acted on, so the order is reversed: the way to reach a person comes first,
   the reasons to reach them come second, and the paperwork comes last.

   COLOUR. The bone ground and olive ink stay. What changes is that this page
   stops spending only two colours. The four service pages already own an
   accent each — solar amber, greenhouse leaf, training blue, electrical olive
   — so those are borrowed here rather than inventing a new set, and the soil
   gold and the company orange join them. Seven hues, each one attached to a
   meaning: a reason to get in touch, a step in the process, a field on the
   company record. Used as tinted chips and hairlines, never as body text.

   WhatsApp is green, the real one. #25D366 cannot carry white small text at
   any honest contrast ratio, so the buttons take the bright green ground with
   a near-black-green ink on top — the same move Spotify makes with its own
   green — which measures 7:1 and looks far more alive than a muted green
   would. Orange keeps everything that is not WhatsApp: directions, the small
   links, the pointers.

   Additive. Nothing in site.css is touched.
   ========================================================================== */

:root{
  /* WhatsApp, as a ground rather than as text */
  --wa:#25D366;          /* the button ground and the status light       */
  --wa-hi:#2FE374;       /* hover: brighter, never darker                */
  --wa-ink:#06301A;      /* what sits on top of it, 7.07:1               */
  --wa-deep:#0F7A40;     /* green ink for light grounds, 4.74:1 on bone  */

  /* the field's own colours, borrowed from the service pages so this page
     stays inside a system the site already owns */
  --c-leaf:#7C914D;   --c-leaf-ink:#44562A;
  --c-moss:#93B25C;   --c-moss-ink:#4A6B26;
  --c-gold:#C9A96B;   --c-gold-ink:#7E6020;
  --c-sun:#E5A63F;    --c-sun-ink:#87621A;
  --c-water:#6FA3C8;  --c-water-ink:#2B5A76;
  --c-clay:#E05616;   --c-clay-ink:#C1480F;
  --c-teal:#3FA3A3;   --c-teal-ink:#1F6B6B;
  --c-slate:#6E7B8A;  --c-slate-ink:#37414C;

  /* The small mono labels here carry real information — which line this is,
     when the office is open — and the site's default label greys land around
     3.2:1 on bone. These are a shade deeper, which clears 4.5:1 on both the
     bone ground and the paper cards, and the deep orange does the same for
     small accent text. The shared .kicker is deliberately left alone, so the
     page still opens the way every other page opens. */
  --label:#656C50;
  --label-sage:#5E7132;
  --accent-deep:#C1480F;
}

/* icons ride at the text's own weight, never heavier */
.ic{width:18px;height:18px;flex:0 0 auto;display:block}
.btn .ic{margin-right:-2px}
.btn-lg{padding:17px 30px;font-size:15px;min-height:56px}

/* ------------------------------ the WhatsApp button ------------------------------
   Its own class rather than a repaint of .btn-1, so the company orange keeps
   every other action on the page and the two never argue. */
.btn-wa{background:var(--wa);color:var(--wa-ink);
  box-shadow:0 14px 30px -16px rgba(18,140,74,.7)}
.btn-wa:hover{background:var(--wa-hi);color:var(--wa-ink);transform:translateY(-2px);
  box-shadow:0 20px 42px -14px rgba(37,211,102,.75),0 0 0 3px rgba(37,211,102,.2)}
.btn-wa:focus-visible{outline-color:var(--wa-deep)}
/* on the forest closing band the green lifts off the ground on its own */
.closer .btn-wa{box-shadow:0 16px 34px -16px rgba(37,211,102,.55)}

/* ------------------------------ hero ------------------------------
   Three washes now instead of one: soil gold low on the left, a breath of the
   WhatsApp green from the top right, and the company orange under the buttons,
   so the ground is warm rather than blank. */
.chero{position:relative}
.chero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 56% at 1% 94%,rgba(201,169,107,.30),transparent 62%),
    radial-gradient(38% 46% at 97% 14%,rgba(37,211,102,.13),transparent 66%),
    radial-gradient(30% 38% at 26% 104%,rgba(224,86,22,.09),transparent 64%)}
.chero .wrap{position:relative;z-index:1}
.chero .h1{max-width:15ch}
.chero .lede{max-width:62ch}

.cbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3.6vh,40px)}
.cbadge{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.005em;
  color:var(--text-2);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:9px 17px 9px 14px;
  transition:border-color .45s var(--ease),color .45s var(--ease),
             transform .45s var(--ease),box-shadow .45s var(--ease)}
.cbadge:hover{border-color:var(--dotc,var(--sage));color:var(--text);transform:translateY(-1px);
  box-shadow:0 10px 22px -16px rgba(36,40,24,.6)}
.cbadge::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--dotc,var(--sage));flex:0 0 auto}
/* one colour per claim, so four pills do not read as one grey row */
.cbadges .cbadge:nth-child(1){--dotc:var(--wa)}
.cbadges .cbadge:nth-child(2){--dotc:var(--c-sun)}
.cbadges .cbadge:nth-child(3){--dotc:var(--c-clay)}
.cbadges .cbadge:nth-child(4){--dotc:var(--c-water)}
.cbadge.live::before{animation:walight 2.8s var(--ease-soft) infinite}
@keyframes walight{
  0%  {box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70% {box-shadow:0 0 0 7px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

.chero .btnrow{margin-top:clamp(30px,4vh,44px)}
@media (max-width:560px){
  .chero .btnrow,.closer .btnrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .chero .btnrow .btn,.closer .btnrow .btn{width:100%;padding-left:14px;padding-right:14px}
  .chero .btnrow .btn:first-child,.closer .btnrow .btn:first-child{grid-column:1 / -1}
}

/* ------------------------------ the response promise ------------------------------
   Three facts, stated once, where a visitor decides whether to bother. */
.promise{margin-top:clamp(46px,6.5vh,78px);padding-top:clamp(28px,3.6vh,40px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px)}
.prom{display:flex;gap:14px;align-items:flex-start;padding-left:clamp(16px,2.2vw,30px);
  border-left:1px solid var(--line)}
.promise>.prom:first-child{padding-left:0;border-left:0}
.prom .ic{width:19px;height:19px;margin-top:3px;color:var(--promc,var(--sage))}
.promise .prom:nth-child(1){--promc:var(--wa-deep)}
.promise .prom:nth-child(2){--promc:var(--c-clay-ink)}
.promise .prom:nth-child(3){--promc:var(--c-sun-ink)}
.prom .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label)}
.prom .v{font-family:var(--display);font-weight:400;font-size:clamp(1.06rem,1.55vw,1.26rem);
  letter-spacing:-.014em;margin-top:9px;line-height:1.3}
.prom .s{font-size:.88rem;color:var(--text-2);margin-top:7px;line-height:1.55}
@media (max-width:900px){
  .promise{grid-template-columns:1fr;gap:0}
  .prom{padding:20px 0 0;border-left:0;border-top:1px solid var(--line);margin-top:20px}
  .promise>.prom:first-child{margin-top:0;padding-top:0;border-top:0}
}

/* ------------------------------ the two lines ------------------------------
   One card per number. Both actions live inside it, and the messaging action
   is given the weight, because that is the one that gets answered at night.
   A hairline of colour across the top of each card tells them apart before
   the labels are read. */
.ccards{margin-top:clamp(42px,6vh,68px);display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.2vw,28px)}
@media (max-width:980px){.ccards{grid-template-columns:1fr}}
.ccard{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:26px;
  padding:clamp(29px,3.4vw,43px) clamp(26px,3.2vw,40px) clamp(26px,3.2vw,40px);
  transition:border-color .55s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}
.ccard::before{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,var(--card-glow),transparent 68%);
  transition:opacity .7s var(--ease)}
.ccard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--card-a),var(--card-b))}
.ccards .ccard:nth-child(1){--card-a:var(--wa);--card-b:var(--c-leaf);
  --card-glow:rgba(37,211,102,.20);--card-ink:var(--wa-deep)}
.ccards .ccard:nth-child(2){--card-a:var(--c-sun);--card-b:var(--c-clay);
  --card-glow:rgba(229,166,63,.24);--card-ink:var(--c-gold-ink)}
.ccard:hover{border-color:var(--line-2);transform:translateY(-4px);
  box-shadow:0 34px 64px -38px rgba(36,40,24,.55)}
.ccard:hover::before{opacity:1}
.ccard>*{position:relative}
.ccard-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ccard-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--card-ink)}
.ccard-ix{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--label)}
.ccard-num{display:inline-block;margin-top:clamp(16px,2vw,22px);text-decoration:none;
  font-family:var(--display);font-weight:400;font-size:clamp(1.95rem,3.5vw,2.85rem);
  letter-spacing:-.028em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text);
  transition:color .4s var(--ease)}
.ccard-num:hover{color:var(--card-ink)}
.ccard-note{margin:15px 0 clamp(24px,3vw,34px);color:var(--text-2);font-size:.95rem;
  line-height:1.65;max-width:36ch}
/* the two cards carry different amounts of copy, so the action row is pushed to
   the floor of each card and both pairs of buttons line up across the section */
.ccard-acts{margin-top:auto;padding-top:clamp(22px,2.6vw,28px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.55fr 1fr;gap:10px}
.ccard-acts .btn{width:100%;padding-left:14px;padding-right:14px;font-size:13.5px;min-height:52px}
@media (max-width:440px){.ccard-acts{grid-template-columns:1fr}}

.cnote{margin-top:clamp(24px,3.2vh,34px);display:flex;align-items:center;gap:12px;
  font-size:.96rem;color:var(--text-2)}
.cnote .ic{width:18px;height:18px;color:var(--wa-deep)}

/* ------------------------------ how can we help ------------------------------
   Seven reasons, each one a pre written message, and each one a colour. Four
   across, and the seventh takes the width of two so no cell is left stranded
   at the end of the row. */
.helpgrid{margin-top:clamp(42px,6vh,68px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.5vw,18px)}
.helpgrid .ht:last-child{grid-column:span 2}
@media (max-width:1040px){.helpgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .helpgrid{grid-template-columns:1fr}
  .helpgrid .ht:last-child{grid-column:span 1}
}
.ht{position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:13px;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,2.2vw,28px);
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
/* the tile's own colour arrives in the corner on the way in */
.ht::before{content:"";position:absolute;right:-52px;top:-62px;width:180px;height:180px;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,var(--tint-soft),transparent 70%);
  transition:opacity .6s var(--ease)}
.ht:hover::before{opacity:1}
.ht:hover{border-color:var(--tint);transform:translateY(-3px);
  box-shadow:0 24px 46px -32px rgba(36,40,24,.55)}
.ht>*{position:relative}
/* A solid chip, not a wash. A 15 per cent tint measures 1.2:1 against the card,
   which is not a colour anybody sees; the deep version of the same hue carries
   the glyph at 5:1 and actually reads as an object on the page. */
.ht .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  box-shadow:0 8px 16px -10px rgba(36,40,24,.55);
  transition:box-shadow .5s var(--ease)}
.ht:hover .ico{box-shadow:0 0 0 5px var(--tint-soft),0 12px 22px -10px rgba(36,40,24,.6)}
.ht .ico svg{width:22px;height:22px}
/* Seven chips need seven hues that survive being seen together. Olive, bronze
   and clay hold the warm end; graphite, blue and teal the cool; the WhatsApp
   green closes on the tile that means "see it running". Each colour is also
   an argument: soil gold for money, clay for the land, the service pages'
   graphite for the engineering, green for the live system. */
.helpgrid .ht:nth-child(1){--tint:var(--c-leaf); --tint-soft:rgba(124,145,77,.30); --ink:var(--c-leaf-ink)}
.helpgrid .ht:nth-child(2){--tint:var(--c-gold); --tint-soft:rgba(201,169,107,.42);--ink:var(--c-gold-ink)}
.helpgrid .ht:nth-child(3){--tint:var(--c-clay); --tint-soft:rgba(224,86,22,.26);  --ink:var(--c-clay-ink)}
.helpgrid .ht:nth-child(4){--tint:var(--c-slate);--tint-soft:rgba(110,123,138,.34);--ink:var(--c-slate-ink)}
.helpgrid .ht:nth-child(5){--tint:var(--c-water);--tint-soft:rgba(111,163,200,.38);--ink:var(--c-water-ink)}
.helpgrid .ht:nth-child(6){--tint:var(--c-teal); --tint-soft:rgba(63,163,163,.34); --ink:var(--c-teal-ink)}
.helpgrid .ht:nth-child(7){--tint:var(--wa);     --tint-soft:rgba(37,211,102,.32); --ink:var(--wa-deep)}
.ht h3{font-size:clamp(1.04rem,1.5vw,1.2rem);letter-spacing:-.012em}
.ht p{color:var(--text-2);font-size:.91rem;line-height:1.6}
.ht .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--accent-deep);
  transition:color .4s var(--ease)}
.ht .go::after{content:"";width:13px;height:1px;background:currentColor;
  transition:width .45s var(--ease)}
.ht:hover .go{color:var(--accent)}
.ht:hover .go::after{width:26px}

/* ------------------------------ what happens next ------------------------------
   The line is the point of this section, so it is not drawn until the section
   is actually on screen. Each segment belongs to the step on its left, reaches
   across the gap to the next dot, and grows from its own end; the dots light in
   the same order, and the colour walks from sage through to WhatsApp green at
   the step where something is finally arranged. The geometry is CSS, not
   script, so it stays honest at every width. */
.cflow{--flowgap:clamp(20px,2.8vw,44px);
  margin-top:clamp(48px,7vh,86px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--flowgap)}
.cstep{position:relative;padding-top:42px}
.cflow .cstep:nth-child(1){--dot:var(--sage-soft);--seg-a:var(--sage-soft);--seg-b:var(--c-moss)}
.cflow .cstep:nth-child(2){--dot:var(--c-moss);  --seg-a:var(--c-moss);   --seg-b:var(--c-sun)}
.cflow .cstep:nth-child(3){--dot:var(--c-sun);   --seg-a:var(--c-sun);    --seg-b:var(--wa)}
.cflow .cstep:nth-child(4){--dot:var(--wa)}
.cstep .dot{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--bg);z-index:1;
  transition:border-color .6s var(--ease)}
.cstep .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--dot);transform:scale(0);transition:transform .5s var(--ease)}
.cstep::after{content:"";position:absolute;top:7px;left:22px;right:calc(-1 * var(--flowgap));
  height:1px;background:linear-gradient(90deg,var(--seg-a),var(--seg-b));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--ease)}
.cstep:last-child::after{display:none}
.cflow.drawn .cstep .dot{border-color:var(--dot)}
.cflow.drawn .cstep .dot::after{transform:scale(1)}
.cflow.drawn .cstep::after{transform:scaleX(1)}
.cflow.drawn .cstep:nth-child(1) .dot,
.cflow.drawn .cstep:nth-child(1) .dot::after{transition-delay:.05s}
.cflow.drawn .cstep:nth-child(2) .dot,
.cflow.drawn .cstep:nth-child(2) .dot::after{transition-delay:.75s}
.cflow.drawn .cstep:nth-child(3) .dot,
.cflow.drawn .cstep:nth-child(3) .dot::after{transition-delay:1.45s}
.cflow.drawn .cstep:nth-child(4) .dot,
.cflow.drawn .cstep:nth-child(4) .dot::after{transition-delay:2.15s}
.cflow.drawn .cstep:nth-child(1)::after{transition-delay:.2s}
.cflow.drawn .cstep:nth-child(2)::after{transition-delay:.9s}
.cflow.drawn .cstep:nth-child(3)::after{transition-delay:1.6s}
/* once it has arrived the delays are spent, so nothing later re-runs them */
.cflow.settled .cstep .dot,.cflow.settled .cstep .dot::after,
.cflow.settled .cstep::after{transition-delay:0s!important}
.cstep .n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  color:var(--sage-soft)}
.cstep h3{margin-top:13px;font-size:clamp(1.1rem,1.7vw,1.36rem);letter-spacing:-.014em;
  text-wrap:balance}
.cstep p{margin-top:13px;color:var(--text-2);font-size:.94rem;line-height:1.64}
@media (max-width:900px){
  .cflow{grid-template-columns:1fr;gap:0}
  .cstep{padding:0 0 32px 42px}
  .cstep .dot{top:4px}
  /* reach the next dot's edge, the way the horizontal segments do */
  .cstep::after{top:24px;left:6.5px;right:auto;width:1px;height:calc(100% - 20px);
    background:linear-gradient(180deg,var(--seg-a),var(--seg-b));
    transform:scaleY(0);transform-origin:center top}
  .cflow.drawn .cstep::after{transform:scaleY(1)}
  .cstep:last-child{padding-bottom:0}
}
/* nothing to draw if the reader has asked for stillness: it is simply there */
@media (prefers-reduced-motion:reduce){
  .cstep .dot::after,.cflow.drawn .cstep .dot::after{transform:scale(1)!important}
  .cstep::after,.cflow.drawn .cstep::after{transform:none!important}
  .cstep .dot{border-color:var(--dot)!important}
}

/* ------------------------------ the office ------------------------------
   A plain road map, not a satellite picture: the point is to find the door,
   not to admire the roof. */
.mapcard{position:relative;margin-top:clamp(42px,6vh,68px);
  display:grid;grid-template-columns:1.3fr .7fr;
  background:var(--panel);border:1px solid var(--line);border-radius:28px;overflow:hidden;
  box-shadow:0 34px 74px -48px rgba(36,40,24,.5)}
.mapcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--c-leaf),var(--c-gold) 42%,var(--c-clay))}
@media (max-width:940px){.mapcard{grid-template-columns:1fr}}
.mapframe{position:relative;min-height:clamp(330px,42vw,540px);background:var(--bg-2)}
.mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:saturate(.96) contrast(1.02)}
.mapside{display:flex;flex-direction:column;border-left:1px solid var(--line);
  padding:clamp(26px,3.2vw,44px)}
@media (max-width:940px){.mapside{border-left:0;border-top:1px solid var(--line)}}
.mapside .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label-sage)}
.mapside h3{margin-top:16px;font-size:clamp(1.22rem,2vw,1.58rem);letter-spacing:-.016em;
  text-wrap:balance}
.mapside address{font-style:normal;margin-top:16px;color:var(--text-2);font-size:.98rem;line-height:1.78}
.mapmeta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.mapmeta .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label)}
.mapmeta .v{margin-top:9px;color:var(--text);font-size:.95rem;line-height:1.72}
.mapside .btn{margin-top:clamp(22px,3vw,30px);align-self:flex-start}
.maptags{margin-top:clamp(26px,3.4vw,36px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px}
.maptag{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);border:1px solid var(--line);border-radius:999px;padding:7px 13px;
  background:var(--tagbg,transparent)}
.maptag::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--tagc,var(--sand))}
.maptags .maptag:nth-child(1){--tagc:var(--c-clay);--tagbg:rgba(224,86,22,.07)}
.maptags .maptag:nth-child(2){--tagc:var(--c-leaf);--tagbg:rgba(124,145,77,.10)}

/* ------------------------------ the paperwork ------------------------------ */
.infogrid{margin-top:clamp(42px,6vh,68px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:clamp(12px,1.6vw,20px)}
.info{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:15px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px)
          calc(clamp(22px,2.4vw,30px) + 4px);
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.info::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--infoc)}
.info:hover{border-color:var(--infoc);transform:translateY(-2px)}
.infogrid .info:nth-child(1){--infoc:var(--c-clay); --infok:var(--c-clay-ink)}
.infogrid .info:nth-child(2){--infoc:var(--c-leaf); --infok:var(--c-leaf-ink)}
.infogrid .info:nth-child(3){--infoc:var(--c-water);--infok:var(--c-water-ink)}
.infogrid .info:nth-child(4){--infoc:var(--c-gold); --infok:var(--c-gold-ink)}
.info .k{display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label)}
.info .k .ic{width:16px;height:16px;color:var(--infok)}
.info .v{color:var(--text);font-size:.99rem;line-height:1.72}
.info a{color:var(--accent-deep);text-decoration:none;overflow-wrap:anywhere;
  border-bottom:1px solid transparent;transition:border-color .35s var(--ease)}
.info a:hover{border-bottom-color:var(--accent-deep)}
/* social media: the whole row, the four accounts side by side, each saying whose it is */
.infogrid .info.social{grid-column:1 / -1;--infoc:var(--c-teal);--infok:var(--c-teal-ink)}
.socials{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px}
.socials a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  padding:10px 12px 10px 10px;border:1px solid var(--line);border-radius:14px;color:var(--text);
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.socials a:hover{border-color:var(--infoc);border-bottom-color:var(--infoc);background:rgba(63,163,163,.06)}
.socials .si{grid-row:1 / span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(63,163,163,.12);color:var(--infok)}
.socials .si svg{width:18px;height:18px;display:block}
.socials b{font-weight:600;font-size:.98rem;line-height:1.3}
.socials .who{font-size:.84rem;line-height:1.35;color:var(--text-2);overflow-wrap:anywhere}
@media (max-width:1000px){.socials{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.socials{grid-template-columns:1fr}}

/* ------------------------------ reassurance ------------------------------ */
.ctrust{padding-top:clamp(52px,7vh,86px);padding-bottom:clamp(52px,7vh,86px)}
.trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,58px)}
@media (max-width:880px){.trustrow{grid-template-columns:1fr;gap:28px}}
.tru{display:flex;gap:16px;align-items:flex-start}
.tru .ico{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--truink);color:var(--paper);
  box-shadow:0 8px 16px -10px rgba(36,40,24,.5)}
.tru .ico svg{width:19px;height:19px}
.trustrow .tru:nth-child(1){--truink:var(--c-leaf-ink)}
.trustrow .tru:nth-child(2){--truink:var(--c-sun-ink)}
.trustrow .tru:nth-child(3){--truink:var(--wa-deep)}
.tru h3{font-size:1.08rem;letter-spacing:-.012em}
.tru p{margin-top:9px;color:var(--text-2);font-size:.93rem;line-height:1.62}

/* ------------------------------ section grounds ------------------------------
   A wash of colour in the corners of every band, so a long page of cards is
   never flat bone. All of it sits under the content and takes no clicks. */
#reach::before,#help::before,#next::before,
#office::before,#details::before,.ctrust::before{
  content:"";position:absolute;inset:0;pointer-events:none}
#reach>.wrap,#help>.wrap,#next>.wrap,
#office>.wrap,#details>.wrap,.ctrust>.wrap{z-index:1}
#reach::before{background:
  radial-gradient(48% 58% at 100% 0%,rgba(37,211,102,.11),transparent 64%),
  radial-gradient(46% 54% at 0% 100%,rgba(201,169,107,.24),transparent 62%)}
#help::before{background:
  radial-gradient(44% 50% at 94% 6%,rgba(111,163,200,.15),transparent 64%),
  radial-gradient(50% 56% at 3% 97%,rgba(124,145,77,.17),transparent 62%)}
#next::before{background:
  radial-gradient(54% 62% at 5% 0%,rgba(124,145,77,.28),transparent 62%),
  radial-gradient(48% 56% at 97% 100%,rgba(229,166,63,.15),transparent 60%)}
#office::before{background:
  radial-gradient(44% 52% at 99% 90%,rgba(224,86,22,.11),transparent 62%),
  radial-gradient(42% 50% at 0% 5%,rgba(201,169,107,.22),transparent 62%)}
#details::before{background:
  radial-gradient(44% 52% at 3% 4%,rgba(37,211,102,.10),transparent 62%),
  radial-gradient(46% 54% at 99% 97%,rgba(111,163,200,.13),transparent 62%)}
.ctrust::before{background:
  radial-gradient(58% 74% at 50% 0%,rgba(124,145,77,.15),transparent 66%)}

/* while the device is being asked where it is, the button says so quietly */
.locating{cursor:progress;opacity:.72}
.locating:hover{transform:none}

/* ------------------------------ the floating line ------------------------------
   Held back until the hero's own buttons have scrolled away, and stood down
   again over the closing band and the footer, where it would only be shouting
   over another copy of itself. */
.wafloat{position:fixed;z-index:120;
  right:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.005em;
  background:var(--wa);color:var(--wa-ink);border-radius:999px;
  padding:14px 23px 14px 19px;min-height:54px;
  box-shadow:0 20px 42px -16px rgba(18,140,74,.6),0 2px 10px rgba(6,48,26,.18);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.96);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,
             background .4s var(--ease),box-shadow .4s var(--ease)}
.wafloat.on{opacity:1;visibility:visible;transform:none}
.wafloat:hover{background:var(--wa-hi);transform:translateY(-2px);
  box-shadow:0 26px 52px -16px rgba(37,211,102,.8),0 0 0 3px rgba(37,211,102,.2)}
.wafloat:focus-visible{outline-color:var(--wa-deep)}
.wafloat svg{width:23px;height:23px;flex:0 0 auto}
@media (max-width:560px){
  .wafloat{font-size:13.5px;padding:12px 19px 12px 16px;min-height:50px;gap:9px}
  .wafloat svg{width:21px;height:21px}
}
@media (prefers-reduced-motion:reduce){
  .wafloat,.wafloat:hover{transform:none}
}


/* a phone number is the point of this page: on a phone it is also a target */
@media (max-width:820px), (pointer:coarse){
  .ccard-num,.info .v a{min-height:44px;display:inline-flex;align-items:center}
}