/* KuarkTek — site chrome: header, docked nav, talk card, footer, legal strip.
   Shared by every page. The markup for these lives in assets/js/site-chrome.js. */
/* ---------- header ---------- */
body > header{
  position:fixed;top:0;left:0;right:0;z-index:9999;padding:var(--pad) var(--pad) 0;
  display:flex;align-items:flex-start;justify-content:space-between;
  pointer-events:none;
}
body > header > *{pointer-events:auto}
.logo{position:relative;display:block;width:148px;height:43px}
.logo .lg{position:absolute;left:0;top:0;display:block;width:148px;height:auto;
  transition:opacity var(--dur) var(--ease)}
.logo .lg-dark{opacity:0}
body > header.on-light .lg-light{opacity:0}
body > header.on-light .lg-dark{opacity:1}
body > header.on-light .cta{background:var(--ui-ink);color:var(--white)}
body > header.on-light .cta:hover{background:var(--kt-blue)}
/* ---------- the top nav ----------
   On the home page it sits in the hero and scrolls away with it. Elsewhere the
   header carries it, and it steps aside when the docked nav takes over — the
   two are the same menu and are never both on screen. */
.topnav{
  position:absolute;left:50%;top:var(--pad);transform:translateX(-50%);
  z-index:30;display:flex;align-items:center;gap:var(--gap-16);height:50px;
  background:transparent;pointer-events:auto;
  transition:opacity var(--dur) var(--ease);
}
.topnav a{
  position:relative;font-size:var(--fs-body);font-weight:var(--fw-bold);letter-spacing:var(--ls-snug);
  color:var(--on-dark-soft);transition:color var(--dur) var(--ease);
}
.topnav a.active,.topnav a:hover{color:var(--white)}
.topnav.is-stowed{opacity:0;pointer-events:none}
/* over a light page the dark ink reads, the same swap the mark makes */
body > header.on-light .topnav a{color:var(--muted)}
body > header.on-light .topnav a.active,body > header.on-light .topnav a:hover{color:var(--ink)}
@media (max-width:1100px){.topnav{gap:var(--gap-10)}}
@media (max-width:900px){.topnav{display:none}}
.lockup{display:flex;align-items:center;gap:var(--gap-4)}
.lockup .x{font-family:var(--mono);font-size:var(--fs-sm);opacity:.5;transition:color var(--dur)}
.lockup .client{
  font-size:var(--fs-h3);font-weight:var(--fw-medium);letter-spacing:var(--ls-snug);color:var(--white);white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.lockup .x{opacity:0;transition:opacity var(--dur-slow) var(--ease)}
body.project-open .lockup .client,body.project-open .lockup .x{opacity:1;transform:none}
.cta{
  background:var(--white);color:var(--ui-ink);border-radius:var(--r-pill);
  padding:15px 24px;font-size:var(--fs-ui);line-height:var(--lh-pill);font-weight:var(--fw-bold);
  white-space:nowrap;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.cta:hover{transform:translateY(-2px);background:var(--kt-light)}
/* ---------- footer ---------- */
body > footer{
  position:fixed;left:0;right:0;bottom:0;z-index:9990;
  padding:0 30px 32px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
body > footer > *{pointer-events:auto}
.nav.docked{transform:none;opacity:1}
body > footer > *{pointer-events:auto}
.nav{
  /* parked below the fold, slides up once the hero is out of the way */
  transform:translateY(140%);opacity:0;
  transition:transform var(--dur-slower) var(--ease),opacity var(--dur-slow) var(--ease);
  will-change:transform,opacity;
  display:flex;align-items:center;position:relative;
  background:var(--pill);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-pill);padding:7px;color:var(--ui-ink);
  box-shadow:var(--shadow-soft);
}
.nav .knob{position:absolute;left:0;top:5px;height:50px;border-radius:var(--r-pill);background:#fff;
  transition:transform var(--dur-slow) var(--ease),width var(--dur-slow) var(--ease);z-index:0}
.nav a{position:relative;z-index:1;display:block;padding:13px 23px;
  font-size:var(--fs-ui);font-weight:var(--fw-bold);line-height:var(--lh-pill);border-radius:var(--r-pill)}
/* ---------- hero contact card ---------- */
.talk-card{
  position:fixed;right:30px;bottom:30px;z-index:9992;
  width:298px;height:160px;pointer-events:auto;
  transition:width var(--dur-slower) var(--ease),transform var(--dur-slower) var(--ease),opacity var(--dur-slow) var(--ease);
}
.talk-card.stowed{transform:translateY(150%);opacity:0;pointer-events:none}
.talk-card.tight{width:120px}
.tc-body{
  position:absolute;right:0;bottom:0;width:178px;height:160px;overflow:hidden;
  padding:20px;
  background:var(--white);border-radius:var(--r-sm);color:var(--ui-ink);box-shadow:var(--shadow-float);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--gap-2);
  transition:width var(--dur-slower) var(--ease),opacity var(--dur-slower) var(--ease),padding var(--dur-slower) var(--ease),transform var(--dur-slower) var(--ease);
}
.talk-card.tight .tc-body{width:0;opacity:0;padding-left:0;padding-right:0;transform:translateX(24px)}
/* the clip only needs lifting once the panel beside it is gone and it stands
   alone against the page */
.talk-card.tight .tc-vid{box-shadow:var(--shadow-float)}
/* the clip: anchored left so it grows RIGHT over the panel; once the panel
   is gone it anchors right and grows LEFT instead */
.tc-vid{
  position:absolute;bottom:0;left:0;z-index:2;
  width:120px;height:160px;padding:0;cursor:pointer;
  border:6px solid var(--white);border-radius:var(--r-sm);overflow:hidden;background:var(--ui-ink);
  transition:width var(--dur-slower) var(--ease),height var(--dur-slower) var(--ease),left var(--dur-slower) var(--ease),right var(--dur-slower) var(--ease),box-shadow var(--dur-slower) var(--ease);
}
.talk-card.playing .tc-vid{width:260px;height:480px;left:calc(100% - 260px);z-index:3}
.tc-vid video,.tc-vid canvas{width:100%;height:100%;object-fit:cover;border-radius:var(--r-xs)}
/* closed, the tall clip is cropped hard — bias the crop upward so the frame
   keeps the head rather than trimming it top and bottom. Expanded, the box is
   nearly the clip's own ratio, so it goes back to centre. */
.tc-vid video{object-position:50% 12%;transition:object-position var(--dur-slower) var(--ease)}
.talk-card.playing .tc-vid video{object-position:50% 50%}
.tc-vid video{position:absolute;inset:0;display:none}
.tc-vid canvas{position:relative;display:block}
.tc-vid.has-video video{display:block}
.tc-vid.has-video canvas{display:none}
.tc-play{
  position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:var(--r-round);background:rgba(255,255,255,.92);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.tc-play::after{
  content:'';position:absolute;left:13px;top:10px;
  border-left:11px solid var(--ui-ink);border-top:7px solid transparent;border-bottom:7px solid transparent;
}
.tc-vid:hover .tc-play{transform:scale(1.12);background:#fff}
/* Where there is a pointer the mark waits for it, so the face is clear until
   you go looking. On touch there is no hover to reveal it, so it stays put —
   otherwise nothing says the clip can be played. */
@media (hover: hover) and (pointer: fine){
  .tc-play{opacity:0}
  .tc-vid:hover .tc-play{opacity:1}
}
.talk-card.playing .tc-play{opacity:0;transform:scale(.6);pointer-events:none}
/* overlay controls, revealed on hover while the clip is expanded */
.tc-ctl{position:absolute;inset:0;pointer-events:none}
/* the round controls are a hover affordance… */
.tc-ico{opacity:0;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.talk-card.playing .tc-vid:hover .tc-ico,
.talk-card.playing .tc-vid:focus-within .tc-ico{opacity:1;pointer-events:auto}
/* …but the call to action stays up for as long as the clip is open */
.tc-cta{opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.talk-card.playing .tc-cta{opacity:1;pointer-events:auto}
.tc-ico{
  position:absolute;top:14px;width:38px;height:38px;border-radius:var(--r-round);
  background:rgba(20,26,45,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;
}
.tc-ico:hover{background:rgba(20,26,45,.8);transform:scale(1.08)}
.tc-mute{left:14px}
.tc-close{right:14px}
.tc-close::before,.tc-close::after{
  content:'';position:absolute;width:15px;height:2px;background:#fff;border-radius:var(--r-hair);
}
.tc-close::before{transform:rotate(45deg)}
.tc-close::after{transform:rotate(-45deg)}
.tc-mute{color:var(--white)}
.tc-mute svg{width:20px;height:20px;display:block}
/* resting state is muted: slash shown, waves hidden. `.on` = sound is live */
.tc-mute .wave{opacity:0}
.tc-mute .slash{opacity:1}
.tc-mute.on .wave{opacity:1}
.tc-mute.on .slash{opacity:0}
/* karaoke captions — one line at a time, word by word */
.tc-cap{
  position:absolute;left:14px;right:14px;bottom:128px;z-index:2;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-end;
  gap:var(--gap-hair) var(--gap-1);pointer-events:none;
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.talk-card.playing .tc-cap{opacity:1}
.tc-cap i{
  font-style:normal;font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:var(--lh-text);letter-spacing:var(--ls-snug);
  color:var(--on-dark-faint);background:rgba(6,9,18,.72);
  padding:1px 5px;border-radius:var(--r-xs);
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.tc-cap i.said{color:var(--white)}
.tc-cap i.now{color:var(--white);background:var(--kt-blue)}
@media (max-width:760px){.tc-cap i{font-size:var(--fs-sm)}.tc-cap{bottom:104px}
}
.tc-cta{
  position:absolute;left:50%;bottom:18px;
  background:var(--white);color:var(--ui-ink);border-radius:var(--r-pill);
  padding:11px 20px;font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--ls-normal);white-space:nowrap;
  box-shadow:var(--shadow-on-dark);
}
.tc-ctl .tc-cta{transform:translate(-50%,8px)}
.talk-card.playing .tc-ctl .tc-cta{transform:translate(-50%,0)}
.tc-meta{display:flex;flex-direction:column;gap:var(--gap-hair)}
.tc-role{margin:0;font-size:var(--fs-tag);font-weight:var(--fw-bold);line-height:var(--lh-text);letter-spacing:var(--ls-normal);color:var(--ui-ink)}
.tc-at{margin:0;font-size:var(--fs-tag);font-weight:var(--fw-body);line-height:var(--lh-text);letter-spacing:var(--ls-normal);color:var(--kt-muted)}
.tc-name{margin:0;font-size:var(--fs-lead);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--ls-snug);color:var(--ui-ink);white-space:nowrap}
.tc-btn{
  align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:var(--gap-2);
  width:100%;height:32px;padding:0 13px;border-radius:var(--r-pill);
  background:var(--ui-ink);color:var(--white);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--ls-normal);
  transition:background var(--dur) var(--ease);
}
.tc-btn:hover{background:#252525}
/* live indicator */
.tc-btn .dot{position:relative;width:7px;height:7px;border-radius:var(--r-round);background:#34D399;flex:0 0 auto}
.tc-btn .dot::after{
  content:'';position:absolute;inset:-4px;border-radius:var(--r-round);
  border:1.5px solid #34D399;animation:live 1.9s cubic-bezier(0,0,.2,1) infinite;
}
@media (max-width:760px){
  .talk-card{right:16px;bottom:96px;width:236px;height:114px}
  .talk-card.tight{width:86px}
  .tc-vid{width:86px;height:114px;border-width:4px}
  .talk-card.playing .tc-vid{width:200px;height:340px;left:calc(100% - 200px)}
  .tc-body{width:150px;height:114px;padding:14px}
  .tc-name{font-size:var(--fs-body)}
}
.site-footer {
  width: calc(100% - 20px);
  margin: 0 10px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-dark);
  color: var(--white);
}
.services-section,
.site-footer {
  position: relative;
  isolation: isolate;
}
.services-section__inner,
.site-footer__inner {
  position: relative;
  z-index: 1;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-150) 0 var(--space-30);
}
.site-footer__content {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-60);
}
.site-footer__left {
  display: flex;
  width: 100%;
  max-width: var(--measure);
  flex-direction: column;
  gap: var(--space-60);
}
.site-footer__title {
  margin: 0;
  color: var(--white);
  font-size: var(--fs-hero-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.site-footer__title a { color: inherit; }
.site-footer__description {
  max-width: var(--measure);
  margin: 0;
  color: var(--on-dark-muted);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
}
.site-footer__description strong { color: var(--white); font-weight: var(--fw-bold); }
.site-footer__divider {
  width: 100%;
  height: 1px;
  background: var(--line-dark);
}
.site-footer__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-30);
}
.site-footer__feature { display: flex; min-width: 0; flex-direction: column; gap: var(--gap-5); }
.site-footer__feature-top {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-4);
}
.site-footer__feature-top svg {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.site-footer__feature h3 {
  margin: 0;
  color: var(--white);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
}
.site-footer__feature p {
  margin: 0;
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.site-footer__right { width: 100%; max-width: 31.25rem; }
.site-footer__form-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--gap-8);
  padding: 40px;
  padding-bottom: var(--gap-6);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
}
.site-footer__form-card > h3 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
}
.site-footer__form-card > h3 span { color: var(--muted); }
.site-footer__form,
.site-footer__inputs,
.site-footer__field,
.site-footer__captcha {
  display: flex;
  flex-direction: column;
}
.site-footer__form { gap: var(--gap-4); }
.site-footer__inputs { gap: var(--gap-4); }
.site-footer__field { gap: var(--gap-3); }
.site-footer__captcha { gap: var(--gap-4); }
.site-footer__field label {
  color: var(--ink);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-none);
}
.site-footer__field input {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--r-sm);
  outline: 0;
  background: var(--surface);
  color: var(--ink);
  font: 600 16px/1.125 "Red Hat Display", Arial, sans-serif;
  letter-spacing: var(--ls-snug);
  box-shadow: none;
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-footer__field input::placeholder { color: var(--muted); }
.site-footer__field input:focus { background: var(--white); box-shadow: 0 0 0 1px var(--surface); }
.site-form__services { min-width: 0; margin: 0; padding: 0; border: 0; }
.site-form__services legend {
  margin-bottom: var(--gap-3);
  color: var(--ink);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-none);
}
.site-form__service-options { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.site-form__service-options label { position: relative; cursor: pointer; }
.site-form__service-options input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.site-form__service-options span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gap-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-form__service-options label:hover span { transform: translateY(-1px); }
.site-form__service-options input:focus-visible + span,
.site-form__service-options input:checked + span { background: var(--brand); color: var(--white); }
.site-footer__captcha > p {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.site-footer__captcha-items { display: flex; flex-wrap: wrap; gap: var(--gap-3); }
/* the honeypot has to be reachable to a script and invisible to a person, so
   it is moved out of view rather than hidden — display:none is a tell */
.site-footer__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.site-footer__status {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.site-footer__status[data-state="error"] { color: var(--brand); }
.site-footer__captcha-items button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 8px;
  place-items: center;
  border: 0;
  border-radius: var(--r-round);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-footer__captcha-items button:hover { transform: translateY(-2px); }
.site-footer__captcha-items button.is-selected { background: var(--ink); color: var(--white); }
.site-footer__captcha-items svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}
.site-footer__submit {
  width: 100%;
  min-height: 50px;
  height: 50px;
  opacity: 1;
}
.site-footer__submit .button-text-wrapper,
.site-footer__submit .site-footer__submit:hover { background: var(--brand); }
.site-footer__disclaimer {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
}
.site-footer__disclaimer a { color: var(--ink); }
.site-footer__contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) minmax(220px, 1fr);
  gap: var(--space-60);
  align-items: start;
  margin-top: var(--space-120);
  padding-bottom: var(--space-60);
}
.site-footer__contact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--gap-2);
  margin: 0;
  font-style: normal;
}
.site-footer__contact > a:first-of-type {
  width: fit-content;
  color: var(--white);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
  transition:color var(--dur) var(--ease);
}
.site-footer__email {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--gap-2);
  color: var(--white);
  font-size: clamp(var(--fs-h2), 2.25vw, var(--fs-display-sm));
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
  transition:color var(--dur) var(--ease);
}
.site-footer__address {
  margin: var(--gap-4) 0 0;
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
  font-style: normal;
}
.site-footer__email-text {
  border-bottom: 2px solid currentColor;
  transition:border-color var(--dur) var(--ease);
}
.site-footer__email:hover .site-footer__email-text { border-color: transparent; }
.site-footer__contact > a:first-of-type:hover { color: var(--on-dark-soft); }
.site-footer__links {
  grid-column: 2 / 4;
  display: grid;
  width: 100%;
  max-width: var(--measure-sm);
  grid-template-columns: minmax(0, 1fr);
  justify-self: end;
}
.site-footer__social-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: var(--space-30);
}
.site-footer__socials {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap-2);
}
.site-footer__socials > span {
  margin-bottom: 8px;
  color: var(--on-dark-faint);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.site-footer__socials--secondary { padding-top: 34px; }
.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  color: var(--white);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
  transition:color var(--dur) var(--ease);
}
.site-footer__social-arrow {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  overflow: hidden;
  color: var(--on-dark-faint);
  transition:color var(--dur) var(--ease);
}
.site-footer__social-arrow i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-style: normal;
  transition:transform var(--dur) var(--ease);
}
.site-footer__social-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}
.site-footer__social-arrow i:last-child { transform: translate(-100%, 100%); }
.site-footer__socials a:hover { color: var(--on-dark-soft); }
.site-footer__socials a:hover .site-footer__social-arrow { color: var(--on-dark-soft); }
.site-footer__socials a:hover .site-footer__social-arrow i:first-child,
.site-footer__socials a:focus-visible .site-footer__social-arrow i:first-child { transform: translate(100%, -100%); }
.site-footer__socials a:hover .site-footer__social-arrow i:last-child,
.site-footer__socials a:focus-visible .site-footer__social-arrow i:last-child { transform: translate(0); }
.site-legal {
  /* whatever the page stands on. On the home page that is --surface; on a case
     study it is the case's own colour, and a white band there would look like
     a piece of another site. */
  background: transparent;
  color: var(--ink);
}
.site-legal__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-30);
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.site-legal__inner p { margin: 0; color: var(--ink); font-weight: var(--fw-medium); }
.site-legal__inner > div { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-10); margin-left: auto; }
.site-legal__inner a { color: var(--ink); font-weight: var(--fw-medium); transition:color var(--dur) var(--ease); }
.site-legal__inner a:hover { color: var(--muted); }
@media (max-width: 1024px){
  .site-footer__inner {
    gap: 0;
    padding-top: var(--space-120);
  }
  .site-footer__content { flex-direction: column; }
  .site-footer__left,
  .site-footer__right { max-width: 100%; }
  .site-footer__contact-layout { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(160px, 1fr)); gap: var(--space-30); }
  .site-footer__links { max-width: 460px; }
}
@media (max-width: 700px){
  .site-footer__inner {
    gap: 0;
    padding: var(--space-60) 1.5rem var(--space-30);
  }
  .site-footer__left { gap: var(--gap-10); }
  .site-footer__title {
    font-size: var(--fs-hero);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
  }
  .site-footer__description { font-size: var(--fs-h3); }
  .site-footer__features { grid-template-columns: 1fr; }
  .site-footer__form-card { padding: 24px; }
  .site-footer__contact-layout { grid-template-columns: 1fr; gap: var(--space-60); }
  .site-footer__links { grid-column: auto; max-width: none; justify-self: stretch; }
  .site-footer__social-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-legal__inner { align-items: flex-start; flex-direction: column; }
  .site-legal__inner > div { width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: var(--gap-4) var(--gap-6); }
}
@media (prefers-reduced-motion: reduce){
.services-section::before,
  .site-footer::before { animation: none; }
}
@media (max-width:760px){
  body > header{padding-top:var(--pad)}
  /* the mark is a wordmark, not a glyph — at 34px it was unreadable */
  .logo,.logo .lg{width:120px}
  /* the CTA and the docked nav shrink together, by the same fraction, so the
     two pills still read as one family: 44px -> 34px and 55px -> 40px */
  .cta{padding:7px 13px;font-size:var(--fs-sm);line-height:var(--lh-pill)}
  .nav{order:1;justify-content:center;padding:4px}
  .nav a{padding:6px 12px;font-size:var(--fs-sm)}
  /* the knob was a fixed 50px tall, drawn for the 46px desktop row. On the
     shorter row it stood proud of the label it was meant to sit behind, which
     is what made the bar look broken. It now takes its height from the row,
     keeping the same 2px of bleed the desktop knob has. */
  .nav .knob{top:2px;bottom:2px;height:auto}
  /* Page content passes directly under the mark once the hero is out of the
     way. A short wash of blur that fades out downward keeps the logo and the
     button legible without putting a bar across the top of the screen. It
     only appears with .on-light — that is, at the moment the mark flips to
     its dark version over the light page. Over the hero it would sit on the
     rounded top corners and cut them, and over a dark band there is nothing
     to separate the mark from. */
  body > header::before{
    content:"";position:absolute;inset:0 0 auto;height:92px;z-index:-1;
    pointer-events:none;opacity:0;
    transition:opacity var(--dur-slow) var(--ease);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 100%);
  }
  body > header.on-light::before{opacity:1}
}

/* ---------- narrow screens ---------- */
@media (max-width: 1284px) {
  /* the footer sets its own padding shorthand, which zeroes the inline
     padding the shell would otherwise give it */
  .site-footer__inner { padding-inline: var(--pad); }
}

@media (max-width: 700px) {
  /* On a phone the nav is the only way around the site, so it stays on screen
     from the first pixel rather than waiting for the hero to get out of the
     way. hero.js still adds and removes .docked — it just no longer decides
     whether the menu is visible. */
  .nav { transform: none; opacity: 1; }
  /* the docked nav is full width down here, so the legal line needs room to
     clear it instead of sitting behind the pill. The links sit under the
     copyright on the same left edge — pushed to the right they read as a row
     that lost its other half. */
  .site-legal__inner {
    gap: var(--gap-4);
    padding-top: var(--space-30);
    padding-bottom: 104px;
  }
  .site-legal__inner > div {
    justify-content: flex-start;
    gap: var(--gap-2) var(--gap-5);
    margin-left: 0;
  }
  /* and the nav keeps the page's gutter */
  body > footer { padding-inline: var(--pad); }
}