/* ==========================================================================
   THE POPPY FAMILY HEADER — one component, seven sites
   --------------------------------------------------------------------------
   Chip's directive, 2026-09-07: "every header looks, respectively, like the
   ShowPoppy header."

   The first pass at that directive hand-built a *separate* header in each
   repo, in each repo's own house style and class names — .suite__i in
   MLSPoppy, .psw__item in ReportPoppy, .phdr__item in PicturePoppy, .smrow in
   OfficePoppy. Seven headers in the same spirit is not one header, and they
   had already drifted apart on bar height, panel width, row height, bird
   scale, descriptor tracking and which corner the panel hangs from. So this
   file exists instead: ONE stylesheet, byte-for-byte identical in all six
   sibling repos, ported from the locked ShowPoppy header
   (showpoppy-landing.css sections 6 and 6b) with its resolved values baked in.

   WHY IT IS SELF-CONTAINED. ShowPoppy's header reads two dozen design tokens
   — --sp-4, --r-ctl, --text-secondary, --border-soft, --e-3 — and no two
   sibling sites define that set the same way, or at all. Every one of those
   is therefore resolved to its literal ShowPoppy value here. The header can
   be dropped into a site with no token file at all and still look exactly
   like ShowPoppy's.

   THE TWO EXCEPTIONS, both deliberate: --maxw and --gutter are read from the
   host page when it defines them (with ShowPoppy's own values as fallback),
   because the header bar has to line up with the content of the page it sits
   on. "Respectively like ShowPoppy" means aligned to ITS page the way
   ShowPoppy's is aligned to its own — not overhanging it by 40px. Same for
   --font-display / --font-sans: all six sites already load Plus Jakarta Sans
   and Inter, and the fallback names them explicitly if one ever stops.

   THE COLOR LAW (carried over verbatim from ShowPoppy). Only three things in
   this header may carry the product accent: the bird's wing, the first word
   of the wordmark, and the primary CTA. "Poppy", the descriptor, the
   navigation, Sign In and every rule and divider stay in the family ink.
   Nothing else gets colored, ever.

   ON THE ACCENT VALUES. Each site's accent is the color of its own canonical
   bird's wing, read straight out of the master SVG — #F15A2A show, #1F6FDB
   mls, #0FA294 picture, #E8A020 report, #6C4BE0 file, #D9377A touch, #D6361C
   office. These are NOT the sites' own --orange / --teal / --gold tokens, and
   must not be "fixed" to match them. ShowPoppy's header runs #F15A2A while
   its page runs #FF4F18 for exactly this reason: the color law binds the
   wing, the first word and the CTA together as ONE color, and the wing is the
   one of the three that cannot be retuned, because the master bird is shared
   byte-for-byte across all six sites. Owner's ruling on ReportPoppy's
   identical per-project retune: "Why is ReportPoppy different? Make it
   canonical also." A per-project retune loses to the family canon.

   HOW TO USE IT.
     <header class="hdr poppyhdr" data-poppy="mls"> … </header>
   data-poppy picks the accent and nothing else. Everything else — every
   size, every neutral, every breakpoint — is the same for all seven.

   WHY EVERY SELECTOR IS PREFIXED .hdr.poppyhdr. This file loads LAST, after
   the host site's own stylesheet, into pages that already define .hdr,
   .hdr__in, .brand, .nav, .burger and .mnav for their previous header. Two
   classes on the root element puts every rule here one step above any of
   those single-class rules, so the cascade is decided by specificity rather
   than by load order — which means adding a stylesheet to a page later, or
   inlining one, cannot quietly un-style the header. The host's old header
   rules are left exactly where they are: they simply no longer match
   anything, and nothing was deleted to make room.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accents. Declared on the header, so the desktop dropdown and the mobile
   panel — both of which live inside <header> — can read them and nothing
   outside the header can.
   -------------------------------------------------------------------------- */
