/* The dedicated phone document. Desktop continues to use styles.css and aria.css alone. */
.mobile-document {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-padding-top: calc(70px + env(safe-area-inset-top));
}

.mobile-page {
  --mobile-container: calc(100% - 32px);
  --mobile-app-height: 100dvh;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0 0 calc(94px + env(safe-area-inset-bottom));
  overflow-x: clip;
  background: var(--paper);
}

.mobile-page.aria-is-open,
.mobile-page.mobile-menu-is-open {
  overflow: hidden;
}

.mobile-container {
  width: min(var(--mobile-container), calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: 640px;
  margin-inline: auto;
}

/* ---------- full-screen Aria ---------- */
.mobile-aria-shell {
  position: fixed;
  z-index: 300;
  right: 0;
  left: 0;
  top: var(--mobile-app-top, 0px);
  display: grid;
  width: auto;
  max-width: 100dvw;
  height: var(--mobile-app-height);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--white);
  background: var(--ink);
  overflow: hidden;
  visibility: visible;
  transform: translateY(0);
  transition: transform 260ms ease, visibility 0s;
}

.mobile-page:not(.aria-is-open) .mobile-aria-shell {
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 260ms ease, visibility 0s linear 260ms;
}

.mobile-aria-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  width: 100%;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 253, 248, 0.14);
  background: var(--ink);
}

.mobile-aria-brand .brand-mark {
  width: 38px;
  height: 38px;
  border-color: rgba(255, 253, 248, 0.7);
  color: var(--white);
}

.mobile-aria-brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.mobile-aria-brand .brand-mark { flex: none; }
.mobile-aria-brand .brand-name { min-width: 0; overflow: hidden; color: var(--white); }

.mobile-explore {
  flex: none;
  max-width: 44%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 253, 248, 0.36);
  border-radius: 999px;
  color: var(--white);
  background: transparent;
  font-size: 13px;
  font-weight: 750;
  white-space: normal;
  cursor: pointer;
}

.mobile-explore span {
  display: inline-block;
  margin-left: 6px;
  color: #e6ae9d;
}

.mobile-aria-shell .aria-rail {
  position: relative;
  z-index: 1;
  inset: auto;
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 8px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  border: 0;
  background: var(--ink);
}

.mobile-aria-shell .aria-chat {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: clamp(120px, 22vh, 190px) minmax(92px, 1fr) auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: 14px;
  box-shadow: none;
}

.mobile-aria-shell .aria-portrait {
  grid-column: 1;
  grid-row: 1;
  border: 0;
  border-bottom: 1px solid var(--aria-line);
}

/* Keep the normal Aria media and crop. The phone shell adds no portrait effect. */
.mobile-aria-shell .aria-portrait::after { display: none; }

.mobile-aria-shell .aria-conversation {
  grid-column: 1;
  grid-row: 2;
}

.mobile-aria-shell .aria-head {
  padding: 8px 14px;
}

.mobile-aria-shell .aria-head strong { font-size: 17px; }
.mobile-aria-shell .aria-head span { font-size: 11px; }
.mobile-aria-shell .aria-ghost { max-width: 48%; white-space: normal; }
.mobile-aria-shell .aria-transcript { padding: 10px 14px; }
.mobile-aria-shell .aria-message { min-width: 0; max-width: 92%; padding: 8px 12px; overflow-wrap: anywhere; }

.mobile-aria-shell .aria-composer-wrap {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 0 12px 10px;
  flex-direction: column;
}

.mobile-aria-shell .aria-status {
  order: 0;
  margin: 6px 2px;
}

.mobile-aria-shell .aria-voice {
  order: 1;
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 98px);
  gap: 6px 12px;
  align-items: center;
}

.mobile-aria-shell .aria-voice-button {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 48px;
  border-color: rgba(200, 86, 53, 0.8);
  background: rgba(200, 86, 53, 0.12);
}

.mobile-aria-shell .aria-mic-modes { min-width: 0; gap: 3px; }
.mobile-aria-shell .aria-mic-modes label { min-width: 0; overflow-wrap: anywhere; }
.mobile-aria-shell .aria-mic-state { min-width: 0; grid-column: 1 / -1; font-size: 11px; }

.mobile-aria-shell .aria-composer {
  order: 2;
  min-width: 0;
  min-height: 48px;
  margin-top: 8px;
}

.mobile-aria-shell .aria-send,
.mobile-aria-shell .aria-stop { min-width: 58px; height: 36px; padding: 0 13px; }

.mobile-page.keyboard-is-open .mobile-aria-shell .aria-chat {
  grid-template-rows: minmax(72px, 1fr) auto;
}

.mobile-page.keyboard-is-open .mobile-aria-shell .aria-portrait { display: none; }
.mobile-page.keyboard-is-open .mobile-aria-shell .aria-conversation { grid-row: 1; }
.mobile-page.keyboard-is-open .mobile-aria-shell .aria-composer-wrap { grid-row: 2; }

