/* ==========================================================================
   layouts.css — shared STRUCTURAL styles keyed by body classes and the
   namespaced building blocks several variants reuse (header styles, interior
   hero mechanics, page layouts, brand-specific masks/duotones/blobs).
   Loaded after base.css, before v-XX.css. Variant files only add tokens and
   their own home-page sections.
   ========================================================================== */

/* ---------- header styles ---------- */
body.fy-header-centered .fy-header--centered .fy-container { padding-top: 10px; padding-bottom: 6px; }
.fy-header--centered .fy-header__row1 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 64px; }
.fy-header--centered .fy-header__row1 .fy-header__cta { justify-content: flex-end; }
.fy-header--centered .fy-header__row2 { display: flex; justify-content: center; border-top: 1px solid var(--fy-border); margin-top: 6px; }
.fy-header--centered .fy-nav__list { justify-content: center; }
@media (max-width: 1023px) { .fy-header--centered .fy-header__row1 { grid-template-columns: auto 1fr auto; } .fy-header--centered .fy-header__row1 > .fy-header__phone { order: 3; } .fy-header--centered .fy-header__row2 { border: 0; margin: 0; } }

body.fy-header-transparent .fy-header--transparent { position: fixed; left: 0; right: 0; top: 0; background: transparent; color: #fff; }
body.fy-header-transparent .fy-header--transparent.is-scrolled { background: var(--fy-header-bg); color: var(--fy-header-text); }
body.fy-header-transparent .fy-header--transparent:not(.is-scrolled) .fy-nav__item > a:hover { background: rgba(255,255,255,.12); }
body.fy-header-transparent .fy-main { padding-top: 0; }
body.fy-header-transparent .fy-hero--page .fy-hero__inner, body.fy-header-transparent .fy-hero--home > .fy-container { padding-top: calc(var(--fy-header-h) + 32px); }
@media (max-width: 1023px) { body.fy-header-transparent .fy-nav { top: var(--fy-header-h); } body.fy-header-transparent.fy-nav-open .fy-header--transparent { background: var(--fy-header-bg); color: var(--fy-header-text); } }

.fy-header--index .fy-header__mid { flex: 1; display: flex; justify-content: center; }
.fy-index-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 700; font-family: var(--fy-font-mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.fy-index-btn:hover { background: var(--fy-text); color: var(--fy-bg); }
.fy-index__cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }

.fy-header--bold .fy-header__inner { min-height: 80px; }
.fy-header--bold .fy-nav__item > a { font-weight: 700; }
.fy-header--bold .fy-header__cta .fy-btn { padding: 13px 22px; }

body.fy-header-pill .fy-header--pill { background: transparent; position: sticky; top: 12px; box-shadow: none; }
.fy-header--pill .fy-container { padding-top: 8px; }
.fy-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 16px; border-radius: 999px; background: var(--fy-header-bg); color: var(--fy-header-text); box-shadow: 0 10px 34px rgba(20,20,26,.12); border: 1px solid var(--fy-border); }
.fy-pill .fy-logo svg { height: 34px; }
.fy-pill .fy-logo__word small { display: none; }
@media (max-width: 1023px) { .fy-pill { border-radius: 22px; } body.fy-header-pill .fy-nav { top: 0; padding-top: 90px; } }
/* desktop: the pill can't hold logo + 8 items + CTA on one row at any width, so it is two rows */
@media (min-width: 1024px) {
  .fy-pill { flex-wrap: wrap; border-radius: 24px; padding: 10px 14px 8px 16px; }
  .fy-pill .fy-nav { order: 3; flex: 1 1 100%; display: flex; justify-content: center; border-top: 1px solid var(--fy-border); margin-top: 8px; padding-top: 4px; }
  .fy-pill .fy-header__cta { margin-left: auto; }
}