.hdr.poppyhdr{
  /* The six products and the parent. Used by the switcher rows on every site,
     in every site, identically. */
  --poppy-show:#F15A2A;
  --poppy-mls:#1F6FDB;
  --poppy-picture:#0FA294;
  --poppy-report:#E8A020;
  --poppy-file:#6C4BE0;
  --poppy-touch:#D9377A;
  --poppy-office:#D6361C;

  /* This site's own accent, and the two darker steps its CTA gradient needs.
     Overridden per site by the [data-poppy] blocks below; ShowPoppy's trio is
     the default because ShowPoppy is the reference. */
  --p-accent:#F15A2A;
  --p-accent-foot:#DE4A1B;
  --p-accent-deep:#C9420F;
  --p-cta-ink:#fff;

  /* Family neutrals, resolved from ShowPoppy's token file. */
  --p-ink:#0B1730;          /* --text-primary   */
  --p-ink-2:#5F6B7A;        /* --text-secondary */
  --p-surface:#FFFFFF;      /* --surface-primary   */
  --p-surface-2:#F5F8FB;    /* --surface-secondary */
  --p-line:#E4E7EC;         /* --border-subtle */
  --p-line-soft:#EFF1F4;    /* --border-soft   */
  --p-line-strong:#D3DBE4;  /* --border-strong */
  --p-ease:cubic-bezier(.2,.7,.3,1);
  --p-shadow:0 2px 4px rgba(14,27,42,.04), 0 34px 64px -30px rgba(14,27,42,.38);
}

