/* Contact. Hero: a street photograph bleeding off the left edge, the title
   beside it. Authored moment: the address, set as display type, slides
   across the grid into place as it enters. */

/* ---------- Hero ---------- */
.hero--address__grid { row-gap: var(--s-6); align-items: end; padding-top: var(--s-6); }
.hero--address__fig { grid-column: 1 / span 6; grid-row: 1; margin: 0 0 0 var(--bleed-left); }
/* The photograph fills its whole column at a fixed height, so the caption ends under its edge and the address stays in the first screen */
.hero--address__fig .hero__media { height: var(--address-photo-h); }
.hero--address__fig .cap { padding-left: var(--gutter); }
.hero--address__text { grid-column: 8 / -1; grid-row: 1; padding-bottom: var(--s-8); }
@media (max-width: 63.99em) {
  .hero--address__fig, .hero--address__text { grid-column: 1 / -1; }
  .hero--address__text { grid-row: 2; }
  .hero--address__fig { margin-inline: calc(-1 * var(--gutter)); }
  .hero--address__fig .hero__media { aspect-ratio: auto; height: var(--hero-media-phone); max-height: none; }
  .hero--address__fig .cap { padding-inline: var(--gutter); }
  .hero--address__text { padding-bottom: 0; }
}

/* ---------- The address ---------- */
.contact-under { padding-block: var(--s-7) var(--s-6); overflow: clip; }
.contact-promise { margin-top: var(--s-5); color: var(--ink-2); }
.email {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding-block: var(--s-5); border-block: var(--hair) solid var(--ink);
  color: var(--ink); text-decoration: none;
}
.email__text {
  font: var(--wt-display) var(--fs-email) / var(--lh-display) var(--font-display);
  font-stretch: var(--wd-display); letter-spacing: var(--tr-h2);
  overflow-wrap: normal;   /* breaks only at the <wbr> after the @ */
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% var(--rule-heavy) no-repeat;
  padding-bottom: var(--s-2);
  transition: background-size var(--t-slow) var(--ease-out), color var(--t-quick) var(--ease-out);
}
/* The envelope sits in a solid accent square: the address is the page's primary action */
.email__mark { display: grid; place-items: center; flex: none; width: var(--s-8); height: var(--s-8); background: var(--accent); color: var(--on-accent); transition: background-color var(--t-quick) var(--ease-out); }
.email .i { width: var(--s-6); height: var(--s-6); flex: none; transition: transform var(--t-quick) var(--ease-out); }
.email:hover .email__text { background-size: 100% var(--rule-heavy); color: var(--accent); }
.email:hover .email__mark { background: var(--accent-press); }
.email:hover .i { transform: translateX(var(--s-1)); }
.email:active .email__mark { background: var(--accent-deep); }
.contact-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
@media (max-width: 47.99em) { .email__mark { width: var(--s-7); height: var(--s-7); } .email .i { width: var(--s-5); height: var(--s-5); } }

@media (prefers-reduced-motion: no-preference) {
  .js .email[data-scroll] .email__text { display: inline-block; transform: translateX(var(--slide-from)); transition: transform var(--t-reveal) var(--ease-out), background-size var(--t-slow) var(--ease-out), color var(--t-quick) var(--ease-out); }
  .js .email[data-scroll].is-in .email__text { transform: none; }
}

/* ---------- What to put in your email: three numbered steps on stone ---------- */
.contact-seq .seq__step p { font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---------- Offices: quiet rows on paper ---------- */
.offices { border-top: var(--hair) solid var(--ink); }
.office {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--col-gap); row-gap: var(--s-2);
  padding-block: var(--s-5); border-bottom: var(--hair) solid var(--rule);
}
.office__city { grid-row: 1 / span 2; }
.office__role { padding-top: var(--s-1); }
.office__text { grid-column: 3; grid-row: 1; color: var(--ink-2); }
@media (max-width: 63.99em) {
  .office { grid-template-columns: minmax(0, 1fr); }
  .office__city { grid-row: auto; }
  .office__text { grid-column: 1; grid-row: auto; }
}

