/* Main menu, shared by every page.
   Two blocks:
   - Navigation, right-aligned on one axis (--nav-r) that is the page's own
     breadcrumb edge: .agency, Search + Tom, .models .gallery .create.
   - Your account, left-aligned rows with an icon column: Profile, Plan,
     Messages, Content, Favorites, FAQs, Support, Language, Sign out.
   Units (30 Sep): the whole panel follows Alfonso's 390 design at every
   size.
   --nav-pu  one design pixel of the panel width (panel / 390).
   --nav-ps  the same, capped by the window height on short screens, with a
             floor; below it the body scrolls under a fixed head. */
:root {
  --nav-pw: max(calc(427 * var(--hd)), 380px);
  /* The panel is drawn on Alfonso's 390 design (30 Sep) at every size:
     --nav-pu is one design pixel of the panel's width. */
  --nav-pu: calc(min(var(--nav-pw), 100vw) / 390);
  --nav-c: calc(68 * var(--hd));
  --nav-cy: max(calc(59 * var(--hd)), 26px);
  --nav-ps: max(min(var(--nav-pu), calc(100dvh / 880)), 0.6px);
  --nav-r: calc(123.5 * var(--nav-pu));
  --nav-xc: calc(71 * var(--nav-pu));
  --nav-xcy: calc(52.3 * var(--nav-ps));
  --nav-head: calc(92 * var(--nav-ps));
  --nav-brand-top: calc(22.1 * var(--nav-ps));
  --nav-big: calc(53.5 * var(--nav-ps));
  --nav-sec-font: calc(57 * var(--nav-ps));
  --nav-sec-h: calc(71.9 * var(--nav-ps));
  --nav-tool: calc(42.6 * var(--nav-ps));
  --nav-tool-gap: calc(19.7 * var(--nav-ps));
  --nav-tool-top: calc(10.5 * var(--nav-ps));
  --nav-tool-bottom: calc(12 * var(--nav-ps));
  --nav-tom-font: calc(17 * var(--nav-ps));
  --nav-tom-ic: calc(27 * var(--nav-ps));
  --nav-dot: calc(8 * var(--nav-ps));
  --nav-u-top: calc(40 * var(--nav-ps));
  --nav-u-left: calc(42 * var(--nav-pu));
  --nav-u-right: calc(47 * var(--nav-pu));
  --nav-u-pad: calc(9.5 * var(--nav-ps));
  --nav-row: calc(47.35 * var(--nav-ps));
  --nav-font: calc(16 * var(--nav-ps));
  --nav-lead: calc(34.4 * var(--nav-ps));
  --nav-lead-gap: calc(14.2 * var(--nav-ps));
  --nav-cell: calc(81.4 * var(--nav-ps));
  --nav-badge: calc(22.9 * var(--nav-ps));
  --nav-badge-gap: calc(35.7 * var(--nav-ps));
  --nav-ic: calc(20 * var(--nav-ps));
  --nav-chip-h: max(calc(21 * var(--nav-ps)), 18px);
  --nav-chip-font: max(calc(12.5 * var(--nav-ps)), 10px);
  --nav-ae-font: calc(12.5 * var(--nav-ps));
  --nav-rule: #d5d5d5;

  --nav-grey: #8a8a8a;
  --nav-brand: #cfcfcf;
  --nav-line: #e8e8e8;
  --nav-disc: #efefef;
  --nav-plan: #436865;
  --nav-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html.fp-nav-open .fp-agency,
html.fp-nav-open .fp-menu { visibility: hidden; }

.fp-nav[hidden] { display: none !important; }

.fp-nav {
  position: fixed;
  inset: 0;
  z-index: 25;
  color: var(--ink);
  font-weight: 500;
}

:where(.fp-nav) :where(button, a) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}

.fp-nav :focus { outline: none; }
.fp-nav :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Click outside closes. Clear on desktop, where the page moves aside. */
.fp-nav-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  cursor: default !important;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}

.fp-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--nav-pw), 100vw);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  box-shadow: -1px 0 0 var(--nav-line);
  transform: translateX(100%);
  transition: transform 0.32s var(--nav-ease);
}

.fp-nav.is-in .fp-nav-panel { transform: none; }

/* Head: .agency and the close mark stay put while the rest scrolls. */
.fp-nav-head {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--nav-head);
  background: var(--paper);
}

.fp-nav-mark { display: none; }

.fp-nav-brand {
  position: absolute;
  right: var(--nav-r);
  top: var(--nav-brand-top);
  font-size: var(--nav-big);
  line-height: 1;
  white-space: nowrap;
  /* The link inherits its parent's spacing in px; set it on its own size. */
  letter-spacing: -0.05em !important;
  color: var(--ink) !important;
  transition: color 0.2s ease;
}

