/* Ridgeline Specialty landing page. Brand Guidelines v1.2. Outfit for type, Poppins for the lockup (matches the official logo files). Both self hosted, SIL OFL 1.1. */
@font-face{font-family:Poppins;font-weight:300;font-style:normal;font-display:swap;src:url(/fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:300;font-style:normal;font-display:swap;src:url(/fonts/outfit-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/outfit-latin-700-normal.woff2) format("woff2")}

:root{
  --primary-dark:#1C1C1E;--teal:#00B894;--teal-light:#55EFC4;--teal-deep:#123F36;
  --off-white:#FAFAF8;--warm-gray:#B4B2A9;--muted:#888780;
  --lw:clamp(280px,40vw,600px);--pad:clamp(24px,6vw,96px);--indent:calc(var(--lw) * 22 / 262);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Outfit,Arial,sans-serif;-webkit-font-smoothing:antialiased;background:var(--primary-dark);color:var(--off-white);overflow:hidden}

.bar{position:fixed;inset:0 0 auto 0;height:6px;background:var(--teal);z-index:2}
.R{position:fixed;right:-4vw;top:50%;transform:translateY(-46%);font-weight:700;line-height:.8;font-size:min(96vh,80vw);color:var(--teal-deep);user-select:none;pointer-events:none;animation:fade 1.4s ease both}

main{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
h1{margin:0}
.logo{display:block;width:var(--lw);height:auto}
.tag{padding-left:var(--indent);margin-top:calc(var(--lw) * .055);font-weight:300;font-style:italic;letter-spacing:.02em;color:var(--teal);font-size:max(21px,calc(var(--lw) * .056))}
.contact{padding-left:var(--indent);margin-top:clamp(32px,6vh,64px);color:var(--warm-gray);font-size:clamp(1.02rem,1.3vw,1.2rem)}
.contact a{color:var(--off-white);text-decoration:none;border-bottom:1px solid var(--teal);padding-bottom:2px;transition:color .2s}
.contact a:hover,.contact a:focus-visible{color:var(--teal-light)}
.contact a:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:2px}
footer{position:fixed;left:var(--pad);bottom:clamp(20px,4vh,40px);z-index:1;font-size:.75rem;letter-spacing:.08em;color:var(--muted)}

.brand,.contact{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.contact{animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media (max-width:760px){
  :root{--lw:min(86vw,440px)}
  main{justify-content:flex-start;padding-top:20vh}
  .R{top:auto;bottom:-.1em;right:-.14em;transform:none;font-size:72vh}
}
@media (max-height:520px) and (orientation:landscape){body{overflow:auto}main{min-height:520px}}

/* 404 */
.nf{padding-left:var(--indent);margin-top:clamp(28px,5vh,48px);color:var(--warm-gray);font-size:clamp(1rem,1.2vw,1.15rem)}
.nf a{color:var(--off-white);text-decoration:none;border-bottom:1px solid var(--teal)}