/* /contact (Book a demo), green. Kit tokens from page.css (body.pg).
   One section on a grid that runs edge to edge: the dark field covers the first row (heading),
   "what happens next" and the offices sit on the canvas below it, and the form card sits in the right column across all rows,
   so it starts on the field and runs down onto the canvas beside the next steps.
   Phones: heading on the field, the form overlapping its foot, then the next steps and the offices on the canvas.
   The form, pills and sent state are driven by the Contact block in assets/site.js
   (#formWrap, #sentWrap, .pill[data-topic], .pill-on); #sentWrap keeps its inline display:none. */

.pg .ct{
  position:relative;isolation:isolate;display:grid;
  grid-template-columns:minmax(var(--gut),1fr) minmax(0,600px) 96px minmax(0,696px) minmax(var(--gut),1fr);
  grid-template-rows:auto auto 1fr;
  padding-bottom:96px;background:var(--canvas);--ct-pad:40px;
}
/* the eyebrow lines up with the first label inside the card (card top + its padding) */

/* the dark field: the homepage hero's green, behind the heading; data-hero for the clear header */
.pg .ct-field{grid-column:1 / -1;grid-row:1;z-index:-1;
  background:radial-gradient(120% 90% at 85% 10%,#173D30 0%,var(--green-deep) 55%,#081B15 100%);}

/* heading */
.pg .ct-head{grid-column:2;grid-row:1;padding-top:calc(var(--bar) + env(safe-area-inset-top, 0px) + 96px + var(--ct-pad));padding-bottom:112px;color:#fff;}
.pg .ct-head .eb{color:var(--on-dark-2);}
.pg .ct-head h1{max-width:9em;font-size:var(--fs-h1);line-height:1.02;letter-spacing:-0.04em;font-weight:500;}
.pg .ct-head .sub{max-width:26em;margin-top:24px;font-size:18px;line-height:1.55;color:var(--on-dark-2);}

/* what happens next, then the offices and the email: on the canvas under the field, beside the overhanging card */
.pg .ct-next{grid-column:2;grid-row:2;padding-top:64px;max-width:30em;}
.pg .ct-nh{font-size:14px;line-height:20px;font-weight:500;color:var(--green-2);margin-bottom:20px;}
.pg .ct-steps{list-style:none;margin:0;padding:0;}
.pg .ct-steps li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink);}
.pg .ct-steps li:last-child{border-bottom:1px solid var(--line);}
.pg .ct-n{flex:0 0 auto;min-width:1.25em;font-size:14px;font-weight:500;color:var(--green-2);font-variant-numeric:tabular-nums;}
/* the nine offices, in Karan's order, two to a row so the list reads left to right at every width */
.pg .ct-oh{margin:40px 0 12px;}
.pg .ct-cities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;max-width:24em;}
.pg .ct-cities li{padding:8px 0;border-top:1px solid var(--line);font-size:15px;line-height:22px;color:var(--ink);}
.pg .ct-off{margin-top:20px;font-size:14px;font-weight:500;line-height:20px;color:var(--ink-2);}
.pg .ct-off a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:currentColor;}
@media (hover:hover) and (pointer:fine){.pg .ct-off a:hover{text-decoration-thickness:2px;}}

/* the form card, and the sent card in the same place */
.pg .ct-formwrap,.pg .ct-sentwrap{grid-column:4;grid-row:1 / 4;align-self:start;margin-top:calc(var(--bar) + env(safe-area-inset-top, 0px) + 96px);min-width:0;}
.pg .ct-sentwrap:focus{outline:none;}
.pg .ct-form,.pg .ct-sent{background:#fff;border-radius:var(--r-l);
  box-shadow:0 0 0 1px rgba(20,32,27,.06),0 30px 80px rgba(2,14,10,.26),0 2px 6px rgba(2,14,10,.12);}
.pg .ct-form{display:flex;flex-direction:column;gap:22px;padding:var(--ct-pad);color:var(--ink);}
.pg .ct-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.pg .ct-f{display:flex;flex-direction:column;gap:8px;min-width:0;}
.pg .ct-l{font-size:14px;line-height:20px;font-weight:500;color:var(--ink);}
.pg .ct-opt{font-weight:400;color:var(--ink-2);}