/* Where you are is grey, like the page's own breadcrumb: .agency on Home,
   the section anywhere else. Everything else is black. */
.fp-nav-brand[aria-current="page"],
.fp-nav-sec[aria-current="page"] span { color: var(--nav-brand) !important; }

@media (hover: hover) {
  .fp-nav-brand:not([aria-current]):hover { color: var(--nav-grey) !important; }
}

.fp-nav-x {
  position: absolute;
  right: calc(var(--nav-xc) - 22px);
  top: calc(var(--nav-xcy) - 22px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.fp-nav-x svg {
  width: max(14px, calc(19.3 * var(--nav-pu)));
  height: auto;
}

.fp-nav-body { padding-bottom: calc(51.3 * var(--nav-ps)); }

.fp-nav-ic {
  display: block;
  width: var(--nav-ic);
  height: var(--nav-ic);
}

.fp-nav-ic svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Navigation block (right) ---------- */

.fp-nav-tools,
.fp-nav-sec {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding-right: var(--nav-r) !important;
  text-align: right;
}

.fp-nav-tools {
  gap: var(--nav-tool-gap);
  height: var(--nav-tool);
  margin: var(--nav-tool-top) 0 var(--nav-tool-bottom);
}

.fp-nav-search {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--nav-tool);
  height: var(--nav-tool);
  border-radius: 50%;
  background: var(--nav-disc) !important;
  transition: background 0.2s ease;
}

.fp-nav-search .fp-nav-ic {
  width: calc(var(--nav-tool) * 0.56);
  height: calc(var(--nav-tool) * 0.56);
}

.fp-nav-tom {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-tool) * 0.2);
  height: var(--nav-tool);
  padding: 0 calc(var(--nav-tool) * 0.44) 0 calc(var(--nav-tool) * 0.22) !important;
  border-radius: 999px;
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-size: var(--nav-tom-font);
  line-height: 1;
  transition: background 0.2s ease;
}

.fp-nav-tom .fp-nav-ic {
  width: var(--nav-tom-ic);
  height: var(--nav-tom-ic);
}

@media (hover: hover) {
  .fp-nav-search:hover { background: #e2e2e2 !important; }
  .fp-nav-tom:hover { background: #333 !important; }
}

.fp-nav-links {
  margin: 0;
  padding: 0;
}

.fp-nav-sec {
  height: var(--nav-sec-h);
  font-size: var(--nav-sec-font);
  line-height: 1;
  white-space: nowrap;
}

.fp-nav-sec span { transition: color 0.2s ease; }

/* The dot marks the section you are on, on the close-mark column. */
.fp-nav-dot {
  position: absolute;
  top: 50%;
  right: var(--nav-c);
  display: none;
  width: var(--nav-dot);
  height: var(--nav-dot);
  border-radius: 50%;
  background: var(--ink);
  transform: translate(50%, -50%);
}

/* The dot is no longer used: the grey word marks the section. */
.fp-nav-sec[aria-current="page"] .fp-nav-dot { display: none; }
.fp-nav-sec[aria-current="page"] { cursor: default; }

@media (hover: hover) {
  .fp-nav-sec:hover span { color: var(--nav-grey); }
  .fp-nav-sec[aria-current="page"]:hover span { color: var(--nav-brand); }
}

/* ---------- Account block (left) ----------
   Alfonso's design of 30 Sep: full-width rows split by hairlines (none
   above Profile, none under Sign out), an icon column, and the right end of
   Plan, Language and the sign-out answer drawn as full-height cells. The
   block sits at the bottom of the panel when there is room. */

.fp-nav-body {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-head));
}

.fp-nav-top { margin-bottom: var(--nav-u-top); }

.fp-nav-user {
  margin-top: auto;
  padding: 0 var(--nav-u-right) 0 var(--nav-u-left);
}

.fp-nav-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nav-lead-gap);
  width: 100%;
  height: var(--nav-row);
  padding-left: var(--nav-u-pad) !important;
  font-size: var(--nav-font);
  line-height: 1.1;
  text-align: left;
}

.fp-nav-row[hidden] { display: none !important; }

/* Hairline between visible rows: a hidden row (Sign in, or the account
   rows when signed out) does not leave a line of its own. */
.fp-nav-row:not([hidden]) ~ .fp-nav-row:not([hidden]) { border-top: 1px solid var(--nav-rule) !important; }

/* Sign in reuses the sign-out door, turned to face in. */
.fp-nav-ic-in svg { transform: scaleX(-1); }