/* ---------- interior heroes ---------- */
.ph-split .ph-split__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 40px; align-items: center; padding: clamp(40px, 6vw, 80px) var(--fy-gutter); }
.ph-split .fy-crumbs { margin-bottom: 14px; }
@media (max-width: 1023px) { .ph-split .ph-split__grid { grid-template-columns: 1fr; } }
.ph-band { text-align: center; }
.ph-band .fy-container { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.ph-band .fy-crumbs ol { justify-content: center; }
.ph-band .fy-hero__sub { margin: 0 auto; }
.ph-band .fy-hero__actions, .ph-band .fy-hero__meta { justify-content: center; }
.ph-numeral .fy-hero__inner { padding: clamp(60px, 9vw, 120px) 0 clamp(48px, 7vw, 90px); }
.ph-numeral__row { display: flex; gap: 22px; align-items: flex-start; }
.ph-numeral__num { font-family: var(--fy-font-display); font-size: clamp(3rem, 8vw, 6.5rem); line-height: .9; color: var(--fy-accent); opacity: .9; }
.ph-numeral__shade { background: linear-gradient(180deg, rgba(8,8,12,.55), rgba(8,8,12,.85)); }
.ph-mast { background: var(--fy-bg); color: var(--fy-text); border-bottom: 1px solid var(--fy-border); }
.ph-mast .fy-container { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(36px, 5vw, 64px); }
.ph-mast .fy-hero__title { font-size: clamp(2.2rem, 5vw, 4rem); }
.ph-mast .fy-hero__actions .fy-btn--ghost { color: var(--fy-text); }
.ph-chips { background: var(--fy-surface); color: var(--fy-text); }
.ph-chips .fy-container { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.ph-chips .fy-crumbs li a, .ph-chips .fy-crumbs li span { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--fy-bg); border: 1px solid var(--fy-border); }
.ph-chips .fy-crumbs li + li::before { content: '›'; }
.ph-chips .fy-hero__actions .fy-btn--ghost { color: var(--fy-text); }
.ph-gradient { background: var(--fy-hero-bg); }
.ph-gradient__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 32px; align-items: center; padding: clamp(40px, 6vw, 80px) var(--fy-gutter); }
@media (max-width: 900px) { .ph-gradient__grid { grid-template-columns: 1fr; } .ph-gradient .b1-mask--sm { max-width: 320px; } }
.ph-photo .fy-hero__inner { padding: clamp(70px, 10vw, 130px) 0 clamp(50px, 7vw, 90px); }
.ph-glass { padding: clamp(40px, 6vw, 80px) 0; }
.ph-glass__card { padding: clamp(24px, 4vw, 44px); max-width: 860px; }
.ph-block { background: var(--fy-bg); }
.ph-block__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, .6fr); gap: 28px; align-items: center; padding: clamp(30px, 4vw, 56px) var(--fy-gutter); }
.ph-block__card { background: var(--fy-hero-bg); color: var(--fy-hero-text); border-radius: 28px; padding: clamp(28px, 4vw, 52px); }
.ph-block__icon { display: grid; place-items: center; background: var(--fy-surface); border-radius: 28px; min-height: 260px; color: var(--fy-primary); }
@media (max-width: 900px) { .ph-block__grid { grid-template-columns: 1fr; } .ph-block__icon { display: none; } }
.ph-kenburns .fy-hero__inner { padding: clamp(70px, 10vw, 130px) 0 clamp(50px, 7vw, 90px); }
.ph-kenburns .fy-reel { position: absolute; inset: 0; }

