/* Mobile / tablet responsive layer. Loaded last on every page. */

html, body { max-width: 100%; }
body { overflow-x: clip; }
img, canvas, svg { max-width: 100%; }

/* ---------- tablet and below ---------- */
@media (max-width: 1100px) {
  /* portfolio heading carried a hard 1000px width */
  #companies h2 { width: auto !important; max-width: 100% !important; }
  /* decorative rules positioned in absolute px */
  #companies > svg { display: none !important; }
}

@media (max-width: 1000px) {
  #story .story-grid { grid-template-columns: 1fr !important; }
}

/* ---------- phones / small tablets ---------- */
@media (max-width: 900px) {

  /* --- navigation bar --- */
  [data-r="nav"] > div,
  #siteNav .bar,
  nav[style*="z-index:80"] > div { height: 74px !important; }
  [data-r="nav"] nav a,
  #siteNav nav a,
  nav[style*="z-index:80"] nav a {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 2px !important;
  }
  [data-r="nav"] nav a > span,
  nav[style*="z-index:80"] nav a > span { bottom: 10px !important; }
  #siteNav nav a[aria-current="page"]::after { bottom: 10px !important; }
  [data-r="nav"] nav,
  #siteNav nav { gap: 16px !important; }

  /* --- home: hero disc + statement --- */
  [data-r="heroSphere"] {
    width: min(660px, 74vh, 92vw) !important;
    height: min(660px, 74vh, 92vw) !important;
  }
  [data-r="heroText"] {
    font-size: calc(min(660px, 74vh, 92vw) * 0.058) !important;
    width: 88% !important;
    line-height: 1.34 !important;
  }
  [data-r="heroTape"] { height: 66px !important; }
  [data-r="heroTape"] span { font-size: 13px !important; margin-right: 34px !important; }

  /* --- home: statement film --- */
  [data-r="stCSub"] { font-size: 17px !important; line-height: 1.58 !important; }

  /* --- home: section rhythm --- */
  #companies { padding: 96px 0 88px !important; }
  #record { padding: 84px 0 !important; }
  #operate { padding: 88px 0 !important; }
  #presence { padding: 96px 0 0 !important; }
  #presence h2 { font-size: clamp(30px, 7vw, 42px) !important; }
  #presence div[style*="minmax(215px"] { margin-top: 0 !important; }

  /* the "start a conversation" button was pinned in absolute px */
  #presence a[href^="mailto:"] {
    position: static !important;
    left: auto !important; top: auto !important;
    display: flex !important;
    width: 100% !important; max-width: 320px !important;
    margin: 32px auto 0 !important;
  }

  /* buttons: one size everywhere on mobile */
  .btn {
    display: flex !important;
    width: 100% !important;
    max-width: 268px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 52px !important;
  }

  /* airport pills: larger touch targets */
  #presence span[title] { padding: 13px 20px !important; font-size: 16px !important; }

  /* --- about page rhythm + hard inline widths --- */
  #story { padding: 138px 0 88px !important; }
  #story .headline { width: auto !important; max-width: 100% !important; }
  #story .lede { width: auto !important; max-width: 44ch !important; }
  #ownership { padding: 96px 0 !important; }
  #quote { padding: 120px 0 !important; min-height: 0 !important; }

  /* about: portrait + name/role on one line, bio always open underneath */
  .og-panel {
    display: grid !important;
    grid-template-columns: 52px 1fr auto;
    column-gap: 14px;
    gap: 0 14px !important;
    cursor: pointer !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
    padding: 12px 18px !important;
  }
  .og-panel > * { min-width: 0; }
  .og-portrait-circle { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .og-nm { grid-column: 2; grid-row: 1; align-self: end; font-size: 27px !important; line-height: 1.1 !important; }
  .og-rl { grid-column: 2; grid-row: 2; align-self: start; margin-top: 6px !important; font-size: 13px !important; letter-spacing: 1px !important; line-height: 1.22 !important; }
  .og-nm, .og-rl { white-space: normal !important; }
  .og-rl br { display: none; }
  .og-bio { font-size: 14.5px !important; }

  /* chevron: nudges the tile open, flips when expanded */
  .og-panel::after {
    content: "";
    position: static; bottom: auto; margin-left: 0;
    grid-column: 3; grid-row: 1 / 3;
    justify-self: end; align-self: center;
    width: 9px; height: 9px;
    margin-right: 6px;
    border-right: 1.5px solid #C9A96A;
    border-bottom: 1.5px solid #C9A96A;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 300ms cubic-bezier(.22,1,.36,1);
  }
  .og-panel.expanded::after { transform: rotate(-135deg) translateY(-2px); }

  .og-bio-wrap {
    grid-column: 1 / -1; grid-row: 3;
    width: 100% !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    transition: opacity 260ms ease, max-height 420ms cubic-bezier(.22,1,.36,1), margin-top 300ms ease;
  }
  .og-panel.expanded .og-bio-wrap {
    opacity: 1 !important;
    max-height: 900px !important;
    margin-top: 14px !important;
  }

  /* operating leadership: same tile anatomy + type as the owner tiles */
  .op-tile {
    display: grid !important;
    grid-template-columns: 52px 1fr;
    column-gap: 14px;
    align-items: center !important;
    padding: 20px 18px !important;
    gap: 0 14px !important;
  }
  .op-tile .portrait { grid-column: 1; grid-row: 1; width: 52px !important; height: 52px !important; align-self: center; }
  .op-tile .nm { grid-column: 2; grid-row: 1; align-self: center; font-size: 27px !important; }
  .op-tile .rl { grid-column: 2; grid-row: 2; align-self: start; margin-top: -1px !important; font-size: 13px !important; letter-spacing: 1px !important; line-height: 1.085 !important; }

  /* touch: hover must not resize the portrait or open the bio — only .expanded does */
  .og-panel:hover .og-portrait-circle,
  .og-panel:focus-within .og-portrait-circle { width: 52px !important; height: 52px !important; }
  .og-panel:hover .og-bio-wrap,
  .og-panel:focus-within .og-bio-wrap { opacity: 0; max-height: 0; margin-top: 0 !important; }
  .og-panel.expanded .og-bio-wrap,
  .og-panel.expanded:hover .og-bio-wrap,
  .og-panel.expanded:focus-within .og-bio-wrap {
    opacity: 1 !important;
    max-height: 900px !important;
    margin-top: 14px !important;
  }

  /* home: portfolio rows stack so long names never collide with the category */
  #companies div[style*="padding:24px 14px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }
  #companies div[style*="padding:24px 14px"] > span { font-size: 12.5px !important; margin-left: 40px !important; }

  /* --- contact page --- */
  section[style*="min-height:100vh"] { padding-top: 112px !important; min-height: 0 !important; }
  /* 16px minimum stops iOS zooming the page on focus */
  input, textarea, button { font-size: 16px !important; }

  /* --- footers --- */
  footer { padding: 72px 0 40px !important; }
  footer div[style*="minmax(260px"] { grid-template-columns: 1fr !important; gap: 34px !important; }
  footer .grid { gap: 34px !important; }
  footer div[style*="margin-top:64px"], footer .bottom { margin-top: 44px !important; }
}

@media (max-width: 560px) {
  /* contact form: name / email side by side is too tight */
  form div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [data-r="nav"] nav a,
  #siteNav nav a,
  nav[style*="z-index:80"] nav a { font-size: 12.5px !important; letter-spacing: 0.06em !important; }
  [data-r="nav"] nav,
  #siteNav nav,
  nav[style*="z-index:80"] nav { gap: 13px !important; }
  #companies div[style*="padding:24px 14px"] { padding: 20px 4px !important; }
}