.fp-nav-lead {
  display: grid;
  place-items: center;
  flex: 0 0 var(--nav-lead);
  width: var(--nav-lead);
}

.fp-nav-t {
  min-width: 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Right end: a full-height cell, flush with the hairline's end. */
.fp-nav-end {
  display: flex;
  align-self: stretch;
  margin-left: auto;
}

@media (hover: hover) {
  button.fp-nav-row:hover .fp-nav-t,
  a.fp-nav-row:hover .fp-nav-t,
  .fp-nav-outbtn:hover .fp-nav-t { color: var(--nav-grey); }
  .fp-nav-out.is-asking .fp-nav-outbtn:hover .fp-nav-t { color: var(--ink); }
}

.fp-nav-ae {
  display: grid;
  place-items: center;
  width: var(--nav-lead);
  height: var(--nav-lead);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--nav-ae-font);
  letter-spacing: -0.05em;
  padding-left: 0.05em;
}

.fp-nav-pill {
  display: grid;
  place-items: center;
  width: var(--nav-cell);
  height: 100%;
  background: var(--nav-plan);
  color: var(--paper);
  font-size: var(--nav-chip-font);
  line-height: 1;
}

.fp-nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: var(--nav-badge);
  height: var(--nav-badge);
  margin-left: var(--nav-badge-gap);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--nav-chip-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em !important;
  padding: 0 calc(var(--nav-badge) * 0.28) 0 calc(var(--nav-badge) * 0.28 + 0.05em); /* centred with the -0.05em spacing */
  line-height: 1;
  text-indent: 0;
}

/* Language: EN / ES as two cells, the chosen one black. */
.fp-nav-seg {
  display: flex;
  width: var(--nav-cell);
  height: 100%;
}

.fp-nav-seg button {
  letter-spacing: -0.05em !important;
  padding-left: 0.05em !important; /* keeps the centred text centred */
  display: grid;
  place-items: center;
  flex: 1 1 50%;
  height: 100%;
  text-align: center !important;
  font-size: var(--nav-chip-font) !important;
  line-height: 1;
}

.fp-nav-seg button[aria-pressed="true"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
  cursor: default;
}

/* Sign out: a row like the others. It asks first: the label becomes
   "Sure?" and Yes / No appear as two cells at the right end of the row,
   like EN / ES. */
.fp-nav-out { gap: 0; }

.fp-nav-outbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--nav-lead-gap);
  height: 100%;
}

.fp-nav-confirm {
  display: flex;
  align-self: stretch;
  width: var(--nav-cell);
  margin-left: auto;
}

.fp-nav-confirm[hidden] { display: none; }

.fp-nav-confirm button {
  letter-spacing: -0.05em !important;
  padding-left: 0.05em !important; /* keeps the centred text centred */
  display: grid;
  place-items: center;
  flex: 1 1 50%;
  height: 100%;
  font-size: var(--nav-chip-font) !important;
  text-align: center !important;
  line-height: 1;
}

.fp-nav-confirm .fp-nav-yes {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

@media (hover: hover) {
  .fp-nav-confirm .fp-nav-no:hover { background: #f2f2f2 !important; }
}

/* ---------- Entry: rows follow the panel, about 0.3 s in all ---------- */
.fp-nav-sec,
.fp-nav-in {
  opacity: 0;
  transform: translateX(calc(28 * var(--nav-ps)));
}

.fp-nav.is-in .fp-nav-sec,
.fp-nav.is-in .fp-nav-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.26s ease var(--d, 0ms), transform 0.3s var(--nav-ease) var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .fp-nav-panel,
  .fp-nav-scrim,
  .fp-nav.is-in .fp-nav-sec,
  .fp-nav.is-in .fp-nav-in { transition: none !important; }
  .fp-nav-sec,
  .fp-nav-in { transform: none; }
}

/* ---------- Tablet and phone: the 390 mockup ---------- */
@media (max-width: 800px) {
  :root {
    --nav-pw: min(100vw, 460px);
    --nav-c: min(calc(48 * var(--m)), 62px);
    --nav-cy: min(calc(63.5 * var(--m)), 80px);
  }

  .fp-nav.is-in .fp-nav-scrim { background: rgba(0, 0, 0, 0.22); }
}

/* Phone: full screen, the logo stays where the page had it. */
@media (max-width: 560px) {
  :root { --nav-pw: 100vw; }

  .fp-nav-panel { box-shadow: none; }
  .fp-nav.is-in .fp-nav-scrim { background: transparent; }

  /* No logo in the panel: Alfonso's design (30 Sep) starts with .agency. */
}