/* ---------- interior layouts ---------- */
.fy-wide__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 8px; }
@media (max-width: 1023px) { .fy-wide__grid { grid-template-columns: 1fr; } }
.fy-highlights { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.fy-highlights li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--fy-surface); border: 1px solid var(--fy-border); font-size: .9rem; font-weight: 600; }
.fy-highlights svg { color: var(--fy-accent); flex: none; }
.fy-page-faq { margin-top: clamp(32px, 4vw, 48px); }
.fy-page-faq h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 16px; }
.fy-related { margin-top: 32px; }
.fy-related h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fy-muted); font-family: var(--fy-font-body); margin-bottom: 10px; }
.fy-todo { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: #ffe58a; color: #5b4300; margin-left: 6px; vertical-align: middle; }
.fy-todo-note { background: #fff6d6; color: #5b4300; padding: 8px 10px; border-radius: 6px; }

/* hub */
.fy-hub-kids .fy-section__head { margin-bottom: 26px; }
.fy-hub-body .fy-layout--sidebar { margin-top: 0; }

/* about */
.fy-about-top { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 800px) { .fy-about-top { grid-template-columns: 1fr; } }
.fy-avatar--lg { width: 220px; height: 220px; font-size: 3.6rem; border-radius: 28px; }
.fy-portrait { display: grid; gap: 12px; }
.fy-creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 20px; }
.fy-cred { background: var(--fy-surface); border-radius: var(--fy-radius); padding: 14px 16px; }
.fy-cred dt { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fy-muted); font-weight: 700; }
.fy-cred dd { margin: 4px 0 0; font-weight: 700; font-size: 1.02rem; }
.fy-badges { display: flex; flex-wrap: wrap; gap: 8px; }

/* contact */
.fy-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .fy-contact-grid { grid-template-columns: 1fr; } }
.fy-contact-details { display: grid; gap: 22px; }
.fy-contact-row { display: flex; gap: 16px; align-items: flex-start; }
.fy-contact-row > svg { flex: none; color: var(--fy-accent); margin-top: 4px; }
.fy-contact-row h3 { margin-bottom: 4px; font-size: 1.1rem; }
.fy-contact-row p { margin: 0 0 4px; }
.fy-contact-big { font-family: var(--fy-font-display); font-size: 1.6rem; font-weight: 800; }

/* served */
.fy-served { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .fy-served { grid-template-columns: 1fr; } }
.fy-served__col { background: var(--fy-bg); border: 1px solid var(--fy-border); border-radius: var(--fy-radius-lg); padding: 24px; }
.fy-served__col h3 a:hover { text-decoration: underline; }
.fy-tag-list--static li span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--fy-surface); font-size: .86rem; }

/* review card style hooks (variants skin them) */
.fy-review--peer { border-style: dashed; }
.fy-review__q { color: var(--fy-accent); }

