/* heycarlossoto.com · v3-4 · shared enhancement layer
   Progressive: every rule degrades to plain, readable, visible content. */

:root{
  --gold:#C9A96E; --gold-lt:#E2C88A; --gold-dk:#A88847;
  --dark:#1C1712; --cream:#F2EDE6;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ── Skip link ── */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--dark); color:var(--cream);
  padding:.9rem 1.4rem; font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; border-radius:0 0 3px 0;
}
.skip-link:focus{ left:0; }

/* ── Visible focus (was missing entirely) ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid #1C1712;
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(201,169,110,.9);
  border-radius:2px;
}
.on-dark a:focus-visible, .cta-band a:focus-visible, .cta-form :focus-visible,
footer a:focus-visible, .site-compliance a:focus-visible{
  outline-color:#FDFCFB;
}

/* ── Scroll progress ── */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt));
  z-index:200; pointer-events:none;
  will-change:transform;
}

/* ── Nav condense on scroll ── */
nav{ transition:padding .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out); }
body.scrolled nav{
  padding-top:.72rem; padding-bottom:.72rem;
  box-shadow:0 1px 24px rgba(28,23,18,.09);
  background:rgba(242,237,230,.97);
}

/* ── Gold underline draw on nav links ── */
.nav-links a:not(.nav-cta){ position:relative; }
.nav-links a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease-out);
}
.nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* ── Mobile nav (Cedar City link used to vanish entirely on phones) ── */
.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  padding:.72rem; margin:-.72rem; line-height:0; min-width:44px; min-height:44px;
}
.nav-toggle span{
  display:block; width:22px; height:1.5px; background:var(--dark);
  margin:4.5px 0; transition:transform .3s var(--ease-out), opacity .2s;
}
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    visibility:hidden;
    position:fixed; inset:0 0 auto 0; top:0; padding:5.2rem 1.6rem 2rem;
    background:rgba(242,237,230,.985); backdrop-filter:blur(18px);
    flex-direction:column; align-items:flex-start !important; gap:.2rem !important;
    border-bottom:1px solid rgba(139,115,85,.2);
    transform:translateY(-102%);
    transition:transform .48s var(--ease-out), visibility 0s linear .48s;
    box-shadow:0 20px 50px rgba(28,23,18,.13); z-index:-1;
  }
  body.nav-open .nav-links{ transform:translateY(0); visibility:visible; transition-delay:0s; }
  .nav-links a{ display:block !important; width:100%; padding:1rem 0 !important;
    font-size:.82rem !important; border-bottom:1px solid rgba(139,115,85,.12); }
  .nav-links a.nav-cta{
    margin-top:1.1rem; border-bottom:0; text-align:center;
    padding:1.05rem 1.2rem !important; border-radius:2px;
  }
  body.nav-open{ overflow:hidden; }
}

/* ── Staggered reveal (layered on the existing .reveal system) ── */
.reveal{ transition-timing-function:var(--ease-out); }
.reveal[data-stagger]{ transition-delay:calc(var(--i,0) * 85ms); }

/* ── Masked serif title reveal ── */
.title-mask{ display:block; overflow:hidden; }
.title-mask > span{
  display:block;
  transform:translateY(102%);
  transition:transform 1s var(--ease-out);
}
.title-mask.visible > span{ transform:translateY(0); }

/* ── Portrait parallax + entrance ── */
.hero-photo img{ will-change:transform; }
.img-rise{ transform:scale(1.05); transition:transform 1.5s var(--ease-out); }
.img-rise.visible{ transform:scale(1); }

/* ── Marquee: pause on hover/focus ── */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state:paused; }

/* ── Back to top ── */
.to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:150;
  width:46px; height:46px; border-radius:50%;
  background:var(--dark); color:var(--cream);
  border:1px solid rgba(201,169,110,.35);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:translateY(12px) scale(.9);
  pointer-events:none; transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), background .25s;
  font-size:1rem; line-height:1;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--gold); color:var(--dark); }
@media (max-width:600px){ .to-top{ right:1rem; bottom:1rem; width:46px; height:46px; } }