/* ---------- The 2-minute operations test (#operations-test) ----------
   A working section on sand: the test is a printed audit sheet (paper-light) with a dark score
   panel beside it; the send block below pairs the form (stone) with a live preview of the email. */
.contact-test-link { margin-top: var(--s-7); }
/* The headline is long: it gets a wider measure than the section-head default, so it sets in three lines */
.optest > .wrap > .section-head { max-width: none; }
.optest > .wrap > .section-head h2 { max-width: 22ch; }

.optest__sheet {
  --paper: var(--paper-light);
  display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: var(--s-7); align-items: start;
  background: var(--paper-light); border: var(--hair) solid var(--rule); padding: var(--s-7);
}
.optest__instruction { margin-bottom: var(--s-5); font: var(--wt-medium) var(--fs-small) / var(--lh-small) var(--font-sans); color: var(--ink-2); max-width: none; }

/* A row: title | questions | fix panel, under hairlines, a heavy ink rule above the first */
.optest__row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); column-gap: var(--col-gap); row-gap: var(--s-4);
  padding-block: var(--s-6); border-bottom: var(--hair) solid var(--rule); align-items: start;
}
.optest__instruction + .optest__row { border-top: var(--rule-heavy) solid var(--ink); }
.optest__rowhead { display: grid; gap: var(--s-2); }
.optest__sub { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.optest__count { margin-top: var(--s-2); font: var(--wt-medium) var(--fs-micro) / var(--lh-micro) var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.optest__row.is-active .optest__count { color: var(--accent); }

/* Questions: the whole line is the control; the square is drawn, the real checkbox stays focusable */
.optest__qs { display: grid; gap: var(--s-1); }
.optest__q { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--control-h-sm); padding-block: var(--s-2); cursor: pointer; color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-small); }
.optest__q input { position: absolute; width: var(--hair); height: var(--hair); opacity: 0; margin: 0; }
.optest__box {
  flex: none; position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.15em;
  border: 1.5px solid var(--ink); background: var(--paper-light);
  transition: background-color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.optest__box::after {
  content: ""; position: absolute; inset: 0.15rem; background: var(--on-accent); opacity: 0;
  -webkit-mask: url("../../assets/icons/check.svg") center / 100% 100% no-repeat; mask: url("../../assets/icons/check.svg") center / 100% 100% no-repeat;
}
.optest__q:hover .optest__box { border-color: var(--accent); }
.optest__q input:checked + .optest__box { background: var(--accent); border-color: var(--accent); }
.optest__q input:checked + .optest__box::after { opacity: 1; }
.optest__q input:focus-visible + .optest__box { outline: var(--rule-heavy) solid var(--accent); outline-offset: var(--focus-offset); }

/* The fix panel: quiet until its row has two ticks, then the accent tint and "Your first fix" */
.optest__fix { padding: var(--s-5); border: var(--hair) solid var(--rule); transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.optest__fixlabel { display: none; margin-bottom: var(--s-2); font: var(--wt-strong) var(--fs-micro) / var(--lh-micro) var(--font-sans); color: var(--accent); }
.optest__row.is-active .optest__fix { background: var(--accent-tint); border-color: var(--accent-tint); }
.optest__row.is-active .optest__fixlabel { display: block; }
.optest__fixname { font: var(--wt-strong) var(--fs-h4) / var(--lh-h3) var(--font-sans); color: var(--ink); }
.optest__fixtext { margin-top: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.optest__fixmeta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--hair) solid var(--rule); font: var(--wt-strong) var(--fs-small) / var(--lh-small) var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.optest__row.is-active .optest__fixmeta { border-top-color: var(--rule-on-tint); }

/* Score bands, under a heavy ink rule; the current band is marked */
.optest__bands { margin-top: var(--s-7); padding-top: var(--s-4); border-top: var(--rule-heavy) solid var(--ink); }
.optest__bandstitle { margin-bottom: var(--s-3); font: var(--wt-strong) var(--fs-h4) / var(--lh-h3) var(--font-sans); }
.optest__bands li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; padding: var(--s-3); border-bottom: var(--hair) solid var(--rule); color: var(--ink-3); transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.optest__bands li p { max-width: none; }
.optest__bands li strong { color: inherit; }
.optest__range { font: var(--wt-strong) var(--fs-small) / 1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.optest__bands li.is-current { background: var(--accent-tint); color: var(--ink); }
.optest__fine { margin-top: var(--s-5); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); }

/* The score: a dark panel that stays in view beside the test */
.optest__score {
  position: sticky; top: calc(var(--nav-h) + var(--s-5)); z-index: var(--z-raise);
  display: grid; gap: var(--s-3); padding: var(--s-5);
  background: var(--night); color: var(--night-ink-3);
  --ink: var(--night-ink); --accent: var(--night-accent); --accent-press: var(--night-accent); --accent-deep: var(--night-accent); --on-accent: var(--night); --paper: var(--night);
}
.optest__score :focus-visible { outline-color: var(--night-accent); }
.optest__scorelabel { font: var(--wt-medium) var(--fs-small) / 1 var(--font-sans); color: var(--night-ink-3); }
.optest__scoreval { display: grid; gap: var(--s-2); color: var(--night-ink); }
.optest__scoreval [data-score] { font: var(--wt-display) var(--fs-display-2) / 0.9 var(--font-display); font-stretch: var(--wd-display); letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; }
.optest__of { display: inline; font: var(--wt-h2) var(--fs-title) / 1 var(--font-display); font-stretch: var(--wd-display); color: var(--night-ink-3); }
.optest__scoreval > span:first-child, .optest__of { grid-row: 1; }
.optest__scoreval { grid-template-columns: max-content max-content; align-items: baseline; justify-content: start; column-gap: var(--s-2); }
.optest__scoreband { grid-column: 1 / -1; font: var(--wt-medium) var(--fs-sub) / var(--lh-sub) var(--font-serif); color: var(--night-accent); }
.optest__go { justify-self: stretch; }
@media (prefers-reduced-motion: no-preference) {
  .optest__scoreval [data-score].is-bump { animation: optest-bump var(--t-base) var(--ease-out); }
  @keyframes optest-bump { from { opacity: 0.35; transform: translateY(0.12em); } to { opacity: 1; transform: none; } }
}

/* ---------- Send us your score ---------- */
.optest__send { margin-top: var(--s-9); scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
.optest__sendhead { display: grid; gap: var(--s-4); margin-bottom: var(--head-gap); max-width: var(--measure); }
.optest__sendgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: start; }
.optest__form { grid-column: 8 / -1; grid-row: 1; display: grid; gap: var(--s-5); padding: var(--sheet-pad); background: var(--stone); --paper: var(--stone); }
.optest__form .note { margin-top: 0; }
.optest__field { display: grid; gap: var(--s-2); }
.optest__field label { font: var(--wt-medium) var(--fs-small) / var(--lh-small) var(--font-sans); color: var(--ink); }
.optest__field input, .optest__field textarea {
  width: 100%; min-height: var(--control-h-sm); padding: var(--s-2) var(--s-3);
  background: var(--paper-light); color: var(--ink); border: var(--hair) solid var(--rule-strong-deep); border-bottom: 1.5px solid var(--ink); border-radius: var(--radius);
  font: var(--wt-body) var(--fs-body) / var(--lh-small) var(--font-sans);
  transition: border-color var(--t-quick) var(--ease-out);
}
.optest__field textarea { resize: vertical; min-height: calc(3 * 1.5em + var(--s-4)); }
.optest__field input:focus-visible, .optest__field textarea:focus-visible { outline: var(--rule-heavy) solid var(--accent); outline-offset: var(--hair); }
.optest__field.is-invalid input { border-color: var(--accent); }
.optest__help { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); }
.optest__error { font: var(--wt-medium) var(--fs-small) / var(--lh-small) var(--font-sans); color: var(--accent); }
.optest__actions .btn { width: 100%; }
.optest__done { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--paper-light); border: var(--hair) solid var(--rule); border-top: var(--rule-heavy) solid var(--ink); }
.optest__done[hidden], .optest__actions[hidden], .optest__error[hidden] { display: none; }
.optest__donemsg { font: var(--wt-medium) var(--fs-sub) / var(--lh-sub) var(--font-serif); color: var(--ink); }
.optest__donemsg:focus { outline: none; }
.optest__fallback { font: var(--wt-medium) var(--fs-small) / var(--lh-small) var(--font-sans); color: var(--ink-2); }