.pg .ct-form :is(input,textarea){display:block;width:100%;margin:0;font:inherit;font-size:16px;line-height:24px;color:var(--ink);
  background:#fff;border:1px solid #8A8F89;border-radius:var(--r-s);padding:11px 14px;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .16s ease,box-shadow .16s ease;}
.pg .ct-form input{height:48px;}
.pg .ct-form textarea{min-height:104px;resize:vertical;}
.pg .ct-form :is(input,textarea)::placeholder{color:#6B746F;opacity:1;}
@media (hover:hover) and (pointer:fine){.pg .ct-form :is(input,textarea):hover{border-color:#5F655F;}}
.pg .ct-form :is(input,textarea):focus{border-color:var(--green-2);box-shadow:0 0 0 2px var(--green-2);}
.pg .ct-form :is(input,textarea):focus-visible{outline:2px solid var(--green-2);outline-offset:1px;}
/* a field the browser has rejected (only after the person has touched it or tried to send, never on load) */
.pg .ct-form :is(input,textarea):user-invalid{border-color:#9B2C2C;}
.pg .ct-form :is(input,textarea):user-invalid:focus{box-shadow:0 0 0 4px rgba(155,44,44,.12);}

/* topic pills (aria-pressed buttons; site.js toggles .pill-on) */
.pg .ct-pills{display:flex;flex-wrap:wrap;gap:8px;}
.pg .ct-form .pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform 140ms var(--ease-out);}
.pg .ct-form .pill:active{transform:scale(.97);}
.pg .ct-form .pill.pill-on{background:var(--green);border-color:var(--green) !important;color:#fff;}

/* send row: button and the notice beside it */
.pg .ct-send{display:flex;align-items:center;gap:16px 24px;margin-top:6px;}
.pg .ct-send .btn{height:48px;padding:0 24px;flex:0 0 auto;}
.pg .ct-send .btn:disabled{opacity:.7;cursor:progress;}
.pg .ct-legal{font-size:13px;line-height:1.5;color:var(--ink-2);max-width:34em;}
.pg .ct-legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(74,85,80,.45);transition:color .16s ease,text-decoration-color .16s ease;}
@media (hover:hover) and (pointer:fine){.pg .ct-legal a:hover{color:var(--green);text-decoration-color:currentColor;}}
.pg #formErr{font-size:14px;animation:ct-err 200ms var(--ease-out) both;}
@keyframes ct-err{from{opacity:0;transform:translateY(4px);}}


/* sent state */
.pg .ct-sent{padding:40px;}
/* the card arrives once, when site.js swaps it in for the form (or on ?sent=1); reduced motion shows it at rest (page.css) */
.pg .ct-sentwrap:not([style*="none"]) .ct-sent{animation:ct-in 260ms var(--ease-out) both;}
@keyframes ct-in{from{opacity:0;transform:translateY(8px);}}
.pg .ct-sent-l{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--green-2);}
.pg .ct-sent-l svg{width:20px;height:20px;padding:3px;border-radius:50%;background:#E3EEE7;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.pg .ct-sent p{margin-top:20px;max-width:16em;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-0.035em;font-weight:500;color:var(--ink);text-wrap:balance;}

/* ---------- 960 to 1279: tighter middle gap ---------- */
@media (max-width:1279px){
  .pg .ct{grid-template-columns:minmax(var(--gut),1fr) minmax(0,600px) 56px minmax(0,696px) minmax(var(--gut),1fr);}
  .pg .ct{--ct-pad:32px;}
}

/* ---------- below 960: one column; heading on the field, the form overlapping its foot ---------- */
@media (max-width:959px){
  .pg .ct{grid-template-columns:var(--gut) minmax(0,1fr) var(--gut);grid-template-rows:auto auto auto;padding-bottom:80px;}
  .pg .ct-field{grid-row:1;}
  .pg .ct-head{grid-column:2;grid-row:1;padding-top:calc(var(--bar) + env(safe-area-inset-top, 0px) + 72px);padding-bottom:104px;}
  .pg .ct-head h1{max-width:11em;}
  .pg .ct-formwrap,.pg .ct-sentwrap{grid-column:2;grid-row:2;margin-top:-56px;max-width:720px;width:100%;justify-self:center;}
  .pg .ct-next{grid-column:2;grid-row:3;max-width:720px;width:100%;justify-self:center;padding-top:48px;}
}

/* ---------- phones ---------- */
@media (max-width:759px){
  .pg .ct{padding-bottom:56px;}
  .pg .ct-head{padding-top:calc(var(--bar) + env(safe-area-inset-top, 0px) + 40px);padding-bottom:84px;}
  .pg .ct-head h1{font-size:40px;line-height:1.04;}
  .pg .ct-head .sub{margin-top:16px;font-size:16px;}
  .pg .ct-formwrap,.pg .ct-sentwrap{margin-top:-48px;}
  .pg .ct-form{padding:24px 20px;gap:20px;border-radius:var(--r-m);}
  .pg .ct-sent{padding:28px 20px;border-radius:var(--r-m);}
  .pg .ct-two{grid-template-columns:1fr;gap:20px;}
  .pg .ct-send{flex-direction:column;align-items:stretch;gap:14px;}
  .pg .ct-send .btn{width:100%;}
  .pg .ct-next{padding-top:40px;}
  .pg .ct-steps li{font-size:15px;}
}
@media (pointer:coarse){
  .pg .ct-form .pill{height:44px;}
  .pg .ct-form textarea{resize:none;}
  /* inline links inside sentences: a taller hit area without moving the line box */
  .pg .ct-legal a{padding:14px 0;}
}
/* site.css hovers that are not gated would stick after a tap: a dark border on a pill; the privacy link's dimming is switched off everywhere (colour is its hover) */
@media (hover:none),(pointer:coarse){
  .pg .ct-form .pill:not(.pill-on):hover{border-color:var(--line) !important;}
}
.pg .ct-form .ct-legal a:hover{opacity:1;}