/* ── Print ── */
@media print{
  nav,.scroll-progress,.to-top,.marquee,.skip-link{ display:none !important; }
  .reveal,.title-mask>span{ opacity:1 !important; transform:none !important; }
  body{ background:#fff; color:#000; }
}

/* ══ Reduced motion: honour the OS setting completely ══ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .title-mask > span{ transform:none !important; }
  .img-rise{ transform:none !important; }
  .marquee-track{ animation:none !important; }
  .scroll-progress{ display:none; }
}

/* ── Universal compliance + connect strip (adapts to any footer) ── */
.site-compliance{
  color:#FDFCFB;
  margin-top:1.6rem; padding-top:1.4rem;
  border-top:1px solid currentColor;
  border-color:color-mix(in srgb, currentColor 16%, transparent);
  text-align:center; line-height:1.75;
}
.site-compliance .sc-social{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem;
  align-items:center;
}
.site-compliance .sc-tel{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:#E2C88A; padding:.55rem .3rem; display:inline-block;
}
.site-compliance .sc-tel:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

.site-compliance .sc-social a{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--gold,#C9A96E); opacity:.9; transition:opacity .2s;
}
.site-compliance .sc-social a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.site-compliance .sc-line{
  font-size:.72rem; letter-spacing:.05em; color:rgba(253,252,251,.72);
  max-width:640px; margin:0 auto;
}
.site-compliance .sc-line a{ color:#E2C88A; text-decoration:underline; text-underline-offset:3px; }

/* ══════════════ SOCIAL ICONS · brand colour, quietly ══════════════
   Glyph carries the platform colour at rest. Fills on hover. */
.soc{ display:flex; gap:.6rem; align-items:center; }
.soc a{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,169,110,.45);
  background:rgba(255,255,255,.5);
  transition:background .28s, border-color .28s, transform .28s, box-shadow .28s;
}
.soc a svg{ transition:fill .28s, stroke .28s, transform .28s; }
.soc a:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(28,23,18,.14); }

/* Hover only. Rest colour lives in the SVG so it never depends on this file. */
.soc .s-ig:hover{ border-color:transparent;
  background:linear-gradient(45deg,#F58529,#DD2A7B 45%,#8134AF 70%,#515BD4); }
.soc .s-ig:hover svg{ stroke:#fff; }
.soc .s-ig:hover svg circle[fill]{ fill:#fff; }
.soc .s-fb:hover{ background:#1877F2; border-color:#1877F2; }
.soc .s-fb:hover svg{ fill:#fff; }
.soc .s-yt:hover{ background:#FF0000; border-color:#FF0000; }
.soc .s-yt:hover svg{ fill:#fff; }

/* On dark backgrounds the discs lighten so the glyphs stay legible */
.on-dark .soc a,
.site-compliance .soc a{ background:rgba(255,255,255,.1); border-color:rgba(201,169,110,.45); }

/* ══════════════ Inline contact block (reusable) ══════════════ */
.contact-inline{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  margin-top:2.2rem; padding-top:1.8rem; border-top:1px solid rgba(139,115,85,.28);
}
.contact-inline .ci-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--dark,#1C1712); color:#F2EDE6;
  font-size:.73rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  padding:.95rem 1.7rem; border-radius:2px; transition:background .25s, transform .25s;
}
.contact-inline .ci-btn:hover{ background:#2F2317; transform:translateY(-2px); }
.contact-inline .ci-alt{
  font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:#6B5744; border-bottom:1.5px solid #C9A96E; padding-bottom:.25rem; transition:color .2s;
}
.contact-inline .ci-alt:hover{ color:#1C1712; }
.on-dark .contact-inline{ border-top-color:rgba(201,169,110,.25); }
.on-dark .contact-inline .ci-btn{ background:#C9A96E; color:#1C1712; }
.on-dark .contact-inline .ci-btn:hover{ background:#E2C88A; }
.on-dark .contact-inline .ci-alt{ color:rgba(255,255,255,.7); }
.on-dark .contact-inline .ci-alt:hover{ color:#fff; }
@media(max-width:560px){
  .contact-inline{ gap:1rem; }
  .contact-inline .ci-btn{ width:100%; justify-content:center; }
}


/* ── Legibility: a darker gold for SMALL text on light backgrounds.
   #C9A96E measures 1.92:1 on cream, which is fine for large display type and
   decorative rules but not for 10px uppercase labels. ── */
:root{ --gold-ink:#7A5F26; }
.s-eyebrow, .g-num, .g-status, .toc-n, .g-secnum, .kicker, .g-kicker,
.spot-cat, .lg .st-3, .ed-mo, .cat-num, .feat-tag span{ color:var(--gold-ink); }
.bg-off .s-eyebrow, .bg-cream .s-eyebrow{ color:var(--gold-ink); }
/* keep the brand gold wherever the background is dark or the type is display size */
.on-dark .s-eyebrow, .cta-band .s-eyebrow, .email-band .s-eyebrow, .included .s-eyebrow,
.g-cta .g-kicker, .cta .kicker, .rule-band .kicker, .feat-tag span,
footer .s-eyebrow, .site-compliance .sc-tel{ color:#C9A96E; }
.feat-tag span{ color:#C9A96E; }
h1 em, h2 em, h3 em, .s-title em, .hero h1 em{ color:#C9A96E; }

/* ── Fine print on dark: floor the alphas so nothing drops under 4.5:1 ── */
.cf-fine{ color:rgba(255,255,255,.66) !important; }
.cta-license{ color:rgba(255,255,255,.7) !important; }
.foot-bottom p{ color:rgba(255,255,255,.66) !important; }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:rgba(255,255,255,.6) !important; }
.ec-input::placeholder{ color:rgba(255,255,255,.6) !important; }
.ec-fine{ color:rgba(255,255,255,.62) !important; }

/* ── Standalone link tap targets ── */
.feat-link, .feat-prev, .g-back a, .back a, .partner-link, .g-status{
  display:inline-block; padding-block:.5rem;
}