.optest__preview { grid-column: 1 / span 6; grid-row: 1; display: grid; gap: var(--s-4); align-content: start; }
.optest__address {
  justify-self: start; color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
  font: var(--wt-h2) var(--fs-title) / var(--lh-h2) var(--font-display); font-stretch: var(--wd-h2); letter-spacing: var(--tr-h2);
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% var(--rule-heavy) no-repeat; padding-bottom: var(--s-1);
  transition: background-size var(--t-base) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.optest__address:hover { color: var(--accent); background-size: 100% var(--rule-heavy); }
.optest__preview h4 { margin-top: var(--s-4); }
.optest__mail { background: var(--paper-light); border: var(--hair) solid var(--rule); border-top: var(--rule-heavy) solid var(--ink); padding: var(--s-2) var(--sheet-pad) var(--sheet-pad); --paper: var(--paper-light); }
.optest__mailhead > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-3); border-bottom: var(--hair) solid var(--rule); font-size: var(--fs-small); line-height: var(--lh-small); }
.optest__mailhead dt { color: var(--ink-3); }
.optest__mailhead dd { color: var(--ink); overflow-wrap: anywhere; }
.optest__mailbody { margin-top: var(--s-4); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--wt-body) var(--fs-small) / var(--lh-body) var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.optest__ph { color: var(--ink-3); font-style: italic; }
.optest__noscript { padding: var(--s-5); background: var(--paper-light); border-top: var(--rule-heavy) solid var(--ink); }

