/* ==========================================================================
   Legal + contact pages — long-form reading, forms, tables, map
   ========================================================================== */

/* --- Page banner shared by every inner page ----------------------------- */

.pagehead {
  background: linear-gradient(160deg, var(--teal-header), var(--sage-card) 55%, var(--teal-deep));
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  text-align: center;
}

.pagehead__shell {
  block-size: auto;
  inline-size: clamp(150px, 20vw, 260px);
  inset-block-start: 50%;
  inset-inline-end: 4%;
  opacity: 0.18;
  pointer-events: none;
  position: absolute;
  transform: translateY(-50%);
}

.pagehead h1 {
  color: var(--white);
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 400;
  position: relative;
  z-index: 1;
}

.pagehead p {
  font-size: var(--fs-lead);
  margin-block-start: var(--sp-3);
  margin-inline: auto;
  max-inline-size: 60ch;
  opacity: 0.94;
  position: relative;
  z-index: 1;
}

/* --- Breadcrumb --------------------------------------------------------- */

.crumbs {
  border-block-end: 1px solid rgb(0 36 36 / 10%);
  font-size: var(--fs-sm);
  padding-block: var(--sp-4);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.crumbs a:hover {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs [aria-current="page"] {
  color: var(--ink-soft);
}

/* --- Long-form document ------------------------------------------------- */

.doc {
  margin-inline: auto;
  max-inline-size: 78ch;
  padding-block: var(--section-y);
}

.doc__meta {
  background: var(--bg-alt);
  border-inline-start: 4px solid var(--sage-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-block-end: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
}

.doc__meta strong {
  color: var(--ink-strong);
}

.doc h2 {
  border-block-end: 1px solid rgb(0 36 36 / 12%);
  color: var(--teal-deep);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin-block: var(--sp-8) var(--sp-4);
  padding-block-end: var(--sp-2);
}

.doc h2:first-of-type {
  margin-block-start: 0;
}

.doc h3 {
  color: var(--teal-accent);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  margin-block: var(--sp-6) var(--sp-3);
}

.doc p {
  margin-block-end: var(--sp-4);
}

.doc ul {
  display: grid;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}

.doc ul li {
  padding-inline-start: var(--sp-5);
  position: relative;
}

.doc ul li::before {
  background: var(--sage-soft);
  block-size: 7px;
  border-radius: 50%;
  content: "";
  inline-size: 7px;
  inset-block-start: 0.72em;
  inset-inline-start: 0;
  position: absolute;
}

.doc ol {
  counter-reset: n;
  display: grid;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}

.doc ol li {
  counter-increment: n;
  padding-inline-start: var(--sp-6);
  position: relative;
}

.doc ol li::before {
  color: var(--sage-card);
  content: counter(n) ".";
  font-weight: 700;
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
}

.doc strong {
  color: var(--ink-strong);
}

/* callout for the "read this carefully" notice */
.notice {
  background: rgb(217 117 0 / 8%);
  border: 1px solid rgb(217 117 0 / 35%);
  border-radius: var(--r-md);
  margin-block-end: var(--sp-6);
  padding: var(--sp-5);
}

.notice p {
  margin-block-end: 0;
}

.notice strong {
  color: #8a4b00;
}

/* --- Pricing tables ----------------------------------------------------- */

.table-wrap {
  border-radius: var(--r-sm);
  margin-block-end: var(--sp-6);
  overflow-x: auto; /* wide tables scroll inside themselves, never the page */
  -webkit-overflow-scrolling: touch;
}

.fee-table {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  inline-size: 100%;
  min-inline-size: 640px;
}

.fee-table th,
.fee-table td {
  border: 1px solid rgb(0 36 36 / 14%);
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  vertical-align: top;
}

.fee-table thead th {
  background: #2c3e50;
  border-color: #2c3e50;
  color: var(--white);
  font-weight: 700;
  line-height: 1.3;
}

.fee-table tbody tr:nth-child(even) {
  background: rgb(0 36 36 / 3%);
}

.fee-table th[scope="row"] {
  font-weight: 400;
  min-inline-size: 12rem;
}

.fee-table th[scope="row"] b {
  color: var(--ink-strong);
  display: block;
}

.table-note {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  margin-block-end: var(--sp-6);
}

/* --- Agreement acceptance block (deck p30) ------------------------------ */

/* The document is capped at 78ch for readability, which is right for legal
   prose but far too narrow for a three-column form. This breaks the panel out
   of that measure and centres it on the viewport instead. */
.agreement {
  background: var(--white);
  border: 1px solid rgb(0 36 36 / 10%);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  inline-size: min(1160px, calc(100vw - 2 * var(--gutter)));
  inset-inline-start: 50%;
  margin-block-start: var(--sp-8);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  position: relative;
  transform: translateX(-50%);
}

.agreement h2 {
  border: 0;
  color: var(--ink-strong);
  font-size: 1.15rem;
  margin-block: 0 var(--sp-3);
  padding: 0;
}

.agreement p {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.agree-form {
  border-block-start: 1px solid rgb(0 36 36 / 10%);
  display: grid;
  gap: var(--sp-5);
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
}

/* checkbox */
.agree-check {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: auto 1fr;
}

.agree-check input {
  block-size: 1px;
  inline-size: 1px;
  opacity: 0;
  position: absolute;
}

.agree-check__box {
  align-items: center;
  aspect-ratio: 1;
  background: var(--white);
  border: 2px solid var(--sage-soft);
  border-radius: 7px;
  color: transparent;
  display: flex;
  inline-size: 30px;
  justify-content: center;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.agree-check__box svg {
  block-size: 60%;
  inline-size: 60%;
}

.agree-check input:checked + .agree-check__box {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--white);
}

.agree-check input:focus-visible + .agree-check__box {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.agree-check__text strong {
  color: var(--ink-strong);
  display: block;
  font-size: 1rem;
}

.agree-check__text small {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

/* --- Plan / category / fields layout ------------------------------------ */

.agree-layout {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 1.5fr);
}

.agree-group {
  border: 0;
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  align-content: start;
}

.agree-group legend {
  align-items: center;
  color: var(--ink-strong);
  display: flex;
  font-size: var(--fs-sm);
  font-weight: 700;
  gap: var(--sp-2);
  letter-spacing: 0.08em;
  margin-block-end: var(--sp-2);
  padding: 0;
  text-transform: uppercase;
}

.agree-group legend svg {
  block-size: 18px;
  color: var(--teal-deep);
  inline-size: 18px;
}

/* radio card */
.opt {
  align-items: start;
  background: var(--white);
  border: 1.5px solid rgb(0 36 36 / 12%);
  border-radius: var(--r-md);
  cursor: pointer;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: auto auto 1fr;
  padding: var(--sp-4);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* rounded tile, as in the mockup — recoloured to the site palette rather
   than the mockup's stock blue/green/orange */
.opt__icon {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 9px;
  color: var(--white);
  display: flex;
  inline-size: 38px;
  justify-content: center;
  transition: transform var(--dur) var(--ease);
}

.opt__icon svg {
  block-size: 21px;
  inline-size: 21px;
}

.opt__icon--teal {
  background: linear-gradient(150deg, var(--teal-header), var(--teal-deep));
}

.opt__icon--sage {
  background: linear-gradient(150deg, var(--sage-card), var(--sage-card-2));
}

.opt__icon--deep {
  background: linear-gradient(150deg, var(--teal-deep), var(--teal-ink));
}

.opt:has(input:checked) .opt__icon {
  transform: scale(1.06);
}

.opt input {
  block-size: 1px;
  inline-size: 1px;
  opacity: 0;
  position: absolute;
}

.opt__dot {
  aspect-ratio: 1;
  border: 2px solid var(--sage-soft);
  border-radius: 50%;
  display: block;
  inline-size: 19px;
  margin-block-start: 2px;
  position: relative;
  transition: border-color var(--dur) var(--ease);
}

.opt__dot::after {
  background: var(--teal-deep);
  border-radius: 50%;
  content: "";
  inset: 3px;
  opacity: 0;
  position: absolute;
  transform: scale(0.4);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.opt:hover {
  border-color: var(--sage-soft);
}

.opt:has(input:checked) {
  background: rgb(0 91 96 / 5%);
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 1px var(--teal-deep);
}

.opt:has(input:checked) .opt__dot {
  border-color: var(--teal-deep);
}

.opt input:checked + .opt__dot::after {
  opacity: 1;
  transform: scale(1);
}

.opt:has(input:focus-visible) {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.opt__body strong {
  color: var(--ink-strong);
  display: block;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.opt__body small {
  color: var(--ink-soft);
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.45;
  margin-block-start: 2px;
}

/* fields */
.agree-fields {
  align-content: start;
  display: grid;
  gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agree-opt {
  color: var(--ink-soft);
  font-weight: 400;
}

/* phone with dialling code */
.agree-tel {
  display: grid;
  grid-template-columns: auto 1fr;
}

.agree-tel select {
  background: rgb(0 36 36 / 5%);
  border: 0;
  border-block-end: 1.5px solid rgb(0 36 36 / 30%);
  border-radius: var(--r-sm) 0 0;
  border-inline-end: 1px solid rgb(0 36 36 / 12%);
  color: var(--ink-strong);
  cursor: pointer;
  padding: 0.7em 0.5em 0.7em 0.75em;
}

.agree-tel select:focus {
  border-block-end-color: var(--teal-deep);
  outline: none;
}

.agree-tel input {
  border-radius: 0 var(--r-sm) 0 0;
}

@media (width <= 980px) {
  .agree-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agree-fields {
    grid-column: 1 / -1;
  }
}

.agree-field {
  display: grid;
  gap: var(--sp-2);
}

.agree-field label {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

.agree-field input {
  background: rgb(0 36 36 / 3%);
  border: 0;
  border-block-end: 1.5px solid rgb(0 36 36 / 30%);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--ink-strong);
  padding: 0.7em 0.85em;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  inline-size: 100%;
}

.agree-field input:focus {
  background: rgb(0 91 96 / 6%);
  border-block-end-color: var(--teal-deep);
  outline: none;
}

/* the typed signature reads as handwriting */
.agree-sign {
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  font-style: italic;
}

/* --- signature: typed or uploaded ---------------------------------------- */

.sigmode {
  display: flex;
  gap: var(--sp-2);
  margin-block-end: var(--sp-1);
}

.sigmode__btn input {
  block-size: 1px;
  inline-size: 1px;
  opacity: 0;
  position: absolute;
}

.sigmode__btn span {
  background: rgb(0 36 36 / 5%);
  border: 1px solid rgb(0 36 36 / 12%);
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-block;
  font-size: var(--fs-xs);
  padding: 0.35em 0.9em;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.sigmode__btn input:checked + span {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--white);
}

.sigmode__btn input:focus-visible + span {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.sigmode__file {
  display: grid;
  gap: var(--sp-2);
}

.sigmode__file input[type="file"] {
  font-size: var(--fs-sm);
}

.sigmode__file input[type="file"]::file-selector-button {
  background: rgb(0 36 36 / 6%);
  border: 1px solid rgb(0 36 36 / 16%);
  border-radius: var(--r-sm);
  color: var(--ink-strong);
  cursor: pointer;
  font-weight: 600;
  margin-inline-end: var(--sp-3);
  padding: 0.45em 0.9em;
}

.sigmode__file small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

/* only one input is shown, driven purely by which mode is selected */
.agree-sigfield:has(input[value="type"]:checked) .sigmode__file,
.agree-sigfield:has(input[value="image"]:checked) .sigmode__type {
  display: none;
}

/* actions */
.agree-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}

.btn--agree,
.btn--dl {
  border-radius: 8px;
  font-size: var(--fs-sm);
  padding: 0.95em 1.7em;
}

.btn--agree svg,
.btn--dl svg {
  block-size: 18px;
  inline-size: 18px;
}

.btn--agree {
  background: var(--teal-deep);
  box-shadow: var(--sh-1);
  color: var(--white);
}

.btn--agree:hover {
  background: var(--teal-ink);
  box-shadow: var(--sh-2);
}

.btn--dl {
  background: var(--white);
  border: 1.5px solid rgb(0 36 36 / 22%);
  color: var(--ink-strong);
}

.btn--dl:hover {
  background: var(--bg-alt);
  border-color: var(--teal-deep);
  color: var(--teal-deep);
}

.agree-note {
  align-items: center;
  color: var(--ink-soft);
  display: flex;
  font-size: var(--fs-xs);
  gap: var(--sp-2);
  justify-content: center;
}

.agree-note svg {
  block-size: 14px;
  inline-size: 14px;
}

.agree-status:empty {
  display: none;
}

.agree-status {
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
}

.agree-status.is-error {
  background: rgb(165 12 17 / 8%);
  color: var(--red);
}

.agree-status.is-ok {
  background: rgb(0 91 96 / 8%);
  color: var(--teal-deep);
}

@media (width <= 620px) {
  .agree-layout,
  .agree-fields {
    grid-template-columns: 1fr;
  }

  .agree-actions .btn {
    flex: 1 1 100%;
  }
}

/* --- Contact page ------------------------------------------------------- */

.contact {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.contact__bg {
  block-size: 100%;
  filter: blur(3px);
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transform: scale(1.06);
  z-index: -2;
}

.contact::after {
  background: linear-gradient(180deg, rgb(163 190 188 / 78%), rgb(210 226 224 / 72%));
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.contact__grid {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.contact__intro {
  text-align: center;
}

.contact__intro h2 {
  color: var(--teal-deep);
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 400;
  margin-block: var(--sp-4) var(--sp-3);
}

.contact__intro > p:first-of-type {
  color: var(--ink-strong);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  margin-block-end: var(--sp-3);
}

.contact__intro-body {
  margin-inline: auto;
  max-inline-size: 46ch;
}

.contact__shell {
  block-size: auto;
  inline-size: clamp(140px, 18vw, 260px);
  margin-block-start: var(--sp-6);
  margin-inline: auto;
}

.contact__wordmark {
  color: var(--teal-label);
  font-size: var(--fs-sm);
  margin-block-start: var(--sp-3);
}

/* --- Form --------------------------------------------------------------- */

/* The card carries its own dark tint rather than relying on whatever the
   section gradient happens to be behind it. Lower down the page that gradient
   pales out, and white labels on pale glass were close to unreadable. */
.form-card {
  background: linear-gradient(160deg, rgb(21 62 65 / 68%), rgb(8 109 106 / 58%));
  border-color: rgb(255 255 255 / 38%);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.form-card__head {
  align-items: center;
  display: flex;
  gap: var(--sp-4);
  margin-block-end: var(--sp-6);
}

.form-card__icon {
  align-items: center;
  aspect-ratio: 1;
  background: linear-gradient(160deg, var(--teal-header), var(--teal-deep));
  border: 2px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  flex: none;
  inline-size: clamp(52px, 6vw, 72px);
  justify-content: center;
}

.form-card__icon svg {
  block-size: 46%;
  inline-size: 46%;
}

.form-card__head h2 {
  color: var(--white);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
}

.form-card__head p {
  color: rgb(255 255 255 / 90%);
  font-size: var(--fs-sm);
  margin-block-start: 2px;
}

.form-grid {
  display: grid;
  gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Honeypot. `display:none` is the one thing spam bots do check for, so the
   field is moved out of sight instead — a person never reaches it. */
.hp {
  inset-block-start: -9999px;
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* Result banner shown after the round-trip through admin-post.php. */
.formnote {
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  margin-block-end: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

.formnote--ok {
  background: rgb(255 255 255 / 92%);
  border-inline-start: 4px solid var(--teal-deep);
  color: var(--teal-deep);
}

.formnote--bad {
  background: rgb(255 255 255 / 92%);
  border-inline-start: 4px solid var(--red);
  color: var(--red);
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.field label .req {
  color: #ffd9a0;
}

.field__box {
  align-items: center;
  background: rgb(255 255 255 / 16%);
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: var(--r-pill);
  display: flex;
  gap: var(--sp-3);
  padding-inline: var(--sp-4);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.field__box:focus-within {
  background: rgb(255 255 255 / 26%);
  border-color: var(--white);
}

.field__box svg {
  block-size: 18px;
  color: rgb(255 255 255 / 80%);
  flex: none;
  inline-size: 18px;
}

.field__box input,
.field__box textarea {
  background: none;
  border: 0;
  color: var(--white);
  font-size: var(--fs-body);
  inline-size: 100%;
  /* without this the input refuses to shrink inside the flex row and long
     placeholders run off the edge of the pill */
  min-inline-size: 0;
  padding-block: 0.85em;
  resize: vertical;
  text-overflow: ellipsis;
}

.field__box input:focus,
.field__box textarea:focus {
  outline: none;
}

.field__box input::placeholder,
.field__box textarea::placeholder {
  color: rgb(255 255 255 / 62%);
}

.field__box--area {
  align-items: start;
  border-radius: var(--r-md);
  padding-block: var(--sp-3);
}

.field__box--area svg {
  margin-block-start: 6px;
}

.field__box--area textarea {
  min-block-size: 8rem;
  padding-block: 0;
}

/* file input */
.field__file {
  align-items: center;
  background: rgb(255 255 255 / 10%);
  border: 1px dashed rgb(255 255 255 / 55%);
  border-radius: var(--r-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  padding: var(--sp-4);
}

.field__file input[type="file"] {
  color: var(--white);
  font-size: var(--fs-sm);
  max-inline-size: 100%;
}

.field__file input[type="file"]::file-selector-button {
  background: rgb(255 255 255 / 22%);
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: var(--r-sm);
  color: var(--white);
  cursor: pointer;
  font-weight: 600;
  margin-inline-end: var(--sp-3);
  padding: 0.5em 1em;
  transition: background-color var(--dur) var(--ease);
}

.field__file input[type="file"]::file-selector-button:hover {
  background: rgb(255 255 255 / 34%);
}

.field__file small {
  color: rgb(255 255 255 / 78%);
  font-size: var(--fs-xs);
}

.consent {
  align-items: start;
  color: rgb(255 255 255 / 92%);
  display: flex;
  font-size: var(--fs-sm);
  gap: var(--sp-3);
  grid-column: 1 / -1;
  margin-block-start: var(--sp-2);
}

/* a bare checkbox all but vanished on the glass — give it a solid field */
.consent input {
  accent-color: var(--amber);
  background: rgb(255 255 255 / 92%);
  block-size: 1.35em;
  border-radius: 4px;
  flex: none;
  inline-size: 1.35em;
  margin-block-start: 0.15em;
}

.form-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
  margin-block-start: var(--sp-4);
}

.btn--submit {
  background: var(--white);
  color: var(--teal-deep);
  font-size: 1.05rem;
  padding: 0.95em 2.6em;
}

.btn--submit:hover {
  background: var(--amber);
  color: var(--white);
}

@media (width <= 860px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .contact__intro {
    order: -1;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 620px) {
  /* the conch was eating most of the first screen before the form appeared */
  .contact__shell {
    inline-size: clamp(110px, 34vw, 150px);
    margin-block-start: var(--sp-4);
  }

  /* stack the icon over the heading — side by side there is not enough
     measure left for "Send us a message" to sit on one line */
  .form-card__head {
    gap: var(--sp-3);
    text-align: center;
    flex-direction: column;
    align-items: center;
  }

  .form-card__head h2 {
    font-size: 1.35rem;
  }

  .form-card {
    padding: var(--sp-5) var(--sp-4);
  }

  .field__box {
    padding-inline: var(--sp-3);
  }

  .consent {
    align-items: start;
  }
}

/* --- Social page section ------------------------------------------------ */

/* The plate is a teal skyline and this section runs dark text on light, so a
   pale scrim sits over it — the texture reads without costing legibility. */
.social {
  background-color: var(--bg-alt);

  /* The deck (p20) shows the skyline plate at close to full strength, so the
     wash is only there to lift text contrast, not to hide the photo. The plate
     is already bright — mean 209 of 255, darkest band 173 — so a light veil is
     enough for the teal headline and the links to stay legible over it. */
  background-image: linear-gradient(180deg, rgb(243 244 243 / 26%), rgb(243 244 243 / 40%)),
    url("../img/bg-whatwedo.jpg");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  overflow: hidden;
  position: relative;
}

/* deck p13: phone on the left, copy in the middle, founder on the right.
   The shell runs a little wider than the site default here, so the two
   cut-outs can grow without squeezing the headline. */
.social__grid {
  align-items: center;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
  max-inline-size: 1440px;
  position: relative;
  z-index: 1;
}

/* the pale disc that sits behind the founder in the deck */
.social::before {
  background: radial-gradient(circle at 50% 50%, rgb(46 106 103 / 9%), rgb(46 106 103 / 0%) 70%);
  block-size: clamp(320px, 42vw, 620px);
  border-radius: 50%;
  content: "";
  inline-size: clamp(320px, 42vw, 620px);
  inset-block-start: 50%;
  inset-inline-end: -6%;
  position: absolute;
  transform: translateY(-50%);
}

.social__phone {
  block-size: auto;
  filter: drop-shadow(0 26px 55px rgb(0 36 36 / 26%));
  inline-size: 100%;
  transition: transform 0.7s var(--ease);
}

@media (hover: hover) {
  .social__phone:hover {
    transform: translateY(-8px) rotate(-1.2deg);
  }
}

/* Sits higher than the two cut-outs it sits between: centred, its last line
   ran under the marquee band, which overlaps this section by design. */
.social__copy {
  align-self: start;
  padding-block-start: clamp(1rem, 3vw, 2.5rem);
}

.social__title {
  color: var(--teal-deep);
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
}

.social__sub {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  margin-block-start: var(--sp-2);
}

/* compact icon row — the deck names only TikTok, but a live contact page
   needs every channel reachable */
.social__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
}

.social-link {
  align-items: center;
  aspect-ratio: 1;
  background: var(--white);
  border: 1px solid rgb(0 36 36 / 8%);
  border-radius: 50%;
  box-shadow: var(--sh-1);
  display: flex;
  inline-size: 46px;
  justify-content: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.social-link:hover {
  background: var(--teal-deep);
  box-shadow: var(--sh-2);
  color: var(--white);
  transform: translateY(-4px);
}

.social-link svg {
  block-size: 21px;
  color: var(--teal-deep);
  inline-size: 21px;
  transition: color var(--dur) var(--ease);
}

.social-link:hover svg {
  color: var(--white);
}

.social__presenter {
  margin-block-start: var(--sp-6);
}

.social__presenter span {
  color: var(--ink-soft);
  display: block;
  font-size: var(--fs-sm);
}

.social__presenter strong {
  color: var(--ink-strong);
  font-size: 1.15rem;
}

/* the cut-out and its caption move together, so the badge is anchored to the
   figure rather than to the grid cell */
.social__figure {
  inline-size: 100%;
  justify-self: center;
  max-inline-size: 480px;
  position: relative;
  transition: transform var(--dur) var(--ease);
}

/* the supplied cut-out already carries its own drop shadow — adding a CSS one
   doubles it into a grey halo, so this only lifts on hover */
.social__photo {
  block-size: auto;
  display: block;
  inline-size: 100%;
}

/* Full-bleed scrolling band closing the section, exactly as on the home page.
   It sits outside .wrap so it runs edge to edge; the section drops its bottom
   padding so the band meets the next section cleanly. */
.social {
  padding-block-end: 0;
}

/* Solid teal band with solid white lettering — deliberately different from
   the home page's sage band with outlined type. Scoped here so the home page
   is unaffected. */
/* Pulled up so the band cuts across the cut-out's hands rather than sitting
   below it. `.social__grid` sets z-index 1, so the band needs 2 to paint over
   it — DOM order alone is not enough once the grid is positioned. */
.social__marquee {
  background: var(--teal-deep);
  margin-block-start: clamp(-6rem, -5.5vw, -3.5rem);
  position: relative;
  z-index: 2;
}

.social__marquee .marquee__item {
  color: var(--white);
  -webkit-text-stroke: 0;
}

@media (hover: hover) {
  .social__figure:hover {
    transform: translateY(-6px);
  }
}

@media (width <= 1000px) {
  /* phone and founder sit side by side beneath the copy */
  .social__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social__copy {
    grid-column: 1 / -1;
    order: -1;
  }
}

/* On a phone, stacking the mockup and the cut-out makes the section about
   700px of nothing but images, and the founder ends up marooned at the
   bottom. Pairing them on a shared baseline halves the height and reads as
   one composition rather than two stray pictures. */
@media (width <= 620px) {
  .social__grid {
    align-items: end;
    column-gap: var(--sp-2);
    grid-template-columns: 1.12fr 0.88fr;
    row-gap: var(--sp-5);
  }

  .social__copy {
    grid-column: 1 / -1;
    text-align: center;
  }

  .social__copy .eyebrow {
    justify-content: center;
  }

  .social__list {
    justify-content: center;
  }

  .social__phone,
  .social__figure {
    max-inline-size: none;
  }

  /* the cut-out is bottom-heavy, so nudge it to sit level with the wrist */
  .social__figure {
    margin-block-end: -2%;
  }

  .social__marquee {
    margin-block-start: -3.2rem;
  }

  .social::before {
    inline-size: 78%;
    inset-inline-end: -18%;
  }
}

/* --- Google Chat --------------------------------------------------------
   Built from the client's own promo artwork, recoloured to the site's teal
   rather than the flyer's forest green so it sits inside the palette.        */

.gchat {
  background: var(--bg);
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
}

/* Two columns: everything on the left, the Short running the full height of
   the panel on the right — the arrangement in the client's artwork. */
.gchat__inner {
  background: linear-gradient(165deg, #eef1ee, #e4e9e5);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1rem, 2vw, 1.6rem);
  text-align: start;
}

.gchat__main {
  display: grid;
  align-content: start;
}

.gchat__kicker {
  color: var(--teal-ink);
  font-family: var(--ff-condensed);
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}

.gchat__title {
  color: var(--teal-deep);
  font-family: var(--ff-condensed);
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.gchat__badge {
  align-items: center;
  background: var(--teal-deep);
  border-radius: var(--r-pill);
  color: var(--white);
  display: inline-flex;
  font-family: var(--ff-condensed);
  font-size: clamp(0.95rem, 1.9vw, 1.35rem);
  gap: var(--sp-2);
  letter-spacing: 0.04em;
  margin-block-start: var(--sp-3);
  padding: 0.3em 1.4em;
  text-transform: uppercase;

  /* Grid item: `inline-flex` does not stop it filling the column, and
     `align-self` is the block axis. `justify-self` is what keeps the pill the
     width of its own text. */
  justify-self: start;
  align-self: start;
}

.gchat__badge svg {
  block-size: 0.9em;
  color: #ffc233;
  inline-size: 0.9em;
}

/* logo · steps · short — the third column fills what was dead space */
.gchat__body {
  align-items: center;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: auto minmax(0, 1fr);
  margin-block-start: var(--sp-4);
  text-align: start;
}

/* Stretches to the panel's height; the ratio then derives the width.
   The old 300px cap fought that — it forced a 300x703 box (0.43) instead of
   9:16 (0.5625), so YouTube letterboxed the Short with black bars. The cap is
   now high enough never to bind at realistic panel heights. */
.gchat__short {
  align-self: stretch;
  aspect-ratio: 9 / 16;
  block-size: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  inline-size: auto;
  max-inline-size: 460px;
}

.gchat__logo {
  block-size: auto;
  display: block;
  inline-size: clamp(72px, 8vw, 104px);
}

.gchat__how {
  border-inline-start: 2px solid rgb(0 36 36 / 14%);
  padding-inline-start: clamp(1rem, 3vw, 2.25rem);
}

.gchat__how h3 {
  color: var(--teal-ink);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  letter-spacing: 0.02em;
  margin-block-end: var(--sp-4);
  text-transform: uppercase;
}

.gchat__steps {
  counter-reset: gstep;
  display: grid;
  gap: var(--sp-2);
}

/* the content is wrapped in a span so a link inside a step cannot become a
   second grid item and drop to its own line */
.gchat__steps li {
  align-items: center;
  color: var(--ink-strong);
  counter-increment: gstep;
  display: grid;
  font-size: var(--fs-body);
  gap: var(--sp-3);
  grid-template-columns: auto 1fr;
}

.gchat__steps li::before {
  align-items: center;
  aspect-ratio: 1;
  background: var(--teal-deep);
  border-radius: 50%;
  color: var(--white);
  content: counter(gstep);
  display: flex;
  font-size: var(--fs-xs);
  font-weight: 700;
  inline-size: 24px;
  justify-content: center;
}

.gchat__steps a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sized to its contents. The second track was 1fr, which made the card span
   the whole row and left a large dead area to the right of the address. */
.gchat__cta {
  align-items: center;
  background: var(--teal-deep);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: auto auto;
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: clamp(0.85rem, 1.8vw, 1.15rem);
  text-align: start;
}

.gchat__cta-icon {
  align-items: center;
  aspect-ratio: 1;
  background: var(--white);
  border-radius: 50%;
  color: var(--teal-deep);
  display: flex;
  inline-size: clamp(48px, 6vw, 66px);
  justify-content: center;
}

.gchat__cta-icon svg {
  block-size: 46%;
  inline-size: 46%;
}

.gchat__cta-label {
  color: rgb(255 255 255 / 88%);
  font-family: var(--ff-condensed);
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gchat__email {
  background: var(--white);
  border-radius: var(--r-pill);
  color: var(--teal-ink);
  display: inline-block;
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  font-weight: 600;
  margin-block: var(--sp-2);
  overflow-wrap: anywhere;
  padding: 0.5em 1.2em;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.gchat__email:hover {
  background: var(--amber);
  color: var(--white);
}

.gchat__cta-note {
  color: rgb(255 255 255 / 82%);
  font-size: var(--fs-sm);
}

.gchat__mailto {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gchat__mailto:hover {
  color: #ffd9a0;
}

.gchat__status:empty {
  display: none;
}

.gchat__status {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-block-end: var(--sp-2);
}

.gchat__status.is-ok {
  color: #b8f0d2;
}

.gchat__status.is-warn {
  color: #ffd9a0;
}

@media (width <= 900px) {
  /* the Short drops beneath the panel content rather than shrinking to a sliver */
  .gchat__inner {
    grid-template-columns: 1fr;
  }

  .gchat__short {
    aspect-ratio: 9 / 16;
    block-size: auto;
    inline-size: min(260px, 70vw);
    justify-self: center;
    max-inline-size: none;
  }
}

@media (width <= 700px) {
  .gchat__body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .gchat__how {
    border-inline-start: 0;
    border-block-start: 2px solid rgb(0 36 36 / 14%);
    padding-block-start: var(--sp-5);
    padding-inline-start: 0;
  }

  .gchat__cta {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* the payment walkthrough, now living inside the Google Chat panel */

/* The walkthrough video that used to sit beside the CTA has been removed, so
   this is a single full-width row rather than a two-column grid. */
.gchat__foot {
  border-block-start: 1px solid rgb(0 36 36 / 12%);
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
}

/* --- Map ---------------------------------------------------------------- */

.map {
  background: var(--bg);
}

.map__frame {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  display: block;
  inline-size: 100%;
  min-block-size: clamp(300px, 48vw, 480px);
}

.map__address {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-block-start: var(--sp-5);
  text-align: center;
}

.map__address svg {
  block-size: 20px;
  color: var(--teal-deep);
  inline-size: 20px;
}