/*
Theme Name:  Hymel Coming Soon
Theme URI:   https://hymelconsulting.com
Author:      Hymel Engineering & Consulting, LLC
Description: Coming soon page for Hymel Engineering & Consulting, LLC
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: hymel-cs
*/

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --br9:#1E0E05;
  --br8:#3B1F0E;
  --br7:#4E2A12;
  --cu:#8B4A22;
  --cul:#A86035;
  --tp:#9E8472;
  --tpl:#C4B5A8;
  --cr:#F5F0E8;
  --crd:#EDE5D8;
  --wh:#FFFFFF;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--wh);
  color:var(--br9);
  overflow-x:hidden;
}

/* ── Background ── */
.bg-fixed{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#F9F7F4;
}
.bg-grid{display:none;}
.bg-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(249,247,244,.94) 0%, rgba(249,247,244,.7) 55%, rgba(249,247,244,.15) 100%),
    linear-gradient(to bottom, #F9F7F4 0%, rgba(249,247,244,.8) 40%, rgba(249,247,244,.1) 70%, rgba(249,247,244,0) 100%);
}
.bg-cityscape{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  overflow:hidden;
}

/* ── Nav ── */
.top-bar{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 3rem;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(158,132,114,.15);
}
.nav-logo{display:flex;align-items:center;text-decoration:none;}
.nav-logo img{height:80px;width:auto;}
.top-nav{display:flex;align-items:center;gap:2.75rem;list-style:none;}
.top-nav a{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tp);text-decoration:none;transition:color .22s;
}
.top-nav a:hover{color:var(--br9);}
.top-nav .nav-cta a{
  padding:.5rem 1.3rem;
  border:1.5px solid var(--cu);border-radius:2px;
  color:var(--cu);
  transition:background .22s,color .22s;
}
.top-nav .nav-cta a:hover{background:var(--cu);color:var(--wh);}

/* ── Hero ── */
.hero{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  padding:5rem 2rem 0;
  text-align:center;
  min-height:calc(100vh - 98px - 160px);
  justify-content:center;
}
.hero::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;
  height:220px;
  background:linear-gradient(to bottom, transparent 0%, rgba(249,247,244,1) 100%);
  pointer-events:none;z-index:2;
}

/* Eyebrow */
.eyebrow{
  display:flex;align-items:center;gap:.9rem;
  margin-bottom:2.4rem;
  opacity:0;animation:fadeUp .9s .05s var(--ease-out) forwards;
}
.eyebrow-line{display:block;width:36px;height:1px;background:var(--cu);}
.eyebrow-text{
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cu);
}

/* Logo mark */
.hero-logo{
  width:min(480px, 72vw);
  height:auto;
  margin-bottom:1.5rem;
  opacity:0;animation:scaleIn .95s .1s var(--ease-out) forwards;
}

/* Copper rule */
.rule{
  width:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--cu), transparent);
  margin:1.8rem auto;
  animation:expandRule 1s .55s var(--ease-out) forwards;
}
@keyframes expandRule{to{width:120px}}

/* Headline */
.cs-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.4rem, 1rem + 4.5vw, 5rem);
  font-weight:700;line-height:1.25;letter-spacing:-.01em;
  color:var(--br9);
  margin-bottom:1.6rem;
}
.cs-title .line{display:block;}
.cs-title .li{
  display:block;
  opacity:0;transform:translateY(24px);
  animation:slideUp .85s var(--ease-out) forwards;
}
.cs-title .line:nth-child(1) .li{animation-delay:.48s}
.cs-title .line:nth-child(2) .li{animation-delay:.6s}

/* Body copy */
.cs-desc{
  max-width:500px;
  font-size:1rem;line-height:1.8;color:var(--tp);font-weight:300;
  margin-bottom:1.4rem;
  opacity:0;animation:fadeUp .9s .72s var(--ease-out) forwards;
}

/* Sign-off */
.cs-patience{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:1.4rem;font-weight:400;
  color:var(--cu);letter-spacing:.02em;
  opacity:0;animation:fadeUp .9s .85s var(--ease-out) forwards;
  margin-bottom:4rem;
}

/* ── Gradient bridge ── */
.gradient-bridge{
  position:relative;z-index:2;
  height:140px;
  background:linear-gradient(to bottom, #F9F7F4 0%, var(--br9) 100%);
  margin-top:-1px;
}

/* ── Props bar ── */
.props-bar{
  position:relative;z-index:2;
  background:var(--br9);
  padding:3.5rem 3rem 3rem;
}
.props-bar::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:52px 52px;
}
.props-inner{
  position:relative;z-index:1;
  max-width:960px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.prop{
  display:flex;align-items:flex-start;gap:1.1rem;
  padding:0 3rem;
  border-right:1px solid rgba(196,181,168,.15);
}
.prop:first-child{padding-left:0;}
.prop:last-child{border-right:none;}
.prop-icon-wrap{
  flex-shrink:0;width:42px;height:42px;
  border:1px solid rgba(196,181,168,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-top:.15rem;
}
.prop-icon-wrap svg{
  width:18px;height:18px;stroke:var(--tpl);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.prop-title{
  font-family:'Inter',sans-serif;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wh);margin-bottom:.5rem;
}
.prop-text{
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;line-height:1.6;color:var(--tpl);font-style:italic;
}

/* ── Bottom strip ── */
.bottom-strip{
  position:relative;z-index:2;
  background:rgba(14,6,2,.96);
  padding:1rem 3rem;
  display:flex;align-items:center;justify-content:center;gap:5rem;
  border-top:1px solid rgba(196,181,168,.08);
}
.bitem{display:flex;align-items:center;gap:.6rem;}
.bitem svg{
  width:15px;height:15px;stroke:var(--cu);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}
.bitem a,.bitem span{
  font-size:.78rem;letter-spacing:.04em;color:var(--tpl);
  text-decoration:none;transition:color .2s;
}
.bitem a:hover{color:var(--crd);}

/* ── Keyframes ── */
@keyframes slideUp{
  from{opacity:0;transform:translateY(110%)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.92) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* ── Mobile ── */
@media(max-width:760px){
  .top-bar{padding:.9rem 1.25rem;}
  .top-nav{display:none;}
  .hero{padding:3.5rem 1.25rem 0;}
  .gradient-bridge{height:80px;}
  .props-bar{padding:2.5rem 1.5rem 2rem;}
  .props-inner{grid-template-columns:1fr;gap:2rem;}
  .prop{
    border-right:none;border-bottom:1px solid rgba(196,181,168,.12);
    padding:0 0 2rem;
  }
  .prop:last-child{border-bottom:none;padding-bottom:0;}
  .bottom-strip{flex-direction:column;gap:1rem;padding:.9rem 1.25rem;}
}