/* ---------- collapsed Aria launcher ---------- */
.mobile-aria-launcher {
  position: fixed;
  z-index: 180;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: calc(12px + env(safe-area-inset-left));
  display: grid;
  min-height: 64px;
  padding: 8px 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 253, 248, 0.18);
  border-radius: 18px;
  color: var(--white);
  background: var(--ink);
  box-shadow: 0 16px 44px rgba(16, 29, 46, 0.3);
  text-align: left;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}

.aria-is-open .mobile-aria-launcher {
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
}

.mobile-aria-launcher-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: #e6ae9d;
  font-family: var(--serif);
  font-size: 20px;
}

.mobile-aria-launcher-copy { display: grid; min-width: 0; line-height: 1.25; }
.mobile-aria-launcher-copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-aria-launcher-copy strong { font-family: var(--serif); font-size: 18px; font-weight: 400; }
.mobile-aria-launcher-copy small { margin-top: 2px; color: #bfc7d1; font-size: 11px; }
.mobile-aria-launcher-arrow { color: #e6ae9d; font-size: 20px; }

/* ---------- site chrome ---------- */
.mobile-site-header {
  position: sticky;
  z-index: 200;
  top: 0;
  display: flex;
  min-height: calc(66px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 241, 233, 0.96);
  backdrop-filter: blur(14px);
}

.mobile-site-header .brand-mark { width: 38px; height: 38px; }

.mobile-menu-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-content: center;
  gap: 6px;
  border: 1px solid var(--ink);
  background: transparent;
}

.mobile-menu-toggle > span[aria-hidden] {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--ink);
  transition: transform 180ms ease;
}