/* Without JavaScript: the questions stay, the score, form and preview give way to a plain email link */
html:not(.js) .optest__score, html:not(.js) .optest__sendgrid { display: none; }
html:not(.js) .optest__sheet { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 63.99em) {
  .optest__sheet { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-4) 0; margin-inline: calc(-1 * var(--gutter)); border-inline: 0; }
  .optest__row { grid-template-columns: minmax(0, 1fr); }
  .optest__main { padding-bottom: var(--s-6); }
  /* The score becomes a bar along the bottom of the screen while the questions are in view */
  .optest__score {
    position: sticky; top: auto; bottom: 0; margin-inline: calc(-1 * var(--s-4));
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--gutter);
  }
  .optest__scorelabel { display: none; }
  .optest__scoreval { column-gap: var(--s-2); row-gap: 0; }
  .optest__scoreval [data-score] { font-size: var(--fs-title); }
  .optest__of { font-size: var(--fs-h3); }
  .optest__scoreband { font-size: var(--fs-small); }
  .optest__go { justify-self: end; }
  .optest__form, .optest__preview { grid-column: 1 / -1; grid-row: auto; }
  html:has(#operations-test) { scroll-padding-bottom: 6rem; }
}
@media (max-height: 30em) { .optest__score { position: static; } }

@media print {
  .optest__score, .optest__send, .contact-test-link { display: none !important; }
  .optest__sheet { display: block; background: none; border: 0; padding: 0; }
  .optest__q input:checked + .optest__box { background: none; border-color: var(--print-ink); }
  .optest__q input:checked + .optest__box::after, .optest__fixlabel { display: none; }
  .optest__row.is-active .optest__fix, .optest__bands li.is-current { background: none; }
  .optest__row { break-inside: avoid; }
}