/* ServiceStake v4 design system.
   Type: Manrope (headings, labels, buttons) + Source Sans 3 (body).
   Glass rule: every .glass element has an opaque navy background first; blur is layered on
   only inside @supports, so the page is finished with blur off. */
:root {
  --navy: #0B1F33;
  --deep: #061A31;
  --gold: #B8893B;
  --gold-2: #C9A24D;
  --ivory: #F6F3EC;
  --slate: #5B6B7A;
  --white: #FFFFFF;
  --line: #E4DDCF;
  --line-2: #D6CDBB;
  --mist: #C9D3DD;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --head: 'Manrope', system-ui, sans-serif;
  --body: 'Source Sans 3', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--deep); }
body { margin: 0; background: var(--deep); color: var(--navy); font-family: var(--body); font-size: 17px; line-height: 1.6; }
.site { overflow-x: hidden; overflow-x: clip; background: var(--ivory); min-height: 100vh; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
button { font: inherit; }
h1, h2, h3, .mh { font-family: var(--head); font-weight: 500; letter-spacing: -.045em; margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Icons: duotone via custom properties that cross into <use> ---- */
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; --ia: var(--gold); --if: rgba(184, 137, 59, .2); }
.ico.sm { width: 17px; height: 17px; }
.ico.lg { width: 26px; height: 26px; }

/* Tiles hold an icon. Light tile = navy icon; dark tile = gold icon. */
.tile { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none; position: relative;
  background: linear-gradient(160deg, #FFFFFF 0%, #F3EEE3 100%); color: var(--navy);
  border: 1px solid rgba(184, 137, 59, .38);
  box-shadow: 0 14px 28px -10px rgba(11, 31, 51, .28), 0 0 0 4px rgba(184, 137, 59, .07), inset 0 1px 0 #fff; }
.tile .ico { width: 24px; height: 24px; stroke-width: 1.55; --ia: var(--gold); --if: rgba(184, 137, 59, .24); }
.tile.dark, .on-dark .tile { color: var(--gold-2);
  background: radial-gradient(120% 90% at 20% 0%, rgba(201, 162, 77, .32), transparent 55%), linear-gradient(150deg, #173452 0%, #061A31 75%);
  border: 1px solid rgba(201, 162, 77, .42);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, .55), 0 0 0 4px rgba(201, 162, 77, .07), inset 0 1px 0 rgba(255, 255, 255, .22); }
.tile.dark .ico, .on-dark .tile .ico { --ia: #F6F3EC; --if: rgba(201, 162, 77, .28); }
.tile.sm { width: 42px; height: 42px; border-radius: 12px; }
.tile.sm .ico { width: 21px; height: 21px; }
.tile.xs { width: 36px; height: 36px; border-radius: 11px; }
.tile.xs .ico { width: 18px; height: 18px; }
.tile.lg { width: 64px; height: 64px; border-radius: 18px; }
.tile.lg .ico { width: 30px; height: 30px; }

/* ---- Header ---- */
.hdr { position: sticky; top: 0; z-index: 50; background: #041528; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 12px 32px rgba(2, 12, 24, .28); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 74px; }
.wm { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.wm .mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(150deg, #173452, #061A31); border: 1px solid rgba(201, 162, 77, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.wm .mark i { width: 9px; height: 9px; background: var(--gold-2); transform: rotate(45deg); border-radius: 1.5px; box-shadow: 0 0 12px rgba(201, 162, 77, .7); }
.wm .t { display: flex; flex-direction: column; line-height: 1.05; }
.wm .n { font-family: var(--head); font-weight: 700; font-size: 19px; letter-spacing: -.035em; }
.wm .n b { color: var(--gold-2); font-weight: 700; }
.wm .s { font-family: var(--head); font-weight: 700; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: #9fb0c2; margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.pill) { font-family: var(--head); font-weight: 750; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; }
.nav a:not(.pill):hover { color: var(--gold-2); }

/* ---- Buttons ---- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; border-radius: 999px;
  font-family: var(--head); font-weight: 750; font-size: 13px; letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap; border: 0;
  background: var(--gold-2); color: var(--deep); box-shadow: 0 14px 34px rgba(184, 137, 59, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .16s var(--ease), box-shadow .18s var(--ease), background .18s; }
.pill:hover { transform: translateY(-2px); color: var(--deep); background: #D4AF5C; box-shadow: 0 18px 42px rgba(184, 137, 59, .44), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pill .ico { width: 16px; height: 16px; --ia: currentColor; --if: transparent; }
.pill.sm { min-height: 40px; padding: 0 16px; font-size: 12px; }
.pill.navy { background: var(--navy); color: #fff; box-shadow: 0 14px 34px rgba(11, 31, 51, .26), inset 0 1px 0 rgba(255, 255, 255, .12); }
.pill.navy:hover { background: #12304d; color: #fff; }
.pill.ghost { background: #0E2740; color: #fff; border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pill.ghost { background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.pill.ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.pill.line { background: #fff; color: var(--navy); border: 1px solid var(--line-2); box-shadow: 0 8px 20px -8px rgba(11, 31, 51, .2); }
.pill.line:hover { background: var(--ivory); color: var(--navy); }

/* ---- Numbered section labels ---- */
.kicker { display: flex; align-items: center; gap: 12px; }
.kicker .n { min-width: 36px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--navy); color: var(--gold-2); font-family: var(--head); font-weight: 500; font-size: 10px; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(11, 31, 51, .18); flex: none; }
.kicker .t { font-family: var(--head); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.kicker::after { content: ""; width: 44px; height: 1px; background: var(--gold); flex: none; }
.on-dark .kicker .n { background: var(--gold-2); color: var(--deep); }
.on-dark .kicker .t { color: var(--gold-2); }
.on-dark .kicker::after { background: var(--gold-2); opacity: .7; }
.h2 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1.02; max-width: 900px; margin: 22px 0 22px; text-wrap: balance; }
.lede { font-size: 18.5px; line-height: 1.6; color: var(--slate); max-width: 640px; }
.lede strong { color: var(--navy); font-weight: 600; }
.on-dark .lede { color: #D3DCE6; }
.on-dark .lede strong { color: #fff; }

/* ---- Sections ---- */
.chapter { position: relative; padding: 96px 0; }
.chapter::before { content: ""; position: absolute; z-index: 2; top: 102px; left: max(14px, calc(50% - 652px)); width: 3px; height: 88px; border-radius: 999px; background: linear-gradient(180deg, #E2C47E, var(--gold)); box-shadow: 0 0 20px rgba(184, 137, 59, .45); }
.chapter::after { content: ""; position: absolute; z-index: 2; top: 99px; left: max(9px, calc(50% - 657px)); width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); box-shadow: 0 0 0 5px rgba(184, 137, 59, .12), 0 0 16px rgba(184, 137, 59, .4); }
.ivory { background: var(--ivory); }
.white { background: #fff; }
.dark, .on-dark.dark { background: var(--navy); background-image: radial-gradient(circle at 88% 8%, rgba(201, 162, 77, .16), rgba(0, 0, 0, 0) 36%), linear-gradient(135deg, #071A2D, #0B1F33); color: #fff; }
.deep { background: var(--deep); background-image: radial-gradient(circle at 85% 0%, rgba(201, 162, 77, .14), rgba(0, 0, 0, 0) 40%), radial-gradient(circle at 0% 100%, rgba(23, 52, 82, .9), rgba(0, 0, 0, 0) 45%); color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }

/* ---- Solid cards (light sections, long grids) ---- */
.card { position: relative; background: #fff; border: 1px solid rgba(214, 205, 187, .9); border-radius: 18px; padding: 26px;
  box-shadow: 0 30px 60px -14px rgba(11, 31, 51, .16), 0 8px 18px -6px rgba(11, 31, 51, .1), inset 0 1px 0 #fff;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 12% 0%, rgba(184, 137, 59, .07), transparent 55%); }
a.card { display: block; text-decoration: none; color: var(--navy); }
a.card:hover, .card.lift:hover { transform: translateY(-6px); border-color: rgba(184, 137, 59, .55); box-shadow: 0 46px 86px -16px rgba(11, 31, 51, .26), 0 14px 28px -8px rgba(11, 31, 51, .12), inset 0 1px 0 #fff; }

/* ---- Glass cards (dark and photo sections) ---- */
.glass { position: relative; color: #fff; background: var(--navy); border: 1px solid rgba(201, 162, 77, .34); border-radius: 20px 20px 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .34), 0 10px 22px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 42%); }
.glass.lift:hover, a.glass:hover { transform: translateY(-6px); border-color: rgba(201, 162, 77, .6); box-shadow: 0 44px 90px rgba(0, 0, 0, .42), 0 14px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .18); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(14, 39, 64, .58); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
}

/* ---- Photo frames: in flow, never overlaid ---- */
.frame { margin: 0; background: #1A3048; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px 22px 6px; overflow: hidden;
  box-shadow: 0 28px 62px rgba(5, 20, 36, .22), 0 8px 18px rgba(5, 20, 36, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.on-dark .frame { border: 1px solid rgba(201, 162, 77, .38); box-shadow: 0 34px 76px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
.frame figcaption { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-family: var(--head); font-weight: 500; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; background: var(--navy); color: #AFC0D0; }
.frame figcaption .ico { color: var(--gold-2); --ia: #F6F3EC; --if: rgba(201, 162, 77, .28); width: 15px; height: 15px; }

/* ---- Hero ---- */
.hero { padding: 72px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding-bottom: 64px; }
.hero .tag { display: block; font-family: var(--head); font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.02em; color: var(--gold-2); margin: 22px 0 14px; }
.h1 { font-size: clamp(40px, 4.7vw, 66px); line-height: 1.0; max-width: 760px; color: #fff; text-wrap: balance; }
.hero .lede { margin: 24px 0 30px; font-size: 19px; max-width: 560px; }
.hero .frame img { aspect-ratio: 5 / 4.3; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* Search (glass on dark) */
.search { position: relative; max-width: 600px; }
.search-box { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 8px 0 20px; border-radius: 999px; color: #fff;
  background: #10294A; border: 1px solid rgba(201, 162, 77, .45); box-shadow: 0 22px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .search-box { background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
.search-box > .ico { color: var(--gold-2); --ia: #fff; --if: transparent; }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-family: var(--body); font-size: 17px; }
.search-box input::placeholder { color: #9FB0C2; }
.search-box:focus-within { border-color: var(--gold-2); box-shadow: 0 0 0 4px rgba(201, 162, 77, .2), 0 22px 50px rgba(0, 0, 0, .35); }
.search-box .pill { min-height: 46px; padding: 0 20px; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; list-style: none; margin: 0; padding: 6px; display: none; max-height: 380px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.search-results.open { display: block; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--navy); }
.search-results a .icon { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; --ia: var(--gold); --if: rgba(184, 137, 59, .22); flex: none; }
.search-results a:hover, .search-results a.active { background: var(--ivory); }
.search-results .r-name { font-family: var(--head); font-weight: 600; letter-spacing: -.02em; }
.search-results .r-cat { font-size: 14px; color: var(--slate); }
.search-results .r-empty { padding: 12px; color: var(--slate); }

/* Stat strip (glass bar at the base of the hero) */
.stats-bar { position: relative; border-top: 1px solid rgba(255, 255, 255, .14); background: #0A1E35; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stats-bar { background: rgba(3, 18, 35, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 34px; padding-bottom: 34px; }
.stat { display: flex; flex-direction: column; gap: 10px; padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, .18); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat .num { font-family: var(--head); font-weight: 600; font-size: clamp(44px, 4.6vw, 64px); letter-spacing: -.05em; line-height: .95; color: var(--gold-2); }
.stat .lbl { display: flex; gap: 9px; align-items: flex-start; font-family: var(--head); font-weight: 500; font-size: 14.5px; line-height: 1.35; color: #D3DCE6; }
.stat .lbl .ico { color: var(--gold-2); --ia: #fff; --if: transparent; margin-top: 1px; }

/* Trades grid */
.trades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.trade { display: flex !important; align-items: center; gap: 16px; padding: 20px !important; }
.trade .tw { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.trade .n { font-family: var(--head); font-weight: 600; font-size: 16.5px; letter-spacing: -.025em; line-height: 1.2; }
.trade .c { font-size: 14px; color: var(--slate); margin-top: 3px; }
.trade .go { color: var(--gold); --ia: var(--gold); width: 18px; height: 18px; }

/* Crew section */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split .frame img { aspect-ratio: 4 / 3.3; }
.glass-list { display: grid; gap: 14px; margin: 34px 0 34px; }
.glass-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; }
.glass-item h3 { font-size: 19px; letter-spacing: -.03em; font-weight: 600; margin: 2px 0 4px; }
.glass-item p { font-size: 15.5px; line-height: 1.5; color: #C9D4DF; }
.glass-item .big { font-family: var(--head); font-weight: 600; color: var(--gold-2); letter-spacing: -.03em; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 46px; }
.step .num { font-family: var(--head); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: 22px; display: block; }
.step h3 { font-size: 23px; letter-spacing: -.035em; font-weight: 600; margin: 6px 0 10px; }
.step p { font-size: 16px; line-height: 1.55; color: var(--slate); }
.steps-photo { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.steps-photo .frame img { aspect-ratio: 4 / 3; }

/* Brands section */
.check { list-style: none; margin: 30px 0 34px; padding: 0; display: grid; gap: 14px; }
.check li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.5; }
.on-dark .check li { color: #E5ECF2; }
.check li .tile { margin-top: -4px; }
.claim-card { padding: 34px; }
.claim-card h3 { font-size: 30px; line-height: 1.08; letter-spacing: -.04em; margin: 16px 0 12px; }
.claim-card p { color: #C9D4DF; font-size: 16px; }
.claim-card .rule { height: 1px; background: rgba(255, 255, 255, .14); margin: 24px 0; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mini b { display: block; font-family: var(--head); font-weight: 600; font-size: 32px; letter-spacing: -.04em; color: var(--gold-2); line-height: 1; }
.mini span { font-family: var(--head); font-weight: 500; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #9FB0C2; }

/* ---- Footer ---- */
.ftr { background: #031326; color: #9FB0C2; padding: 56px 0 34px; font-size: 15px; }
.ftr-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ftr .notices { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ftr .notices li { display: flex; gap: 12px; align-items: center; color: #D3DCE6; }
.ftr .notices .ico { color: var(--gold-2); --ia: #fff; --if: rgba(201, 162, 77, .25); }
.ftr .tagline { margin-top: 16px; max-width: 30em; }
.ftr-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; padding-top: 24px; font-size: 13.5px; }
.ftr-bot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ftr-bot a { color: #D3DCE6; text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ftr-bot a:hover { color: var(--gold-2); }
.ftr .credits { color: #7F93A8; max-width: 560px; }

/* ---- Page heads (category, listing) ---- */
.phead { padding: 54px 0 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9FB0C2; margin-bottom: 28px; }
.crumbs a { color: #D3DCE6; text-decoration: none; }
.crumbs a:hover { color: var(--gold-2); }
.crumbs .ico { width: 13px; height: 13px; color: var(--gold-2); --ia: var(--gold-2); }
.crumbs span[aria-current] { color: var(--gold-2); }
.phead-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-bottom: 56px; }
.phead .h1 { font-size: clamp(42px, 5vw, 70px); margin-top: 20px; }
.phead .lede { margin-top: 20px; }
.phead .frame img { aspect-ratio: 16 / 11; }
.title-row { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.title-row .h1 { margin-top: 0; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.badge { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-family: var(--head); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; background: var(--ivory); color: var(--navy); border: 1px solid var(--line-2); }
.badge .ico { width: 14px; height: 14px; }
.badge.gold { background: #F4EAD6; border-color: rgba(184, 137, 59, .55); color: #5A4013; }
.on-dark .badge { background: #12304D; color: #E5ECF2; border-color: rgba(255, 255, 255, .2); }
.on-dark .badge .ico { color: var(--gold-2); --ia: #fff; --if: rgba(201, 162, 77, .25); }
.on-dark .badge.gold { background: #3A2E17; color: #F1DDAE; border-color: rgba(201, 162, 77, .55); }

/* Category listing layout */
.layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; }
.filters { position: sticky; top: 98px; padding: 22px !important; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.filters legend { padding: 0; font-family: var(--head); font-weight: 750; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.opt { display: flex; align-items: center; gap: 11px; padding: 8px 0; font-size: 16px; cursor: pointer; border-bottom: 1px solid #EFEAE0; }
.opt input { width: 18px; height: 18px; accent-color: var(--navy); margin: 0; flex: none; }
.opt .c { margin-left: auto; font-family: var(--head); font-weight: 700; font-size: 12px; color: var(--slate); background: var(--ivory); border-radius: 999px; padding: 2px 9px; }
.filters summary { display: none; }
.fine { font-size: 14px; color: var(--slate); line-height: 1.45; }
.result-count { font-family: var(--head); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lcard { display: flex !important; flex-direction: column; gap: 14px; padding: 24px !important; }
.lcard .top { display: flex; gap: 14px; align-items: center; }
.lcard h3 { font-size: 22px; letter-spacing: -.035em; font-weight: 600; line-height: 1.15; }
.lcard .badges { margin-top: 0; }
.lcard .desc { font-size: 15.5px; line-height: 1.5; color: var(--slate); }
.lcard .fig { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--ivory); border: 1px solid #EBE4D6; font-size: 14.5px; line-height: 1.45; color: var(--navy); }
.lcard .fig .ico { color: var(--navy); margin-top: 1px; }
.lcard .more { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 750; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.lcard .more .ico { color: var(--gold); width: 16px; height: 16px; --ia: var(--gold); }
.empty { padding: 30px; text-align: center; color: var(--slate); }

/* Listing page */
.summary { padding: 26px; align-self: center; }
.sum-top { display: flex; align-items: center; gap: 12px; }
.sum-k { font-family: var(--head); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.sum-v { font-family: var(--head); font-weight: 600; font-size: 21px; letter-spacing: -.03em; line-height: 1.3; color: #fff; margin-top: 16px; }
.sum-rule { height: 1px; background: rgba(255, 255, 255, .14); margin: 20px 0 16px; }
.sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sum-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: #C9D4DF; }
.sum-list .ico { color: var(--gold-2); --ia: #fff; --if: rgba(201, 162, 77, .25); margin-top: 2px; }
.panel .fine { margin-bottom: 18px !important; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.detail aside { position: sticky; top: 98px; display: grid; gap: 18px; }
.detail > div { display: grid; gap: 22px; }
.panel h2 { font-size: 30px; line-height: 1.12; letter-spacing: -.04em; font-weight: 600; margin: 16px 0 14px; }
.panel h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.03em; font-weight: 600; margin: 0 0 14px; }
.figure-box { height: auto; overflow: visible; border-radius: 14px; padding: 22px 24px; background: var(--ivory); border: 1px solid #EBE4D6; border-left: 4px solid var(--gold); }
.figure-text { font-family: var(--head); font-weight: 600; font-size: 21px; letter-spacing: -.03em; line-height: 1.3; color: var(--navy); }
.source { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--slate); }
.source .ico { color: var(--navy); margin-top: 1px; }
.source a { overflow-wrap: anywhere; }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ivory); border: 1px solid #EBE4D6; text-decoration: none; color: var(--navy); font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; transition: border-color .18s, transform .18s var(--ease); }
.links a:hover { border-color: var(--gold); transform: translateY(-2px); }
.links .ext { margin-left: auto; color: var(--slate); width: 16px; height: 16px; --ia: var(--slate); --if: transparent; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.facts li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.facts li + li { padding-top: 12px; border-top: 1px solid #EFEAE0; }
.head-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.side-note { font-size: 14.5px; color: var(--slate); margin-top: 12px; line-height: 1.5; }

/* Forms (solid, light) */
.form { display: grid; gap: 16px; margin-top: 6px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--head); font-weight: 750; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.field input, .field select { width: 100%; height: 50px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--navy); font-family: var(--body); font-size: 16px; padding: 0 14px; outline: none; }
.field input[readonly] { background: var(--ivory); color: var(--slate); }
.field input:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184, 137, 59, .16); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; padding: 14px 16px; border-radius: 12px; background: var(--ivory); border: 1px solid #EBE4D6; cursor: pointer; }
.consent input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--navy); flex: none; }
.form-msg { display: none; padding: 14px 16px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.form-msg.show { display: block; }
.form-msg.error { background: #FBEAE7; border: 1px solid #E7B4AB; color: #7A2617; }
.form-msg.ok { background: #E8F3EC; border: 1px solid #A9D2B7; color: #1E5A35; }
.form-msg.test { background: #F4EAD6; border: 1px solid rgba(184, 137, 59, .55); color: #4A3510; }
.form-msg pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; margin: 10px 0 0; max-height: 240px; overflow: auto; background: #fff; padding: 10px; border-radius: 8px; }
.form .pill { justify-self: start; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .chapter::before, .chapter::after { display: none; }
  .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-grid, .split, .phead-grid, .steps-photo { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .detail { grid-template-columns: 1fr; }
  .detail aside { position: static; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; padding: 0 !important; }
  .filters summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font-family: var(--head); font-weight: 750; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
  .filters summary::-webkit-details-marker { display: none; }
  .filters summary .hint { margin-left: auto; font-family: var(--body); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--slate); }
  .filters summary .chev { transition: transform .15s; color: var(--gold); --ia: var(--gold); }
  .filters details[open] summary .chev { transform: rotate(90deg); }
  .filters details[open] summary { border-bottom: 1px solid #EFEAE0; }
  .filters details > :not(summary) { margin-left: 18px; margin-right: 18px; }
  .filters details > fieldset:first-of-type { margin-top: 18px; }
  .filters details[open] { padding-bottom: 18px; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .nav .hide-m { display: none; }
  .nav { gap: 16px; }
  .hdr .wrap { height: 66px; }
  .wm .n { font-size: 17px; }
  .wm .s { display: none; }
  .pill.hcta { min-height: 38px; padding: 0 14px; font-size: 11.5px; }
  .chapter { padding: 64px 0; }
  .hero { padding-top: 40px; }
  .hero-grid { padding-bottom: 44px; gap: 34px; }
  .h1 { font-size: 40px; line-height: 1.02; }
  .hero .tag { font-size: 17px; margin-top: 18px; }
  .hero .lede { font-size: 17.5px; margin: 18px 0 24px; }
  .h2 { font-size: 36px; margin: 18px 0 16px; }
  .lede { font-size: 17px; }
  .search-box { height: 58px; padding-left: 16px; }
  .search-box .pill { display: none; }
  .stats { padding-top: 26px; padding-bottom: 26px; gap: 22px 0; }
  .stat { padding: 0 0 0 18px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat .num { font-size: 44px; }
  .stat .lbl { font-size: 14px; }
  .stat .lbl .ico { display: none; }
  .trades { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
  .trade { flex-direction: column; align-items: flex-start !important; gap: 12px; padding: 16px !important; }
  .trade .tile { width: 44px; height: 44px; border-radius: 13px; }
  .trade .go { display: none; }
  .trade .n { font-size: 15.5px; }
  .steps { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .glass-item { padding: 18px; }
  .claim-card { padding: 24px; }
  .ctas { flex-direction: column; align-items: stretch; }
  .ftr-top { grid-template-columns: 1fr; }
  .phead { padding-top: 34px; }
  .phead .h1 { font-size: 40px; }
  .title-row { gap: 14px; align-items: flex-start; }
  .title-row .tile.lg { width: 52px; height: 52px; border-radius: 15px; }
  .head-actions { flex-direction: column; align-items: stretch; }
  .form .row2 { grid-template-columns: 1fr; }
  .form .pill { justify-self: stretch; }
  .panel h2 { font-size: 26px; }
  .figure-text { font-size: 19px; }
  .summary { display: none; }
  .phead-grid { padding-bottom: 44px; }
}

/* ---- Logo (supplied artwork, scaled proportionally only) ---- */
.brand { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.brand .logo { display: block; height: 51px; width: auto; max-width: none; }
.ftr .brand .logo { height: 55px; }
@media (max-width: 760px) { .brand .logo { height: 38px; } }

/* ---- Text never clips ---- */
.card, .glass, .panel, .figure-box, .lcard .fig, .source, .src { overflow: visible; }
.source span, .src span { min-width: 0; overflow-wrap: anywhere; }

/* ---- Why home services ---- */
.why .h2 { max-width: 760px; }
.why-lead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 44px; align-items: end; margin-top: 34px; padding-bottom: 38px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.why-big { font-family: var(--head); font-weight: 600; font-size: clamp(64px, 9vw, 132px); line-height: .9; letter-spacing: -.055em; color: var(--gold-2); white-space: nowrap; }
.why-cap { font-size: 20px; line-height: 1.45; color: #E5ECF2; max-width: 34em; }
.src { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: #9FB0C2; }
.src .ico { color: var(--gold-2); --ia: #fff; --if: transparent; margin-top: 1px; }
.src a { color: #D3DCE6; text-decoration-color: rgba(201, 162, 77, .7); }
.src a:hover { color: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.why-card { padding: 26px; display: flex; flex-direction: column; }
.why-num { font-family: var(--head); font-weight: 600; font-size: 44px; letter-spacing: -.045em; line-height: 1; color: var(--gold-2); margin-top: 20px; }
.why-txt { font-size: 16px; line-height: 1.5; color: #D3DCE6; margin-top: 12px; flex: 1; }
.why-statement { font-family: var(--head); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; letter-spacing: -.025em; color: #fff; max-width: 920px; margin-top: 46px; }
.trade-sum { padding: 28px; align-self: center; }
@media (max-width: 1100px) { .why-grid { grid-template-columns: 1fr; } .why-lead { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 760px) {
  .why-big { font-size: 64px; white-space: normal; }
  .why-cap { font-size: 17.5px; }
  .why-lead { margin-top: 24px; padding-bottom: 28px; gap: 14px; }
  .why-grid { margin-top: 26px; gap: 14px; }
  .why-card { padding: 22px; }
  .why-num { font-size: 38px; margin-top: 16px; }
  .why-statement { font-size: 21px; margin-top: 32px; }
}

/* Listing cards: align name / badges / description / figures / link across each row */
@supports (grid-template-rows: subgrid) {
  .cards { grid-auto-rows: auto; }
  .lcard { display: grid !important; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
  .lcard .fig { margin-top: 0; align-self: start; }
  .lcard .more { align-self: end; }
}

/* ---- One face for every big number, site-wide (same as the $509 billion lead stat) ---- */
.stat .num, .why-big, .why-num, .mini b, .bignum {
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-style: normal; font-stretch: 100%;
  font-variant-numeric: lining-nums proportional-nums; font-feature-settings: normal; font-synthesis: none;
  letter-spacing: -.05em; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}

/* ---- Prose pages (About, Privacy, Terms) ---- */
.prose { max-width: 820px; }
.prose h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.035em; font-weight: 600; margin: 34px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 17px; line-height: 1.65; color: #33475B; margin: 0 0 14px; }
.prose ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.prose li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.55; color: #33475B; }
.prose li .tile { margin-top: -2px; }
.prose .placeholder { background: #F4EAD6; border: 1px dashed rgba(184, 137, 59, .7); border-radius: 6px; padding: 1px 6px; color: #5A4013; }
.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bullets li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; }
.bullets li .tile { margin-top: -3px; }
@media (max-width: 760px) { .prose h2 { font-size: 24px; } .prose p, .prose li { font-size: 16.5px; } .brand .logo { height: 38px; } }

/* Glass only belongs on dark and photo sections; on light sections the same card is solid navy. */
.ivory .glass, .white .glass { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ivory .glass::before, .white .glass::before { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 42%); }
.claim-card h3 { color: #fff; }

/* ---- Ownership disclosure ---- */
.ftr .ownership { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; line-height: 1.5; color: #C9D4DF; }
.ftr .ownership .ico { color: var(--gold-2); --ia: #fff; --if: rgba(201, 162, 77, .25); margin-top: 2px; }
.ftr .ownership a { color: var(--gold-2); text-decoration: underline; text-decoration-color: rgba(201, 162, 77, .6); text-underline-offset: 3px; white-space: nowrap; }
.ftr .ownership a:hover { color: #fff; }
.ftr-top { border-bottom: 0; padding-bottom: 0; }
.ftr-bot { margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.badge.client { background: #E8F0E9; border-color: #A9CDB2; color: #1E4D2C; }
.on-dark .badge.client { background: #173A2A; color: #CDEBD6; border-color: rgba(120, 190, 145, .5); }
.prose h2[id] { scroll-margin-top: 96px; }

/* ---- Legal pages: plain reading layout, no glass or photos ---- */
.legal-head { padding-bottom: 60px !important; }
.legal-head .h1 { margin-top: 18px; }
.legal-updated { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-family: var(--head); font-weight: 500; font-size: 14px; letter-spacing: .04em; color: #C9D4DF; }
.legal-updated .ico { color: var(--gold-2); --ia: #fff; --if: transparent; }
.legal-body { background: var(--ivory); padding: 64px 0 96px; }
.legal { max-width: 720px; color: #24384C; font-size: 17.5px; line-height: 1.75; }
.legal h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.035em; font-weight: 600; color: var(--navy); margin: 52px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.legal > p:first-child, .legal > h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 18px; }
.legal ul { margin: 0 0 20px; padding-left: 1.2em; }
.legal li { margin: 0 0 10px; padding-left: 4px; }
.legal li::marker { color: var(--gold); }
.legal strong { color: var(--navy); font-weight: 600; }
.legal a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal .contact-block { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; }
.consent-note { margin: -6px 0 0; font-size: 14px; color: var(--slate); }
.consent-note a { color: var(--navy); text-decoration-color: var(--gold); }
@media (max-width: 760px) {
  .legal-body { padding: 44px 0 72px; }
  .legal { font-size: 16.5px; line-height: 1.7; }
  .legal h2 { font-size: 23px; margin-top: 40px; padding-top: 18px; }
}

/* ---- Legal pages: "On this page" panel (desktop only) ---- */
.legal-toc { display: none; }
@media (min-width: 1100px) {
  .legal-grid { display: grid; grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; gap: 64px; align-items: start; }
  .legal-toc { display: block; position: sticky; top: 98px; }
}
.toc { padding: 24px 22px !important; }
.toc-k { font-family: var(--head); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: calc(100vh - 200px); overflow-y: auto; }
.toc button { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: 7px 10px 7px 12px; border-radius: 0 8px 8px 0; font-family: var(--body); font-size: 15px; line-height: 1.35; color: var(--slate); cursor: pointer; }
.toc button:hover { color: var(--navy); background: var(--ivory); }
.toc button.active { color: var(--navy); font-weight: 600; border-left-color: var(--gold); background: #F4EAD6; }

/* About: home-page card style, full width */
.chapter.about { padding: 72px 0; }
.chapter.about + .chapter.about { padding-top: 72px; }
.about .h2 { margin-top: 0; }
.about-grid { margin-top: 0; }
.about .h2 + .about-grid { margin-top: 34px; }
.about-card h2 { font-size: 23px; line-height: 1.2; letter-spacing: -.035em; font-weight: 600; margin: 22px 0 10px; }
.about-card p { font-size: 16.5px; line-height: 1.6; color: #33475B; margin: 0 0 10px; }
.about-card > .tile + p { margin-top: 22px; }
.about-card p:last-child { margin-bottom: 0; }
.about-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.about-card li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; line-height: 1.55; color: #33475B; }
.about-card[id] { scroll-margin-top: 96px; }
.about-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.about-contact { display: flex; gap: 22px; align-items: flex-start; }
.about-contact h2 { margin-top: 2px; }
.about-email { display: flex; gap: 10px; align-items: center; margin-top: 14px !important; font-weight: 600; color: var(--navy) !important; }
.about-email a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .about-2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .chapter.about { padding: 52px 0; }
  .about-contact { flex-direction: column; gap: 0; }
  .about-contact h2 { margin-top: 22px; }
}