/* Wired Different - editable page styles. The visual layout is largely section-level
   inline CSS in index.html; global, responsive, and interaction rules live here. */
*,*::before,*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; background: #f3e7e0; color: #171514; font-family: Geist, sans-serif; text-wrap: pretty; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: #171514; }
a:hover { color: #5f5853; }
::selection { background: #dde89b; }
:focus-visible { outline: 2px solid #171514; outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: rgba(251,244,239,0.4); }

[hidden] { display: none !important; }
.if-not-mobile, .if-mobile, .if-wide, .if-narrow { display: contents; }
@media (min-width: 720px) { .if-mobile { display: none; } }
@media (max-width: 719px) { .if-not-mobile { display: none; } }
@media (min-width: 1100px) { .if-narrow { display: none; } }
@media (max-width: 1099px) { .if-wide { display: none; } }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 12px 18px; background: white; border: 2px solid #141312; border-radius: 12px; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
#referral input:focus, #referral select:focus, #referral textarea:focus { border-color: #dde89b !important; outline: 2px solid rgba(221,232,155,.7); outline-offset: 2px; }
#referral input, #referral select, #referral textarea { min-width: 0; }
#referral select option { color: #141312; background: #fbf4ef; }
#mobile-menu { position: relative; z-index: 60; }
#team-modal { position: relative; z-index: 50; }
#team-modal button, #mobile-menu button { cursor: pointer; }
.role-option[aria-pressed="true"] { background: #dde89b !important; border-color: #dde89b !important; color: #141312 !important; }
.role-option[aria-pressed="false"] { background: transparent !important; border-color: rgba(251,244,239,0.22) !important; color: #fbf4ef !important; }
@media (max-width: 719px) {
  #referral input, #referral select, #referral textarea { font-size: 16px !important; }
  #team-modal [role="dialog"] { gap: 4px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.hover-1:hover { background: #fbf4ef; }
.hover-2:hover { background: #2e2a27; color: #fbf4ef; }
.hover-3:hover { opacity: 0.7; }
.hover-4:hover { opacity: 0.85; }
.hover-5:hover { background: #ffffff; }
.hover-6:hover { background: #2e2a27; }
.focus-1:focus { border-color: #dde89b; }

/* Interaction-only additions. Original layout, typography, palette and crops are unchanged. */
.role-radio { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.role-radio:not(:checked) + .role-pill { background:transparent !important; border-color:rgba(251,244,239,.22) !important; color:#fbf4ef !important; }
.role-radio:checked + .role-pill { background:#dde89b !important; border-color:#dde89b !important; color:#141312 !important; }
.role-radio:focus-visible + .role-pill { outline:2px solid #dde89b; outline-offset:3px; }
#referral :focus-visible { outline-color:#dde89b; }
[data-faq-index]:focus-visible { outline:2px solid #171514; outline-offset:3px; }
[data-service-card] { cursor:pointer; }
button:disabled { cursor:wait !important; opacity:.65; }

/* Original Wired Different logo; fixed slot preserves the existing navigation layout.
   Multiply removes the source artwork's white background on the warm page surfaces. */
.brand-link { display:inline-flex; align-items:center; justify-content:flex-start; flex:0 0 auto; width:150px; height:40px; line-height:1; vertical-align:middle; }
.brand-image { display:block; width:148px; max-width:100%; height:auto; max-height:54px; object-fit:contain; mix-blend-mode:multiply; }
@media (max-width:719px) { .brand-link { width:144px; height:44px; } .brand-image { width:138px; max-height:50px; } }

/* V7: persistent navigation, readable legal pages, and keyboard accessibility. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sticky-shell { position:fixed; inset:0 0 auto; z-index:45; background:rgba(251,244,239,.97); border-bottom:1px solid rgba(23,21,20,.12); box-shadow:0 4px 18px rgba(23,21,20,.06); backdrop-filter:blur(12px); }
.compact-navigation { max-width:1320px; margin:auto; padding:10px clamp(16px,3vw,40px) !important; min-height:64px; }
.compact-navigation .brand-link { height:38px; }
.compact-navigation .brand-image { max-height:42px; }
section[id], h2[id], h3[id] { scroll-margin-top:100px !important; }
.anchor-alias { display:block; position:relative; top:-100px; visibility:hidden; }
:target:focus { outline:none; }
[data-open-team]:focus-visible { outline:3px solid #171514 !important; outline-offset:5px; }
.collection-note { color:rgba(251,244,239,.88); font-size:13px; line-height:1.6; margin:0; }
input::placeholder, textarea::placeholder { color:rgba(251,244,239,.68); }
.page-nav-shell { margin:clamp(10px,1.5vw,20px); border-radius:28px; background:#fbf4ef; }
.editorial-main { max-width:1320px; margin:auto; padding:40px clamp(16px,3vw,40px) 90px; }
.editorial-heading { max-width:900px; padding:24px 0 40px; }
.editorial-eyebrow { display:inline-block; background:#fbf4ef; border:1px solid rgba(23,21,20,.12); border-radius:999px; padding:7px 13px; font-size:13px; }
.editorial-heading h1 { font-size:clamp(42px,5.5vw,78px); line-height:1.05; font-weight:400; letter-spacing:-.045em; margin:28px 0 20px; }
.editorial-heading em { font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-.02em; }
.editorial-intro { color:#5f5853; font-size:18px; line-height:1.65; max-width:65ch; }
.editorial-content { max-width:900px; font-size:16px; line-height:1.75; }
.editorial-content h2 { font-size:clamp(26px,3vw,35px); font-weight:400; letter-spacing:-.03em; line-height:1.2; margin:44px 0 18px; }
.editorial-content h3 { font-size:21px; font-weight:500; line-height:1.35; margin:28px 0 12px; }
.editorial-content p { margin:0 0 18px; }
.editorial-content a { text-underline-offset:3px; overflow-wrap:anywhere; }
.reading-note, .resource-card { background:#fbf4ef; border:1px solid rgba(23,21,20,.1); border-radius:22px; padding:clamp(20px,3vw,32px); margin:0 0 28px; }
.reading-note p:last-child { margin-bottom:0; }
.small-meta { color:#5f5853; font-size:14px; }
.resource-card h2 { margin-top:18px; }
.editorial-button { background:#141312; color:#fbf4ef !important; display:inline-flex; gap:18px; border-radius:999px; padding:12px 20px; text-decoration:none; }
.policy-contents { display:flex; flex-wrap:wrap; gap:12px 24px; padding:18px 0; border-block:1px solid rgba(23,21,20,.14); }
.provider-links { font-size:14px; }
.article-copy ol { padding-left:24px; }
.article-copy li { padding-left:6px; margin-bottom:16px; }
#referral a:hover { color:#dde89b; }
@media(max-width:719px) { .compact-navigation {padding-block:8px !important;} .editorial-main {padding-top:20px;} .editorial-heading {padding-top:16px;} }
@media print { .sticky-shell, #mobile-menu, #team-modal, .skip-link {display:none !important;} .policy-copy {max-width:none;} body{background:white;} .page-nav-shell, footer {display:none;} }