.mobile-menu-toggle[aria-expanded="true"] > span[aria-hidden]:nth-last-child(2) { transform: translateY(3.5px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] > span[aria-hidden]:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-site-nav {
  position: fixed;
  z-index: 199;
  top: calc(66px + env(safe-area-inset-top));
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  padding: 38px calc(24px + env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  flex-direction: column;
  gap: 4px;
  background: var(--paper);
}

.mobile-site-nav.open { display: flex; }

.mobile-site-nav a,
.mobile-site-nav button {
  display: flex;
  min-height: 56px;
  padding: 0 4px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  font-family: var(--serif);
  font-size: 28px;
  text-align: left;
}

.mobile-site-nav button { margin-top: 20px; color: var(--accent-dark); font-family: var(--sans); font-size: 15px; font-weight: 750; }

/* ---------- mobile content ---------- */
.mobile-page main { display: block; }

.mobile-hero {
  position: relative;
  padding: 72px 0 42px;
  overflow: hidden;
}

.mobile-hero::after {
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(200, 86, 53, 0.35);
  border-radius: 50%;
  content: "";
}

.mobile-page .eyebrow { margin-bottom: 20px; }

.mobile-page h1 {
  max-width: 440px;
  margin-bottom: 24px;
  font-size: clamp(45px, 13.3vw, 64px);
  line-height: 0.94;
  overflow-wrap: anywhere;
}

.mobile-hero-intro {
  margin-bottom: 28px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
}

.mobile-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.mobile-hero-actions button { min-width: 134px; }

.mobile-focus-list {
  display: grid;
  margin-top: 48px;
  padding-top: 18px;
  grid-template-columns: 1fr 1fr;
  gap: 9px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
}

.mobile-focus-list span::before { color: var(--accent); content: "·"; margin-right: 8px; }

.mobile-section { padding: 76px 0; scroll-margin-top: calc(68px + env(safe-area-inset-top)); }
.mobile-section-heading { margin-bottom: 32px; }
.mobile-section-heading h2 { margin-bottom: 22px; font-size: clamp(39px, 11vw, 52px); line-height: 1.03; }
.mobile-section-heading h2 { overflow-wrap: anywhere; }
.mobile-section-heading > p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: 16px; }

.mobile-services { background: var(--white); }
.mobile-service-grid { grid-template-columns: 1fr; }

.mobile-service-grid .service-card {
  min-height: 0;
  padding: 25px 22px;
}

.mobile-service-grid .service-card:hover { box-shadow: none; transform: none; }
.mobile-service-grid .card-number { margin-bottom: 24px; }
.mobile-service-grid .service-card p { margin-bottom: 18px; }

.mobile-service-grid details,
.mobile-about-details {
  border-top: 1px solid var(--line);
}

.mobile-service-grid summary,
.mobile-about-details summary {
  position: relative;
  min-height: 48px;
  padding: 13px 32px 11px 0;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.mobile-service-grid summary::-webkit-details-marker,
.mobile-about-details summary::-webkit-details-marker { display: none; }

.mobile-service-grid summary::after,
.mobile-about-details summary::after {
  position: absolute;
  top: 12px;
  right: 2px;
  font-size: 20px;
  font-weight: 400;
  content: "+";
}

.mobile-service-grid details[open] summary::after,
.mobile-about-details[open] summary::after { content: "−"; }

.mobile-service-grid .service-card ul { padding-bottom: 3px; }

.mobile-work { background: var(--paper); }
.mobile-work-grid { display: grid; gap: 52px; }
.mobile-work-grid .work-shot { margin-bottom: 22px; box-shadow: 0 14px 44px rgba(21, 33, 50, 0.12); }
.mobile-work-grid .work-card p { margin-bottom: 17px; }

.workstation-label {
  display: inline-flex;
  min-height: 38px;
  padding: 0 13px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper-deep);
  font-size: 12px;
  font-weight: 750;
}

.workstation-label span { color: var(--accent); }

.mobile-approach { color: var(--white); background: var(--ink); }
.mobile-approach .mobile-section-heading > p:last-child { color: #bfc7d1; }

.mobile-process-list { margin: 0; padding: 0; list-style: none; }
.mobile-process-list li { display: grid; padding: 25px 0; grid-template-columns: 42px 1fr; border-top: 1px solid rgba(255,255,255,.2); }
.mobile-process-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.mobile-process-list > li > span { padding-top: 4px; color: #e6ae9d; font-size: 10px; font-weight: 700; }
.mobile-process-list h3 { margin-bottom: 7px; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.mobile-process-list p { margin: 0; color: #bfc7d1; font-size: 14px; }

.mobile-about { background: var(--paper-deep); }
.mobile-monogram {
  display: inline-flex;
  width: 108px;
  height: 108px;
  margin-bottom: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(23,38,58,.32);
  font-family: var(--serif);
  font-size: 58px;
  letter-spacing: -.17em;
}
.mobile-monogram span:last-child { color: var(--accent); }
.mobile-about-lead { color: var(--ink) !important; font-family: var(--serif); font-size: 21px !important; line-height: 1.45; }
.mobile-about-details p { color: var(--ink-soft); }

.mobile-contact { color: var(--white); background: var(--accent-dark); }
.mobile-contact .mobile-section-heading > p:last-of-type { color: #f1d6ce; }
.mobile-contact .contact-email { margin-top: 14px; overflow-wrap: anywhere; }
.mobile-contact .contact-form { padding-top: 14px; }
.mobile-contact .contact-form label { margin-bottom: 24px; }
.mobile-contact .form-footer { align-items: flex-start; flex-direction: column; }

.mobile-footer {
  padding: 38px 0 calc(38px + env(safe-area-inset-bottom));
  color: #bfc7d1;
  background: #101d2e;
}

.mobile-footer .mobile-container { display: grid; justify-items: start; gap: 24px; }
.mobile-footer p { margin: 0; font-size: 11px; }
.mobile-footer > div > a:last-child { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid #7c8796; font-size: 12px; }

.mobile-page .service-spotlight { align-items: flex-start; flex-direction: column; }
.mobile-page .inquiry-draft { margin-top: 24px; }
.mobile-page .overlay-zone { z-index: 400; top: calc(74px + env(safe-area-inset-top)); }
.mobile-page .skip-link { z-index: 500; }

@media (max-width: 359px) {
  .mobile-page { --mobile-container: calc(100% - 24px); }
  .mobile-aria-topbar {
    padding-right: calc(12px + env(safe-area-inset-right));
    padding-left: calc(12px + env(safe-area-inset-left));
  }
  .mobile-aria-brand .brand-name { display: none; }
  .mobile-aria-shell .aria-chat { grid-template-rows: 112px minmax(78px, 1fr) auto; }
  .mobile-aria-shell .aria-head span { display: none; }
  .mobile-aria-shell .aria-voice { grid-template-columns: 1fr; }
  .mobile-aria-shell .aria-mic-modes { flex-direction: row; gap: 14px; }
  .mobile-page h1 { font-size: 43px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .mobile-aria-topbar {
    min-height: calc(54px + env(safe-area-inset-top));
    padding-top: calc(5px + env(safe-area-inset-top));
    padding-bottom: 5px;
  }

  .mobile-aria-shell .aria-chat {
    grid-template-columns: minmax(0, 1fr) min(31vw, 240px);
    grid-template-rows: minmax(76px, 1fr) auto;
  }

  .mobile-aria-shell .aria-portrait {
    display: block;
    grid-column: 2;
    grid-row: 1 / -1;
    border: 0;
    border-left: 1px solid var(--aria-line);
  }

  .mobile-aria-shell .aria-conversation { grid-column: 1; grid-row: 1; }
  .mobile-aria-shell .aria-composer-wrap { grid-column: 1; grid-row: 2; }
  .mobile-aria-shell .aria-head { padding-block: 5px; }
  .mobile-aria-shell .aria-head span,
  .mobile-aria-shell .aria-mic-state { display: none; }
  .mobile-aria-shell .aria-transcript { padding-block: 6px; }
  .mobile-aria-shell .aria-status { margin-block: 3px; }
  .mobile-aria-shell .aria-voice-button { min-height: 40px; }
  .mobile-aria-shell .aria-composer { min-height: 42px; margin-top: 5px; }
  .mobile-aria-shell .aria-voice { grid-template-columns: 1fr auto; }
}

@media (min-width: 641px) {
  .mobile-aria-launcher { width: min(440px, calc(100% - 32px)); left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-aria-shell,
  .mobile-aria-launcher { transition: none; }
}