/* ---------- reusable brand mechanics ---------- */
/* a1 ledger */
.a1-ledger { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .92rem; opacity: .95; }
.a1-ledger li { display: inline-flex; align-items: center; gap: 8px; }
.a1-ledger svg { color: var(--fy-accent); }
/* a2 margin notes */
.a2-brief { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .a2-brief { grid-template-columns: 1fr; } }
.a2-brief__notes { position: sticky; top: calc(var(--fy-header-h) + 30px); display: grid; gap: 14px; }
.a2-margin { border-top: 2px solid var(--fy-text); padding-top: 10px; font-size: .92rem; }
.a2-margin b { display: block; font-family: var(--fy-font-display); font-size: 2rem; line-height: 1; }
.a2-margin--inline { display: flex; gap: 8px; align-items: flex-start; }
.a2-margin--inline svg { flex: none; color: var(--fy-accent); margin-top: 3px; }
.a2-inline-form, .a4-inline-form { margin: 40px 0; }
/* a4 dateline */
.a4-dateline { font-family: var(--fy-font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fy-muted); margin-bottom: 18px; }
/* b1 photo mask */
.b1-mask { position: relative; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; overflow: hidden; aspect-ratio: 4/5; max-width: 520px; margin: 0 auto; box-shadow: 0 30px 80px rgba(37,99,235,.28); }
.b1-mask img { width: 100%; height: 100%; object-fit: cover; }
.b1-mask--sm { aspect-ratio: 1; max-width: 380px; }
/* b2 duotone */
.b2-duotone { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85)); mix-blend-mode: multiply; }
.ph-photo .fy-hero__media img, .b2-hero .fy-hero__media img { filter: grayscale(1) contrast(1.15); }
/* b3 blobs + glass */
.b3-blobs { position: absolute; inset: -20%; pointer-events: none; z-index: 0; filter: blur(60px); opacity: .75; }
.b3-blobs i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; animation: b3-float 18s ease-in-out infinite alternate; }
.b3-blobs i:nth-child(1) { background: var(--fy-primary); left: -10%; top: -10%; }
.b3-blobs i:nth-child(2) { background: var(--fy-accent); right: -10%; top: 10%; animation-delay: -6s; opacity: .7; }
.b3-blobs i:nth-child(3) { background: #ec4899; left: 30%; bottom: -30%; animation-delay: -12s; opacity: .5; }
@keyframes b3-float { from { transform: translate(0,0) scale(1); } to { transform: translate(8%, 10%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .b3-blobs i { animation: none; } }
.b3-glass { position: relative; z-index: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 24px; padding: 28px; }
.ph-glass, .b3-hero { position: relative; overflow: hidden; }
/* b5 shade */
.b5-shade { background: linear-gradient(180deg, rgba(15,47,47,.25), rgba(15,47,47,.88)); }

/* ---------- misc components used by builders ---------- */
.fy-area-card__num { position: absolute; top: 18px; right: 22px; font-family: var(--fy-font-display); font-size: 1.6rem; color: var(--fy-border); font-weight: 800; }
.fy-prop h3 { margin-top: 8px; }
.fy-prop p { color: var(--fy-muted); margin: 0; }
.fy-props .fy-area-card__icon { color: var(--fy-accent); }
.fy-strip { position: relative; display: block; min-height: 260px; overflow: hidden; color: #fff; }
.fy-strip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: transform .6s ease, filter .6s ease; }
.fy-strip:hover .fy-strip__img { transform: scale(1.04); filter: grayscale(0); }
.fy-strip__body { position: relative; z-index: 1; padding: clamp(26px, 4vw, 48px) var(--fy-gutter); display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; max-width: var(--fy-max); margin: 0 auto; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25)); min-height: 260px; }
.fy-strip__num { font-family: var(--fy-font-display); font-size: 3rem; line-height: 1; color: var(--fy-accent); }
.fy-strip__body h3 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.fy-strip__body p { margin: 0; opacity: .9; }
.fy-strip__go { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--fy-accent); color: var(--fy-accent-ink); }
.fy-tile-blocks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.fy-tile-block { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 26px; color: #fff; min-height: 260px; transition: transform .25s ease; }
.fy-tile-block:nth-child(4), .fy-tile-block:nth-child(5) { grid-column: span 3; }
.fy-tile-block:hover { transform: translateY(-4px) rotate(-.4deg); }
.fy-tile-block h3 { margin: 6px 0 0; font-size: 1.6rem; }
.fy-tile-block p { margin: 0; opacity: .92; }
.fy-tile-block__go { margin-top: auto; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .fy-tile-block, .fy-tile-block:nth-child(4), .fy-tile-block:nth-child(5) { grid-column: span 3; } }
@media (max-width: 600px) { .fy-tile-block, .fy-tile-block:nth-child(4), .fy-tile-block:nth-child(5) { grid-column: span 6; min-height: 0; } }

/* ---------- real headshot (About) + lockup logos (Fred Fights candidates) ---------- */
.fy-portrait-photo { max-width: 260px; border-radius: 28px; overflow: hidden; box-shadow: var(--fy-shadow); }
.fy-portrait-photo img { width: 100%; height: auto; display: block; }
.fy-logo--lockup svg { height: 46px; width: auto; display: block; }
.fy-pill .fy-logo--lockup svg { height: 40px; }
@media (max-width: 1023px) { .fy-logo--lockup svg { height: 38px; } }
@media (max-width: 480px) { .fy-logo--lockup svg { height: 32px; } }
.fy-footer .fy-logo--lockup svg { height: 44px; }
.fy-meet-sec .fy-portrait { width: min(100%, 380px); }