.hdr.poppyhdr[data-poppy="show"]   {--p-accent:#F15A2A;--p-accent-foot:#DE4A1B;--p-accent-deep:#C9420F}
.hdr.poppyhdr[data-poppy="mls"]    {--p-accent:#1F6FDB;--p-accent-foot:#1A5FBE;--p-accent-deep:#164FA0}
.hdr.poppyhdr[data-poppy="picture"]{--p-accent:#0FA294;--p-accent-foot:#0C8B80;--p-accent-deep:#0A736A}
.hdr.poppyhdr[data-poppy="file"]   {--p-accent:#6C4BE0;--p-accent-foot:#5B3CC7;--p-accent-deep:#4A2FA8}
.hdr.poppyhdr[data-poppy="touch"]  {--p-accent:#D9377A;--p-accent-foot:#C02D69;--p-accent-deep:#A32456}
.hdr.poppyhdr[data-poppy="office"] {--p-accent:#D6361C;--p-accent-foot:#BC2C14;--p-accent-deep:#9E240F}
/* ReportPoppy is the one CTA that cannot take white text. White on #E8A020 is
   about 2.0:1 — it fails even the 3:1 that large bold button text is held to,
   where the other five clear it. The brand system anticipated this and gives
   ReportPoppy a dark reading color; ReportPoppy's own .btn--gold already ships
   #3A2600, so that exact value is reused here rather than a new one invented.
   The CTA still carries the accent, which is what the color law requires. */
.hdr.poppyhdr[data-poppy="report"] {--p-accent:#E8A020;--p-accent-foot:#CE8A15;--p-accent-deep:#AE730C;--p-cta-ink:#3A2600}

/* --------------------------------------------------------------------------
   The bar
   --------------------------------------------------------------------------
   The frosted ground is painted by a pseudo-element rather than by .hdr
   itself. backdrop-filter turns the element carrying it into a containing
   block for position:fixed descendants, which collapses the mobile panel into
   the 68px header box. A sibling pseudo-element blurs identically and leaves
   the panel anchored to the viewport where it belongs.
   -------------------------------------------------------------------------- */
.hdr.poppyhdr{
  position:sticky;top:0;z-index:100;
  margin:0;padding:0;
  border-bottom:1px solid var(--p-line-soft);
  background:transparent;
  font-family:var(--font-sans,"Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  color:var(--p-ink);
  /* The bar is padded for the notch rather than the page, so the sticky
     header stays flush to the top when scrolled and its ground continues up
     behind the status bar. */
  padding-top:max(env(safe-area-inset-top,0px), var(--sp-safe-top,0px));

  /* THIS BLOCK IS LOAD-BEARING. DO NOT DELETE IT AS REDUNDANT.
     Every one of these properties turns the element carrying it into the
     containing block for its position:fixed descendants. .mnav is a fixed
     descendant, so any of them left on .hdr collapses the whole mobile panel
     into the 68px header box — the panel opens, and shows one row of a
     776px-tall menu with nothing to scroll.

     ShowPoppy avoids this by painting its frosted bar on .hdr::before rather
     than on .hdr, and this file does the same. But the six sibling sites each
     had their OWN .hdr rule before this component arrived, and several of them
     put backdrop-filter directly on .hdr — MLSPoppy's `backdrop-filter:
     saturate(1.4) blur(10px)` and FilePoppy's `blur(10px)` among them. Those
     rules are still in their stylesheets, deliberately: nothing was deleted to
     install this header. A property this file never mentions is a property the
     host's value still wins, so the reset has to be explicit.

     Caught on FilePoppy at 390px: panel height 65px instead of 776px. */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  filter:none;
  transform:none;
  perspective:none;
  will-change:auto;
  contain:none;
}
.hdr.poppyhdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr.poppyhdr::before{background:#fff}
}

/* Links and buttons inside the header answer to this file and to nothing the
   host page says about links and buttons in general. */
.hdr.poppyhdr a{text-decoration:none;color:inherit}
.hdr.poppyhdr button{font-family:inherit}
.hdr.poppyhdr img{display:block;max-width:none}
.hdr.poppyhdr ul{list-style:none;margin:0;padding:0}
.hdr.poppyhdr p{margin:0}

/* 68px on a phone — the value .mnav's fixed inset is written to — and 92px on
   desktop, the family spec's 88–104 band, because the lockup is two lines:
   wordmark over descriptor.

   max() on the gutter keeps the notch rule intact (on a landscape iPhone the
   larger inset still wins) while restoring the page's own gutter, so the
   bird's tail never sits on the viewport edge. */
.hdr.poppyhdr .hdr__in{
  display:flex;align-items:center;gap:32px;
  box-sizing:border-box;
  width:100%;max-width:var(--maxw,1200px);margin-inline:auto;
  /* min-height and padding-block are stated alongside height for the same
     reason the containing-block reset above exists: a sibling site's own
     .hdr__in rule is still in its stylesheet, and TouchPoppy's sets
     `min-height:72px; padding:12px 20px`. min-height beats height, so the bar
     came out 72px while .mnav's fixed inset stayed written to 68 — the panel's
     first row sat 4px under the bar. Declaring all three closes it. */
  height:68px;min-height:68px;
  padding-top:0;padding-bottom:0;
  padding-left:max(var(--gutter,clamp(20px,3vw,32px)), env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter,clamp(20px,3vw,32px)), env(safe-area-inset-right,0px));
}
/* Below 900 the nav is display:none, so this gap only ever separates the
   lockup from the action cluster — and .hdr__act already carries
   margin-left:auto, which pushes it to the right edge on its own. The gap is
   therefore invisible at any width with slack, and acts ONLY as overflow
   pressure when the row is tight. ShowPoppy can afford 32px because its
   lockup ("BUYER TOURS") and its short CTA label ("Create Tour") are the
   narrowest in the family. The others are not: at 390px — the width of every
   iPhone from the 12 to the 15 — the bar overflowed by 8px on PicturePoppy,
   10 on OfficePoppy, 12 on MLSPoppy and 17 on ReportPoppy, pushing the burger
   off the screen and giving the page a horizontal scrollbar.

   Bought back the way the family spec says to buy it back — "out of control
   PADDING and the gaps between controls, never out of the 44px targets and
   never out of the logo." 20px is more than the worst case needs, and the
   mobile bar still reads as [logo] [CTA] [menu] on every site, which is what
   ShowPoppy's own mobile bar is. Nothing moves at any width that already
   fitted. */
@media (max-width:899px){
  .hdr.poppyhdr .hdr__in{gap:12px}
}
@media (min-width:900px){
  .hdr.poppyhdr .hdr__in{height:92px;min-height:92px;gap:16px}
}
@media (min-width:1140px){
  .hdr.poppyhdr .hdr__in{gap:24px}
}

/* --------------------------------------------------------------------------
   The lockup: bird + wordmark + descriptor
   -------------------------------------------------------------------------- */
.hdr.poppyhdr .brand{
  display:inline-flex;align-items:center;
  flex:none;min-width:0;min-height:44px;gap:9px;
  border-radius:6px;
}
@media (min-width:900px){.hdr.poppyhdr .brand{gap:12px}}

/* The master bird is a wide file (1944x1340). Fixing the HEIGHT and letting
   width follow is what keeps every Poppy's bird at identical scale across the
   six sites, which is the whole point of one master geometry. */
.hdr.poppyhdr .brand__bird{height:26px;width:auto;max-width:none;flex:none}
@media (min-width:420px){.hdr.poppyhdr .brand__bird{height:28px}}
@media (min-width:900px){.hdr.poppyhdr .brand__bird{height:38px}}

/* OfficePoppy wears the poppy bloom, never a bird — the birds belong to the
   six applications. The bloom is square where the birds are wide, so it is
   centred inside a bird-width column and the wordmark still starts on the
   same line it would on any other site. */
.hdr.poppyhdr .brand__mark{height:26px;width:26px;flex:none;margin:0 5px}
@media (min-width:420px){.hdr.poppyhdr .brand__mark{height:28px;width:28px}}
@media (min-width:900px){.hdr.poppyhdr .brand__mark{height:34px;width:34px;margin:0 7px}}

.hdr.poppyhdr .brand__lockup{
  display:flex;flex-direction:column;justify-content:center;
  gap:2px;min-width:0;
}
@media (min-width:900px){.hdr.poppyhdr .brand__lockup{gap:3px}}

.hdr.poppyhdr .brand__word{
  font-family:var(--font-display,"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  font-weight:800;font-size:15px;line-height:1;
  letter-spacing:-.022em;
  color:var(--p-ink);                 /* "Poppy" — family ink, never accent */
  white-space:nowrap;
}
@media (min-width:420px){.hdr.poppyhdr .brand__word{font-size:16px}}
@media (min-width:900px){.hdr.poppyhdr .brand__word{font-size:25px}}

/* ACCENT 2 of 3: the ONLY accented word in the wordmark. */
.hdr.poppyhdr .brand__first{color:var(--p-accent)}

.hdr.poppyhdr .brand__desc{
  font-family:var(--font-sans,"Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  font-weight:600;font-size:8.5px;line-height:1;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--p-ink);                 /* descriptor is ink, NOT the accent */
  white-space:nowrap;
}
@media (min-width:420px){.hdr.poppyhdr .brand__desc{font-size:9px}}
@media (min-width:900px){.hdr.poppyhdr .brand__desc{font-size:11px;letter-spacing:.2em}}

/* Trademark mark. Raised and reduced rather than a full superscript, which
   the display face renders too small to read. ™ is mandatory on every
   customer-facing instance of all seven names. */
.hdr.poppyhdr .tm{font-size:.52em;vertical-align:.62em;font-weight:500;letter-spacing:0}

/* --------------------------------------------------------------------------
   Navigation. Joins the right-hand cluster instead of floating centred: the
   logo owns the left edge, everything actionable reads as one group.
   -------------------------------------------------------------------------- */
.hdr.poppyhdr .nav{display:none}
@media (min-width:900px){
  .hdr.poppyhdr .nav{display:flex;align-items:center;margin-inline:auto 0;gap:0}
  .hdr.poppyhdr .nav a{padding:0 9px}
}
@media (min-width:1140px){
  .hdr.poppyhdr .nav{gap:8px}
  .hdr.poppyhdr .nav a{padding:0 16px}
}
.hdr.poppyhdr .nav a{
  display:inline-flex;align-items:center;min-height:44px;
  border-radius:10px;
  font-size:16px;font-weight:500;color:var(--p-ink-2);
  /* ShowPoppy's three labels are short enough that they never wrap. A site with
     a longer label flex-shrinks instead and breaks mid-phrase in the 900-1139
     band, which reads as a broken bar rather than as the same header. nowrap
     keeps every nav item on one line the way ShowPoppy's are. */
  white-space:nowrap;
  transition:color .18s var(--p-ease),background-color .18s var(--p-ease);
}
.hdr.poppyhdr .nav a:hover{color:var(--p-ink);background:var(--p-surface-2)}

/* --------------------------------------------------------------------------
   The action cluster
   --------------------------------------------------------------------------
   900 to 1139 is the tight band: the full desktop row — logo, links, the
   switcher, Sign In and the CTA — has to fit a 1024 laptop with the page's own
   gutters on both sides. It is bought back out of control PADDING and the gaps
   between controls, never out of the 44px targets and never out of the logo,
   which stays one size across the whole desktop range. At 1140 it opens back up.
   -------------------------------------------------------------------------- */
.hdr.poppyhdr .hdr__act{display:flex;align-items:center;gap:12px;margin-left:auto}
@media (min-width:900px){.hdr.poppyhdr .hdr__act{margin-left:0;gap:8px}}
@media (min-width:1140px){.hdr.poppyhdr .hdr__act{gap:12px}}

/* Hairline dividers either side of the suite switcher. Decoration only, so
   they are aria-hidden in the markup and never appear on mobile. */
.hdr.poppyhdr .hdr__rule{display:none}
@media (min-width:900px){
  .hdr.poppyhdr .hdr__rule{display:block;flex:none;width:1px;height:26px;background:var(--p-line)}
}

.hdr.poppyhdr .hdr__signin{
  display:none;align-items:center;min-height:44px;padding:0 14px;
  border-radius:10px;white-space:nowrap;
  font-size:16px;font-weight:500;color:var(--p-ink-2);
  transition:color .18s var(--p-ease),background-color .18s var(--p-ease);
}
.hdr.poppyhdr .hdr__signin:hover{color:var(--p-ink);background:var(--p-surface-2)}
@media (min-width:560px){.hdr.poppyhdr .hdr__signin{display:inline-flex}}
@media (min-width:900px){.hdr.poppyhdr .hdr__signin{padding:0 10px}}
@media (min-width:1140px){.hdr.poppyhdr .hdr__signin{padding:0 14px}}

/* --------------------------------------------------------------------------
   ACCENT 3 of 3: the primary CTA, in the bar and in the mobile panel alike.
   Written out in full rather than layered on the host site's .btn, because
   six different .btn definitions is exactly how six headers stopped matching
   the first time.
   -------------------------------------------------------------------------- */
.hdr.poppyhdr .hdr__cta,
.hdr.poppyhdr .mnav__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;
  border:1px solid transparent;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.005em;
  line-height:1;text-align:center;white-space:nowrap;cursor:pointer;
  color:var(--p-cta-ink);
  background-color:var(--p-accent);
  background-image:linear-gradient(180deg,var(--p-accent) 0%,var(--p-accent-foot) 100%);
  box-shadow:0 1px 2px color-mix(in srgb,var(--p-accent-deep) 30%,transparent),
             0 12px 24px -10px color-mix(in srgb,var(--p-accent-foot) 46%,transparent);
  transition:background-color .18s var(--p-ease),border-color .18s var(--p-ease),
             color .18s var(--p-ease),box-shadow .18s var(--p-ease),
             transform .18s var(--p-ease);
}
.hdr.poppyhdr .hdr__cta:hover,
.hdr.poppyhdr .mnav__cta:hover{
  background-image:linear-gradient(180deg,var(--p-accent-foot) 0%,var(--p-accent-deep) 100%);
  box-shadow:0 1px 2px color-mix(in srgb,var(--p-accent-deep) 32%,transparent),
             0 20px 34px -12px color-mix(in srgb,var(--p-accent-foot) 52%,transparent);
}
.hdr.poppyhdr .hdr__cta:active,
.hdr.poppyhdr .mnav__cta:active{transform:translateY(1px)}
/* color-mix has been safe since 2023, but a shadow is not worth a blank one on
   an old browser: an opaque fallback runs first and is overridden above. */
@supports not (color:color-mix(in srgb,red 50%,transparent)){
  .hdr.poppyhdr .hdr__cta,
  .hdr.poppyhdr .mnav__cta{box-shadow:0 12px 24px -10px rgba(14,27,42,.28)}
}

/* One anchor, one destination, two labels. The short label is the same promise
   in fewer words; it appears only where the full one would crowd the bar
   (phones, and the 900–1140 laptop band where nav + switcher + Sign In already
   fill the row). Both sit inside the same <a>, so nothing about the route or
   its analytics changes with the viewport. */
.hdr.poppyhdr .hdr__cta-full{display:none}
.hdr.poppyhdr .hdr__cta-short{display:inline}
@media (min-width:1140px){
  .hdr.poppyhdr .hdr__cta-full{display:inline}
  .hdr.poppyhdr .hdr__cta-short{display:none}
}

/* The CTA earns its place on a phone too — the spec's mobile bar is
   [logo] [CTA] [menu]. Below 380px it stands down, because logo + CTA + burger
   cannot all fit without one of them shrinking past a 44px target; there it
   stays reachable in the panel and in the hero. */
.hdr.poppyhdr .hdr__cta{display:none}
@media (min-width:380px){
  .hdr.poppyhdr .hdr__cta{display:inline-flex;min-height:42px;padding:0 13px;font-size:14px}
}
@media (min-width:560px){
  .hdr.poppyhdr .hdr__cta{min-height:44px;padding:0 16px;font-size:15px}
}
@media (min-width:900px){
  .hdr.poppyhdr .hdr__cta{min-height:46px;padding:0 16px;font-size:16px}
}
@media (min-width:1140px){
  .hdr.poppyhdr .hdr__cta{padding:0 24px}
}

/* Menu button, mobile only */
.hdr.poppyhdr .burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  background:var(--p-surface);border:1px solid var(--p-line-strong);
  border-radius:10px;cursor:pointer;color:var(--p-ink);
}
.hdr.poppyhdr .burger:hover{background:var(--p-surface-2)}
@media (min-width:900px){.hdr.poppyhdr .burger{display:none}}
.hdr.poppyhdr .burger__x{display:none}
.hdr.poppyhdr .burger[aria-expanded="true"] .burger__x{display:block}
.hdr.poppyhdr .burger[aria-expanded="true"] .burger__bars{display:none}

/* --------------------------------------------------------------------------
   Poppy Suite switcher (desktop)
   --------------------------------------------------------------------------
   A disclosure, not a role="menu". Everything inside it is a link to another
   Poppy site, and Tab should walk links the way Tab walks links — an ARIA menu
   would hijack the arrow keys and swallow Tab for no gain.
   -------------------------------------------------------------------------- */
.hdr.poppyhdr .suitesw{display:none}
@media (min-width:900px){.hdr.poppyhdr .suitesw{display:block;position:relative;flex:none}}

.hdr.poppyhdr .suitesw__btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 8px;
  background:none;border:0;border-radius:10px;
  cursor:pointer;
  font-size:16px;font-weight:500;
  color:var(--p-ink-2);
  transition:color .18s var(--p-ease),background-color .18s var(--p-ease);
}
@media (min-width:1140px){.hdr.poppyhdr .suitesw__btn{padding:0 12px;gap:7px}}
.hdr.poppyhdr .suitesw__btn:hover,
.hdr.poppyhdr .suitesw__btn[aria-expanded="true"]{color:var(--p-ink);background:var(--p-surface-2)}
.hdr.poppyhdr .suitesw__dots{flex:none;opacity:.7}
.hdr.poppyhdr .suitesw__btn:hover .suitesw__dots,
.hdr.poppyhdr .suitesw__btn[aria-expanded="true"] .suitesw__dots{opacity:1}
.hdr.poppyhdr .suitesw__chev{flex:none;opacity:.65;transition:transform .18s var(--p-ease)}
.hdr.poppyhdr .suitesw__btn[aria-expanded="true"] .suitesw__chev{transform:rotate(180deg)}

/* display:none while closed rather than a hidden-but-painted panel, so the six
   112KB master birds inside it are never fetched by a visitor who never opens
   the menu. The fade is applied a frame after the panel is displayed, because
   a transition on an element that was display:none in the same frame does not
   run at all. */
.hdr.poppyhdr .suitesw__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:120;
  width:336px;max-width:calc(100vw - 32px);padding:8px;
  background:var(--p-surface);
  border:1px solid var(--p-line);border-radius:14px;
  box-shadow:var(--p-shadow);
  opacity:0;transform:translateY(-6px);
  transition:opacity .16s var(--p-ease),transform .16s var(--p-ease);
}
.hdr.poppyhdr .suitesw__menu[hidden]{display:none}
.hdr.poppyhdr .suitesw__menu.is-open{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hdr.poppyhdr .suitesw__menu{transition:none;transform:none}
  .hdr.poppyhdr .suitesw__chev{transition:none}
}

/* --------------------------------------------------------------------------
   One switcher row — shared by the desktop dropdown and the mobile panel
   -------------------------------------------------------------------------- */
.hdr.poppyhdr .suitesw__parent,
.hdr.poppyhdr .msuite__parent,
.hdr.poppyhdr .suitesw__item{
  display:flex;align-items:center;gap:10px;
  min-height:52px;padding:8px 10px;
  border-radius:10px;
  color:var(--p-ink);
  transition:background-color .16s var(--p-ease);
}
.hdr.poppyhdr a.suitesw__parent:hover,
.hdr.poppyhdr a.msuite__parent:hover,
.hdr.poppyhdr a.suitesw__item:hover{background:var(--p-surface-2)}

/* The parent sits above the six and is separated by a rule, so "OfficePoppy is
   the suite, these six are the products" is read rather than inferred. */
.hdr.poppyhdr .suitesw__parent,
.hdr.poppyhdr .msuite__parent{
  border-bottom:1px solid var(--p-line-soft);
  border-radius:10px 10px 0 0;
  margin-bottom:8px;padding-bottom:12px;
}

.hdr.poppyhdr .suitesw__bird{width:34px;height:auto;flex:none}
.hdr.poppyhdr .suitesw__mark{width:26px;height:26px;flex:none;margin:0 4px}

.hdr.poppyhdr .suitesw__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.hdr.poppyhdr .suitesw__name{
  font-family:var(--font-display,"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.018em;
  color:var(--p-ink);                 /* "Poppy" — ink */
}
.hdr.poppyhdr .suitesw__desc{
  font-size:12.5px;line-height:1.3;font-weight:400;
  color:var(--p-ink-2);               /* supporting text — neutral, never accent */
}

/* First word only, in that product's own accent. No colored backgrounds, no
   colored descriptors — the row is otherwise identical for all seven. */
.hdr.poppyhdr .suitesw__first--office{color:var(--poppy-office)}
.hdr.poppyhdr .suitesw__first--show{color:var(--poppy-show)}
.hdr.poppyhdr .suitesw__first--mls{color:var(--poppy-mls)}
.hdr.poppyhdr .suitesw__first--picture{color:var(--poppy-picture)}
.hdr.poppyhdr .suitesw__first--report{color:var(--poppy-report)}
.hdr.poppyhdr .suitesw__first--file{color:var(--poppy-file)}
.hdr.poppyhdr .suitesw__first--touch{color:var(--poppy-touch)}

/* The current product. Deliberately quiet: a small ink-neutral tag, not a
   highlighted row. It is a <span>, not a link, because there is nowhere to go. */
.hdr.poppyhdr .suitesw__item.is-here{cursor:default}
.hdr.poppyhdr .suitesw__here{
  margin-left:auto;flex:none;
  font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;
  color:var(--p-ink-2);
}

/* --------------------------------------------------------------------------
   The mobile panel
   -------------------------------------------------------------------------- */
.hdr.poppyhdr .mnav{
  position:fixed;inset:68px 0 0;z-index:99;
  display:flex;flex-direction:column;
  padding:24px var(--gutter,clamp(20px,3vw,32px)) 40px;
  background:var(--p-surface);
  overflow-y:auto;overscroll-behavior:contain;
  /* The panel is anchored to the header's own height, so it moves with the
     safe-area inset instead of hiding its first row under the bar. */
  top:calc(68px + max(env(safe-area-inset-top,0px), var(--sp-safe-top,0px)));
}
.hdr.poppyhdr .mnav[hidden]{display:none}
@media (min-width:900px){.hdr.poppyhdr .mnav{display:none}}

.hdr.poppyhdr a.mnav__link{
  display:flex;align-items:center;min-height:56px;
  padding:0 12px;border-radius:10px;
  border-bottom:1px solid var(--p-line-soft);
  font-size:19px;font-weight:500;color:var(--p-ink);
}
.hdr.poppyhdr a.mnav__link:hover{background:var(--p-surface-2)}
.hdr.poppyhdr .mnav__foot{display:grid;gap:12px;margin-top:32px}
.hdr.poppyhdr .mnav__cta{width:100%;min-height:54px;padding:0 30px;font-size:16px}

/* The suite, open on the page rather than behind a second disclosure: a menu
   inside a menu is where discovery goes to die, and the panel scrolls
   vertically already. All seven fit the column at 320px with no horizontal
   scroll and no target under 44px. */
.hdr.poppyhdr .msuite{margin-top:24px}
@media (min-width:900px){.hdr.poppyhdr .msuite{display:none}}
.hdr.poppyhdr .msuite__lbl{
  margin:0 0 8px;padding:0 12px;
  font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-ink-2);
}
.hdr.poppyhdr .msuite__parent,
.hdr.poppyhdr .msuite .suitesw__item{min-height:56px}
.hdr.poppyhdr .msuite .suitesw__name{font-size:16px}
.hdr.poppyhdr .msuite .suitesw__desc{font-size:13px}
.hdr.poppyhdr .msuite .suitesw__bird{width:38px}
.hdr.poppyhdr .msuite .suitesw__mark{width:28px;height:28px;margin:0 5px}

/* --------------------------------------------------------------------------
   Focus. One ring for the whole header, carrying the site's accent the way
   ShowPoppy's does.
   -------------------------------------------------------------------------- */
.hdr.poppyhdr .suitesw__btn:focus-visible,
.hdr.poppyhdr .suitesw__parent:focus-visible,
.hdr.poppyhdr .msuite__parent:focus-visible,
.hdr.poppyhdr .suitesw__item:focus-visible,
.hdr.poppyhdr .mnav__link:focus-visible,
.hdr.poppyhdr .hdr__signin:focus-visible,
.hdr.poppyhdr .hdr__cta:focus-visible,
.hdr.poppyhdr .mnav__cta:focus-visible,
.hdr.poppyhdr .burger:focus-visible,
.hdr.poppyhdr .nav a:focus-visible,
.hdr.poppyhdr .brand:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--p-surface), 0 0 0 4px var(--p-accent);
}

/* The scroll lock the panel sets. Named for this component so a host page that
   already locks the body its own way is never fought over. */
body.poppy-nav-open{overflow:hidden}

/* A labelled group of secondary links in the mobile panel. ShowPoppy's panel
   has none, so this rule never fires there; the sites whose old headers carried
   extra page links keep them here rather than losing them to the standard. */
.hdr.poppyhdr .mnav__lbl{
  margin:24px 0 8px;padding:0 12px;
  font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-ink-2);
}